This Week in JavaScript - 02 December 2013

Your weekly update of interesting happenings in the world of JavaScript - feel free to discuss, and help to bring some new ideas to light.

There’s some real goodies this week, so enjoy …

Coding tips

Perpetuating Terrible JavaScript Practises - Christian Heilmann on a rant
Javascript Hacks for Hipsters - Javascript is so much fun, except when it’s not.
Writing Better jQuery Code - Better code means faster apps and jank free websites

News & Views

The release of Scala.js - Write your Web application entirely in Scala. Who wouldn’t want to do that?
How replacing Java with JavaScript is paying off for PayPal
How Node.js Got Big - How the wunderkind framework grew up
Contrasting Backbone and Angular

Learn something

Fun with JavaScript Native Array Functions
10 Ecmascript-6 tricks you can perform right now
When JavaScript Feature Detection Fails - Brothercake has your back!
Frequently Misunderstood JavaScript Concepts - Thanks @ralph_m ;

Cool stuff

OriDomi - The web is flat, but now you can fold it up
Breakout - in 30 lines of JS (no external libraries)
DevTools Snippets - A collection of helpful snippets to use inside of browser devtools

List.js - Tiny, invisible and simple, yet powerful and incredibly fast vanilla Javascript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

[hr][/hr]
So, what you think about these recent happenings in JavaScript?

Have you got a hipster tip to share? Did you write something cool in 30 lines of JavaScript? Tempted to check out Scala.js?
Let us know and the debate can begin.

Also, feel free to PM us if you have anything interesting for the next issue. Happy reading! - Paul & [URL=“http://www.sitepoint.com/forums/private.php?do=newpm&u=184222”]Pullo

If you don’t mind shameless self promotion, I got a hipster tip to share: http://tech.pro/tutorial/1744/javascript-closures-or-the-story-of-the-lost-credit-card

Not at all.
Quite an entertaining take on closures :slight_smile:

Nice work on these Pullo, I liked Oridomi and Breakout in 30 lines :slight_smile:

The only things worth using the js hacks for hipsters is Timing, Debugging and “||=” and there’s nothing at all hacky about them. Everything else is just bad practice.
Backbone and Angular are apples and oranges.

http://lab.aerotwist.com/canvas/poly-maker/ is pretty cool.

Thanks man!
There have been a spate of these “xxx in 30 lines of JS” recently.
The best one I saw was an interactive spreadsheet, which worked fine until someone copied a Rick Astley video into one of the cells :slight_smile:

Did you get the point of doing this?

var x = Math.random(2);
if (x > 0.5) {
  debugger; // Conditional breakpoint
}
x--;

It’s clear what it does, but I struggled to think of why it might be useful.

I don’t have much call to use either, sadly.
Do you have any experience with working with either of these frameworks?

Absolutely :slight_smile:

Doesn’t it just launch the browsers debugging in Firebug/Chrome etc.
I still use console.log and alerts, but launching the debugger so you can access variables might be even better.

Yeah, I’ve used Backbone quite a bit and I like it. I have a man crush on @jashkenas.
I’ve only toyed with Angular and Ember but they are more opinated and magical… where Backbone is the minimum toolset for rich client-side apps that leaves you in control of execution. Angular and ember do allow you to do more with less code but they require you to follow their conventions and don’t give you much freedom though.

Hi Mark,

Sorry, what I meant was what use case would require a conditional launching of the debugger?
In the code I posted, the debugger is only launched if a randomly generated number falls below a certain limit.
When would one do that?

BTW, another good tip for debugging that I picked up lately was using: console.table().
https://plus.google.com/+AddyOsmani/posts/PmTC5wwJVEc

I’m not sure it suppose to make sense. In his mind I think it reads like “you can also randomly and conditionally call debugger”. I’d rather question why is he writing Math.random(2) when the random function takes no arguments?

I propose that it may be due to him being used to some other language, resulting in JavaScript coding techniques that are less than saliatory.

Yeah, I’m not sure if he’s serious about the XXX stuff. XXX and SFW in the same phrase? :slight_smile: Also “xxx usually never appears”? I wonder!

Good point :slight_smile:

I was wondering about why he wrote SFW. Makes sense now (because of XXX). Thanks.

I also quite liked the ultra light templates approach.
I might start using that.

Hmmmm… I’m not convinced.

The ultra light template approach seems like what I would do when I would first encounter the problem and I was trying to come up with a solution… given that I was living someplace with no internet access, no books, no nothing. And once “in the field”, I bet the ultra light template approach would most certainly bite me in the back: rigid, repetitive, no reusability.

For starters, every serious developer’s mantra is “keep your initialize data in an object”. So


var firstName = 'Tal';
var screenName = 'ketacode'

should be


{
  'firstName': 'Tal';
  'screenName': 'ketacode'
}

At which point mustache, 4.7kb minified, dynamic views, sectioned templates, to name just a few, it’s starting to make a whole lot of sense. :slight_smile:

I’m trying to come up with a series about closures. This is story#2: http://tech.pro/tutorial/1756/javascript-closure-stories-ii

Good one!

A small typo:

function cautiosCitizen() {

should be

function cautiousCitizen() {

This is a bit of a guess, but is 2000 left on the card?
I didn’t use the console (and definitely not alert), but I would understand it as follows:

var theftStoryPartOne = cautiosCitizen();

theftStoryPartOne is assigned the return value of cautiosCitizen(), which is a pointer to the function thievingPunk()

var theftStoryPartTwo = theftStoryPartOne();

theftStoryPartTwo is assigned the return value of executing the function being pointed to by theftStoryPartOne, which is itself a pointer to the function thievingPunkFriend().

theftStoryPartTwo();

This executes the function it is pointing to and debits the card 1000 bitcoins.

Is that correct?

Hi, thanks for the correction. Updated. :slight_smile:

Here’s the execution order:

  1. theftStoryPartOne is assigned: cautiousCitizen executes: card = 3000
  2. theftStoryPartTwo is assigned: theftStoryPartOne executes: thievingPunk executes: withdraw(1500): card = 1500
    closure variables: blocked, card, withdraw
  3. theftStoryPartTwo executes: thievingPunkFriendExecutes: withdraw(1000): card = 500
    closure variables: blocked, card, withdraw

500 is what’s left. Bitcoins, as you said! :slight_smile:

I’m going to add screencasts in a third follow-up, to explain both more complicated scripts.

Ah ok, cool.
I was kind of on the right track, but forgot the withdraw(1500);.

Screencasts would be cool.