nclud.com front-end dev
Tweet so hard
Comps from Alex
Setting out
- ambitious visual design
- Lots of new challenges
- Lots of custom development required
- Lots of time
Completed in 1 week
Internal projects
- Lots of time not being billed to clients
- Not a risk, an investment
The investment
3 months
Goals
- Create an ‘app-like’ experience
- Utilize cutting edge browser technologies
- CSS Transitions
- CSS Transforms
- HTML5 History, Push State
- Adhere to best practices i.e. Minimize HTTP requests
Be an industry leader
Make a site for ideal user
Let’s take another look
Work section
- dynamic, custom layouts
- 3D!
- blurred imagery!?!
Team section slider
- scrolls
- scrolls infintely
- ON AN ANGLE
Contact section
- Map has a mask
- That mask is diagonal
- and it moves
Effing designers
Alex didn’t design for the familiar.
He designed for the ideal.
Time for dev
- Breaking down big problems
- work section: custom layout, 3D interface
Making a 3D transform polyfill
Make a simple demo
Build concept into reusable module
Diorama.Sprite.prototype.translate3d = function( x, y, z ) {
var elemStyle = this.element.style;
if ( is3d ) {
// use 3D transforms
elemStyle[ transformProp ] =
'translate3d( ' + x + 'px, ' + y + 'px, ' + z + 'px )';
} else {
var p = this.env.perspective;
var scale = p / ( p - z );
scale = Math.max( 0, scale );
var sx = x * scale;
var sy = y * scale;
// position with 2D transforms
elemStyle[ transformProp ] =
'translate(' + sx + 'px,' + sy + 'px) scale(' + scale + ')';
}
};
See original code nclud.com/nclud3theme/js/diorama.js
In action nclud.com/work
Infinite scroller
Do some geometry
- Build a demo
- See nclud.github.com/inflickity
In action nclud.com/team
Diagonal mask
Demo corner-hide.html
In action nclud.com/contact
Lots of challenges, lots of modules
2000 lines of JS written
Some have been open-sourced
HTML5 History
- MY FAVORITE FEATURE
- allows for transitions between sections
- what makes for the “in app” experience
- Upholds the a fundamental rule of web: URLs are re-usable and reliable
- Wags finger at twitter.com/#!
Handling clicks
if ( Modernizr.history ) {
// handle .push-to clicks
$('body').delegate( 'a.push-to', 'click', function( event ) {
// parse path and figure out where we are
// returns { title: 'site title, path: '/section/article', ... }
var state = getStateFromHref( path );
// push to the state
pushTo( state );
// don't allow <a> to trigger page change
event.preventDefault();
});
}
function pushTo( state ) {
// where the magic happens
// ajax in content, if necessary, or just transition to it
...
// eventually
if ( !stateWasPopped ) {
history.pushState( state, state.title, path );
}
}
Handling back/forward from browser
// bind popstate event for forward/back button navigation
window.addEventListener( 'popstate', onPopState, false );
function onPopState( event ) {
// set flag
stateWasPopped = true;
// push to the state
pushTo( event.state );
}
View original code at nclud.com/nclud3theme/js/common.js
Things we did well
- Fairly ‘responsive’
- SVG icons
- Dynamically load content in the background
- Minimize HTTP requests
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://nclud.com/wp-content/themes/nclud3/js/jquery.min.js"><\/script>')</script>
<script src="http://nclud.com/wp-content/themes/nclud3/js/sitedata.js?1337244439"></script>
<script src="http://nclud.com/wp-content/themes/nclud3/js/nclud-all-scripts.js?120406132504"></script>
Bugs & Things we did not-so-well
- No blurs on work items
- 3D transforms on Firefox are still way experimental
- Bad transitions on Firefox
- Had to use browser sniffs
- Navigation broken on Android
- Crazy broken artifacts on nclud.com/contact
- Scrolling footer navigation on work section
- Crashing people’s browsers
Sorry about that!
Lessons learned
- Be honest about timeline
- Keep separate parts of logic separate
Bonus round: SVG logo
<path id="nclud-pointer" d="
M 16, 0
C 16, 0 32, 15 32, 24
S 25, 40 16, 40
S 0, 33 0, 24
S 16, 0 16, 0
z" />
See: