Las mejores herramientas de desarrollo web que probablemente no estés usando

Pautas de CSS

Comencemos con algo realmente útil. Estas Directrices de CSS, creadas por un arquitecto front-end consultor independiente del Reino Unido, no son para principiantes. Son consejos de alto nivel y usarlos dará como resultado un mejor CSS. Incluso a los mejores desarrolladores web les vendría bien un repaso de vez en cuando.

Las pautas repasan la sintaxis y el formato, los comentarios, las convenciones de nomenclatura, los selectores de CSS, la especificidad y la arquitectura. El autor continúa agregando a las pautas para que los desarrolladores web siempre tengan la información más actualizada para realizar su trabajo.

Marco de juego

Para crear aplicaciones web con Java y Scala, Play Framework es de primera categoría. Es extremadamente amigable para los desarrolladores, ya que todo lo que necesita es un navegador y un editor de texto. Presionar Actualizar le muestra sus enmiendas inmediatamente y hay herramientas de prueba integradas. Puede escalar Play Framework, ya que tiene un nivel web sin estado y utiliza un modelo completamente asíncrono creado sobre Akka.

Y música para los oídos de cualquier desarrollador web: se creó teniendo en cuenta la capacidad de respuesta móvil y es capaz de crear aplicaciones. Puede confiar en que Play Framework funcione, ya que la mayoría de las bibliotecas de Java se pueden usar en Play, además el compilador y el tiempo de ejecución están en JVM, lo que significa que sus aplicaciones se ejecutan muy rápido.

Dimensiones

Esta es una extensión del navegador Chrome que es de código abierto . Le permite medir todo lo que ve en el navegador, como imágenes, campos de entrada, botones, videos, gifs, texto e íconos. Es particularmente útil cuando su diseñador ha creado una maqueta de un sitio web en un PDF: simplemente colóquelo en el navegador y mida los elementos. Puede configurar un atajo de teclado en la configuración de Chrome al final de la lista de extensiones para que pueda habilitar y deshabilitar rápidamente la herramienta.

Base de datos del sofá de Apache

“Una base de datos para la web” es como Apache Couch DB se describe a sí mismo. Es un producto de código abierto y puede almacenar documentos y datos en la nube con documentos JSON y luego indexar, combinar y transformar sus documentos usando JavaScript.

Puede consultar sus índices con su navegador web, a través de HTTP, además tiene notificaciones de cambios en tiempo real para que pueda realizar un seguimiento de su desarrollo web. Todo esto viene con una interfaz fácil de usar en el lado del administrador.

Flynn

Flynn usa la integración de varios componentes para crear un sistema. Los componentes «hablan» entre sí y se adaptan, lo que significa que la implementación y el escalado de su aplicación, así como sus bases de datos, se pueden administrar fácilmente. La herramienta ejecuta y escala automáticamente las aplicaciones que, de lo contrario, tendría que hacer manualmente una por una. Se basa en un conjunto de API principales, por lo que puede ampliarlo o personalizarlo para cualquier entorno o necesidad.

Masca bichos

Los desarrolladores web siempre escuchan quejas de los usuarios una vez que se ha creado el sitio; sin importar la cantidad de pruebas, siempre habrá errores y preferencias personales. Bug Muncher hace que proporcionar estos comentarios sea realmente fácil.

Los clientes simplemente tienen que resaltar los problemas en su sitio web y la herramienta toma una captura de pantalla. Esto reduce la necesidad de ir y venir con correos electrónicos y conversaciones telefónicas con legos que intentan describir un problema técnico. Las estadísticas vitales, como el nombre y la versión del navegador y el sistema operativo, se le informan para que tenga todo lo que necesita para trabajar en el problema en un solo lugar.

Robot de tiempo de actividad

Otra área del desarrollo web que debe estar constantemente en segundo plano es la supervisión del rendimiento de un sitio web. Uptime Robot hace esto por usted. Comprueba 50 de sus monitores cada cinco minutos, incluidos HTTP(s), Ping, Port y palabras clave. Puede elegir cómo recibir alertas, por ejemplo, a través de correo electrónico, SMS o incluso Twitter. También puede ver el tiempo de actividad, el tiempo de inactividad y los tiempos de respuesta.

Uilang

Uilang es un lenguaje de programación para diseñadores web que es mínimo y está centrado en la interfaz de usuario. Le permite crear aspectos de su sitio web, como ventanas emergentes, pestañas, galerías y superposiciones. Está diseñado como función ligera para que sea simple para aquellos sin mucha experiencia en programación. Una vez que se inserta el código, los usuarios pueden simplemente presionar el botón correspondiente para ocultar las notificaciones, usar un interruptor de palanca y ver acordeones desplegables. Esto agrega interactividad al sitio.

Scala

Scala, otro lenguaje de programación, le permite construir jerarquías elegantes para la máxima reutilización y extensibilidad del código, así como para implementar su comportamiento utilizando funciones de orden superior. Puede integrarse con Java ya que Scala se ejecuta en la JVM. Además, la flexibilidad de Java se refleja en Scala pero se combina con el poder de las clases para la herencia múltiple. Luego puede continuar con la coincidencia de patrones y crear funciones de orden superior.

Hay una comunidad de Scala a la que le encantan sus funciones, por lo que no será el único que pruebe esta.

Haml

En primer lugar, Haml es un acrónimo de HTML abstraction markup language. En segundo lugar, su principio principal es hacer que el marcado sea hermoso. El marcado no debe consistir solo en lograr que los navegadores representen la página como usted desea; por lo tanto, el marcado debe ser tan fácil de usar como el resultado renderizado para que el usuario lo entienda.

Haml crea un código limpio ya que evita la repetición de texto cuando cada elemento se nombra dos veces; en su lugar, se basa en la sangría. Describe limpia y simplemente el HTML de cualquier documento web sin el uso de código en línea. Los sistemas de plantillas de páginas en línea, como PHP, ASP y ERB, se reemplazan por el uso de Haml y no necesita codificar HTML explícitamente en la plantilla.

Conversar

Para una instalación de chat en su sitio web, Converse le permite configurar chats de un solo usuario o salas de chat de múltiples usuarios. Los usuarios pueden enviar solicitudes de chat y aceptar o rechazar, además de agregar su estado de chat como «ocupado» o «disponible» y mostrar su estado de escritura.

Tiene la capacidad de traducirse a 15 idiomas y puede transmitirse en pantalla para chatear con amigos en Gmail o jabber.org . Converse se puede integrar con muchas plataformas web, como WordPress y Roundcube, y dado que está escrito en Javascript, se ejecuta directamente a través de su navegador.

HumHub

Esta es otra herramienta que permite a los usuarios de su sitio web chatear entre sí. Sin embargo, HumHub hace esto en una escala mucho mayor, ya que puedes crear tu propio sitio de redes sociales con él. Tiene una interfaz fácil de usar y permite que la empresa, la escuela, el grupo de proyecto o el club de amistad del sitio web se comuniquen y colaboren fácilmente.

Cada usuario del sitio tiene su propia «tarjeta V», que brinda una descripción general de su perfil, además de que se pueden configurar grupos. Los usuarios pueden publicar, seguir, comentar y dar me gusta al contenido de otras personas, o simplemente compartir archivos y discutirlos. Es completamente seguro ya que es una solución autohospedada y es flexible ya que puede agregar aplicaciones de terceros. Además, como toda buena red social, es compatible con dispositivos móviles.

Impulso

Esta herramienta puede crear interactividad para su sitio web o, específicamente, interacciones dinámicas basadas en la física. Por ejemplo, puede crear encabezados de chat como los de Facebook, un menú desplegable, desplazamiento de inercia, portada de Oridomi y desplazamiento hinchable. Todos están diseñados para funcionar con dispositivos móviles.

Usar Impulse para crear contenido dinámico funciona mejor que CSS, por ejemplo, ya que termina habiendo un retraso más corto entre el momento en que se genera la animación y el momento en que comienza a reproducirse. CSS tiende a ser mejor para animaciones estáticas. Impulse ha creado una variedad de animaciones y siempre está trabajando en más.

Dúo

La filosofía de Duo es crear pruebas de concepto rápidas, escribir componentes modulares y crear grandes aplicaciones web. Hace esto de manera increíblemente simple a través de un administrador de paquetes, lo que le permite escribir código de interfaz de usuario de forma rápida y sencilla. Tiene soporte de primera clase para Javascript, HTML y CSS y admite transformaciones de código fuente, como Coffeescript y Sass.

Además de exponer una interfaz de línea de comandos de Unix-y, extrae la fuente directamente de GitHub con versiones semánticas . Tampoco requiere un manifiesto. Duo elimina los repetitivos, que muchos administradores de paquetes tienen y requieren que los uses para probar una idea o aislar un error. Tiene un ecosistema de componentes sólido y hace que el escalado se adapte a la creación de aplicaciones web completas sin problemas.

monitorear

Monit es fantástico para monitorear su servidor y se usa para la recuperación de errores: es una de esas aplicaciones que necesita para no tener un peso en la cabeza. Realiza mantenimiento y reparación automáticos y puede ejecutar acciones causales significativas en situaciones de error. Por ejemplo, si sendmail deja de funcionar, Monit puede iniciarlo nuevamente y enviarle un mensaje de advertencia para que pueda actuar rápidamente.

Se puede usar para monitorear procesos daemon o programas similares que se ejecutan en localhost, verificando cambios, como cambios de marcas de tiempo, cambios de suma de verificación o cambios de tamaño. Supervisa la conexión de red a los servidores, lo cual es útil si trabaja en la nube. También le permite probar programas o scripts. Tanto la versión gratuita como la abierta de BSD, muchas distribuciones de Linux desde paquetes .deb a .rpm, OS X y Solaris .pkg incluyen Monit.

Interfaz de usuario de Onsen

Una herramienta específica para aplicaciones, la interfaz de usuario de Onsen tiene una gran selección de componentes de interfaz de usuario basados ​​en la web y marcos Java y CSS para crear aplicaciones HTML5, PhoneGap y Cordova. Funciona con jQuery y AngularJS y es personalizable, por ejemplo, usando Font Awesome .

