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.

 

State
(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 »
Connecticut

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 »
Delaware

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 »
Idaho

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 »
Illinois

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 »
Iowa

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 »
Kansas

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 »
Maine

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 »
Minnesota

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 »
Missouri

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

October 10, 2012 Register to vote »
Montana

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 »
Nebraska

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 »
Nevada

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 »
Utah

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 »
Washington

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 »
Wisconsin

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 »
Wyoming

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
   window.localStorage.removeItem('dm_threads');
}

// 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;
    if(deetails.hasAttribute('open')){
     deetails.removeAttribute('open');
    } 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.

SpeciFISHity: CSS Specificity

Some people are confused by CSS Specificity, especially with all of the (not-so) new CSS3 Selectors. The image below may help make sense of CSS Specificity.

X-0-0: The number of ID selectors, represented by Sharks
0-Y-0: The number of class selectors, attributes selectors, and pseudo-classes, represented by Fish
0-0-Z: The number of type selectors and pseudo-elements, represented by Plankton a la Spongebob
*: The universal selector has no value

Download the specificity chart and read the rest of the SpeciFISHity article here

HSLA Color Picker / RGBA Converter

color:hsla(
328,   H  

blah

100%,   S  

44%,   L  

1.00   A  

);

HSLA Colors

6 Best Practices for Marking up your HTML5

There are several coding rules required for XHTML that were optional or even unsupported in HTML 4. While HTML5 supports both coding formats, here are some non-required best practices:

  1. Use lowercase for markup: In XHTML the element tags must all be in lowercase as must all the attribute names. While HTML5 supports camel case and everything else, please use all lowercase markup. Nothing in the W3C states that attribute values need to be lowercase, but some, like id, are case sensitive, so stick to lower case.
  2.  Quote all attributes: In XHTML, all attribute values must be encased in single or double quotes. In HTML5, only attribute values with spaces or special characters are required to be in quotes. Make your code legible. Make us happy. Quote all attributes.
  3. Close all elements: In XHTML, every opening tag must have a closing tag. Empty elements such as <img/> and <br/> must be self-closing. In HTML5 some tags can be left unclosed. While omitting the trailing slash or closing element reduces the number of characters on a page, it also allows for sloppy code.Some speakers / blog posts recommend omitting trailing slashes and end tags to reduce the number of characters to make smaller files for mobile. The few bytes saved are not worth the risk, especially in non-empty elements. Reducing the number of DOM elements will have more of an impact than reducing the number of characters in this way. Make us happy. Provide a closing tag for each opening tag.
  4.  Nest all elements: In XHTML, all tags must be properly nested: If you start tag <a> and then start, or nest, a <strong>, you must close tag </strong> before you close the </a>. All tags must be nested correctly, which is easier to trouble shoot if you close all elements (see above).
  5. Be consistent in providing values for all attributes: In XHTML, all attributes must be coded as attribute/value pairs, even Boolean values. The default selected option in XHTML should be written selected=”selected”. In HTML5, the same can simply be coded as selected. Providing values for Boolean attributes is not necessary, since including the attribute property makes a Boolean value true even if the value of the attribute is false in most browsers. Whether you choose to include or not include Boolean values, be consistent with your decision either way. If you include Boolean values, always include them. If you omit them, always omit them. And, if you include a =”” for a Boolean (or even non-Boolean) attribute, always include the value, as the empty quotes can have unintended consequences, especially when it comes to the form attribute.
  6.  Use the most semantically correct element for the job: In XHTML, elements need to be coded in a semantic manner. Tables and forms cannot be included in paragraphs. Form elements, being phrase elements, need to be contained within a semantic block level element, such as a paragraph or table cell. Yes, you can use spans and divs to contain everything on your page, but if a header is a header, use an <h1-6> tag.

@font-face and FontSquirrel

Creating various font file types: FontSquirrel

If you have a font that you are legally allowed to redistribute, you don’t need to use these services. You do, however, need to convert your font into EOT, SVG, WOFF, etc.

We now know the syntax for the two fonts used in our webpage. The main question now is, "how do we get all these font files?"

One of the easiest services is Font Squirrel’s @font-face generator at http://www.fontsquirrel.com/fontface/generator. This service allows you to select fonts from your desktop, and convert them to TrueType, EOT, WOFF, SVG, SVGZ and even base-64 encoded with a few clicks of your mouse.

