Category: Javascript

Learn Node.js v4 in your browser with Scrapbook’s #nodejs v4 playground

At Scrapbook we’re focused on making it easier to learn the latest technologies. Today we’re releasing a Node.js v4 playground.

This playground allows you learn the new features and changes without having to download or configure anything. You can load the playground at http://www.joinscrapbook.com/ben_hall/scenarios/node-v4

Node.js v4

The v4 release of Node.js is a significant change as it’s the first release since the io.js merger. Finally you can use the new ES6 features like Generators with Node.js. Try Generators & Node.js using Scrapbook

If you’re interested in helping us write scenarios and examples for Node.js v4 then please contact us. 

A JavaScript equivalent to Ruby’s respond_to?

While working on the new version of Mayday, I wanted to show a message if no data was returned from Google Analytics. To add to the complexity, I wanted to be able to override the default message on a per page basis.

I’m already using the ICanHazJS client-side tempting engine which has a method for each template block on a page. However, if the page doesn’t have the block then the method won’t exist and an error will be thrown.

What I needed was functionality similar to Ruby’s respond_to. With this method I can ask the object if it will respond to the method call. For example:

Object.respond_to? ‘test’ #=> false
Object.respond_to? ‘to_s’ #=> true

Luckily this is just as easy to do in JavaScript using ‘in’

> ‘test’ in Object
false
> ‘toString’ in Object
true

This allowed me to write the following:

var e = $(‘#data’)
if(‘nodata’ in ich)
   e.append(ich.nodata());
else
   e.append(‘No Data Found’);



If a nodata ICanHaz template block appears on the page then it will be rendered, otherwise it will fall back to the default. Problem solved.


Update: 


Problem almost solved. As pointed out on Twitter by @nmosafi and @theprogrammer, just using ‘in’ along is not enough.  For example:

> Object.test = “test”
“test”
> ‘test’ in Object
true
> Object.test()
TypeError: Property ‘test’ of object function Object() { [native code] } is not a function



What you need to do is ensure that the property is also a function. Something I had assumed previously.


> ‘test’ in Object && typeof(Object.test) == “function”
false

> ‘toString’ in Object && typeof(Object.toString) == “function”
true

Javascript WTF: The Date object

Almost every time I have to deal with the Date object in Javascript I always hit the same WTF.

The documentation is clear but the API has some strange aspects that personally I don’t think reflect the real world and how we naturally handle dates.

For example:
      getDay() returns the day of the week (0-6) leaving getDate() to return 1-31. Personally, I would have imagined getDate() to return DMY with getDay() returning 1-31.
      getMonth() returns 0-11.  Classic computer science with starting the count at 0 while the Gregorian calendar is 1-12. This is also inconsistent with getDate() which starts at 1.
      getYear() returns the year (usually 2-3 digits). For example, 2012 is
obviously 112. You need to use getFullYear() to return 2012. The logic
about how the method came to 112 is found at https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/getYear

JavaScript 1.0 – we love you and you have left an impact in many ways.

Setting a cookie in Javascript shouldn’t be THAT difficult

With Javascript becoming increasingly popular, I’m still shocked at how bad the online documentation and examples are.  Let’s take the search phase “setting a cookie in javascript“, a fairly common problem which I always forget the correct syntax for.

The first four results are as follows:
http://www.w3schools.com/js/js_cookies.asp
http://www.quirksmode.org/js/cookies.html
http://techpatterns.com/downloads/javascript_cookies.php
http://www.javascripter.net/faq/settinga.htm

Sorry to the original authors, but each one of them IS AWFUL!

Let’s take W3Schools as an example. It defines a variable called ARRCookies are could be for Pirate Cookies (via @Blowdart) or ARRay (via @AndrewVos) – both of which are great examples of creating Clean Code. To make matters even worse, this example has spread like a virus with Google returning 288,000 results and GitHub returning 398.

The best link which describes handling cookies, and generally any Javascript documentation, can be found on the Mozilla Developer Network (MDN).

https://developer.mozilla.org/en/DOM/document.cookie

While I’m not an SEO expert, this looks to be light on SEO (Search Engine Optimisation) related to phases people search for. As a result the link was found in the lonely spot on page 3 which is should be number 1.

Wouldn’t it be great if MDN had SEO focused content to support the excellent reference material it already has available? The PromoteJS movement has made a start but I think it needs a kick-start.

Who’s with me?

UPDATE (20/1/12):

In a moment of great timing, the Mozilla WebDev team started a AMA (Ask Me Anything) thread on Reddit. I pointed out the above comments and had some great responses from the team.

It turns out that MDN is a wiki so it’s in the community (and my hands) to make a difference.

You can read the comments here:

http://www.reddit.com/r/IAmA/comments/oonrg/iama_member_of_the_mozilla_webdev_team_ama/c3iup1b