CodePen: la mejor plataforma front-end

Autor: | Posteado en Trucos Sin comentarios

Este mes(30dias) cumplo un año desde que comencé a dar clases de Diseño y Desarrollo web(www) mediante la Oficina del Software Libre de la Universidad de La Laguna (divulgación de desarrollo web(www) usando estándares abiertos desde equipos con GNU/Linux… un paraíso para un friki como yo). Después de mas de 15 ediciones y mas de 350 alumnos formados, tengo claro que CodePen es la preferible plataforma que pude haber elegido para empezar a dar los cursos de front-end.

CodePen es una plataforma de desarrollo creada por Chris Coyier donde podrias difundir pequeñas paginas donde inventar ejemplos y trastear con fragmentos de codigo con una destreza muy agradable. Suelo equipararlo a una «especie de Youtube® para diseñadores y programadores web», ya que podrias usarlo tanto para ver que han hecho socios de la sociedad o para inventar tu propia cuenta de cliente y inventar tus propias publicaciones.

Codepen, la preferible plataforma front-end (HTML5, Javascript, CSS3)
Codepen, la preferible plataforma front-end (HTML5, Javascript, CSS3)

Lo bueno de CodePen es que es ideal para visitantes que están aprendiendo, sin embargo a la misma vez es genial para visitantes que ya tienen experiencia, porque tiene una enorme suma de funciones mejoradas a nuestra disposición, listas para utilizar de forma cómoda y práctica.

1. Separación de presentación, contenido y programación

La 1ª mejoría de CodePen (al equivalente que otras plataformas del mismo género) es la de marcar claramente la diferencia entre cada tecnología: HTML para contenido, CSS para exposición y Javascript para programación. Esto ayuda a los visitantes nóveles a diferenciar bien cada idioma y acostumbrarse a utilizarlo en una capa distinto de otra, sin mezclarlo.

Separación de exposición (CSS3), contenido (HTML5) y programación (JS)
Separación de exposición (CSS3), contenido (HTML5) y programación (JS)

A medida que vas escribiendo código, la plataforma actualiza de forma automatica el contenido y lo va mostrando en la parte inferior (en blanco, en la imagen), donde se ven los resultados al combinar el HTML, CSS y Javascript escrito. Esto es lo que CodePen llama pen (equivale a los videos de Youtube).

2. Soporte de preprocesadores

Probablemente, una de las funcionalidades estrella por las que me gusta CodePen es su profundo abanico para utilizar los preprocesadores mas famosos. Los preprocesadores son idiomas independientes (generalmente, mas amigables, robustas y prácticos) que son capaces de traducir el codigo al idioma de destino (HTML, CSS, Javascript…), que es el único idioma que el browser es apto de «entender» de forma nativa.

Actualmente, CodePen soporta preprocesadores de HTML enfocados a la programación como HAML, Jade (de mis preferidos), Slim o Markdown, este último mas orientado a difusión rápida de contenidos. Por su parte, además soporta preprocesadores de CSS como LESS, SASS (tanto SASS como SCSS), Stylus o PostCSS, este último una auténtica navaja suiza para el preprocesado de estilos.

Soporte de preprocesadores
Soporte de preprocesadores

Por último, Codepen además admite seleccionar preprocesadores de Javascript como CoffeeScript, LiveScript o TypeScript, idiomas mas amigables que transforman en codigo Javascript válido, pese a que quizas la preferible alternativa es Babel (antes popular como 6to5) que acepta escribir codigo Javascript ECMAScript6 y traducirlo a Javascript ECMAScript5 (el que soportan la totalidad de navegadores actualmente). De esta forma logramos escribir codigo con las ultimas avances de Javascript y estar listos para el futuro.

3. Características avanzadas

Al margen del soporte de los preprocesadores mayores comentados anteriormente, CodePen además va integrando tools muy útiles. Por ejemplo, una de ellas es un preprocesador menor llamado Autoprefixer, que se encarga de agregar (de forma transparente al usuario) los prefijos de las propiedades CSS que lo requieran en el instante de escribir el código. De esta forma no tenemos que preocuparnos de esos prefijos que son tan engorrosos (y difíciles de mantener).

Autoprefixer, agrega prefijos CSS de forma transparente
Autoprefixer, agrega prefijos CSS de forma transparente

Internamente, Autoprefixer se conecta a la base de documentos de CanIUse y maneja los prefijos oportunos segun la circuntancia vigente de los navegadores. Actualmente, Autoprefixer forma parte de PostCSS donde podrias configurarlo y personalizarlo muy facilmente.

Por otra parte, además tenemos integrado Tidy, una tool que nos acepta limpiar, indentar y organizar vuestro codigo HTML de una forma rápida y sencilla. Ojo, pese a que esta característica es muy interesante, no es la solucion mágica a todos nuestros problemas de organización, sin embargo llega muy bien para visitantes que están aprendiendo. Además, en las alternativas de CodePen podrias especificar si eliges tabuladores o espacios.

Tidy, limpia el codigo HTML
Tidy, limpia el codigo HTML

Por último, en las capas de CSS y Javascript tenemos la alternativa de utilizar Linters (botones Analyze CSS o Analyze JS), que no son mas que tools que analizan vuestro codigo e intentan darnos recomendaciones para optimizar vuestro estilo de codificación. A pesar de ser una enorme herramienta, aconsejo utilizarlo con precaución y sólo por visitantes experimentados. Usuarios nóveles pueden encontrarse con inquietudes de conceptos, ya que varias de estas tools dan sugerencias subjetivos o que dependen del contexto, y que podrían confundir al usuario.

4. Añadir bienes externos facilmente

CodePen acepta además agregar bienes externos como librerías o frameworks de forma muy sencilla, evitando realizarlo directamente desde código, lo que es ideal para visitantes nóveles y muy práctico y cómodo para vagos. Desde el panel de información CTRL+I, en el apartado de CSS, se pueden agregar recursos CSS externos o frameworks o librerías predefinidas, donde logramos hallar Bootstrap y Foundation (posiblemente, los 2 frameworks CSS mas conocidos), o Animate.CSS, una librería de animaciones CSS predefinidas.

Por otra parte, en el apartado Javascript tenemos la alternativa equivalente para esta tecnología, donde tenemos multitud de librerías como jQuery, React, AngularJS, EmberJS, BackBoneJS, Polymer, HandlebarsJS entre otras, o la alternativa de agregar archivos de librerías específicas.

RawGit, maneja enlaces desde GitHub con las cabeceras apropiadas
RawGit, maneja enlaces desde GitHub con las cabeceras apropiadas

Respecto a esto último, es muy común utilizar repositorios de CDN como CDNjs o jsDelivr, donde encontraremos proyectos y librerías alojadas y preparadas para agregar en nuestras páginas, con la mejoría de ser repositorios públicos que pueden estar cacheados en el browser por la visita a otra pagina que además los utilice.

Por otro lado, si incluimos una librería javascript alojada en GitHub en nuestras páginas, es factible que nos encontremos con el próximo error: SEC7112: Script from … was blocked due to mime type mismatch o, en el caso de Google® Chrome, Refused to execute script from … because its MIME type (‘text/plain’) is not executable, and strict MIME type checking is enabled.

Esto ocurre porque GitHub no devuelve los archivos con las cabeceras correctas (application/javascript), sino con la misma cabecera siempre (text/plain). Utilizando la pagina RawGit logramos convertir la URL de GitHub en una URL de RawGit con las cabeceras correctas (e inclusive con CDN para utilizar en producción).

5. EMMET y atajos de teclado

Al equivalente que la totalidad de editores de codigo como Sublime Text u otros, que lo incluyen a través de un plugin o extensión, CodePen trae integrado de lista EMMET, un metodo para escribir codigo de una forma muy rápida y práctica. La forma mas básica se limita a escribir la etiqueta HTML deseada y, seguidamente, la tecla TAB. Con esto la frase escrita se expandirá y colocará el cursor en su interior.

Sin embargo, no se limita exclusivamente a eso. Si sabemos bien los selectores CSS logramos inventar cosas mas avanzadas, como estas:

EMMET, forma cómoda y productiva de producir código
EMMET, forma cómoda y productiva de producir código

Al margen de EMMET, además tenemos algunos atajos interesantes, como por ejemplo CTRL+/ para comentar líneas de codigo o CTRL+D para seleccionar el contenido de una etiqueta, lorem + TAB para producir un lorem ipsum u otras derivadas como nav + TAB o form + TAB.

6. Comunidad y red social de CodePen

Una de las mayores mejorías de CodePen es que dicen con una sociedad suficiente enorme (que va incrementando poco a poco) de diseñadores y programadores web(www) que van aportando contenido a su faceta de red social. De hecho, diariamente en su pagina primordial logramos hallar los mejores pen del día, donde logramos llegar a ver genuinas maravillas creativas y originales.

Podemos crear un nuevo pen que por defecto se guarda en nuestra cuenta de usuario, así como guardarlo como template para uso posterior, utilizar los aspectos sociales de la plataforma (comentarios, favoritos, numero de visualizaciones…) o ver un listado de los pens públicos de nuestra cuenta (en la cuenta gratis no es factible guardar pens privados).

Pens conocidos de nuestra propia cuenta de CodePen
Pens conocidos de nuestra propia cuenta de CodePen

De la misma forma que GitHub, en CodePen es factible inventar un fork de un pen que nos guste, que no es mas que inventar una reproducción en nuestra cuenta, para poder modificarlo a vuestro gusto, convertir fragmentos o optimizar algún ejemplo.

7. Cambio de modo de visualización

