Master List of HTML(5)/JS/CSS Resources

Following is a list of HTML5 (now just HTML), JavaScript, and CSS resources that I find very useful.  I thought others might like a one stop place for such information as well.  I will be continually updating this list, so that it that stays relevant.  Feel free to email me or leave a comment with any resources that you find compelling and I’ll add them to the list!

EDIT January 30, 2012: It’s been nearly a year since I first posted this list, so much has changed since then.  Rather than try to maintain this single post, I’ve created a github repository.  Go there for the latest and greatest list.  I encourage others to add their favorite links as well.  I will keep this post active for posterity as well.

FYI, a year ago it was announced that henceforth, HTML5 would simply be known as HTML.  Well, fast forward a year, and like it or not, it certainly appears that that the term HTML5 is alive and well.  In fact, the HTML5 logo is littered throughout the web in support of this term.  So much for Ian Hickson’s decree.

If you’d like these links in one file, that can be imported into a bookmarks manager (like Google Chrome), here you go: Bookmarks

Charting

flot – Project Hosting on Google Code
Google Chart Tools / Image Charts (aka Chart API) – Google Code
gRaphaël—Charting JavaScript Library
Highcharts – Interactive JavaScript charts for your webpage
jQuery Sparklines
RGraph: HTML5 canvas graph library based on the HTML5 canvas tag
Simulchart
Smoothie Charts
ZingChart + Build HTML5 and Flash Charts & Graphs for Web Applications

CSS3

A CSS-based Form Template
Applied CSS Management and Optimization
Applying CSS to forms
Creating a sphere with 3D CSS – Paul Hayes
CSS Creator
Fancy Form Design Using CSS [CSS Tutorials]
Free CSS Navigation Menu Designs at exploding-boy.com
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using | Nettuts+
Modernizr
Sass – Syntactically Awesome Stylesheets
Script Junkie | Respond to Different Devices With CSS3 Media Queries
The Shapes of CSS
Type study: An all CSS button « The Typekit Blog
What Beautiful HTML Code Looks Like | CSS-Tricks

Frameworks

An Intro to Backbone.js: Part 1 – Models and Collections – Liquid Media
AppleInsider | SproutCore debuts new HTML5 web development tools
Backbone.js
Backbone.js tutorial « the meta cloud
Building a single page app with Backbone.js, underscore.js and jQuery | &yet | the blog
DailyJS: Tags
gist: 704930 – Minimal example of data handling in Backbone.js- GitHub
HTML5 and microformats for pragmatists
jQuery – YUI3 Rosetta Stone
jQuery vs MooTools: Choosing Between Two Great JavaScript Frameworks
Knockout : Home
RightJS: Welcome Home!
Sample Controls
script for playing with greenhouse on a demo app – SproutCore | Google Groups
Slideshare Mobile
SproutCore – Demos & Sample Code
SproutCore Documentation / DataStore About
todos.js
Tutorials:How jQuery Works – jQuery JavaScript Library
Underscore.js
Unify Project
YUI3 vs jQuery

Frameworks – MicroFrameworks

baseJS: A Mobile JavaScript Framework : Weblog : Paul Armstrong Designs
Explaining EmbedJS « Uxebu.com – the Ajax and JavaScript Experts
Hacker News | My question is if zepto.js is only 2k then why is jQuery 26k? What features are…
XUI | javascript micro-framework
zepto.js — the aerogel-weight mobile javascript framework

HTML Features

Audio & Video

4.8.6 The video element — HTML5
Embed Audio and Video in HTML 5 Pages | Webmonkey | Wired.com
Video on the Web – Dive Into HTML5

Canvas

Applications, games, tools and tutorials for the HTML5 canvas element – Canvas Demos
Canvas tutorial – MDC Doc Center
Let’s Call It a Draw(ing Surface) – Dive Into HTML5

Drag and Drop

HTML5 drag and drop in Firefox 3.5 – 0xDECAFBAD
Native Drag and Drop | HTML5 Doctor

Forms

Banish JavaScript in Web Forms with HTML5
HTML5 and Even Fancier Forms
HTML5 Web Form With (almost!) No JavaScript in Sight | Elated.com

GeoLocation

Creating mobile Web applications with HTML 5, Part 1: Combine HTML 5, geolocation APIs, and Web services to create mobile mashups

