On the Big Web Show, I talked about being a women in a male dominated field (min 7:12). “I was a carpenter before I got into web stuff, so you guys can’t really compete with the carpenters, no matter how unruly you get.”

That is true, but a simplification. Zeldman threw me a chance to speak openly about being a woman in technology, and out of nervousness, I punted. Perhaps I was also afraid to sound strident? Anyway, I’m going to share some of the things that have happened to me, in hopes that it helps people realize that I was lucky to be successful and a woman. I mean, just take a look at the fastest growing careers for women. We are veterinary technicians not veterinarians, dental assistants not dentists, medical assistants not doctors. We like to believe we have evolved, but the data speaks to something else. Being a home heath aide is dirty work with bad hours and heavy lifting — but it is a career women can imagine, whereas, right now, they clearly can’t imagine themselves coding. I want to understand why not…

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. I believe it is these tangential code-cowboy qualities women are unable or unwilling to emulate, and not their skill or capacity for abstraction, problem solving, creative thinking, or communication — All of which actually make them better developers. In fairness, I think a lot of men would rather not live like code-cowboys, but the unspoken judgement is adapt-or-you-must-not-be-smart-enough-for-CS. The vibe is a competitive rather than collaborative, and leaves many women feeling invisible.

Affirmative action

People mistakenly assume that affirmative action is about granting minorities undeserved privileges. In it’s purist form, affirmative action is about allowing minorities natural talents to flourish by removing artificial, unfair barriers and decoupling the true skills required to succeed in a profession from the cultural baggage that builds naturally within an insular community.

If we separate the criteria that makes someone a code-cowboy from the criteria that makes them a solid developer, I think we would find that women can and do compete despite significant discrimination. Scholarships like the one Google proposes aren’t meant to give women of lower merit something they don’t deserve, they are meant to circumvent the discrimination that extremely talented women still face. If you assume that a scholarship for women exists because women are inherently inferior, rather than because they are simply underrepresented, it might be time to soul-search and ask yourself if there is a bigot inside.

I (don’t) wanna be a cowboy, baby

The Twit-storm

Women may be less likely to be a code-cowboy, but they can be amazing developers. We are not trying to give anything to anyone that doesn’t deserve it, but instead, to counteract the subtle prejudices that leave women feeling invisible, excluded, and unrecognized for their accomplishments. Now, with that in mind, let’s look at the twit-storm I found after leaving a seven hour mediation session on Saturday. I’ll put my comments inline since I was unavailable to tweet that day.

The doofus that started it all:

RT @googlestudents Google grants for female computer scientists to attend JSConf 2010 // this is disgusting.. i hope there is one for guys.
fringley

This stinks of jealousy. Why not be happy for the female students? Why rain on someone else’s parade? Something good happening to someone else seems to disgust fringley. Frankly, it comes off as childish.

Moving on… this is when the storm began to brew.

Voodootikigod has the longest twitter name in the universe, and he makes a good point, we should remember that Google has good intentions and perhaps not be quite so disgusted. Fringley, I’m talking to you.

Special treatment for women with no merit?

Jdalton makes a good point. No one wants to feel like they got where they are because of what is in their pants. On the other hand, he assumes those women didn’t deserve to be sent to JSConf. Why should he assume that? In fact, the website says quite the opposite, the women must “have a strong academic background with demonstrated leadership ability.”

I resent the notion that women are inferior and that is why they are getting grants. Google is correcting for women being less likely to stand up and say “me, me, me!”, not for their technical skills or development prowess.

Thinking that I got where I am because I’m a woman and got special treatment (rather than on my own merit) is a painful and insidious form of discrimination. You have to be thick skinned to make it in a field where this kind of thing happens frequently. YES. It happens frequently.

What I’m trying to say is that women face a special challenge in tech because their male counterparts, when feeling jealous, will tend to pin female geek’s success on their gender. We face another problem, when we begin to wonder ourselves, and doubt our own abilities. This is the last refuge of the bigot indeed.

How can we attract more women to the field?

Yay! I like what voodootikigod says here. I saw Maria Klawe speak at Yahoo! about “Gender, Lies and Video Games: the Truth about Females and Computing”. She said that CS is the only science where the participation of women is getting worse not better. We have a problem. We’re geeks (supposed to be good at problem solving). So let’s figure it out!

I think we should look at:

• Video games are largely made by and for men. We need to be willing to rethink the genre completely, bust things wide open to make video games appeal more to girls.
• CS education works best for people who already know how to code before they begin. CS teaches the theory behind a practice in which they assume you already have some skill. Women are less likely to already know, because they don’t play video games as much. In addition, code-cowboys among their classmates are likely to judge them harshly for being a beginner. Are psychology majors expected to already know how to psychoanalyze patients before their first semester?
• CS education also focuses a lot of effort on puzzles and very abstract concepts when practical applications where you can see the why and how might work better for women (and a hell of a lot of men). I like yummy algorithms, but we could make CS education more accessible by putting them in context.
• Women are less likely to jump up and say “me! me! me!” They are far more likely to wait to be asked to participate. We don’t need women to be different than they are, we just need to invite them in a way that works. Hell, I spent 8 years coding CSS before I ever spoke about it to anyone. The first time I spoke at a conference, John Allsopp contacted me to ask if I would do it. I never would have submitted a proposal. You might say that I should have, but I would counter that I shouldn’t need to act like a dude to get respect.
• Women don’t have female role models. Now, I don’t mean that we need to have deep tear-filled conversations about the perils-of-being-women-in-technology. I would like to talk to geek women about geeky stuff, not about being a woman.
• At Velocity Conference this year, they had a girl-geek lunch. It was awesome! Just a note, they also had tons of women speakers and lots of female attendees. For a deep-geek conference, I was very impressed. Actively seeking female speakers does not mean accepting lower caliber. It means accepting that women might not submit proposals, but they might agree to speak if you ask them nicely. They might not be *famous*, but they may well be amazing innovators, skilled at what they do.
• Could we do something like MIT did? They commisioned a giant study, measured everything, and found that women were in fact being discriminated against. Their offices were smaller and had fewer windows, their pensions unpaid, they had unequal access to MIT resources. The study painted a grim picture, but then, with true MIT efficiency, they then set out to correct it. Well worth a read, especially if you think we are all just being sensitive. For the record, the ones that stay in the field are absolutely *not* being sensitive.
• Recognize the need for work-life balance. Most women still have primary responsibility for children and home. Women need to be equals at home first, but perhaps companies can make it easier for them to get access to awesome childcare and flex time.
• We need affirmative action to correct the problem. However, other developers need to recognize that the benefits of affirmative action go to women of merit. Not just people who happen to have a vagina.

Problem? What problem?

Um, dude, if your site was loading in 18 seconds but you couldn’t think of any reason for it, would you decide you didn’t have a performance problem?

My experiences with sexism

I don’t usually share this stuff, because I’m not thinking about it most of the time, but these things happened to me:

• I had a manager tell me I should stop writing code and focus on powerpoint and management, areas he found to be more in line with my talents. Was it because I’m a woman? I don’t know, but it does make me wonder how many women get pushed into management too soon, before they’ve had a chance to prove their technical chops.
• At one company, I had to change desks because people kept asking to schedule appointments with a VP who sat nearby. Even after changing, they would walk past two guys to ask me. Someone suggested hanging a sign, “I’m not a secretary.” I was in a new job and I just wanted to fit in and code cool stuff not hang signs announcing things. There were only three women out of hundreds of engineers on my floor.
• A guy whose opinions I usually trust said to me that he believes women’s brains are fundamentally different and that we aren’t wired to understand code. He then said I’m an exception because I’m smart, but I’m still doing something which is against my nature.
• I once had someone tell me:
  

  That guy only wants to work with you because he wants to sleep with you. None of your ideas are that interesting, I’m just saying, don’t get mad, it is the only possible explanation.

  Ow. I might never get over that one. It still stings a year later. I don’t want special privileges, but on the other hand, it is easy to see how I’m facing a special kind of discrimination that probably wouldn’t happen to a man. No one is going to assume that a man is on stage because he looks good in a skirt.

  Did the guy want to sleep with me? Maybe, we’re human and those sorts of things can come up. It isn’t a big deal. What bothers me is the notion that if he wants to sleep with me, he is completely incapable of evaluating the merit of my ideas. Thus, even if I am granted the privilege of working with him, it says nothing about my skill, intelligence, or capacity for original thought. It is all about my sexuality.