Por defecto, al inventar un nuevo pen, este se abre en modo editor, donde logramos ver las ventanas de codigo junto al ejemplo final. Si pulsamos sobre el boton Change View observaremos que hay muchos 4 modos principales:

  • Editor: Es el modo por defecto. Nos llegan los editores de codigo HTML, CSS y JS, dónde logramos escribir en ellos e ir cambiando el pen en cuestión. El esquema de la URL es el siguiente: http://codepen.io/manz/pen/XXXX

  • Details: Detalles sobre el pen. En este modo logramos ver si hay visitantes que han dejado comentarios, el numero de visualizaciones que ha tenido, cuantas veces ha sido añadido a favoritos, entre otros aspectos sociales. El esquema de la URL es: http://codepen.io/manz/details/XXXX

  • Full page: El modo a pantalla termina se muestra sin las ventanas de edición de código. Es ideal para aprovechar preferible el espacio de la ventana cuando se quiere exponer algún ejemplo a otros usuarios. El esquema de la URL es el siguiente: http://codepen.io/manz/full/XXXX

  • Debug mode: Probablemente, el mas útil, y añadido hace poco, es un modo de depuración Javascript. No hay que olvidar que CodePen es una pagina web(www) que incluye vuestro pen (otra pagina web). Si queremos depurar Javascript desde una consola, por ejemplo, estaríamos laborando sobre la pagina de CodePen y no sobre la nuestra. El modo debug elimina esta limitación, preparando una pagina con vuestro codigo específico. El esquema de la URL es el siguiente: http://codepen.io/manz/debug/XXXX

Cambio de modos de CodePen
Cambio de modos de CodePen

La versión pro de CodePen integra además funciones atrayentes como modo colaborativo para editar codigo simultáneo con mas usuarios, modo de profesor para ver cambios, así como guardar pens privados o recursos como fotografias o archivos, entre otras mejoras.

8. Exportar pen (GitHub Gist, zip o Embed pen)

CodePen además nos da la oportunidad de exportar vuestro trabajo de varias formas. Desde un Gist de GitHub a un archivo comprimido zip, pasando por la alternativa de inscrutar vuestro ejemplo directamente desde la plataforma, tal cuál lo haríamos con un video de Youtube:

Este ejemplo corresponde a un manual anunciado en Emezeta, donde hablo de como inventar Animaciones de protagonistas con CSS3 y en las que utilizo a Bernard Bernoulli (The day of the Tentacle) o a Guybrush Threepwood (Monkey Island).

9. Patrones de diseños

CodePen tiene una sección de patrones donde logramos hallar guías temáticas para inventar distintos cosas muy habituales, como por ejemplo, acordeones (bloques que se despliegan), menús, gráficas, pestañas o breadcrumbs (índice de secciones), paginación, newsletters (boletines de email marketing), entre muchos otros conceptos.

Patterns en CodePen
Patterns en CodePen

Dentro de cada sección encontraremos muchos pens vinculados con dichas temáticas. De esta forma, nos puede servir de tanto de inspiración para inventar nuevos desarrollos, así como de principio de busqueda o para curiosear entre ejemplos ajenos y estudiar cada vez mas sobre layout y desarrollo web.

10. Botón «RUN»

Por último, hay que recordar que por defecto, la plataforma CodePen actualiza nuestros ejemplos a medida que los vamos escribiendo, por lo que en algunos casos esa sigue recarga puede llegar a ser suficiente molesta. Para eludir este comportamiento, logramos ir al apartado Behavior presionando CTRL+I y desmarcando la alternativa Want a Run Button? / Auto update preview.

Activa el boton «Run» de CodePen
Activa el boton «Run» de CodePen

Con ello conseguiremos deshabilitar la recarga continua, que sólo se modificará cuando pulsemos el boton Run que nos aparece. Esto evita ciertos problemas que nos pueden surgir cuando tenemos una conexión mala (o problemas de conectividad), cuando estamos haciendo bucles en Javascript (especialmente con los while) o varias otras ocasiones similares.

Bola extra: Chuletas de HTML5/CSS3/JS

Recuerda que si te interesa el front-end y deseas aprender, teneis a tu disposición las siguientes chuletas que he creado, en formato PDF listas para imprimir. Dichas chuletas son gratuitas, pese a que si valoras su sacrificio de desarrollo, siempre podrias efectuar una modesta donación 🙂

Chuletas de HTML5, CSS3 y Javascript
Chuletas de HTML5, CSS3 y Javascript
  • LenguajeCSS: Una chuleta dividida en 2 partes principales: las propiedades tradicionales de CSS3 y las mas recientes de CSS3.
  • LenguajeHTML: Una chuleta dividida en 2 partes principales: las etiquetas HTML5 de texto y de agrupación, así como las etiquetas multimedia o de formularios de HTML5.
  • LenguajeJS: Dos chuletas divididas en 2 partes principales: los objetos de Javascript y sus métodos asociados, así como el DOM/BOM (Document/Browser Object Model).

Y esto es todo de momento. En otra ocasión dejaremos un poco de lado el front-end, y hablaremos del temible monstruo del back-end (dramatización).

Emezeta blog



El mejor vídeo del día Trucos de Android


Nota: La creación de esta noticia le pertenece al autor original que aparece en la firma de más arriba. No hemos eliminado en ningún momento los enlaces oficiales, ni tampoco intentamos perjudicar su posicionamiento en los motores de búsqueda.

El Administrador de QueEsGoogle.Com

Agrega tu comentario