Powered By Blogger

sábado, 31 de marzo de 2012

Getting Cozy With Underscore.js

As JavaScript is slowly moving out of the browser, several tools have emerged that significantly improve JavaScript’s robustness.

One such tool is called Underscore.js and that’s what we’re going to take a look at today. Let’s get started!


Meet Underscore.js

So what exactly does Underscore do?

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.

One of the nicer things about working in Python or Ruby are the fancy constructs like map that make life a lot easier. The current version of JavaScript, sadly, is fairly barebones when it comes to low level utilities.

As you read above, Underscore.js is a nifty little JavaScript library that brings in a ridiculous amount of functionality at a mere 4kb.


Underscore in Action

“Enough yapping about the library”, I can hear you say. Right you are! Let’s take a look at Underscore in action first before I resume my yapping.

Let’s assume you have a random array of test scores and you need a list of those with 90+ score. You’d usually write up something like so:

 var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;  for (i=0; i<=scores.length; i++) {         if (scores[i]>scoreLimit)         {                 topScorers.push(scores[i]);         } }  console.log(topScorers); 

It’s pretty simple and even with optimization, it’s fairly verbose for what we’re trying to do.

Let’s look at what we can achieve with Underscore next.

  var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;  topScorers = _.select(scores, function(score){ return score > scoreLimit;});  console.log(topScorers); 

I don’t know about you but I just had a nerdgasm. That’s some incredibly concise and readable code right there.


Sweet but Do I Really Need This?

Well, it all depends on what you’re trying to do. If your use of JavaScript is limited to merely playing around with the DOM, then the answer is mostly no since jQuery does most of what you’d want to do.

Yes.

On the other hand, if you’re dealing with non-DOM code or even complex, think MVC, front end code, Underscore is an absolute boon.

While some of the functionality exposed by the library is slowly making its way into the ECMA specifications, it’s not available in all browsers and making your code work cross browser is another nightmare on its own. Underscore provides you with a nice set of abstractions that work everywhere.

And if you’re a performance oriented person, as you should be, Underscore falls back to native implementations, if available, to make sure performance is as optimal as possible.


Getting Started

Just grab the source here, include it in your page and you’re good to go.

If you were expecting a big set up process, you’re going to be sorely disappointed. Just grab the source here, include it in your page and you’re good to go.

Underscore creates and exposes all its functionality via a single object, in global scope. This object is the titular underscore character, _.

If you’re wondering, yes, this is quite similar to how jQuery works with the dollar [$] symbol. And just like jQuery, you can remap this character in case you run into conflicts. Or if you’re like me and have an irrational love for the tilde.


Functional or Object Oriented?

While the official marketing blurb for the library states that it adds functional programming support, there is actually another way of doing things.

Let’s take our earlier code as an example:

  var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;  topScorers = _.select(scores, function(score){ return score > scoreLimit;});  console.log(topScorers); 

This method above is the functional, or procedural, approach. You can also use a more straightforward, probably more apparent, object oriented approach.

  var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;  topScorers = _(scores).select(function(score){ return score > scoreLimit;});  console.log(topScorers); 

There is no real ‘right’ way to do things but keep in mind that you can jQuery-esque method chaining with the latter method.


Checking Out the Functionality

Underscore provides a little more than 60 functions that span a number of functionalities. At their core, they can be classified into groups of functions that operate on:

  • Collections
  • Arrays
  • Objects
  • Functions
  • Utilities

Let’s take a look at what each does and if applicable,one or two of my favorites from each section.


Collections

A collection can either be an array or an object, an associate array in JavaScript if I’m to be semantically correct.

Underscore provides a lot of methods that operate on collections. We saw the select method earlier. Here are a few more incredibly useful ones.

Pluck

Let’s say you have a nice little array containing key value pairs and you’d like to extract just a specific property from each. With Underscore, it’s a cinch.

  var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}]; var niches = _.pluck(Tuts, 'niche');  console.log(niches);  // ["Web Development", "WordPress", "PhotoShop", "After Effects"] 

Using pluck is as simply as passing in the target object or array as well as which property to pick out. Here, I’m merely extracting the niche for each site.

Map

Map creates an array from a collection where each element can be mutated or otherwise changed through a function.

Let’s take the earlier example and extend it a bit.

  var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];  var names = _(Tuts).pluck('name').map(function (value){return value + '+'});  console.log(names);  // ["NetTuts+", "WPTuts+", "PSDTuts+", "AeTuts+"] 

Since I noticed the names missing the plus sign at the end, I’m adding them in the extracted array.

