[perfect web development enviorment] Herramientas varias

Estas son las herramientas que uso para desarrollo web, al final no hay un IDE que lo provea todo, si no que varias herramientas juntas y scripts personalizados complementan las herramientas necesarias.

  • Navegadores : Firefox y Chrome
  • Editor de texto : Gedit / Pluma y Scite . Son editores de texto muy configurables y soporte para plugins y sobre todo , muy ligeros. Me gusta Scite por el soporte para expresiones reguarles.
  • Zim Desktop: Para organizar notas es muy cómodo, es una wiki de escritorio con plugins y además tiene soporte para git con lo que puedes versionear el contenido
  • xxdiff : Para comparar ficheros y directorios, imprescindible
  • apg: Para generar passwords
  • Herramientas de php : El propio binario de php para chequear sintaxis ( php -l ) , phpcs Code Sniffer
  • PHPUnit: Testear código
  • Linters y beautifiers

Plugins para Gedit / Pluma

  • Classbrowser: usa ctags para identificar elementos dentro del código fuente
  • External tools: Permite scriptear con shell usando como parámetros documentos o fragmentos de los documentos.
  • Simple folding : pliega código contenido entre {}
  • Smart highligth : colorea código
  • Snippets : automatiza completado de código usando una secuencia corta de letras + tabulador
  • viedit: Implementa comandos básicos de vi
  • word completion: Provee de autocompletado usando las palabras de los documentos abiertos.

Plugins para firefox:

  • webdeveloper: imprescindible para desarrolladores web, multitud de herramientas
  • aweseome screenshoot: Captura pantalla de navegación y permite agregar notas y texto
  • Firebug: depura código js, edita html, css
  • FireQuery: consola para jquery
  • Fireraimbow: Colorea el código javascript en firebug
  • Acebug: Colorea el código javascript en la linea de comandos o consola de javascript
  • Fireflow : tracea los trigers de jquery
  • Live HTTP Headers : Captura tráfico de navegación y analiza cabeceras
  • Colorizlla : Para identificar un color en una página web

keynotopia: Free Twitter Bootstrap 3.0 UI Mockup Templates for Keynote and PowerPoint

Keynotopia es una empresa que se dedica a crear imagenes vectorizadas en alta resolución y las empaqueta en themes OpenOffice, Windows8 , Iphone, Ipad, web … en resumen son conjuntos de imágenes diseñadas para componer maquetas en keynote o powerpoint.
Es muy útil si quieres hacer prototipos de aplicaciones de una forma cómoda y standard, ya que al tener los elementos ya creados sólo permite colocar estos elementos pero no crear ninguno nuevo, aún así es interesante.

He intentando bajar de su página el set de diseño para bootstrap el framework de maquetación de twitter disponibel aquí http://keynotopia.com/bootstrap/ y como pago a cambio solicitar twitear su producto, me ha gustado la idea y he colgado el twit con las indicaciones de keynotopia. No he podido obtener el enlace y bueno… he trasteado un poco para descargarme el contenido.

Para obtener el fichero descargable he abierto firebug y he localizado el bloque html en el que se llama a la acción para twitear el producto
[shell]<div id=”pay-per-tweet”>
<a id=”tweetLink” href=”#”></a><br>
<a href=”#PAY”></a><p></p>
<p style=”font-weight:bold; font-size:14px; color:#B74726; text-align:center; margin-top:-25px;”>Clicking the orange button will pop-up a window where you can edit and confirm the tweet, and then the download button will be activated<br>
<br></p></div>[/shell]
El objeto que genera la acción es id=”tweetLink” así que lo siguiente es buscar código javascript que lo maneje:
[shell]$(document).ready(function(){
// Using our tweetAction plugin. For a complete list with supported
// parameters, refer to http://dev.twitter.com/pages/intents#tweet-intent
$(‘#tweetLink’).tweetAction({
text: ‘Check out Keynotopia: mobile and web UI #design templates for Keynote and PowerPoint. #UX #mockups’,
url: ‘http://keynotopia.com/’,
via: ‘amirkhella’,
related: ‘keynotopia’
},function(){
// When the user closes the pop-up window:
$(‘a.downloadButton’)
.addClass(‘active’)
.attr(‘href’,’https://www.e-junkie.com/ecom/gb.php?c=cart&i=1057391&cl=127351&ejc=2′);
});
});[/shell]

