Las (mis) mejores herramientas para desarrolladores web (parte I)

A continuación os traigo una recopilación de lo que no son otra cosa que favoritos que a lo largo del tiempo he ido recopilando y añadiendo a una caótica pero nutrida colección. Algunos han caído en desuso o caeran debido a estándares futuros como HTML5 o CSS3,  y otros simplemente han caido de los favoritos porque el que las creó se ha cansado de pagar el dominio que apuntaba a ellas.

Casi todas las que he puesto aquí son herramientas simples que no necesitan ningún tipo de cuenta, ni login ni historias que entorpecerían su uso y les quitaría ese punto amateur que te hace pensar que algún día el que las desarrolló decidió subirlas a internet ya que quizá podrían ser útiles para el resto de mortales desarrolladores.

Tests/Sitestress/Sitemap/Accesibilidad/Validadores

  • Webpagetest Genera informes, capturas de pantalla y estadísticas sobre cómo carga y se ve la web renderizada bajo diferentes agentes web (IE, Chrome, etc)
  • Browsershot Algo más bestia que Webpagetest, pero muy útil. Genera una captura de nuestra web cargada a través de diferentes navegadores de diferentes sistemas operativos.
  • XML Sitemap Java, pero práctico 🙂 generador de sitemaps que nos da una idea además de los enlaces rotos u otros códigos de servidor en el árbol de nuestro site.
  • Validador para WCAG 1 y 2 y otras menos internacionales Bastante fiable.
  • Google PageSpeed Herramienta de Google que nos permitirá saber qué pasa en el flujo de carga de nuestra página y cómo podríamos optimizarla para reducir esos a veces críticos milisegundos extras. 
  • W3C Markup Validator & W3C CSS Validator W3c. Validadores. Si bien bien sino, no tan bien. Tenían que estar. Es la w3c; los que velan y protegen la web; pero eso otro día lo hablamos.

 HTML/CSS

 Conversores

  • Typography Converter Es una calculadora que nos permite convertir entre diferentes unidades. Útil para pasar el tamaño de tipografías a pixels.
  • HTML Entities encode and decode Pues eso mismo, para codificar/decodificar entidades HTML. Simple y útil, para qué más.
  • UTF8 encoder/decoder Un útil y rápido encoder/decoder para codificaciones UTF8, MD5, SHA1 y muchas otras. Yo, realmente solo la uso para las tres primeras que he mencionado.
  • Favicon generator Genera un favicon desde una imagen, con algunas opciones. Nada del otro mundo, pero funcional.

 Referencias

  • Common fonts to all versions of Windows & Mac equivalents Equivalencias de familias tipográficas entre sistemas Mac y Window. Muy útil para crear familias tipografícas en nuestras CSS.
  • RGB to Color Name Mapping (Triplet and Hex) Equivalencias para colores en componentes RGB, hexadecimal y alias.
  • Generador de tablas HTML Lo pongo porque lo tenía en favs, pero realmente con Emmet (Zencode) estos quebraderos de cabeza son parte del pasado.
  • Adobe Kuler Creo que todo el mundo que llegue a este post la conocerá: una gran aportación de la gente de Adobe para intentar hacer el mundo un poco más bonito entre tanto diseñadores intrusista despiadado y sinérgico.
  • Colourlover Otro fantástico micromundo de patrones, combinaciones de colores y formas. Una buena fuente de recursos para generar o descargar patrones, fondos, etc.
  • XHTML Entity reference Referencia de entidades permitidas en HTML4 (no 5) y XHTML 1.0
  • Typetester Imprescindible, brutal, excelsa herramienta para optimizar y testear tipografías para nuestros diseños web.

Diseño Líquido &/| Responsive Design

  • The Responsinator Aunque de nombre feo, la página es útil ya que nos permite hacernos a la idea de cómo carga nuestra página en diferentes dispositivos móviles.
  • MediaQuery Snippet Simple y para qué más. Útil recopilación de los media snippets más habituales (aunque siendo sincero, se está quedando un poco desactualizada, ay)

 Guías

  • Guide to CSS support in email newsletters Una limpia y bonita tabla que nos muestra compatibilidades entre algunos elementos CSS y los navegadores y clientes de correo más usuales.
  • ASCII Code Una muy completa tabla de carácteres ASCII en diferentes representaciones como hexadecimal, octal o HTML. Muy útil.
  • Online JSON Viewer De los más simples y útiles |JSON-prettify\| que he encontrado.

 PHP

  • Unix Timestamp to date converter Convierte una |marca de tiempo| (unix timestamp) a un formato de fecha inteligible para los humanos.
  • Functions Online Pues como dice su nombre, funciones online. Me es muy útil muy a menudo para probar por ejemplo expresiones regulares sin tener que ir toqueteando el código en desarrollo.

Y hasta aquí la primera recopilación. Quedan muchas más por organizar, pero en una segunda parte, donde entraremos también a comentar algunas extensiones de navegador o aplicaciones, y ahí ya es mucho tema. Cualquier cosa, nos vemos en los comentarios.

Happy coding!