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.
Para aquellos que les guste como formateamos los comentarios en Sentido Web, vamos a explicar el código creado por Choan:
El proceso que sigue es el siguiente:
Obtener todos los elementos pre.
Para cada pre leer el primer elemento code que tenga.
Obtenemos el texto que contiene.
Dividimos el texto en líneas.
Por cada línea comprobamos si hay algun tipo de comentario, si hay comentario lo separamos en dos partes para luego darle distintos estilos, diferenciando así el formato del comentario.
Nos creamos un elemento ol, y en cada li insertamos una línea obtenida anteriormente.
LibrerÃa que nos permite usar scrolls personalizados en nuestras páginas web, ya sean verticales u horizontales. Aunque hay que intentar que no aparezcan en nuestra página, en caso de que sea necesario, porque los hay que son totalmente necesarios, quizás se puedan personalizar con este script.
Por lo poco que he visto del código (que no está fácil de seguir porque está ofuscado), veo que fija el tamaño de la capa y con la propiedad overflow muestra los scrolls. Dibuja los scrolls personalizados encima y mediante ellos realiza el scroll de la capa, usando scrollTop y scrollLeft (que creo que antes no funcionaba del todo bien en Opera 8 y en la versión 9 lo han solucionado). Algo que yo no solÃa hacer y que he visto como lo hace aquÃ, es capturar el evento selectstart y hacer que devuelva false, para que cuando se haga el drag del scroll no se seleccione la imagen que usamos para personalizar el control. FleXcroll, Flexible and Accessible Custom Scroll Bars
VÃa / aNieto2K
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
Ya hace tiempo explicamos como hacer un autocompletado en cajas de texto, pero claro, no todo el mundo tiene ganas o tiempo de hacerlo uno mismo. Por ello, no hay nada mejor que usar scripts de otras personas que nos facilitan el trabajo. SearchField es un javascript no obtrusivo que nos permite añadir sugerencias de búsqueda en nuestras cajas de texto de forma rápida y sencilla. Tan solo hay que añadir un javascript y enlaces a las librerÃas y a los estilos, para que funcione.
La única pega que le veo es que las palabras de sugerencia están dentro de una variable Javascript y no se realizan mediante llamada Ajax para poder asà obtener datos dinámicos, pero bueno, no parece complicado modificarlo para que permita esta opción. Style Your Website’s Search Field with JS/CSS
VÃa / WebAppers
Gracias por el aporte!
Estoy empezando a trabajar en un nuevo proyecto y vendrá bien tener bien definido este tipo de cosas.
PAZ!!