Si sigues a Chris Coyier en Twitter, no hay duda de que se han visto algunas menciones en los últimos meses de un proyecto no tan secreto llamado CodePen. Chris nos prometió que esta nueva herramienta se uniría a las filas de jsFiddle y Tinkerbin, sirviendo como una especie de área de juegos en línea para experimentar y compartir demostraciones de CSS, HTML y JavaScript.
Como un niño en diciembre que espera ansiosamente el día de Navidad, me muero por ver qué es lo que Chris y su equipo idearían. Afortunadamente, la Navidad ha llegado. CodePen es un proyecto en vivo y no puedo esperar para contarte todo sobre él.
Buena compañía
Recientemente, escribí un artículo que compara los cinco mejores campos de juego en línea para HTML, CSS y JavaScript. En este artículo, me sumergí en cómo funcionan cada una de las siguientes soluciones y describí lo que hago y lo que no me gusta de cada una de ellas:
- CSSDesk
- Js bin
- jsFiddle
- Dabblet
- Tinkerbin
Estas herramientas son una leve adicción para mí y simplemente no puedo tener suficiente. Como puede ver, el mercado está repleto de opciones realmente excelentes, todas las cuales tienen sus propias fortalezas y debilidades.
Dado que las herramientas existentes ya eran tan buenas, estaba bastante ansioso por ver la dirección única que tomaría CodePen y si se convertiría o no en mi aplicación estándar para experimentos web rápidos. Vamos a ver si está a la altura de esa esperanza.
Conoce CodePen
Como se puede ver en la captura de pantalla anterior, CodePen es un sitio de aspecto atractivo. Al captar la IU oscura, la paleta de colores de CodePen se parece mucho a la de Photoshop CS6 con algunas texturas de lino similares a las de Apple en buena medida.
Además, un importante consejo para los diseñadores y desarrolladores talentosos detrás de este sitio para dar un paso adicional para que sea receptivo.
Una experiencia más social
Lo que es evidente para mí de inmediato acerca de CodePen es que este sitio cambia un poco el enfoque en comparación con los demás en su clase. Con cada otro sitio que he visto de esta manera, la página de inicio abre el editor. El énfasis está en hacer que usted codifique tan pronto como se cargue la página. Existen funciones para compartir, pero usted lo hace directamente mediante el pegado de enlaces.
CodePen sin embargo, recoge el enfoque Dribbble. La página de inicio está llena de ejemplos de usuarios recientes para que pueda navegar y ajustar. Actualmente hay tres fuentes para elegir: Selecciones del editor, Popular y Reciente.
Como puedes ver, al igual que Dribbble, ¿cada uno? ¿Pen? Se muestra con dos estadísticas: tiempos vistos y tiempos amados. Además, como es de esperar, puedes seguir a los usuarios que publican contenido que disfrutas.
Para mí, este modelo es infinitamente más propenso a levantarse y despegar. En lugar de centrarse en los desarrolladores individuales, esta aplicación tiene un fuerte enfoque en la comunidad que asegurará que los usuarios tengan interés en regresar semanalmente o incluso a diario para ver lo que otros usuarios han publicado.
Además, nadie puede resistir el atractivo de ver crecer sus propios números cuando publican algo, por lo que los autores talentosos tendrán una razón clara para seguir publicando nuevas publicaciones.
Usando CodePen
Cuando vi el editor de CodePen por primera vez, inmediatamente me encantó. Es limpio, atractivo y simplemente hace un uso excelente del espacio disponible.
Diseño
Los otros sitios de código de juego han estado intentando descifrar el sistema perfecto para mostrar su código y su vista previa en conjunto, pero para ser honesto, eventualmente me frustro con ellos por una razón u otra. Sin embargo, CodePen parece que ha golpeado la pelota fuera del parque.
Como puede ver, hay un diseño de tres columnas para HTML, CSS y JavaScript, que se asienta sobre una vista previa en vivo de ancho completo que se actualiza sin la molestia de las actualizaciones manuales.
Características impresionantes
Cada módulo de código se puede expandir para ocupar todo el ancho de las tres columnas, ocultando así los otros módulos, con un atajo de teclado rápido. Desafortunadamente, estos accesos directos están en desacuerdo con los accesos directos incorporados de Safari, pero también puede hacer clic en ?? 1? Texto para expandir la columna para que no sea gran cosa.
Los chicos detrás de CodePen hicieron todo lo posible para asegurarse de que todo lo último en codificación esté disponible para usted. Por ejemplo, el módulo HTML permite utilizar HAML, Markdown y Slim. Mi característica favorita aquí está completamente oculta: ¡CodePen es compatible con ZenCoding! Esa fue mi única solicitud de función para esta nueva herramienta y estoy encantado de que haya logrado el corte.
Al saltar al módulo CSS, aquí tiene acceso a LESS, Sass y SCSS, así como a varias opciones de restablecimiento y prefijo gratis, que le permite usar CSS3 sin el alboroto de los prefijos del navegador. Otra característica impresionante: la vista previa en vivo aún se actualiza automáticamente, incluso si usas preprocesadores (Tinkerbin no).
Finalmente, el módulo JavaScript le permite usar CoffeeScript, así como agregar algunas bibliotecas comunes como jQuery y MooTools.
Si accedes a la configuración de la cuenta, puedes modificar todas tus configuraciones predeterminadas para que no tengas que configurar tu flujo de trabajo cada vez. Convierta SCSS en su lenguaje CSS predeterminado, cambie a una combinación de colores claros o elija incluir siempre Modernizr.
Ir más lejos
Cuando está codificando su propia pequeña demostración, CodePen le ofrece cuatro opciones en la parte superior de la pantalla: Actualizar, Bifurcar, Detalles y Compartir (el bolígrafo de otra persona le da los botones Bifurcar, Compartir y Amar). El sistema de cuenta CodePen se basa en la API de GitHub para que los fanáticos de Git se sientan como en casa.
Hay un interruptor en la parte superior derecha de la interfaz que le lleva desde la vista Editor a la vista Detalles. El último de estos se muestra a continuación:
Aquí puede obtener una descripción completa de la pluma, ver estadísticas interesantes y dejar? comentarios
¿Cuál es el veredicto?
Tenía muchas esperanzas para CodePen, expectativas que serían difíciles de cumplir para cualquier producto gratuito.Afortunadamente, es todo lo que quería y más. Como dije antes, me encantaron todos los intentos anteriores en una aplicación como esta, pero todos parecían estar un poco apagados y cada uno era frustrante a su manera.
CodePen, por el contrario, es simplemente un placer de usar. No solo es la herramienta más atractiva de su tipo, sino que también es la más funcional. Todas las pequeñas características y opciones que quiero usar están presentes y son fáciles de implementar, y el aspecto social hace que la experiencia sea mucho más de lo que se me ocurre, por lo que este sitio será enorme.
¿Qué piensas?
Ahora que has visto mi perorata, salta al sitio de CodePen, dale una vuelta y regresa para decirme qué piensas de ello.
¿Es la mejor utilidad de su tipo? ¿Cómo es mejor que los otros cinco mencionados anteriormente? ¿Cómo es peor? Me encantaría escuchar tus pensamientos!