Home-theater-designers
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 de ideas rápidamente con un mínimo de molestias.
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 lápiz , que consta de 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 funciones 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 sobre desarrollo web y desea probar diferentes preprocesadores, CodePen le permite cambiar de preprocesador 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. Seleccione Ver HTML / CSS / JS compilado para ver cómo se interpretará el código.
En este lápiz, hemos creado un sitio simple usando Haml y Hablar con descaro a para darle estilo al texto del encabezado. Seleccionando Ver compilado muestra el HTML y CSS estándar. En este ejemplo, la diferencia es mínima. Sin embargo, mientras aprende un nuevo idioma, puede ser útil ver cómo se ve el código preprocesado una vez compilado.
2. Recursos externos
Además del soporte nativo para preprocesadores, CodePen admite scripts externos. Esto lo convierte en el lugar perfecto para obtener experiencia práctica con bibliotecas para sus proyectos personales o para repasar bibliotecas de aplicaciones web populares como React.
Para agregar una biblioteca externa, abra el Ajustes panel de su lápiz y diríjase a la pestaña JavaScript. Hay dos formas de agregar recursos, ya sea agregando la URL del recurso manualmente o mediante una búsqueda.
Usamos esta función en nuestro artículo que cubre animación web con mo.js , junto con el preprocesamiento de Babel.
Ver la pluma Ejemplo de Mojs MUO por Ian @Bardoctorus ) en CodePen.
¡Sí, los bolígrafos CodePen se pueden incrustar! ¡Continúe y haga clic en el panel de vista previa de arriba para ver los resultados del tutorial de Mo.js!
Se pueden importar otros bolígrafos al igual que las bibliotecas externas. Esto significa que puede tomar elementos de bolígrafos escritos previamente para usarlos como módulos en sus nuevos bolígrafos. Usuario de CodePen Adam's Encuesta simple La pluma es un buen ejemplo de esto.
3. Plantillas
Cuando está aprendiendo nuevos conceptos o probando nuevas ideas, con frecuencia utiliza componentes similares y vuelve a leer los mismos pasos para comenzar. CodePen permite la creación de bolígrafos de plantilla que pueden eliminar la repetición y permitirle ir directo al grano.
Para crear una plantilla, abra un bolígrafo nuevo, realice los cambios y seleccione el Plantilla control deslizante en el menú de configuración.
https://vimeo.com/221428690
Hasta hace poco, los usuarios gratuitos solo podían crear tres plantillas, pero ahora todos los usuarios pueden tener tantas plantillas en su cuenta como deseen. ¡Perfecto para comenzar con una nueva idea con el mínimo retraso!
4. Colaboración de moda
La capacidad de colaborar y enseñar con CodePen puede ser su mayor activo. Ya existe 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 un nuevo lápiz y abrirlo a la colaboración en el Cambio Vista menú. Esto cambia el enlace del bolígrafo en una invitación para compartir que se adapta a un número creciente de personas según su plan CodePen Pro.
mejor distribución de Linux para desarrollo web
En este caso, escribí HTML mientras un amigo actualizaba el CSS en tiempo real, con un cursor etiquetado identificado donde estaban trabajando.
Cualquiera que tenga el enlace puede unirse y utilizar 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 lápiz puede guardar los cambios, lo que lo convierte en una forma segura de abrir su código a otras personas sin riesgo.
La naturaleza abierta de este modo es beneficiosa para los principiantes, ya que puede invitar a casi cualquier persona a su bolígrafo para que lo guíe a través de un concepto difícil. También es un modo útil para conocer su camino, ya que es perfecto para entrevistar a empleados potenciales y ya sido utilizado profesionalmente de esta manera !
5. Modo profesor
El modo Profesor permite a un usuario Pro albergar una sala en la que solo ellos pueden editar el código. Entre 10 y 100 usuarios pueden mirar y chatear según el plan Pro del anfitrión.
El modo Profesor permite flexibilidad entre el aprendizaje en el aula y el aprendizaje a distancia, o una combinación de ambos. El uso del modo Profesor permitirá que las personas que están al final de la clase tengan la misma experiencia que las que están al frente y que el maestro 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, teniendo en cuenta la presentación del código. La aplicación se muestra en una vista simplificada, diseñada para funcionar con retroproyectores. CodePen ha optimizado el modo de presentación para su uso en conexiones a Internet de menor velocidad y hardware más débil.
Es posible que los lectores astutos ya se hayan 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 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 aparece una URL abreviada de tamaño gigante que facilita compartir el proyecto.
Estos pequeños cambios, además de poder escalar la ventana de vista previa para que se ajuste a lo que esté mostrando, hacen que el modo de presentación sea perfecto tanto para los profesores como para los desarrolladores que presentan ideas a sus colegas. El modo de presentación también es una forma sencilla y de aspecto limpio de presentar el código si se encuentra en una entrevista para un puesto de programación.
7. Patrones
Buscar inspiración es mucho más fácil con las colecciones de CodePen de Patrones de diseño .
Cada categoría es una colección de código de ejemplo proporcionado por los usuarios de CodePen para tareas específicas. ¿Está buscando una forma de crear botones dinámicos para su sitio? ¿Menús de acordeón? Hay una gran cantidad de categorías que se ajustan a 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 de usuario dinámicas.
8. Emmet
Hormiga , anteriormente conocido como Zen Coding, es ampliamente considerado como el mayor ahorro de tiempo para el desarrollo de HTML y CSS. El complemento toma parte del código que escribe mucho y lo convierte en atajos simples.
Verlo en acción es mejor que explicarlo, así que tome la configuración habitual para un documento HTML:
Agregar esto a cada documento HTML se ha reducido a dos acciones. Usando Emmet, escriba ! y golpea el Pestaña llave. ¡Magia!
Emmet está activo como estándar en CodePen y es especialmente útil si está tratando de aprender un nuevo concepto en JavaScript y necesita crear HTML y CSS de soporte 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 en el futuro en el desarrollo web.
cómo usar adb y fastboot
Hay algunos excelentes tutoriales y cursos disponibles para las personas que desean comenzar con JavaScript, y CodePen es un excelente entorno para probar sus nuevas habilidades.
Cuota Cuota Pío Correo electrónico Los 8 mejores sitios web para descargar audiolibros gratisLos audiolibros son una gran fuente de entretenimiento y mucho más fáciles de digerir. Aquí están los ocho mejores sitios web donde puede descargarlos gratis.
Leer siguiente Temas relacionados- Programación
- HTML
- Desarrollo web
- JavaScript
- CSS
Ian Buckley es un periodista, músico, intérprete y productor de video independiente que vive en Berlín, Alemania. Cuando no está escribiendo o en el escenario, está jugando con la electrónica o el código de bricolaje con la esperanza de convertirse en un científico loco.
Más de Ian BuckleySuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse