Let's Build the Web We Want
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.
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.
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: FreeRob 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.
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.
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 thing we’ve been experimenting with at work is using multiple headers on a page. The pattern looks like this:
Continue reading “How To Make a Web Site the Modern Way. Part 11: The New HTML5 Elements”
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,headerandfooter.
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.
Forms. Forms are boring. 75% of all work you do with forms is exactly like all the rest of the work you do with forms. BO-RING.
But, they’re the gateway to making real money on the web, so they’re kind of important.
Hopefully, after today you’ll know all about forms and will love them.
Let’s take a look at our example form:
<form action="http://www.drunkenfist.com/304/wp-comments-post.php" method="post" id="commentform">
<fieldset>
<legend>Contact Info:</legend>
<p>
<label for="author">Name (required)</label>
<input type="text" name="author" id="author" value="" tabindex="1" />
</p>
<p>
<label for="email">Mail (will not be published)(required)</label>
<input type="email" name="email" id="email" value="" tabindex="2" />
</p>
<p>
<label for="url">Website</label>
<input type="url" name="url" id="url" value="" tabindex="3" />
</p>
</fieldset>
<p>
<label for="comment">Comments</label>
<textarea name="comment" tabindex="4"></textarea>
</p>
<div class="button">
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
</div>
</form>
This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then.
Continue reading “How To Make a Web Site the Modern Way. Part 10: Forms”