JavaScript Archives - Punto Geek

Directorio curado de recursos JavaScript

12 diciembre, 2017 por Juanguis

javascript

Hace unos días compartí con ustedes un par de posts interesantes como el checklist para saber si tu front-end está completo o el directorio curado de cursos de programación gratis, y hoy les tengo otro que seguramente les va a encantar.

JS.Directory es un directorio curado muy útil donde frecuentemente van colgando recursos referentes al «ecosistema» JavaScript. Un lugar esencial para todo desarrollador que siempre está ávido de nuevos recursos de programación.

El directorio tiene (hasta el momento) las siguientes categorías:

Ejemplos
Boilerplates
Tools
Componentes
Documentación
Artículos
Libros
Videos
Podcasts
Comunidades

Día a día van agregando nuevos recursos al directorio, aunque si ustedes lo desean pueden agregar los suyos ya que es una lista abierta y colaborativa.

Paisajes digitales creados con WebGL

21 noviembre, 2013 por Juanguis

WebGL es una tecnología relativamente nueva, exactamente se trata de una API JavaScript con la que es posible crear gráficos interactivos en 3D y gráficos en 2D sin la necesidad de instalar algún plugin de terceros. Una de las ventajas más grandes que tiene WebGL es que está totalmente integrada a los navegadores lo que permite aceleración directa por GPU.

WebGL en su poco tiempo de vida ha tomado gran fuerza por las increíbles experiencias que se pueden crear con ella, solo ayer les presentaba la experiencia del viaje por la Tierra Media, otro gran avance de la tecnología es que el nuevo PS4 utiliza WebGL para la presentación de su interfaz gráfica.

El desarrollador web y francés Guillaume ha creado una serie de espectaculares e infinitos paisajes tridimensionales, haciendo solo uso de la tecnología WebGL. Cada uno de los paisajes presenta un arte y diseño distinto, algunos más detallados que otros pero igual de interesantes y llamativos.

Otro maravilloso ejemplo de las capacidades de las tecnologías web. ¿Qué tal les parecieron?

Vía: Twitter

MicroJS: Cientos de pequeñas librerías JavaScript para tus necesidades

20 noviembre, 2013 por Juanguis

Nuevos frameworks, librerías, tecnologías y lenguajes surgen todos los días, cada una tratando de solucionar un problema en concreto especialmente cuando se trata de librerías JavaScript, gracias a su enredado poder se puede solucionar problemas muy específicos en cuanto a sitios web se refiere, como la selección avanzada en el DOM, realizar AJAX, procesar formatos de información como JSON o CSV o algo más avanzado como un motor de animaciones CSS pero con JS.

La mayoría de estas increíbles librerías poseen un tamaño considerable lo que a largo plazo hará que tus aplicaciones y sitios web se vuelvan lentos, robustos y especialmente pesados, una de estas razones es que a veces la librería o el framework es un exceso para el problema que estás tratando de resolver, es por esto que siempre debes hacer una búsqueda detallada y muy bien seleccionada de las herramientas o librerías que utilizarás en tus proyectos.

Es por está razón que hoy les presento MicroJS, un sitio web que recopila cientos de librerías JavaScript para solucionar problemas muy específicos como la utilización de HTML5 en todos los navegadores, definición de funciones, clases y prototipos o controlar la historia del navegador o sus cookies, la principal característica es que todas las librerías pesan menos de 5 kb, es decir, está enfocado en pequeñas pero poderosas micro librerías, las cuales mejorarán el peso final de tu aplicación o sitio web.

MicroJS

Herramientas online para probar código en vivo

26 octubre, 2013 por Juanguis

stoy seguro que se han encontrado con la situación de necesitar probar un segmento de código rápidamente para ver que tal funciona o tal vez porque se te ocurrió una idea genial y quieres implementarla al vuelo, o también porque no estás en tu computador de trabajo y necesitas algo similar a tu IDE o Editor de código para jugar un rato con algo de código.

Te cuento que ya no es necesario una aplicación de escritorio ni un editor de código ni un lento y pesado, pero robusto IDE para editar código, ahora ya existen aplicaciones y herramientas online para ejecutar cualquier código que necesites y ver los cambios en vivo a medida que escribes el código.

A continuación les dejo una lista de editores de código en vivo y en la web, todos absolutamente gratuitos y sin nada que envidiarle a un editor de código como aplicación de escritorio:

