Stubbornella - Nicole Sullivan

Usually I avoid topics like women in technology because (1) it is a can of worms, and (2) I can really only speak for myself. For the most part, I’d rather be seen as a person in technology than a woman, but this weekend the twitterverse erupted with opinions about Google sponsoring female students to attend JSConf. As a woman who is often the only-woman-in-the-room, I want people to know it isn’t always easy. I was a bit shocked by the blatant failure to empathize.

After conducting a thorough study on the status of female researchers at MIT. The Dean said:

The heart and soul of discrimination, the last refuge of the bigot, is to say that those who are discriminated against deserve it because they are less good.
Dean Robert J. Birgeneau, Dean of Science at MIT

He says it beautifully. Discrimination now rarely takes the form of some guy saying “hey little lady, shouldn’t you let a man handle that?” It is much more subtle, but just as ugly. These days, bright, thoughtful, enlightened people assume that the absence of women in certain fields results from women being unable to compete on merit. The assumption that, if someone creates a scholarship for women, it is because otherwise, women can’t hack it.

I would argue that there are female developers who are just as good as men, if not better, but despite that, they are less likely to stay in school, stick with engineering jobs, speak at or even attend conferences, and be recognized for their contributions. The problem compounds itself as women see no role-models for how to be a woman in this field, and only the very thick-skinned manage to stay in engineering and web development.

Why is computer science a sausage fest?

I believe CS and Web Development currently select for certain masculine qualities that are largely unrelated to someone’s prowess as a coder.

Multitasking has been stressing me, robbing me of my focus, my productivity, and my appreciation of the beauty of the exact moment I’m experiencing right now, and dammit, I want my brain back!

Once upon a time, I was assigned 21 projects in my first month on a job. Distinct projects, working with different groups of people on completely different tasks. I went from writing code 95% of the time to running from meeting to meeting.

At the same time, I installed IM at work and didn’t create a separate work account (I can see this clearly now, but at the time, I was just filling out my HR profile, I didn’t see the significance). The lines became blurry and I started to get pings around the clock from both work and friends. This is in part due to “crazy-round-world-syndrome”. My life is international, that’s okay, but it does make boundaries harder.

Perhaps it really began as early as 2000, when I got my first cell phone and lived with it glued to my ear? Getting an iphone in January of 2007 certainly made it worse because as a device my precious is meant to be petted, not simply used to accomplish other tasks more efficiently.

So what does a good geek do? Gather data.

I gathered data from scientific american, psychology today, read research papers, took a mindfullness course, and read links that friends posted to twitter.

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. We aren’t getting a lot of the basics right, and when we look at the more advanced techniques, there are some spectacular examples of what-not-to-do. Why do we care about CSS performance? As Stoyan talks about in the beginning of the video, it blocks progressive rendering and it is very difficult to auto-minify.

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:

It is a very simple object, but it is very powerful. We can eliminate many lines of code abstracting this repeating pattern. The code for the media block and many other “web Lego” are available on the Object Oriented CSS open source project.

In my 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!

In the PHP layer, the following stream story (from facebook) might be a single object. All of the logic of determining which bits of HTML to show or hide are contained within one object structure.

Frequently, developers try to make the CSS match this middle-end logic. We expect all the CSS code for the stream story to be sand-boxed within a wrapper id, for example #story. This ends up with bloated code that isn’t DRY. Why? because the proper architecture for the CSS layer is much more granular. Trying to base the CSS architecture on the PHP layer is something akin to trying to use the DB schema to configure apache. It just doesn’t work.

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 sense of the meaning of the data or content, something I call code semantics. Code semantics are incredibly important in the HTML for both portability and accessibility. On the other hand, CSS really is a separate layer in the stack, and it needs its own architecture that reflects the visual semantics of the page.

Visual semantics describe all the repeating patterns in the design of the page. They represent the fundamental building blocks of your website. In fact, they are often portable across sites with only minor modifications. Visual semantics shouldn’t necessarily be tied to HTML semantics, because you want an architecture that fits the unique requirements of each layer of the stack…

