class="alignnone size-full wp-image-13395" />

The Webbie Madness event this year had a large March Madness style voting grid where people were encouraged to come pick winners in multiple rounds. The first round had 32 people in 16 battles. The peoples names were disguised. It took a while to figure out who was who and decide who to vote for, and it wasn't something I was able to do in one "sitting". I suggested they save the votes as people did them to localStorage, that way you could come back any time and finish. Like total badasses, they did it!


JSBin (By Remy Sharp, who did Snapbird also, go figure) allows you to save your starter HTML/JavaScript template so the next time you come back to use it, you can use that same template.

SHOULD be using localStorage


Typekit has a Type Tester tool when viewing a particular font. You can type your own text into the box to see what it will look like in that font. Unfortunately when you go to another font, that custom text you entered is gone. This would be a great case for localStorage. When the value in that area changes, save it to localStorage, and load that value in when the page loads. I think that would be a great timesaver, as I think jumping around to see that text in multiple fonts is a pretty common use case.


CSS Lint has a grid of checkboxes for what features you do/don't want to CSS Lint to look for when you test your CSS. It would be really nice if this used localStorage to remember what checkbox configuration you used, so if you reload the page or come back later, it's the same. So if you don't like the "Don't use IDs" checkbox, you can turn if off forever =).


Pretty much any website with a login form could use localStorage to keep the username saved. So when a user comes back, it's one less step for them to log in.


Zeldman.com has links in the footer which allow you to toggle the colors used on the site between two versions. It saves this as a cookie which is great, but is subject to the frailty of cookies. Any site like this with alternate styling choices (e.g. font-size toggle) could save that information in localStorage and have it persist better.

MOR

This is the tip of the iceberg. I'm sure people with more developer-oriented minds can think of bigger and better ideas for this. Saving your place in a game? Caching assets? What else you got?

Way more info from Mark Pilgrim.


Advertise here with BSA

Examples of Sites where localStorage should or is being used is a post from CSS-Tricks

]]> http://css-tricks.com/13392-localstorage-examples/feed/ 32 CSSFraghttp://shauninman.com/archive/2011/07/25/cssfrag http://css-tricks.com/13386-cssfrag/#comments Mon, 25 Jul 2011 18:41:27 +0000 Chris Coyier http://css-tricks.com/?p=13386

Shaun Inman with a Safari extension (and Firefox port) that impliments the (not real) fragment identifiers proposal. Essentially: same-page document links that don't need the ID/hash-tag thing. Alternatively, you target with a CSS selector:

http://example.com/lorem.html#css(.content:nth-child(2))

Direct Link to ArticlePermalink


Advertise here with BSA

CSSFrag is a post from CSS-Tricks

]]>
Shaun Inman with a Safari extension (and Firefox port) that impliments the (not real) fragment identifiers proposal. Essentially: same-page document links that don't need the ID/hash-tag thing. Alternatively, you target with a CSS selector:

http://example.com/lorem.html#css(.content:nth-child(2))

Direct Link to ArticlePermalink


Advertise here with BSA

CSSFrag is a post from CSS-Tricks

]]>
http://css-tricks.com/13386-cssfrag/feed/ 0
//AN_Xml: g the text until you actually type), but don't display: none or remove the labels. I recently heard a heartbreaking story about a blind girl trying to apply for college and the form had missing labels so she had no idea what to put in what fields. So if you're going to use placeholder text as a label replacement, use an accessible hiding technique for the labels.

//AN_Xml:


//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:

Tabs

//AN_Xml:

Just because a panel of content isn't the "currently active" one doesn't mean it should be inaccessible. Hide it with an accessible hiding technique instead. Or, you may not even need to. If all the panels are the same height, you can just flip-flop which ones is visible by adjusting z-index.

//AN_Xml:


//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:

@media queries

//AN_Xml:

Turning on Voice Over in OS X and using Safari is a screen reader. Now imagine that Safari window was open to a very narrow width and the page had some @media queries for handling smaller viewports. And say that @media query hides some things with display: none in order to better visually accomodate the space. This could be good or bad for accessibility. Are you hiding a bunch of crap that isn't important to the page? Or are you hiding useful things that a person using a screen reader should have access to like they normally would.

//AN_Xml:


//AN_Xml:

No Expert Here

//AN_Xml:

This entire post is based on the premise that display: none is bad for accessibility. It's not based on my deep and thorough understanding of screen readers and general accessibility. If you have more to add, things to correct, or personal experience to share, please do.

//AN_Xml:

Places It’s Tempting To Use Display: None; But Don’t is a post from CSS-Tricks

]]> //AN_Xml: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/feed/ //AN_Xml: 70 //AN_Xml: //AN_Xml: //AN_Xml: Responsive Navigation Patterns //AN_Xml: http://bradfrostweb.com/blog/web/responsive-nav-patterns/ //AN_Xml: http://css-tricks.com/responsive-navigation-patterns/#comments //AN_Xml: Sat, 25 Feb 2012 15:26:51 +0000 //AN_Xml: Chris Coyier //AN_Xml: //AN_Xml: //AN_Xml: http://css-tricks.com/?p=16350 //AN_Xml:

Brad Frost shows examples and covers the various techniques/pros/cons for handling navigation on small screens.

//AN_Xml:

Direct Link to ArticlePermalink

Responsive Navigation Patterns is a post from CSS-Tricks

]]>
//AN_Xml: Brad Frost shows examples and covers the various techniques/pros/cons for handling navigation on small screens.

//AN_Xml:

Direct Link to ArticlePermalink

Responsive Navigation Patterns is a post from CSS-Tricks

]]>
//AN_Xml: http://css-tricks.com/responsive-navigation-patterns/feed/ //AN_Xml: 0 //AN_Xml:
//AN_Xml: //AN_Xml: //AN_Xml: