All posts tagged ‘tutorial’

File Under: CSS, Programming, Web Basics

Learn to Code by Watching Others Write It

Stopwatch in CSS 3, no JavaScript necessary. Image: Screenshot/Webmonkey

Five years ago the hotness in web development was showing what you could create without resorting to Flash. Now it seems the same is true of JavaScript. While we’ve nothing against JavaScript, the increasingly powerful tools in CSS 3 mean that JavaScript is no longer a necessity for building cool stuff on the web.

The latest JavaScript-free demo we’ve run across is this very cool stopwatch demo made using only CSS 3, no images or JavaScript necessary. Now before you dive into the code and get all Karl Van Hœt on us, yes, there is a script used to handle CSS prefixing, but the actual stopwatch doesn’t require it to work.

But what caught our eye even more than the JavaScript-free stopwatch demo is the tutorial that accompanies it. The tutorial — which is one part screencast and one part code dump — is part of Code Player, which helps you learn how to do things by showing you the code as it’s written. It’s an interesting tutorial method, one we haven’t seen before.

Watching code being written isn’t for everyone, especially beginners who might not be able to easily follow what’s happening, but it’s well suited to those that already understand the basics and just want to see how some particular function was written. It also provides an interesting look at how other developers work, which in turn might teach you a new trick or two.

The Code Player offers a variety of playback speeds depending on how fast you want to run through the tutorial, and there’s a timeline scrubber for pausing and rewinding any bits you miss. Our only complaint is that Code Player forces focus in the browser; when you try to click another tab or do something in the background Code Player steals focus back immediately.

If learning something new by watching someone else type sounds intriguing, head on over to the Code Player site. And don’t worry if the stopwatch demo has no appeal for you, there are plenty of other tutorials to choose from.

Microdata: HTML5′s Best-Kept Secret

Given the amount of industry noise about native video and scripted animations, you’d be forgiven if you had never heard of the new microdata specification included in HTML5.

Similar to outside efforts like Microformats, HTML5′s microdata offers a way of extend HTML by adding custom vocabularies to your pages.

The easiest way to understand it is to consider a common use case. Let’s say you want list details about a business on your page — the name, address, telephone number and so on. To do that you’ll need to use some vocabulary in addition to HTML, since there is no <business> tag.

Using microdata, you can create your own custom name/value pairs to define a vocabulary that describes a business listing.

When a search engine spider comes along, it will know that not only is your data a business listing, but it can discover the address, the phone number, or even the precise geo-coordinates if you want to include them.

Given that HTML5 is still a draft at this point, why bother?

Actually, despite its lack of publicity and HTML5′s still-incomplete status, microdata is already being used by Google, which has started adding information gleaned from microdata markup to its search result snippets.

Continue Reading “Microdata: HTML5′s Best-Kept Secret” »

Embed Videos In Your Web Pages Using HTML5

HTML5 video is taking the web by storm.

Not only has a very public (and contentious) debate unfolded on the web about the efficacy of presenting videos using HTML5 instead of Flash, but momentum is gathering behind the nascent web standard.

From giant video sites like YouTube to Wikipedia, everyone it seems wants to get their video out of Flash and into native web formats. With Microsoft recently announcing it will support the HTML5 video tag in the coming Internet Explorer 9, expect even more sites to abandon Flash for native video.

So, you want in on the fun? Do you want to use some HTML5 video tags on your site right now? No problem. Fasten your seat belts, as we’re about to take a tour of the wonderful world of HTML5 video.

Continue Reading “Embed Videos In Your Web Pages Using HTML5″ »

File Under: Ajax

Ajax for Beginners

JavaScript has had the XMLHttpRequest object for almost a decade now, but it really only started getting wide attention in 2004. All this attention was mostly due to some showoff web applications that made every developer who saw them think, “I want my site to do that!” But it also has to do with the spiffy, spiffy name given to it by the folks at AdaptivePath, who named this asynchronized application Ajax. Maybe you’ve heard of it?

A few high-profile Google applications in particular made a splash with Ajax: Maps and Gmail were first. It also powers some of the core functionality in the user interface of the ever-so-popular photo sharing site Flickr. By now, Ajax has become integral to the fabric of the web, especially in the era of real-time applications like Twitter, Buzz and Wave (all of which use Ajax extensively in their webapp front ends, for the record). Ajax may also lay claim to being the first JavaScript object with its own fan website. Date.com doesn’t count, although I did have a scintillating chat with a lady there once about the getTimeZoneoffset method.

Continue Reading “Ajax for Beginners” »
File Under: CSS, HTML

Web Standards for Beginners

In the beginning, all we had were hacks.

To lay out web pages the way our clients wanted, with pull quotes, text wrapping, multi-colored table cells with space between the rows (but not the columns), then we had to hack, hack, and hack some more. Our hacks resulted in some impressively gargantuan code:enormous, indecipherable, triple-nested tables up and down the page, each with its own border, padding, spacing, and alignment settings, packed to the rafters with bloated font tags. But what could we do’

It wasn’t our fault we had to build these monstrosities; all we had to work with was HTML, a markup language created by a British software consultant in his spare time to enable scientists in Switzerland to share information about particle physics! I mean, come on! HTML was designed to display plain text in a hierarchical manner, period — no images, no three-column layouts, no multi-color fonts. It was never intended to create the magazine-like layouts we see on the web today.

But that’s what our clients paid us for, and so we hacked.

And as if that weren’t bad enough, the browsers we were developing for all rendered our code differently, leading to more hacks and more bloated pages as we strove for “cross-platform compatibility” (the day my producer learned that term was a dark day indeed).

Well, the kind souls at the World Wide Web Consortium have taken pity on you, poor Web developer, and in their infinite wisdom have formulated a solution that’s so beautiful in its simplicity, so beneficial for all parties involved (developer, client/boss, user), that you’ll break down and weep like Tammy Faye on a Sunday when you realize how much easier things are about to get for you.

The solution? So, so simple: web standards.


Continue Reading “Web Standards for Beginners” »