15 herramientas útiles para un desarrollo web fluido

No somos de los que nos adherimos a los estereotipos, pero probablemente ha pasado un tiempo desde que un desarrollador web típico (estéreo) se afeitó la maldita barba, se cambió de ropa, se bañó o se afeitó esa maldita barba…

Realmente no puedes culparlos. Ha pasado un tiempo desde que todos los desarrolladores tomaron un respiro. 2015 ha sido un buen año con avances a pasos agigantados en la tecnología de desarrollo web, pero un desarrollador ya no puede usar su computadora portátil/MAC (como un jefe) y programar una plataforma en su tiempo libre.

Ahora debe cuidar el diseño receptivo con soporte multiplataforma, HTML5, PHP7 configurado para su lanzamiento un poco más adelante en el año, navegadores como IE que no dejarán de molestar todo… el crecimiento gradual a Niveles tipo matriz del propio Internet de las cosas.

Es todo lo que los desarrolladores podemos hacer para mantenernos al día. Pero lo hacemos, debido principalmente a estas ingeniosas herramientas.

Echar un vistazo.

1 Komodo Editar

Todo nace del código para un desarrollador, por lo que es natural comenzar con la mejor herramienta de edición que pueda encontrar. Komodo Edit es bastante kosher por todo eso y más. Es un buen editor de texto multiplataforma y multilingüe para que escribas y edites tu código. Ah, y es gratis.

La herramienta funciona en Windows, Mac, Linux/UNIX, así que no te preocupes. También nos gusta por su función de autocompletado de código para lenguajes como HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (para las 5 o más personas en el mundo), etc. Ese es un editor de texto inteligente.

Puntos de bonificación para mayor comodidad de la función Project Manager para organizar y realizar un seguimiento de los archivos.

2 Creador de CSS 3.0

Seamos honestos, a pesar de todo lo que amas de CSS3, no puedes evitar odiarlo un poco cuando se trata de escribir sintaxis para cosas como bordes redondeados. Es un detalle tan trivial perder el sueño, pero lo haces de todos modos. No puedes memorizar más de 100 propiedades nuevas y sus respectivos prefijos. Entonces, gracias al Señor por una herramienta como CSS 3.0 Maker.

Esta pequeña e ingeniosa herramienta en línea le permitirá copiar y pegar código engañoso en su hoja de estilo. Genera código para detalles de estilo como radios de cuadros, degradados, texto y sombras de cuadros, transformaciones, transiciones y rotaciones de su elección. También mostrará qué navegadores de escritorio y móviles admiten esas propiedades de estilo. Una pequeña área de vista previa mostrará el efecto, el código se puede copiar desde el cuadro de vista o descargar dentro de un archivo HTML.

Para aquellos de nosotros que no podemos dedicar demasiado tiempo a detalles de estilo aparentemente banales, esta herramienta es un salvavidas.

3 –sin prefijo

«¡Libérate del infierno de los prefijos CSS!»: página de introducción sin prefijos.

Esta es una herramienta sensata, traída para liberarnos del ‘infierno de prefijos’ por un ángel llamado Lea Verou de Github. Agregará el prefijo del proveedor (en algún lugar que no pueda ver) a las hojas de estilo

o elementos. Además: no tendrá que preocuparse por los elementos nuevos o , los prefijos de jQuery .css()o cualquier cambio que realice, porque lo cubrirá todo.

¿Que es no gustar?

4 libras de bloque

‘Lorem Ipsum’ ha sido el texto de marcador de posición durante demasiado tiempo. Afortunadamente, ahora tenemos Blokk: La fuente para poner fin al ‘dolor’ del latín incomprensible.

Blokk le brinda un bloque de ‘texto’ para usar como marcador de posición al crear maquetas y estructuras alámbricas. También es evidente que no confundirá a los clientes menos expertos en la web durante las presentaciones.

5 Fontello

Antes de que las fuentes de íconos se convirtieran en algo, los desarrolladores tenían que contar con la ayuda de diseñadores para crear íconos escalables. El tiempo que llevó desarrollarlos (que, por cierto, incluye la creación, extracción, implementación y personalización) bordeaba lo ‘absolutamente ridículo’. Pero luego alguien convirtió íconos en fuentes y todos vivieron felices… en el futuro previsible.

Fontello es un gran generador de fuentes de iconos. Le permitirá elegir entre miles de íconos, personalizar su mapeo o editar sus nombres, y compilarlos en un solo archivo de fuente. Es increíble y es gratis.

No podemos agradecer lo suficiente a Vitaly Puzrin.

6 Pruebas de tipo

Active el JavaScript de su navegador y comience a probar cómo se verá el tipo de letra elegido en un sitio real.

Typetester es sencillo. Le permite ingresar y comparar diferentes fuentes y probar su apariencia. También puede jugar con el tamaño, el seguimiento, el color, etc. hasta que obtenga lo que desea. Puede comparar hasta 36 tipos de letra diferentes a la vez. Imagina la cantidad de tiempo que puedes ahorrar con eso.

Es genial.

7 marcado sucio

La codificación puede ser un poco agotadora a veces, pero la limpieza de código existe en Level: Utter Tedium. Sin embargo, es necesario si desea evitar errores y cargar más rápido.

Dirty Markup ayuda a ahorrar el tiempo que de otro modo podría dedicar a realizar actividades más interesantes (sándwich de tocino, ¿alguien?). Este viene con capacidades combinadas de otras herramientas de limpieza de sintaxis única. Estamos hablando de HTML Tidy, CSS Tidy, JS Beautify y Ace Editor. Ese es un limpiador completo.

Es una aplicación basada en la web para limpiar y formatear su HTML, CSS y JavaScript. No podemos pedir más.

8 manada de insectos

Es posible que te conviertas en un justiciero que mata insectos con esta poderosa herramienta.

BugHerd sigue el antiguo adagio de ‘Manténgalo corto y simple, estúpido’. Puede capturar los comentarios de los clientes, resolver problemas menores por sí mismo, rastrear errores (para que los extermine). También harás de secretaria y gestionarás tus proyectos.

Una interfaz de usuario súper fácil de apuntar y hacer clic en su sitio permite a sus usuarios informar problemas. BugHerd los convierte en informes con toda la información que pueda necesitar (como la versión del navegador del usuario). Es fácil de configurar, divertido de usar y tiene características como capturas de pantalla automáticas (extensión del navegador), enlaces directos, archivos adjuntos, datos completos del selector y debates.

Con una suscripción estándar de $ 29 / mes, eso es una trampa.

9 Mosca de pantalla

El diseño web receptivo es más que una nueva moda, ya que llegó para quedarse. Pero por ahora, encontrará que los diseños fluidos son complicados en el mejor de los casos. También se encontrará con una ira violenta tratando de probar su diseño en varios tamaños de pantalla.

Afortunadamente, Screenfly es una pequeña aplicación web agradable que probará sus consultas de @media por usted. Ingresa su URL y mostrará cómo sus consultas manejan las dimensiones del dispositivo en el que está haciendo clic en el panel superior.

No tiene en cuenta la diferencia de representación entre los navegadores, pero puede usar las capturas de navegador para eso. De lo contrario, es una forma simple y bellamente ensamblada de ver cómo se ve su sitio en diferentes resoluciones.

10 Fundación

Ya que estamos hablando de RWD, también podríamos comenzar a hablar de marcos para desarrollarlo.

El debate en Internet continúa sobre qué marco front-end es mejor: ¿Bootstrap o Foundation? Puedes usar uno u otro. Pero Foundation está un poco más a la vanguardia cuando se trata de sistemas de cuadrícula, unidades proporcionales para el diseño (aunque Bootstrap 4.0 Alpha se ha movido a unidades em y rem), soporte de derecha a izquierda, tablas de precios, recorridos y navegación fuera del lienzo. .

Es obvio que preferimos Foundation. Funciona con SASS y CSS, está repleto de funciones y, en general, es más conveniente y flexible.

Estamos de acuerdo con Zurb en esto: es ‘locamente rápido’.

11 borde de adobe

Después de una década de software que puso el diseño antes que el código, Adobe finalmente les da a los programadores un Edge.

Esta variedad de herramientas y servicios francamente asombrosa se crea teniendo en cuenta las nuevas tendencias de codificación de front-end. Nos tienen todo un lujo. Edge Animate para ayudar a los codificadores a crear animaciones y al mismo tiempo erradicar todos los rastros de Flash. Lo siento Adobe, Flash fue genial. Pero Animate usa HTML y JavaScript estándar, y ya sabes, una talla única para todos…

