AaunelHTML5 Demo

HTML5

HTML5 has seen a reactive buzz across the web development community with more books than I could read before HTML6, too many opinions and interpretations to choose from, and it's not even fully spec'd yet. I'll still happily debate whether and where to use <section> and <article> tags in your code, but feel like I've barely tested the waters of what this updated language has to offer. In any case, I hope you enjoy my HTML5 demo amongst others utilizing drag-and-drop on elements and data capture to generate an interactive, informative UI.

It adds a great Multimedia and Semantic Web capability to the Internet!"
- Karim

CSS3

If you use a modern browser, you get a modern experience; simple, done and dusted. I often implement progressive enhancement practices to reward tech-minded users (i.e. those who would notice) using CSS3 modernisation and optimisation, but just as well I'm always adding to my library of gracefully degrading enhancements (popularly image-rendered rounded corners for older browsers) to keep pages looking aesthetically pleasing for all users. You may notice these practices across this demo page.

CSS3 is here and now, let's use it"
- Sam Brown

@Font-Face

Shockingly, this is my first build utilizing @font-face! I'm a Cufón convert. Why this solution isn't considered in production environments (or at least my production environment) baffles me. Where are the caveats?? This capacity for unsupported web fonts using a free choice of .ttf/.eot (haven't experimented with other typefaces) was first proposed (.eot) for CSS2, and IE supports it. If you've ever heard of gzip, the added load on bandwidth is of no concern. I'm using Jura Demi-Bold on this demo page - preps to Daniel Johnson.

We can't possibly expect all the browsers to play nice and agree on a given solution."
- Joshua Johnson

CSS Arrows

The world could be built in triangles. I'm no geometer, but the triangle is such a scalable, useful shape - isometrics / 3D, structure, prominence. A rendering 'bug' on empty bordered elements allows developers to generate an imageless triangle or arrow without dimensional limitations and best of all without http-requests or bandwidth. Looking to create an imageless arrow calculator that will ease coding mathematics. I can only hope that this rendering 'gift' remains!

HTML5 Video Player by VideoJS

OOCSS

Object Oriented CSS is what I looked for when I began using the language, and fortunately enough, I quickly came across it. By utilizing a scalable and responsive grid library, cross-browser (& cross-device) compatibility and pixel-nudging accuracy in my builds have become second nature. Stubbornella's and my views do not meet on every detail, and I must admit there are several parts of the library that I have dropped in place of my own solutions, but the OOCSS approaches are unmatched by other similar grid libraries.

The OOCSS framework is a terse but ambitious thing in the tradition of YUI Grids CSS and Blueprint but with opinions that reach beyond grids, resets and typography."
- Bill Burcham

Boilerplate

Some would say that an optimised website is a textbook with all the unnecessary pages ripped out, but an optimised website is what's written in the exam - the final piece that everything else comes to. I am a recently acquainted and now avid user of the HTML5 Boilerplate, and alike many others, I have adapted it to my own preferences to utilize as a solid boilerplate for web projects, encouraging good-practice, semantics and efficiency.

If I could just educate users en masse on all the things they need to know to execute on a project flawlessly, I would. But distributing best practices in the form of a packaged product is also a really effective teaching tool."
- Paul Irish

HeadJS

Now, this plugin certainly takes some getting used to. The idea is partly counter-intuitive to old (and current) concepts, but its result is glorious. Combined with other performance enhancement practices, page scripts are executed flawlessly with no FOUC, and page load does not hang on downloads. Furthermore, this solution still supports HTML5 and CSS3 coding across all browsers. The added capacity for parallel-loaded and parallel-executed scripting in development feels next-gen!

The only script in your <HEAD>