Ejercicios de JavaScript y JQuery usando Airbnb JavaScript Style Guide en Cloud9.

La idea es practicar la sintaxis de emmet y las reglas de estilo de airbnb. Los ejercicios usados son del libro JavaScript and JQuery de Jon Duckett.

Si no quieren escribir (y practicar) el código lo pueden descargar en la siguiente página:
http://javascriptbook.com/code/

Herramientas:
- eslint-config-airbnb
- script make_file_structure.sh

Entorno de desarrollo:
- Cloud9
- Ubuntu 14.04

Para instalar eslint-config-airbnb en Cloud9 (septiembre de 2016):

$ sudo npm install -g eslint-config-airbnb eslint@^3.5.0 eslint-plugin-jsx-a11y@^2.2.1 eslint-plugin-import@^1.14.0 eslint-plugin-react@^6.2.0

Para usar eslint en el proyecto:

$ npm init -y
$ eslint --init

La idea es escribir cada ejercicio en una carpeta individual usando un estructura de carpetas/archivos más “tradicional”. Para evitar tener que crear de forma manual la estructura de carpetas/archivos o tener que copiar/pegar las carpetas/archivos y tener que cambiar los nombres creé un simple script:

#!/bin/bash
# estructura de carpetas/archivos:                 
#
# capitulo/
# |
# ejercicio/
# ├── ejercicio.html
# ├── css
# │ └── c.css
# ├── images
# └── js
# └── ejercicio.js
# para crear la estructura de archivos:
# bash script [argumento argumento]
# $ bash nombre_del_script.sh nombre_del_capitulo #nombre_del_ejercicio
# Positional parameters are assigned from the shell’s arguments when #it is invoked.
capitulo=$1
ejercicio=$2
# http://linux.die.net/man/1/mkdir
# mkdir - make directories
# mkdir [OPTION]... DIRECTORY...
# -p, --parents : no error if existing, make parent directories as needed
if [ capitulo=$1 ]
then
mkdir -p "$capitulo"/"$ejercicio"/{css,js,images}
touch "$capitulo"/"$ejercicio"/"$ejercicio".html "$capitulo"/"$ejercicio"/css/"$ejercicio".css "$capitulo"/"$ejercicio"/js/"$ejercicio".js
tree -a "$capitulo"/"$ejercicio"/
else
mkdir -p "$capitulo"
mkdir -p "$capitulo"/"$ejercicio"/{css,js,images}
touch "$capitulo"/"$ejercicio"/"$ejercicio".html "$capitulo"/"$ejercicio"/css/"$ejercicio".css "$capitulo"/"$ejercicio"/js/"$ejercicio".js
tree -a "$capitulo"/"$ejercicio"/
fi

Crear archivo:

$ touch make_file_structure.sh

copiar/pegar el código anterior en el mismo:

A elección del usuario 

Permisos de ejecución: Stackoverflow

$ chmod u+x make_file_structure.sh

Ejecutarlo en la carpeta raíz del proyecto (para cada nuevo ejercicio):

$ bash make_file_structure.sh capitulo ejercicio

Para ejecutar eslint:

$ eslint /carpeta/

Decidí deshabilitar la regla single quote string: (archivo .eslintrc.json)

{
"extends": "airbnb",
"installedESLint": true,
"plugins": [
"react",
"jsx-a11y",
"import"
],
"rules": {
"quotes": ["off"]
}
}

crear un archivo .gitignore con el siguiente contenido (para Github):

node_modules/

# Todo-list:

  • Usar un taskmanager para que eslint se ejecute automáticamente al grabar los cambios en el archivo.

Eso es todo, una vez completados los pasos anteriores solo queda practicar, practicar y practicar.

Por ejemplo:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>numeric variable example</title>
</head>
<body>
<!-- emmet syntax     
h1{Elderflower}+#content>h2{Custom Signage}+#cost{Cost: \$5 per tile}+img[src="images/preview.jpg" alt="Sign"]^script[src="js/numeric-variable.js"]
-->
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
<img src="images/preview.jpg" alt="Sign">
</div>
<script src="js/numeric-variable.js"></script>

</body>
</html>

let price;
let quantity;
let total;
price = 5;
quantity = 14;
total = price * quantity;
let el = document.getElementById('cost');
el.textContent = `$${total}`;

Saludos cordiales.