Don’t get me wrong, I think CSS is awesome. It is a great way of defining the UI, but it could be even better. I’m excited about the special effects, transitions, and graphic elements currently being added to the CSS specification. They will help us write faster pages by eliminating the need for UI graphics for things like rounded corners. On the other hand, we also need to add structure to the language to make it easier for designers and developers to author new pages and applications. I hope the CSS Working Group will consider my suggestions.

Suggestions for the CSS Working Group

The community has been talking about some form of constants or variables in different incarnations for almost a decade, it is time to make this a reality. While it is possible to duplicate this functionality with a preprocessor (an excellent stop gap until browser support catches up), ultimately this is a tool which should live within the CSS itself. It is a powerful way of expressing more about the objects we are building.

The mixins and prototypes (and associated includes and extends properties) are designed to allow document authors to abstract reusable bits of code and better manage and maintain their style sheets. The goal is to mimic the effect of using multiple class names in the HTML without the drawbacks associated with current implementations. Authors need extends and include in order to write faster, smaller, more efficient style sheets.

CSS is a powerful expressive language. It needs certain modifications so that it will be robust, maintainable, and easy to implement.

From JSConf.eu

Outerlands is a lovely place to have brunch before a day at the beach. They bake homemade bread which is absolutely yummy. It is a small place run by a lovely couple who are very busy at their successful restaurant.

Me (omg!): You have to bake bread every day?

Owner (happy smile): No, I get to bake bread every day.

That’s how I feel about code. I would do the very same thing even if no one paid me at all. Lucky for me, this thing I love to do is also my work.

I recently went to New York to hang with some people who are interested in HTML5 and figure out what I thought about the future of this web standard. I’m a skeptic by nature, so I went into our little quest expecting to be unimpressed by HTML5, but in fact, it isn’t so bad, and even has a few additions I’m excited about.

Down with Pseudocode!

On the other hand the spec itself drives me crazy because I feel like pseudocode is a poor substitute for properly and clearly stating what you are trying to achieve. It is easy to mask your agenda in pseudocode and harder for people to sort out later what was intentional versus incidental.

#html5 .pseudo-code { display: none;} Thought experiments don’t belong in a spec & pseudocode can’t replace properly specifying requirements.

@stubbornella

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 does that mean? It changes the way the block interacts with floats. It no longer wraps around floats, but rather becomes narrower.

Sweet, so how can you use it?

A block with a new formatting context takes all the remaining space on a line, while leaving room for floats which have already been positioned. In my object-oriented CSS open source project I use the formatting context in two ways.

Main content column

Adding a formatting context means that my main column takes all the space that remains after my left and right columns have been rendered. This means having only one template because if you want to remove a column from the three column layout, you simply delete the column from the html. No changes to make anywhere else, CMS developers will love you for that.

Play with the template in Firebug.

1. Try adding the class “liquid” to the “page” element.
2. Add or remove one of the columns from the HTML.
3. Extend one of the column objects with the additional classes listed in the documentation.
4. Try changing the width of the column directly in Firebug.

Grids

Anyone who has developed a grids system knows the pain of sub-pixel rounding errors. Browsers don’t know what to do with 33.3 pixels, so they all do something different. The YUI grids system hid these differences in the gutters between the blocks, but we can also hide that difference inside the units themselves.

A new block formatting context can be used to make the last unit in any grids line absorb the tiny differences in size. Play with the grids, you’ll notice that as you modify the sizes of the units, the last unit grows and shrinks to accommodate the difference. It has no width, and yet, with a new block formatting context is also doesn’t wrap around floats.

Eight techniques for thriving in a big Indian family.

The meaningless ack. You mean that you care about their opinion; you say that you agree with what they are saying. If it ever comes up again, you use one of the following techniques.

Distract. Add more or less unrelated information to the discussion, the more the better.

Delay. Decide to decide after some given point, which may or may not ever arrive. Insist that it is now too late to decide.

Seek additional advice. Everyone’s opinion counts equally. If the currently included opinions are not in your favor, invite an auntie or cousin to give their opinion. If you are really losing a battle invite so many opinions that it is impossible to sort out who thinks what. Ideally, this will include the entire family.

