Hot Koehl

This one has dogged me for quite some time, but I finally figured out how to force users to turn on Javascript when using sites with a lot of mission critical Javascript logic.

Let me first begin by acknowledging that, yes, requiring Javascript flies in the face of site accessibility. Policy wonks for this sort of thing will tell you that Javascript should never be a necessity, that a page should “degrade gracefully” when Javascript isn’t enabled. This mindset is complete crap, in my opinion. Every site has a minimum browser requirement, and Javascript is built into every modern browser. I fail to see why we are still separating the two, and can make a darn good case for expecting Javascript on the user’s end. But that argument’s for another day. If you agree with me, read on.

The example
This example assumes you understand HTML, CSS, and Javascript, and makes use of jQuery, so you may have to adapt it to fit your Javascript framework of choice.

This technique could be applied across the board to an entire site, but let’s start with a single page. A login or account registration is a great choice, since they are already gateway pages to your site. Start by adding the following CSS definition to your page or stylesheet:

.enable-javascript{
  display:none
}

Next, open the HTML for your page and add the enable-javascript CSS class to the top level container containing the body of your page. You should try to leave the header and footer (and their accompanying navigation links) visible and accessible. For example, after my header DIV, the body of my pages are typically wrapped in something like this:

<div id="content" class="enable-javascript">
  [...]
  <div class="base"></div>
</div>

At this point, you’re looking at a blank page. Now let’s give our non-JS users something to look at. Place a <noscript> code block outside and above the body that you just hid. You can use CSS and elaborate HTML inside a <noscript> block, so feel free to make it look good. I actually duplicate my body wrap HTML so the look is similar:

<noscript>
  <div id="content" class="enable-javascript">
    Javascript is not currently enabled in your browser. <a href="http://www.google.com/support/bin/answer.py?answer=23852">You must enable Javascript</a> in order for this site to work properly.
    <div class="base"></div>
  </div>
</noscript>

Finally, make sure the jQuery library is loaded, and add this bit of code to the Javascript for your page:

$(function(){
  $('.enable-javascript').show();
});

What’s happening
We’re using the absence of Javascript to halt the user’s access to a page. By default, page content is hidden via CSS, and we use Javascript to reveal it. If the user’s browser does not have Javascript enabled, the reveal never happens. Visibility for the <noscript> block is handled automatically by the browser, depending on whether Javascript is running or not.

A live example
I’m using this technique on the Fwd:Vault login page. In order to see it in action, you obviously have to disable Javascript. You can use the Google support link to turn Javascript on, and Firefox users can use the Web Developer toolbar add-on to do this a little more efficiently.

A couple caveats
Javascript is a client-side language; it actually lives inside the user’s browser, and runs from the user’s machine. Javascript code essentially tells the browser to manipulate the static HTML of the page, and the server isn’t involved in the process at all (AJAX is something of an exception). This means that there is absolutely no way for us to look for Javascript on the server side using PHP or other server-side technologies.

In addition, since Javascript control is firmly in the hands of the user, you cannot trust Javascript for security. Your average user will be stopped dead with this technique, but hackers and code monkeys can easily circumvent it. This is the case with all Javascript effects, and all have the same countermeasure: scrub all incoming data regardless of Javascript rules enforcement.

Feel free to post comments or questions, and please link your own examples if you put this technique to use!

Share

After launching Fwd:Vault last month, it’s been a race to add the necessary features and functions to take the service broader. First on the list was more subscription tiers. I launched with just two: free and “unlimited everything.” I did this because, well, it was easy.

Your instinct may be to dismiss my decision as laziness, but hear me out. I built most of the base site with just 1 state: free (remember that unlimited free beta period last year?). That allowed me to — rightly — focus purely on features, functions, bugs, etc. Dealing with subscription tiers at the same time would have clouded everything, slowing everything down and likely leading to more rewriting. Staying focused allowed me to get the cornerstone stuff right before building on top of it.

I applied the same thought process when it came time to offer paid options. The game plan has always been to have three paid options, plus the free account. However instead of initially coding four possible user states, I started with just two: free or paid.

This makes my job as a developer much more focused. There’s a LOT of logic in a service like Fwd:Vault focused explicitly on subscriptions: access permissions, showing/hiding upgrade options, setting quota restrictions, security checks to prevent hackarounds from unscrupulous users. The functionality of almost every page is affected by the user’s free/paying status, and don’t even get me started on the work it takes to process credit cards. You have to be doubly triply careful when dealing with people’s personal data like that. On and on. Getting the basics in place takes a lot of forethought and coding.

