Thursday, January 12, 2012

HTML5 CSS3 and stuff

Subject: HTML5 CSS3 and stuff

  • note: originally emailed 01/12/2012 and sanitized for public consumption
  • sidenote: posting here so i can lead people here whenever they ask me about this stuff...

So, during the winter break last month – I just happen to be at the large brick n mortar book store that’s still around looking for that last minute gift selection.

I wandered to the “computer” section as I always do and noticed a few new books on the shelf and proceeded to thumb through it.

The first book that got my attention was the HTML5 Cookbook

The next book: HTML5 Canvas

The following book: HTML5 Applications wasn’t that great.  But it did tell me about me two other books:
  • Building Android Apps with HTML, CSS, and JavaScript
  • Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa

And those lead me to the Phone Gap project – now acquired by Adobe.  This is a path to develop native application via HTML5 + CSS3 + javascript code base.  The project is technically an open source project and can be found at Apache’s repository: at first called ‘callback’ – now called ‘Cordova’.

Finally, some other goodies I happen to run across:
  • The Book of CSS3: A Developer's Guide to the Future of Web Design
  • JavaScript: The Definitive Guide: Activate Your Web Pages (Definitive Guides)

Anyways, here’s a collection of must have bookmarks:

There are a lot of other HTML5 books out there:

And, with some high profile acquisitions:

This stuff is becoming more and more mainstream.

Sent: Thursday, October 13, 2011 4:19 PM

I forgot to add the following

If you are familiar with Visual Studio’s Debugger, then you are going to feel right at home with the firebug plug-in for firefox:
    • Break on all errors (such is unknown function or variable names), equivalent to compile time error
    • Break on attribute or DOM property change – equivalent to VS break on watch point change
    • You can even break on CSS style rule changes
    • It has watchlists
    • Setting breakpoints
    • It also has a runtime profiler (and quite nice too)
    • And even a memory profiler (just as nice)
    • Finally, a network profiler
    • which didn’t work so well when flash inside of a flash file were making raw network calls
    • but if you use standard HTML request, it spells out everything your browser is doing (except for websocket calls – hopefully, it will be supported in future releases)

The only other negative thing I ran into is that it doesn’t trip on syntax errors (because the file never gets “loaded” to the browser, so firebug doesn’t know about it) – but you can use JSlint for something like that

And I forgot to add this for supported browsers:
  • Chrome 14

Sent: Wednesday, October 12, 2011 3:27 PM

Since I’ve been diving into the world of HTML 5 CSS3 and javascript, I figure that I share some of my findings.

Note: make sure you’re running at least:
  • Sarafi 5.1
  • Firefox 7
  • IE 10 (which isn’t out yet)

Browser technology has come a long way.  Take a look at the following:
CSS3 is supposed to be “hardware accelerated” which I can only guess it means that it builds GPU instructions from the baked set of styles.

Javascript has to run on the CPU.  CSS are normally not changed after it is set.  So it gains a lot from deterministic values.

Anyways, here’s another cool demo:
  • The package is a product, so this one requires licenses
  • But it shows what a little bit of CSS and javascript together can make

Here’s a pile of “best-of”:

For a little crash course on HTML5:

Enjoy! -- Nick