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.
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
Stanford Javascript Crypto Library es una librería Javascript que permite encriptar y desencriptar de forma muy segura, potente, rápida, sencilla, ligera y compatible con navegadores.
Usa el algoritmo estándar AES de 128, 192 o 256 bits, la función hash SHA256, el código de autenticación HMAC, PBKDF2, y los modos CCM y OCB… vamos, todo muy seguro.
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:
PHP-Ext es una librería open source que nos permite potenciar la capa UI de Javascript en nuestras aplicaciones. Para ello nos ofrece una serie de librerías (compatibles con PHP 4 y 5) para integrar Ext JS en nuestro sistema. Funciona como un mapeado en clases de la librería JS.
Entre las posibilidades que ofrece nos encontramos con la creación de formularios, combos, grids o menus. A parte ayuda a la comunicación entre el cliente y el servidor mediante JSON y XML.
O al menos en Firefox. Se trata de que si quiero obtener el timestamp de una fecha usando el método Date.UTC me devuelve datos incorrectos.
Por ejemplo, en esta llamada Date.UTC(2008, 3, 2, 18, 33, 32) (el mes es abril porque empieza desde 0), se verá que da un el timestamp 1207161212000, mientras que si creamos un objeto Date y obtenemos su timestamp (new Date(2008, 3, 2, 18, 33, 32)).getTime() obtenemos el timestamp 1207154012000, habiendo 2 horas de diferencia.
Habrá que tener cuidado
