Useful Links and Resources
Clone this wiki locally
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 see Standards.Next.
Please contact us for corrections or additions.
Other Standards Guidelines
- Code Guide by @mdo
- Github JS and CSS Styleguide
- Interactive Development Best Practices
- Viget's old FED Docs
- FF0000 (red) Front-end Development Guides
- Starbucks Style Guide
- Wordpress Core Contributors Guide
- CSS Tricks Style Guides
- JS Wiki
- Github Resources
- Introduction to JSDoc
- BBC's Future Media Standards
- A Baseline For Front-end Developers
- Front-end Stuff
- Design Principles
- Filterable WCAG Reference
- The CSS At...
- Medium's LESS Coding Guidelines
- You Might Not Need jQuery
"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
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+ supports HTML5-related technology in some compelling ways).
HTML5 Really Defined
This is an older article (2010) but it helps explain a lot of the confusion:
And from (formerly) Isobar's own Rob Larsen:
Features, In General
These are not HTML5 specific features, but they're very frequently tossed into the same buckets.
- File System API
- Web Sockets API
- Full Screen API
- Navigation History (pushState) API
- Audio, Video, etc.
- Offline Application Cache
- 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
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 if 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) is OK.
Progressive Techniques, Polyfils, Libraries, etc.
- Google HTML and CSS Style Guide
- CSS Tricks especially the Snippets
- CSS Deck
- Object Oriented CSS
- Idiomatic CSS
- SASS / SCSS
- LESS CSS
- SASS vs. LESS
- CSS3 Please Syntax Generator
- jQuery Core Style Guidelines
- TodoMVC Samples
More to come. Soon.
Regarding Libraries, Frameworks, Etc.
- jQuery Fundamentals
- Backbone Fundamentals
- Large Scale jQuery Applications
JS Module Management
More soon. Move on. Nothing to see here (actually there's plenty but ... give us time ... )
Performance Best Practices
Performance Testing Tools
- Web Page Test.org
- JS Perf
- Google Chrome Speed Tracer
- DynaTrace Ajax Edition
- 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.
More to come. Really. Stay tuned.