Javascript

JavaScript

JavaScript: Su importancia en la web actual

JavaScript es sin duda uno de los lenguajes cuyo interés no ha disminuido con el pasar de los años y es que a día de hoy prácticamente toda la web está construida sobre este lenguaje. Que corra en el Front End como en el Back End es una de las características que te invita a pensar en sus posibilidades pero ¿Qué más hace a JS una excelente opción a la hora de aprender un lenguaje?

Custom Elements en HTML con Javascript

En HTML se pueden crear elementos personalizados custom elements. Por ejemplo podríamos crear el control <alert> que nos permita agregar una alerta que dure 10 segundos en la página o cualquier otro tipo de control que queramos.
​
Crear elementos personalizados nos permite encapsular funcionalidades complejas de la página web en elementos fácilmente reutilizables.
​

React.JS – Conociendo un poco más sobre la librería del momento. Comentarios de desarrolladores

Primero respondemos a la pregunta ¿Qué es React? (también conocida como React.js o ReactJS) Es una librería Javascript de código abierto elaborada por un equipo de Facebook para la creación de interfaces de usuario. React se centra en la capa de visualización (en el modelo MVC), por lo que es una gran herramienta cuando se trabaja con data que cambia en tiempo real, dado que te permite actualizar la información sin necesidad de recargar la página completa.

Esta librería, es mantenida por el equipo de Facebook e Instagram y una comunidad de desarrolladores activa.

Angular vs otros

¿Vale la pena aprender a programar con AngularJS?

Primero que todo, ¿Qué es AngularJS? Según la wikipedia AngularJS o simplemente Angular, es un framework de JavaScript de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista “Whatever” (MVW), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

ES6 en Rails

En este tutorial abordaremos el tema de como trabajar con ES6 (Ecmascript 2015) directamente en Rails y dejar que Sprocket se haga cargo de transformar automáticamente los archivos javascript a ES5, el cual es compatible con la mayoría de los navegadores.

¿Cómo trabajar con EcmaScript6?

EcmaScript6, también conocido como Ecmascript2015 o ES2015, es el próximo standard de Javascript que, entre sus principales novedades, permite trabajar con clases, creación de constantes, interpolación de strings, entre muchas otras cosas más (http://es6-features.org/#Collation).

Un reloj digital con HTML, CSS y Javascript

Hola, En este artículo vamos a desarrollar un reloj digital con HTML, CSS y Javascript. Para hacer el desarrollo necesitaremos un editor de texto como Sublime Text o Atom (ambos se pueden descargar gratuitamente) y para realizar las pruebas un navegador como Google Chrome o Firefox.

Corriendo Javascript en Sublime Text

Es posible configurar el editor de texto «Sublime Text» para que este pueda correr directamente javascript en la consola.

Esto puede ayudar mucho a corregir errores en nuestros scripts o ayudar a practicar con algoritmos básicos a principiantes en programación.

Donde poner los scripts de javascripts

Javascript en el Head o en el cierre del body? Estás equivocado

¿Por que se dice que los scripts de javascript deben ir en el cierre?

En la web existen muchas recomendaciones acerca de que deben poner el javascript al final del sitio justo antes del cierre del </body>, la razón argumentada es sencilla, los navegadores leían secuencialmente los scripts y bloqueaban el render de la página hasta haberla leído el script, pero entonces ¿por qué razón Ruby on Rails, que supuestamente es construido por expertos carga javascript dentro de la etiqueta <head> </head> en lugar del cierre de la página?.

¿Entonces por qué Rails los pone al principio?

Hay 2 razones:

La primera es porque todos los navegadores modernos (incluyendo internet explorer 8) a partir del 2008 incorporaron un sistema llamado preload scanning que les permite cargar todos los scripts paralelamente sin causar bloqueos (bueno, realmente los bloqueos todavía existen, pero son parciales y ya ahondaremos más sobre como eliminarlos).

El segundo problema de agregar javascript al inicio consiste en que a veces alguna funcionalidad crítica de la página (o de tu negocio) depende de esos javascript, por ejemplo si pones google analytics al final, en el cierre del body y el usuario sale del sitio antes de terminar cargar la página entonces pierdes la data del usuario, otra de las funcionalidades críticas de Rails viene dada por jquery-ujs, si esto se cargara al final de la página tendríamos un problema con los usuarios que son del tipo Quicky Clicker y presionan el los links antes de que la página termine de cargar.

Más sobre Preload Scanning

Preload Scanning no evita completamente el bloqueo, su implementación cambia dependiendo del navegador, pero en términos básicos consiste en un light weight process que se levanta para seguir leyendo archivos css, imágenes u otros scripts cuando se topa con un script. Pero esta lectura es sólo de forma parcial, por lo que sigue siendo recomendado en muchos casos poner javascript al final.

Otra forma de optimizar el proceso es ponerlo en el head junto con los atributos async o defer, este thread de stackoverflow es bastante aclarativo sobre las diferencias, sin embargo como todo lo asincrónico se recomienda implementar con cuidado.

¿Que dice google al respecto?

Técnicamente el guideline oficial de google developers dice que debes evitar en lo posible bloquear, en otras palabras cargar javascript, si lo haces, hazlo al final, ocupa async y defer cuando puedas y si el script es pequeño, es mejor tenerlo dentro del html (esto último si que me lo esperaba) debido que al evitar el llamado disminuyes la latencia de los requests.

Sugerencias finales:

Nada de lo leído quiere decir que uno pueda poner en cualquier parte cualquier script, muchos de ellos tienen dependencias, otros necesitan el DOM cargado y como no están bien programados hay que agregarlos necesariamente al final, a fin de cuentas el preload scanning lo que lo logra es evitar que la lectura de un script de javascript bloquee la lectura del HTML.

En resumen:

si las funcionalidad es crítica en el head, sino en el cierre del body, si el javascript consiste sólo en un par de líneas puede ir inline para optimizar la carga.

Referencias:

http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/

http://railsapps.github.io/rails-javascript-include-external.html

http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup

https://developers.google.com/speed/docs/insights/BlockingJS

 

coffeescript

Resumen express de coffeescript

Estos son los apuntes de Coffescript de Arnoldo Rodriguez, uno de los profesores de DesafioLatam, en Monterrey, México, están muy buenos, especialmente si quieres recorrer de forma rápida todas las virtudes que tiene coffeescript.

Comments in CoffeeScript

# single line comment

###
 multiline comment, perhaps a LICENSE.
###

Variables and Scope

# All variables are by default scoped locally
 my_var = "Hello world"
 pi = 3.1416

# Attach a variable to the global or window object to make it global
 window.my_var = "Hello world"

Functions

# use the slim arrow to declare a function
func = -> "bar"

sumXtoTen = (x) ->
 10 + x

# arguments are specified in parenthesis before the arrow
times = (a, b) -> a * b

# you can specify default arguments
times = (a = 10, b = 15) -> a * b

# use splats to receive N arguments via an array
sum = (nums...) ->
 result = 0
 nums.reduce (total, num) -> total + num

# you can avoid parethesis in function calls with at least 1 argument
alert "hello world"
console.log "this is the end"

# on the contrary you cannot call a function without parenthesis and zero
# arguments

# this fails
alert
# this is O.K.
alert()

# use the fat arrow to bound a function call to the local context
# mostly used in callbacks
# avoid using the conventional self = this is not very coffeescriptish

this.clickHandler = -> alert "clicked"
element.addEventListener "click", (e) => this.clickHandler(e)

Objects Literals and Array Definition

# Object literals

 # regular Javascript syntaxis
 object1 = {one: 1, two: 2}

 # without braces
 object2 = one: 1, two: 2

 # using new lines instead of commands
 object3 =
 one: 1
 two: 2

# Arrays

 # avoid the trailing comma
 array1 = [1, 2, 3]

 # using new lines
 array2 = [
 1
 2
 3
 ]