Skip navigation

Web standards

warning: Creating default object from empty value in /var/www/vhosts/ on line 33.

Form Follows Function. Image: Screenshot.

If you’ve been missing the early days of HTML5, back when experimentation, not stolid, functional sites was the name of the game, we’ve got a site for you: Form Follows Function.

Form Follows Function is a collection of interactive experiments built using HTML5 elements like Canvas and CSS 3 tools like 2-D/3-D transforms. Experiments include growing trees with the click of the mouse (or touch of a finger, depending on your device), dragging waves and 3-D cans of Campbell’s soup. Even the rotating menu of the experiments is impressive.

The site is the brainchild of developer Jongmin Kim, whose design work has previously garnered a Webby award.

Fun thought experiment: Imagine taking this site back in time, showing it to your 2002 self and then pointing out that it’s all built with web standards, no Flash involved.

While we really like Form Follows Function it does fall prey to the main reason we don’t really miss the early days of HTML5 and CSS 3 all that much — it doesn’t use CSS prefixes properly. Form Follow Function optimizes for Firefox and Chrome while ignoring Opera and Internet Explorer; a shame, considering how well done the rest of the site is.

Your rating: None

HTML5 Logo

Today, the Worldwide Web Consortium (W3C) is announcing that it’s completed its three-year quest to finalize the HTML5 specification. As the W3C says in its press release, "HTML5 is the cornerstone of the Open Web Platform," the cross-platform programming environment usually referred to by the umbrella term "web standards." HTML5 and related technologies like JavaScript and CSS provide a way to write rich web applications designed to run on any device that follows the specifications, and many companies are hitching their futures to the platform’s success. But despite the fact that the specification is now feature complete, meaning nothing more will be added to it, there is still a lot of work that needs to be done before HTML5...

Continue reading…

Your rating: None

The W3C, the group that oversees the development of HTML and other web standards, is moving beyond dry, boring specifications with a new venture into developer documentation. The W3C has just launched an alpha preview of Web Platform Docs, a community-driven site the W3C is hoping will become the go-to source for learning how to build the web.

In other words the W3C is competing with Webmonkey.

We’re okay with that because there’s no such thing as too much high-quality, accurate info on the latest in HTML5, CSS 3 and other W3C standards. And quite frankly, HTML and CSS have grown considerably since the days when Webmonkey’s cheat sheets could tell you everything you needed to know.

Now there’s a plethora of resources for learning how to build the web — the Mozilla Developer Network, the Opera Developer Network and Microsoft’s developer site, to say nothing of the thousands of tutorials on developer blogs. But while there’s plenty out there to teach you what you need to know, finding exactly what you need to know can be challenging. You’re a web developer; you should spend your time building a better web, not searching Google for accurate info on web standards.

The goal of the W3C’s Web Platform Docs is twofold: get tons of great documentation all under one roof, and then — the most challenging part — make sure that it stays up to date. Solving the second problem is no small task. The web is currently littered with great tutorials on CSS Flexbox, which are, unfortunately, all wrong now that the Flexbox spec has been changed. The same is true of Web Sockets tutorials, Indexdb tutorials and any other tutorial on a spec that has changed or might change in the future.

These days keeping up with the rapidly changing world of web standards is a full-time job and who better to tell you what’s going on, how you can use new tools and when browsers will support them than the people actually writing standards and building browsers?

The W3C has managed to bring together some of the biggest names on the web to help create Web Platform Docs. Representatives from Opera, Adobe, Facebook, Google, Microsoft, Mozilla and Nokia will all be lending their expertise to the new site.

While the list of participating companies is impressive, Web Platform Docs is also a wiki that anyone, not just W3C reps, can edit. As the W3C’s Douglas Schepers tells Webmonkey, “anyone can contribute and everyone is on equal footing.”

If your head is bursting with tutorials, code snippets, examples or solutions to common development problems, head on over to the site and sign up so you can contribute. Bear in mind that this is an alpha release. While the site looks great and has the basic features of a wiki up and running, many of the features Schepers mentions in the intro blog post aren’t available just yet. “In the spirit of ‘release early, release often’, we decided to announce the site at the earliest possible point and improve it in public,” writes Schepers.

Right now the content of the site is primarily documentation, but the plan is to include tips and best practices along with up-to-date information on standardization progress and browser support for individual features. Other cool planned features include a way to share code snippets and an API for some aspects of the site.

For an overview of the site and to learn a bit more about where the W3C plans to go with Web Platform Docs, check out the video below.

Your rating: None

CSS1K: light on the file size, heavy on variety

When the web standards movement first began to take off years ago one of its primary advocates, Dave Shea, launched CSS Zen Garden to showcase what designers could do using only web standards. CSS Zen Garden proved a huge hit, drawing hundreds of contributions from web developers around the world.

The web has changed considerably since the heyday of CSS Zen Garden. Today we can do just about anything using web standards like HTML and CSS, but now there’s a new problem — websites are getting fatter, as much as 25 percent fatter in the last year alone. Much of that added weight comes from JavaScript, but CSS shares some of the blame. According to HTTP Archive, the top 1,000 sites on the web load an average 30KB worth of CSS.

Inspired by CSS Zen Garden and driven by a desire to showcase what can be done with a mere 1KB of CSS, Jacob Rask, a web developer at Opera Software, created CSS1K about six months ago. Since then the site has showcased 68 different designs, all with stylesheets under 1KB.

The site is modeled on CSS Zen Garden, with a fixed set of HTML tags and content. Using that HTML base designers can then bend the basic frame to whatever look they’ve come up with — provided the total minified size of the CSS file is only 1KB.

Call it an effort in minimalism if you like, or simply think of it as a design constraint; either way designs submitted to CSS1K demonstrate just how much is possible with very little CSS. While no one is suggesting every website needs to be so constrained, playing with CSS1K is a nice reminder that you don’t always need huge stylesheets to create a nice-looking website.

If you’d like to participate in the CSS1K fun just fork CSS1K at GitHub and send your submission as a pull request. There is essentially only one rule — you can’t use data URIs, @font-face or @import statements to skirt the 1K CSS filesize limit. Note, however, that your 1K CSS file can be minified and any browser prefixes you need don’t count toward the total (in fact, you submit your code unprefixed and CSS1K adds the prefixes for you). For the full details and file requirements, head over to CSS1K.

Your rating: None