Archive for the ‘Programming’ Category

File Under: Programming, UI/UX, Web Basics

Video: Progressive Enhancement 2.0

A webpage doesn’t have to look the same in every browser. In fact, a webpage shouldn’t look the same in every browser, according to former Yahoo developer and JavaScript guru, Nicolas Zakas.

Zakas, who spent five years as the front-end tech lead for the Yahoo homepage, recently spoke at the March BayJax Meetup group about what he calls Progressive Enhancement 2.0 — offering users the best possible experience given the capabilities of their device.

Not the same experience, mind you, but the best possible experience. That means progressively enhancing sites according to the device’s (browser’s) capabilities.

Progressive enhancement is perhaps best summed up by the famous Mitch Hedburg quip, “an escalator can never break, it can only become stairs.” In other words, if you’re building websites well they never break, even if you look at them in Lynx. The site may not look the same in Lynx as it does in, say Chrome, it may not function as smoothly, but the core content is still there and can still serve as a stairway that gets people where they want to go even when the enhanced ease of the escalator is absent.

More practically, progressive enhancement means starting with the least capable devices — an older phone, Lynx running on Windows 95 — and then adding more sophisticated features based on screen size, bandwidth and so on.

Zakas also takes on the common assumption that a web “page” is analogous to the printed page. In fact Zakas argues the web is more like television, which has a similar separation of content and device. In that analogy old browsers are like black and white TVs. No one expects a black and white TV to play HD content, but everyone would be disappointed if you served black and white content to an HD TV. Hence the need for progressive enhancement.

If you’re well versed in the history of the web the beginning of the video may be a bit slow, but stick with it. Also be sure to watch the questions at the end where Zakas addresses how to progressively enhance more application-like web pages.

File Under: JavaScript, Programming

Octocat, Meet Firebug: The Popular Firefox Developer Tool Is Now on GitHub

What has six legs, eight tentacles and the head of a cat? Firebug on GitHub of course. Yes, it’s true, Firebug, the JavaScript and web development tool that spawned a thousand imitators (well, at least three anyway) is now available on GitHub.

Firebug has long been open source, but has not, until now, been officially available via Git. The move to Git and the new hosting page on GitHub means that interested developers have an easier way to fork the project, tinker with the code and contribute to Firebug.

Firebug developer Jan Odvarko says the move to GitHub has been smooth so far and will offer interested developers “a much better way to collaborate with other coders.”

Indeed GitHub makes it simple to create your own version of Firebug, whether for fixing bugs, contributing new features or developing Firebug extensions. For details on how to get started with Firebug on GitHub, check out Odvarko’s blog post.

Despite its long-standing relationship with Firebug, Mozilla recently began developing its own, built-in developer tools for Firefox. The move to native tools has left some wondering about the future of Firebug, and no doubt the move to GitHub is in part designed to get more developers contributing to the project.

If you’d like to, ahem, get in on the fun, head on over to Firebug’s GitHub page. Also, if you haven’t seen it yet, be sure to read Wired’s excellent profile of GitHub (the article is available on GitHub as well, natch).

Connect With Your Creation Through a Real-Time Editor

Inspired by Bret Victor's demo, Chris Granger's live editor helps connect you with what you're building.

Last month we pointed you to a video of Bret Victor’s talk, “Inventing on Principle.” Victor has worked on experimental UI concepts at Apple and also created the interactive data graphics for Al Gore’s book, Our Choice. In the talk Victor showed off a demo of a great real-time game editor that makes your existing coding tools look primitive at best.

Inspired by Victor’s presentation, developer Chris Granger has put together a similar live game editor in Clojurescript.

If you haven’t watched the video of Victor’s talk, you should start there, but the basic idea behind his real-time editor is to make your code more closely connected to what it creates, in this case a simple game. Granger’s take on the idea is similar — all changes you make to the code are reflected immediately in the running game. You change a line of code and the game immediately changes right with it. Here’s Granger’s video demonstrating the editor:

As Granger writes on his blog, “essentially I learned that Victor was right — there’s unquestionable value in connecting yourself with your creation.”

Granger’s demo code is available on GitHub and there’s a .jar file available for download if you’d just like to play with the demo.

Google’s New ‘Dart’ Language to Get a Starring Role in Chrome

Google has released an experimental version of the Chromium web browser with support for the company’s new Dart programming language. Dart, which is Google’s attempt to improve on JavaScript, has thus far not enjoyed much support outside of Google, but the company continues to push forward with its own efforts.

The new development preview version of the Chromium browser, the open source version of Google’s Chrome browser, contains the Dart Virtual Machine. This release, which Google is calling “Dartium,” can be downloaded from the Dart language website. At the moment it’s available only for Mac OS X and Linux. Google says a Windows version is “coming soon.” Keep in mind that this is a preview release and intended for developer testing, not everyday use.

Google originally created Dart to address the shortcomings of JavaScript and ostensibly speed up the development of complex, large-scale web applications.

While there is much programmers might like about Dart, it is, like Microsoft’s VBScript before it, a nonstandard language from a single vendor created without any regard for the existing web standards process. The new Dartium release is the first browser to include a Dart Virtual Machine and, based on the response from other browser makers to the initial release of Dart, likely the only browser that will ever ship with a Dart VM. For its part Google says it plans to incorporate the experimental Dart VM into Chrome proper in the future.

The company also has a plan for all those browsers that aren’t jumping on the Dart bandwagon — a compiler that translates Dart to good old JavaScript. In this scenario Dart ends up somewhat like CoffeeScript, a JavaScript abstraction that makes more sense to some programmers.

For more details on the new Dartium browser and the latest improvements to the Dart VM, be sure to check out the Google Code Blog announcement.

Video: Inventing on Principle

We just had a moment similar to the time we first saw content-aware scaling in action, but this time it’s even better — we’ve seen the future of programming tools and it looks awesome.

Check out the video above of Bret Victor‘s recent talk, “Inventing on Principle.” Victor has worked on experimental UI concepts at Apple and also created the interactive data graphics for Al Gore’s book, Our Choice. The video above of Victor’s keynote at the Canadian University Software Engineering Conference, captures a wonderful talk on living your life based on principles, but for many developers what’s most arresting are the software development tools demoed.

Do your current tools suddenly feel incredibly outdated? Perhaps you thought you were using a well-tuned coding machine but suddenly realize you’re really just hitting two stones together? Thought so. Sadly, the apps demoed in the video aren’t available. That’s all right, though; it just means someone needs to build them. Be sure to let us know if you do.