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.

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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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="http://www.w3.org/2000/svg" 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.

Pseudo or not-so-pseudo Click Mobile Events

When you ‘click’ with your finger there is no ‘right click’ event. Because of this, mobile devices react when you hold and click instead. Because there is no keyboard, mouse or right click, mobile browsers have some built in behaviors.

Tap Highlight Color

There is no such thing as hover on a touch device. Because of this, we have link tap highlight color which we can control with tap-highlight-color. You can style the highlight color to match your design. While the value transparent will get rid of the often-times unsightly effect, remember that removing the appearance of a tap effect negatively impacts accessibility.

#content a {
  -webkit-tap-highlight-color: #bada55;
#game a {
  -webkit-tap-highlight-color: transparent;

The above would make the background of any link #bada55 in our content, except for the links in the game board, which would show no effect on tap, other than the ones we controlled separately.

Kill the Selection Dialog

When you touch and hold on text copy, or touch and drag, you may have noticed the appearance of a selection diologue allowing you to copy or define the selected text. You can control this in WebKit browsers with:

-webkit-user-select: none;

When user-select is set to none on a DOM node, like a paragraph or even the <body>,  no copy/define selection dialog will appear.

The pointer-events: none; property / value pair is inappropriate in some settings, like games. While it prevents the user from getting the copy/define dialogue, it would also prevent any other touch events from occurring on the user-select targeted DOM node.

Kill the Images Dialog

Similarly to the selection dialog above, when a user touches and holds an image an image save / copy panel appears.

