Pausa larga - Horrible Trabajo

Ha pasado tiempo desde el último post, el último divertido post con información de provecho, de experimentar y jugar.
Ha comenzado un aburrido y ridículo plazo de "trabajo", sin sentido particular y demasiado alejado de lo que es divertido e interesante. Me gustaría decir que no es de provecho, por lo monótono y perdida de tiempo que es, mas hay dinero de por medio.

Triste ver que también está afectando mi desempeño y trabajo para el curso de Angular que estoy llevando. Pero hay que poner esfuerzo, para aprovechar mejor las clases y obtener ganancias para continuar mejorando.

Espero no tener que quedarme atrapado en este ciclo de "trabajo insulso" por siempre. Y romper el ciclo para nunca más volver.

Usando Babel

Inicio de una nueva aventura

Para llegar a ser un buen desarrollador en FrontEnd, hay que conocer JavaScript y esta es la base para entender MEAN (Mongo, Express, Angular y Node).

Pero si tu sistema solo tiene Node 4.x no hay mucho que se pueda hacer. El problema es que Node 4.x no puede ejecutar ES2015 (ES6), versión de JavaScript disponible actualmente en los navegadores. Lo cual me obliga a algunas opciones:

Actualizar Node

Hay varias:

• desinstalar la versión disponible en el sistema y descargar el nuevo Node (v 8.x o el LTS 6.x),
• actualizar Node directamente, hay scripts disponibles que actualizan Node. Esta n, nvm, etc.
• Usar contenedores, como Docker para disponer de una versión actual de Node y no "malograr" la versión de Node disponible en el sistema.

Transpilar

La otra opción, aparentemente sencilla de entender y ejecutar es transpilar ES2015 a ES5 usando Babel. Esto me permite escribir código en ES2015 y "traducirlo" a ES5 para que pueda ser ejecutado por Node 4.x.

El camino sencillo y laborioso

Claro que continúa el sin sabor ya que la mayoría de navegadores actuales no tienen inconvenientes para ejecutar ES2015.

La instalación de Babel es relativamente sencilla:

npm init
npm install --save-dev babel-cli babel-preset-es2015
echo '{ "presets": ["es2015"] }' > .babelrc

para usar Babel, se usa el siguiente comando:

babel archivo_ES2015 -d carpeta_destino

Hay varia alternativas para automatizar el comando, usando Gulp o el mismo npm al procesar los archivos resultantes, pero si no se está trabajando sistemas grandes, el comando es más que suficiente para hacer que Node 4.x lo pueda ejecutar.

Fuentes: 

• StackOverflow - How do I update Nodejs?: Nota algo antigua pero con opciones válidas
• Getting Started with ES6 (ES2015) and Babel: explicación sencilla del proceso mostrado.
• Using Babel: con mayor detalle, una descripción de la variadas formas en las que se puede usar Babel, peligrosamente detallado para un usuario común.
• Dockerizing a Node.JS Webapp, no comments.

Nuevo botón para el menú Hamburguesa y problemas

Sigo trabajando en aprender el menú hamburguesa para aplicarlo en sitios responsive. Añadí un botón más para un formulario de búsqueda. El primer problema que se encuentra es que no hay código UTF-8 para el icono de lupa, hay algunos parecidos, inclusive variando la posición del mango pero no es consistente con el diseño de los iconos usados. Entonces se utiliza un SVG en el HTML. La otra opción sería usar una imagen.

See the Pen hamburger_menu_w/search by gerbo-san (@gerbosan) on CodePen.

Otro problema que no supe detectar en la primera prueba es que si se despliega el menú (o el input text) y se cambia la resolución inmediatamente, este se continua mostrando. Es decir, se mostrarían dos menús o dos espacios de búsqueda.

A seguir buscando.

Intentando crear un menu hamburguesa

Además del delicioso nombre, el menú hamburguesa ofrece una forma reducida para acceder a un menú, sea en un web en un escritorio o en un dispositivo móvil.

Codepen - Hamburger Menu

La parte más problemática puede ser JS (tal vez no elegí el mejor ejemplo, observaciones en el CSS).

Estoy considerando otras alternativas que no me desvíen a JS, pero por el diseño del sitio, tal vez no sea posible y la mejor idea es un menú flotante al pulsar un botón o enlace.

Aprendiendo webpack

Resumen adaptación para Webpack Se está usando la siguiente estructura:

webpack_origen/
+dist/
  +js/
    +bundle.js
  +css/
  +images/
  +index.html
+src/
  +js/
    +index.js
    +content.js
  +css/
    +index.css
  +images/
  +index.html
+node_modules/
+webpack.config.js
+package.json
+readme.md

La configuración de package.json es como sigue:

{
  "name": "prodinca_webpage",
  "version": "1.0.0",
  "description": "de PSD a HTML5 vol07",
  "main": "./src/js/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch --colors",
    "start": "webpack-dev-server --progress --colors"
  },
  "keywords": [
    "udemy",
    "practica",
    "prueba",
    "maquetación",
    "página",
    "web"
  ],
  "author": "gerbo-san",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

La configuración de webpack.config.js es como sigue:

var path = require('path');

module.exports = {
  entry: {
    app: './src/js/index.js'
  },

  output: {
    path: path.resolve(__dirname,'dist'),
    filename: './js/bundle.js',
    publicPath: '/dist/'
  },

  devServer: {
    host: '0.0.0.0',
    port: 8080,
    inline: true
  },

  module: {
    loaders: [
      {
        test: /(\.js |.jsx)$/,
        loader: 'babel',
        exclude: '/node_modules/',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        exclude: '/node_modules'
      }
    ]
  }
};

Las fuentes que utilicé para estos archivos son:
webpack - Tutorials/Getting started
webpack - Getting Started
Youtube - Webpack | Curso Completo Practico desde Cero
Youtube - Primeros pasos con Webpack

La definición de la plantilla para trabajar con webpack todavía no está completa, cuestión de tiempo.