You’re not limited to simple concatenation here. You’re free to modify the passed value to your heart’s desires.

All

all is useful if you need to check every value in a collection passes a certain criteria. To check whether a student has passed in every subject, for example.

  var Scores = [95, 82, 98, 78, 65]; var hasPassed = _(Scores).all(function (value){return value>50; });  console.log(hasPassed);  // true 

Arrays

Underscore has a bunch of functions that work exclusively on arrays which is highly welcome since, compared to other languages, JavaScript provides awfully few methods dealing with arrays.

Uniq

This method basically parses an array and removes all duplicate elements providing you with only unique elements.

  var uniqTest = _.uniq([1,5,4,4,5,2,1,1,3,2,2,3,4,1]);  console.log(uniqTest);  // [1, 5, 4, 2, 3] 

This comes in extremely handy when you’re parsing huge datasets and need to weed out the duplicates. Keep in mind that only the first instance of an element is counted so the original order is kept.

Range

An extremely handy method that lets you create a ‘range’ or list of numbers. Let’s look at a super quick example.

  var tens = _.range(0, 100, 10);  console.log(tens);  // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90] 

The method’s parameters are, in order, starting value, ending value and step value. If you’re wondering, using a negative step value leads to a decrementing range.

Intersection

This method compares two arrays to each others and returns the list of elements that are found in all of the passed arrays i.e. an intersection in set theory.

Let’s extend the earlier example to see how this works.

  var tens = _.range(0, 100, 10), eights = _.range(0, 100, 8), fives = _.range(0, 100, 5);  var common = _.intersection(tens, eights, fives );  console.log(common);  // [0, 40, 80] 

Easy, right? You just pass in the list of arrays to compare and Underscore does the rest.


Objects

In addition to the fairly expected is checks, Underscore provides various methods to clone, extend and other manipulate objects.

Here are a few of my favorites.

Keys and Values

Have a massive object where you need only the keys or only the values? It’s so darn easy with Underscore.

  var Tuts = { NetTuts : 'Web Development',  WPTuts : 'WordPress',  PSDTuts : 'PhotoShop', AeTuts : 'After Effects'}; var keys = _.keys(Tuts), values = _.values(Tuts);  console.log(keys + values);  // NetTuts,WPTuts,PSDTuts,AeTutsWeb Development,WordPress,PhotoShop,After Effects 

Defaults

This method is quite useful when you need to create objects with sensible defaults when one might not be used when creating it.

  var tuts = { NetTuts : 'Web Development'}; var defaults = { NetTuts : 'Web Development', niche: 'Education'};  _.defaults(tuts, defaults);  console.log(tuts);  // Object { NetTuts="Web Development", niche="Education"} 

Functions

As wonky as it sounds, Underscore has functions that work on functions. Most of the functions tend to be fairly complicated to explain here, so we’ll take a look at the simplest.

Bind

this is an elusive part of JavaScript and tends to leave a lot of developers really confused. This method seeks to make it a bit easier to tackle.

  var o = { greeting: "Howdy" },         f = function(name) { return this.greeting +" "+ name; };    var greet = _.bind(f, o);     greet("Jess") 

It’s a bit confusing so stay with me here. The bind functions basically lets you keep the value of this whenever and wherever the function is called.

This is specially useful when you’re working with event handlers where this is hijacked.


Utilities

And to further sweeten the deal, Underscore provides a ton of utility functions. Since we’re fairly out of time, let’s just look at the biggie.

Templating

There are already a ton of templating solutions out there but Underscore makes its solution worth a look by being fairly tiny in its implementation whilst being fairly powerful.

Let’s take a look at a quickie example.

  var data =   {site: 'NetTuts'}, template =   'Welcome! You are at <%= site %>';  var parsedTemplate = _.template(template,  data );  console.log(parsedTemplate);  // Welcome! You are at NetTuts 

First up, we create the data to populate the template followed by the template itself. By default, Underscore uses ERB style delimiters though this is entirely customizable.

With those in place, we can simply call the template passing in our template and the data. We store the result in a separate string to be used later to update content, as needed.

Keep in mind that this is an extremely demonstration of Underscore’s templaing. You can find use any JavaScript code inside the template using the <% %> delimiters. When you need to iterate over complex objects, say JSON sources, you can pair up with Underscore’s excellent collection functions to create templates rapidly.


Still Not Convinced That You Should Pick This Over JQuery

jQuery and Underscore go hand in hand.

No, no, you’ve got it all wrong! If anything, jQuery and Underscore complement each other well and go hand in hand. Really!

