getUserMedia - camera / microphone APIs landing in Chromium

The Chromium team just announced the latest beta now has user media APIs. Javascript is quickly becoming more and more interesting.

Happiness

Cute.

Neural network in js

A bayesian classifier.

speak.js - speech generation in javascript

I'm so playing with this tonight.

(ab)using labels in javascript

Something that always felt a bit messy in unobtrusive javascript coding was how we normally use class names for both styling and binding functionality to an element. For example:

<-- HTML -->
<a class="expander" href="javascript:void(0)"></a>

/* CSS */
.expander {/* some arrow styles */}

/* javascript */
$(".expander").click(toggleAccordion)

There are two problems with this:

1. If I have another type of expander button somewhere else that needs to do something different (e.g. maybe somewhere I need to ajax content in first), then I need to clutter the code with more stuff in order to allows the different buttons to do different things
2. I have no indication of what said button does by inspecting it w/ Firebug/dev tools, let alone by just looking at it. I have to slog through the code to figure out what code might get attached to this element

Stepping back for a moment

As it turns out, there's a third, minor issue: the href attribute of the element doesn't serve any purpose. It doesn't even tell the user where clicking on the element might go. It's just a clunky way of telling the browser to not do its default action when you click on the element. It's a code smell that can be refactored to something like the this:

$(".expander").click(false)

As it also turns out, browsers as old as IE8 support document.querySelectorAll, so finding elements by href nowadays is not particularly slower than searching by class name. So why not repurpose that useless href back to identifying what a user should expect when clicking on the element?

What's javascript:void(0) anyways?

javascript:void(0) is an antique from a decade ago that most people just blindly use without really thinking about what it might mean. All this line does is run some javascript that returns undefined. Returning undefined in this context is equivalent to e.preventDefault(), which in this case means "prevent going to a URL".

There are many ways of returning undefined, the shortest of which is to simply... do nothing.

<a href="javascript:;"></a>

But we can do better: do nothing in a descriptive way, by using javascript labels:

<a class="expander" href="javascript:expand:;"></a>

And we can target that via jQuery:

$("[href='javascript:expand:;']").click(toggleAccordion)

We can attach different behaviors to different ".expander" elements simply by using a different href:

<a class="expander" href="javascript:expandData:;"></a>

$("[href='javascript:expandData:;']").click(ajaxAccordion)

So now we have a clean way of separating styling from behavior on an element, while making "javascript:void(0)" more informative for users and future maintainer selves.

On learning how to code, or whose life is it anyways?

So this drama started by Jeff Atwood about whether people should learn how to code or not still hasn't died.

The trigger for his post seems to be that some mayor somewhere ought to be spending his time doing mayor work and not learning things that don't necessarily help w/ his day job.

The thing is, even if he gets paid by tax payers to do his job, it doesn't mean he must do it at all times of the day. Lots of coders go home after work to learn about things like photography or martial arts. And not because they are actually trying to get photos published in a magazine, or actually going into real combat.

Some are advocating everyone should learn how to code, but that's a bit like saying everyone should learn English or Mandarin under the logic that it opens up a whole lot of business opportunities because of the whole global economy thing. Sure, there are many things that are probably worth pursuing if we had infinite time, but since we don't, just let people pursue whatever the heck they want to.

Unit testing frontend javascript

I like the DSL he's using for unit testing.

Continuous Integration for Javascript

Continuous Integration for Javascript

scaling wordpress on the cheap

How to handle 10 million hits a day. He claims to handle ~7000 hits per minute. Doesn't necessarily handle spikes though.

jQuery Trigger custom parameters

So I just found out that you can pass custom parameters to jQuery's trigger(), which greatly simplifies automating UI actions.

Say you're building a really basic carousel:

<ul class="carousel">
  <li><img src="slide1.jpg" /></li>
  <li><img src="slide2.jpg" /></li>
  <li><img src="slide3.jpg" /></li>
</ul>
<button id="next">Next</button>

$.fn.carousel = function(options) {

  //hide all the slides, except the first one
  this.children().hide().first().show()
  
  var self = this
  $(options.next).click(function(e) {
    e.preventDefault()

    //move first slide to end of list and hide it
    self.children().first().appendTo(self).hide()

    //show new first slide
    self.children().first().show()
  })
  
}

$(".carousel").carousel({next: "#next"})

And say you want to make it rotate automatically every 10 seconds.

var animation = setInterval(function() {
  $("#next").trigger("click")
}, 10000)

BUT, you want to make it stop once a user clicks the button to go next. What now?

Custom parameters

You basically just want to differentiate between a real user clicking, and the click event that is fired programmatically from the setInterval. We can use custom parameters to do this fairly elegantly:

var animation = setInterval(function() {
  $("#next").trigger("click", [true])
}, 10000)

$.fn.carousel = function(options) {

  //hide all the slides, except the first one
  this.children().hide().first().show()
  
  var self = this
  $(options.next).click(function(e, continueAnimation) {

    if (!continueAnimation) clearInterval(animation)

    e.preventDefault()

    //move first slide to end of list and hide it
    self.children().first().appendTo(self).hide()

    //show new first slide
    self.children().first().show()
  })
  
}

$(".carousel").carousel({next: "#next"})

A regular click event only passes the event object as a parameter to the callback function, so the continueAnimation variable is undefined in that case. When triggering the event programmatically, we can pass the value true and run code conditionally based on that.

So that's it.