Storing Arrays in LocalStorage

December 6, 2013 at 4:48 pm in HTML5, Javascript, Web Storage

LocalStorage is amazing. We can persist data right on the client’s computer in the browser. We’ll have 5 to 10 MB of storage available.  However, it’s often not quite good enough for our needs; the values we store must be strings.

But with the help of JSON.stringify() and JSON.parse(), we can use LocalStorage for much more.

var names = [];
// collect some stuff into  the names array.
for(var count=0; count < 5; count++){
  names.push(prompt("New member name?"));
}

// convert the array of names into a JSON string. 
localStorage["names"] = JSON.stringify(names);

Later, we’ll want to retrieve those from the localStorage database. So we turn the string back into an array like this:

var namesFromLocalStorage = JSON.parse(localStorage["names"]);

You could use LocalStorage as a cache for all sorts of things. Simple arrays, complex objects, and even content. Prefetch records from the backend in the background, push it into LocalStorage as a simple cache. When the user hits the “next page” button, display the results of LocalStorage’s content while fetching the next set of records.

How are you using LocalStorage in your projects?

No comments

The blockquote element

November 4, 2013 at 9:05 pm in HTML5, Semantic Markup

In HTML5, the <blockquote> element is meant to be used to mark up quotes from external sources, with or without citations. The specification has recently been altered to allow developers to place <cite> tags, used for citations, inside of the <blockquote> tags.

You can mark up a citation to a quote like this now:

<blockquote>
  <p>
    The blockquote element represents a section that is quoted
    from another source.
  </p>
  <p>
    Content inside a blockquote must be quoted from
    another source, whose address, if it has one, 
    may be cited in the cite attribute.
  </p>
  <footer>
    - <cite>
        <a href="http://dev.w3.org/html5/spec-preview/the-blockquote-element.html">W3C HTML5 Blockquote specification</a>
      </cite>

  </footer>
</blockquote>

Pretty awesome stuff.

No comments

box-sizing

September 5, 2013 at 1:33 pm in CSS3

In the old days, there were two box models; the Internet Explorer “quirks mode” box model and the standard box model.

In the standard box model, the size of the box was the width of the box plus the padding. So if you had defined your box to be 300px wide, and you had padding: 10px then the size of your box would be 320px, or 300px + 10px left padding and 10px right padding. This is one of the most difficult things to learn when doing CSS layouts.

But in the “quirks mode” box model in IE6, the size of the box would be the width of the box, and if you applied padding or borders, it would adjust accordingly. Personally, I always thought that was the more reasonable approach, but it was also the number one reason sites looked weird in other browsers if you designed them in IE.

Fast forward to now, and we have a new solution. Add this to your CSS:

*, *:before, *:after{
  -moz-box-sizing: border-box;
  -webkit-box-sizing:    border-box;
  box-sizing: border-box;
}

The box-sizing property makes the box model work just like quirks mode in IE. To put it simply, that means when you’re dividing the page into columns and you say that each column is 50% wide, then no matter what kind of padding you put in those columns, the width will not change.

I recommend this approach, but you should be aware that it won’t work in IE 8 and below.

You can read more about this at http://www.paulirish.com/2012/box-sizing-border-box-ftw/

1 comment

Inlining CSS Fonts

August 31, 2013 at 5:07 am in CSS3

Loading fonts with CSS3 usually involves specifying several URLs in the stylesheet for the various font formats. These mean an extra request which can make things a bit slower. It turns out it's possible to use data-uri and embed the font right in the stylesheet. Read more here.

No comments

HTML5 and CSS3 Second Edition In Beta

June 19, 2013 at 12:18 am in HTML5

In the last three years, HTML5 and CSS3 have only gotten better, and browser support has improved vastly. We have many more tools in our arsenal, but the original HTML5 and CSS3 book I wrote in 2010 was quickly becoming out of date. IE6 and IE7 have been dropped by Microsoft, which opens up a lot more possibilities, and technologies that were just getting off the ground in 2010 are much more stable now. So it was time to do a new version of the book.

This revised second edition walks you through new features such as IndexedDB, CSS Animations, SVG, and more, along with updated fallback solutions. You’ll use HTML5′s new markup to create better structure for your content and better interfaces for your forms. You’ll work with new form controls and validations, and build interfaces that are accessible to assistive technology and mobile devices. You’ll draw with the Canvas and SVG, do simple animations with pure CSS, work with advanced CSS selectors, and make audio and video play natively.

You’ll bring your web apps to the next level as you use Web Storage and IndexedDB to save data on the client and make applications available offline. And you’ll discover how to use web sockets, geolocation, cross-document messaging, and the History API to create even more interactive applications.

Please go check it out over at the book’s web site.

No comments

The Mimimal HTML5 page.

February 19, 2012 at 3:28 pm in HTML5

According to this very informative article, the amount of code you need for a valid HTML5 page is quite small. In fact, it’s as simple as

<!DOCTYPE html>
Smallest HTML file!

Modern web browsers will actually automatically fill in the rest the details for you. I believe it’s still good practice to include all of the proper HTML markup in your document. Just because browsers can rewrite your document for you doesn’t mean you should let them.

No comments

Revenge of the self-closing tags!

April 4, 2011 at 5:51 pm in HTML5, video

Developers who’ve been working with XHTML for a long time tend to feel a little awkward when they first notice the lack of self-closing tags in HTML5 markup. But HTML5 isn’t derived from XML, so it’s not going to conform to the same rules that XHTML did. However, the sepcification says it’s fine to have self-closing tags in our HTML5 markup.

The problem with self-closing tags in documents served with the text/html mimetype is that browsers start stripping off those self-closing tags. After all, HTML documents never had self-closing tags, and XHTML documents are supposed to be served with a different MIME type which is unfortunately incompatible with IE 6,7, and 8.

But because of browser inconsistencies, we’re starting to see some self-closing tags make their way into valid HTML5 documents again. One placei n particular is the source element in HTML5 video.

 <source src="http://video-js.zencoder.com/oceans-clip.mp4" 
               type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

It seems that due to some strange parsing bugs, the video element doesn’t load properly unless the source tag is self-closed.

It’s an unfortunate side-effect of ten years of exceptions upon hacks upon exceptions.

No comments

More than half of web users can use HTML5 video?

January 7, 2011 at 6:44 pm in video

A great article over at the VideoJS blog states:

As we roll into 2011, HTML5 video hits a major milestone. 50.5% of web users now support HTML5 video playback. This number was gathered by comparing browser versions that support HTML5 video with StatCounter’s world-wide browser version statistics.

You can read more at http://videojs.com/2011/01/html5-video-statistics/

I’m exceptionally excited about this, and you should be too. We’re a step closer to being able to provide video to end users without them having to worry about plugins or codecs. There’s a long way to go, but this is certainly an improvement from the days where Internet Explorer 6 had 80% of the marketshare.

You can find more detailed information on incorporating HTML5 video with appropriate fallbacks in the book.

No comments