Separa el contenido de la funcionalidad, por ejemplo, si vas a añadir un evento a un objeto (onclick) añádelo mediante el evento window.onload usando un archivo js.
Una cosa que ya hemos comentado anteriormente es ver cómo funciona tu aplicación web si no está activado Javascript.
Realiza código compatible con los distintos navegadores. Desgraciadamente, a veces es necesario detectar el navegador y resolver según el navegador que sea.
Declara las variables usando var, si no lo haces puedes tener problemas en las funciones recursivas, por ejemplo si en una función tienes un for con una variable i y dentro de ese for vuelves a llamar a la misma función, al llegar al mismo bucle puedes tener problemas.
Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.
Instalaremos los paquetes:
npm i dotenv
npm i confidence
Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:
Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.
Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:
const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );
Dotenv.config( { silent: true } );
// NODE_ENV is used in package.json for running development or production environmentconst criteria = {
env: process.env.NODE_ENV,
};
const config = {
port: 3001,
};
const store = new Confidence.Store( config );
exports.get = function( key ) {
return store.get( key, criteria );
};
exports.meta = function( key ) {
return store.meta( key, criteria );
};
Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.
Creamos un store de Confidence y exportaremos los métodos get y meta.
Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:
qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:
Compatible con IE6+, Firefox 2+, Opera 9+, Safari 3+, Chrome 1+, Konqueror 3.5+
Esquinas redondeadas sin necesidad de imágenes
Posibilidad de indicar la esquina donde se quiere situar el tip (elemento del bocadillo que enlaza con el elemento)
jMaps es una librería de jQuery que facilita la integración de los mapas de Google Maps en nuestra web, sin necesidad de conocer el API de Google Maps.
Permiote dada una dirección válida podemos obtener su localización y al revés, buscar direcciones hacia y desde cualquier localización, añadir y quitar marcadores, polígonos, capas, publicidad de adsense… jMaps
Vía / Script & Style
PHP.JS es un script que quiere mover las funciones PHP a Javascript, para que el desarrollador use la misma nomenclatura, ya que hay funciones muy similares y que para desarrolladores poco experimentados puede resultarles confuso.
Yo recomiendo que la gente aprenda ambos lenguajes y que los sepa diferenciar, pero ante la confusión de lenguajes puedes echar mano a este script, aunque de rendimiento puede ir peor.
Entre las funciones nos encontramos las que tratan los arrays, strings, UTF-8, entre otras. PHP.JS
Vía / dzone
This is a very cool extension for Firebug (add-on for an add-on?) that expands Firebug’s capabilities with jQuery. For instance, a built in jQueryify button, showing attached event handlers in the Content / DOM tree view, and highlighting all elements in a jQuery collection. I don’t think it’s new but I hadn’t seen it until I finally watched Remy S …