Lyrinė Tālrunis: “Telephone” with Lyric Translations

Last week I hacked together a mashup of HP’s IdolOnDemand‘s free Speech Recognition API and Google’s fee-for-service Translation API to create a Lyric Translator. Of course, I had to make the site responsive using VW units for text, and Flexbox for the layout. I also used a datalist to provide an optional list of usable media files. Then, tonight, I wrote a blog post explaining these components.

Enjoy!

The app

Lyrinė Tālrunis, or “Lyric Telephone”, does two things:

  1. It captures the text from an audio file using the free Speech Recognition API from HP IdolOnDemand,
  2. It then translates the captured text into from the original language into French, German, Spanish, Vietnamese, Russian and then back to the original language, enabling you to create new lyrics for — or a more entertaining interpretation of — your favorite songs.

The name is basically Lyrics, as in lyrics from songs, but you can use any media file, and ‘Telephone’ in reference to the game of telephone you learned in pre-K, where when a story gets passed to too many people (or languages) the original text gets morphed into something else.

As deployed, the app provides for two preloaded options of Rudolph the Red-nosed Reindeer and Frosty the Snowman, but you can include a link to any .wav or .mp3 file you find on line.

I’ll be expanding the application to allow for file uploads, and hope to implement uploading directly from your device’s microphone with:

<input type="file" accept="audio/*;capture=microphone">

For right now, simply find a song online, or even a video file, and include the full URL in the input box.

HP’s IdolOnDemand Speech Recognition API

IDOL OnDemand’s Speech Recognition API creates a transcript of the text in an audio or video file. It supports seven languages – including both US an UK English (yes, it will produce “colour” instead of “color” if you ask it to).

You do first need to register with IdolOnDemand to get an API Key. Then it’s a simple AJAX call.

The values you need create the request URL for the speech recognitio API include:

  • The encoded URI to your .wav or other audio of video file.
  • Your API Key
  • The language your file is in (defaults to en-US)

Here is how I created my URL:

  var apikey = YOUR_HP_API_KEY;
      url = document.getElementById('url').value,
      language = document.getElementById('lang').value, 
      query = 'https://api.idolondemand.com/1/api/sync/recognizespeech/v1' + '?';       
  query  += "&url=" + encodeURIComponent(url);
  query  += "&apikey=" + apikey;
  query  += "&language=" + ( language || "en-US");

Where url is the id of the input where the user enters the full path to the media file. The input has 3 default options for you to choose from, but you can enter any text you wish. This is explained in the <datalist> / list attribute section below.

The ‘lang’ is the ID of the <select> drop down that list the langage of the media file.

<select name="lang" id="lang">
  <option value="en-US">English (US)</option>
  <option value="en-GB">English (UK)</option>
  <option value="de-DE">German</option>
  <option value="es-ES">Español</option>
  <option value="fr-FR">Français</option>
  <option value="it-IT">Italiano</option>
</select>

The speech recognition API works for all the above languages and Chinese. Surprisingly, I can actually read and understand all of the languages above (don’t ask).  As I can’t read Chinese and wouldn’t be able to debug it, I didn’t include it in this app.  If you want to include Chinese as an option, please feel free to fork the app repo and add Chinese back in, but please use your own API key.

IDOL OnDemand’s Speech Recognition API uses the language code and the country subcode, so use the long form like “en-US” and not “en”. Don’t know what I am talking about (or have insomnia)? Read up on language tags.

