Show HN: Combining AJAX, pushState & CSS3 transitions

http://paynedigital.com/2012/01/combining-ajax-pushstate-and-css3-transitions

by paynedigital • 15 years ago

23 8 15 years ago

paynedigital.com

alexchamberlain2• 15 years ago

Some nice code there. Have you thought about using less to make the css more readable?

For instance, I use a mixin called border-radius, which is replaced by all the vendor-specifics.

paynedigital3• 15 years ago

Hey - I have pondered using less / sass / etc but so far haven't yet had much need (though the repetition required by the theming is perhaps a strong case to start considering it). To be honest, the vast majority of the site's CSS is contained in Twitter's bootstrap framework anyway so up until this point it's not something I'd worried much about :)

alexchamberlain2• 15 years ago

If you're using bootstrap, it's even better to use less; it includes a load of mixins for things like border-radius etc.

Just @include "bootstrap.less" at the top of your less file, add your rules below and compile just your less file using lessc. Easy.

artpop• 15 years ago

All good until your clients want it to behave the same in IE. Then you have to do ten times the work (hash changes, jQuery animations to replace CSS transitions, etc.)

http://www.nma.gov.au/av/portmacquarie/

Still, the end results are sweet.

paynedigital3• 15 years ago

I'd hope a bit of gentle education surrounding the pros (i.e. very few, just a slightly slicker effect) Vs the cons (i.e all those you outlined) would make most clients see that it's not worth the effort, in this instance at least. But yeah - I take your point :)

duncans• 15 years ago

Nice. Any reason you're setting "Cache-Control: max-age=0, no-cache, no-store"? (or that could be the proxy server here)

paynedigital3• 15 years ago

None at all actually, that's just a mahoosive oversight on my part. I've been working on lots of server side caching and server optimisation (e.g. mod_pagespeed) and committed the cardinal sin of ignoring the basics. Thanks for pointing it out - one for the issue tracker.

RandallBrown• 15 years ago

If you're using safari and do the two fingered swipe to go back, this doesn't look too great. It's the one thing I don't really like about the cool slide animation you get when you do that.

Show HN: Combining AJAX, pushState & CSS3 transitions

Related Stories