Y, por supuesto, tiene un diseño receptivo para todos los dispositivos, cambiando entre tamaños de columna para móviles y tabletas. Hace que la experiencia del usuario al navegar por las aplicaciones sea superior y rápida, y es increíblemente fácil de usar.

Cinemático

Cinematico creará un sitio web receptivo para usted, que ya es elegante y sofisticado, pero que se puede personalizar según sus necesidades. Puede agregar su logotipo e imagen de fondo, por ejemplo, o gastar un poco de dinero en un tema.

Sin embargo, el uso principal de Cinematico es que actualiza su sitio web cada vez que publica un nuevo video de YouTube o Vimeo. Se vincula a su lista de reproducción, canal o cuenta de YouTube y Vimeo y se sincroniza automáticamente. Todo esto y es gratis, ya que es de código abierto.

Imagen

Buscar imágenes para un sitio web a menudo puede ser una tarea laboriosa. Parece que solo será un trabajo rápido, pero a veces simplemente no funciona de esa manera.

Pictura puede ayudar, ya que le permite buscar cualquier imagen en Flickr sin salir de su entorno de diseño. No se distraerá con otras imágenes, ni tendrá que descargarlas y luego insertarlas en su trabajo. La herramienta convierte instantáneamente su foto elegida en una pieza de capa y la coloca en su lienzo. Funciona con filtros, por lo que puede elegir fácilmente imágenes libres de regalías y sin restricciones de derechos de autor.

patines

Para imágenes con una diferencia, Rollerblade es una aplicación brillante. Permite a los usuarios de teléfonos inteligentes, tabletas y computadoras de escritorio deslizar la imagen que ven de izquierda a derecha, y esto mostrará una vista de 360 ​​grados de la imagen. Funciona para mostrar un edificio o una ubicación, o simplemente una foto de un producto. Dado que las compras en línea son un negocio tan grande, tiene sentido brindarles a los clientes una experiencia tan «real» como sea posible.

Para los desarrolladores web, todo lo que necesita hacer es incluir el código en la parte superior de su página con su CSS y hacer algunos ajustes para obtener el rotador como lo desea. Puede tener tantos rotadores de imágenes como desee, además de cambiar la sensibilidad y elegir si se reproduce automáticamente o debe ser arrastrado por el usuario.

Creador de iconos

Los íconos y emoticonos están en todas partes en estos días y es fácil entender por qué: una simple sonrisa puede agregar calidez a cualquier comunicación, incluso si es una carita amarilla la que sonríe. Con Icon Maker puedes crear tus propios iconos para agregarlos a tu sitio web.

Es bastante fácil de usar para cualquier persona y tal vez solo un poco divertido para los desarrolladores web experimentados que buscan sus propios íconos personalizados. Cree un ícono plano o 3D con sombras paralelas y otras características de diseño en minutos.

Delorean

Si desea aplicar los conceptos de Flux en sus interfaces, Delorean lo hace realmente fácil para usted. Es un marco Javascript completamente agnóstico, por lo que no necesita depender de ningún marco. Hace que la lógica de su aplicación sea más simple que MVC, ya que tiene un flujo de datos unidireccional, además hace que los datos sean más consistentes en toda su aplicación. Mantenga sus datos actualizados sin tener que verificar manualmente mientras escucha los cambios de datos.

Es muy simple de instalar, usando un par de opciones diferentes.

CylonJS

Esto está al final de la lista, ya que mira hacia el futuro, ¡con robots! Aunque el Internet de las cosas existe desde hace algún tiempo, no está completamente integrado en todos los hogares. Esta herramienta permite a los desarrolladores crear una web entre sus 35 plataformas soportadas. Esto incluye Nest y Pebble, además de sus elementos básicos como su teclado o con fines de marketing; Fuerza de ventas.

Tiene un módulo NPM para que pueda ejecutarse directamente en su navegador, o puede ejecutarlo a través de su dispositivo móvil a través de una aplicación conectada a Chrome o una aplicación móvil PhoneGap. Es compatible con las API HTTP y Socket.io, lo que le permite enviar comandos, enviar datos en tiempo real y monitorear sus robots.

Terminando

Entonces, estas son las mejores herramientas de desarrollo web que quizás aún no haya encontrado. Recuerda, siempre se están desarrollando herramientas que pueden ayudarte en tu día a día como desarrollador web. Todo desarrollador web se encuentra con un problema y, por lo general, quiere crear algo para solucionarlo y mejorar su vida.

También notará que todos son gratuitos, a excepción de algunos complementos que puede comprar una vez que desee actualizar la herramienta. Eso es porque aquellos que los han desarrollado quieren permitir que otros que enfrentan los mismos problemas tengan acceso a una solución. Además, a las comunidades de toda la web les encanta ayudarse mutuamente.

Así que revise las herramientas y vea cómo mejoran su experiencia de desarrollo. Tal vez te preguntes cómo te las arreglaste de antemano. Y me encantaría saber cómo te ayudaron estas herramientas y/o si me perdí alguna que creas que merece una mención.

Imagen en miniatura del artículo de Sabelskaya /  shutterstock.com