Mootools FormCheck es un script que permite añadir comprobaciones a nuestros formularios y que muestre mensajes de error cuando alguna de esas comprobaciones falle.
Se puede comprobar los errores cuando se realiza un submit o cuando se abandona el elemento HTML (blur). Los errores aparecen como un bocadillo emergente (con posibilidad de cerrar) y se puede especificar el tipo de dato que queremos comprobar: texto, numérico, alfanumérico…
El problema de estas librerías es que existen para un framework en particular, estaría bien que existiera (o crearlo nosotros) un grupo de trabajo que tradujera las librerías útiles a diferentes frameworks (mootools, jquery, yui, …), ya que cuando buscamos un módulo específico a veces lo encontramos para otro framework. ¿Alguien se apunta?. Mootools FormCkeck
Vía / WebAppers
Lawnchair es una base de datos documental basada en JSON y que funciona en el cliente (Javascript). Puede venir muy bien para desarrollo de aplicaciones para móviles. Es muy fácl de usar y permite operaciones de escritura, lectura, búsqueda y eliminación.
var people = new Lawnchair('people');
// Saving a document async
people.save({name:'frank'}, function(r) {
console.log(r);
});
// Specifying your own key
people.save({key:'whatever', name:'dracula'});
AnythingSlider es un plugin jQuery que permite crear slides con cualquier elemento HTML. Permite ir hacia adelante y hacia atrás, enlaces a posiciones en concreto, autoplay, vueltas infinatas, … AnythingSlider jQuery Plugin
HTML5 a parte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.
Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.
El script que instancia el Worker sería así:
// Crea el Web Worker
var worker = new Worker("worker.js");
// Envía un mensaje al worker
worker.postMessage(0);
// Recibe los mensajes del Worker
worker.onmessage = function (evt) {
// evt.data es el valor devuelto por el Worker
alert(evt.data);
}
// Trata los errores
worker.onerror = function (evt) {
alert(evt.data);
}
Y el worker.js sería el siguiente:
// Ejemplo de Worker
onmessage = function (evt) {
// evt.data es el valor enviado desde el javascript
for (var i=evt.data, il=1000001; i
Los Workers también admiten el evento onconnect, aunque tan sólo he visto que funcione en Webkit:
onconnect = function(evt) {
postMessage('Hola, acabas de conectarte al Worker');
}
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
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.
Muchas veces nuestra forma de aprender Javascript (o cualquier otra cosa) es encontrándonos con cosas desconocidas en scripts que estamos viendo e intentando comprender.
Una de estas nuevas posibilidades que nos ofrece Javascript son los “obtect literal”. Que sustituyen la falta de clases en Javascript, y nos facilita el uso de variables globales entre otras cosas.
Alguna vez te habrás encontrado con algo parecido al siguiente código y lo habrás querido comprender, una sencilla explicación nos la ofrece Wait till I come.