• All the ridiculous, but potent, self-doubt that goes along with being a woman-in-tech. I really am my own worst enemy. Maria Klawe calls it “impostor syndrome”.
• A client asked to have a male coworker on a call with me, though he was several years my junior.
• I was asked to speak at a conference. A guy whose talk was rejected said “you’re so famous, I wish I was a hot girl.”

Where have all the women gone?

I’m so sorry that rmurphey went through these things, and I’m very glad she stayed in the field because we are all better for it.

Maria Klawe also said that even the best women in a CS program are far more likely to drop out than the worst guys. When asked how they think they compare, these women consistently rank themselves far below their actual skill level. This means women aren’t good at judging their actual skill level or comparing themselves to others. They need mentors and a leg up, to help them do it. Women are also less likely to pester their boss until she finally relents to send them to a conference. Again, we need to actively invite talented women.

When Harvey Mudd changed their CS program admission criteria to accept a broader range of people, and stop selecting for the socially-challenged-uber-nerd, they found that everyone’s grades improved. It benefits everyone to have a diverse group of people in our field.

Jdalton, you had made some good points, but at this point I’m less impressed. Are you really claiming that gender discrimination doesn’t happen? What we have here is a complete failure to empathize.

And this is part of why it is great to meet Rebecca and other girl geeks. It is tiring to feel weird and stand out all the time. Ultimately, what we want is to stand out for the quality of our work. In order to do that, we need to eliminate some of the obvious gender inequities and find ways to rebalance the flow of new engineers. I believe this will make our products better, our work life better, and our conferences better. We have to be willing to really change things to make CS fit women better… it shouldn’t only be the women we are trying to change.

Getify, it sure helps, but it is only one small piece of a larger puzzle.

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.

And what did I find? In fact, multitasking is killing me. All these constant chats, SMS, growl notifications, and email are releasing dopamine in my brain. The kind of trigger my ancestors might have gotten from a lion jumping out of the bushes. The rush to immediate action. It causes me to value new information above old information because, like a drug, new information (no matter how trivial) gives me a shot of dopamine. My fix of choice is a cocktail of tweetie, iphone, and IM. I know that because after reading about My Brain On Computers, I installed RescueTime to see what I was up to. The results seriously scared me. I was spending far too much time IMing. Even if some of the discussions were technical and useful, the volume was just not acceptable.

Simply knowing this has lead to change. I realized that working from home to much means I am starved for interaction with other developers. I try to get that on IM, but constant distraction is inherent to the medium. Instead, I’m working from client offices, joining a co-working group, and inviting people to get together to work on projects face-to-face. It is much more satisfying than IM, and doesn’t come with the chipmunk on crack scatter-brain side effects.

Mindfullness Meditation

A month ago, I started doing some mindfulness meditation. It is all about noticing how things are right now. The only effort you extend is a certain curiosity about how things will unfold. The rest happens naturally in proportion to your willingness to see things as they really are.

At first, Madagascar Bourbon Vanilla cupcakes started tasting oh-so-good. Then I started noticing how much time I spend swapping between tasks. That my frustration tolerance is very low. In other words, if I get stuck, rather than trying to work out a solution, I simply switch to an easier task (like email or twitter). I was spending so much time task-swapping I wasn’t even noticing what was happening right now! I resolved to walk my dog without checking my iphone. It was wonderful.

