Ya hace tiempo comentamos como indicar la calidad de una contraseña mediante Javascript y esta vez vamos a mostraros otro ejemplo de cómo hacerlo.
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
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
Live Validation es una librerÃa Javascript que nos permite validar en tiempo real la información que se introduce en campos de texto.
La nomenclatura y los parámetros de la validación son similares a los que se encuentra en el framework Ruby on Rails, pero sin ser necesario Ruby, lógicamente.
Google tiene una guía de estilos para programar en Javascript. Yo no soy muy partidario de ello, ya que cada cual programe como quiera siempre que sea código legible, es decir, ¿por qué usar variables con nombres así: nombreVariable y no así: nombre_variable?. Está claro que en un proyecto o una empresa sí tiene sentido usar guías de estilo, pero que una guía de estilo sea generalizada, no le veo sentido.
De todas formas los consejos están bastante bien y ante la duda de cómo hacerlo, podemos echarle un vistazo a cómo lo hacen en Google. Claro, que luego lo ofuscan y no hay quién entienda sus librerías.
ZeroClipboard es una librería javascript que utiliza un swf para copiar contenido en nuestro portapapeles. Aunque hay algún script que te lo hace, con la nueva versión de Adobe Flash, han dejado de funcionar, algo que no ocurre con ZeroClipboard.
Se trata de una librería bastante completa que permite añadir eventos y estilos.
Podéis ver un ejemplo en micURL ZeroClipboard
Gracias José Luis por el aviso
El tema de las esquinas redondeadas es algo bastante frecuente en los sitios de desarrollo web, pero antes no habÃa visto ninguno que lo hiciera usando Canvas.
El script del que hablamos añade varios efectos a nuestras imágenes de forma no obtrusiva, usando para ello canvas. Navegadores como Mozilla Firefox 1.5+, Opera 9+ y Safari mostrarán los efectos indicados, mientras que navegadores antiguos y el Internet Explorer no mostrarán nada.
Para incluir los efectos se debe modificar el class y añadir diversos tipos para cada efecto y asà poder hacer combinaciones. Entre los efectos nos encontramos: esquinas redondeadas, efecto shading (con transparencia configurable) y sombras. Corner.js
VÃa / dzone