Drag an item from above into this box for more info
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.
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.
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.
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
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.
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.
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!