Offline Apps

Create offline Web applications on mobile devices with HTML5
HTML5 Client-side Local Storage
iphone – Html5 cache manifest in a UIWebView? – Stack Overflow
Local Storage – Dive Into HTML 5
Running your web applications offline with HTML5 AppCache – Opera Developer Community
Safari Client-Side Storage and Offline Applications Programming Guide: Introduction

Web Workers

web workers vs. the crazy flies | JavaScript, JavaScript

WebGL

Lesson 0: Getting started with WebGL | Learning WebGL
WebGL examples
webglsamples – Project Hosting on Google Code

WebSockets

HTML5 Web Sockets: A Quantum Leap in Scalability for the Web | SOA World Magazine
Introducing Smoothie Charts « Joe Walnes
Jay Fields’ Thoughts: Clojure: Web Socket Introduction
joewalnes/webbit – GitHub
Real time online activity monitor example with node.js and WebSocket @ Bamboo Blog
Socket.IO: the cross-browser WebSocket for realtime apps.
Socket.IO: WebSockets for everyone by Guillermo Rauch – JSConf.eu ☠ 2010
Start Using HTML5 WebSockets Today | Nettuts+

HTML – Miscellaneous

HTML5 Support in Internet Explorer 9
HTML5 Watch
HTML5Trends.com | HTML5 News | HTML5 Views | HTML5 Tutorials
Monster Review – HTML5 Up and Running « Keep an Open Eye Eye, Sir
W3C HTML5 Logo
WebKitBits · A tumblog about the browser engine built into Safari, Chrome, iPhone, and Android.

JavaScript – Miscellaneous

Badass JavaScript – Has.js: UA Sniffing Is Dead. Long Live JavaScript Feature Detection!
BorisMoore/DeferJS – GitHub
Enterprise JavaScript – Provides proven high performance, enterprise-level and scalable JavaScript tips and best practices.
Entity – JSON Alternative, XML Alternative.
Google Closure Compiler with jQuery applications – Stack Overflow
I was just thinking the same thing..: AJAX Push in iOS, Safari, and Chrome with Server-Sent Events
ialexi’s hedwig at master – GitHub
javascript – jQuery compiled with Google Closure Compiler – Stack Overflow
Javascript Game Development – The Game Loop · nokarma.org
jquery – How do I use Google Closure compiler to remove used JavaScript code? – Stack Overflow
LABjs Script Loader :: Home
RequireJS
Tutti – Multiple Browser Interactive Javascript Shell
wtfjs
yepnope.js | A Conditional Loader For Your Polyfills!

JavaScript – Server Side

creationix/adventure – GitHub
danwrong/restler – GitHub
Express – node web framework
jed/fab – GitHub
node.js
Node.js Knockout
wadey/node-microtime – GitHub

JavaScript – UI Libraries

Accordion v2.0 Demo
andyMatthews.net – Introduction to jQuery Mobile
Book Flip – JavaScript only.
Booklet – jQuery Plugin
ICanHaz.js | client-side templating with Mustache.js and jQuery or Zepto.js
Isotope
IT News Wire | Tag Archive | Sencha Touch
jQuery Mobile | jQuery Mobile
Kitchen Sink
NEW API (Bigger and Badder) | face.com
Processing.js
ruidlopes/minimal.js – GitHub
scripty2: for a more delicious web
Sencha – Sencha Touch Overview – Mobile Web App Development for Android & iPhone | Sencha Touch | Products | Sencha
Treesaver.js
Wink Toolkit
YUI Library Examples: Drag & Drop: Portal Style Example

Reference Books & Articles

28 HTML5 Features, Tips, and Techniques you Must Know | Nettuts+
30+ Very Useful HTML5 Tutorials, Techniques and Examples for Web Developers — tripwire magazine
6 Great Resources for HTML5 Mobile Web App Development « AppGym
A Book Apart, Welcome
Bill Higgins’ Blog : Ajax code loading optimization techniques
Building Web Pages With HTML 5 | Webmonkey | Wired.com
Designing a blog with html5 | HTML5 Doctor
Dive Into HTML5
Google JavaScript Style Guide
How to Make a Generic Javascript Method Closure | chrisspenblog
HTML 5 Tag Reference
HTML5 Boilerplates | HTML5 Doctor
html5 laboratory – writing a valid html5 document
HTML5 Playground
HTML5 Readiness
HTML5 Rocks – A resource for open web HTML5 developers
HTML5 Tutorial – Getting Started
iPhone Safari Dev Stuff -> Tech
Javascript Closures
Learn HTML5: 10 Must Read Lessons
Minimize payload size
Mobile Web Application Best Practices
Periodic Table of the Elements – Josh Duck
Script Junkie | How to Write Maintainable OO JavaScript Code
svendtofte.com – Curried JavaScript functions
Yahoo! Design Pattern Library

Testing

alexyoung’s riotjs at master – GitHub
An incomplete overview of webtesting tools
Browse test cases · jsPerf
drnic/jsunittest – GitHub
Fake – Mac OS X Web Browser Automation and Webapp Testing Made Simple.
js-test-driver – Project Hosting on Google Code
JSpec – JavaScript Testing Framework
tobie’s unittest_js at master – GitHub
void vs undefined · jsPerf

Tools – Doc Generation

DailyJS: Let’s Make a Framework: Writing Documentation
docco.coffee
Google JavaScript Style Guide
JSDoc Homepage – JavaScript Documentation Tool
PDoc

Tools – IDEs

Aptana | Download Aptana Studio 3.0.0
Cloud9 IDE – Ajax.org
Create a new Fiddle – jsFiddle – Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

Tools – Message Bus

kwhinnery/appcelerator_mq – GitHub
TIBCO PageBus Developer Center at TIBCO Developer Network

Tools – Performance

Axod’s Hack: Google Closure Compiler Advanced mode
Benchmark.js
Closure Compiler – Google Code
codenothing’s css-compressor at master – GitHub
CSS Compressor – Online code compressor for Cascading Style Sheets
CSSTidy
JavaScript dependency management and concatenation: Sprockets
mir.aculo.us JavaScript with Thomas Fuchs » DOM Monster Bookmarklet
YUI Compressor

User Interface/UX

Best Examples Designs for Mobile Web Interfaces | DesignModo
Creating Fast Buttons for Mobile Web Applications – Google Mobile Developer Products – Google Code
FingerTips
Not a mobile web, merely a 320px-wide one « James Pearce
tinySrc
User Experience Coding How-To’s for Safari on iPhone

Wapps

Fingertips/ios-sim – GitHub
Hiding Safari User Interface Components on iPhone – Stack Overflow
How to Make an HTML5 iPhone App

Wrapper Apps

Assorted GARbage» Blog Archive » Adding a Splash Screen for Android using Phonegap
NimbleKit – Smart kit for fast iPhone apps development
PhoneGap
Use Appcelerator Titanium to build mobile apps for iPhone & Android and desktop apps for Windows, Mac OS X & Linux from Web technologies
This entry was posted in Technology and tagged , , , , , . Bookmark the permalink.

9 Responses to Master List of HTML(5)/JS/CSS Resources

  1. Pingback: Sproutcore links and things #3 | gibbsonn

  2. do you have a more updated list? It’s approaching a year old now, while a wonderful resource, you have mentioned yourself that you can miss something huge just by blinking. In one year I can imagine quite alot of progress/change in pretty much every section.

    Thanks!

    • Gene says:

      Thanks Madison, I was just thinking about that the other day. If I can find the time, I will try to update the list this weekend, and maybe streamline it as well. I’m flattered by your comment – I didn’t think anyone cared. :-)

  3. Great collection, it’s obvious that a lot of time and effort has been put onto it.

    when reading @Madison’s suggestion, a related idea popped into my mind

    Why not create a github repository, and port this list there, so that everyone can fork and contribute.
    This will also alleviate the burden of keeping the list up-to-date from one individual (that’s you Gene ;) ) to the community.

    Just an idea.

    Cheers.

  4. Gene,

    never did a similar repo research on github.

    I’ll let you know if I coincide any.

    Cheers.

  5. Robert Mening says:

    Hi Gene,

    Great list, although couple of links seem to be broken by now…

    I actually published a beginners guide to HTML5 few days ago. It might be too easy for your visitors, but I thought that I would share it… Any feedback is much appreciated!

    Anyhow, it’s located here: websitesetup.org/html5-beginners-guide/

    Cheers,
    Robert

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>