See, jQuery does a few things extremely well. DOM manipulation and animation are chief amongst those. It doesn’t deal with anything in the higher or lower levels. If frameworks like Backbone or Knockout deal with the higher level issues, Underscore tackles all the relatively bare metal ones.

For even more perspective, jQuery has little purpose outside the browser as the bulk of its functionality deals with the DOM. Underscore, on the other hand, can be used on the browser or on the server side without any issues. In fact, Underscore has the most number of Node modules dependent on it.

Well, that’s about it for today. Considering the scope of Underscore, we’ve barely scratched the surface here. Make sure to check out more of the library and let me know if you have any questions in the comments below. Thank you so much for reading!



Super Grub Disk 0.9800 disponible

Super Grub Disk es un disquete o cdrom que nos permite de una forma sencilla restaurar Grub automáticamente en el MBR. SGD no sólo incluye opciones para recuperar Grub en el MBR sino para activar particiones entre muchas otras. adrian15 nos cuenta: He estado algo nostálgico las últimas dos semanas peleándome con un Debian Lenny virtualizado y el gcc-3.3 para poder compilar Grub1 y con él Super Grub Disk al que he aprovechado para añadirle unas mejoras. Siguen los detalles de las características nuevas en la página extendida o en la entrada de bitácora original.

Google Maps Now Available for the Nintendo Entertainment System

Google’s getting an early start on their April Fool’s Day Jokes this year. (In their defense, it already is 1 April for some of their offices around the world.)

The new feature this year is that Google Maps has been ported to the nearly 30 years old NES. I’m glad they finally decided to support the NES; there are nearly 60 million consoles out there. Unfortunately, Google is only going to be supporting the original Japanese console, not the version sold in the US.

Looking at the cartridge in the lead photo, I can tell you that it wouldn’t have worked with the US version of the NES. It’s only about half the size of the grey brick cartridges sold in the US, and that means that the modem port won’t be accessible. Also, the demo video shows that the Google Maps cartridge can make use of the microphone found on the original controllers. Trust me, those really were made, they just weren’t included in the US version of the NES.

And if you don’t have an NES console but would like to try out the new 8-bit mode, head on over to Google Maps and click on the Quest button.

Google Maps Now Available for the Nintendo Entertainment System is post from The Digital Reader



Memoria de trabajo (working memory), RAM y biblioteca


Es posible realizar una analogía a tres niveles entre el funcionamiento de la memoria de trabajo (working memory) del cerebro, la RAM de un ordenador y una biblioteca.

La memoria de trabajo (WM) es un concepto introducido por Alan Baddeley en 1976 para sustituir a la memoria a corto plazo, más imprecisa. Es un modelo discutible, como todos, pero interesante.

Se refiere a la memoria activa que se utiliza en los procesos conscientes. Tiene tres componentes:

  • El ejecutivo central. Decide a que prestar atención y organiza la secuencia de operaciones
  • El bucle fonológico. Maneja y mantiene en memoria el material hablado y escrito.
  • El bloc de notas visuoespacial. Maneja y mantiene las imágenes.

La memoria de trabajo (WM) se encuentra en la corteza prefontal y sus contenidos se actualizan constantemente. Se alimenta tanto de los sentidos como de la memoria a largo plazo (que se encuentra distribuida por toda la corteza).

Es tentador imaginar que los contenidos de la memoria a largo plazo se transfieren a la memoria de trabajo, se modifican y se vuelven a almacenar en la memoria a largo plazo. Pero el cerebro no funciona así. Más bien, la memoria de trabajo activa las zonas del cerebro que contienen los recuerdos en una acción conjunta que llamamos conciencia.

Algunas de las características de la memoria de trabajo son: su capacidad es limitada (el número mágico de 7 items), sus contenidos se actualizan permanentemente, es reverberante (para evitar que los contenidos decaigan), en buena medida es serial y no paralela, de modo que genera cuellos de botella y problemas de rendimiento. También se ha relacionado con el espacio de trabajo global (Global Workspace de Baars).

Los ordenadores tienen tres componentes clásicos:

  • La CPU procesa las instrucciones. Utiliza unas diminutas memorias llamadas registros que carga y descarga de la memoria RAM
  • La memoria principal o RAM. Es volátil, se borra cuando se apaga el ordenador.
  • La memoria auxiliar. Es permanente. En general se trata del disco duro.

La CPU es muchas veces más rápida que la RAM y la RAM muchas veces más rápida que el disco. A su vez, el disco es más barato que la RAM y esta es más barata que la CPU. El almacenamiento en disco es mucho mayor que la RAM Entre estos componentes hay múltiples memorias intermedias llamadas cachés.

