animation-iteration-delay hack

While there is no such property as an `animation-iteration-delay`, you can employ the `animation-delay` property, incorporate delays within your keyframe declaration, or use JavaScript to fake it. The best method for ‘faking it’ depends on the number of iterations, performance, and whether the delays are all equal in length.

What is an animation iteration delay? Sometimes you want an animation to occur multiple times, but want to wait a specific amount of time between each iteration.

Let’s say you want your element to grow 3 times, but want to wait 4 seconds between each 1s iteration. You can include the delay within your keyframe definition, and iterate through it 3 times:

.animate3times {
    background-color: red;
    animation: yellow;
    animation-iteration-count: 3;
    animation-duration: 5s;
@keyframes yellow {
 80% {
    transform: scale(1);
  80.1% {
    background-color: green; 
    transform: scale(0.5);
  100% {
    background-color: yellow;
    transform: scale(1.5);

Note the first keyframe selector is at the 80% mark, and matches the default state. This will animate your element 3 times, staying in the default state for 80% of the 5 second animation, or for 4 seconds, and moving from green to yellow and small to big over the last 1 second of the animation duration, before iterating again, stopping after 3 iterations.

This method works for infinite repetitions of the animation as well. Unfortunately, it is only a good solution if the iteration delay between each iteration is identical. If you want to change the delay between each iteration, while not changing the duration of the change in size and color, you have to write a new @keyframes definition.

To enable different iteration delays between animations, we could create a single animation and bake in the effect of three different delays:

.animate3times {
    background-color: red;
    animation: yellow;
    animation-iteration-count: 1;
    animation-duration: 15s;
@keyframes yellow {
  0%, 13.32%, 20.01%, 40%, 46.67%, 93.32% {
    transform: scale(1);
  13.33%, 40.01%, 93.33% {
    background-color: green; 
    transform: scale(0.5);
  20%, 46.66%, 100% {
    background-color: yellow;
    transform: scale(1.5);

This method may be more difficult to code and maintain. It works for a single cycle of the animation. To change the number of animations or the iteration delay durations, another keyframe declaration would be required.

The animation-iteration-delay hack

There’s a solution that currently works that is not specifically allowed in the animation specification, but it isn’t disallowed, and it’s supported: you can declare an animation multiple times, each with a different animation-delay.

.animate3times {
    animation: yellow, yellow, yellow;
    animation-delay: 0, 4s, 10s;
    animation-duration: 1s;
@keyframes yellow {
  0% {
    background-color: green; 
    transform: scale(0.5);
  100% {
    background-color: yellow;
    transform: scale(1.5);


We’ve attached the animation three times, each with a different delay. In this case, each animation iteration concludes before the next one proceeds. If they overlap, while they’re concurrently animating, the values will be the values from the last declared animation.


Of course, you can also use JavaScript with animationstart, animationiteration and animationend eventlisteners that add or remove animation names or classes from your element.

Survey for US Developers’ Experience

I created a survey of developer experiences for US based developers.
While the results aren’t scientific in the the questions and optional answers were not all that well written, and the distribution may have been biases (only reached Twitter users), some of the results were indeed interesting, and may lead to me doing some further, more professional, study.

According to their own self reporting, men experience the following more than women do:

  • People assume more men developers have a CS degree (1.18)
  • People think men developers are very skilled at tech when they first meet them. (0.89)
  • People assume men  developers are good at math (0.80)
  • People make accurate judgements as to men developers ‘s skill set when they meet them (0.73)
  • Men developers sign up for conferences or RSVP for meetups and let their bosses and partners know the plans them made (0.65)
  • People assume men developers are gamers (0.59)
  • People listen to men developers  (0.54)
  • People assume male developers are straight (0.52)
  • Men developers  provide constructive criticism to others online (0.51)
  • People value men developers ‘s opinion (0.48)
  • People assume men  developers are correct (0.45)

According to their own self reporting, women experience the following more than men do:

  • People assume women developers are not technical when they meet them (2.22)
  • Women developers  are  told to be “nice” or to “smile” (1.98)
  • Women developers  have been called bossy (1.80)
  • Women developers  are the ones that makes sure they have a housesitter, babysitter, dogsitter, other so they can attend events such as conferences. (1.75)
  • Women developers have been called aggressive 1.65
  • People question women developers ‘s accuracy and/or knowledge (1.42)
  • Women  developers think about transportation to and from the venue before agreeing to attend events (1.25)
  • People explain women  developers ‘s own content to them, like their tweets and posts (1.18)
  • Women  developers go into work on the weekend (1.18)
  • People assume women  developers  know photoshop or have other design skills (1.14)
  • People comment on women developers ‘s appearance 1.12
  • Women  developers think about the different ages of their co-workers (1.06)
  • People interrupt women developers (1.00)
  • People are surprised to learn women developers are gamers  (0.98)
  • Women  developers think about what they are going to wear to work. (0.98)
  • People think women developers are administrative or custodial staff (0.95)

Binders full of Women

You’re looking to improve the diversity of your technical conference. Well, let me google that for you!

Two years ago, I organized a conference called Confident-Coding. We had an open CFP, but only self-identified women responded to it. In one week, 12 women applied to speak.  You’re saying that not a single woman replied to your CFP? You’re obviously doing it wrong.

Only women applied to speak at my conference because of where I promoted the CFP. Where are you announcing your CFP? Reddit? If you promote your conference or job to white males, you’re only going to get white males applying.

With Confident-Coding, I successfully proved a point: If you only promote a CFP to an insular group of people, you are only going to get members of that population to apply.

The Conference wasn’t actually intended as a woman-only event. I just wanted to show it was possible to find AMAZING female presenters.

I promoted the conference thru my regular channels of promoting conferences: I asked my multi-gender network to promote it for me. The interesting thing: most of the cis-men who promoted it did so as a women’s conference. There was nothing that read “women only” on the website. They assumed it was “women only” because of the demographics of the speakers.

Yes, all male lineups look to us women just like all female lineups look to you men.

How do you think your male-only conference makes me feel?

“So, if this all female lineup is for women only, are all male lineups for men only?” I asked.

“Well, that’s different,” was the response I heard from the clueless ones.

“Holy shit, you’re right” was the response I heard from those for whom this was a teachable moment.

Yes, all male lineups look to us women just like all female lineups look to you men.

Are you intentionally leaving out entire segments of the population? Yes, you need a diverse lineup. (see Ashe Dryden, and more from Increasing Diversity at Your Conference also by Ashe Dryden). And, no, don’t ask me to do the job of finding your speakers for you.
Please do your own research instead of asking us to do it for you. Sorry to be snarky, but I already have 3 jobs. Yes, being a woman in tech is 2 jobs. There’s the tech part, and the woman part. I code for 40+ hours per week. That’s my first job. I am also writing 2 books and speaking at a multitude of conference: that’s my second job — which, admittedly, most engineers may not have. My third job? I spend an inordinate amount of time identifying potential speakers for conference organizers who don’t take the extra 5 minutes to do it themselves.

Are you intentionally leaving out entire segments of the population?

“If it takes 5 minutes,” you ask, “why is it a full time job?” It takes 5 minutes to find the right people to refer. It takes a couple hours to compose the email explaining that just blasting these other people who also have 2 full time jobs is not going to work. Then I spend another couple hours making my original email sound more polite than this post.

I take the time in my email response to teach conference and meetup organizers how to ask these not-so-random strangers to speak, and to inform the recipients that this wouldn’t be such a difficult issue for them if they actually had female or otherwise non-cis-white-male developers and developer evangelists at their place of employment whom they can ask. Yes, it’s fine to ask your own co-workers to help you find developers: they’re paid. Don’t have women and non-cis-white-male co-workers? Please hire some. Not only will it improve your working environment and your product, but then you can ask them, instead of expecting all the rest of us “women in tech” whom you haven’t employed, to do it for free.

When we spend that 5 minutes searching, the hours writing the email, and the days writing these blog posts, or educating you on Twitter, that’s time we are not spending writing books/talks or ‘coding for cash.” It costs us money.

Don’t just identify potential female speakers, make sure you ask them to present correctly. For example, only ask me to speak if you’re interested in what I have to say. Tell me why I am of interest. Don’t let me assume that it’s just because you haven’t filled your boob quota.

And don’t just look for boobs. Do you think because you have 20% white women and 80% white men, your conference or employer experience is diverse? Nope. Sorry. Even if you live in Australia, where the population is 92% caucasian, you’re still not reflective of society. You’re still not inclusive. Not even close.

Diversity isn’t just a male versus female thing: it’s a people thing.

You already know if you have no speakers who identify as female, you’re doing it wrong. But you should also know, if all your speakers are cis-gendered white men and women, you’re still doing it wrong. You can still improve. If all you’re speakers were born in the 1980s, you’re doing it wrong? The more diverse your lineup, the more diverse your attendee base will be. The more diverse your conference, the more interesting the conversation will be.

Do you know what an all under 30 line up look to those who are over 60? It looks just like what a lineup of all 60+ year olds would look like to someone under 30. Yes, ageism is rampant in our industry too.

An all young white male lineup looks to a non-young-white male similar to what a lineup of all eldery Korean women would look to a young white male. No, it’s not “different.” Young, white, straight male is not a norm. It is only the norm for those who are young, white, straight men. Leave out the age, and in the US, it is the norm for about 26% of the population. That leaves out 74% of the population. Why are you intentionally leaving out 74% of the population?

It’s not just about your male to female ratio. It’s about gender, age, race, sexual orientation, body size, social comfort levels, technical abilities, income, everything! Different perspectives provide for much more interesting conversations.

But don’t just pull speakers from other conferences. We don’t need to hear more of the same prominent voices. There’s little value in the view that only those who have spoken before are those who are worth listening to. Instead of asking the same speakers to give the same talk (that is available on Youtube), find out who those speakers listen to. Look at the speakers you were intending to ask: who do they follow on Twitter? Who do their followers follow? Found someone great with imposter syndrome? Take the extra time to encourage them. They’re still said no? Look at who they follow, there may be an uncut gem in there.

Now that you know you have a problem, it’s time for you to solve it. (Yes, you. Sorry, I can’t do it for you.)

There’s little value in the abysmal view that only those who have spoken before are those who are worth listening to.

Ask diverse people in your own company where to target diverse speakers (and where to help recruit other diverse employees). Ask them to cross promote to their LGBT chat list, breast-feeding support group, and women in tech groups. Do you think some of those groups are irrelevant? You likely don’t realize what the average technical woman thinks of Reddit!

Ask your eldest employee. Ask your youngest employee. Ask the transgender woman in your DevOps team. Ask the Latino man in your front end team. And, if you don’t have transgender, Latino or African American persons in your organization in positions of responsibility, fix that too. For example, pay your interns. This will ensure that your interns can be there on merit — yes, that’s a faux “meritocracy” we don’t really have–not just because they can be there because they have a wealthy parent who can fund their eternal education.

Remember, being your personal Google is not part of the job description of any other employees in your agency. When you ask them (and you should), you are burdening them with additional responsibilities. They just did you a favor. Don’t forget to appreciate that appropriately, and return the favor somehow.

Go thru open networks to find diverse speakers. If you get rejected by the 10 most popular female presenters in your industry, keep asking? If you asked the 10 most popular men in your industry and they said no, would you cancel the event or would you continue to looking? Same thing!

If you asked the 10 most popular men in your industry and they said no, would you cancel the event?

Find the top 20 speakers you want for your conference, of all genders, and look at the people they talk to or RT on Twitter and other social media: likely, you’ll find an abundance of qualified people to target. When you ask them to speak, be very specific about why you asked them. I don’t reply to recruiters — for jobs or CFPs — if it’s all about them and not about me. Nope, not narcissistic. I just don’t want to put more thought and time into answering their email than they spent on their initial request.

Make sure your developer evangelism team is diverse, and has no bad apples. Even if he’s an awesome, funny speaker, get rid of the douchebag that discourages other people from applying or staying on in the role. Not getting enough diversity in your application pool? (If you didn’t have an open application procedure, you really fucked up.) Where are you posting?

  1. Do NOT post your job or CFPs to YCombinator or Reddit, because that is what your application pool will look like.
  2. Do NOT “ask your friends” only: they tend to look like you and have similar life experiences.
  3. Do NOT try to target your event for ninjas, cowboys or hipsters.
  4. Do NOT promote your conference as a party. Don’t promote the drinking. Have (and announce that you are going to have) quiet spaces, non-alcoholic beverages on par with the alcoholic ones[1], etc. in addition to the MANDATORY code of conduct.
  5. And, for goodness sakes, do NOT have strippers or “booth-babes” at your event.

There are resources all of the Internet. Take the time to look for them.

P.S. Pay all your employees what they are worth, not more to people simply because they asked for it. Otherwise, you’re compensating people for being assertive not skilled.

[1] If you are serving wine and beer in plastic cups, serve water, juice and soda in those cups too. If the beer is in glass bottles, serve high end non-alcoholic drinks in glass bottles: Perrier, Mexican Coca-Cola, even IBC Root Beer (in the USA), whatever. Make your non-alcoholic drinks on par with the alcoholic ones. If you’re offering cocktails, offer mocktails and fresh squeezed orange juice.

Understanding Synchronous vs Asynchronous

To get a file or data from a server or issue a JavaScript command synchronously, we issue the command to get the file/data from the operating system or other JS function and we wait for the answer. In the meantime, our single browser UI thread is occupied. The server or Javascript cannot execute anything else. If our program is a web server and we get another request for a different file from a different user, our program cannot process that second request until the first file is read. This is why you need to be careful when you issue synchronous commands on a node server or in the JavaScript in your user’s browser.

When requesting an asynchronous file read, the command to get the file from the operating system is issues. Being asynchronous, everything continues along on its way, and no one is being held up while waiting for the server response. But, since the program has moved along without waiting, what happens when the response finally happens? When making asynchronous requests, we specify a callback function, which is simply a function that is called when an asynchronous request is responded to.

Asynchronous servers are considered scalable, as they can handle multiple synchronous users without much if any degradation in performance. For this reason, in node, use fs.readFile() which is asynchronous instead of the synchronous fs.readFileSync().

px to rem conversion if :root font-size is 16px

If you have

:root {
font-size: 16px;

you can use the following table to convert from PIXELS to REMS

10px 0.625rem
11px 0.6875rem
12px 0.75rem
13px 0.8125rem
14px 0.875rem
15px 0.9375rem
16px 1rem
17px 1.0625rem
18px 1.125rem
19px 1.1875rem
20px 1.25rem
21px 1.3125rem
22px 1.375rem
23px 1.4375rem
24px 1.5rem
25px 1.5625rem
26px 1.625rem
27px 1.6875rem
28px 1.75rem
29px 1.8125rem
30px 1.875rem
31px 1.9375rem
32px 2rem
33px 2.0625rem
34px 2.125rem
35px 2.1875rem
36px 2.25rem
37px 2.3125rem
38px 2.375rem
39px 2.4375rem
40px 2.5rem
41px 2.5625rem
42px 2.625rem
43px 2.6875rem
44px 2.75rem
45px 2.8125rem
46px 2.875rem
47px 2.9375rem
48px 3rem
49px 3.0625rem
50px 3.125rem
51px 3.1875rem
52px 3.25rem
53px 3.3125rem
54px 3.375rem
55px 3.4375rem
56px 3.5rem
57px 3.5625rem
58px 3.625rem
59px 3.6875rem
60px 3.75rem
61px 3.8125rem
62px 3.875rem
63px 3.9375rem
64px 4rem

You have to ask to get a “yes”.

Note: This was originally posted at Ladies in Tech, April 2, 2013

The first step to speaking at a conference is to ask to speak at the conference. To some people this is self-evident. For me, it came as a surprise: when attending my first technical conference, I assumed the organizers had asked all of the speakers to be there. It made sense to me that, to be a speaker, you had to be ‘internet famous’ enough for someone to ask you to present. Otherwise, how would they find you to ask you?

At SXSW in 2008, I attended the panel “What Women Need to Succeed” with five awesome women speakers. How had they been discovered? Afterwards, I drummed up the courage to ask Stephanie Sullivan, the panel moderator. She explained you aren’t asked to speak. Rather, you have to ask to speak.

Find a conference that interests you. Find their call for proposals. Submit a talk. If you don’t submit a talk proposal, they won’t have a proposal to accept.

Really. It is that easy. I asked to speak. The first 20+ conference I applied to speak at said “yes.”

Apply first. Get permission later!

I know too many women who don’t apply to speak at conferences because they assume they won’t get the permissions or funds to attend. They worry about not having an interesting topic, not getting accepted, and not being skilled enough to talk. They assume the worst and don’t even apply.

Do not worry about any of these things and just apply. Instead of wasting mental effort convincing yourself of impending failure, put that effort into writing your proposal.

Make sure you don’t have any unchangeable conflicts before applying to speak. Other than that, don’t worry about getting all your ducks-in-a-row with costs, time, and permission until after you know you have a speaker slot. Once you’ve been accepted is the time to worry about whether you have a dog sitter.

How about your job? Wait until you’ve been accepted before telling them you are going. Remember, speaking at a conference benefits your employer. The company you work for will likely not only let you go, but may even sponsor your trip. If they require you to take vacation time, or don’t allow you to attend, take it as a sign that it is time to change jobs!

Many conferences list the perks of speaking on their Call For Proposal (CFP) page. Others make no mention of speaker perks. If they don’t list it, it doesn’t mean they don’t offer anything; you just have to ask. But don’t ask until after your talk has been accepted so potential expenses aren’t held against you in the selection process.

Remember almost anything is possible, but nothing will happen if you don’t ask.

How to submit a talk

It may take some time the first time you submit a speaking proposal. Once you’ve submitted your first proposal, you will have the material ready to apply to all other conferences.

To submit a talk, generally you need to cover some or all of the following:

  1. Headshot
    If you don’t have a headshot that you like, don’t worry. When I first started speaking, I used my avatar, which was a cartoon rendition of me. No one complained. Raffi Krikorian of Twitter never submitted a picture for Webstock in 2012; they simply used a picture of David Hasselhoff. Yes, it is better to have a headshot, but don’t let the lack of a good photograph stop you from applying to speak.
  2. Brief biography
    I found writing my biography to be a bigger challenge than writing my talk description. If you’re plagued with writer’s block (especially if caused by ‘imposter syndrome’), have your partner or co-worker do it. Or write a biography about someone you admire in your field. Then use the same adjectives to describe yourself, just change the nouns to reflect your accomplishments instead of his or hers. If that doesn’t work for you, look at the biographies of other presenters on various conference sites and compile them into a description of yourself.
  3. Talk title
    Remember, you are selling your talk. What does the target audience want to buy? Make it short, hip, and engaging, while making it obvious what you are going to cover. If you need help, ask your network, or visit @weareallawesome on Tuesday mornings (or anytime).
  4. Short, Medium, and Long description of your talk
    You may need to provide up to three descriptions of your talk. The short or “tweetable” version will be used for marketing. The medium length version is what will be posted on the conference website. This is what is used by attendees to decide whether to attend the conference, and, if they do, which session to attend. The medium length posting is a good place to include catchy marketing phrases. The lengthy detailed version describes what you are really covering in your talk — it is your way to communicate to the conference organizers all the awesome material your attendees will learn in technical rather than marketing terms.
  5. A link to a video of a previous talk
    If it’s your first time speaking, don’t let this “requirement” stop you from applying. It doesn’t need to be a catch-22. Simply omit the field or let them know that you don’t have any talks recorded. Just because there is a field in the online CFP form does not mean all the fields are actually required.

    If you want, you can include a link to your Github account, or to an article covering a similar topic, showing that you know how to explain the topic. But remember, don’t over explain yourself or make excuses. Tell them what you are capable of, not what you are lacking. The only harm in submitting an incomplete application is they might say “no.” But they may also say “yes.”

Thinking it through

When it comes to the talk title, tweetable description, medium description, and detailed description, I actually complete those in reverse order. I find explaining what I am going to talk about in great detail is easier than coming up with a catchy title.

It might help to write an outline or timeline for your talk, but keep it to yourself. Remember, you are selling your idea to the reviewers, not explaining your thought process to them.

Less can be more. Reviewers, like site users, don’t like to read. Make your description as short and to the point as possible, outlining expected attendee takeaways, thinking of it as a marketing piece, not an itinerary.

Stuck? Get inspiration from conference talks accepted the previous year.

What topics should you submit?

When I was recruiting proposals for a JavaScript conference last year, the response I received from a few women were statements like “I don’t know JavaScript well enough,” “I don’t have anything to talk about,” and “No one is interested in what I have to say.” Bullshit!

Whatever you work on is a perfect topic to suggest. Just because you think what you do is easy, that doesn’t mean that other people don’t find it challenging and want to learn how to do it. If you find it easy, you likely know it well enough to present. Do you attend sessions on topics you’ve mastered? Or do you attend sessions to learn new things? If the reviewers think it’s dull or too basic they can always say “no.” If someone knows your subject matter as well as you do, they’re unlikely to attend.

Submitting multiple proposals

Unless otherwise noted in the CFP, it is okay, and often a good idea, to submit more than one talk proposal.

Many women don’t submit multiple topics because they fear wasting the reviewers’ time. Reviewers might actually view you as both versatile and excited about presenting. And they might enjoy picking their favorite out of the few. Submitting multiple talks gives you a better chance of being accepted for at least one topic.

Be a risk taker, not a rule follower.

Getting rejected.

If your proposal is rejected, your ego may be a little hurt. Don’t take it personally. The conference proposal reviewers likely gave your talk a thumbs up or down in less than one minute. Then they moved on to review the next proposal. They may have already decided on which talks they wanted and just did the CFP for show. You don’t have to tell anyone. They’re not going to tell anyone. Just remember, they’re the ones missing out on your awesome talk!

Getting accepted!

You asked to present. They said yes. Awesome! This means they want you. They may have taken three days or three months to say yes. You can take a few days to accept. It is okay to turn them down, as well; you might have applied a while ago, plans change. They should not be adding you as a speaker to their lineup until you have confirmed that you are willing and able to speak. If they picked all four sessions you submitted, it is also okay to tell them that you only want to do one or two.

If the conference organizers wanted your talk enough to accept it, they will likely pay for your flight and hotel. Also, conference fees are generally waived for speakers. I do not speak at conferences that charge speakers to attend. You and the other speakers are what makes the conference worth the conference fees. They need you. Remember that. It is completely acceptable to ask for the financial assistance you need to make speaking at this conference possible. The worst thing that can happen is that they will say “no.”

Once the conference organizers have agreed to your terms, you can accept their invitation. Congratulations! You are now a speaker.

Historical Reference: the <hgroup> element

Note: The <hgroup> element has been made obsolete.

This post was pulled from the original version of my book Mobile HTML5. I have added it to the blog for historical reference. At the time of this posting, the title and subtitle of my blog are in an hgroup.


The <hgroup> groups a series of <h1> to <h6> elements when the heading has more than one level, such as a heading with a subheading, alternative headline and / or tagline. This may seem like a useless element, but it does serve an important purpose: <hgroup> enables a subheading to be associated with a related heading, so you can include more expressive content, like a subtitle or tagline, without the subheading being added to the document outline.

Many designers will create a main header with a tagline directly underneath.  In the past, developers have ‘incorrectly’ included an <h1> for the main title, followed by a <h3> for the much smaller tagline, providing for two main headers in non-sequential order, when in actuality, only the contents of the <h1> was the real title of the page. Another markup tactic involved including a <span> within the <h1> to stylize part of the heading as a tagline or subheading, even thought the tagline did not have the same importance as the rest of the heading in which it was incased.

For example, in previous versions of HTML, we may have written:

<h1>Sectioning Elements in HTML5 <span>Dividing your pages semantically with new HTML5 sectioning elements</span></h1>

we can now write:

<h1>Sectioning Elements in HTML5 </h1>
<h2>Dividing your pages semantically with new HTML5 sectioning elements</h2>

The document outline will then only show the contents of the <h1>.  Breaking the document up into semantic sections allows HTML5 to create an explicit outline for the document, with the table of contents delineated by the header of each section. In previous versions, including <h1> thru <h6> determined the document outline. With HTML5 you can now add headers without adding to the outline, and you can add to the outline without adding headers. To check out the outline created by the semantic markup in your documents, add the HTML5 Outliner plug-in ( to your browser.

For example, a web page may contain code similar to the following:


<h2>CSS3, JavaScript and HTML5 explained</h2>
     <h2>CSS3 Selectors &amp; Browser Support</h2>
     <h3>Which CSS selectors are well supported by which browsers</h3>
<p> ...content here ....</p>

In creating a table of contents for content of the site, the above would include all of the headers, which is too many, creating an outline that looks like the following:

Standardista …………………. …………………. …………… ……………………………. page 1

CSS3, JavaScript and HTML5 explained………. …………. … … …………….. page 1

CSS3 Selectors & Browser Support…… ………….. ………… … ………………. page 1

Which CSS selectors are well supported by which browsers… page 1

The above creates an outline that is more detailed than our actual content. By encompassing actual headers with their tagline or subtitle, we can create a more appropriately detailed outline:


     <h2>CSS3, JavaScript and HTML5 explained</h2>
     <h2>CSS3 Selectors &amp; Browser Support</h2>
     <h3>Which CSS selectors are well supported by which browsers</h3>
<p> ...content here ....</p>

Grouping header content within an <hgroup> creates a much more appropriate site outline:

Standardista …………………. …………………. …………… ……………………………. page 1

CSS3 Selectors & Browser Support…… ………….. ………… … ………………. page 1

The purpose of <hgroup> is to enable outlining based on header levels, masking all but the highest-ranking heading element within an <hgroup> from the outline algorithm. Using <hgroup>, the subheading is associated with the heading and does not get added to the outline.

Responsive Images: Clown Car Technique

Adaptive images are the current hot topic in the Adaptive Design and Responsive Web Design conversations. Why? Because no one likes any of the solutions. New elements and attributes are being discussed as a solution for what is, for most of use, a big headache.

We have foreground and background images. We have large displays and small displays. We have regular resolution and high resolution displays. We have good bandwidth and low bandwidth connections.

Some choose to “waste bandwidth” (and memory) by sending high-resolution images to all devices. Others send regular resolution images to all devices which look less crisp on high resolution displays.

When it comes to background images, we have media queries. This makes it (almost) simple to send the right size and resolution images based on the device pixel ratio, size and / or orientation of the screen.

Proposed solutions with new technology

With content images, it’s a bit more difficult. Most believe that there is no mechanism for the <img> tag to download the right size and resolution image. Polyfills have been created. Services have been formed.

The <picture> element leveraging the semantics of the HTML5 <video> elements, with its support of media queries to swap in different source files was proposed:

<picture alt="responsive image">
     <source src=large.jpg media="(min-width:1600px), (min-resolution: 136dpi) and (min-width:800px) ">
     <source src=medium.jpg media="(min-width:800px), (min-resolution: 136dpi) and (min-width:400px) ">
     <source src=small.jpg>
        <!-- fallback -->
        <img src=small.jpg alt="responsive image">

Another method, using a srcset attribute on the <img> element has also been proposed. The above would be written as:

 <img alt="responsive image"
           srcset="large.jpg 1600w, large.jpg 800w 1.95x, medium.jpg 800w, medium.jpg 400w 1.95x">

Possible Solutions with Existing Tech: SVG

What many people don’t realize is we already have the technology to serve responsive images. We have had browser support for responsive images for a long, long time! SVG has supported media queries for a long time, and browsers have supported SVG for … well, not quite a long time, but still. Most browsers support media queries in the SVG (test your browser). The main issue is terms of mobile is old Androids lack of support until 3.0..

We can use media queries within SVG to serve up the right image. The beauty of the "Clown Car" technique is that all the logic remains in the SVG file. I’ve called it the "Clown Car" technique since we are including (or stuffing) many images (clows) into a single image file (car).

When you mark up your HTML, you simply add a single call to an SVG file.

<img src="awesomefile.svg" alt="responsive image">

Now isn’t that code simple?

The magic is that SVG supports both media queries and rasterized images.

In our SVG file, using the <image> element, will include the all the images that we may need to serve, and include all the media queries.

Here is the code for one of the SVG files:

<svg xmlns="" xmlns:xlink="" width="300" height="329">
  <title>The Clown Car Technique</title>
    image {display: none;}
    #small {display: block}
     @media screen and (min-width: 401px) and (max-width: 700px) {
        #medium {display: block}
        #small {display: none}
      @media screen and (min-width: 701px) and (max-width: 1000px) {
        #big {display: block}
        #small {display: none}
     @media screen and (min-width: 1001px)  {
      #huge {display: block}
      #small {display: none;}
    <image id="small"  height="329" width="300" xlink:href="images/small.png" />
    <image id="medium" height="329" width="300" xlink:href="images/medium.png" />
    <image id="big"    height="329" width="300" xlink:href="images/big.png" />
    <image id="huge"   height="329" width="300" xlink:href="images/huge.png" />

Unfortunately, when this file is used, all 4 PNGs are retrieved from the server. To solve this issue, we can use background images instead:

<svg xmlns="" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
 <title>Clown Car Technique</title>
  svg {
    background-size: 100% 100%;
    background-repeat: no-repeat;
 @media screen and (max-width: 400px) {
  svg {background-image: url(images/small.png");}
 @media screen and (min-width: 401px) and (max-width: 700px) {
  svg {background-image: url(images/medium.png);}
 @media screen and (min-width: 701px) and (max-width: 1000px) {
  svg {background-image: url(images/big.png);}
 @media screen and (min-width: 1001px) {
  svg {background-image: url(images/huge.png);}

This version only downloads the images required, thereby solving the multi-HTTP and waste of bandwidth concerns. However, it seems to trigger mor Content Security Policy issues than the previous SVG.

The SVG file has it’s own declared size, but when included in HTML, the media query size is based on the proportions of the DOM node in the HTML –. it reflect thespace provided to it.

Open the first SVG file or the second SVG file in your browser, then grow and shrink your browser window. As the window grows and shrinks the image the SVG displays changes. The image size appears to stay the same — because it is the same. In the SVG, all the images to have the same dimensions. Its when we include the SVG in a flexible layout that the magic happens. You’ll note that the first time you load the second one there may be flickers of white as the browser requests the next required PNG.

When you include the SVG in your HTML <img> with a flexible width, such as 70% of viewport, as you grow and shrink the container, the image responds to the changes. The "width" media query in the SVG is based on the element width in which the SVG is contained, not the viewport width.

I have included the first SVG and the second SVG so you can see SVG with both foreground and background images. These foreground images work perfectly in Opera. In Chrome and Safari, I need to open the SVG file first, after which the HTML file containing the foreground SVG image works perfectly*. In Firefox, the SVG works. Firefox supports SVG and supports SVG as background image, but blocks the importing of external raster images due to their content security policy (CSP).

The content security policy does make sense: you don’t want a file to be pulling in untrustworthy content. SVG technology is supported. It is just being prevented from pulling in external raster image. Firefox prevents it altogether. Safari and Chrome work if the SVG is preloaded. We can work with the browser vendors to get this CSP lifted.

The browsers do all support the media queries with the SVG. They all support SVG as foreground or content images. They all support SVG as background images. The support just isn’t all the same.

Responsive SVG for foreground images works. It simply works right out of the box. For background images, it works, but I am still tweaking the code to make the background responsive (in Chrome it works if background-size is declared, but Opera and Safari are using the declared SVG size as the image size… still working on combinations that work everywhere.)

The drawback of the first SVG is that the SVG file is making 4 http requests. So, while we are displaying the right image, we are not saving bandwidth. In the second, the raster images are background image. Only the required image is downloaded.

Another pro for this technique: similar to how we separate content from presentation from behavior: this method enables us to also separate out images — all the logic is in the SVG image instead of polluting our CSS or HTML.

With <object> tag: up Next

<object> can take care of Content Security Policy drawback we see with <img> that disallows the importing of images or script into an <img> file. <object> allows both. I am working on that angle now.

The main question is: should we attempt this with <object>, or should we get browser vendors to change their content security policy?


* Interestingly, the SVG works best when the raster images are pulled cross domain rather than same origin. You would think, with CSP, it would be the exact opposite.

Death by 1,000 Cuts

Anita Hill was telling the truth. How do I know she was telling the truth? Because what she accused Clarence Thomas of was, in many people’s eyes, inane. He made a really, really bad sexual joke. Something to the effect of “That looks like a pubic hair in your coke.”

Anita Hill was offended. I wouldn’t have been offended. You might not have been offended. But Anita Hill was.

It is not our role to tell others that they are wrong in finding something offensive. What makes them wrong and me right? My upbringing, life experiences and religious beliefs are different from yours. Our senses of humor and tolerance levels for potty humor, puns and racist humor are likely different as well. My tolerance level for off-color humor also differs by who is delivering the “joke”. If Carlos Mencia and Dick Cheney make the same joke, I may find one funny and the other completely offensive: intention of the speaker matters.

Adria Richards was telling the truth. There is no doubt about it. The persons she accused of making offensive jokes admitted to making at least some of the jokes. They were sexual jokes. Not sexist jokes. She was offended.

Did she handle it the way you or I would have handled it? Unlikely. You may have laughed at the joke. I might have turned around and glared at them. Pat (I am using gender neutral, imaginary people.) may have asked them to tone it down. Chris may have reported it to the conference organizer. Adria chose to tweet it.

Whether or not we would be offended doesn’t matter here. She was offended, and that is what matters.

Most people’s gut reaction may not be to tweet it. Most people rationally arguing against Adria’s handling of the situation state that she should have turned around and asked them to stop, or, if she was fearful of their reaction, to speak directly with the conference organizers. Both of these would have been good reactions — likely better reactions — but this is not what happened.

Let’s dig deeper into why it didn’t go down like this.

For most men, this may be the first time they hear of someone being reproached for making sexual jokes. For many women in the tech industry, they’ve either reproached someone for making a sexual joke, or consciously made a decision to “not make a fuss.” Just because the person sitting in front of you doesn’t give you the death stare, doesn’t mean they’re not offended, they don’t find your jokes inane, or they just want you to shut up so they can hear the speaker.

We know the dongle joke happened. There is debate about whether the forking joke happened too. Whether or not the forking joke happened or not doesn’t really matter in this story. Since the reaction was based on hearing a forking sexual innuendo joke, a joke was heard whether or not it was intentionally made.

This is not the first time a “private” offensive joke has been overheard. If others can hear you, like when you’re on your cell at Starbucks, it’s not private. The first few times we let such things slide. The next few times we give a “if looks could kill” stare. The next few times, we inform the perpetrator that we’re offended. For the comedically inclined, the next few times we mock the perpetrator. The next few times we ask them to shut up. The next time we tweet.

So, when you want to argue that she just should have asked them to stop making jokes she found offensive, how many times do we have to ask boys to behave?

I vividly remember when I was three years old I asked my black baby-sitter how come her hands didn’t get clean when she washed them. Most of you may think it’s OK for a three year old to ask that question. Some people think it is kind of cute. It’s not.  If you have sensitivity outside of your own life experience, you may find it mildly offensive. It is offensive. Can you imagine being that baby sitter and having to answer questions like that every day of your life, in every one of your jobs, not just from 3 year old children. It’s tiresome when you’ve heard it 1,000 times.

Let me reiterate: when I asked the question one time, it doesn’t seem racist. When my babysitter was being asked the same question for the 1,000th time, it felt racist.

It’s tiresome when you’ve heard inappropriate sexual jokes in a professional setting 1,000 times. It’s ‘Death By A Thousand Cuts’. At some point the micro-aggression kills your spirit.

Adria was tired of confronting directly. Many people argued “why didn’t she just confront them.” Is that our job? How many times do we have to repeat this chore?

Many people are too scared to confront people. When was the last time you confronted a mother who was smacking her child? Or a police officer who was harassing a black teenager? Why do people think it’s OK for them to insist that Adria have confronted the men behind her when they themselves don’t confront when they’re offended.

Some argue she should have told the organizers directly. She should have left her seat, and the session, to find the organizer to make a formal complaint, missing the session she wanted to hear, instead of Tweeting?

She posted a picture to Twitter, with the facts as she saw them, and the hashtag #PyCon. That is a perfectly reasonable thing to do if you think about it. It might not be what I would have done. It might not have been what you would have done. But it is what she chose to do. It worked. The conference organizers knew exactly what was going on and exactly who was involved immediately, and immediately dealt with the situation. It was effective.

PlayHaven chose to terminate one of their employees.  They didn’t post their reasons online. This is NORMAL. Companies are not supposed to divulge when or why they terminate an employee. (They later posted a clarification, but no identifying information).

If they chose to terminate their employee based solely on the PyCon interaction, I think they sorely over reacted. Perhaps they terminated the employee not for the joke but for the fact that he was being paid to learn at a conference and instead was bantering: not paying attention and hindering those around him from paying attention.  A lot of people goof around at work and at conferences, so that might be an over reaction for some work environments. For others, that might be an expected reaction.

The man who was terminated chose to post the experience on HackerNews. To me, that is a TOTAL overreaction. To you that might be a normal thing to do.  This is definitely not what I would have done, but it is the option he chose.

He apologized, which I think was awesome. I just don’t think HackerNews, being a troll Eden, is a place to post personal information about yourself or others.

Then a shit storm blew up.

No one at PyCon is to blame for this fiasco. Bad jokes were made, but unless we start firing people for puns (which I sometimes think we should, but that’s just me hating on puns), there was no fire-able offense there. I am purposely not using their names since I don’t think there should be a witch-hunt there. Adria was offended. I am using her name, since her name has already been thrown out there beyond recapture. The organizers handled the situation very well and didn’t publicize.

So, who is to blame? I don’t think it really matters anymore. All I know is that this week has been horrible. It all started because of an off-color sexual joke. There was nothing sexist, and no one was accused of sexism. But the reaction was sexist, racist, homophobic, misogynistic and outright hateful.

I know so many people who had a hard time sleeping this week. I know several who love the web, love their profession, love what they do and the people they code with who have fallen out of love this week.

It doesn’t matter if you like Adria or you don’t like Adria. For most of you reading this, you’ve never met her. Why and how do you even have an opinion on her? Because of a coward using a fake name on a petition? Because of a conference organizer who respected Adria enough to invite her to speak repeatedly, but decided to hash their issues out in public several years later?

Every time I get an alarming story on Facebook I check to see if it’s true. In this case we have one-sided stories. Adria is rightfully staying out of the spotlight. So, we really only do have hearsay to go on. We don’t have a Snopes. We shouldn’t be formulating opinions.

Who should have been professionally disciplined? How about the SendGrid sysAdmins who couldn’t handle a DDoS attack? Seriously! SendGrid focused on the wrong staff people when their site went down. Even Adria’s site stayed up. CloudFlare anyone? How about the SendGrid CEO for publically terminating an employee. That is completely inappropriate.

But the real culprit is the anonymity of the Internet. Privileged people from their parent’s basement think they can say anything. Some stated it was illegal for Adria to post the picture on Twitter, followed by posting “rights reserved” pictures from her flickr stream. They felt they could threaten her and bully her, then threatened lawsuits when called out. They can tweet, but we can’t call them out on their hateful speech?

4Chan, Reddit, HackerNews? They are not fact checked. They are not safe places.

I just hope that all the people who suffered hundreds of cuts this week — a cut for each sexist, racist, homophobic, xenophobic, misogynistic and outright hateful tweet, article, and comment — heals before they lose faith in our industry and in our society.