FontSquirrel is a free service. When using it, check on ‘Expert’ to be able to select your character set. Add your fonts, select ‘Expert’, then create your own settings and add your own character subsets.

Here are the options provided by font-squirrel:

  1. Apply Hinting to improve rasterization in Windows.
  2. Fix vertical metrics to normalize the "padding" on the top and bottom of the font to be the same across browsers and platforms.
  3. Remove Kerning to reduce filesize.
  4. WebOnly™ making the font uninstallable on a desktop computer.
  5. Subset Fonts to remove extraneous glyphs from your font reducing filesize, as explained above.
  6. Style Linking to include font property descriptors, adding the appropriate font-weight and font-style statements to the @font-face at-rule when creating the sample CSS.
  7. Base64 encoding of font in a CSS stylesheet as a data URI
  8. OpenType features allowing the "flattening" of selected fot features like ‘small caps’.
  9. Adjust spacing by loosening or tightening the "tracking" of a font. The value is in units of the em square. If the em square is 2048, then adding 50 units of padding makes the spacing slightly looser.

If you so choose, Font Squirrel can create web only fonts files that are not installable. Check the WebOnly box under Misc Options to disable font installation by your visitors.

Font Squirrel can also create smaller font-files by only including a subset of characters. Select the character type and language(s) other than accent-less Latin characters. You can also select the ability to remove kerning and/or even include small caps if the font allows.

For our newspaper, we can select what character set we want or need. For our font Carnevalee Freakshow, which is used for our ads and displays in uppercase, we need a small subset of letters. I recommend including uppercase, numbers, punctuation and the unicode characters of 2122, 00ae, 00a9 (trademark, registered and copyright symbols).

For the League Gothic font I would recommend a more expanded character subset. League Gothic is used for the article titles, which like our ads, are all uppercase. We do not need to include lowercase letters. However, we do need to consider that users may translate our content into other languages. We need to include capital letters, numbers, and punctuation. We should also include the capital letters of accented and non-roman character sets. The page in its current state is using a very small subset of characters, but what if someone uses translate.google.com into Greek?

When employing @font-face, minimize font file size as much as reasonably possible while making sure to include enough characters that a translated version of your site is still accessible.

Once you’ve uploaded your font for processing and selected all your options, hit "Download your kit". FontSquirrel provides a download containing your font files with the extensions requested, a demo HTML file for each font face style, stylesheet from which you can copy and paste CSS markup directly into your stylesheet.

To target all browsers, make sure you have created TTF, WOFF, EOT and SVG font file formats. Once you have created the font files, upload the web fonts to your server.

Copy and paste the CSS code provided, changing the path the font folder. For whichever selectors you want to implement your included font, modify the font-family property value to include the name of your font.

Troubleshooting

If your fonts aren’t loading in a particular browser, it could be a browser quirk.

If the font is not showing in any browser, it could very well be the path in your CSS. Check to make sure that the font file is actually where you expect it to be. Web Inspector (webkit), DragonFly (Opera) or Firebug (the Firefox extension) will indicate if the file is missing.

FontSquirrel provides a specimen and a png of windows rendering. Check the font-demo.html for your file to make sure that the specimen looks like the png. If it does, you know that the font is working, and that the issue is fixable.

If you’re sure that the path is correct and the file is where it is supposed to be and is a working font file it may be an .htaccess issue.

If your fonts are on an IIS Windows server, realize that Windows does not serve up files if it does not understand the MIME type. Add WOFF to your list of MIME types.

There are also some browser security features. IE9 and Firefox both require that fonts be served from the same domain as the rest of the webpage.

Potential Cons of @font-face

Fonts can improve performance and decrease maintenance time if used instead of text images. But remember that font files can be huge. Really huge. If you need a particular font for a banner ad, it may make more sense with limited text requirement to create an image instead of including font files. Weigh the pros and cons.

When considering including multiple font files with your site, consider performance. Multiple fonts not only increase your sites download speed, but font overuse can be tacky and the wrong font can may your content difficult to read.

Browsers won’t render a font until the entire font has downloaded. There is the potential of text appearing before the font is loaded, creating a Flash of Unstyled Text (FOUT). To try to prevent this from happening, make your file sizes as small as possible, gzip them, include your @font-face rules at the top of your CSS file at the top of the page, and generally employ all the tricks you employed to make sure image files loaded fast.

Of course, I don’t want to scare you away from using @font-face. I just want to encourage you to not take the decision to include various fonts too lightly.