Recursos y herramientas varias para desarrollo web
Si hay algo que me abrume es el desarrollo web: veinte mil tecnologías que hay que utilizar a la vez. Como tampoco soy un hacha en el tema me he tenido que patear medio Google en busca de herramientas que me facilitasen la vida, y aquí van unas cuantas:
Masonry
Masonry es una librería en JavaScript que te permite reordenar los elementos de una tabla que tengan distinta altura de la forma más óptima, haciéndolos encajar como si fueran ladrillos en una pared (de ahí el nombre, albañilería).
El archivo de Tumblr, hecho con Masonry.
JS Beautifier
¿Os ha pasado alguna vez que queréis echar un vistazo al código JavaScript de una página y éste está ofuscado o minificado? ¿No? Joder, qué suerte. Bueno, si alguna vez os pasa JSBeautifier os pone bonito el código en JS o HTML que le paséis.
JSFiddle y CodePen
Tanto JSFiddle como CodePen son dos editores online que te permiten escribir código en JS, HTML y CSS y previsualizarlo en vivo. Incluso traen soporte para muchas librerías conocidas (como Bootstrap o JQuery).
Son considerablemente populares (sobre todo la primera) en foros sobre desarrollo (como stackoverflow) donde alguien hace una pregunta y le suelen contestar con una demo.
RegExr
Me jubilaré (espero) como programador y hasta ese día creo que las expresiones regulares me seguirán dando dolor de cabeza. Incluso cuando ya parece que las domino me sale una que me marea un rato.
RegExr es un analizador de expresiones regulares online: pones tu expresión y pones los datos sobre los que se tiene que ejecutar y te ilumina lo que procesa.
Además trae una librería explicativa muy útil y te va indicando qué significa cada símbolo o grupo. Para mí es un indispensable (no pico una línea de código hasta que haya hecho funcionar la expresión regular en RegExr).
JSONLint y JSON Editor
Las descubrí hace un tiempo cuando tenía que manejar un código JSON bastante amplio en Python, muy útiles para aquellos momentos de «¿por qué peta el **** decode?» «porque falta una coma detrás de una llave».
JSONLint es un linter, es decir, te dice qué está bien y qué está mal en un código JSON.
JSON Editor es un editor (yep) de JSON que te traduce tu código a un árbol que puedes editar de forma visual.
Htaccess Rewrites: Trucos y consejos de reescritura
Si alguna vez habéis tenido que administrar un servidor Apache os habréis acabado topando con que el control que necesitáis hacer pasa por mod_rewrite, sus archivos htaccess y su a veces no tan claro formato.
Pues Htaccess Rewrites – Rewrite Tricks and Tips es una recopilación de bastantes ejemplos típicos y no tan típicos de configuraciones de htaccess.
Honestamente me gusta más la sintaxis de la configuración de lighttpd, pero hay que rendirse ante el más usado.
Browser Shots
En Browser Shots introduces una url y te pasa una captura de esa web en prácticamente todos los navegadores y casi todas sus versiones relevantes, Windows, Mac y Linux.
Placehold.it
Ideal para cuando tienes que implementar un diseño pero aún no tienes las imágenes. Placehold.it te permite generar placeholders (imágenes temporales) de cualquier tamaño y enlazarlos directamente para simular el diseño completo.
Un placeholder de 320×200 pixeles
Hurl.it
Hurl.it te permite hacer peticiones HTTP personalizadas y observar su respuesta. Se pueden añadir cabeceras y parámetros a placer e incluso se puede configurar para que use autentificación OAuth.
Patternizer y Paletton
Cuando no se tiene arte, más vale tener paciencia. Patternizer te permite generar patrones en CSS (generalmente para fondos) y Paletton te genera una paleta de colores a partir del color que elijas.
Son herramientas que ayudan si, como yo, tu conocimiento estilístico está un tanto ajustado.
Adobe Creative Cloud
Hay una herramienta en la Creative Cloud de Adobe, antiguamente llamada Project Parfait, que te permite subir un archivo PSD (de PhotoShop) y analizarlo completamente, generar código CSS, generar imágenes a partir de capas…
A mí me fue particularmente útil cuando me pasaron una vez un diseño a implementar totalmente en PSD.
Para finalizar
Éstas son unas cuantas de las herramientas que más suelo utilizar o que me salvan de un apuro en alguna ocasión. ¿Y tú, tienes alguna que te haga alguna tarea más fácil?
Borja V. Muñoz
Latest posts by Borja V. Muñoz (see all)
- Los materiales formativos de emprendimiento de YouBrand están listos - 18/12/2019
- Actividad formativa del proyecto Strategies for Digitalising Adult Educationen Lodz, Polonia // Training activity of the Strategies for Digitalising Adult Education Project in Lodz, Poland - 29/05/2019
- Tercer encuentro transnacional del proyecto YouBrand en Atenas, Grecia // Third Transnational Meeting of the YouBrand Project in Athens, Greece - 22/02/2019
