Jx: GUI mediante Mootools

ByLuis

JX Library es una librería para Mootools que nos facilita la realización de interfaces gráficas en nuestras páginas web.
jx.png
Nos ofrece una variedad de elementos gráficos: layouts, paneles, árboles, grids, botones, toolbars, selectores de color, combos, …
Jx
Vía / WebAppers

Similar Posts

ExtJS: librería Javascript, Ajax y componentes GUI

ByLuis

ExtJS es una librería Javascript que hace de puente a las librerías de Yahoo!, jQuery y Prototype+Scriptaculous para ofrecernos de forma sencilla componentes GUI en nuestras aplicaciones cliente.
extjs.png
Entre los componentes que nos ofrece encontramos diálogos, menús, tablas, layouts, paneles, pestañas y mucho más.
ExtJS
Vía / dzone

Hapi.js + Vue.js internacionalización (i18n)

Hapi.js + Vue.js internacionalización (i18n)

ByLuis

A partir de ahora no voy a explicar lo que hago, sino que compartiré lo que considere algo especial, pondré algún enlace a algún otro tutorial y por supuesto el enlace al tag de GitHub.

En esta ocasión he añadido internacionalización al proyecto. Parece una tontería, pero cuanto antes se meta, en mi opinión, mejor que mejor. Luego cambiar todos los textos para que admitan i18n es un tostón enorme.

Para añadir internacionalización usaremos el paquete vue-i18n, que añade todo lo que necesitamos. Aquí hay un tutorial bastante completo que explica cómo usarlo, y es el que yo he seguido.

Lo único que he añadido es que coja el idioma del navegador:

import( `@/lang/${ browserLang }.json` ).then( messages => {
	i18n.setLocaleMessage( browserLang, messages.default );
} );

Aquí está el código

|

El rendimiento de Google Instant Previews

ByLuis

Algunas veces no nos paramos a pensar en los cambios que añade una web, en este caso Google, los problemas que pueden aparecer en tema de rendimiento. Y estos problemas suelen ser fundamentales a la hora de la impresión que se lleva un usuario de la web, claro, que Google no se caracteriza por problemas de rendimiento y los expertos que están trabajando allá deben ser de lo mejorcito que existe.

Después de este rollo introductorio, me gustaría apuntar los 3 aspectos que utiliza Google para mejorar el rendimiento que se centran sobre todo en la reducción del número de peticiones HTTP:

  • Compilación de Javascript: mediante Closure Compiler, consigue reducir el tamaño de los ficheros js, reutilizar variables, …
  • JSONP bajo demando: JSONP permite envolver la respuesta JSON con una llamada Javascript. Se realizan llamadas directas al script en vez de usar Ajax, lo cual permite hacer llamadas crossdomain y que el navegador lo cachee perfectamente. El problema es que si se añade la llamada con un createElement, el navegador se queda cargando, por lo que es mejor meterlo entre un setTimeout.
  • DATA URIs: es un método de añadir contenido en URLs usando base64, el problema es que IE8 sólo admite DATA URIs de 32k, por lo que dividen las imagenes en trozos y los “empalman” con etiquetas IMG. También han comprobado que aunque base64 añade hasta un 33% del tamaño, como lo devuelven en gzip, el tamaño final es más o menos el mismo.

Está claro que hay que aprender de los que saben.

Instant Previews: Under the hood

Vía / High Scalability

|

PHP.JS: usar Javaqscript con nomenclatura PHP

ByLuis

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

Tutorial de Drag&Drop de capas con jQuery UI

ByLuis

Últimamente, algunas webs como la BBC han modificado su diseño para hacerlo modular y permitir que el usuario realice Drag&Drop de los módulos para colocarlos cómo más le guste, algo que Netvibes o iGoogle ya hacían hace bastante tiempo. Afortunadamente, ahora con jQuery UI se puede realizar de forma muy sencilla.

El tutorial que enlazo explica paso a paso cómo hacerlo haciendo uso de jQuery, jQuery UI mediante los sortables y jQuery Cookies para trabajar con cookies de forma facil (y poder recuperar la configuración cuando el usuario vuelva a conectarse).

$('#sidebar .sortable-list').sortable({
    axis: 'y',
    containment: 'parent',
    forceHelperSize: true,
    forcePlaceholderSize: true,
    handle: '.section-title',
    opacity: 0.8,
    placeholder: 'placeholder',
    update: function(){
        $.cookie('sidebar-cookie', getItems('sidebar'));
    }
});

jQuery: Customizable layout using drag and drop

Vía @kingsleyphls

|

Cómo hacer un lector de feeds con jQuery Mobile

ByLuis

Completísimo tutorial que nos explica cómo realizar un lector de feeds usando jQuery Mobile (que actualmente está en versión alpha). Cuyas características son las siguientes:

  • Mostrar lista de feeds con sus logos
  • Mostrar el feed cuando se hace click
  • Crear los estilos para los artículos
  • Crear un icono Apple-touch para que el usuario pueda añadir la aplicación a su teléfono
  • Usar YQL para obtener los datos del feed
  • Caché básico

Post original