Numero 3 – Helium CSS: Herramienta para detectar CSS no utilizado
Actualmente muchos desarrolladores front-end tienen la costumbre de usar frameworks como Bootstrap, Foundation, Materialize entre otros y algo que no consideran es que hay mucho CSS en producción que no utilizan pero que está ahí en sus archivos.
Helium CSS permite detectar CSS que no está siendo utilizado y es muy fácil de usar, puede encontrar selectores que fueron ignorados en multiples paginas y reportarlo.
Características:
- Trabaja desde el navegador
- Después de la instalación presenta un textarea para insertar las urls
- Presenta el reporte en lista con cada estilo detectado
- Funciona en navegadores con soporte a LocalStorage y querySelector
- No funciona en IE6 o 7
Para usarlo solo descarga la librería y agregala a tu sitio web donde quieras hacer el test o puedes usar la url del CDN que está en el link del repositorio.
Numero 2 – CSS Lint: Herramienta para validación de CSS
En CSS suele pasar que tenemos ciertos errores de sintaxis, de valores o compatibilidad y lamentablemente al hacer ejecución de este el navegador no da detalle de que sucede.
Una buena solución es CSS Lint, un proyecto open source que permite validar el CSS online, dando un reporte bastante completo de lo mal que hemos desarrollado el código o lo que podríamos mejorar.
Características:
- Error de sintaxis
- Compatibilidad
- Rendimiento
- Optimización
- Posibilidad de instalarlo en local
- Usarlo vía CLI
- Usarlo vía editor de texto o IDE
Puedes usarlo vía web o instalarlo con NPM y mucho más.
Numero 1 – Riot.js: La librería minimalista similar a React
Supongo que la mayoría tiene conocimiento de la existencia de los web components y sus librerías para desarrollarlos, muchas de estas ya pesan más de 100kb y aún que no es mucho, en la web menos es más.
Riot.js viene a hacer competencia ofreciendo geniales características y algo que llama la atención es que se dicen ser una micro librería de interfaces de usuario similar a React pero además también toman lo bueno de Polymer ofreciendo una curva de aprendizaje muy corta pero siendo muy completa.
Características:
- Pesa casi 13kb, muchísimo menos que otras librerías
- Ofrece etiquetas personalizadas
- Una sintaxis más humana y agradable
- También usa un Virtual DOM
- No obliga a usar un solo estándar
- Permite integración con diferentes herramientas
Se instala de muchas formas, ya sea Bower, Component, NPM y otras formas más.
