Trasteando un poco con jQuery me ha dado por hacer una función que elimina las etiquetas HTML de una caja de texto de un formulario. Esto puede ser necesario cuando no se quiere que se introduzca HTML en un campo. Lógicamente, esto es la parte cliente, en el servidor debería haber una función similar que lo hiciera.
La función es sencilla, en cada input:text añadimos el evento change para que cuando se modifique el contenido, se ejecute la función de strip_tag, la cual crea un elemento DIV auxiliar, hago que su contenido sea el valor de la caja de texto, me quedo son con el texto e inserto este valor en el input:
¿Dudas?, alguna. Si entre el texto pongo un <script>alert(1);</script> me ejecuta el script, algo no muy elegante. ¿Qué pasa con el elemento DIV creado?, ¿se queda en el limbo o se destruye?.
Bueno, para mis primeras pruebas con jQuery no está mal del todo.
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.
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
Una librería para MooTools que permite realizar flash en los elementos. Permite indicar el color de origen, final, el número de repeticiones y el tiempo del efecto y la posibilidad de incluir propiedades al elemento (por ejemplo backgroud-color).
Su uso es sencillo y nos ofrece ejemplos de cómo utilizarlo:
/* flash on click */
$('flash-link').addEvent('click', function () {
$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
});
/* flash on ajax complete */
$('flash-link-ajax').addEvent('click', function () {
//make the ajax call
var req = new Request({
method: 'get',
url: 'element-flashing.php',
data: { 'do' : '1' },
onRequest: function() { },
onComplete: function(response) {
$('flash-me-ajax').set('text', response).flash('#fff','#fffea1',5,'background-color',500);
}
}).send();
});
/* flash on scroll completion */
$('flash-link-scroll').addEvent('click', function() {
var scroller = new Fx.Scroll(window, {
onComplete: function() {
$('scroll-to-me').flash('#fff','#fffea1',10);
}
}).toElement('scroll-to-me');
});
Eso sí, no olvidar que no hay que abusar de este efecto.
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 que realiza el efecto de escala de grises en cualquier imagen o elementos HTML. Funciona para navegadores que permiten canvas, IE ya tiene un filtro que lo realiza.
Su uso es muy sencillo, tan sólo importar la librería y ejecutar el siguiente código:
