Si eres desarrollador Front aquí te dejo un listado he herramientas que pueden evitarte más de un quebradero de cabeza. He hecho un "barrido" de todas las herramientas o referencias que en algún momento he utilizado y pueden ahorrarnos mucho tiempo.
Entorno de trabajo
No tengo servidor propio
Si no dispones de servidor propio, estas referencias te pueden ser muy útiles:
-
Assembla
https://www.assembla.com/subversion/Nos permite crear un repositorio svn de nuestro proyecto y tener un control de versiones.
-
Myjson
https://myjson.com/Nos valida y almacena nuestro json proporcionándonos una url a la que llamar en el proyecto en el que estemos trabajando
-
Random User Generator
https://randomuser.meGenera datos de usuarios de prueba, incluyendo nombres, correos electrónicos, imágenes...
-
Fiddler
http://www.telerik.com/fiddlerActúa como un proxy y capta todo el tráfico generado entre el cliente y el servidor. Esto nos permite interceptar las peticiones de cada recurso creando reglas para simular que están en local. Te permite trabajar en local sin tener los archivos en local, realmente útil.
Estoy dentro de una red o vpn
- Forward
https://forwardhq.com/Nos proporciona una url de nuestro localhost con acceso público para poder acceder a ella desde cualquier otro ordenador sin necesidad de estar en la misma red. Sólo se necesita instalar una extensión de Chrome. La pega es que es de pago y la versión de prueba dura 7 días.
-
Crear punto wifi
Si por ejemplo nos ha ocurrido que queremos validar una web con nuestro móvil y éste no está en la misma red sólo tenemos que generar un punto wifi con nuestro pc. Aquí os dejo unas url donde os indica los pasos a seguir:
Comparador de archivos
-
Diffchecker
https://www.diffchecker.com/Es un comparador online de código sin necesidad de hacer ninguna instalación
-
Beyond Compare
http://www.scootersoftware.com -
Beyond Compare
http://winmerge.org/
Fuentes
Iconos gráficos
Estas herramientas proporcionan una librería de iconos gráficos o también genera la tuya propia.
-
Fontello
http://fontello.com/ -
Icomoon
https://icomoon.io/ -
Font Awesome
https://fortawesome.github.io/Font-Awesome/
Generador de fuentes
Estas herramientas generan los diferentes formatos para la web. Algunas disponen de librerías de fuentes para descargar.
- Font Squirrel
http://www.fontsquirrel.com/fontface/generator - Font2Web
http://www.font2web.com/ - @font-face kit generator
http://fontface.codeandmore.com/
Formateo código
-
Code Beautifier
http://www.codebeautifier.comFormatea y optimiza código css
-
codebeautifier
http://jsbeautifier.org/Descomprime la versión min de un javascript para facilitar su lectura.
-
Free Online Tools
http://www.freeformatter.com/Descomprime, formatea, valida, generador de datos,... todo un conjunto de herramientas útiles para los desarrolladores.
-
Foundation Zurb
http://foundation.zurb.com/emails/inliner.htmlAdemás de ofrecer otras una serie de herramientas para hacer tus newsletter responsive, nos permite traer los estilos de una hoja de estilos al elemento que corresponda ("inline")
Conversores de código
-
Online Convert
http://documento.online-convert.com/es/convertir-a-htmlEs un conversor online gratuito. Entre otros muchos tipos de archivos (archivos de documentos, vídeos, audios,...), nos permite convertir un documento word en código html.
-
Text Fixer
http://www.textfixer.com/html/convert-word-to-html.phpLo mismo que el anterior pero nos general más limpio y más simple.
-
Clean Html
https://word2cleanhtml.com/cleanitIgual que el anterior
-
Html a Pdf
http://www.htmlapdf.com/Convierte tu página web en un pdf. Ver post
-
Resalta código fuente
jmacuna73.blogspot.frAquí encontraremos un listado de referencias para resaltar en colores el código fuente en nuestra web.
-
Desbloqueo de pdf sólo lectura
es.ccm.netSi has intentado copiar y pegar texto de un pdf y no has podido es que está protegido contra copia e impresión. Aquí hay 3 referencias de herramientas para desbloquearlo.
Herramientas para testear
-
Fiddler
http://www.telerik.com/fiddlerActúa como un proxy y capta todo el tráfico generado entre el cliente y el servidor. Esto nos permite debuggear y hacer testing de rendimiento.
-
GTmetrix
http://gtmetrix.com/ -
WebPagetest
http://www.webpagetest.orgIntroduciendo una url nos hace un análisis de la misma: peticiones al servidor que se están haciendo, tiempos de carga, detección de errores,..Simula un usuario conectado desde diferentes localidades así como diferentes navegadores. En definitiva te ayuda a optimizar tu página.
-
PageSpeed Insight
https://developers.google.com/speed/pagespeed/insights/Esta es una herramienta de google y al igual que la anterior, te ayuda a mejorar tu página.
Mockups
Para crear mockups online:
-
Moqups
https://moqups.com/Te permite hacer mockups interactivos. La pega es que tienes un límite de 22 objetos para insertar en la versión gratuita.
-
Gliffy
https://www.gliffy.com
Html
-
Initializr
http://www.initializr.com/Crea 3 tipos de plantillas rápidamente, una totalmente desde cero, otra con unos estilos básicos y responsive y otra basada en bootstrap.
-
HTML 5 Demos
http://html5demos.com/Nos muestra una pequeña lista de lo que podemos hacer con html5
Imágenes dummy
Aquí un listado de enlaces donde puedes obtener enlaces para cargar imágenes de prueba en tu web. Cuidado con cargar imágenes externas, estos servidores suelen estar saturados y pueden penalizar a nuestra web, no olvidar sustituirlas si fuera el caso.
- http://fpoimg.com/
- https://placehold.it/
- http://dummyimage.com/
- https://placeimg.com/
- https://unsplash.it/
- http://lorempixel.com/
Más recursos y referenciass
-
MDN - Mozila Developer Network
https://developer.mozilla.org/en-US/: -
Hongkiat
http://www.hongkiat.com/ -
Product Hunt
http://www.producthunt.com/