wForms es cógido Javascript no intrusivo que te ayuda a realizar las acciones más comunes con tus formularios web. Disponible en dos versiones, comprimida y legible, ofrece tres tipos de acciones en los formularios:
Validación de los campos de entrada: como se define los campos obligatorios y la comprobación del formato para cada campo.
Sincronización entre campos: cómo controlar campos del formulario dependiendo de otros campos.
Secciones condicionales: si aparecen o no campos basados en respuestas anteriores.
The Sexy Curls jQuery Plugin nos permite crear esquinas dobladas simulando páginas de forma muy sencilla con jQuery. Para su funcionamiento también es necesario jQuery UI.
Su uso es sencillo, creas una imagen, le asignas un id y ejecutas el siguiente código:
Interesante script que carga el contenido en una capa según se va utilizando el scroll y se va llegando al final, algo similar a lo que ocurre en Google Reader.
El autor nos explica paso a paso, incluida la parte PHP, cómo realizar esta funcionalidad. Load Data while Scrolling Page Down with jQuery and PHP
Vía / DZone
A simple jQuery plugin to get albums and images from Picasa without the need for PHP, Ruby, or any other server side language. Makes it easy to create a simple, dynamic, free, client-side-only image gallery. …
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
Consejos que nunca vienen mal para desarrollar un código Javascript decente:
Que sea limpio y esté bien documentado: esto no es exclusivo de Javascript, pero parece que en este lenguaje se olvida. También es recomendable tener dos versiones del script, uno de desarrollo y otro de producción (que estará comprimido).
Usa ficheros externos: no incluyas los scripts dentro de tu HTML, usa scripts externos. A parte de ser más eficiente en el gasto del ancho de banda es reutilizable y más legible.
Separa la capa de presentación de la capa lógica: no añadas eventos en las etiquetas HTML, create Javascripts no intrusivos que modifiquen los elementos y añadan los eventos.
Define el ámbito de las variables: aunque no sea necesario usar var para definir las variables, hay que hacerlo, así evitarás sorpresas de modificación de variables, sobre todo si usas recursividad.
No pienses que por defecto se soporta Javascript: no todo el mundo dispone de javascript, por ello no es conveniente llamar a funciones javascript dentro del href de los enlaces, y es conveniente tener acción por defecto en un enlace cuando se quiere modificar su funcionalidad por javascript:
