PataMetaData: December 2011

Monday, December 12, 2011

How I use Browser Extensions

Browser extensions are a huge part of how I use the web. I doubt I go a day without them. Here's a rough sketch of my setup on Chrome, but I want to emphasize that Firefox remains the gold standard in terms of extensibility. There's nothing here that can't be done just as well—if not far better—in the ol' iceweasel.

Context

is the start of it all. Basically, Context lets me group my extensions into commonly-used "profiles" of active extensions that I can quickly switch between. As soon as I saw the Lifehacker article on it, I knew I was in love. I have profiles for speed, security, web development, Google Music, & standard browsing.

Here's why Context is so clutch: extensions can be expensive in terms of performance. If you're running Chrome, click on the wrench icon & check out "background pages". How much memory is consumed by extensions? Not a ton, but enough such that you don't want 10 running at once. If I enable all 16 of my extensions, they use up about 465mb of memory. Context lets me run extensions only when they're really needed, e.g. there's no use for AdBlock (which is lovely but does slow down browsing because it adds a massive stylesheet to each page I visit) if I'm on non-commercial sites.

Security

is something I'm very serious about, so serious that I'm going to save it for another post. But suffice to say I use AdBlock to clear up the clutter, KB SSL Enforcer to force the use of HTTPS, & NotScripts to stop the baddies from hijacking my browser. Ghostery is also interesting but I find it more informative than preventative in terms of security.

The Essentials

Diigo is the web bookmarking service I migrated to after The Great Delicious Scare of 2010. I probably find 2-3 interesting sites a day that I might need later so I just drop them into my Diigo account with some tags to aid in retrieval. This extensions actually does a whole lot more, including web highlighting & annotation.

Google Mail Checker lets me know when new email hits my Gmail account. Cuz I'm OCD about my inbox.

1Password makes all my passwords look like "zO5nHdaU%paO[dw2mM}xuI" & then stores all those insane passwords in one convenient place. It's probably the only software I actually spent money on in the past year & I heartily recommend it.

Up until the recent Google Apps redesign, I was using Minimalist for Gmail, Minimalist for Google Calendar, etc. to modify the layout of those applications. But I actually really like the new designs so I don't feel a need to use those extensions, which have been deprecated in favor of Minimalist for Everything. I do want to check out MinEverything to see if I can find any use cases. Stylish is another one worth mentioning; you can essentially add user-created styles to any of your favorite websites.

Web Development

Awesome Screenshot makes capturing & annotating nice designs quick & easy.

Web Developer puts tons of powerful features a couple clicks away. I can validate CSS & HTML, outline block-level elements, do all sorts of web form management, & perform magic tricks.

WhatFont helps me check out the font on other websites quickly.

And, because it bears mentioning, Chrome's Developer Tools does basically everything I need to develop sites, these extensions just expedite a few operations. I'm not sure Web Developer does anything that the Dev Tools can't, it's just quicker.

Monday, December 5, 2011

KISS Mobile Redirect

OK, here's my super simple mobile redirect. On the main website, we have the following script in the <head>:


if (screen.width <= 699 && !sessionStorage.getItem("redirecting")) {
document.location = "./m/index.html";}

In pseudocode this says: "If the visitor's device [not browser window, so if you're using a desktop browser with a freakishly tiny window for some insane reason, you don't get redirected) is less than 700 pixels wide, send them to our mobile site."
But there's another element, the sessionStorage bit. That's because, on the mobile site, every link back to our full website looks something like this:


<a href="http://www.chesapeake.edu/library/" onclick="sessionStorage.setItem('redirecting','1')">Full site</a>

That says: "if a user clicks back to the main site, store a little note for the duration of the browsing session*." Then, on the main website, the redirect script checks for the presence of this note &, if it's present, doesn't redirect. Thus we avoid a redirect loop wherein mobile users can never return to the full site.

What's Good

Relies on feature detection (e.g. screen width) and not user agent sniffing. Vastly reduces maintenance.
K.I.S.S.: I honestly didn't think I could find something so simple that worked.
Support for session storage is widespread. I saw some other scripts that use cookies as a backup, but literally 0% of our mobile site's traffic is coming from browsers without sessionStorage.

Aw, Snap!

Some browsers/devices might fall through the cracks
JavaScript redirects have disadvantages. A) JavaScript has to be on (minor concern these days, & someone surfing a jQuery Mobile site without JS won't have a pleasant experience anyways) & B) ideally this would happen on the server side, since I'm asking the user to begin downloading a page only to immediately move them away from it.

Thanks to everyone who chimed in about the mobile site & redirects. I don't have a whole lot of people to geek out about this with & I appreciate the sounding board.

*Not at all clear at what point sessionStorage expires, but it's more temporary than localStorage. If the browser closes, sessionStorage is wiped out, for sure, but who closes mobile browsers? I'm hoping that sS expires every hour or so but haven't tested yet.