Recientemente lanzamos Proyectos, la última gran característica de CodePen. Es un poco diferente al Editor de bolígrafos, ¡así que echemos un vistazo a todas las cosas que puede hacer!
Un sistema de archivos completo y archivos HTML completos
Con CodePen Projects, obtienes una barra lateral de archivos para que coloques los archivos que quieras.
Eso es diferente al Editor de lápiz en CodePen, que solo le brinda el editor de HTML, CSS y JavaScript para trabajar. Si bien eso es muy conveniente para muchos tipos de demostraciones, puede ser limitante. ¿Qué sucede si necesita varios archivos HTML para vincular entre ellos? ¿Qué sucede si necesita incluir parciales según sea necesario? ¿Qué sucede si necesita cargar otros archivos para trabajar solo para esta demostración?
Con Proyectos, tiene control total sobre toda la estructura de archivos. Cree archivos y carpetas según sea necesario. Los archivos HTML son documentos completos, por lo que no está limitado a nuestra estructura HTML repetitiva como lo está en el Editor de bolígrafos.
Carga de arrastrar y soltar
Si tiene un archivo en su máquina local que le gustaría cargar y trabajar con CodePen, no podría ser más fácil. ¡La barra lateral de un proyecto está lista para arrastrar y soltar!
Esto facilita, por ejemplo, exportar un repositorio y moverlo a CodePen para jugar. Estos archivos pueden ser HTML, CSS, JavaScript, cualquiera de los tipos de preprocesadores que admitimos, imágenes, fuentes y muchos otros tipos de recursos. Limita la carga de algunos tipos de archivos (por ejemplo, lenguajes de back-end como PHP) para aclarar lo que CodePen Projects admite y no admite.
Procese Sass (o muchos otros preprocesadores) con parciales
¿Le gusta mantener sus declaraciones de variables en un archivo separado? Tal vez también divida su diseño CSS en su propio archivo. ¡Trabajar con parciales es una parte súper útil de cualquier preprocesador CSS!
Este es un ejemplo de cómo me gusta trabajar:
Puede ver la versión compilada abriendo el archivo “procesado” en la barra lateral. Sin embargo, le impide editar el archivo procesado, ya que perdería los cambios la próxima vez que compilara el preprocesador.
Cree sitios de varias páginas con HTML incluido
CodePen Projects ofrece dos lenguajes de preprocesamiento que pueden hacer HTML: Pug y Nunjucks.
En Pug, usas include file.pug (donde `file.pug` es la ruta del archivo a cualquier otro archivo Pug) y tomará ese archivo y lo incluirá.
Esto facilita unir partes de archivos en documentos HTML completos, lo que hace que los sitios de varias páginas sean mucho más fáciles. También puede entretejer HTML usando el block sintaxis que le permite crear una plantilla en la que cualquier archivo que se “extienda” puede pasar fragmentos de contenido que reemplazarán esas áreas.
En Nunjucks, la sintaxis es como {% include "components/mini-header.njk" %}, y funciona exactamente de la misma manera. Va y obtiene ese archivo y lo coloca en su lugar en el archivo que lo llamó. Nunjucks tampoco depende de los espacios en blanco como Pug, es solo una extensión de HTML normal.
Hacer una biblioteca de patrones con Nunjucks
Este probablemente merece un artículo completo (¡pronto!), pero hablando de Nunjucks, Nunjucks tiene el concepto de una “Macro”, que es un poco como un incluir, solo que usted puede pasarle parámetros. Es una sintaxis maravillosamente simple:
Ahora supongamos que desea cargar esa macro y usarla en otro lugar.
{% import "pattern/_colors.njk" as macroColors %}Digamos que estamos construyendo muestras de color para nuestra biblioteca de patrones. Podemos definir los colores (con notas) como una matriz, luego recorrerla, llamando a la Macro con los datos.
¡Eso es algo poderoso! Llame a este HTML, pase estos parámetros y espolvoree esos parámetros a través del HTML como sea que los necesite. Eso podría ser útil para todo tipo de cosas. Imagine un cuadro de diálogo modal, en el que debe pasar el encabezado y el contenido, pero también clases para definir el estilo o valores para determinar si ciertos botones deben mostrarse o no.
Usar ES6 Incluye a través de Webpack
Digamos que tengo una pequeña función de ayuda que pasa una cadena de HTML y devuelve un nodo DOM real. En ES6, podemos exportar una función como esa para que otros archivos de JavaScript puedan importarla como una dependencia:
export function getNodes(str) {
return new DOMParser().parseFromString(str, 'text/html').body.childNodes;
}Luego, en cualquier archivo que quiera usarlo:
import { getNodes } from "./helpers";Eso recién está comenzando a aterrizar de forma nativa en los navegadores, pero en su mayor parte, ese tipo de cosas las maneja Webpack que lo empaqueta todo. Y eso generalmente también se combina con Babel, por lo que puede participar en la sintaxis de ES6.
Eres libre de trabajar de cualquier manera en CodePen Projects. Déjalo solo si quieres que los navegadores hagan las cosas de forma nativa, o activa el interruptor y activa el procesamiento de Webpack y Babel:
También puede escribir en Typescript. Hemos visto algunos bailes elegantes usando SystemJS con Typescript y, en última instancia, importando dependencias directamente desde npm.
Markdown con formato automático
¿Tu proyecto tiene un README? ¿Quizás una lista de TODO para ti? No solo puede escribir en Markdown con CodePen Projects, sino que la ventana de vista previa le aplicará cierto estilo para que pueda verlo en un formato muy parecido a cualquier otra publicación de blog en CodePen.
También puede abrir la versión procesada del archivo para ver el HTML procesado sin ninguna otra influencia.
Tener una versión de desarrollo y una versión desplegada de su proyecto
En cualquier momento, puede hacer clic en el Desplegar y abra este cuadro de diálogo que le permite implementar su Proyecto en una URL especial:
Esa es una URL pública que puede compartir con cualquier persona. Tiene cero interfaz de usuario de CodePen o influencia alguna. Es solo una copia directa de sus archivos, alojada para que el mundo la vea. Puede usarlo para probar, mostrar clientes o lo que quiera.
Una parte importante aquí es que funciona igual que la implementación en el mundo real. Puede continuar trabajando en su Proyecto, guardándolo y cambiándolo al contenido de su corazón, y eso no afecta la versión implementada. Se convierte en su versión de desarrollo, efectivamente. Luego, nuevamente en cualquier momento, puede implementar.
No hay límites para la cantidad de veces que implementa, solo cuántos proyectos diferentes ha implementado.
Utilice un nombre de dominio personalizado para su proyecto
Probablemente haya notado que la URL es un poco rara para los sitios web implementados. Esperamos que algún día le permitamos personalizar eso, pero lo que está aquí hoy (y aún mejor en realidad) es la capacidad de usar un dominio personalizado (de su propiedad) para apuntar a su Proyecto implementado.
Es cuestión de cambiar los “Registros A” (documentación) de DNS para que apunten a un par de direcciones IP especiales que hemos configurado para esto.
Después de que se propague y lo haya implementado, ¡mi proyecto estará disponible en mi dominio personalizado!
Tenga en cuenta que el ejemplo es HTTPS. Eso no viene automáticamente, pero en este caso configuré CloudFlare, cambié los servidores de nombres de mi dominio para que apunten a CloudFlare, luego los registros A en Cloudflare para que apunten a las IP de CodePen. ¡HTTPS gratis! Lo que significa que puedo hacer cosas como usar JavaScript moderno que requiere HTTPS, como getUserMedia o registrar un trabajador de servicio.
Usar enlaces de teclas de Vim
Seguro que puede. Es una configuración de usuario en CodePen que lo sigue a todos los diferentes editores. También puede elegir combinaciones de teclas que imiten Sublime Text, si es parcial.
Señalo esto como solo una pequeña característica de comodidad de trabajar en CodePen. Hay tantos otros, como:
- Autocompletar
- Hormiga
- Elección del tema de resaltado de sintaxis
- Elección de pestañas/espacios y qué tan profundo
- Elección de fuente y tamaño
- Ajuste de línea (o no)
- Números de línea (o no)
- Paréntesis coincidentes (o no)
- ¡Y la lista continúa! Muchas opciones para configurar el editor de código como quieras
Comience con una plantilla
Cuando inicias un nuevo proyecto, hemos completado la barra lateral con un montón de opciones:
De ninguna manera tiene que elegir una plantilla de esta lista, pero podría ayudarlo a tener una idea de las cosas o acelerar las cosas si lo que desea construir utiliza estas tecnologías. Esperamos tener muchas plantillas, eventualmente, para que pueda comenzar. Si tiene uno interesante que haya construido, ¡háganoslo saber!
También puede crear fácilmente sus propias plantillas. En cualquier proyecto, activa el interruptor de plantilla en la configuración:
Ahora esa plantilla está disponible cada vez que inicia un nuevo proyecto:
Y, por supuesto, ¡cualquier proyecto público que encuentre en CodePen puede bifurcarlo!
… y (espéralo) mucho más
Aquí hay una lista incompleta de cosas que no tuve la oportunidad de contarles: buscar activos externos, ordenar su código, analizar su código, exportar, compartir (jadeos por aire), activos globales, atajos de teclado, o todo lo diferente ¡puntos de vista!
Los dejo animándolos a revisar nuestra página de aterrizaje para Proyectos y revisar la documentación.