The Seven Rules of Unobtrusive JavaScript

I've found the following rules over the years developing, teaching and implementing JavaScript in an unobtrusive manner. They have specifically been the outline of a workshop on unobtrusive JavaScript for the Paris Web conference 2007 in Paris, France.I hope that they help you understand a bit why it is a good idea to plan and execute your JavaScript in this way. It has helped me deliver products faster, with much higher quality and a lot easier maintenance.

Heilmann, Christian. Opera (2008). Articles>Web Design>Standards>JavaScript

Stop Using Ajax!

We got things like browser wars, browser-specific DHTML, and table-based layouts. These were things that got in the way of the original vision, because people wanted rich content when the technology wasn’t ready. And now it’s happening again.

Opera (2008). Articles>Web Design>Accessibility>Ajax

CSS 3 Attribute Selectors

CSS attribute selectors allow us to pinpoint the values of attributes of an element and to style that element accordingly. CSS3 introduces three new selectors that can match strings against an attribute value at the beginning, the end, or anywhere within the value.This provides powerful new ways to style elements automatically that match very specific criteria. In this article, I will put these new attribute selectors in action and create some clever CSS rules that attach icons to links based on the value of the href attribute.

Schmitt, Christopher. Opera (2008). Articles>Web Design>Standards>CSS

Semantic HTML and Search Engine Optimization

So what is POSH? No, it's not just some new clothing fashion hype amongst web designers - POSH is the acronym for Plain Old Semantic HTML. The term Semantic HTML is used for a variety of things, but it has it's origin in one objective: creating (X)HTML documents using semantic elements and attributes, as opposed to using presentational HTML.

De Valk, Joost. Opera (2008). Articles>Web Design>Standards>Search Engine Optimization

Microformat Encoding and Visualization

So you have heard about microformats, read the introductory articles, and even bought the book. But now you are probably thinking "great - I have done my part to make the web a better place by adding microformats; what's next? What can people do with my data besides add it to their address book or calendar?" The intent of this article is to get you to think about microformats in different ways, and to demonstrate some interesting visualizations and mash-ups of microformatted content.

Suda, Brian. Opera (2008). Articles>Web Design>XML>Metadata

Location-Based Publishing and Services

In this article, we'll look at ways that you can geocode your content, using data formats such as the location nanoformat, GPX and combinations of geocoded microformats in HTML.

Rose, Premasagar. Opera (2008). Articles>Web Design>Metadata>Geography

Grid Design Basics: Grids for Web Page Layouts

Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don’t think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages.

Grannell, Craig. Opera (2008). Articles>Web Design>Accessibility>CSS

Setting Web Type to a Baseline Grid

This article covers the basics of baseline grids—defined grid areas within which content is placed—and how they can be applied effectively to the web medium. In print, baseline grids are almost mandatory. They ensure the bottom of each line of text—its baseline—aligns with a vertical grid, akin to writing on a ruled piece of paper. With books, this means text is always in the same position on the page. This ensures the gaps between lines of text aren’t “filled” with content showing through from the reverse of any page, thereby making the text easier to read. This advantage isn’t relevant for Web design, but the other major advantage—maintaining a vertical rhythm—is.

Grannell, Craig. Opera (2008). Articles>Web Design>Typography>CSS

How to Add Voice Interactivity to Your Site

This tutorial aims to help you add voice interactivity to your site, with minimal code changes and maximal browser compatibility. Along the way, examples will be provided, and at the end, you will be able to test a fully working, real World, voice-enabled site. This tutorial describes the use of a reusable VoiceXML form. Because the voice capability is included in the browser, you do not need to write your own speech recognition engine or speech synthesizer. This is a great advantage to you and to your Web application users.

Sucan, Mihai. Opera (2008). Articles>Web Design>Accessibility>Voice

Drawing Hilbert Curves with SVG

Hilbert curves are a type of space-filling curve that can be constructed with the SVG polyline element, using a basic design and then aggregating.

Opera (2008). Articles>Graphic Design>Image Editing>SVG

Intelligent Site Structure for Better SEO!

Search engines are one of the most important traffic drivers to sites these days, which is why Search Engine Optimization (SEO) is becoming more and more important. SEO is often thought to be just a set of some technical tricks, and as a professional SEO, I confess to spending a lot of time with clients fixing technical issues. A site's structure though, is just as important. Your site's structure determines whether a search engine understands what your site is about, and how easily it will find and index content relevant to your site's purpose and intent. By creating a good structure, you can use the content you've written that has attracted links from others, and use your site's structure to spread some of that "linkjuice" to the other pages on your site.

De Valk, Joost. Opera (2008). Articles>Web Design>Information Design>Search Engine Optimization

Improve Your Forms Using HTML 5!

HTML hasn't really been updated since HTML version 4 was released back in 1998. However, the WHATWG community has been working on HTML since 2004 and this will hopefully result in some much needed improvements. This article shows some of the new functionality of the proposed form chapter of HTML5: Web Forms 2.

Van Kesteren, Anne. Opera (2008). Articles>Web Design>Forms>HTML5

XFN Encoding, Extraction, and Visualizations

In this article I will take a good look at XFN - the microformat for describing relationships between people. I will look briefly at what it is and the basic markup needed to add the information to your sites, before then going into depth, looking at the benefits you can get from that data by extracting it and using it in different ways. Extracting the data is easier than you think - there is probably a library for your favorite language already! If not, there are also some web services that could do the job that I'll show you below.

Suda, Brian. Opera (2008). Articles>Web Design>Information Design>Collaboration

Making a Cross-Platform AJAX-Based Web Application

I will go through how to make a full-blown widget that uses AJAX technology. It fetches news from a newsfeed source, presents them nicely to you, includes some eyecandy and of course lets you customize the amount of news items, refresh time and which category of news you want to be shown.

Mendoza, Nicolas. Opera (2008). Articles>Web Design>Programming>Ajax

Using Capability Detection

Browser name sniffing, using scripts figure out which browser is used and then provide different content to them, is a widespread practice with a long history. Unfortunately these scripts are usually static, while browsers keep evolving.

Steen, Hallvord R.M. Opera (2008). Articles>Web Design>Personalization>JavaScript

Fonts for Web Design: A Primer

Modern CSS provides web designers with an unprecedented level of control over online typography. Restrictions are still imposed however by the limited number of “common” fonts—those typefaces that are generally available cross-platform. This article looks at the fonts web designers have available to them, and also considers their suitability for various tasks.

Grannell, Craig. Opera (2008). Articles>Web Design>Typography