And by jQuery-esque I mean easy! The premise of Jetpack, Mozilla Labs’s latest creation, is that anybody who knows HTML, CSS and JavaScript can create Firefox add-ons.
It takes 80 lines of code to block ads on websites as shown in the demo above, and 14 lines to edit images from within Firefox. Granted, it just sends the data to Pixlr which does all the hard work, but lowering the obstacles to develop some fairly nifty scripts is a commendable effort, just as what jQuery did with JavaScript, Sass with CSS, and HAML with HTML. It’s made even more compelling with Bespin, Mozilla’s HTML5-powered web-based code editor.
Perhaps I’m still in a “standardize everything” mood, or envy this new doodad since I’m now using Chrome as my default browser, but don’t you sometimes wish all browsers could do this? Do the same set of things? We’re getting to a point where the level of HTML and CSS support is the same across every browser, so it makes me wonder what’s the next step for the idea of cross-browser compatibility.
It will probably depend on what the web browser means to its various makers. Google has unveiled the Chrome OS, which will run on a specialized version of Chrome. Opera is focused on its “web servers for everyone” feature in Opera Unite. (And Internet Explorer is playing catch-up, mostly.) Browsers are basically the gateways to the whole Internet, but they’ve become more ambitious than that and their vendors will attend to those ventures first before convening to create new cross-platform goodness.
Here are three little tweaks that go a long way in improving one’s browsing experience and should become default features on every website.
Kottke’s unread posts notification in the title bar
It’s not just web applications like Gmail or Twitter that can enforce the “push” instead of “pull” format that is associated with the real-time web. If you spend a significant amount of time browsing Jason Kottke’s site you’ll probably notice the title bar changing when a new post gets published.
I added a new feature to kottke.org over the weekend: live updating on the home page. If you leave kottke.org open in your browser (with JavaScript on) and I post a new link, the page will display a message urging you to refresh to view some new posts. The page title changes too, so if you have it up in a tab, you can tell at a glance if something’s new. Right now the page checks for new posts every ten minutes, but that could change depending on server load, etc. Thanks to Twitter Search and Tumblr for the inspiration.
Developer hack: Kottke didn’t give details on how he did it, but this script is doing the work.
Infinite scrolling
Paginated websites make digesting content more manageable, but sometimes you just want to consume as much as possible too. Imagine devouring as many Google search results and Flickr images as you can.
Infinite scrolling—at least the hacks mentioned below—load the next page when you’re done browsing the current one. The next and previous page links are still there, so you have both options to choose from.
User hack: install Greasemonkey and the AutoPagerize user script.
Developer hack: use the jQuery plugin or the WordPress plugin.
FFFFOUND!’s keyboard navigation
Don’t underestimate the efficiency of the keyboard. At image-bookmarking site FFFFOUND!, using the keyboard is the best way to get around.
Developer hack: install paging_keys_js.
Google sfida Microsoft con Chrome by Federico Fieni
Guess whose turn it is to bring Internet Exploder into the 21st century. Google has been dipping its fingers and toes everywhere, including the browser market. But it wasn’t content with creating its own; it just had to meddle with everyone’s favorite browser, IE. And based on the name, Google Chrome Frame quite literally puts Google Chrome into Internet Explorer (versions 6, 7, 8). That is, Chrome’s support for HTML5 and its JavaScript engine.
For ordinary users, it means having to download a plugin for IE so it works just as well as any other modern, standards-compliant browser does. For developers, it means adding a meta tag so their websites actually work work better.
Mozilla has done something similar.
A few months back, Mozilla released a <canvas> element plugin. It’s really not a new concept; clearly folks at Mozilla and Google are taking drastic measures so they can slap sense into IE.
Isn’t this Microsoft’s job?
And look how well they’re doing with that.
Let’s turn the tables on this one: would Microsoft even think of creating extensions for competing browsers? Would we even find this acceptable? Of course things are different; Firefox and Chrome work worlds better than Internet Explorer ever has. You don’t see Kill Firefox or Kill Chrome campaigns, do you?
This is not a cure-all
If you don’t have enough privileges to install plugins on your workstation, the plugin and meta tag combo is useless. It doesn’t solve the biggest roadblock to dropping IE6. And if you can install programs on your computer, why not just get Chrome anyway?
Though it’s a valiant effort to bring the IE6 user stats down by a few notches, web designers and developers would still have to test for browsers without Chrome Frame.
Can you say passive-aggressive?
But is it really a charitable deal with a hint of “desperate times call for desperate measures”? If anything, this move by Google (and Mozilla) is an elegant finger to Microsoft.
Google could just sit on its pretty throne, throw more resources into advertising its own browser, and wait ’til it eventually dominates the market. Search, email, advertising, online office suite, VoIP, real-time protocol: everything it touches turns gold. History is on Chrome’s side.
But there’s more to Google Chrome Frame as it seems to scream: “when will you ever get your act together, Microsoft!”—masked by a 24-karat, “we’re here to make the Web a better place” grin.
In the left corner: Tyler Tate’s 1KB CSS Grid, a lean framework sporting 14 classes and the familiar conventions for enforcing a visual grid via CSS.
In the right corner: Vladimir Carrer’s 1-line CSS Grid, an experimental framework sporting a single class to cut nested column widths in half. The solution is mindblowingly brilliant, but does it work? Design tends to work in thirds, not halves. You decide.
Whether or not it’s a coincidence I chanced upon these two extremely simple CSS grid frameworks just days apart, news of these two solutions makes the CSS framework “scene” a lot more interesting. And accessible. I can imagine many front-end developers shying away from heavyweight frameworks because there are too many features, most of which won’t be utilized, and there are too many conventions, most of which aren’t easy to remember.
I’m not even going to get into how using these frameworks leads to unsemantic, presentational class names and lots of <div> soup reminiscent of <table>-based layouts. Let’s just be glad people are streamlining the application of design principles for the Web, namely grid layouts. When a better way comes out—maybe it’ll be display:table, maybe it won’t—we’ll adjust then.
In the meantime, we need to let our arsenal evolve. Balance out the spectrum with lightweight frameworks like these. Then add diversity as well. Look at the Javascript libraries—the tiny moo.fx, the venerable Prototype and Scriptaculous, and the designer darling jQuery—each one caters to a specific need. What other kind of grid frameworks do we need? Fluid? Do-it-yourself? Highly reputable? Unobtrusive? Oh, what will they think of next?
The Web Standards Project (WaSP) has just announced that members of the Internet Information Security Consortium (I2SecC) have discovered the real purpose of the infamous Conficker Worm, set to wreak havoc on millions of compromised systems on April 1st.
WaSP has also discovered that the best way to fight this malware is to ensure your websites are standards-compliant:
In order to ensure you do not fall victim to the worm’s botnet, I2SecC recommends immediate validation of the markup and supporting stylesheets for any Web site that you maintain and correcting any errors that are uncovered. As yet, it is unclear whether the worm will target sites that make use of non-standard DOM scripting; however, a message found by I2SecC researchers in an online forum believed to be from the worm’s creator or a close associate hints that it will: “your document.all are belong to us.”
April Fool’s! If only we could save the world from malware with web standards!
Conficker is very real, however, so please exercise caution today.
Chrome Experiments is a cool new website rolled out by Google to promote its browser Chrome (which is out with version 2.0 beta, by the way) and to demonstrate the power and fun that can be had with the awesomeness of JavaScript and the browser chrome.
Emphasis on the small letter c. See how the site is named Chrome and not Google Chrome (although they effectively became synonymous because it’s Google)? This means most of the neat tricks can be accomplished on other modern browsers too. That is, after all, the idea of “moving to the cloud”—your web product must work in every browser and any other device possible. Of course, the idea is to promote Chrome and not really every other browser and device out there, but Google gets that that’s not the only goal. The experiments are best experienced while using Chrome and not the other browsers.
A short update on other browsers
Speaking of other browsers, let’s take a look at what they’ve been up to lately:
Now let’s go back to Chrome. Seems to me that this Chrome Experiments campaign is the most engaging one of its kind to come out in a long while. From real-time information visualization to graphics and sound rendering to games (both the classics and ones with a browser-based twist), these demos are just a delight to try out. See the compilation video below:
A short rant on other browser campaigns (yes, IE6)
Now, a note on “browser campaigns”. it’s like every other day I see a new site, piece of code, or banner that screams death to IE6! exclamation point! That’s it. Hardly any effort to get Microsoft and other companies to listen, it’s just screaming. I feel like IE6 is now an ace up one’s marketing sleeve, and no longer a real headache that web designers have to deal with everyday. Chrome Experiments makes more sense right now.
What Chrome’s made of
All the browsers claim they’ve got the fastest JavaScript engine of all, and maybe Chrome wants to put its money where its mouth is. It needs to; Google probably expected a better adoption rate for its browser because it’s Google, but it hasn’t happened (yet?). And while it’s nothing close to Spread Firefox or Mozilla Labs, it’s still a solid effort.
We do practically everything on a web browser these days. That’s how Google built itself from the ground. That’s why they rethought how browsers were made and came out with Chrome. Time to show what it’s really made of.
I know rattling off websites in blog posts are a dime a dozen these days and may not be your cup of tea. But you might want to read and bookmark these sites—you’ll definitely keep coming back to them.
It’s a very short list, so you won’t tire easily reading this, and the sites are more like Position is Everything than Smashing Magazine. (No offense intended; I know that SM does a wide variety of blog posts, not just lists and freebies. I just mean they’re more references than resources, okay?)
Web Design+
Web Design+ contains the solutions to common web standards problems. From choosing a DOCTYPE to implementing CSS hacks, this is a great one-stop-shop for the best practices in web design out there. There are a ton of HTML and CSS cheatsheets out there, but reading them shouldn’t stop there. Refine your markup and stylesheets with the help of this site, free!
When Can I Use…
When can I use… compares support for several web design features according to browser version, from HTML to CSS to SVG to other technologies.
For example: thinking of using CSS3’s rounded corners (border-radius)? It’s not even available on IE8 and Opera 10 yet. Of course, you don’t have to avoid using them just because the conclusion says “not ready”. It’s still a very useful page for recalling which browser version can support what.
On Having Layout
On having layout demystifies the concept of Internet Explorer’s hasLayout property. A lot of the IE-related CSS problems that web designers run into are related to hasLayout, so understanding how it works is essential.
The Ultimate Website Launch Checklist
The Ultimate Website Launch Checklist helps one go over key aspects of a website once it goes live. It’s more for the designer-webmaster hybrid, but regardless of your role in the process it’s a good view of what needs to be done.
Eric Meyer has started poring over the WaSP community’s suggestions for CSS3 with a series of posts on his weblog—3 so far in less than a week. The original feedback compiled by Fantasai is a monstrous read in itself, but all these are worth perusing if you care remotely about the future of web design.
It’s comforting to have one of the gurus like him to really go over this. Although he didn’t promise to address every single point on the list, what I’m seeing so far is extremely comprehensive. More importantly, we have a strong figurehead that’s rolling up his sleeves and setting up these blog posts as the stage for discussion with people who are not necessarily involved with the W3C and other stakeholders like the browser vendors.
Between debating over specific CSS features (e.g., containing floats, center positioning, selector blocks) and looking at the bigger picture…
Maybe CSS isn’t the place for this. Maybe there needs to be a new layout language that can be defined and implemented without regard to the constraints of the existing CSS syntax rules, without worrying about backwards compatibility. Maybe that way we can not only get strong layout but also arbitrary shapes, thus leaving behind the rectangular prison that’s defined the web for almost two decades.
I don’t have a concrete idea to propose here, because it’s not up to us any more. A solution was worked out over the course of several years and then found wanting by the implementors. Really, it’s up to the implementors to figure it out now. I personally would like to just lock the browser teams from Microsoft, Mozilla, Opera, and Apple in a room and not let them out until they’ve defined something that works and they’ve all agreed to implement soonest. I might even supply food and water.
…we have to keep talking and stay restless but hopeful. We may not be able to give the final word on the next version of HTML and CSS and the web browsers, but we can talk about what could go into them while the W3C listens.
IE6 is declining. HTML5 is gaining traction. JavaScript libraries and CSS frameworks abstract the process of squashing browser bugs and incompatibilities. And progressive enhancement reassures us that we don’t have to serve up exactly the same features in ancient browsers.
And maybe we can stop acting like the current technologies are our handicap and take the plunge. Okay, maybe splashing water all over might not be a good idea at once. Try dipping your toes. Try your left leg. Try wading. The key is to at least try.
Take an ordinary blog post, highlight a passage you want to comment on, and have it appear on the comment form without having to scroll all the way down. Or mouseover a comment, then show replies to it as well as all other comments made by that person. That’s all in the spirit of Encouraged Commentary, which is a jQuery-powered script by Jim Jeffers.
Now this, I would say, is what JavaScript was meant to do. Not that fading, zooming, and sliding around are pointless applications of JavaScript. Impressing people is a lot less important compared to making them feel welcome, and that they’re a part of something. In this case, taking part is by quoting text or keeping track of conversations more easily.
Of course, what Jim did may seem more subtle an achievement than what designers and developers try to come up with, or what the ordinary blog visitor would appreciate.
But it’s one more contribution to that great experience. I’ve talked about Issuu last time, so this counts as number two. To that “wow, I had a pleasant time commenting on your blog today, Jim, you’ve made it so easy!” kind of feeling.
I hope that I encounter more examples of this—not just in commentary, but for every other aspect of a website.
Some chunks of good browser-related news at the turn of the new year: Firefox browser usage is more than 20% now, while Internet Explorer, especially IE6, is declining—forcibly and otherwise!
Firefox market shares are rise, IE shares decline
Browser market share from October to December 2008
For the first time ever, Net Applications is reporting that Mozilla Firefox market shares passed 20% while Microsoft Internet Explorer dropped below 70%. Four major factors are said to explain Firefox growth, from the US elections to longer weekends/holidays, and higher unemployment—all US-centric factors.
Browser version market share December 2008
Here’s a chart by browser version. IE7 remains the dominant browser in the market, while IE6 is still at number 2, having almost the same percentage as all Firefox versions combined. But it has declined from the 21-22% range in the last quarter of 2008.
Google Chrome barely leaves a dent at 1%, but surpasses Opera at 0.7%.
Google urges IE6 users to upgrade
Get faster Gmail notice in IE6 (image courtesy of Ars Technica)
According to TG Daily, Google’s Gmail is now sporting a message specifically for IE6 users to upgrade and “get faster Gmail”.
The link leads to a page that promotes Chrome and Firefox 3. “Browsers are getting faster and better at running web applications like Google Mail that use browser technology to its limits,” the page reads. “In order to get the best experience possible and make Google Mail run an average of twice as fast, we suggest that you upgrade your browser to one of the fastest Google Mail supported browsers that work on Windows.” The page offers direct download links for Firefox 3 and Chrome. IE7 and Apple’s Safari are listed as supported Gmail browsers.
Several modern browsers are listed in the linked page, and unfortunately Opera is no longer qualified on that list. At least Google is trying to be fair by mentioning competitors to its own browser, Chrome. More importantly, at least it realizes that the browser share for such an old and run-down browser are alarmingly high. Looks like it’s getting costly to maintain backwards compatibility for JavaScript-intensive web applications like Gmail.
This is not the first time that a large company is forcing its hand. Apple’s MobileMe recommends only 2 browsers: Safari, which it owns, and Firefox.
There is hope!
With the combination of natural factors and some nudging from the big, influential companies like Google and Apple, the obsolete browser that is IE6 might just retire sooner than we expect, sooner than never.
Between Apple computers gaining popularity and Google remaining just as powerful, their influence on which becomes the default browser in controlled environments will be needed to level the playing field, ultimately pushing the capabilities of web browsers forward.
