Front End Performance for the Common Man: Practical Strategies to Speed Up Your Site

by Rob Larsen

Front End Performance for the Common Man: Practical Strategies to Speed Up Your Site from rob larsen on Vimeo.

Follow along with the presentation. (PowerPoint presentation)

Here’s the sample ant build script referenced in the deck. (Zip file)

And here’s the article mentioned in one of the early slides:
Why Front End Performance Matters to Everyone, Not Just the High Traffic Giants

Downloads From Last Night’s Presentation

by Rob Larsen

I presented at Bocoup last night. It went really well. As always great people showed up and I think I did okay with my side of the bargain. I shot some video, we’ll see how that turns out. If it’s of reasonable quality I’ll be sure to share.

For anyone interested, here are a couple of downloads from last night.

Here’s the deck.

And this is the sample ant build script referenced in the deck.

I’m going to write up the build script in a little bit more depth some time over the next couple of weeks.

Reminder- I’m Presenting on Front End Performance Next Week (May 19)

by Rob Larsen

I’m in the middle of finishing up my presentation, so I figured I might as well make an effort to get some people to show up to see the results of my hard work :)

Here’s the write up:

Front End Performance for the Common Man: Practical Strategies to Speed Up Your Site

Day: Wednesday May 19th 2010
Time: 6:30pm – 8pm
Cost: Free

Rob Larsen will examine the core concepts and techniques behind the performance of the web’s fastest sites and will translate them into practical examples. This talk will cut across several technologies (JavaScript, CSS, Ant, Apache and more) to present a suite of tools any developer can use to speed up their site- no matter the size or budget. RSVP to The Event Page.

It’s going to be a really good talk- full of practical examples and advice for every flavor and level of web developer. You should totally go.

How To Make a Web Site the Modern Way. Part 11: The New HTML5 Elements

by Rob Larsen

I promised one last post on HTML elements. This is it. This one will be a quick tour through some of the new semantic HTML5 elements. I’ve been using them regularly for a while now and I’m still trying to wrap my head around the best way to use some of them (in this, I’m not alone.) Hopefully sharing what I’ve learned will help jump start your own work with the new stuff and will help my clarify my own thoughts on the new elements.

This should really be fun.

header

This is one of the most straightforward of the new elements. <div id="header"> becomes <header>. Done. When I’ve presented on HTML5 people just nod when I point this element out. Hopefully this one just makes sense.

One experimental note

One thing we’ve been experimenting with at work is using multiple headers on a page. The pattern looks like this:
Read the rest of this entry »

In Case You Missed It:

by Rob Larsen

I started doing some writing for Isobar/Molecular.

My first post:

An Introduction to HTML5

HTML5 is the latest version of the language that serves as the foundation of the web. It’s the first major revision in over 10 years and as it’s gotten closer to its final form and more and more browsers begin to implement its features it’s become a source of intense interest and contention in the technology community. This article hopes to explain the realities of HTML5, dispel a couple of myths and shine some light on the future of the web.

To begin we’ll need to define what we’re talking about when we say “HTML5.” There is a specification to refer to and much of what falls under the HTML5 name lives in that spec. In addition, there are several related specifications and APIs that are lumped together and called “HTML5″ when people talk about these things informally.

So, conversationally, HTML5 consists of the following:

New Semantic Elements

HTML5 has introduced several new elements. They aim to introduce more meaning to markup and codify existing web development patterns. Some examples of these new elements are nav (for navigation), article, header and footer.

Read the rest of this entry »

I also added a few bits and bobs to our our front-end development best practices, a doc which has been making the rounds a little bit over the past week.

Check ‘em out.