As a programmer, I love that amazing feeling of being in-the-zone. When the work seems to flow out of me and time doesn’t even really exist anymore. I had that feeling less and less (or maybe I was just more aware of it because of all the mindfulness meditation?), and I wanted it back. I went through all my old email since OOCSS started taking off. My god, it was a lot of email. Three or four messages per day filled with interesting five-part questions of a deeply technical nature (like cross-browser sub pixel rounding errors).

So I started to say no to projects and speaking engagements, to try to make my life more sane and manageable.

Feeling less productive

Test your focus based on a Stanford Study

Then, the guilt set in. I *should* be doing more, I shouldn’t say no to an awesome project or speaking engagement. I should clone myself so that I could keep up with my email. I am the middle child in my family. My sister is a type-A go getter. She always has a million things going on. She has to-do lists and lists of her to-do lists. I’ve always felt like that was the “right” way to be. So again, I did some research. Multitaskers:

• Did a significantly worse job filtering out the irrelevant information.
• Took longer than non-multitaskers to switch among tasks.
• Less efficient at juggling problems.
• Tended to search for new information rather than accept a reward for putting older, more valuable information to work.
• Process visual and auditory input less efficiently.
• Become reliant on more a more simplistic, and often inferior, thought process, and can thus fall prey to perceptual decoys.

Huh, so maybe this multitasking thing gives the illusion of productivity without achieving higher volume, let alone my real goal of time spent deliciously focused on the task at hand.

So what makes people lose focus?

Decision-making. Apparently, time spent making decisions tires your brain. Much like the muscles of a runner, you can only go so far before you become too tired to run any more. Apparently, even tiny decisions (do I delete or archive this email) can seriously impact your ability to make good choices. See the last bullet point above.

Perhaps there is a parallel between this and choosing 1000 times a day not to respond to growl notifications bouncing in your periphery. Each time you exert will-power, you make it harder to have the mental energy to effectively make analyze your options. I’m taking this to mean that I should shut down Tweetie, Adium, and Mail for several hours each day, rather than trying to resist each time a new message comes in. To avoid “ego depletion” so that I will have enough left to use on something that truly exercises my concentration muscles and teaches me to tolerate frustration, like coding.

How can you get focus back?

These papers suggest three things; a good nights sleep, positive emotions, and slowly building up stamina. In addition, another link I got from Zeldman talks about the importance of being curious and gentle with yourself. Saying, “hmm, I wonder if I’ll manage to focus today?” is apparently much more effective and productive than admonishing yourself with a lot of “musts”, “shoulds”, and other guilt-producing tools of grinding willpower. So, I’m curious to see if I can find ways to reduce the number and frequency of tiny decisions and displays of self control which happen throughout my day. I wonder if I can make it to meditation today? It will be interesting to see if I can limit communication time to specified periods.

Is it working yet? Is it? Well, I’ve been doing this stuff for a few weeks, and I do seem to be writing a lot more blog articles. As always, I’m a work in progress.

References

All of my references are listed on Delicious. Check them out. There is some really good stuff in these articles. I definitely recommend going directly to the research papers.

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.

The Basics

These basic rules, made famous by YSlow, have been around for a long time, and yet our data showed that many sites in the Alexa Top 1000 are still not employing the most basic techniques.

• 42% Don’t GZIP CSS
• 44% Have more than 2 CSS external files
• 56% Serve CSS with cookies (yummy to eat, bad for static content)
• 62% Don’t minify (check out the YUI Compressor!)
• 21% Have greater than 100K of CSS

CSS Weight for the Alexa Top 1000 Sites

More Advanced Techniques

I talked about these more advanced tests for the first time at Velocity. Here is how the top 1000 sites stack up and some recommendations for reasonable results.

* >50

Happy perf optimizing!

The media object is an image to the left, with descriptive content to the right, like this Facebook story:

The media object

The content area on the right can contain any other objects. In this case, it contains text, but we could put lists, grids, or even other media objects inside. As we’ve seen before, there are actually many different versions of the media block on the Facebook website (and on most websites). These five are just a few examples of the way this object might be used:

Variations on the media object

Sometimes the image is a tiny icon, a large video, or an avatar, but it is the same basic object. When I’m building a new object, the first thing I do is to figure out which parts are reusable components, and define what I know and do not know about them.

what do we know?

• Can be nested
• Optional right button
• Must clearfix

What have we decided *not* to know? (Think flexibility!)

It is equally important to define what is flexible, or unknown, about a new object.

• Image width, margins, and decoration vary
• Right content is unknown
• Width unknown

Once it is built, we can use it to create many of the same basic object. In the following image, I’ve highlighted all the media objects on the facebook homepage. You can see that even implementing this one object can save a ton of code because we stop repeating ourselves.

The media object highlighted in red on the facebook homepage

Implementation Details

How does it work? The hard part is making sure that the image can be any width, so that the element is reusable. It means our content area needs to be flexible so that it can fill in all the remaining space available. We’ll have to create a new formatting context to make a flexible column.

The HTML:

<div class="media attribution">
  <a href="http://twitter.com/stubbornella" class="img">
    <img src="http://stubbornella.com/profile_image.jpg" alt="me" />
  </a>
  <div class="bd">
    @Stubbornella 14 minutes ago
  </div>
</div>

The CSS:

/* ====== media ====== */
.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}

1. We clearfix both the wrapper element, media, and the inner content wrapper, bd (body) using the secret benefits of overflow. There are other ways we could have implemented the clearfix plus new formatting context. More on that in a later post.
2. Then we float our image wrapper (generally a link) left and our optional right region to the right.
3. Finally, we set some margins and paddings to keep everything lining up nicely. You might choose to set margins via a class which extends the .img object if you have several different kinds of images with different spacing and decoration.

Voila, we’re done. It is a very simple object, but it is very powerful. We can eliminate a lot of 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.

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 CSS

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.

A Facebook stream story

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.

The stream story is composed of many smaller (more granular) objects

So we can see that the stream story example above is composed of many more granular objects. As we make the objects more granular, we begin to see the same patterns emerge over and over, and the same objects become much more reusable. We start to see that most sites on the interwebs are composed of the same basic repeating patterns combined in different ways. As a side benefit, the CSS gets *much* smaller and simpler.

The stream story, one PHP object, is composed of several HTML & CSS objects:

1 heading

5 Media Blocks

2 Link Styles

1 Comments List

1 Action List

1 Paragraph

Benefits of this approach?

Getting the CSS object granularity right means that our CSS (and by extension, our HTML) become much simpler and lighter. Our little reusable object can be employed across the site to create new and different pages without adding to the weight of the CSS.

As a starting point, I recommend creating the following objects: headings, lists, text treatments and links, containers, media, grids, and template. Create all your smallest objects first, before you build whole pages, and your CSS will stay small by default.

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 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.

Separating Template Architecture From Styles

Similarly, many PHP developers are tempted to match the CSS and HTML architecture to the PHP. Perhaps it is common to try to apply the abstractions of the layer with which you are most comfortable to those that you find more challenging? I’ve certainly been guilty of it. During my time at Facebook, I expected the PHP layer to match the CSS layer. Luckily Facebook has some smart developers who pushed back and helped grow my understanding.

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. In fact, PHP templates are not a very natural fit because each template includes many different HTML and CSS objects combined in different ways.

Visual Semantics != Presentation Based Classes

It is important to note that I’m not suggesting class names like “giantBlueHeading.” Class names need to represent the object structure you are defining, not the specific visual look and feel of this particular instance. For example, I often choose abstract class names that are easy to remember, like “media”. The media block combines of a fixed width image or flash with some text or other content that describes it.

The media block may be used in many different contexts, for example, to join an icon and a link or a profile picture and user name. The specific use case is separate from the object structure. The HTML can be looked at as instances of the CSS object.

The code for the media block, and many other base objects are available on the OOCSS open source project.