Claim supporters, whether or not they have actually expressed an opinion is mostly irrelevant. For example, “Auntie thinks I should get to eat nothing but cake.”

Reevaluation. Decisions are never final. You might think a decision has been made and you are on your way to get a bite to eat, when in fact things have magically evolved and you are going to visit an obscure neighbor on the other side of the city. Turn the tide of the discussion at the last moment before the decision needs to be acted upon to allow reevaluation to work in your favor.

Disagree respectfully and with a smile and you can get away with being quite forceful. The downside, everyone else will be doing the same, and they have a lot more practice than you do. You are hopelessly outmatched and you will eat five times as much as you meant to. A bit of Zen will go a long way. Remember, letting go is just a gesture.

Give up. Some arguments are not winnable. For example, your friends mother is completely incapable of understanding why you might want to go to the ATM, know the address or phone number where you are staying, buy a map, or have your own cell phone. She can’t imagine you going off on your own or even getting lost because the idea of doing things independently has no place in her worldview. Why would you ever want to be alone if you could be with others? She may treat you like a small child, but she will also make you chai ten times a day and generally spoil you rotten. Revel in it, mother love is a beautiful thing.

Speaking the CSS Summit today, I listened as people voiced concerns about browser support and bugs. It might surprise my fellow CSS developers, but many of the seasoned, bearded (ok, I’m making this part up) engineers working on the innards of browsers and rendering engines may not actually write much CSS themselves. They need our help.

We need to tell them what is broken, via good bug reports with steps to reproduce, version information, and relevant comments, screenshots and ideally test cases. Can you boil the bug down to the simplest possible version of itself? How little code do you need to trigger the rendering problem? That’s the test case you want to submit.

A marked change has occurred since the first Velocity Conference a year ago, and while the effects are not yet obvious, they will be. The web is still slow, but we have something now, that we didn’t a year ago: business metrics. This was the year we quantified the impact of performance choices on our businesses, and the results were astounding.

For those of you who couldn’t attend, this article summarizes results from AOL, Shopzilla, Google, Bing, Hotmail, and Chrome and gives pointers to highlights of Velocity Conference 2009.

Today is a great day for Smush it because Yahoo! decided to accept it into their family of tools. This will allow the tool to run on fanatically maintained servers, with the Yahoo! style quality of service. It doesn’t get any better than that. I feel like my baby is all grown up and going off to college!

Want to Optimize Images like a Pro?

Stoyan and I have contributed a chapter to Even Faster Web Sites, that outlines all the fantastic tricks you can use to make your sites smaller. We hope you find it useful, and of course we welcome feedback! It will show you how to make image optimization part of your own system, and give you all the information you need to make images as small as possible.

I’ve been tweeting and posting to delicious about reflows and repaints, and it seemed time for a blog post. Opera lists repaint and reflow as one of the three main contributors to sluggish JavaScript, so it definitely seems worth a look.

Reflows are very expensive in terms of performance, and is one of the main causes of slow DOM scripts, especially on devices with low processing power, such as phones. In many cases, they are equivalent to laying out the entire page again.

How to avoid reflows or at least minimize their impact on performance?

1. Change classes on the element you wish to style (as low in the dom tree as possible)
2. Avoid setting multiple inline styles
3. Apply animations to elements that are position fixed or absolute
4. Trade smoothness for speed
5. Avoid tables for layout
6. Avoid JavaScript expressions in the CSS (IE only)

Tools

A few tools have made waves lately. Stoyan Stefanov and I have been looking for decent ways to measure reflows and repaints and there are a few tools which show promise (despite being very early alpha).

• UPDATE: Lindsey Simon at Google wrote a bookmarklet that tests reflow times on any browser. Fantastic. (Note: all that shaking is normal!)
• John Resig wrote a bookmarklet to visualize paint events.
• Kyle Scholz created this tool to visualize paint events before onload.
• Alex at Yoono has created the XUL profiler.

Has anyone else seen any cool tools for evaluating reflows?

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

1. Open source project on github (GIT is having some DNS issues, be patient)
2. Follow along with the slides on slideshare
3. Join the OOCSS google group