Depending on the file size, your file can take a while to process, so make sure to let your user know something is happening, and make sure to handle errors in case it times out. For better user experience, when the button gets clicked, calling the API, the content of the button changes to a rotating pipe in the hopes of making a quick and easy spinner. (Check out the CSS file if you want to learn the animation, as I am not covering it here). The animation stops and the button returns to the original text when the text extraction of the media file is returned from the Speech API.

 var app = {
     ...
    
     init : function () {
	     // add eventHandler to button
        document.getElementById('doThis').addEventListener('click', function(){
          app.submitToHP();
          app.changeButton();
        });
      },

      // get the words from the original media file
      // the `data` object contains default values & the `apikey`
      submitToHP : function () {
        data.url = document.getElementById(
url').value || data.url;
        var query = data.request_url + '?';
            query += "&url=" + encodeURIComponent(data.url);
            query += "&apikey=" + data.apikey;
            query += "&language=" + document.getElementById('lang').value || "en-US");

        var request = $.ajax(query, function(e) {
                // successfully sent - no actions
              })
            .done(function(e) {
                // response received - handle it
                app.acceptResponse(e.document[0].content);
              })
            .fail(function(e) {
                // error - handle it
                app.acceptResponse('Oops, something went wrong.');
              })
            .always(function(e) {
                // finished - stop button animation
                app.revertButton();
            });
      },
      ... // continues

The reqest returns a JSON object:

{
  "document": [
    {
      "content": "the media speech is here"
    }
  ]
}

So we grab that content with:

e.document[0].content

where e is the response.

The other functions included, but not described include:

  • app.changeButton() — changes button to a spinner
  • app.revertButton() — resets the button to original behavior
  • app.acceptResponse(e.document[0].content) — writes text to the page, and initiates translations, which are done via the Goole Translate API

Google Translate API

I tried finding a good, free, intuitive, easy to use, translation API, but came up empty handed. Sorry Microsoft, you have too many steps, and I couldn’t just “dive right in.” I do, however, have the Yandex translation API on my list of things to look up. It looks like it might be a good free alternative to Google’s fee-for-service translation API.

Time is money, and I was already familiar with the Google Translate API, which is the main reason I chose it. Again, fork me repo to try something different.

The request URL for Google Translate API looks something like this:

var request_URL = "https://www.googleapis.com/language/translate/v2?key=" +  
  YOUR_GOOGLE_API_KEY +
  "&source=" + from +
  "&target=" + to +
  "&q=" + encodeURIComponent(text);

Where you use your own Google API Key, the ‘from’ is the original language, the ‘to’ is the language you want to translate to, and the text you encode with encodeURIComponent(text) is the return value from the Speech Recognition API, what we captured as e.document[0].content above.

As we are translating from the original language to French, German, Spanish, Vietnamese, Russian and then back again to the original language, we are calling the Google API 6 times. The important information is how to create the link for Google’s REST API. You can take a look at the source code to see how I iterate thru the various languages and call the AJAX call for each translation.

CSS3 Values

The page is full responsive. On larger devices, the font is larger. This is done without @media queries. I know. I know. Media queries are all the rage. But they’re not always necessary. CSS3 provides responsive features that enable the creation of responsive content without having to define where your design splits. The browser can do it for you.

In this case, it’s the VW, or viewport width unit, that makes the site naturally responsive. The VW unit is relative to the viewport width: the viewport width is 100vw. If you don’t know all your length units, my 4 year old post needs some updating.

  h1 {
    line-height: 30vh;
    font-size: 8vw;
  }

The above CSS snippet reads “the line height should be 30% of the viewport height. The font size should be 8% of the viewport width”

As the viewport narrows, the font-size will shrink. Yes, it will get illegible if the viewport is too narrow, but no phone is narrow enough to make that illegible. That size is relatively huge, and will even be legible on new watches. And the height shrinks, so does the line height, meaning the h1 will never be taller than 30% of the height of the viewport.

I used VW and VH for the height of the blue header and containers for the translation content: even when empty, the articles will be 40% of the document height.

The content in the button and the input also grow and shrink as the viewport grows or shrinks. vh and vw are very well supported, though vmax, the maximum value of the viewport width and height, and vmin, the lesser of those 2 values, is not fully supported.

CSS Flexible Box Layout Module

CSS Layout is fun! No. Seriously. It is. Just use flexbox.

body {
  display: flex;
  flex-direction: column;
  flex: 1 0 300px;
}
header, article {
  flex: 3;
  min-height: 40vh;
}
footer, main {
  flex: 1; 
  max-height: 10vh;
}
main, article {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
section {
  flex: 1;
}
@media screen and (max-width: 500px) {
  main, article {
    flex-wrap: wrap;
  }
}

Above is just part of the CSS. I’ve posted the CSS relevant to the flexible layout of the document. You’ll note that the layout has four vertical sections: the header, main section with the buttons, the articles where the translations go, and the footer.

The body CSS code block above makes the body a flex container, and the header, main, article and footer all flex items. The flex-direction is column, so they’re one on top of another instead of row, which would put the parts side by side.

The main and article are not only flex items, but they, in turn, are also flex containers. The default flex-direction is row, so the children of the main and the children of the article will be laid out side by side within their parent. We have two flex items within the article (the original text result from the Speech API and the final result processed thru 5 translations.) These will be side by side, and will always be of equal height. They will not wrap by default, but if the width of the screen is 500px wide or less, the row of content can wrap, which means the translation can land below the text capture, and the input can land below the button, which can fall below the language selection.

This project is to show a very simple example of flex layout, and is not meant as a full flexbox tutorial. To learn more about flexbox, I have an open source flexbox tutorial you can play with. There you can see that justify-content: space-around; means that the extra space around the items will be evenly distributed around each item, and all the other flexbox, including several not included in this demonstration.

Datalist element and list attribute

Take a look at the input on the page. You’ll note, in modern browsers, there is a little arrow on the right, which if clicked, shows an autocomplete. This effect is achieved using the HTML5 list attribute along with the <datalist> element and that element’s nested <options>.

<input type="url" list="urls" id="url" placeholder=" URL of .wav file">
    
<datalist id="urls">
  <option value="http://estelle.github.io/audiotranslator/data/frosty.wav">Frosty</option>
  <option value="http://estelle.github.io/audiotranslator/data/rudolph.wav">Rudolph</option>
  <option value="http://estelle.github.io/audiotranslator/data/tet.wav">Test File</option>
</datalist>

In this example, we have an <input> of type url, with a list attribute. The value of the list attribute is the value of the ID of the datalist element. This associates the urls datalist with the input. If a browser doesn’t support datalist, it will simply not show the datalist. Totally progressive enhancement: the form control is still usable in Netscape 4.7

If the browser does support datalist, a drop down menu of the options will show when the input has focus. It will only show the values that are still potentionally valid. If you enter ‘h’, all the values will still show. ANy other character, and the options will no longer be valide options, and they will no longer be displayed. I have a tutorial on web forms, which demonstrates the inclusion of datalist on text, url, email, number, color, range, date and time input types.

Future of the app

Here are some ideas I have for expanding the application. Please fork and do it for me :D

  • File upload option
  • Drag and Drop from desktop to upload file
  • Audio Capture directly from your device
  • Inclusion of original <audio> for your listening pleasure

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

Dear Recruiter

Please remove me from your database and don’t contact me again.

You are obviously spamming every developer in your database based on a key term search or some other effortless method.

While you don’t want to waste your time looking at the qualifications of those you spam, you have no issue with wasting our time.

Wasting our time shows a lack of integrity and gives all recruiters a bad name.

Had you taken a peek at the job description and a glance at whatever information you have on me, you would realize that this job posting has nothing to do with my skillset, and likely the skillset of 99.9% of the 10,000 other developers you’ve spammed. It’s a shot in the dark that wastes countless hours of those you spam. But you likely don’t care about that.

If you don’t like your job enough to actually do it well, find a different career.

-Every developer, ever.

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 irc.freenode.net 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:

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

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 (http://code.google.com/p/h5o/) to your browser.

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

 

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

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:

 

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

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">
  </picture>

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

 <img alt="responsive image"
           src="small.jpg"
           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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="329">
  <title>The Clown Car Technique</title>
    <defs>
    <style>
    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;}
    }
    </style>
  </defs>
  <g>
    <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" />
  </g>
  </svg>

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="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
 <title>Clown Car Technique</title>
 <style> 
  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);}
 }
 </style>
</svg>

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?

Note:

* 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 Change.org 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 Snopes.com 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.