Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

Tips #6 – Color Highlighter, Enquire.js y Browsersync


  Publicado hace |  Etiquetas: , , , , , ,

Imagen de previsualización de YouTube

 

Numero 3 – Color Highlighter: Resaltador de colores

Supongo que alguna vez te preguntaste “¿qué color es este numero hexadecimal?, quizás un diseñador ya sabe cuales los colores más comunes en hexadecimal pero un programador probablemente no tantos.

Este es un plugin para Sublime Text 2 y 3 que permite resaltar valores de colores, con esto ya podremos ver que color es cada valor, muy útil al momento de hacer front-end.

Características:

  • Resalta colores en hexadecimal, RGBA, HSVA, por nombre y variables
  • Resalta con relleno, bordes, subrayado o texto coloreado (Subrayado solo en ST3)
  • Incluye un Color Picker y convertidor de valores de color a otros formatos
  • Soporte para per-procesadores de css

La instalación es vía Package Control o manualmente desde GitHub.

Color Highlighter

Numero 2 – Enquire.js: Librería de callbacks para media queries

Hoy por hoy muchos sitios web ya implementan Responsive Design por accesibilidad a los usuarios y por que además Google da preferencia en resultados a estos, no es difícil hacer un sitio web adaptable, hay frameworks CSS que ya hacen gran trabajo por nosotros, pero ¿qué pasa si queremos más?, queremos agregar funcionalidad extra al sitio web como una alerta cuando el usuario ve nuestro sitio web en un smartphone con una pantalla demasiado pequeña por ejemplo.

Esta librería permite obtener callbacks para los media queries permitiendo hacer muchas cosas más en función de estas.

Características:

  • API limpia e intuitiva
  • Pesa menos de 1kb minificada y comprimida con Gzip
  • Sin dependencia a JQuery

La instalación puede ser vía Bower o construirlo desde el repositorio de GitHub.

Enquire.js

Numero 1 – Browsersync: Herramienta para evitar recargar sitios en desarrollo y mucho más.

En el video pasado recomendé Livereload pero este era de pago, esta vez traigo otra herramienta similar pero mucho más poderosa.

Browsersync permite vigilar cambios en el desarrollo y recargar el sitio web por nosotros como una de sus tantas funcionalidades.

Características:

  • Recargar sitios web
  • Inspeccionar un sitio web remotamente
  • Simular conexiones lentas
  • Grabar historial de navegación y enviar URLs de prueba a todos los dispositivos
  • Interfaz web
  • Trabaja con Grunt y Gulp
  • Compatible con todos los SO
  • Y sincroniza todos los navegadores para hacer scroll por ejemplo.

Se instala vía NPM por lo que es sumamente fácil.

Browsersync

comments powered by Disqus