Top Five Resources for HTML5 Developers

Whether you are just learning about HTML5 or you’re cranking out code and don’t want to be slowed down, this is my 2012 short list of definitive HTML5, CSS3 and JavaScript resources that you need right now, at your fingertips, as you’re developing apps. I suggest bookmarking all of these web sites. If you use other sites that rock, please leave a comment with links below!

  1. Canisuse.com – This is an awesome comprehensive site where you simply type what feature you are looking for in the search box and the page will show a table outlining which browsers support that feature.
  2. HTML5Rocks.com – From interactive presentations and tutorials to code playgrounds, this site is a great place to learn more about HTML5.
  3. W3Schools.com – Excellent resource for beginners and experts. This site has embedded “Try it yourself” samples that you can modify on the fly. This site also includes a handy HTML5 tag reference
  4. CSS3.info – Previews, module status, articles…this site is a great resource for all things CSS3.
  5. W3C HTML4 vs HTML5 Comparison – this is the constantly updated, definitive source of what’s different between the two specifications.

And while not in my top five, I also have to give an honorable mention to Html5please.us and findmebyip.com. I’ve found that these sites are not as complete as caniuse in terms of the total number of features listed. But, I like them as a double check for browser support.

Holy Grail Resources:

W3C – W3C HTML 5 Specification – The World Wide Web Consortium is the group that writes the standards for HTML.

WHATWG.orgHTML Living Standard This is the technology working group that makes initial recommendations to the W3C.

[Updated broken links: Dec 6, 2016, Apr 5, 2017]

HTML 5 and Web Maps Seminar

@derekswingley and I are presenting several one hour Live Training Seminars on HTML5 and ArcGIS for developers on Thursday, February 23, 2012. ArcGIS is the flagship mapping and geo-spatial product line for the company I work for: Esri. Now, even if you aren’t currently using anything geo I still encourage you to listen in for an hour and hear what we have to say about HTML5 from a web app development perspective.

We’ve aimed the content at both new developers and experience developers that haven’t had a chance to play with HTML5 yet. Our goal is to help you understand what HTML5 really is and give some concrete uses cases and tips on how to effectively use it. So, sign on up, hopefully gain some new insight and ask some questions!

Click here to find out more details.

Tips for Clearing the Browser Cache: IE, Chrome and Firefox

When doing web development, especially JavaScript/HTML, it’s sometimes hard to tell if your changes loaded when you refreshed the web page, in fact sometimes your changes aren’t reflected. The best thing to do is delete the cache and then reload the page. So, this post will tell you how to that for the three most used browsers – Firefox, IE and Chrome.

Before I tell you how to do it, it’s good to know what the cache does and why. It’s basically a file directory where your browser stores temporary files such as web pages (e.g html files), images (e.g. png’s) and other web-related items including sound files ( e.g. mp3’s). The idea behind storing these files is the user’s experience: it’s faster to retrieve a local file than it is to retrieve it from some remote web site and the page appears to load faster to the user. Another reason is reduces server load for high usage sites because many of the files are loaded locally for repeat visitors. But, even though you may care about this your end users certainly don’t.

Chrome 16.x (Windows)

Go to the top right of the browser and click on the wrench symbol, then Tools > Clear Browsing data. Chrome will then load the Options page and let you choose by timeframe how far back to go when deleting data. When you are doing frequent web development the “past hour” option is awesome. That way you can delete your most recent work and all your other cookies and data will stay in the cache.

 

Firefox 10.x (Windows)

Go to the top left of the browser and click the pull down menu, then History > Clear Recent History. Firefox then loads a popup window that also lets you choose how far back in time to delete data. Firefox was the first browser to offer the “last hour” option. Again, it’s a really nice thing to have when you are doing frequent builds and constantly reloading the browser.

 

Internet Explorer 9 (Windows, of course)

For IE, go to Tools > Internet Options > Delete. Unlike Firefox and Chrome, IE deletes everything and I don’t know of a way to tailor the tool to not do that. This is something to be aware of it IE is your primary browser and you need to blow away the cache. All password cookies and anything else you have stored will be deleted. IE does, however, have a nice feature that I use a lot which is the Delete Browser History on Exit option. Again, if you are doing lots of builds (code then reload page to see changes) then consider checking this option and save yourself a bunch of time clicking through menus every time you reload a page.