Este sitio web es una charla técnica

Esta charla técnica literal (video de YouTube incluido allí) de Zach Leatherman es un buen momento. La charla está salpicada de trucos divertidos, así que solo estoy tomando notas sobre algunos aquí:

• No tengo idea de cómo logró eso de “golpear el teclado y obtener un código perfecto”, pero me recuerda a los bolígrafos “autocodificadores” de Jake Albaugh .
• ¡Agregar contenteditablehace bodyque toda la página sea editable! ¿Sabías document.designMode = "on"que hace lo mismo en JavaScript? (Más información sobre cómo hacer de DevTools una herramienta de diseño ).
• Hay un breve momento en el que la escritura se produce en dos elementos a la vez. ¡CodePen lo admite! Simplemente CMDhaga clic en + en el editor donde desea que esté otro o hágalo parte de un fragmento .
• Las fuentes del sistema son agradables. Me gusta lo fácil que es invocarlos system-ui. Firefox no parece admitir eso, así que supongo que necesitamos toda la pila . Me pregunto qué tan cerca estamos de necesitar ese único valor. Iain Bean tiene más información sobre esto en su publicación “Las fuentes del sistema no tienen por qué ser feas” .
• box-decoration-breakes un pequeño toque agradable para los “encabezados en línea”. El uso de @supportsaquí tiene mucho sentido ya que no se trata sólo de una propiedad en uso, sino de varias. Entonces, en una situación sin soporte, no querrás aplicar nada de eso.
• Aplicar a progressalgunos lielementos para comparar estrategias de renderizado es una buena manera de obtener una interfaz de usuario perfecta sin siquiera una línea de CSS.
• Hacer que 11ty resalte la sintaxis durante el proceso de compilación es genial. Todavía uso Prism.js en este sitio, que hace un gran trabajo, pero lo hago del lado del cliente. Realmente me gusta cómo este complemento 11ty sigue siendo Prism bajo el capó, pero simplemente ocurre cuando se crea la página. Me encantaría que esto funcione aquí en este sitio de WordPress, lo cual apuesto a que es posible ya que nuestro bloque de código en el editor de bloques es una compilación de JavaScript personalizada de todos modos.
• En el primer punto, escribí que no tenía idea de cómo Zach hizo “golpear el teclado y obtener el código perfecto”, pero si miras la parte sobre resaltado de sintaxis y continúas, Zach lo muestra y es un poco alucinante. .

Creo que el punto general de Zach es sólido: deberíamos cuestionar cualquier estrategia de creación de sitios web de aplicación de página única por defecto.

Como una cucharada de papilla de osito aquí, diría que soy fanático tanto de los generadores de sitios estáticos como de los marcos de JavaScript. Los marcos de JavaScript ofrecen algunas cosas que son absolutamente buenas ideas para crear productos digitales: componentes y estado. A veces eso significa que la renderización del lado del cliente es realmente útil para la interactividad y la sensación general del sitio, pero es desafortunado cuando la renderización del lado del cliente aparece de forma predeterminada en lugar de ser una opción considerada.