CodePen

CodePen te permite incluir tu HTML, CSS y JavaScript en los panales destinadas para cada tecnología web y ver en vivo como cambia la forma final de tu código mientras lo editas. Permite guardar todos tus códigos, compartirlos, incrustarlos en otros sitios web e incluso ejecutarlos en los smartphones.

JSFiddle

JSFiddle es uno de los más populares porque es uno de los más completos, te permite agregar cualquier librería de JavaScript o CSS, pero lo mejor es que ya tiene un listado con docenas de las librerías más populares como jQuery, Mootools, YUI, e incluso frameworks JavaScript como AngularJS o EmberJS, permite además hacer peticiones AJAX dentro del editor, limpiar el código JavaScript y guardar varias versiones de tu edición.

Mozilla Thimble

Mozilla Thimble es uno de los últimos esfuerzos por la empresa Mozilla, quien esta detrás del popular navegador Firefox, de llevar a más personas las hermosas capacidades de las tecnologías web, aunque no tiene muchas opciones, es uno de los más rápidos, como punto a favor te muestra errores en tu HTML rápidamente y subrayado de etiquetas, puedes incluir CSS y JavaScript en el documento sin problemas, pero no tiene guardado de código, así que ten cuidado con cerrar la pestaña del navegador.

dabblet

dabblet es un editor enfocado al CSS y HTML, tiene dos vistas principales, el HTML y el resultado o el CSS y el resultado, como lo pueden notar esta enfocado al CSS de la página, puedes escribir cualquier CSS que se te ocurra y funcionará directamente en la previsualización, la forma final de tu código se puede compartir o ver a pantalla completa, también guarda todos las versiones que hagas del código.

CSSDeck

CSSDeck, como su nombre lo indica está completamente enfocado al CSS, te muestra un panel pequeño para el HTML, uno más grande para el CSS y por último el panel con el resultado de tu código, como punto a favor de CSSDeck, puedes cambiar el fondo de la página de resultados y crear enlaces únicos que puedes compartir para que cualquiera vea tu nueva creación, por último puedes descargar el resultado en un archivo .html.

JSBin

Lo mejor para el final, JSBin es una completa joya en cuanto a editores de código online se refiere, puedes incluir CSS, JS y HTML, agregar una o varias de las más de 50 librerías que tiene disponibles para importar, por supuesto puedes compartir el código final, incrustarlo en sitios web seleccionando que paneles deseas mostrar en el resultado final, exportar el código a un Gist de Github, guardarlo como plantilla y navegar desde la misma ventana a través de todos tus Bins.

Juega Ahorcado en el navegador con HangmanJS

24 octubre, 2013 por Juanguis

Recuerdo mi primer intento de jugar Ahorcado hace muchos años, no fui capaz de adivinar la palabra completa así que morí por asfixia, menos mal lo único que murió fue el muñequito que dibujo mi hermana en el papel, representando mi ignorancia y falta de vocabulario.

Si todavía recuerdas este juego y extrañas esos tiempos en que no había tantos dispositivos electrónicos para entretenernos, te comento que ahora puedes recordarlo jugandolo en cualquier navegador con JavaScript activado. HangmanJS, es un sencillo juego que simula perfectamente el clásico juego en el papel y funciona exactamente igual, empiezas a adivinar las palabras en Inglés escribiéndolas en la caja de texto y si fallas aparecerá una nueva parte de tu cuerpo, acercándote cada vez más a una agonizante muerte por asfixia (?), pero no es tan difícil después de todo, se puede ganar:

Lo mejor de este juego, hablando con desarrolladores, es que el código completo está libre en Github, así puede mejorarlo, cambiarle la interfaz o hacerlo imposible de ganar.

HangmanJS

Muestra memes en la consola de Chrome [Desarroladores]

30 junio, 2013 por Juanguis

Si eres un programador con un buen sentido del humor, y seguro lo eres, te encantará este pequeño script creado por Adrian Cooney.

Se trata de console.image, una sencillisima librería de JavaScript que permite mostrar memes en la consola de Google Chrome, extendiendo la utilidad console que trae por defecto Google Chrome y con la cual se puede hacer debugging de forma sencilla.

En este momento soporta más de 100 memes diferentes a los cuales se les puede especificar el texto superior y el texto inferior y hasta el tamaño de la imagen.

