In Defense of Descendant Selectors and ID Elements

Jeffrey Zeldman:

In this particular (and rare) circumstance, where dueling developers have added rule after rule to a huge, shapeless style sheet that is more of an archeological artifact than a reasonable example of modern code, Nicole’s admonition to avoid descendant selectors based on id is probably wise. If you have the misfortune to work on a huge, poorly developed site where you will never have permission to refactor the templates and CSS according to common sense and best practices, you may have to rely on class names and avoid descendant selectors and ids.

But under almost any other circumstance, properly used ids with descendant selectors are preferable because more semantic and lighter in bandwidth.

The old dog is back to stir the pot again.


Prototype iPhone apps with simple HTML, CSS and JS components.

Built by Dave Gamache, Connor Sears, and Jacob Thornton who all worked at Twitter once upon a time…

Using Sass source maps in WebKit Inspector

Lennart Schoors:

If you’re using Firefox and Sass you might have heard about FireSass, but Chrome users have been out of luck until recently. This is where source maps come into play. Source maps are a language-agnostic way of pointing your inspector to the right location in your unminified and uncombined files. Originally devised for JavaScript, they can equally be applied to CSS preprocessors.

A fairly recent commit enabled experimental support for Sass source maps in Chrome, so make sure you’re running at least Chrome 24.

Awesome! Well, thats if you are into the CSS preprocessor world.

The Infinite Grid

Chris Armstrong:

Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today we’re designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment—a medium capable of displaying a single layout on a smartphone, a billboard in Times Square, and everything in between.

We’re designing for an infinite canvas—and for that, we need an infinite grid system.

Cracking read!

Contrast Ratio Tool

Lea Verou:

I was always interested in accessibility, but I never had to comply with any guidelines before. At W3C, accessibility is considered very important, so everything we make needs to pass WCAG 2.0 AA level. Therefore, I found myself calculating color contrast ratios very frequently.

There are plenty of tools out there for this. However, I found that my workflow for checking a contrast ratio with them was far from ideal. I had to convert my CSS colors to hex notation (which I don’t often use myself anymore), check the contrast ratio, then adjust the colors as necessary, covert again etc. In addition, I had to adjust the lightness of the colors with a blindfold, without being able to see the difference my adjustments would make to the contrast ratio. When using semi-transparent colors, it was even worse: Since WCAG only describes an algorithm for opaque colors, all contrast tools only expect that. So, I had to calculate the resulting opaque colors after alpha blending had taken place. After doing that for a few days, I got so fed up that I decided to make my own tool.

You can read more about the Contrast Ration tool on Lea’s blog.

I absolutely dig how Lea just builds, builds, builds. Go Lea!

Epic list of Frontend Development Tools

A great collection of tool for frontend development by Cody Lindley. The list covers coding tools, references, guides, pollyfills, generator tools and performance links. All that is missing is a newsletter section… — Your Web, documented

Web Platform Docs is a new community-driven site that aims to become a comprehensive and authoritative source for web developer documentation. Even though Web Platform Docs is still in alpha, you can already find lots of valuable content on the site, including information on:

  • How to use features of the open web, with syntax and examples
  • What platforms and devices you can use various technologies on
  • What is the current standardization, stability and implementation status of each technology specification

In the future, Web Platform Docs will include even more content for you to explore such as live code examples, resources for educators and much more.

If you want to get involved in making the documentation better, just sign up, it’s super easy.

Responsive Web Design Makes It Hard To Be Fast

Guy Podjarny:

I like Responsive Design. Heck, I LOVE Responsive Design. I think it’s a brilliant methodology, which address true challenges in a very good way. But no matter how fond you are of RWD, I think you have to face the music – RWD makes it very hard to write a fast website.

I’m not saying you can’t write a high performance responsive website. I’m not saying you shouldn’t use RWD (Responsive Web Design) – I would actually recommend it to most organizations. However, RWD makes pages inherently more complicated, and all in all would make the mobile web slower.

The Web Behind

John Allsopp joins Eric Meyer and Jen Simmons for the first episode in The Web Behind series. The idea is to take a look back at where the web came from and the people who created it.

I think this is a really great idea for thinking forward. It’s a strange way to look at it, but if we don’t document the history there is no way we can learn from our mistakes. History is as important as the future.

Get behind The Web Behind. It’s good for the web.

Backstage: Basecamp for mobile

Jason Zimdars:

Today we’re announcing mobile web because it’s the right thing to do. Devices and platforms will come and go, but the web browser is here to stay. Does this mean there will never be native apps? Of course not, this isn’t our final word on mobile.

Once again, 37 Signals continue to deliver the goods.


Yeoman is now available. It’s an opinionated set of tools aimed at improving your workflow and productivity in building web apps.

CSS-Tricks – v10

Huge congratulations to Chirs Coyier with the redesign and the roll out of ‘The Lodge’. If you didn’t get behind his Kick Starter project, head over and signup now!

There is no such thing as CSS4

Tab Atkins:

The term “CSS3” refers to everything published after CSS 2.1.

CSS is on its last version as a language as a whole, so it would be appropriate to just drop the number entirely and refer to everything from now on as just “CSS”.

The Flowing Standard

Robin Berjon joins the WC3 staff to work on HTML full time and the HTML Working Group has also moved development of its various specifications to a GitHub repository.

Robin Berjon:

For all that the HTML adventure may be fun to watch with some popcorn though, one of my hopes is that heading forward all parties in the HTML community can move towards more effective debates about focused technical issues while resolving sources of dissent. In other words: less drama, more work.

Over the coming weeks we will be detailing the way in which this repository is organised and used. The current plan revolves around adapting the well-known git flow model to specification development. Git’s flexible and powerful branching model allows us to maintain multiple branches, some headed for stabilisation in view of a tested and reviewed release, others carrying more future-fetching features; this while remaining able to apply bug fixes across the board.

I’m not a big fan of reading and keeping up to date with the ugly mailing lists that the W3C use. Thankfully, the GitHub news feed is more appealing. A big win in my eyes.

HTML5 Boilerplate v4.0.0

The web’s most popular front-end template just hit version v4.0.0.

The site has had a major refresh. The latest version of jQuery is included. Same goes with the inclusion of the latest Modernizr and lots, lots more. Huge congrats to all involved.


Jeremy Keith:

Apparently the display guideline requirements do apply to me. If I want to quote a tweet on my website, I’m supposed to use the embed code to make sure that people can favourite / retweet / follow, etc.

Fuck. That. Shit.

If I want to quote something from another URL, I will do it. I’ll use a blockquote element of course, but I will not be told what markup and JavaScript I must include on my site.

The faith that the web development community has in Twitter seems to be flying away rather quickly.

CSS-Tricks Chronicles

Chris Coyier is starting a new weekly roundup on his blog about all the relevant happenings around his main site CSS-Tricks site and the stuff he’s been doing.

Bring on Vol. II.

Twitter Bootstrap 2.1.0 released

Twitter Bootstrap Blog:

New docs, affix plugin, submenus on dropdowns, block buttons, image styles, fluid grid offsets, new navbar, increased font-size and line-height, 120+ closed bugs, and more. Go get it.

Understanding technical debt

Nicholas C. Zakas:

In the worst case, tech debt can accumulate to the point where the web application is destined to fail. A classic tech debt issue is scalability. Initially, the goal is to get the web application up and running so that anyone can use it. Decisions are made to allow that to happen. But an app that can handle 100 users isn’t built the same way as an app to handle 1,000,000 users. In the back of the developers’ minds are a list of things that need to happen in order to scale out: hit the database less, implementing several layers of caching, reduce the size of responses, figure out a faster way to process orders, and so on.

Just like monetary debt, tech debt is best dealt with before it gets too large and overwhelming. Regularly tending to tech debt is a process I like to call code hygiene. If you don’t go to the dentist for ten years and then finally go, chances are you’ll be in for a nasty surprise by not practicing proper dental hygiene. Code hygiene is the same. Keeping on top of your tech debt means regularly going in and addressing what you can with the time available.

Great article to pass onto your manager.