File Under: JavaScript
Mar
21
2013

How to Dynamically Generate a Table of Contents

By

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.

Tags:
File Under: Browsers, privacy
Mar
21
2013

New Adblock Plus Doesn’t Need No Stinking Google Play Store

By

It may have been kicked out of the Google Play Store, but you can still get your Adblock Plus for Android.

In fact, even if you already have Adblock Plus installed on your Android phone you should install this latest release direct from the source since the older, Play Store-based versions will no longer be receiving updates.

To install Adblock Plus manually you’ll need to make sure that you’ve enabled your phone to install software from “unknown sources” (you can enable this in Settings under either Applications or Security, depending on which version of Android you have). Then just head over to the Adblock Plus site and hit the download link.

A number of people in the comments on the Adblock Plus site have reported installation problems with various Android phones, but I had no issues installing Adblock Plus on a Galaxy Nexus using the latest beta of Opera Mobile.

Among the notable changes in this release are the automatic updates — which no longer require the Google Play version — a new user interface theme and a fix for a bug that would sometimes cause blank pages in Chrome for Android. For the full details on everything that’s new, be sure to check out the release notes.

Tags:
File Under: Browsers
Mar
19
2013

Mozilla Shows Off Powerful New Developer Tools for Firefox

By

A mockup of what it might look like to author your pages right inside Firefox. Image: Paul Rouget.

You asked for them and now Mozilla’s Firefox developer tools team is hard at work building a slew of new tools for web developers.

A few weeks back Mozilla’s Paul Rouget asked developers what they’d like to see in future versions of Firefox’s developer tools. The resulting thread on Hacker News is quite extensive and full of some great ideas that Rouget and others have been hacking on ever since.

The result is a bunch of new tools that are mostly still at the experimental mock-up stage, though a couple are available now in the Nightly Channel if you’d like to try them out.

The most popular request, and by far the coolest of the bunch, is the ability to do live edits in the text editor of your choice — effectively controlling Firefox with your editor. The video below shows an example of live editing via the popular Sublime Edit. This would essentially eliminate the need to jump from your editor to the browser, hit refresh, jump back to your editor, and so on. A dance that most of us are all too familiar with. Perhaps the best part, Rouget says this will work with the mobile version of Firefox as well.

Mozilla is also working on the opposite idea — authoring in the browser. That means putting an editor inside Firefox’s Dev Tools suite. Thus far this idea is less fleshed out, but the possibilities include putting in something like jsFiddle or perhaps a more traditional file-based editor.

Other new tools include some catch up features that bring Firefox’s Dev tools up to speed with what you’ll find in WebKit browsers. Examples include a new network panel prototype and the ability to doc the tools to the right side of the screen — great for wide monitors (this is already available in Nightly). There’s also a new “repaint” view that shows what gets repainted on the page, very useful if you’re trying to improve performance. Rouget has also been working on a new, dark theme for the Firefox dev tools.

Rouget recently added a font inspector panel (available in the Nightly Builds) that makes it easy to see which fonts a page is using, including details like whether or not the font file is local or served through a service like Typekit, as well as the actual @font-face code used.

In what appears to be an unrelated effort, Mozilla developer Dave Townsend has been hacking on Firefox’s Tilt View Tool. Tilt View offers a 3D look at a page that can be very helpful for visualizing the structure of your code and spotting bugs you might otherwise miss. Townsend has come up with a number of ways to extend Tilt, including showing only links and only elements that change on hover.

Townsend even suggests that in the future you might be able to pair Tilt with your site analytics to see which links are most frequently clicked. Unfortunately you’ll have to wait a while before these features are actually available in Firefox; Townsend’s hacks rely on some core Firefox features that aren’t ready for prime time just yet.

While many of these coming features are, as yet, only prototypes, things are clearly looking up for Firefox’s dev tools. For more details on everything that’s new, be sure to check out Rouget’s post, as well as the related Hacker News thread that Rouget has been posting to with some follow up info.

Tags:
File Under: UI/UX, Visual Design
Mar
19
2013

You Suck at Search

By