No hay que tener mucha idea para ver una pedazo de url ahí que suena bastante bien además del comentario de código( // When the user closes the pop-up window: ) , así que si la copias y la pegas en el navegador entrarás en el proceso de compra sin coste del producto que queríamos.

Habiendo cumplido las condiciones de twitear la información producto, me he buscado una forma de conseguir el theme sin esperar a que me contesten de Keynotopia.

[perfect web development enviorment] linters : jslint

Otra herramienta y muy necesaria es un validador de código javascript, ya que es muy común cometer algún error con comas, cerrando paréntesis etc… y a veces no es muy sencillo de detectar hasta que nuestro código ha fallado.

Para validar nuestro código tenemos las siguientes herramientas disponibles :

Closure Linter de Google

Que además de validar el código, identifica si se están cumpliendo las guías de estilo propias de Goolge ( http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml )
Para instalarlo necesitamos la herramienta easy_install de Python que en debian viene en el paquete python-setuptools
[shell]sudo apt-get install python-setuptools[/shell]
y ahora para instalar goole clouse linter
[shell]sudo easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz[/shell]
y para usarlo
[shell]gslint test.js[/shell]
sugiero usar la herramienta excluyendo 3 errores relacionados con los espacios y tabulaciones que pueden agregar mucho ruido a la salida de errores y son fácilmente corregibles con expresiones regulares y sed
[shell]gjslint –disable 1,2,5 script.js[/shell]
 

php code snifer

Otra alternativa es usar php code sniffer que nos permite validar también el contenido de ficheros js , al igual que Closure Linter muestra una gran cantidad de errores deribados del estilo, pero dada la amplitud de php code snifer no entramos en detalle y lo dejamos para un post en concreto.

Para usar code snifer
[shell]phpcs script.js[/shell]

[perfect web development enviorment] linters : php

El cliente de PHP ( php-cli ) incorpora la capacidad de validar la sintaxis de código php así, para depurar errores en php usaremos “php -l Syntax check only (lint)” de forma :
[shell]
php -l test.php
No syntax errors detected in test.php
[/shell]
En caso de haber errores nos indicará el error y la linea.

También podemos usar code_sniffer que no sólo nos validará el código si no que además nos indica la calidad del código. Code sniffer soporta múltiples reglas de validación y niveles de mensaje para validar nuestro código, tanto en código como en estilo. Al ser una herramienta muy amplia le dedicaré un post específico.

Para validar código con php code sniffer :
[shell]
phpcs test.php
[/shell]

[perfect web development enviorment] linters : csslint

Tenemos tres alternativas para tener en nuestro entorno un validador de CSS

libcroco CSS 2.0 lint

En debian existe un paquete que se llama libcroco-tools que contiene un csslint pero sólo para version css 2.0
[shell]libcroco-tools – Cascading Style Sheet (CSS) parsing and manipulation toolkit – utils[/shell]
Para instalarlo:
[shell]sudo apt-get isntall libcroco-tools[/shell]
Para usarlo
[shell]csslint-0.6 demo.css[/shell]

css tidy

Otra herramienta es csstidy que nos permite es optimizar el contenido de css, de forma que elimina y avisa de propiedades no válidas o transforma valores para que sean más óptimos. No es extrictamente un validador y soporta sólo CSS 2.1

para instalarlo
[shell]sudo apt-get install csstidy>[/shell]
para usarlos
[shell]csstidy test.css output.css[/shell]
 

php codesniffer css lint

El paquete codesniffer también contiene un css lint
Para instalarlo
[shell]sudo apt-get install php-codesniffer[/shell]
para usarlo:
[shell]phpcs demo.css[/shell]

CSSLInt

http://csslint.net/
Es el más usado y el que ya viene paquetizado para sublime editor
Además está disponible para usarlo online.
[shell]# instalar node
# https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
sudo su -c ‘echo “deb http://ftp.us.debian.org/debian wheezy-backports main” >> /etc/apt/sources.list.d’/nodejs.list
sudo apt-get update
sudo apt-get install nodejs-legacy

# instalar nm
curl https://www.npmjs.org/install.sh | sudo sh

# instalar csslint
sudo npm install -g csslint[/shell]
para usarlo
[shell]csslint demo.css[/shell]

Entorno de trabajo open source para desarrollo web : php + mysql + cakephp + bootstrap + git / svn + firefox plugins

Llevo años intentando conseguir un entorno de trabajo totalmente práctico y agil para desarrollo web. Después de muchos años, he llegado a madurar el uso y configuración de herramientas que para mí suponen el poder realizar mi trabajo de forma eficiente y quiero compartilo con vosotros.

Para ello voy a ir subiendo una serie de pequeños posts, comentando herramientas y/o configuraciones que uso. Los voy a clasificar en varios tipos y poder ir publicando a medida que voy usando mis herramientas.

  • Herramientas de consola: apg
  • Editor de código : gedit, pluma
  • Herramientas de validación: lints
  • Versionado: git , svn
  • firefox plugins
  • diseño frontend , maquetación, ux…

Espero vuestras sugerencias y respuestas

debug en pluma editor de mate-desktop

En una nueva instalación los plugins de PLUMA no me cargaban y no encontraba forma de obtener los logs.
Para obtener esta valiosa información he tenido que consultar el código fuente de pluma concretamente pluma-debug.c

Donde se puede ver este fragmento de código:
[shell]
if (g_getenv (“PLUMA_DEBUG”) != NULL)
{
/* enable all debugging */
debug = ~PLUMA_NO_DEBUG;
goto out;
}

if (g_getenv (“PLUMA_DEBUG_VIEW”) != NULL)
debug = debug | PLUMA_DEBUG_VIEW;
if (g_getenv (“PLUMA_DEBUG_SEARCH”) != NULL)
debug = debug | PLUMA_DEBUG_SEARCH;
if (g_getenv (“PLUMA_DEBUG_PREFS”) != NULL)
debug = debug | PLUMA_DEBUG_PREFS;
if (g_getenv (“PLUMA_DEBUG_PRINT”) != NULL)
debug = debug | PLUMA_DEBUG_PRINT;
if (g_getenv (“PLUMA_DEBUG_PLUGINS”) != NULL)
debug = debug | PLUMA_DEBUG_PLUGINS;
if (g_getenv (“PLUMA_DEBUG_TAB”) != NULL)
debug = debug | PLUMA_DEBUG_TAB;
if (g_getenv (“PLUMA_DEBUG_DOCUMENT”) != NULL)
debug = debug | PLUMA_DEBUG_DOCUMENT;
if (g_getenv (“PLUMA_DEBUG_COMMANDS”) != NULL)
debug = debug | PLUMA_DEBUG_COMMANDS;
if (g_getenv (“PLUMA_DEBUG_APP”) != NULL)
debug = debug | PLUMA_DEBUG_APP;
if (g_getenv (“PLUMA_DEBUG_SESSION”) != NULL)
debug = debug | PLUMA_DEBUG_SESSION;
if (g_getenv (“PLUMA_DEBUG_UTILS”) != NULL)
debug = debug | PLUMA_DEBUG_UTILS;
if (g_getenv (“PLUMA_DEBUG_METADATA”) != NULL)
debug = debug | PLUMA_DEBUG_METADATA;
if (g_getenv (“PLUMA_DEBUG_WINDOW”) != NULL)
debug = debug | PLUMA_DEBUG_WINDOW;
if (g_getenv (“PLUMA_DEBUG_LOADER”) != NULL)
debug = debug | PLUMA_DEBUG_LOADER;
if (g_getenv (“PLUMA_DEBUG_SAVER”) != NULL)
debug = debug | PLUMA_DEBUG_SAVER;
[/shell]
con lo que vemos la lista de modificadores para depurar y podemos hacer este tipo de ejecución para obtener los logs:

depurar sólo los plugins y especificar una carpeta con los plugins
[shell]
$ env PLUMA_DEBUG_PLUGINS=true PLUMA_PLUGINS_PATH=~/.config/pluma/plugins/ /usr/bin/pluma
[/shell]

depurar todo
[shell]
$ env PLUMA_DEBUG=true /usr/bin/pluma
[/shell]