So instead of thinking about all this stuff in four dimensions — free, option 1, option 2, option 3 — I can cover most everything in just two — free or paid — and then come back later to fill in the holes for the other tiers.

Complexity is your enemy as a developer. Each task must be as tightly focused as possible. The tighter your focus, the less chance you’ll have to introduce bugs. Adding more later may require rewrites, but they are far far easier than rewriting the big sloppy mess you get when biting off more than you can chew.

With the basic subscription and tier logic in place, it’s a far simpler matter to expand the options out to infinity (though we’ll start with four). Expect to see the new pricing options in a few weeks.

Looking for more to read? There’s a new post on the Fwd:Vault Blog that details the most unobtrusive disk defragmenting process I’ve seen (that I also use for my own systems).

Share

I hear Toyota is contemplating a quick makeover to their current logo and tagline…

Wish I could take credit for it, but at least it comes complements of fellow PSL member Eight Eleven.

Update: I complimented the author Aaron, and the following conversation ensued…

Aaron:
I’m going to end up in a lawsuit with Toyota for sure on this one.

Frank:
As a design firm, what a boon for business THAT would be!

Aaron:
Yeah, I can see the headlines already: “Japanese automaker Toyota files lawsuit against New Jersey based Advertising and Marketing Agency, Eight Eleven Inc., then mid-suit, hires them to execute a new branding campaign.”

Fantastic.

Share

We all know most TV is pretty banal, but every now and then something comes along that provides insight, makes you think. So if you ever wondered what it’s really like to be the boss, you need to watch the latest episode of House. They’ve done an excellent job (based on my experience, anyway) capturing the reality of being in charge. Everyone looks to you to fix problems they can’t handle, and everything that goes wrong is ultimately your fault. It also gets really lonely at times. If you’re one of those people who think that the boss just sits at his/her desk and collects a big paycheck, this is a must-see.

The show’s writers and producers get extra bonus points from me for taking on the issue of healthcare, and having the stones to come right and say, “This is a business, and we need to make money.” They even couch the message in a scenario that most people should be able to appreciate from both sides. Very timely given all the discourse surrounding healthcare reform.

44 minutes, well worth it.

Share

If you’ve read this blog before, you know I’m a big Firefox fan. But the one problem that has dogged me is the inevitable bloat that Firefox suffers when open for long periods of time. I work in my browser all day, and after 8 hours it has usually gobbled up all the available RAM, and sucks processor cycles like a Dyson. Fortunately I’ve finally pinpointed the cause and several solutions.

Let’s start at the source. The Firefox team made a crucial usability decision, which is at the heart of the problem. They wanted to allow the user to recover any page that may have recently opened. So by default, Firefox keeps navigation history for all your open tabs, plus the last 10 tabs that you closed. The navigation history for each of those tabs — both open and closed — can hold up to a maximum of 50 pages (i.e. the number of URLs you can traverse purely through the Back/Forward buttons)

With no limit to the number of open tabs, plus the high limit on the Back/Forward navigation, it’s easy to see why Firefox slows to a crawl. If you do a lot of browsing in a lot of tabs, your memory disappears in a hurry. Managing all that extra memory causes the processor to work overtime to keep Firefox hippo moving.

There are two ways to fix this issue in a pinch. First you can simply restart the browser, making sure that it doesn’t save your tabs (you are prompted to save tabs at close by default). Second, you can clear the Recently Closed Tabs to eliminate a portion of the tab history bloat (History > Recently Closed Tabs > Clear Closed Tabs List).

For a more long-term solution, we need to mess with the system settings. Type about:config in the address bar to bring up Firefox’s complete configurations list. The latest Firefox versions present you with a warning before opening the page.

A warning: this page handles everything in your browser. Everything. Don’t mess with stuff if you don’t know what you’re doing.

In the “Filter” textbox at the top, enter

browser.sessionstore.max_tabs_undo

This setting controls how many closed tabs to track. Less old tabs = less memory usage. Double click the lone entry in the list and change the value from “10″ to “5.”

Back to the filter box, enter

browser.sessionhistory.max_entries

This setting controls the navigation history limit. Double click the entry and drop the value from “50″ down to “25″.

Close the about:config tab and restart your browser.

Your mileage on these tweaks will vary depending on your system specs. If you can go a day of heavy browsing without hitting the creep, slowly increment the settings back up, until you hit the sweet spot.

Share

Reviews for Apple’s iPad are all over the place. Personally, I feel that tablets have tried and failed enough times in the general consumer market to call the concept dead. iPad will likely find adoption in the same niche’s as its predecessors: hospitals and other similar venues where it can effectively replace a manilla folder of documents.

Instead, I find the lack of Flash support more interesting to consider. This seems like a terrible omission for a device that Jobs touts as “the best browsing experience you’ve ever had” (around 3:10). I don’t know about you, but *my* browsing experience would be far less than perfect without access to the de facto standard video streaming technology.

The decision was apparently made due to compatibility problems…

Apple does not support Flash because it is so buggy. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash. The world is moving to HTML5.

That may be where the web world is headed, but the iPad is entering a market nowhere near that reality. This just screams classic Apple mindset. They may share the mantra “Everyone else’s stuff is crap” with Microsoft, but Apple tacks the phrase “and that’s why you can’t use it,” onto the end.

I thought that Apple had figured out the market, how to balance a closed platform in order to maintain stability and skyrocket profitability. The Flash decision definitely throws that balance off kilter, and now I’m curious to see if they’ll fall back into the decision-making style of the PC wars in the late 80′s and early 90′s (Note to the kiddies: Mac wasn’t always “cool.” They lost a lot of weight and their acne cleared up just as you entered buying age).

They can get away with dictatorial control over platforms like the iPod and iPhone because they are very focused devices. However iPad is a closer technical cousin to the laptop than the smartphone, and the last few years of App Store and iTunes revenue may be skewing their vision on this one.

My gut tells me they are using iPad to push public perception away from Flash and toward HTML5. There’s no way they’ll make such a play on the Mac platform, but the iPad offers very controlled environment to test the waters. If people (continue to) complain, they’ll publish the iPad Flash patch that they’ve already got sitting on the shelf. Trust me, it’s there.

Update: This image sums up the problem for me quite nicely.

Share

…I suggest you do so immediately. We’ll have a major announcement by the end of the day, and the perks that come with signing up beforehand will go away at that time. Basically this is your last chance to get into the Fwd:Vault Beta, and enjoy the perks we have planned for our beloved early adopters.

Not-so-subtle hint: Beta users will have the chance to enjoy a serious lifetime discount.

Share

I typically hate the random flash games that go around the web, but I stumbled on one today that’s actually pretty fun, if only because of the mechanic at work. It’s called Invisible Cursor.

The game randomly spawns targets for you to click, but you can’t see the mouse cursor, forcing you to “feel” your way to each target. You do get a quick highlight of the cursor location each time you click, but it’s really brief and is accompanied by a screen flash and the target shattering. Oh and you only have a few seconds to shoot your next target.

It’s got all the depth of most web games (i.e. none), but the effect of trying to hit targets without seeing your cursor is very similar to playing a first person shooter. Lots of motion on the screen and you need to be accurate, thus demanding fast response times and a lot of eye-hand coordination. If you suck a sniping, I suggest you play this for a while to improve your aiming skills.

My top score right now is 164 408. Feel free to brag in the comments if you beat me.

Share

If you still don’t have any plans this evening and will be in the downtown Philadelphia area, you’re welcome to come out and meet me at the Philly Startup Leaders next Fishbowl event. We’ll be having a roundtable discussion of sales and marketing, with Fwd:Vault as the focus. Totally free to attend, light refreshments and snacks will be provided.

Registrations are still open, but you can make a last minute appearance if that’s what works for you.

PSL Fishbowl w/ Fwd:Vault
Wednesday, January 20th @ 7:00 pm
Terra Building, Room 1107
211 South Broad St., Philadelphia, PA

View Larger Map

Share

The latest and greatest version of jQuery, version 1.4, was released on January 14, the birthday of jQuery’s original launch. Bugfixes and improvements abound!

The jQuery team has put together a site devoted to the new version, called the 14 days of jQuery, covering the major version changes as well as infrastructure updates coinciding with the new release. For example, the documentation site has been completely redesigned, and been moved to it’s own subdomain home, api.jquery.com. Links from the primary jquery.com site should be updated within the next week. With video demos of new features, Q&A’s with the core team (including founder John Resig), it’s well-worth checking out for every jQuery developer.

Share