Ya hace tiempo hablamos de FUEL, un framework para desarrollar extensiones para Firefox. Ahora ya está disponible en Firefox 3, por lo que podemos ir aprendiendo y haciendo nuestras pruebas.
John Resig nos ofrece una serie de enlaces y ejemplos para empezar con FUEL:
Hoy me he encontrado con que apagué mal el ordenador ayer, y cuando he ido a poner el Firefox… [tachaaan]… no tenía los marcadores. ¡Socorro!, todos los feeds que tengo con el Sage perdidos. Aunque he podido recuperarlos, y aún no sé cómo, lo que sí he querido hacer es guardar los marcadores en otro directorio, en el cual se hacen copias de seguridad.
El método es sencillo:
Cierra Firefox
Copia o mueve el archivo bookmarks.html y el bookmarks.bak que se hayan en el profile en el directorio nuevo
Escribe about:config en la barra de dirección de Firefox
Haz click con el botón derecho del ratón, pulsa en Nuevo->Cadena
Escribe como nombre de la preferencia: browser.bookmarks.file
Escribe el path completo del archivo bookmarks.html (incluido el nombre del archivo)
Listo, ya tenemos cambiada la localización de los marcadores.
Nunca se para de aprender, y de John Resig menos. DocumentFragments son contenedores ligeros que pueden almacenar objetos DOM de Javascript. Yo ni había oído hablar de ellos y la verdad es que su uso es sencillo y mucho más potente que trabajar con el DOM normalmente (de 2 a 3 veces más rápido).
El ejemplo que muestra John lo dice todo y muy fácil. Primero creamos unos elementos para luego insertarlos (de forma normal y con DocumentFragments):
var div = document.getElementsByTagName("div");
for ( var i = 0; i < div.length; i++ ) {
for ( var e = 0; e < elems.length; e++ ) {
div[i].appendChild( elems[e].cloneNode(true) );
}
}
Y por último el nuevo método:
var div = document.getElementsByTagName("div");
var fragment = document.createDocumentFragment();
for ( var e = 0; e < elems.length; e++ ) {
fragment.appendChild( elems[e] );
}
for ( var i = 0; i < div.length; i++ ) {
div[i].appendChild( fragment.cloneNode(true) );
}
Resumiendo, mucho más eficiente y sencillo de usar. Seguro que para la próxima versión de jQuery nos ofrece esta implementación.
Esta parte es solo frontend, aún no está configurado para que interactúe con el servidor.
Lo más destacado de este ejemplo es el uso de vue-router, paquete que permite la realización de SPA de forma sencilla. Como la aplicación será gestionada por un único fichero (index.html), es necesario configurar el servidor de webpack para que gestione las URLs que acceden a otras partes de la aplicación para que no devuelva un error 404.
Esto es fácil, tan solo hay que añadir historyApiFallback y ponerlo a true en la configuración del servidor.
Lógicamente habrá que instalar el paquete vue-router.
Vale, ya está todo instalado, ahora solo hace falta configurar vue-router para que acepte distintas URLs y que muestre distintos controladores según sea el caso.
Para ello creamos un fichero router.js que posteriormente añadiremos a nuestra instancia de Vue:
Es fácil de entender, importamos los distintos controladores y configuramos las rutas (‘/‘ y ‘/login‘), a las que les asignaremos el controlador correspondiente.
Para indicar a Vue que vamos a usar vue-router, debemos importarlo en la instancia de la aplicación:
import App from './components/App.vue';
import router from './router';
Vue.use( VueRouter );
new Vue( {
el: '#app',
router,
components: {
App,
},
render: ( c ) => c( 'app' ),
} );
El siguiente paso es modificar el controlador principal de la aplicación (App.vue) para que muestre la cabecera (que tendrá su propio controlador) y la vista principal de vue-router (<router-view>):
Como no soy diseñador, pues usaré Buefy (basado en Bulma) y Material Design icons (no sé por qué le tengo algo de manía a FontAwesome).
Existe un paquete especial para usar Material Design en vue (vue-material-design-icons), que para funcionar con Buefy necesitará usar la fuente de letras de Material Design (@mdi/fonts). Instalamos todo y ya estará todo listo para empezar a diseñar nuestra página.
La cabecera (<v-header>) mostrará el logo, el menú principal y otro secundario para loguearse. No explicaré ni las clases Bulma (que yo casi ni conozco) y cómo se muestra el menú al clickar en el burger icon, ya que estos tutoriales son para llevar yo un diario de cómo desarrollar una app web con Hapi.js y Vue.js.
En esta entrada vamos a explicar cómo desarrollar un scrolling de texto usando para ello una miniatura del texto que se va a mostrar. Dispondremos de una capa con el texto y otra capa con la minuatura del texto, la cual remarca que parte del texto se está enseñando.
Este efecto ha sido testeado en IE6 y en Firefox 1.5 bajo Windows XP, en Opera es posible que no funcione debido a un bug que lleva arrastrando bastante tiempo.
Para aquellos que necesiten ofuscar su código Javascript para que sea más difÃcil de entender a los usuarios, les vendrá bastante bien esta lista de aplicaciones que modificarán nuestro código:
Jasob 2: modifica los nombres de variables, borra comentarios y elimina espacios entre muchas otras cosas.
Javascript Obfuscator: trata los scripts y ficheros js contenidos en una página html, modificando los espacios, comentarios, nombres de variables y funciones y lo escribe todo en una única lÃnea, añadiendo punto y coma cuando sea necesario. Existe versión online.