dev
by Adam Martin

Recursos

Me gusta leer. Muchísimo. Siempre estoy al tanto de recursos, novedades y cosas super interesantes. Por suerte o por desgracia, lo voy apuntando todo en chats de trabajo, amigos y conversaciones varias. Ya va siendo hora de ir apuntando en algún sitio todo esto.

Los enlaces que aparecen aquí no tendrán ningún referido o forma de beneficio si pulsas los links. Esto es un recopilatorio de enlaces de contenido interesante. Nada más.

Ya llevo todo el contenido añadido desde el 22/09/2023 hasta ahora. Me queda mínimo contenido guardado desde 2020.

Modificado/actualizado por última vez el

CSS

Frameworks de CSS

  • Pico CSS: el starter por excelencia sin clases, va todo vanilla en los componentes de HTML base.
  • Almond.css: el gran Álvaro Montoro creó este framework de base que me parece super bonito y perfecto para comenzar proyectos.

Herramientas Online de CSS

Recursos Interesantes

Componentes web (HTML)

Hechos en Tailwind

  • HyperUI: cantidad ingesta de componentes para hacer tus webs super bien

Iconos

  • Icônes: librería mega extensa instalable o exportable desde la web como componentes, SVGs, etc…
  • svgl: librería extensa de iconos de empresas en SVG con posibilidad de copiar como SVG o como componentes de frameworks como React/Vue/Angular/Svelte.
  • CSS Loaders: más de 600 loaders en CSS con un solo div

WordPress

Seguridad en WordPress

Plugins para WordPress

  • Editores visuales (pero para devs):
  • Packs de plugins:
    • JetPlugins / CrocoBlocks: la colección de plugins más profesionales y brutales. Algo caro, pero puedes hacer muchísimas cosas sin programar con ellos.
  • WooCommerce:
    • Advanced Woo Search: buscador avanzado de productos, con página de búsqueda, AJAX y filtrado.
    • Merchant: Más de 40 módulos para añadir a WooCommerce. 16 gratuítos muy buenos.
    • Super Shipping para WooCommerce: te permite crear múltiples opciones de envío por peso, volumen, precio… y en español.
  • Seguridad y prevención:
  • Optimización y rendimiento:
    • AAA Option Optimizer: Opociones para manejar, limpiar y administrar la tabla options
    • Index WP MySQL for Speed: Le añade índices a las tablas de WordPress que no tenga un índice como tal (reversible)
    • ElasticPress: Mejora la rapidez de las búsquedas en WordPress. WPML ha creado un plugin para darle soporte multilingüe.
  • Chats:
    • Collect.chat: Está muy bien si lo que buscas es un formulario de contacto mega interactivo en forma de chat.
  • Redes Sociales:
    • Shareaolic: el típico bloque de compartir en mil historias
  • Componentes y Funciones:
  • Estructura de datos:
    • ACPT: custom post types, taxonomies, option pages, meta fields, forms… Un muy buen sustituto a la familia Toolset. (review)

Temas para WordPress

Editor de bloques / Gutenberg

Documentación sobre estilos y estructura de WordPress

Administrar múltiples WordPress desde un solo sitio

Canales de Youtube de o sobre WordPress

Herramientas y utilidades

  • Ploogins: herramienta de búsqueda de plugins por IA hecho por los cracks de Sirvelia
  • FigPress: Convierte diseños de Figma a constructores de WordPress como Gutenberg, Bricks, Elementos y Breakdance
  • Felix Arntz MU Plugins: colección extensa de plugins de uso obligatorio realizado con cariño y amor, hasta el punto que está dividido en ficheros y se puede auto actualizar.
  • WPHTML Converter: Convierte el HTML de bloques de WordPress a sus formas de objeto JavaScript o arrays de PHP. (Útil para desarrollo de ACF Blocks)
  • Gutenverse: Editor visual para generar sitios como si fuera Figma y luego te da el código Gutenberg.
  • Zona Código: snippets para WordPress de Gonzalo Navarro

WP-CLI

Cursos de WordPress

Hostings para WordPress

Frameworks y boilerplates para WordPress

Actualidad e información WordPress

Hecho con WordPress

Javascript

Aprende Javascript

  • patterns.dev: aprende de arquitectura web con patrones de Javascript, React, NextJS o VueJS

Librerías

  • Mesas de luz / Lightbox:
    • GLightBox: (Vanilla) La mejor para todo, con soporte de Plyr. Pero sin actualizar desde 2022.
    • Fullscreen Lightbox: (Vanilla, React, Vue) muy potente. Probándolo en estos días.
  • Reproductor de vídeo potente:
    • Vidstack Player: la unión con Plyr actualizado. Soporta React, Web Componentes, NextJs, Vue, Svelte… una maravilla, la verdad.
    • Plyr: una revolución de reproductor que tiene de todo, aunque ya ha sido absorbido por Vidstack. Se puede seguir usando, pero tiene las mismas funciones dentro de Vidstack.

React

Aprende React

Recursos para React

  • Fancy Components: Componentes modernos super chulos como revoltijos de letras, animaciones y todo super fluído. Necesita shadcn y Motion.
  • UI y componentes de estructura:

NextJS

Herramientas super útiles

Avisos y novedades

  • new(releases): recibe notificaciones por correo (entre otros) cada vez que un repositorio de una librería o sofware se actualiza. Super mega útil para estar pendiente de librerías open-source de recursos importantes.

Herramientas online

  • IntoDNS: Raiola Networks ha sacado una herramienta para comprobar y analizar los registros DNS de un dominio.
  • Cron-job: Cron-jobs gratuítos desde otro servidor
  • SVGViewer: visor, optimizador y editor de SVGs online.
  • explainshell: pásale un comando de terminal y seguramente te explique comando, argumentos y opciones para que te enteres de todo lo que hace.
  • cobalt.tools: Descarga vídeos y audios de la mayoría de plataformas totalmente gratis.
  • freeconvert.com: Convierte vídeos, reduce, comprime totalmente gratis.
  • the Front-end Checklist: checklist interactiva de todos los puntos que deberías de revisar antes de publicar tu web.
  • Ratio Buddy: calculadora de aspect-ratio interactiva.

Herramientas de escritorio

DNSs

  • transform.tools: convierte código de A a B. SVG a React, JSON a MySQL, HTML a JSX, etc…

Páginas recopiladoras de información

  • HubDev.tools: recopilador de los mejores recursos para todo webdev. Muy orientado a React. Pero tiene de todo general.

Servidores

CloudPanel

Monitoreo y administración de sistemas

  • Netdata: Comprueba el estado de tu infraestructura con métricas de alta resolución, registros de sistema y visualizaciones en tiempo real.
  • PHP Server Monitor: Script que comprueba si sitios web y servidores están en funcionamiento.
  • Uptime Kuma: monitor autohosteado en Docker muy bueno y gratis.
  • GlitchTip: Tracking de errores de aplicaciones.

Temas de interés

Sobre web

  • HTTP/2 For Web Developers: ¿Por qué ya no se recomienda hacer bundles, combinación de ficheros de estilos o de scripts? HTTP/2 ya funciona globalmente y es muy veloz. Incluso meter los estilos en línea es mejor en muchas ocasiones. Incluso el cambio de una línea de CSS puede hacer que un fichero de 12000 líneas se tenga que descargar y ralentice la web. La atomización de componentes es el rey.
  • Sobre Testing escrito por la gente de Google

PHP

Herramientas online

  • Can I PHP?: Útil para saber qué función puedes usar en qué versión.