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 #5 – Init, ImageOptim-CLI y Livereload


  Publicado hace |  Etiquetas: , , , , , ,

Imagen de previsualización de YouTube

Numero 3 – Init: Plantilla para iniciar un proyecto front-end

Si analizáramos lo que hacemos cada vez que arrancamos un proyecto front-end, podremos notar que hay cierto patrón o rutina que seguimos, por ejemplo, la instalación de herramientas, estructura de proyecto y demás, esto puede ser automatizado o plasmado en una plantilla.

Init ofrece una plantilla configurable que contiene todo lo necesario para iniciar un excelente proyecto web, dentro podrás encontrar herramientas modernas front-end de gran utilidad.

Algunas de ellas son:

  • HTML5 Boilerplate
  • Normalize.css
  • Modernizr
  • Grunt.js
  • Bower
  • RequireJS
  • Sass
  • Karma

Cada uno por supuesto con su respectivo archivo de configuración editable.

Si quieres algo aún más automatizado, existe un plugin para Yeoman, con esto puedes generarlo sin clonar el repositorio.

http://use-init.com/

Numero 2 – ImageOptim-CLI: Herramienta todo en uno para optimizar imagenes

Hay veces que los desarrolladores necesitamos de un buen diseñador que nos pueda optimizar las imágenes pero no siempre contamos con uno y es ahí cuando obtenemos ciertas habilidades con software para ello pero no quiere decir que seamos buenos y mucho menos rápidos.

ImageOptim-CLI es una herramienta que automatiza el proceso de optimización de imágenes en base a linea de comandos valiendose de otras mas como ImageOptim, ImageAlpha, y JPEGmini para Mac.

Opciones:

  • -d, –directory directory of images to process
  • -a, –image-alpha pre-process PNGs with ImageAlpha.app
  • -j, –jpeg-mini pre-process JPGs with JPEGmini.app
  • -q, –quit quit all apps when complete
  • -c, –no-color disable color output
  • -h, –help display this usage information
  • -e, –examples display some example commands and uses
  • -v, –version display the version number

Por supuesto al ser basado en linea de comandas podemos automatizar con Grunt y Gulp. Solo funciona en Mac OS X y depende de ciertas apps especificadas en el repositorio del proyecto.

Se instala via npm o curl.

http://jamiemason.github.io/ImageOptim-CLI/

 

Numero 1 – Livereload: Deja de refrescar manualmente el sitio web

Algo interesante de la mayoría de los desarrolladores es la necesidad de ver los cambios del proyecto web en el navegador y tener que refrescar manualmente, podemos no demorar mucho pero hacemos tecnología y lo mejor sería automatizarlo.

Esta herramienta permite vigilar los archivos de un directorio para refrescar el navegador cada vez que encuentre cambios en los archivos.

Características:

  • Permite vigilar 43 tipos de archivos como Sass, Less, CoffeScript entre otros
  • Ejecutar un comando después de terminar el proceso
  • Tiene extensión para navegadores, evita que escribas el código JavaScript necesario para que funcione
  • Existen proyectos para que funcione con Gulp y Grunt

La instalación es la misma que una app de Mac, Windows y Linux, solo necesitas pagar el precio ya que no es gratuito ni software libre.

http://livereload.com/

comments powered by Disqus