はてなブックマーク

I recently spoke at JSConf about my experience working with Trulia to create a living style guide. The goal for the project was to improve performance, team velocity, and also to have a more consistent design. It was such a fun project (because their engineers were great to work with) and also successful on all three fronts. Here are some of the metrics for the data-lovers: Their HTML is 48% small

I was helping Laura (a developer who works with me) learn about cross-browser debugging this week, which got me excited to share my process. The first principal is simply: Work with CSS, not against it. CSS has an underlying design and when you work with it, with the natural flow of how CSS is meant to be used, you will find you have a lot less bugs. I learned CSS by reading the W3C specifications

Styling headings is either a deceptively complex problem, or maybe the design of CSS made it appear complex when it need not have done. When styling headings (or really anything) we want three big goals to be met: DRY – Do not repeat yourself. We want to set headings once and never (ok, rarely!) repeat those font styles or selectors. This will make our site easier to maintain. Predictable – The he

Another day, another melodramatic blog post title. 😉 I was prepping to speak at Webstock this year when I realized I didn’t want to give the talk I had proposed. I didn’t want to talk about the Mistakes of Massive CSS, because I realized it went deeper than that. In fact, in most cases, the things we considered best practices were leading to the bad outcomes we sought to avoid. I realized (unpopu

CSS 3 is full of ways to reduce our dependence on background images, one of which is pure CSS gradients. They have several features, which I’m sure designers are salivating over, like multiple color stops, and angled, radial, and linear gradients. Many people had built cool designer-focused tools to make interacting with a somewhat confusing gradient syntax a little easier. The issue for me has be

Last week, Stoyan Stefanov and I spoke at Velocity Conference about optimizing massive CSS. We talked about our experiences optimizing large-scale sites like Facebook and Yahoo!, and we discussed our findings regarding the CSS efficiency of the Alexa Top 1000 websites. Velocity was kind enough to share videos of the session: What is the state of the internet regarding CSS performance? Kind of sad.

What is the internet made of? At least the UI layer is mainly composed of media blocks. I talked about the Facebook stream story before, and all the tiny objects of which it is composed. For the most part, the stream story is made up of the media object repeated over and over. The media object is an image to the left, with descriptive content to the right, like this Facebook story: The media objec

How to create CSS objects? Get the granularity right! In a previous post, I said: Shoehorning CSS and HTML into PHP abstractions prevents the code from being DRY and ultimately leads to code bloat, because, the CSS and HTML require a far more granular object structure than the PHP. And then I didn’t expand on it, or give proper context. Ooops, sorry! Correct granularity is one of the keys to tiny

The web stack (simplified) between you and your users On the last day of TXJS, a developer asked me: Doesn’t Object Oriented CSS leave you with a pile of presentation based class names? Each layer in the web stack has its own architecture. You wouldn’t expect the DB schema to be used to architect the PHP middleware, and yet people expect that of the HTML and CSS. HTML needs to be written with a

Overflow does some cool things you should know about. Creates Block Formatting Context Clears Floats Generating block formatting context Arnaud Gueras called this “contexte de formattage” years ago, and I was kind of surprised when I moved back to the US how few developers here had heard of this “secret weapon”. When the overflow property is set, a new block formatting context is created. What doe

Yahoo! Developer Network has released a video of my Object Oriented CSS talk at Web Directions North just in time for Ada Lovelace day. I’ve also been included in a feature on Women in Technology. I’m absolutely flattered to be included among these fantastic technical women. Wow. Object Oriented CSS: for high performance websites and web applications. Find out more about object oriented css Open s

Reflows & Repaints: CSS Performance making your JavaScript slow? I’ve been tweeting and posting to delicious about reflows and repaints, but hadn’t mentioned either in a talk or blog post yet. I first started thinking about reflows and repaints after a firey exchange with Mr. Glazman at ParisWeb. I may be stubborn, but I did actually listen to his arguments. 🙂 Stoyan and I began discussing wa

How do you scale CSS for millions of visitors or thousands of pages? Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites. I recently presented Object Oriented CSS for high performance web applications and sites at Web Directions North 2009. If you d

Yesterday, I wrote about how I reason about developer needs and the kinds of data I take into account. Unsurprisingly, many of you wondered what kind of twitter polls I was talking about. Between 100 and 2000 developers answered most of these questions. BIG CAVEAT: twitter polls have issues like no demographics info, audience bias,… I’m hearing on twitter, mastodon, and other social networks that