Curioso y sencillo plugin de jQuery que permite crear previews de imágenes enlazadas en etiquetas <a> tanto directamente en el atributo href como en el rel. Permite añadir estilos, un contenedor e incluso eventos (onload, onhide, onshow).
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
Interesante script de jQuery que integrándolo en nuestra página, carga el script de Google Analytics y le añade características extra que normalmente no tenemos en cuenta:
Enlaces salientes
E-Mails (mailto)
Descarga de ficheros, configurable indicando el tipo de fichero que se quiere monitorizar
SpinBox.JS es un script no obstrusivo que permite añadir botones para aumentar y disminuir el valor de una caja de texto.
Permite inhabilitar alguno de los botones para no permitir aumentar o disminuir (o ambos) y su uso es muy sencillo, tan solo hay que añadir una función que modifica los inputs.
Por si te interesa, también puedes visitar otro script parecido que mencioné hace tiempo, o incluso uno que hice yo. SpinBox.JS
Vía / CSS Globe
linkNotify es un plugin jQuery que permite modificar enlaces y mostrar un texto personalizado que indica que el enlace se está cargando. Algo que puede ser muy útil para aplicaciones en la que el usuario es algo básico y pincha y pincha en el enlace eternamente hasta que ve algún resultado sin esperar a que cargue la primera vez.
$('a').linkNotify('Espera mientras carga la pagina...');
Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.
En plan rapidito he hecho un script jQuery que realizaría esta función:
$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});
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.