Codepen, es una herramienta online de prueba para desarrolladores web
- HTML > contenido.
- CSS > estilo.
- JavaScript > animación y efectos.
Codepen es una herramienta para realizar pruebas a fragmentos de código que todo desarrollador web o front-end sabrá apreciar.
Conociendo CODEPEN
Razones por las que deberías usar
1. Opciones CSS
CodePen incluye algunas características impresionantes para escribir CSS más rápido. Se puede seleccionar e incluir Normalize.css o reset.css en tu CSS con un simple clic de un botón de radio. También puede optar por utilizar también -prefix libre o Autoprefixer . De esta manera no hay necesidad de tomar el tiempo para enlazar a un archivo externo (que es también posible, si gustas).
¿Qué pasa si usted no está seguro acerca de algunas de sus técnicas de CSS que se utiliza? No te preocupes; CodePen tiene CSSLint integración para buscar a través de su código CSS y advertir si hay errores, advertencias, apoyo en navegador, etc.
2. Los Sabores de HTML, CSS y JavaScript
CodePen apoya toneladas de sabores de HTML, CSS y JavaScript. Para HTML, puede utilizar HAML, Markdown, Slim, o incluso Jade. Para CSS, apoya Sass y SCSS (ambos con un compás opcional o Bourbon add-on), así como Less y Stylus.
Bajo el menú de JavaScript, puede seleccionar CoffeeScript o LiveScript. También hay un menú desplegable donde se puede tener la última versión de cosas como jQuery y angularjs.
3. Encuadernación Emmet y Vim
CodePen tiene que ver con un desarrollo más rápido y más suave. Es por eso que utilizan herramientas como Emmet para ayudar a mantener los proyectos en movimiento. El editor CodePen le permite usar Vim Vinculaciones clave que son de línea de comandos abreviados de teclado. Ambas herramientas juntos pueden ayudar a crear un flujo de trabajo más rápido.
Para aprender más acerca de Emmet, puedes echar un vistazo artículo Workflow más rápido: Mastering Emmet .
4. Cobros y Etiquetas
Usted puede agregar etiquetas a sus plumas, que luego se convierten en búsquedas. Etiquetas de búsqueda como “ Loader ” y “ Form ” trae toneladas de útiles para la inspiración.
Si lo desea, puede incluso crear colecciones de plumas relacionados con un tema determinado. Chris Coyier, uno de los co-fundadores de CodePen, ha creado colecciones como“ Path Drawing ” y “ Repeating Patterns “.
5. Diferentes editores de Vista
CodePen tiene un total de 8 editores de vista diferentes para escrituras. Cada vista tiene su propia ventaja.
Editor View - Esta es la vista por defecto para la edición. Puede ajustar el tamaño de la vista previa de código y seleccionar los idiomas que se vea.
Details View - Esta vista le permite ver las etiquetas, comentarios, bolígrafos bifurcadas, etc. Este contiene la mayoría de las características sociales de CodePen.
Full Page View - Esto es bastante auto-explicativo. Esto hace que su pantalla completa una escritura dentro de un iframe, dejando sólo un pie de página CodePen.
Debug View - Depuración vistas es una vista de pantalla completa, aunque con características adicionales. Se elimina el iframe y CodePen pie de página para más fácil acceso a la consola JavaScript. Esto es muy bueno para el código de prueba que usted piensa CodePen podría estar interfiriendo con.
6. CodePen Pro
Si usted es un Pro CodePen usuario, usted tiene acceso a más puntos de vista:
Modo Presentación - Este modo se hizo especialmente para retroproyectores. Se elimina el encabezado para darle más espacio y le permite cambiar rápidamente el tamaño de la fuente y los colores del editor de código. También puede cambiar el tamaño de la vista previa sin cambiar el código.
Live View - Con CodePen Live View, que tiene una pantalla completa de su escritura. A medida que edita esa escritura, que se actualizará automáticamente a medida que escribe.Esto se utiliza a menudo cuando se prueba en varios dispositivos.
Modo Profesor - Este modo permite que la gente vea que el código en tiempo real.También hay una ventana de chat en el que el profesor y los estudiantes pueden chatear.
Modo Collab - Modo Collab permite más de un programador para hacer ediciones a una escritura al mismo tiempo. También hay una ventana de chat, al igual que en el modo de profesor.
7. Blogging
Blogging es una nueva característica en CodePen , lo que le permite escribir fácilmente sobre el código al igual que en un blog regular.
Puede escribir con Markdown, y utilizar una herramienta especial de incrustación cuando se necesita. Usted puede agregar CSS personalizado a sus puestos, y hay una vista previa super simple para probar su puesto.
8. Comunidad
Esto es lo que diferencia a CodePen delante de la competencia por un tiro largo. La comunidad ha sido una parte enorme de CodePen desde el comienzo. A través de comentarios y el compartir, la gente puede dar y recibir críticas constructivas, y aprender juntos. Grupos como 4ae9b8 y Bullgit han comenzado las conversaciones a través de CodePen. Los fundadores han hablado sobre lo que piensan de la comunidad CodePen en el CodePen Podcast .
9. La inspiración
Escrituras impresionantes siempre se muestran en la página principal, así como los artículos y colecciones. Las escrituras hacen pasar por tanto a la inspiración, y una manera divertida de aprender.
Buscando a través de las escrituras impresionantes puede ayudar a mejorar su propio trabajo, y ayudar a mejorar sus conocimientos de HTML, CSS y JavaScript.
Conclusión
En última instancia, utilizando CodePen puede ayudarle a aprender más rápido y formar parte de una gran comunidad. Artículos de SitePoint a menudo utilizan CodePen para incrustar código en sus tutoriales. Y si usted está interesado en más grandes características de CodePen, echa un vistazo a lo siguiente:
http://codepen.io/Yakudoo/pen/YXxmYR
Comentarios
Publicar un comentario
Las dudas y el agradecimientos, nos ayudan a mejorar a diario...