Curing DIV-itis with Semantic HTML, CSS and Presenters

John Athayde (LivingSocial)
General
Location: Room 309- 310
Average rating: ***..
(3.80, 102 ratings)

In the world of web standards, semantic markup is one of those nebulous things that is often blogged about and oft forgotten in the throes of birthing a web application. Semantic markup is using HTML elements for what they are intended (e.g. a ul for a list instead of a div class=“list”). Not only does this make rendered documents easier to read from a hierarchy perspective, but it helps with search engines and reducing code.

In the last year since I’ve joined the staff at InfoEther, we’ve refactored a few sites that have come through, in many cases reducing some Rails partials from 80 lines of code down to 20. That partial was a list with a loop in it for a top-ten list. So, once processed, it rendered out to about 600 lines of code. After cleanup it came out to rendering out less than 100.

We’ve also utilized the Presenter pattern to take elements that occur regularly and remove them to presenters. CSS elements and stylesheets generated from Ruby, Navigation items that are added with one line of code and a few images, easy setup wizards, and more.

All these things can create better sites that run faster and are easier to work with.

Photo of John Athayde

John Athayde

LivingSocial

John is a interface and experience designer as well as programmer, filmmaker, musician, and occasional troublemaker. Prior to his current role at Northern Virginia’s Ruby on Rails consultancy, InfoEther, he ran the DC based UI/UX shop “Hyphenated People” with Amy Hoy. He also ran a 15 person creative team at a large e-commerce shop for two years. He released a short animated film, “The Sandbox”, with his company Meticulous in 2005. When he’s not emotionally attached to a website, he can be found performing in his band, Juniper Lane, or working on 3d animation and electronic music. He holds a Masters degree in Architecture (the building variety, not the information kind) from Catholic University of America. He takes entirely too many pictures of his cat.

Comments on this page are now closed.

Comments

Picture of John Athayde
John Athayde
06/10/2010 10:58am EDT

Cleaned up the slides and reuploaded today. Also wanted to give a shout out to Ryan Bates and Railscasts where I first learned about the CSS unused selectors firefox plugin and the deadweight gem. It’s episode 180.

Picture of John Athayde
John Athayde
06/10/2010 10:12am EDT

I had mistakenly stated that Marcel Molina, Jr. had created the presenter pattern in this talk. It appears it was actually Jay Fields: blog.jayfields.com/2007/03/.... I had first heard about it when Marcel spoke about it, and had associated him with it’s creation.

Picture of Shirley  Bailes
Shirley Bailes
06/09/2010 5:47pm EDT

@Chris: there’s a link above to the PDF

Chris Johnson
06/09/2010 5:41pm EDT

Slides?

co-presented by Ruby Central, Inc. O'Reilly
  • Engine Yard
  • Heroku
  • 8th Light
  • Blue Box Group
  • InfoEther
  • JetBrains
  • New Relic
  • Open Hosting
  • Rhomobile
  • WyeWorks
  • Linux Pro Magazine
  • Chargify

Sponsorship Opportunities

For information on exhibition and sponsorship opportunities at RailsConf, contact Yvonne Romaine at yromaine@oreilly.com.

Download the RailsConf Sponsor/Exhibitor Prospectus

Media Partner Opportunities

For information on trade opportunities with O'Reilly conferences or contact mediapartners@ oreilly.com

Program Ideas

Send us your suggestions for speakers, topics, and activities to rails-idea@oreilly.com.

Press and Media

For media-related inquiries, contact Maureen Jennings at maureen@oreilly.com.

RailsConf Newsletter

To stay abreast of conference news please sign up for the RailsConf newsletter (login required)

Contact Us

View a complete list of RailsConf 2010 contacts.