La analogía es clara. La memoria RAM se parece a la memoria de trabajo (WM) y el disco duro se parece a la memoria a largo plazo.

Imagina ahora que vas a una biblioteca. Un bibliotecario maneja los libros en las estanterías y tú ocupas una mesa de trabajo. No puedes trabajar sin libros y a la vez no puedes trabajar con los libros que están almacenados en las estanterías. Cuando llegas tu mesa está vacía y la limpias cuando te vas. La analogía es de nuevo clara. Por un lado tienes:

  • la mesa de trabajo,
  • la memoria RAM
  • la memoria de trabajo (WM).

Por otro lado:

  • las estanterías con los libros,
  • el disco duro
  • la memoria a largo plazo.

Cuando llegas, tu mesa está vacía y pides al bibliotecario que te traiga unos libros, es decir, cargas la RAM con información del disco duro o traes a la conciencia los contenidos de la memoria a largo plazo. El acceso a la información en la mesa es rápido del mismo modo que lo es en la RAM o en la memoria de trabajo (WM). Procesas los contenidos, los comparas y los modificas. Después devuelves los libros actualizados a las estanterías (no lo hagas, por favor, lleva tu propio cuaderno), grabas la RAM en el disco duro o modificas los contenidos de la memoria a largo plazo. Finalmente la mesa de trabajo, la memoria RAM y la memoria de trabajo (WM) quedan vacías.

El proceso de carga de datos es análogo en los tres sistemas; es trabajoso y lento:

  • Lees el índice, seleccionas la ficha, se la das al bibliotecario que recorre las estanterías hasta dar con el libro y traértelo.
  • El ordenador lee el fichero de índices, busca el registro pedido, va al fichero de datos, lee el registro (y de paso otros muchos registros) y lo carga en memoria. Índice, fichero o registro son de hecho términos importados en la informática desde el mundo de los libros y el papel.
  • Buscar la información es un proceso penoso para el cerebro. Sabes que lo sabes (metacognición), lo tienes en la punta de la lengua pero ahora no caes: ¿A quién tienes enfrente? Repasas la claves (índices): lo vi en un congreso, contaba chistes, su nombre empieza por e o por f, era conocido de alguien… Ah sí, es Fernando. Y con el nombre traes a la memoria de trabajo otra información: ciudad, relaciones, deporte…

Una simple analogía en tres niveles, más válida entre los ordenadores y la biblioteca, cosas ambas creadas por nosotros. Una analogía más débil en el caso del cerebro.





El bueno uso de las «comillas»

Desde el mundo del talibanismo ortográfico, una auténtica perla:

Comillas-Cuidamos

A saber lo que quieren decir con «cuidamos»… ¡WTF sin duda!

(¡«Gracias», Platero!)



Hoy, 31 de marzo: Día internacional de las copias de seguridad

Día del BackupHoy 31 de marzo es el día internacional designado como Día del Backup o de las Copias de seguridad: sí, esas que siempre se nos olvida hacer y de las que solo nos acordamos cuando ya lo hemos perdido todo. Muchos encuentran cruel pero efectivo el siguiente ejercicio: imaginarse que ahora mismo se estropea irremisiblemente el ordenador sobre el que están trabajando, borrándose todo y para siempre. ¿Cuántos datos importantes perderías? ¿Podrías recuperar la copia de seguridad? ¿Lo has intentado alguna vez? ¿Y si también se perdiera el disco de copias automáticas que usas junto al ordenador?

Si todo esto te inquieta, te atormenta o te perturba ya estás tardando en hacer una buena copia (o dos), comprobarla y archivarla en un lugar seguro lejos del equipo principal. ¡Feliz día!

# Enlace Permanente



Linux en un microcontrolador de 8 bits y 20 MHz

Dmitry Grinberg, ha portado Linux a un pequeño microcontrolador AVR de 8 Bits (ATmega1284p), para lograrlo primero debió crear un emular de microcontroladores ARM (32 bits, MMU), añadir algo de memoria RAM, una tarjeta SD, mucho conocimientos, y paciencia. ¡Increíble!

La actualización Ice Cream Sandwich para los Sony Xperia se va a mediados de abril (y más allá)

Filed under: ,

La actualización Ice Cream Sandwich para los Sony Xperia se va a mediados de abril (y más allá)
Puede que la división de teléfonos de Sony no sea la misma empresa que cuando todavía tenía el apellido Ericsson, pero está claro que las viejas costumbres no cambian de la noche a la mañana. Si allá por diciembre de 2011 la compañía aseguró que Ice Cream Sandwich llegaría a los Xperia 2011 en el mes de marzo, ahora Sony ha comunicado que el despliegue dará comienzo a mediados de abril de forma progresiva.

