All posts tagged ‘JavaScript’

File Under: JavaScript

How to Dynamically Generate a Table of Contents

One of the great things about structured content like HTML is that you can manipulate the structure to generate little extras like a list of links or a table of contents. With long form writing making something of a comeback in the last year or so, we’ve started to notice more tables of contents on the web, offering a quick way to jump down the page to the sections you want to read. Check out developer Steve Losh’s blog for a great example of a table of contents.

Some sites no doubt generate their TOCs by hand, or assemble them server-side somewhere in the CMS, but building a table of contents doesn’t need to be complex or low level. In fact, so long as your HTML is well structured, you can easily generate a table of contents on the fly, using JavaScript.

Chris Coyier, of CSS-Tricks fame, recently posted a nice tutorial walking you through the process of creating a table of contents like the one used on Coyier’s CodePen site. The tutorial uses jQuery, but, with a little tinkering, you should be able to adapt the code to work with your favorite JavaScript library (or no library at all).

Here’s Coyier’s take on the benefits of using a dynamically generated table of contents:

  1. It’s easier – write the JavaScript once and it can create the table of contents on every page you need it.
  2. It’s more reliable – the JavaScript isn’t subject to authoring errors.
  3. It’s still accessible – A table of contents is good for the general concept of accessibility, but it is a bonus (not having it doesn’t ruin the page) and nearly all screen readers run JavaScript.

For all the code, and a detailed explanation of what’s going on, head on over to CSS-Tricks.

File Under: HTML5, JavaScript

Emulator Brings the Bygone Era of Amiga to the Web

Amiga pinball wizard.

Miss your Amiga? Now you can play Prince of Persia, Pinball Dreams and other Amiga hits right in your web browser thanks to the Scripted Amiga Emulator, an Amiga emulator written entirely in JavaScript and HTML5.

To view the emulator, which was written by developer Rupert Hausberger, you’ll need a browser with support for WebGL and WebAudio, as well as a few other HTML5 APIs. I tested the emulator in the latest version of both Chrome and Firefox and it worked just fine.

If you’d like to see the code behind the Scripted Amiga Emulator, head on over to GitHub.

Happy Friday afternoon time wasting.

File Under: Browsers, JavaScript

Better JavaScript Development With ‘JSTerm’ for Firefox

JSTerm, an experimental Firefox add-on for JavaScript developers, has hit version 2.0.

The JSTerm Firefox add-on — not to be confused with the HTML5 Telnet Emulator by the same name — adds a “jsterm” button to Firefox’s Developer Toolbar. Click the button and you’ll get a JavaScript terminal for live coding, prototyping and quick JavaScript experiments. JSTerm behaves like a typical shell terminal with history, tab completion and plenty of key bindings.

Version 2.0 offers performance improvements, a new option to undock the terminal into its own window, global history shared across sessions and support for OS X’s fullscreen mode.

To try out JSTerm you’ll need Firefox 16 (currently in the Beta channel) since JSTerm uses the new Graphical Command Line Interface we covered in our Firefox 16 beta review. JSTerm also takes advantage of the built-in Firefox Source Editor to highlight JavaScript and a sandbox to eval JavaScript.

If you’re thinking there are already several tools for Firefox that cover this ground, well, you’re right. The built-in Scratchpad and WebConsole both offer similar tools, though neither is quite as nice for quick prototyping and experimenting. Developer favorite Firebug also has a Console for JavaScript developers, but it lacks the nice syntax highlighting you’ll find in JSTerm.

For more details on JSTerm and a changelog of everything that’s new in this release, check out Mozilla developer Paul Rouget’s blog. To have a look at the code behind JSTerm, head to GitHub.

File Under: Browsers, JavaScript

Speedy Chrome Tops Google’s New ‘Octane’ JavaScript Test Suite

Is your browser running on high octane? Image: Barbara L. Hanson/Flickr

The Google Chrome team has added a new set of JavaScript benchmarks to the web, dubbed “Octane“. Octane joins the ranks of other test suites like WebKit’s SunSpider test and Mozilla’s Kraken.

Google’s Stefano Cazzulani, Chrome Product Manager, writes on the Chromium blog that, despite a plethora of benchmarks on the web, Google wanted a new suite with “new benchmarks created from full, unaltered, well-known web applications and libraries.” The result, says the company, is a test suite that better reflects performance in “real web applications.”

Of course what constitutes “well-known web applications and libraries” is left to Google’s Chrome team to decide, and, perhaps not coincidentally, Chrome scores quite well on Octane’s hand-picked suite. That’s not to say that Chrome isn’t actually quite fast, but it does highlight the main problem with browser-maker benchmarks — the browser vendor creating them almost always seems to score the highest on them.

I ran the latest version of each of the major web browsers through Octane on a 2008 MacBook Pro (average of five runs each):

  • Safari 6: 6007
  • Chrome 21: 8517
  • Firefox 14: 5351
  • Opera 12: 3330
  • Internet Explorer 9: (tested in VMWare, but IE9 didn’t render the page.)
  • Mobile Safari (iPad 3): 553 (incomplete test, typed arrays aren’t supported in Mobile Safari).

Naturally the results will vary depending on your hardware, particularly your graphics card, but in all my tests Chrome won by a large margin.

To see the actual tests — which include a 2D physics engine, a 3D rendering engine culled from translated C++ along wit PDF.js and other libraries — head on over to Google Code where you’ll find the source for the entire suite. Also be sure to read through the FAQ for more info about the thinking behind Octane.

File Under: Humor, JavaScript

What if Hemingway Wrote JavaScript?

Papa don’t code. Image: Wikimedia.

It’s unlikely Ernest Hemingway would have thought much of programming. Staring at a screen all day hammering out Perl doesn’t seem like something Papa would have enjoyed. A typewriter in the Cuban sun was more Hemingway’s bag.

But what would it have looked like if Hemingway had cracked open Vim and written a few web apps? Angus Croll, an engineer at Twitter, has one answer in a great post that looks at how some famous writers might have written code. Here’s Croll’s take on how Hemingway might have written JavaScript:

Code reduced to its essentials with no word or variable wasted. It’s not fancy; maybe it’s even a little pedantic — but that’s the beauty of Hemingway’s writing. No need for elaborate logic or clever variable names. It’s plain and it’s clear and it does what it has to — and nothing more.

The whole post is funny and well worth a read, particularly if you happen to have come to programming from a background in liberal arts. Other authors Croll covers include Shakespeare, Dickens, Bolaño and my personal favorite, surrealist Andre Breton. Also be sure to check out Croll’s JavaScript blog.