High Performance CSS code design

In the last few years much emphasis has been placed on web performance issues. Browser vendors have optimized JavaScript engines, JavaScript libraries have been honed, and content delivery has been improved. Unfortunately, CSS has received less attention. Developers have been advised how to optimally transfer CSS files, and instructed to use CSS shorthand, but very little has targeted CSS code itself.

Ms. Nicole Sullivan is among those looking to improve CSS code. She has been promoting “OOCSS,” or “Object Oriented CSS,” her methodology for how to design and refactor CSS 1. She has collected a number of best practices for architecting a CSS framework. The benefits are simple: CSS will perform better, become more modular, as well as being grounded with a consistent API, making it easier to learn and use. This is accomplished by reducing the file size and complexity of our CSS.

While many of these techniques can be considered common practice for experienced CSS programmers, implementing them can be difficult. The art is in analyzing trade-offs and picking the optimal path. That said, these rules are not for everyone, or every site. It all boils down to deciding if the site’s performance gain is greater than the time it takes to learn and use the techniques.

Useful for sites with

• Many pages
• A common visual and structural design
• Critical performance requirements

Less useful for sites with

• A few pages or just one page
• Varying design (possibly “portfolio” or design sites)
• Few performance concerns

So how do we get started? We go hunting for bad code smells. In Chapter 3 of Refactoring: Improving the Design of Existing Code, Martin Fowler and Kent Beck coin the phrase “code smell,” meaning “structures in the code that suggest the possibility of refactoring.” Simply put, we go looking for chunks of code that our intuition tells us could be cleaned. In the chapter heading, Grandma Beck is quoted (then talking about child-rearing), “If it stinks, change it.” We’ll take a more formal approach to finding these code smells, going from easy to difficult. First, we’ll sniff around the CSS selectors, and then move onto the CSS properties. Finally we’ll look for visual design patterns that can direct the structure of our CSS.

Selectors

Selectors are both the easiest place to find code smells in CSS and the easiest to correct. Three big code smells tend to stink up CSS selectors; unused selectors, location-based selectors, and overly specific selectors. Each contributes significantly to increased CSS file size.

Cutting Scheme in Half

The Scheme steering committee has decided to sever the Scheme language into “Large Scheme” and “Small Scheme.” Can we expect the same from Scheme-inspired languages like JavaScript? 🙂

Check-in

Not a technical post, but a personal update. I promised over a week ago.

I’ve been exceptionally busy at work, we’re beginning to finish up a much needed, much discussed by librarians, redesign of PubMed. We’ve put a ton of user interaction effort into this project, as well as a good sprinkling of graphic design (watch out, I even did some parts!) I think people will be really positive about these new changes.

[Just for the record, if someone happens to stumble upon this from the librarian community, yes, release date is still end of summer, and yes, there will be a Beta period, so no need to worry about a short timeline to update your class or instructional slides. We do listen!]

It’s also been exciting that we’ve brought a few new people on board. Always exciting to have new hires, despite the fact that it’s a lot of work… and all of the trainings I have to do.

What else… I’m planning on attending the DelveUI masterclasses this week in Brooklyn. It will be interesting to see what some of the heads of state have to say about the field. I’m a little excited, this masterclass format isn’t the usual boring no-content fluff that you hear at most conferences. I get the feeling that there will actually be code present! My thanks to the lovely Jina “Sushi & Robots” Bolton for the opportunity for the free ticket.

I’ve been reading… way too many things. I’ve been reading Learning jQuery 1.3, jQuery UI 1.6, and jQuery in Action and you’ll see the reviews of those two books very soon. (Can you tell that we’ve switched to jQuery at NCBI?) I’m a little behind with that reading, but I’ve been working hard on other things. Additionally, I went on an Amazon spree, and started reading Programming the Semantic Web, An Introduction to Lambda Calculi for Computer Scientists, To Mock a Mockingbird, 101 Things I learned in Architecture School, Code Complete 2. Last but not least, I’ve also been reading any photography book that I can get my hands on.

Yes, that is a lot of books, and I haven’t had much time for them. I’ve been working hard at work, and I want to relax a bit when I come home. Once summer ends, things will return to a slightly more regular pace. I’ve been learning so much on the job, that I’m not very worried about falling behind in reading.

Review of "Prototype-Based Programming"

I ran across a mention of “Prototype-Based Programming” back when I was first learning JavaScript. I thought it would be an interesting read, but forgot to bookmark it, and forgot to look into it further. Once I finally remembered it, it proved hard to find (and an expensive gamble from Amazon), until I found it through NIH’s interlibrary loan system.

I was quite excited to get my hands on a copy of this book, I was interested in learning more about the general theory that went into languages with prototypal inheritance. I thought this would allow me a special insight into JavaScript. However, as I found reading it… despite it’s 1999 publication date, JavaScript wasn’t even mentioned in the book! Regardless, I found parts of it to be quite interesting and insightful.

The book is broken up into three sections (as mentioned on the cover), Concepts, Languages, and Applications. Each section has 4 associated chapters which are really various papers, some of which seem to be difficult to find elsewhere.

The first section, “Concepts” was the most interesting. The first was titled “Classes vs. Prototypes: Some Philosophical and Historical Observations.” This chapter provided a nice introduction to the topic, including the history of classification, going back to Aristotle and proceeding to Ludwig Wittgenstein who had an interesting example about classifying the characteristics of an item as simple as a “game”. It goes on to transition to a programming perspective. A point that is made repeatedly throughout many chapters that the idea of classical inheritance necessitating construction from the top (superclasses) to the bottom (subclasses) is inherently contradictory to the way humans think. When unfamiliar with a domain, a person can more easily deal with concrete examples, and only discern the abstract general form after discovering these patterns in the concrete cases. Though unable to put my finger on this idea, I’ve experienced it a number of times when programming myself, and couldn’t agree more.

The next chapter, “Classifying Prototype-based Programming Languages” sought to categorize the theoritical aspects of different prototypal languages. This is the chapter where I most missed the reference to JavaScript, but I may look into doing that myself some other day. “The Stripetalk Papers: Understandability as a Language Design Issue in Object-Oriented Programming Systems”, made an argument that prototype based systems could be used to enhance the learnability of languages. Finally, the chapter “Classes versus Prototypes in Object-Oriented Languages” looked at the advantages and disadvantages of class-based and prototype-based languages. This chapter was quite interesting, however brief.

Review of "Expert Python Programming"

Based on the title, Expert Python Programming, (by Tarek Ziadé) I had expected a book covering the Python language… syntax, advanced data structures, maybe some functional programming… stuff like that. This book surprised me. Rather, it contains a hodgepodge of information about the world of Python development, from setting up editors to distributed version control to application distribution. “Expert Python Programming” does contain some information on the Python language itself, but not as much as I would have hoped. While it does contain a good amount of useful information, overall, I’d have to say that it misses the target.

Quickly summarized, the book contains 3 chapters on package management and distribution, 2 on syntax, 2 on optimization, and one each on language setup, naming conventions (style guide), version control, project management, documentation, test-driven development, and design patterns. Based on the content, I might have titled this book “Expert Python Development Practices”, and think I would have been happier reading it in that case. The discrepancy between the title and the content is especially bothersome to me, since it would be easy to assume this book focused specifically on programming, rather than code management.

Expert Python Programming’s greatest asset is the number of tools and utilities that it covers. As a mostly casual Python programmer, there were a number of things that I learned, especially with regard to package management and distribution. I’ve never needed to build a package, and never used Atomisator or zc.buildout before, so I found these chapters rather interesting (though not personally useful at the moment). To be sure, when I need to use these, this book will the be the first place I come.

I was familiar with a decent amount of the information in the documentation, test-driven development, and style-guide chapters from reading some of the Python Documentation and a few of the PEPs (Python Enahncement Proposals). These chapters would be good for anyone who doesn’t want to have to go and search for this information on their own, and I think it would be rather handy to have all of this information in one place.

The weakest part of the book were the chapters focusing on Python itself. The majority wasn’t anything particularly groundbreaking here that I haven’t read elsewhere, while the interesting sections, such as “How Python Deals with Memory” and “Multithreading” were short and not particularly detailed. The sections on optimization were nice, but limited.