img {
  -webkit-touch-callout: none;

Adding touch-callout: none; to all images will ensure that no image dialog appears when images are touched.

For best user experience and accessibility, do not use the above CSS properties in content sites. The above should be reserved for games and other entertainment, productivity and tool applications.

Kill panning

Sometimes you don’t want your users to accidentally pop up an operating system menu. With CSS you are able to disable panning. You don’t want to completely disable panning all the time, but you can use touch-action: none; to prevent accidental panning if accidental panning is likely to occur.

.active #game {
  -ms-touch-action: none; /* disable panning */

You might be thinking “why not just use JavaScript’s preventDefault();. You could likely get that to work. However, using the four CSS properties above performs better than preventDefault(). CSS is almost always more performant than JavaScript. And, in this case, there is up to a 400ms lag in firing touch events, so it’s best to prevent the panning, dialoging, etc., before it ever happens.

Web Development Tips

My Twitter account, WebDevTips, has been reactivated. Follow @webDevTips to get (almost) daily Web Development tips in your timeline.

Register to vote for the 2012 Presidential Election

Download the National Voter Registration form (PDF)

Below is a list of all the states, with links to more information about voting in that state. We’ve included information about voter registration deadlines, with what that deadline is for 2012 presidential election. This information is what we garnered to the best of our knowledge, but don’t trust it. Look it up your self. The right column has links to registration forms and online applications.

If you find any errors, please visit http://github.com/estelle/vote and do a pull request.


(voter information)

Voter Registration Deadline 2012 General Election Deadline Register
(links to application forms or online forms)
Alabama Voter registration is closed during the 10 days before an election. Applications must be postmarked or delivered 11 days prior to the election. October 26, 2012 Register to vote »
Alaska Received 30 days before the election More information » October 6, 2012 Download application »
Arizona Postmarked 29 days before the election October 9, 2012* Download Application »
Arkansas Postmarked 30 days before the election October 6, 2012 Download Application »
California Postmarked 15 days before the election October 22, 2012 Register to vote »
Colorado Received 29 days before the election.  If received in the mails without a postmark, it must be received within 5 days of the close of registration. October 9, 2012* Register to vote »

Postmarked 14 days before the election (by mail).

Received 7 days before the election (in person)

October 23, 2012 (mailed).

October 30, 2012 (in person)

Download Application »

Postmarked by the 4th Saturday before the election.

Postmarked 10 days before for a special election

October 13, 2012 Register online »
District of Columbia

Postmarked 30 days before the election.

You can register in person on Election Day if you can prove residency.

October 9, 2012 (by mail)*

November 6, 2012 (in person)

Register online »
Florida Postmarked 29 days before the election October 9, 2012* Download Application »
Georgia Postmarked by the fifth Monday before the election October 6, 2012* Register online »
Hawaii Received at least 30 days before the election October 8, 2012 Download application »

Postmarked 25 days before the election

You may also register in person on Election Day.

October 12, 2012 (by mail)

November 6, 2012 (in person)

Download application »

Postmarked 28 days before the election

There is "Grace period" registration up to 3 days before the election

October 9, 2012 Register to vote »
Indiana Postmarked 29 days before the election October 9, 2012 Register online »

Postmarked 15 days before an election (by mail).

Received 10 days before General and Primary Elections (in person).

Received 11 days before all other elections (in person).

You may also register in person on Election Day.

October 22, 2012 (by mail)

October 27, 2012 (in person)

Download application »

Postmarked 15 days before the election xxx

October 16, 2012 Register online »
Kentucky Postmarked 29 days before the election October 8, 2012 Download Application »
Louisiana Received 30 days before the election October 7, 2012 Vote Online »

Received 21 days before the election if by mail, but you can register in person upto and including Election Day.

October 21, 2012 (by mail)

November 6, 2012 (in person)

Download »
Maryland Received by 9:00 pm, 21 days before the election. October 16, 2012 Register online »
Massachusetts Postmarked 20 days before the election. October 17, 2012 Download »
Michigan Postmarked 30 days before the election October 9, 2012 download »

Received 21 days before the election.

You can register in person on Election Day with proof of residency.

October 16, 2012 (by mail)

November 6, 2012 (in person)

Download »
Mississippi Postmarked 30 days before the election October 6, 2012 Download »

Received 5pm or the normal close of business 28 days before the election

October 10, 2012 Register to vote »

Postmarked 30 days before the election (by mail).

You may also register in person at the County Clerk’s office up to – and including – Election Day.  

October 9, 2012 (by mail)*

November 6, 2012 (in person)

Download »

Postmarked the third Friday before the election (by-mail) or by 6pm on the second Friday before the election (in-person).

October 19, 2012 (by mail).

October 26, 2012 (in person)

Download »

Postmarked by the fifth Saturday before the election (by mail) or until 9:00 p.m. on the third Tuesday before the election (in person) by appearing at the office of the County Clerk/Registrar of Voters.

October 16, 2012 Register online »
New Hampshire

Received 10 days before the election (by mail).

You may also register in person on Election Day.

October 27, 2012 (by mail)

November 6, 2012 (in person)

Absentee ballots » or go in person
New Jersey Received 21 days before the election October 16, 2012 Register to vote »
New Mexico Postmarked 28 days before the election October 9, 2012* Get more information » or go to county clerk’s office
New York

Postmarked 25 days before the election. 

October 12, 2012 Register to vote »
North Carolina

Received 25 days before the election (by mail)

You can also register in person and vote early during the “one-stop” voting period 55 days before the election (55 days? WTF!)

October 12, 2012. (by mail)  

You can also register in person and vote early during the “one-stop” voting period from October 18 – November 3, 2012.

Download »
North Dakota North Dakota does not have voter registration Show up on election day. Does not have voter registration
Ohio Received 30 days before election.  October 9, 2012* Register to vote »
Oklahoma Postmarked 25 days before the election October 12, 2012 Register to vote »
Oregon Postmarked 21 days before the election October 16, 2012 Register online »
Pennsylvania Received 30 days before the election October 9, 2012 Download »
Rhode Island

Received 30 days before the election.

Supposedly you can register in person on election day, but only for Presidential elections.

October 6, 2012 (by mail)

November 6, 2012 (in person)

Register to vote »
South Carolina Postmarked 30 days before the election October 6, 2012 Download »
South Dakota Received 15 days before the election October 22, 2012 Download »
Tennessee Postmarked 30 days before the election October 6, 2012 Register to vote »
Texas Postmarked 30 days before the election October 9, 2012 Register to vote »

Postmarked 30 days before the election (by mail) or 15 days before the election (in person and online)

October 9, 2012 (by mail)*

October 22 (in person or online)

Register to vote »
Vermont Received 5pm on the Wednesday before the election October 31, 2012 Download »
Virginia Received 29 days before the election October 15, 2012 Register to vote »

30 days before the election or 15 days before the election if delivered in person to the local voter registration office

October 6, 2012 (by mail).

October 8, 2012 (online).

October 29, 2012 (in person)

Dowload »
Register online »
West Virginia Postmarked 21 days before the election October 16, 2012 Download »

Postmarked 20 days before the election, or the day before by 5:00 pm if handed in in person.

You may also register in person on Election Day.

October 17, 2012 (by mail)

November 6, 2012 (in person)

Register to vote »

Does not accept the national voter registration form. State form must be received 14 days before the election.

You may also register in person on Election Day.

October 22, 2012

November 6, 2012 (in person)

Register to vote »
Download the Forms

Make Twitter DMs appear as if read in all browsers

Edited July 5, 2015

While the DMs no longer appear unread forever (thanks for the fix, Twitter), the ads are still annoying. Simply drag the Add Killer link to your tool bar and click when necessary.

————————— End Edit —————————

I use Twitter.com to access my tweets. I do so from several different computers and several different browsers on each of those computers. Since Direct Messages read/unread status is stored in local storage, I have to ‘read’ my DMs in every browser on every computer to make them appear read in each of those browsers. I hate that.

What I hate even more is that I have to click on my account drop down, then on direct messages link, then I have to individually open each DM thread to make them appear read, and back out of it before clearing the next.

This was driving me crazy. So, I created a little bookmarklet. I simply added the bookmarklet to each of my browsers. Now, whenever I see that little blue glow I simply click on the little bookmarklet, and the blue glow disappears until I actually get a new DM.

You can get the bookmarklet from my Github

This bookmarklet will mark all of you Twitter direct messages as read simply by deleting the entry in local storage.

The Code:

//Get the URL
var urlistwitter=window.location.href.split('/')[2].split('.'); 

// Check to see if the domain is twitter
if(urlistwitter[urlistwitter.length-2]==='twitter') {

   // remove the local storage item of unread DM references

// remove the icon that makes them appear unread
document.querySelector('#user-dropdown-toggle .nav-new').classList.remove('nav-new');

Drag this link to your toolbar. When you need to, click it when your Twitter window has focus to remove the localStorage entry and that annoying blue ‘unread’ icon:

Mark DMs as Read

details and summary polyfill

var summaryClick = function(elem){
  if (!('open' in document.createElement('details'))){
    var deetails = elem.parentNode;
    } else {
     deetails.setAttribute('open', 'open')

add the summaryClick to your <summary> click event listeners

And then in my CSS I put something similar to:

details:not([open]) {
   height: 2em; 
   overflow: hidden;
details[open]  {
   height: auto;
summary::before {
   content: "▶ ";

Only browsers that understand the JS used will understand the selectors used. So, this isn’t fool proof, but it’s nice, quick and dirty.