Hilo con recursos y artículos interesantes que he compartido este año en mi newsletter de #Alquimias.
Por cierto, si todavía no estás suscrito te puedes apuntar aquí: https://codingpotions.com/alquimias
Artículo que explica cómo construir el típico layout de página con sidebar, de forma responsive y usando CSS Grid. https://web.dev/building-a-sidenav-c omponent/
Utilidad para poder usar cualquier cosa que pueda abrir una página web como segundo monitor: https://deskreen.com/
Guía de cosas básicas sobre Unicode: https://www.joelonsoftware.com/2003/ 10/08/the-absolute-minimum-every-software-developer-absolutely-positively-must-know-about-unicode-and-character-sets-no-excuses/
Utilidad para poder simular una red de baja velocidad: https://github.com/j1elo/slow-networ k
Todas las formas de centrar elementos en CSS: https://moderncss.dev/complete-guide -to-centering-in-css/
Horrocruxes pero para ficheros. Divide los ficheros en múltiples trozos para que solo sea posible recuperarlo teniendo todos. https://github.com/jesseduffield/hor crux
Tipografía con tamaño fluido aplicando CSS Clamp: https://piccalil.li/tutorial/fluid-t ypography-with-css-clamp/
Servicio para integrar gráficas de visitas a webs, suscriptores y otro tipo de métricas en tus documentos en notion. https://notionmetrics.com/
Guía sobre pseudoelementos :before y :after para crear todo tipo de efectos y decoraciones: https://codersblock.com/blog/diving- into-the-before-and-after-pseudo-elements/
Añade en un panel en vscode una mascota para que te acompañe, lo gracioso es que incluye a clippy de Microsoft. https://marketplace.visualstudio.com /items?itemName=tonybaloney.vscode-pets
Distintos tipos de formas de cargar fuentes en una web: https://css-tricks.com/the-best-font -loading-strategies-and-how-to-execute-them/
Katas (ejercicios) de Git para practicar: https://github.com/eficode-academy/g it-katas
Operadores ternarios en Javascript y por qué muchas veces son más difíciles de leer y entender: https://jrsinclair.com/articles/2021 /rethinking-the-javascript-ternary-operator/
En esta página puedes pegar un comando de bash y te desgrana qué hace cada cosa del mismo: https://explainshell.com/
Explicación de la funcionalidad nueva de Container Queries en CSS: https://piccalil.li/blog/container-q ueries-are-actually-coming/
Optimizador de SVG: https://jakearchibald.github.io/svgo mg/
Cómo es el funcionamiento interno de los emojis: https://tonsky.me/blog/emoji/
Generador de APIs CRUD con datos desde un JSON para hacer pruebas: https://github.com/typicode/json-ser ver
Guía básica de aplicación de colores en interfaces visuales: https://dev.to/georgedoescode/a-begi nner-s-guide-to-applying-color-in-ui-design-3904
Alternativa open source a Firebase: https://supabase.com/
5 errores básicos que tienes que evitar en CSS: https://betterprogramming.pub/5-css- practices-to-avoid-as-a-web-developer-1b7553c05131
Optimizador online de imágenes con varios algoritmos de compresión:
Cómo servir imágenes muy nítidas en web para pantallas con alta densidad de píxeles: https://jakearchibald.com/2021/servi ng-sharp-images-to-high-density-screens/
Generador de filtros SVG de forma visual y online: https://svgfilters.com/
Cómo crear un color picker con webcomponents nativos: https://dev.to/open-wc/let-s-build-a -colour-picker-web-component-2j3n
Trucos para CSS: https://github.com/AllThingsSmitty/c ss-protips
Trucos de UX para formularios de login/registro: https://learnui.design/blog/tips-sig nup-login-ux.html
Web con información y medidas de un montón de pantallas y monitores: https://www.screensizes.app/
Artículo muy divertido en el que se recopilan maneras de diseñar los peores controles de volumen de la historia: https://uxdesign.cc/the-worst-volume -control-ui-in-the-world-60713dc86950
Librerías Javascript para el manejo de cookies: https://github.com/js-cookie/js-cook ie
Tutorial paso a paso para construir un switch con HTML y CSS: https://web.dev/building-a-switch-co mponent/
Repositorio que recopila un montón de guías de diseño de empresas: https://github.com/streamich/awesome -styleguides
Guía de uso de Promise.any(): https://dmitripavlutin.com/promise-a ny/
Gestión de ficheros de configuración dotfiles: https://github.com/deadc0de6/dotdrop
Consejos para construir webs que faciliten la lectura: https://www.sarasoueidan.com/blog/ti ps-for-reader-modes/
Herramienta para leer ebooks desde terminal: https://github.com/wustho/epy
Trucos para sombras bonitas en CSS: https://www.joshwcomeau.com/css/desi gning-shadows/
Webcomponent integrable en cualquier web que añade el típico botón de "Copiar al portapapeles": https://github.com/github/clipboard- copy-element
Diferencias entre min-content, max-content y fit-content: https://blog.logrocket.com/understan ding-min-content-max-content-fit-content-css/
Herramienta para sacar capturas bonitas de tweets: https://poet.so/
Por qué deberías dejar de usar colores rojos cerca de colores verdes en interfaces: https://baselinehq.com/blog/colourbl indness-information-ui-design-red-green-problems-tips-tricks.html
Data Science For Beginners: https://github.com/microsoft/Data-Sc ience-For-Beginners
Cómo crear degradados con ruido (granulado) con CSS: https://css-tricks.com/grainy-gradie nts/
Librería para Express.js que permite ir reduciendo el tiempo de respuesta de la API en caso de peticiones continuadas desde el mismo sitio: https://github.com/nfriedly/express- slow-down
136 consejos básicos que sirven para cualquier programador/a: https://www.baldurbjarnason.com/2021 /100-things-every-web-developer-should-know/
Genera metatags para páginas web: https://metatags.io/
Cómo hacer que la página use un .svg para el favicon: https://css-tricks.com/favicons-how- to-make-sure-browsers-only-download-the-svg-version/
Comprobador del contraste entre color de fondo y color de texto; https://www.websiterating.com/color- contrast-perception-checker/
Para qué sirven los ficheros .DS_Store https://eclecticlight.co/2021/11/27/ explainer-ds_store-files/
Alternativa de interfaz mucho más moderna para la Wikipedia: https://www.modernwiki.app/
Explicación de las curvas de Bézier para animaciones con CSS: https://blog.maximeheckel.com/posts/ cubic-bezier-from-math-to-motion/
Retos y katas para practicar tipado en Typescript: https://github.com/type-challenges/t ype-challenges
Y listo, sorry por la chapa.
Si quieres recibir enlaces como estos todas las semanas, te puedes apuntar a la newsletter (en enero la retomo):
https://codingpotions.com/alquimias
¡Gracias por compartirla gente!