Hay Edge Code para editar CSS desde dentro de un documento HTML. Inspect consolida la prueba del navegador y las pruebas de compatibilidad del dispositivo para un diseño receptivo, y las sincroniza todas para una actualización/personalización súper rápida. El inmensamente popular Typekit ahora es parte de la familia Edge. Reflow aún no se ha lanzado, pero probablemente dejará fuera del agua a otros creadores de cuadrículas de CSS de front-end. Y aún hay más.

Sabemos. Tuvimos que levantar nuestras mandíbulas del suelo también.

12 vagabundo

Vagrant es mucho más que un software de desarrollo virtual.

Esta belleza le permite crear entornos de trabajo portátiles y fácilmente reproducibles. Consolida el software de virtualización, la caja base del servidor y las herramientas de configuración en un paquete poderoso. Básicamente, ya no tienes que tener VirtualBox + Ubuntu + Chef. Vagrant hará el trabajo de los tres y ocupará menos espacio mientras lo hace. Los usuarios avanzados también le dirán cómo le permite configurar fácilmente redes de máquinas virtuales múltiples.

Está escrito en Ruby, pero funcionará para PHP, Java, JavaScript, Python y C#. Puede trabajar con Vagrant en Windows, Mac OSX, Linux y FreeBSD.

Es superrápido porque no tiene nada de U-friendly-I que se ve bien pero ocupa el espacio que tanto necesita. Funciona bien como un entorno de prueba para los desarrolladores.

Eso es lo más cerca que podemos estar del Santo Grial.

13 Perspectivas de PageSpeed

PageSpeed ​​Insights de Google hace exactamente lo que dice en la lata. Le brinda información sobre el rendimiento del front-end de su página. Eso será una revelación para muchos desarrolladores importantes y poderosos. Así que haz una fiesta de carcajadas y comienza la calvicie acelerada de todo el cabello que se va a tirar.

Todo lo que hace es medir el tiempo transcurrido entre: la solicitud y la presentación del contenido de la mitad superior de la página, y la solicitud y la presentación de la página completa.

Verificará los aspectos independientes de la red para calcular el rendimiento de su página: configuración del servidor, estructura HTML, JavaScript, CSS e imágenes.

Es afilado como una navaja y despiadadamente rápido; así que definitivamente herirá tus sentimientos y muy posiblemente te hará llorar si obtienes una puntuación baja. También intentará compensarlo dándote sugerencias precisas para mejorar tu desempeño, como un padre condescendiente.

Y nos encanta.

14 git

La mayoría de los desarrolladores modernos ya están familiarizados con él. Así es como explicas la existencia de comunidades como GitHub después de todo.

Git es un sistema de gestión de código fuente y control de revisión de código abierto que realiza un seguimiento del historial de su proyecto en un repositorio. Es básicamente un PA súper rápido y súper eficiente.

Te permite experimentar libremente sin temor a estropearlo todo para siempre. También puede crear múltiples repositorios y usar ramificación/fusión para trabajar con características individuales. Es una herramienta particularmente útil para los esfuerzos de colaboración.

Está totalmente distribuido, por lo que no tendrás que temer la pesadilla de no tener red cuando estés desconectado (por diseño o por accidente). Simplemente puede agregar las actualizaciones en su repositorio principal, que lo estará esperando pacientemente de nuevo en línea.

15 Validación de marcado W3C

Este es el último rito de iniciación.

La validación de marcado W3C es bastante sencilla y necesaria. Como dice el W3C, la validación puede: ayudarlo a depurar, preparar su sitio para el futuro (los navegadores se basan en los estándares del W3C) y ayudar en el mantenimiento.

También le enseña cómo cumplir con los estándares al mostrarle los «errores» de sus métodos.

La validación de marcado no debe considerarse represiva, porque en realidad no lo es. Le ayudará a aprender a escribir mejor código…

Como un profesional.

Línea de fondo

Hay, por supuesto, más herramientas, complementos, complementos y recursos y comunidades en general que hacen que el desarrollo… bueno, no sea exactamente más fácil, pero menos molesto. Y más se están desarrollando en este momento. Hay un complemento de Firebug para Firefox que te permitirá monitorear y editar HTML, CSS y JavaScript, en vivo. PixelDropr es un complemento de Photoshop que te permitirá crear adorables botones e íconos para tu sitio con una mínima molestia.

Cada desarrollador profesional finalmente tiene su propio «juego de herramientas» de aplicaciones y software en el que confían para trabajar de manera más rápida y eficiente. Algunos son gratuitos, otros tenemos que pagar.

Pero entonces, ¿quién puede poner precio a la comodidad?