PopBox es un script que nos permite añadir el zoom a nuestras imágenes y poder apliarlas o reducirlas (con efecto de transición) de forma sencilla.
Su uso es simple, pero tiene un problema, que necesita atributos para su funcionamiento que hay que añadir a la etiqueta img, que hace que no valide el XHTML.
La verdad es que no es un script que me guste mucho, no valida, hay que añadir demiasados atributos y eventos, pero pensando en la gente que necesita este tipo de efectos y no les importa mucho la validación, quizás les sea interesante y realmente es fácil de usar. PopBox
VÃa / WebAppers
En esta ocasión se van a usar dos scripts, uno de ellos está basado en el algoritmo de Javascript Password Strength Meter, el cual mide que la contraseña tenga más de 8 caracteres, tenga minúsculas y mayúsculas, algún número, use caracteres especiales y use L33t.
En este caso el formulario se realiza con Ext Form, una gran librerÃa, pero no me gusta que el formulario se cree mediante javascript. Password Meter
VÃa / WebAppers
Impresionante la librería que ha creado Nicolas Garcia Belmonte que permite crear gráficas RGraph, Treemaps o Hyperbolic Trees. ¿Y qué tipo de gráficas son estas? pues explicándolo llanamente, las que muestran relación entre elementos usándo árboles, pero algo más visuales, centrando nodos.
Por lo poco que he visto, está desarrollado en Canvas y para IE lo simula mediante VML. También estaría bien mirar si permite ampliar nodos dinámicamente. JIT
WireIt es una librerÃa basada en Yahoo Pipes que nos permite crear cables y conectar con ellos elementos. SÃ, algo difÃcil de entender, pero si decimos que es perfecto para crear diagramas o si sÃmplemente vemos la imagen, nos haremos una idea de cuál es su funcionalidad.
Está montada sobre Yahoo! User Interface y nos permite mover objetos, conectarlos entre sÃ, desconectarlos y mucho más. WireIt
Gracias ElÃas por el aviso
GlassBox es una librería Javascript que permite añadir bordes transparentes, con transparencias y con sombreado. Es muy sencillo de usar, admite skins, bien documentado y funciona en IE 6, Firefox 2, Opera 9 y Safari 3.
Como se puede ver, existen dos scripts dentro de npm: build que compila el js y extrae los CSS, y dev, que arranca el servidor de webpack habilitando HMR (🎶 ¡ya no puedo vivir sin él! 🎶).
Ambas configuraciones de webpack usan un script en común (webpack.config.common.js):
const webpack = require( 'webpack' );
const path = require( 'path' );
// Carga los ficheros .vueconst VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
// Configura stylelintconst StyleLintPlugin = require( 'stylelint-webpack-plugin' );
// Para obtener un path para los aliasfunctionresolve( dir ) {
return path.join( __dirname, '.', dir );
}
module.exports = {
mode: 'production',
// Fichero inicial del proyecto
entry: './js/main.js',
// Fichero final para incluir
output: {
filename: 'js/main.js',
publicPath: '/dist/',
},
module: {
// Reglas para los ficheros
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
use: [
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new StyleLintPlugin( {
files: [ '**/*.{vue,htm,html,css,sss,less,scss,sass}' ],
} ),
],
resolve: {
extensions: [ '.js', '.vue', '.json' ],
alias: {
'@': resolve( '' ),
},
},
};
El frontend se gestiona desde el fichero main.js, que inicializará Vue y añadirá el componente principal:
import Vue from 'vue';
import Buefy from 'buefy';
import'buefy/dist/buefy.css';
import App from './components/App.vue';
import'@/assets/scss/main.scss';
Vue.use( Buefy );
new Vue( {
el: '#app',
components: {
App,
},
render: ( c ) => c( 'app' ),
} );
// accept replacement modulesif ( module.hot ) {
module.hot.accept();
}
Y ya por último el componente App.vue, que muestra simplemente un poco de HTML
JSINER es una librerÃa de Javascript que pretende facilitar la programación orientada a objetos y la dependencia en la gestión de scripts en ficheros externos.
Para el tema de la herencia, el autor define una herencia lazy, cuyas caracterÃsticas son las siguientes:
Tiene las mismas caracterÃsticas que la herencia mediante prototype.
No es necesario orden alguno en la declaración de los scripts externos.
En la mayorÃa de los casos la carga del HTML es más rápida, ya que los scripts se cargan solo en el momento en el que se necesitan.
Las dependencias se declaran en un modo más especÃfico y las dependencias entre clases solo en scripts concretos.