Los primeros terminales en recibir su actualización a Android 4.0 serán los Xperia Arc S, Xperia Neo V y Xperia Ray, seguidos por el resto de la familia, finalizando el proceso para finales de mayo o comienzos de junio, dependiendo también de cómo se porten las operadoras de cada país. Siendo positivos, al menos esta vez la espera va a ser relativamente corta.
Read | Permalink | Email this | Comments



La Noche Estrellada de van Gogh se hace interactiva para asomarse al iPad

Filed under:

La Noche Estellada de van Gogh se hace interactiva para asomarse al iPad
Hace algunas semanas un artista griego llamado Petros Vrellis logró acaparar unos cuantos flashes al crear una versión interactiva de La Noche Estrellada de Vincent van Gogh para ordenador. La simpática obra le costó unos seis meses de trabajo pero tal fue la acogida entre el público, que nuestro protagonista ha decidido ahora llevar este óleo postimpresionista al iPad. Entre otras cosas, la aplicación permite modificar los trazos del célebre pintor neerlandés mientras la música se adapta automáticamente al diseño que estemos "elaborando", dando lugar a todo un espectáculo en movimiento. Antes de buscarte un disgusto en el MOMA de Nueva York, tienes el enlace correspondiente a la App Store en el enlace de lectura, claro que también podrás verlo en acción en el vídeo de después del salto.

Continue reading La Noche Estrellada de van Gogh se hace interactiva para asomarse al iPad

Read | Permalink | Email this | Comments



Foursquare cierra su API a Girls Around Me, una aplicación para encontrar a chicas según su localización

La polémica sobre los niveles de privacidad y la geolocalización vuelve a estar encima de la mesa. Foursquare acaba de banear el acceso a su API a una aplicación para iOS, Girls Around Me cuyo objetivo es, expuesto de manera básica, localizar a mujeres cercanas a tu ubicación en base a la actividad pública de estas en Foursquare. La información se muestra (o se mostraba) sobre un mapa convencional y gracias a Facebook también permite conocer sus intereses, sus fotografías, su edad y toda la información que la otra persona haya decidido hacer pública.

La aplicación en sí no es nada del otro mundo, se basa en el simple acceso a una API, la correlación de esta con los datos de Facebook y a mostrarla debidamente en un mapa según tu ubicación, la idea, y sobre todo las consecuencias y las implicaciones detrás de la misma son lo realmente espeluznante. Todo surgía a raíz de un post publicado en Cult Of Mac, que rápidamente se convirtió en viral y provocó horas después el cierre por parte de Foursquare.

Lo que sí es interesante es hasta qué punto muestra el doble juego que tiene el rol de la privacidad en una red social. Porque está muy bien poner a parir a Foursquare y a Facebook sobre la privacidad en sus servicios, pero no puede uno dejar de preguntarse si realmente, aparte de las redes que no son más que simples herramientas, el problema recae en el uso de las mismas.

Es tan simple como que si vas a compartir la información sobre tu ubicación, tus intereses y cualquier otro dato más al que hubiese podido tener acceso Girls Around Me, tienes que entender lo que eso significa y aplicar el sentido común. O lo que es lo mismo, con un mínimo de cuidado por parte del usuario y unos ajustes adecuados en la privacidad la aplicación no habría mostrado absolutamente ningún resultado.

Pero la otra cara de la moneda es precisamente esa, los ajustes por parte del usuario, y donde entra en acción la parte punible por parte de Foursquare y Facebook, que las opciones de privacidad suelen ser lo más laxas posible y que por otro lado es de conocimiento general que el interés de un usuario medio por sus ajustes y las consecuencias de su actividad es técnicamente nulo.

Así que en el fondo se resume en un doble juego, uno en el que por un lado los usuarios son culpables de no aplicar el sentido común y ser consecuentes con la información vertida en las redes sociales y al mismo tiempo las redes (Facebook especialmente, Foursquare es más estricto en ese sentido) mejorar o establecer unas opciones por defecto, que son las que permanecen en el 99% de los casos más respetuosas con la privacidad del usuario.

Intentar achacar o asumir toda la responsabilidad y el peso de la privacidad a uno de los dos extremos es, a mi consideración, un error. La privacidad tiene que entenderse como la consecuencia lógica de ambas partes, una en tanto que pone las herramientas necesarias para que esta no se vea vulnerada y la otra en tanto que aplica el sentido común a las consecuencias de su actividad y es consecuente con ello.