Su uso es muy sencillo, solo basta con importar el script a nuestro documento HTML y luego ejecutarlo:

<script src="console.image.js" type="text/javascript"></script>

<script type="text/javascript">

console.image("http://i.imgur.com/oGiMR.gif");

</script>

Si, la librería no tiene una gran utilidad, pero sirve para jugar alguna broma o un juego de imágenes con tus compañeros programadores, tu imaginación y tu sentido del humor si la van a utilizar mucho.

console.image

13 herramientas online para minificar código PHP, CSS y JavaScript

27 marzo, 2013 por Juanguis

compressed-archive Minificar código puede ser de muchísima utilidad para optimizar nuestro sitio web ya que los archivos serán más livianos y por ende se mejorará la velocidad de carga.

Esto es una gran ventaja desde varios puntos de vista, y uno de ellos puede ser el SEO, ya que a Google le gusta que los sitios carguen rápido y estén bien estructurados.

A continuación les dejo un par de herramientas muy útiles para minificar códigos en 3 de los lenguajes más utilizados: PHP, CSS y JavaScript.

Comprimir código PHP

Comprimir código CSS

CSS Compressor & Minifier
Minifier
Pretty Diff (también soporta otros lenguajes)
Minify CSS
CSS Minifier

Comprimir código JavaScript

Visto en I Love Free Software – 1 – 2 – 3

Browserhacks: Encuentra la solución a problemas de CSS en todos los navegadores

17 marzo, 2013 por Juanguis

La Web en su filosofía de ser abierta, compatible y disponible para todos a veces supone un buen dolor de cabeza para los desarrolladores quienes muchas veces (por no decir siempre) nos encontramos con problemas de compatibilidad entre los navegadores, creaste algo genial, funciona y se ve bien, corre rápido, pero cuando vas a probarlo en otro navegador es un desastre total, no es de la quinta parte de como se ve y se comporta en el otro navegador.

Encontrar las soluciones a estos problemas de compatibilidad no es nada fácil, muchas veces no sabes ni que utilizar para solventarlos, pero ahora te será más fácil con Browserhacks, una colección de hacks y trucos de CSS y Javascript que te permitirán resolver mucho más rápido los diarios problemas que surgen cuando se está desarrollando para la Web.

Tienen trucos para todos los navegadores, Chrome, Firefox, Internet Explorer, Opera y Safari, resalto Internet Explorer porque como bien sabemos es el que más problemas da, menos mal Microsoft lo ha hecho más compatible y actualizado en las últimas versiones, para utilizar un Hack solo basta copiar y pegarlo en tu hoja de estilo o archivo de Javascript y ya esta.

Browserhack

Vía: Kabytes

jPages – Paginando resultados fácilmente con jQuery

16 abril, 2012 por Juanguis

Si estás en busca de una forma fácil y rápida de paginar resultados, este plugin de jQuery te vendrá como anillo al dedo. Se trata de jPages, y lo que permite es lo que describe el título de la entrada. La manera de invocarlo, al igual que todo aquello hecho con jQuery resulta casi que ridículo, de lo sencillo que es:

/* when document is ready */ $(function() { /* initiate plugin */ $("div.holder").jPages({ containerID: "itemContainer" }); });

Con este plugin tendrás la posibilidad de paginar no sólo texto, sino además galerías de imágenes, con efecto de aparición incluido.

Documentación: jPages (Descargar)

Visto en: Kabytes

Recurso online para aprender jQuery

9 enero, 2012 por Juanguis

Una de las librerías con mayor éxito para el desarrollo web ha sido, es y será por un buen tiempo más jQuery. Aunque es muy sencilla de utilizar, he de ahí su popularidad, existen recursos que nos brindar un panorama claro sobre como implementar esta herramienta en nuestros proyectos.

Tenemos por supuesto como primera instancia el sitio oficial así como un buen número de tutoriales, blogs y foros regados a lo largo y ancho de Internet. Entre ellos se encuentra el siguiente libro online que les traigo directo a la puerta de su hogar. Es bastante básico, pero si llegaste a esta entrada, supongo que buscas algo similar.

El libro lo puedes consultar desde aquí.

Espero que les sea de utilidad, y puedan con ello salir de uno que otro apuro.

Visto en: wwwhatsnew