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.

SAP debe ser un requerimiento

Y continuando con la búsqueda de trabajo, es algo peculiar encontrar que las empresas grandes soliciten experiencia en el manejo de SAP. SAP es un ERP, sistema de planeamiento de recursos, proporcionar en tiempo real o lo más próximo a eso, datos numéricos acerca de la empresa.
Dispone de varios módulos además del ya complicado lenguaje de programación (ABAP). Algunos de los módulo son:

• SAP MM (Material management): para control de ingreso y salida de materiales y proveedores. 
• SAP SD (Sell and Distribution): para controlar las ventas y distribución, aparentemente de interés para empresas comerciales. 
• SAP WM (Warehouse management): para control de almacenes, inventarios. 
• SAP HR (Human Resources): para controlar los registros del personal, escala de salarios, asistencias, posibles postulantes. 
• SAP FI (Finances): Contabilidad y Finanzas, control de capitales y dinero liquido de la empresa. 
• SAP CO (Costs): control de costos y gastos en general. 
• SAP PM (Plant Maintenance): control de mantenimiento de planta, específico para programación de mantenimiento de equipos.
• SAP CRM (Customer Relationship Management): Gestión de relaciones con el consumidor, mercadotécnia.

Hasta hace poco pensé que no habían instituciones encargadas en el entrenamiento para usar SAP, pero hay varias en Lima. 

• CapacitaSAP
• Nextech
• Centro

Los costos son algo elevados, lo que se justifica por que las empresas grandes solicitan estos cursos.

Bueno, ahí algo de información, no creo que me dedique a escarbar más en SAP, pero su uso de Java y  tecnologías Java es uno de los bastios que hace que Java sea importante.

Revisando la documentación se hace mención a SCOR: Supply Chain Operation Reference, modelo creado para simplificar los procedimientos de abastecimiento y distribución.
Se divide en 3 o 4 niveles con sus funciones propias y distribuidas. Procedimientos para simplificar el trabajo y favorecer la trazabilidad de las operaciones. Trabajo relevante para el personal de logística o usuarios de SAP MM.

¿Qué es Google Shield?

Acabo de ver el video, también algunas de mis fuentes de noticias incluyen información acerca de Google Shield. Pero ¿qué es? o ¿cómo funciona? son interrogantes que hay que explorar.

Musica y aplicación vym para crear una presentación

Un par de años atrás, cierta experta en evaluación de personal me indicó que saber Prezi era un requerimiento de las empresas. Idea para más ridícula, pero aquí VYM, ofrece una opción muy parecida, con la posibilidad de girar pantalla y añadir textos. Se ve muy interesante. Tal vez la incluya en mi presentación.