Useful Links and Resources

Useful Front End Engineering Resources

A broad, and (hopefully evolving) set of general information regarding Front End Engineering (F2E) at Roundarch Isobar. We are looking into some ways to better maintain a list such as this in the near future.

Some of this may end up referenced in the next generation version of our coding guidelines (TBD).

Please contact us for corrections or additions.

HTML5

"HTML5" is a highly misused term. There is the marketing angle and the technical angle. People and organizations say that they want "HTML5" but sometimes have no idea what they mean, or that what they really mean is that they want new features based on:

• HTML5 Specs
• HTML5-related Specs
• CSS3
• Techniques being made available in modern browsers via new JavaScript API's

Call it the HTML5 family, whatever you want to call it, it's the stuff driving the new wave of browser-based innovation coming from Mozilla, Google, Apple, Opera, and yes, even Microsoft (IE10 is going to support HTML5-related technology in some compelling ways).

The JavaScript (JS) angle is incredibly important because as browser's JavaScript engines have gotten faster the browser manufacturers and Front End Engineers (F2E) have pushed limits and begun to exploit the API's that are available to do some amazing things. Please see the JS section below.

HTML5 Really Defined

This is an older article (2010) but it helps explain a lot of the confusion:

• HTML5 Defined - Not Just Marketing

And from (formerly) Isobar's own Rob Larsen:

• HTML5, CSS3, and related technologies

Features, In General

These are not HTML5 specific features, but they're very frequently tossed into the same buckets.

• Canvas
• SVG
• localStorage
• File System API
• Web Sockets API
• Geolocation
• Full Screen API
• WebGL
• Navigation History (pushState) API
• Audio, Video, etc.
• Offline Application Cache
• Web Workers (threaded JavaScript)
• Web Fonts / Font Embedding
• CSS Transitions
• CSS Transforms

Some HTML5-related Links

Additional links that are resources and learning references:

• The Spec: HTML5: A vocabulary and associated APIs for HTML and XHTML
• HTML5 Can Presentation
• WHATWG HTML5 Notes for Developers
• Dive Into HTML5
• HTML5 Rocks
• Developing HTML5 for a Cross Browser World - Presentation
• HTML5 Infographic
• Mozilla's HTML5 Documentation

Browser Support

Choices pertaining to browser support and more modern front end development are sometimes tough based on the target audience. Before a project starts, it will be critical to understand several things:

• What browser versions and users are critical for the business audience?
• If users of "older browsers" will be given the full experience, or a gracefully degraded experience that either reduces the service's functionality, or simply loses some less important design ornamentation (e.g. rounded corners, drop shadows, gradients).

Links

• Can I Use ... ?
• HTML5 Please

Progressive Techniques, Polyfils, Libraries, etc.

• HTML5 Boilerplate
• Modernizr
• Yepnope JS
• Twitter Bootstrap
• HTML5 Polyfills
• What is a Polyfill?

Staying Current

• HTML5 Weekly
• JavaScript Weekly
• Responsive Design Weekly

Build Systems

• Grunt: Task-based Node Build Script
• HTML5 Boilerplate Node.js Build Script
• Yeoman IO - An Opinionated Build Framework
• HAML - HTML Abstraction Builder
• (too many to list ... more to come)

CSS3 Approaches

• CSS Tricks especially the Snippets
• Object Oriented CSS
• SMACSS
• Idiomatic CSS
• SASS / SCSS
• LESS CSS
• SASS vs. LESS
• CSS3 Please Syntax Generator

JavaScript

Effectively the modern "HTML5" related family of technologies and substantial attention over the last half-dozen years to Ajax has allowed JavaScript development in the "wild" grow up and mature significantly. We are not talking about copy and past scripts any longer. Anyone who just drops scripts inline into the global scope is doing it wrong.

JavaScript Coding Links

• Idiomatic JavaScript
• Google's JavaScript Style Guide
• jQuery Core Style Guidelines
• JavaScript Design Patterns Online Book
• TodoMVC Samples
• Patterns for Large Scale JavaScript Architectures

Books

More to come. Soon.

Regarding Libraries, Frameworks, Etc.

• jQuery Fundamentals
• Backbone Fundamentals
• Large Scale jQuery Applications
• Top 10 JavaScript MVC Frameworks Reviewed
• Picking a JavaScript Template Engine

JS Module Management

• Writing Modular JavaScript
• Require JS
• Common JS

JavaScript Unit Testing

More soon. Move on. Nothing to see here (actually there's plenty but ... give us time ... )

Performance Best Practices

• Google's Front End Performance Rules
• Yahoo! Exceptional Performance Rules
• JavaScript Performance

Performance Testing Tools

• Web Page Test.org
• JS Perf
• Google Chrome Speed Tracer
• DynaTrace Ajax Edition
• YSlow!
• Measuring Page Load Speed With Navigation Timing

Mobile and Handheld Development

This is a whole other topic with much to say. Suffice to say, if you're doing a major site or application doing any of the above, and you're not thinking about Mobile First, then you're doing it wrong.

• Responsive Web Design: The Book
• Media Queries

More to come. Really. Stay tuned.