This Week in JavaScript - 04 November 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.

Here’s what we’ve seen of interest this week.

What’s hot

Cryptography in the Browser - this is a theme that crops up in the JS forums from time to time. Here’s how it’s done.

Offline First: Your Next Progressive Enhancement Technique? - by SitePoint’s Craig Buckler

Techy

The JavaScript Event Loop: Explained - a look at JS’s event-driven interaction model

A Gentle Introduction to Monads in JavaScript - what they are and why they are useful

Libraries

Working with jQuery DataTables - a look at the basics of DataTable, as well as how to use some of the advanced features

Watching

Everything You Never Wanted to Know About JavaScript Numbers - a 27 minute talk by Bartek Szopka from JSConf EU

Frameworks

What’s so special about Google’s AngularJS - an interview with Misko Hevery, the founding co-author of AngularJS

Learn Node.js The Troll Way - an amusing node.js tutorial in which the author constructs a bot to troll his brother on Reddit

Riot.js — The 1kb client-side MVP framework

Plain Awesome

Particle effects in JavaScript - a WebGL demo

Plain Random

HTML thinks that “chucknorris” is a colour!
Seriously! Try this out. What do you get?

<!DOCTYPE HTML>
<html>
  <head>
    <title>Chuck Norris</title>
  </head>
  
  <body bgcolor="chucknorris">
    <p>Chuck Norris fact: Chuck Norris doesn't call the wrong number. You answer the wrong phone.</p>
  </body>
</html>

I know this one isn’t much to do with JavaScript, but I found it it too amusing to leave out.
Extra points for anyone who can explain why this happens (without consulting Google).

So, what you think about these recent happenings in JavaScript? Let us know and we’ll have some more to inspire you next week.

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

Or try this one:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Pullo aus 'm Pott</title>
  </head>
  
  <body bgcolor="pulloausmpott">
    <h3>Pullo fact: I'm not Chuck Norris. You got a better bgcolor.</h3>
  </body>
</html>

bgcolor=“greenred” is also a beautiful color.
Not to be confused with bgcolor=“redgreen”. :smiley:
Or bgcolor=“blackandwhite”
Every fantasy name has a fantasy meaning!

I don’t know why. Anyway it’s not the doctype html5 + deprecated attribute: html4.1-Transitional and xhtml1.0-Transitional are valid (x)html (*), but give the same effect.
Also it’s not the required but missed <meta> for the charset.
The html-specs don’t say “If an invalid value is given, a User Agent should …”.

  • Note: all browsers seem to do it in the same way.
  • Note: a look in Firebug does not show any value for a background color, though the bgcolor is present! :shifty:
    But a look in Chrome Developer: body[Attributes Style] {background-color: rgb(192, 0, 0);}
    And IE Developer Toolbar: background-color: #c00000.

Strange things happen!

BTW: The “Particle effects in javascript” are other stuff than the mouse following animated gif’s of long ago! :slight_smile:


(*) Valid in the html-validator. - HTML-Tidy is giving alarm.

Hey Francky,

Thanks for the response. That’s a nice example.

As you say, basically anything you type into the bgcolor attribute gives you a value.

I had quite a lot of fun with this, for example I found out that:

bgcolor="crap" gives your brown and bgcolor="sick" gives you green.

Very juvenile :slight_smile:

Anyway, the reason why this is as it is, appears to be a hangover from the Netscape days.
This article covers it in quite some detail: http://scrappy-do.blogspot.de/2004/08/little-rant-about-microsoft-internet.html

And here is the original post on StackOverflow that I was inspired by: http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color

Why mess around with fake color values, when real ones like these are available?

bada55
defec8
fac0ff
eff0ff
d00d00
deaded
101ca7
badbad

Fantastic, Ralph!

eff0ff reminds me of my school days and using a hex calculator to swear at each other.

Funnily, we never thought of fac0ff. I wonder why.

Ah yes, the good old calculator! I’m sure at high school the first option would have been some variation of #b000b5 :lol:

[U]20 shades of #b000b5[/U] ? :slight_smile:

BTW: I’m preparing something about the chucknorris phenomenon: in a few days.

“Tell him it’s time to #d1e

No, no, then he #bedead.

I’d be putting on a #facade if I pretended to care, but I guess his mama would be quite #de5018.

You can’t #deface chucknorris like that !

I can do whatever I like, #a5501e.

Ok you win :slight_smile:

Aw, you’re no fun, #c55cad. :frowning:

But beware of the #5en5e1, he will #c0Eebc (#500NER or #L8TERZ). :slight_smile:

You need to start drinking #decaff :slight_smile:

If not real #c0ffee, then it has to be #beeeea

Coming back on the chucknorris-background, I couldn’t resist to do some experiments. :wink:

The result: some demo pages.
While the strange background-coloring is a matter of html and css (*), I’ve made a topic of it in the css department of the forum.
You can have a look at:


(*) Under the hood is some javascript, but only for demo purposes. - Had to find workarounds to get it working in IE of course (IE7/IE10). :rolleyes: