8 características impresionantes de CodePen para programación y desarrollo web

Comenzar con el desarrollo web de JavaScript puede ser un proceso frustrante, pero existen herramientas que lo hacen más fácil.

CodePen.io es un entorno de codificación en el navegador diseñado tanto para aprender a codificar como para crear prototipos rápidamente de ideas con una molestia mínima.

En este artículo, analizamos algunas de las características del sitio y cómo pueden ayudarlo a convertirse en un mejor programador..

¿Qué es CodePen?

CodePen proporciona algo llamado bolígrafo, que incluye tres ventanas diferentes para HTML, CSS y JavaScript, además de un panel de vista previa que se actualiza en tiempo real a medida que escribe.

Si bien se usa con frecuencia para que los desarrolladores web muestren ideas para sitios web, también es un gran lugar para aprender los conceptos básicos del desarrollo web front-end. Estas son las características más notables que necesita saber al usar CodePen.

1. Preprocesadores

Los preprocesadores son lenguajes interpretados o compilados diseñados para simplificar la codificación. Pueden agregar características a un idioma para mayor comodidad y hacer que el código sea más fácil de leer. En el desarrollo web, se utiliza una combinación de preprocesadores para HTML, CSS y JavaScript para crear código limpio rápidamente.

Si está aprendiendo desarrollo web y quiere probar diferentes preprocesadores, CodePen le permite cambiar los preprocesadores sobre la marcha y ver el código que compila en tiempo real. Cada uno de los tres paneles de la aplicación CodePen tiene un menú desplegable en la parte superior derecha. Seleccionar Ver Compilado HTML / CSS / JS Para ver cómo se interpretará el código..

En esta pluma, hemos creado un sitio simple usando Haml y Hablar con descaro a para el estilo de un texto de encabezado. Seleccionando Ver compilado Muestra el estándar HTML y CSS. En este ejemplo la diferencia es mínima. Sin embargo, al aprender un nuevo idioma, puede ser útil ver cómo se ve el código preprocesado una vez compilado.

2. Recursos externos

Junto con el soporte nativo para preprocesadores, CodePen admite scripts externos. Esto lo convierte en el lugar perfecto para obtener experiencia práctica con las bibliotecas para sus proyectos personales, o para repasar las bibliotecas de aplicaciones web populares como React 7 Los mejores tutoriales gratuitos para aprender a reaccionar y crear aplicaciones web Los 7 mejores tutoriales gratuitos para aprender a reaccionar y elaborar Las aplicaciones web gratuitas Los cursos gratuitos rara vez son tan completos y útiles, pero hemos encontrado varios cursos React que son excelentes y que le permitirán comenzar con el pie derecho. Lee mas .

Para agregar una biblioteca externa, abra la Ajustes panel de su pluma, y ​​diríjase a la pestaña de JavaScript. Hay dos formas de agregar recursos, ya sea agregando la URL del recurso manualmente o buscando.

Utilizamos esta función en nuestro artículo sobre animación web con mo.js, junto con el preprocesamiento de Babel..

Vea el ejemplo de Pen Mojs MUO por Ian (@Bardoctorus) en CodePen.

Sí, las plumas CodePen se pueden incrustar! Continúe y haga clic en el panel de vista previa de arriba para ver los resultados del tutorial Mo.js!

Otros bolígrafos pueden ser importados al igual que las bibliotecas externas. Esto significa que puede tomar elementos de bolígrafos escritos previamente para usarlos como módulos en sus bolígrafos nuevos. El bolígrafo simple de Adam's CodePen es un buen ejemplo de esto..

3. Plantillas

Cuando está aprendiendo nuevos conceptos o probando nuevas ideas, con frecuencia usa componentes similares y vuelve a leer los mismos pasos para comenzar. CodePen permite la creación de lápices de plantilla que pueden reducir la repetición, y le permite ir directo al punto.

Para crear una plantilla, abra un nuevo lápiz, realice los cambios y seleccione la Modelo control deslizante en el menú de configuración.

Hasta hace poco, los usuarios gratuitos solo podían hacer tres plantillas, pero ahora todos los usuarios pueden tener tantas plantillas en su cuenta como quieran. Perfecto para comenzar una nueva idea con el mínimo retraso.!

4. Modo de colaboración

La capacidad de colaborar y enseñar con CodePen puede ser su mayor activo. Ya hay una gran cantidad de excelentes herramientas de colaboración para programadores, pero el enfoque de CodePen es simple e intuitivo..

Los usuarios profesionales de CodePen pueden crear una nueva pluma y abrirla para colaborar bajo el Cambio Vista menú. Esto convierte el enlace del bolígrafo en una invitación que se puede compartir y que se adapta a un número de personas en función de su plan CodePen Pro..

En este caso, escribí HTML mientras un amigo actualizaba el CSS en tiempo real, con un cursor etiquetado donde estaban trabajando..

