Weston Ruter

Showing support for JavaScript and the Mozilla Developer Network

Weston Ruter — Tue, 05 Oct 2010 05:11:58 +0000

If you want to see access to JavaScript documentation improve on the Web, grab a copy of the code above from PromoteJS to boost the MDN PageRank. Dare I say, we must take the top spots away from W3Schools.

My X-Team Superhero Identity Revealed

Weston Ruter — Wed, 01 Sep 2010 07:57:07 +0000

Tonight we at X-Team had a very special meeting: the induction ceremony for new superheroes! X-Team employees are given superhero identities, and I was next in line for induction along with Wojtek Zając and Ben King. Our meeting was extra special because five of us have been together in Los Angeles this month working for a client on-site, and so we were able to meet in person while we logged in to our chat room to join up with everyone else around the world. So my superhero identity is:

(Weston) is a highly intelligent and technologically resourceful elemental of Nordic descent who can manipulate, control weather and transcommunicate (via electronic voice) through his thundercloud static field. With his static field, he also is able to create lightning bolts and move within them, allowing him to travel at impressive speed.

The name is extra meaningful as it was the superhero name that I went by as a kid, so things have come full circle! Along with my name and description, I was also given a badge depicting my superhero self (right), and incidentally my mask actually looks quite similar to Condorman’s, my favorite old superhero movie. Thanks so much to my coworkers at X-Team for the effort that went into this and for making me feel so part of the team. It’s truly an honor to be working with you, such a talented international team!

Here’s the slightly-abridged transcript of our chat for the induction with the unveiling of my superhero:

tine: …and we have one more superhero to induct today.
tine: this is someone who was a superhero coming in, but sealed his superhero status within the first week of working with us.
tine: someone who’s taking us all by STORM and made a BIG, BIG impression.
tine: for this superhero, we travel back to the U.S, and to the Westcoast..and we welcome…

weston: yay!
benking gave weston a high five!
david gave weston a high five!
tine gave weston a high five!
adi gave weston a high five!
marconi gave weston a high five!
hz gave weston a high five!
dargaud gave weston a high five!
wojtek gave weston a high five!
vio gave weston a high five!
tine: @weston, you shall now be known as…
tine: DRUMROLL PLEASE
marconi: druuuuuuummmmmuuummmmummm
tine: daruuuuuumdrummmmmmmdrummmm
wojtek: come on Tine we’re drumrolling here
tine: druuuuuuuuuuuuuuuumdarrrummm
tine: drrrrrrrrrrr
tine: uuuuuuuuum
tine: ruum
wojtek: Tine!!!
Benking faints with anxiety
tine: Thunderboy
wojtek: yay
marconi: la la la la la la Thunder!
tine: Thunderboy is a highly intelligent and technologically resourceful elemental of Nordic decent who can manipulate, control weather and transcommunicate (via electronic voice) through his thundercloud static field. With his static field, he also is able to create lightning bolts and move within them, allowing him to travel at impressive speeds.
weston: That’s the superhero name I had as a kid

vio gave weston a high five!
marconi gave weston a high five!
benking: woe nice one weston
josh gave weston a high five!
josh: nice!!
adi gave weston a high five!
hz gave weston a high five!
tine gave weston a high five!
adi: congrats @weston
tine: Welcome to the league, @weston!
weston: Awesome, I like it!
weston: Thanks all!
marconi can’t wait to see the new superheroes with their new avatars
tine: @wojtek, @benking, @weston – you are all amazing, and well-deserving of your new superhero statuses. Wield your new powers with care, but put them to good use!
dave: Welcome!!! The league has gone to a whole new level with these new heroes!

ECMAScript Proposal: Named Function Parameters

Weston Ruter — Mon, 31 May 2010 04:06:18 +0000

I recently ran across the ES wiki which is documenting proposals and features for new versions of ECMAScript (JavaScript). I was excited to see the spread operator “...” which basically brings Perl-style lists to JavaScript. I was also excited to see the spread-related rest parameters which basically implement Python’s positional parameter glob *args; however, I did not see something equivalent to Python’s named parameter glob **kwargs (see on Python Docs).

I’ve been giving thought to passing in named arguments to function calls in JavaScript, eliminating the need for the current pattern of wrapping named arguments in an object, like:

function foo(kwargs){
    if(kwargs.z === undefined)
        kwargs.z = 3; //default value
    return [kwargs.x, kwargs.y, kwargs.z];
}
foo({z:3, y:2, x:1}); //=> [1, 2, 3]

Instead of this, I’d love to be able discretely define what arguments I’m expecting in a positional list, but then also allow them to be passed in as named arguments:

function foo(x, y, z){
    return [x, y, z];
}
foo(1, 2, 3) === foo(z:3, x:1, y:2); //=> [1, 2, 3]

This could also work with the ES proposal for parameter default values:

function foo(x, y, z = 3){
    return [x, y, z];
}
foo(1, 2) === foo(y:2, x:1); //=> [1, 2, 3]

Although the current proposal has a requirement that only trailing formal parameters may have default values specified, this shouldn’t be necessary when named parameters are used:

function foo(x = 1, y, z){
    return [x, y, z];
}
foo(z:3, y:2); //=> [1, 2, 3]

Furthermore, although the current spread proposal only works with arrays, it could also work with objects for named parameters:

var kwargs = {y:2, x:1, z:3};
foo(...kwargs); //=> [1,2,3]

Finally, the rest parameters proposal uses spread to implement the rough equivalent of Python’s positional parameter glob (*args), but I’m not sure how it could also be applied to named parameters to support Python’s **kwargs at the same time—I’m not sure how named rest parameters would work. For example in Python:

def foo(x, *args, **kwargs):
    return [x, args[0], kwargs['z']]
foo(1, 2, z=3); //=> [1, 2, 3]

Python has the * to prefix positional parameter globs and ** to prefix named parameter globs, but so far ECMAScript only has one prefix the “...” spread operator.

These are just some rough ideas about how JavaScript could support named parameters. I’m sure there things I’ve missed and implications I haven’t thought of, but I wanted to get my thoughts out there. What do you think?

Programming Languages I’ve Learned In Order

Weston Ruter — Fri, 02 Apr 2010 19:52:43 +0000

Update: See also list on MY TECHNE.

What follows are the programming languages I’ve learned in the order of learning them; their relative importance is marked up with big, and small indicates I didn’t fully learn or actually use the language.

Perl 5
JavaScript / ECMAScript
PHP 4 & 5
SQL
Visual Basic 6
Java
Classic ASP: VBScript & JScript
(Visual) C/C++
XSLT
Ruby
Python (I expect/hope that this will supplant PHP in the next couple years, getting an extra big or two.)

While Python is now my server-side language of choice, I would be much happier to use JavaScript end-to-end. Thanks to the CommonJS initiative, this is becoming a reality.

Not included in the list above are markup languages and other related technologies: (X)HTML 4 & 5, XML, CSS, DOM, RSS, Atom, RDF, XML Schema, XPath, JSON, JSON/XML-RPC, SVG, VML, OSIS, iCal, Microformats, MathML, etc.

Idea via and prompted by James Tauber, via Dougal Matthews.

Proposal for Customizing Google’s Crawlable Ajax URLs

Weston Ruter — Wed, 17 Mar 2010 18:17:54 +0000

On the Shepherd Interactive site, we have a dynamic navigation menu in Flash. In order to prevent it from having to reload each time a page is changed, I implemented Ajax loading so that the SWF only has to load once. This is similar to what Lala and Facebook do. So if your browser is Ajax-enabled, upon visiting:

http://shepherdinteractive.com/portfolio/interactive/

You will get redirected to site root / with the old path supplied as the URL hash fragment which is then loaded in via JavaScript as the page content:

http://shepherdinteractive.com/#portfolio/interactive/

However, according to Google’s Making AJAX Applications Crawlable specification, Ajax pretty URLs are any containing a hash fragment beginning with !, for example:

http://shepherdinteractive.com/#!portfolio/interactive/

The purpose of the ! is merely to inform Googlebot that such a URL is for an Ajax page whose content can be fetched via:

http://shepherdinteractive.com/?_escaped_fragment_=portfolio/interactive/

The problem I have with Google’s specification is that the pretty URL Ajax fragment prefix (!) is mandated; it is not customizable. I should be able to tell Googlebot which fragment identifiers are for Ajax content and which are not. Therefore, instead of requiring authors to to conform to Google’s Ajax specification, I propose that Google adopt an extension to robots.txt which allows site owners to let Googlebot know what to look for. The current specification’s mandate for ! could be indicated via:

Ajax-Fragment-Prefix: !

Or it could be changed to anything else, such as “ajax:“. If the Ajax fragment doesn’t have a prefix at all (as in the case of Shepherd Interactive’s website above), a regular expression pattern match could be specified in robots.txt, for example:

Ajax-Fragment-Pattern: .+/

This would tell Googlebot that a URL with a fragment containing a slash should be fetched via the _escaped_fragment_ query parameter, and that the Ajax URL itself (including the fragment identifier) should be indexed and returned verbatim in the search results.

It’s true that the Shepherd Interactive site implements Hijax (progressive enhancement with Ajax) techniques, so every Ajax URL has a corresponding non-Ajax URL; so in this sense, Google can still access all of the content. The problem, however, is with links to Ajax URLs from around the Web. I assume for Googlebot, every link to an Ajax URL without the obligatory prefix ! is interpreted as referring to the home page (site root /):

http://shepherdinteractive.com/#portfolio/interactive/harmer-steel/
http://shepherdinteractive.com/#about-us/our-company/
http://shepherdinteractive.com/#services/web-development/

So Google then assigns no additional PageRank to our Ajax URLs since it gets assigned to the home page. If, however, Googlebot could be told that those are actually Ajax URLs, then the PageRank could be properly assigned. (My assumptions here could be incorrect.)

Thoughts?

Update 2010-04-22: “Cowboy” Ben Alman brought up the excellent point that customizable Ajax-crawlable URLs need to work on a per-path basis, as different single page web apps on the same server (or even in the same folder) might have different URI requirements. I wonder if in addition to (or instead of) using robots.txt to tell Googlebot the format of the Ajax-crawlable URLs, why not allow that information to be placed in meta tags? Their specification already includes:

Why not make Googlebot support additional meta tags for recognizing the prefix (if any) or pattern that characterizes an Ajax-crawlable URL on a given page? For example:

Current default behavior:
Starting with “/” like …about/#/us/:
All fragments are crawlable:
Any fragment ending with a slash:

With these meta tags, authors would be able to have complete page-level control over the structure of Ajax-crawlable URLs (hash fragments).

Photo of “Audible Ajax”

Weston Ruter — Thu, 04 Feb 2010 19:18:15 +0000

I miss the Audible Ajax podcast on Ajaxian. Photo by my friend Nathan Watkins; taken 2006-07-17 in Midelt, Morocco where I was soaking in the podcast.

We’re Having a Baby Boy!

Weston Ruter — Sun, 24 Jan 2010 22:02:02 +0000

Five months in, I’m pleased to publicly announce that my wife and I are expecting a baby boy at the end of May! His name is “Asecret”

Portland, Oregon Snow Driving

Weston Ruter — Sun, 24 Jan 2010 21:44:16 +0000

I took this video outside of Shepherd Interactive, my work. View in HD to see the sparks fly See also the footage of my commute home which ended up being a journey half on foot from my work to downtown: part 1 and part 2.

What follows are screengrabs from Google Maps of the traffic around 5pm. One word: gridlock.

HTML5 Audio Read-Along

Weston Ruter — Wed, 23 Dec 2009 04:30:09 +0000

Update: I’ve created a new ESV Text/Audio Aligner project on GitHub which queries the ESV text and audio data from their API and aligns them using the newly-improved CMU Sphinx codebase, which now works better with long audio. It’s still a work in progress.

Jump to demo below to listen while reading along to the nativity story from the Gospel of Luke.

I guess I’ve been on an HTML5 Audio kick lately, with this and my previous post on using it to play Google’s Text-To-Speech (TTS) service on Google Translate. I wrote that post while attempting to build a text-to-speech interface which audibly reads the text on the page while highlighting the currently-spoken word (like my old favorite ReadPlease), but a bug in Google Chrome for Mac discouraged me from finishing it. However, when I saw the inestimable Paul Irish‘s post about the jquery-singalong plugin which times HTML5 Audio with text and a bouncing ball cue, I was inspired to do the same but for a (non-TTS) read-along.

The text I chose was the nativity story from the Gospel of Luke in the English Standard Version (ESV), not only in keeping with the (true) Christmas spirit but also because the ESV Online has an excellent API which allows both a passage’s text and its audio to be queried. With the text and audio in hand, each of the words in the text needs to be time-indexed for its begin time and duration in the corresponding audio. In the past, audio Bibles were divided into chapter segments only and that was as granular as you could go; the ESV team did the innovation of taking this granularity down to the verse-level. Unfortunately, however, the granularity is not available at the word-level. Therefore, in order to make this exciting (IMHO) read-along demo work, I manually traversed the audio to find each word’s begin time and duration (spending more time than I care to say), and I added these time indicies to the word markup as data-begin and data-dur attributes, akin to SMIL’s begin and dur attributes (which I suppose I could use). I also spruced up the markup for the passage by incorporating some HTML5 constructs as well as adding OSIS verse elements as I’ve been talking about over at Open Scriptures.

The read-along demo has been tested in Firefox 3.5, Chrome 4, and Safari 4 (as expected, it will not work in Internet Explorer). Chrome plays the MP3 as served from the ESV API. Firefox doesn’t support MP3 so I include an OGG Vorbis source as well. Safari seems to have trouble playing the MP3 and can’t play OGG, so I also include an 8kHz WAV source as well.

What it does: Upon playing the audio, the word corresponding to the one currently being spoken is highlighted ~~(via DOM Range/Selection)~~; this eliminates the need to re-find your place if you momentarily look away. Likewise, when manually adjusting the seek position, the words which correspond to each position sought will be highlighted; and conversely, clicking a word causes the audio to seek to its corresponding position (and double-clicking will then cause it to start playing). Thus the text itself serves as an interface for navigating the audio. See the inline JavaScript source code for all the magic.

Without further adieu, please enjoy listening while reading along to the Christmas story!

Luke 2:1-20 (ESV)

Notice: Your browser doesn't appear to support HTML5 Audio. Please use try Firefox 3.5, Chrome, or Safari.

Notice: You must have JavaScript enabled/available to try this HTML5 Audio read along. If you're viewing this in a feed reader, try viewing outside.

In those days a decree went out from Caesar Augustus that all the world should be registered. This was the first registration when Quirinius was governor of Syria. And all went to be registered, each to his own town. And Joseph also went up from Galilee, from the town of Nazareth, to Judea, to the city of David, which is called Bethlehem, because he was of the house and lineage of David, to be registered with Mary, his betrothed, who was with child. And while they were there, the time came for her to give birth. And she gave birth to her firstborn son and wrapped him in swaddling cloths and laid him in a manger, because there was no place for them in the inn.

And in the same region there were shepherds out in the field, keeping watch over their flock by night. And an angel of the Lord appeared to them, and the glory of the Lord shone around them, and they were filled with fear. And the angel said to them, Fear not, for behold, I bring you good news of great joy that will be for all the people. For unto you is born this day in the city of David a Savior, who is Christ the Lord. And this will be a sign for you: you will find a baby wrapped in swaddling cloths and lying in a manger. And suddenly there was with the angel a multitude of the heavenly host praising God and saying,

Glory to God in the highest,
and on earth peace among those with whom he is pleased!

When the angels went away from them into heaven, the shepherds said to one another, Let us go over to Bethlehem and see this thing that has happened, which the Lord has made known to us. And they went with haste and found Mary and Joseph, and the baby lying in a manger. And when they saw it, they made known the saying that had been told them concerning this child. And all who heard it wondered at what the shepherds told them. But Mary treasured up all these things, pondering them in her heart. And the shepherds returned, glorifying and praising God for all they had heard and seen, as it had been told them.

Google Text-To-Speech (TTS)

Weston Ruter — Sat, 12 Dec 2009 22:49:59 +0000

Update 2010-03-16: Andufo shared the happy news that more languages are now available in the Google TTS service! I have added a new language selection drop-down for English, Spanish, French, German, Italian, and Hatian Creole.

Recently Google Translate announced the ability to hear translations into English spoken via text-to-speech (TTS). Looking at the Firebug Net panel for where this TTS data was coming from, I saw that the speech audio is in MP3 format and is queried via a simple HTTP GET (REST) request: http://translate.google.com/translate_tts?tl=en&q=text. ~~Google Translate notes that the speech is only available for short translations to English~~ Now multiple languages are supported, and it turns out that the TTS web service is restricting the text to 100 characters. Another restriction is that the service returns 404 Not Found if the request includes a Referer header (presumably one that is not for translate.google.com).

In spite of the limitations of the web service which certainly reflect the intention that the web service is only to be used by Google Translate, thanks to the new HTML5's Audio element and rel="noreferrer", the service may be utilized by client-side web applications like following (Google Chrome 4 recommended):

Google Text-To-Speech (TTS)

Due to the Referer header restrictions imposed by Google's TTS service, you must have JavaScript enabled/available to use this form.

Language:
Text:

Speech:	Download audio (copy URL if browser doesn't support `rel="noreferrer"`; otherwise `404 Not Found`)

I am really excited at the prospect of text-to-speech being made available on the Web! It's just too bad that fetching MP3s on an remote web service is the only standard way of doing so currently; modern operating systems all have TTS capabilities, so it's a shame that web apps and can't utilize them via client-side scripting. I posted to the WHATWG mailing list about such a Text-To-Speech (TTS) Web API for JavaScript, and I was directed to a recent thread about a Web API for speech recognition and synthesis.

Perhaps there is some momentum building here? Having TTS available in the browser would boost accessibility for the seeing-impaired and improve usability for people on-the-go. TTS is just another technology that has traditionally been relegated to desktop applications, but as the Open Web advances as the preferred platform for application development, it is an essential service to make available (as with Geolocation API, Device API, etc.). And besides, I want to build TTS applications and my motto is: If it can't be done on the Open Web, it's not worth doing at all!