Image: Screenshot/Webmonkey

Even if you’re pretty good at searching, the majority of your website’s users are probably not. In fact, user experience expert Jakob Nielsen thinks most people are so bad at searching that site-specific search engines would do better to return navigation elements rather than actual search results.

Nielson’s research reveals that while more people reach for the search box to find what they’re after on a site, few of them “know how to use it.” The normally more prosaic Nielson writes:

It would certainly be nice if schools would get better at teaching kids how to search. But I don’t hold out much hope, because most people have the literary skills of an anteater (I was going to say, “a chimpanzee,” but these animals are too smart for my metaphor). Having new and varied vocabulary words spring from their foreheads wasn’t a survival skill for ice age hunters, so most people today can’t think up good queries without help.

Presumably Nielsen means literacy skills, not literary skills. That’s a pretty harsh critique, but if you’ve ever watched a less web-savvy friend or family member search for something you might be able to relate.

So how do you design your site’s search tool to help these “mediocre searchers” as Nielsen calls them?

Nielsen is critical of instant search suggestions, currently a popular way to help people using search tools. He claims that, while sometimes helpful, auto-complete tools can also be limiting because “users often view the drop-down as a mini-SERP and assume that it lists everything the site carries.”

The better way to do search according to Nielsen is to simply return product categories. The example in his report cites Costco, which, when searching for “television” will return all of its TV product categories rather than actual individual televisions. The product category links help users refine their choice and get to the televisions they actually want without having to wade through as many individual results.

It’s important to note that Nielsen is only advocating this sort of redirecting when the search term is “unambiguous and exactly matches the category.” As Nielsen notes, “until people begin to grasp the complexities of search and develop skills accordingly, businesses that take such extra steps to help users find what they need will improve customer success — and the bottom line.”

Tags:
File Under: Uncategorized
Mar
18
2013

It’s Not Just Reader: Google Kills Chrome RSS Add-On Too

By

The great Google+ eclipse continues. Image: Screenshot/Webmonkey

Last week Google announced it is shutting down its popular — but apparently not popular enough — RSS reader, Google Reader. In what looks like a broader move away from RSS, the company has also killed off its RSS extension for Chrome, and marked a longstanding bug requesting that the extension become a native part of Chrome as “Won’t Fix.”

Add it all up and it certainly looks like Google wants to not just shut down an unprofitable service, but to kill off its support for RSS entirely.

RSS is an open format that offers an easy way to keep track of news and get updates from your favorite sites without having to visit two dozen different web pages everyday. While it never gained much traction with mainstream audiences, RSS remains popular with news junkies and is an integral part of the web, providing the “glue” behind many popular news apps like Flipboard or Pulse.

Google’s RSS extension for Chrome made it easy to discover and subscribe to RSS feeds by displaying an icon in the URL bar of any page that offered a feed. Clicking the icon would then give users a variety of ways to subscribe to the feed — one of which was Google Reader.

Fortunately there are several alternatives for those previously relying on Google’s homegrown RSS extension. Google Operating System’s Alex Chitu points readers to two possible replacements, one of which appears to be a fork of the original add-on.

Is the disappearing Chrome extension, closed bug report and end of life for Google Reader all part of a conspiracy to kill off Google’s support for RSS? Possibly.

But if you follow the discussion around the bug/request for RSS in Chrome it’s clear that there was never any support for the idea with in Google. Closing the bug was most likely a bit of house cleaning.

It’s also possible that the RSS extension was removed from the Chrome Web Store simply because it would potentially drive traffic to the soon-to-be-closed Google Reader.

That said, it’s clear Google has no love for RSS and apparently no love for other open web tools, like the CalDav format, which was also dropped as part of the company’s Spring cleaning. Instead Google is encouraging developers to use Google Calendar’s proprietary sync tools (there is a whitelist you can apply for if “the Calendar API won’t work for you” ).

Trying to move users from RSS to Google+ and from CalDav to Google Calendar may not be part of any vast conspiracy, but you don’t need a tinfoil hat to recognize that the days of Google as a champion of open web technologies are over.

« OLDER POSTS