Cualquier persona con el enlace puede unirse y usar la función de chat en el navegador, independientemente de si es un usuario profesional o incluso tiene una cuenta de CodePen. Siempre que el guardado automático esté desactivado, solo el propietario del bolígrafo puede guardar cualquier cambio, lo que lo convierte en una forma segura de abrir su código a otros sin riesgo..

La naturaleza abierta de este modo es beneficiosa para los principiantes, ya que puede invitar a casi cualquier persona a su pluma para que lo guíe a través de un concepto difícil. También es un modo práctico para conocer a su alrededor, ya que es perfecto para entrevistar a posibles empleados, y ya se ha utilizado profesionalmente de esta manera!

5. Modo profesor

El modo profesor permite a un usuario Pro alojar una sala en la que solo ellos pueden editar el código. Entre 10 y 100 usuarios pueden ver y chatear según el plan Pro del host..

El modo Profesor permite la flexibilidad entre el aprendizaje en el aula y el aprendizaje a distancia, o una combinación de los dos. El uso del modo Profesor permitirá que las personas que se encuentran al final de la clase tengan la misma experiencia que los que están al frente y que el profesor muestre correcciones de errores que se actualizarán en tiempo real.

6. Modo de presentación

El modo de presentación está diseñado, como era de esperar, con el código de presentación en mente. La aplicación se muestra en una vista simplificada, diseñada para funcionar con proyectores superiores. CodePen ha optimizado el modo de presentación para su uso en conexiones de internet de baja velocidad y hardware más débil.

Los lectores astutos pueden haberse dado cuenta de que la versión gratuita de CodePen proporcionaría precisamente esta función, aunque el modo Pro tiene algunas características útiles. El diseño, el tamaño de la fuente y los temas se pueden cambiar rápidamente sobre la marcha para adaptarse a casi cualquier configuración, y al mostrar el enlace al lápiz se abre una URL acortada de tamaño jumbo que facilita compartir el proyecto.

Estos pequeños cambios, junto con la posibilidad de escalar la ventana de vista previa para adaptarse a lo que se muestra, hacen que el modo de presentación sea perfecto tanto para los profesores como para los desarrolladores que presentan ideas a los colegas. El modo de presentación también es una forma simple y atractiva de presentar el código si se encuentra entrevistando para un puesto de programación Cómo prepararse para una entrevista de programación Cómo prepararse para una entrevista de programación El mejor consejo para programar entrevistas. Cualquier entrevista puede ser desalentadora. ¿Sabes lo suficiente como para pasar? ¿Serán tus soluciones lo suficientemente buenas? ¿Qué pasa si te ahogas? Aplicar estos cinco consejos. Lee mas .

7. Patrones

La búsqueda de inspiración se hace mucho más fácil con las colecciones de patrones de diseño de CodePen.

Cada categoría es una colección de código de ejemplo proporcionado por usuarios de CodePen para tareas específicas. ¿Está buscando una manera de crear botones dinámicos para su sitio? ¿Acordeones de menús? Hay una gran cantidad de categorías para encajar casi cualquier ejemplo.

Estos patrones también son una excelente manera de aprender cómo funcionan los botones interactivos y las diferentes formas en que pueden funcionar las interfaces dinámicas de usuario.

8. Emmet

Emmet, anteriormente conocido como Zen Coding, es considerado como el mejor ahorrador de tiempo para el desarrollo de HTML y CSS. El complemento toma parte del código que se encuentra escribiendo mucho y los convierte en accesos directos simples.

Verlo en acción es mejor que explicarlo, así que tome la configuración habitual de un documento HTML:

Agregar esto a cada documento HTML se ha reducido a dos acciones. Usando Emmet, escriba ! y pulsa el Lengüeta llave. mágico!

Emmet está activo como estándar en CodePen y es especialmente útil si está intentando aprender un nuevo concepto en JavaScript y necesita crear el HTML y CSS compatibles rápidamente..

Desarrolle con CodePen para una mejor experiencia

CodePen es una excelente herramienta para desarrolladores web, y el campo está en continuo crecimiento. JavaScript es un gran lenguaje para aprender para un futuro en el desarrollo web.

Hay algunos excelentes tutoriales y cursos disponibles para las personas que desean comenzar con JavaScript. Really Learn JavaScript con los 5 mejores cursos de Udemy. Really Learn JavaScript con los 5 mejores cursos de Udemy. JavaScript es el lenguaje de programación de la web. Si tiene una razón para aprender JavaScript, estos cinco excelentes cursos de Udemy podrían ser el lugar para comenzar su viaje de codificación. Lea más, y CodePen es un excelente entorno para probar sus nuevas habilidades.

Explorar más sobre: ​​CSS, HTML, JavaScript, Desarrollo Web.