Overview
Interactive technology is constantly changing, and with everyone racing to make use of all the latest in HTML5, CSS3, and related specs, web developers like me have to prove that we can hang.
Portfolio site refresh
Though it looks pretty much the same, I've recently rebuilt this site from the ground up to reflect my evolving skillset. Here are the highlights:
- Semantic HTML5 page structure and markup
- CSS transitions and transforms (where supported)
- New single-page-app-style navigation with browser history support and deep-linking
- More elegant, performance-optimized JavaScript
Use the tabs on the right for details.
(Totally real and awesome photo courtesy of José Luis Garcia Larred)
HTML5
The HTML5 draft specification is huge. It contains provisions for new attributes and elements, including audio and video, and the ability to embed SVG and MathML elements directly into the document. Related specifications add to this with things like the canvas drawing surface, geolocation, offline storage, and web workers (think threads for JavaScript).
I definitely won't try to cram all these features into this site just to say I did it. To begin with, I'm simply using the new semantic markup to give my pages more meaningful structure under the hood. I also use Modernizr, a small JavaScript file that gets the new elements to display correctly in Internet Explorer.
In time I'll incorporate more of the new features where it makes sense for this site. Keep checking in.
CSS3
The new features available for browsers that support CSS3 are awesome. If all browsers supported everything in the spec, our jobs as web developers would be so much easier. Naturally, that's not the case.
We're left with some browsers supporting some of the features, while older ones don't give us much at all to work with. This is where progressive enhancement comes in. We start with a baseline for all browsers, then improve upon the experience in browsers that can handle it.
The main functionality of this site (including the animated page transitions) works for all browsers, even IE6. But to this I added some CSS3 features:
- Color transitions for navigation hover states
- Partially transparent backgrounds using RGBA
- Zoom-out and zoom-in effects during page navigation (for browsers that support CSS transitions)
- Rounded corners on the page-loading graphic
Advanced JavaScript
HTML5 and friends bring a lot of JavaScript APIs to the table. Of all the cool new tricks, the only thing I make use of is the onhashchange event, for maintaining browser history upon page transition. Going forward, I'll be adding additional cutting edge stuff where it makes sense.
With that being said, JavaScript is the thing that changed the most between this version of the site and the last. It seems that every six months I look back at my old code and shudder. Looking at this site, I wanted to rip it all out and start from scratch. Here are some things I did:
- Made use of JavaScript design patterns for code organization and scope management, as well as fallback inclusion of the jQuery library.
- Wrote an algorithm to asynchronously load and position any number of pages into the document, spiraling out counter-clockwise from the home page
- Geared code towards performance by optimizing loops, managing scope and data access, and improving selector efficiency
