Responsive JavaScript

I really like Jeremy Keith's approach to "responsive javascript". He uses `:after` and updates the content property based on media queries. It keeps it nice and DRY. Here's a small demo: http://jsbin.com/meqon/2/edit?css,js,output

First time I've come across the matchMedia api. This would have been extremely useful in my last project.

Thanks for spreading the word.

In my experience, setting a handler for every onresize event can lead to performance problems if you've got a complex layout. It's better to wrap it in something like Underscore's throttle function (1) and only let it fire every 200ms or so.

1: http://underscorejs.org/#throttle

more things that take the control out of the user. and add lots of complexity for no good reason.

why on earth have javascript to do CSS's work?

and why do you care about screen size changes? the only good thing it does is hint you about device orientation. But who says when i change from portrait to landscape i want a whole new site? sometimes turning a device just mean i want to fit one image better in the screen. not change all my navigation elements to fit the designer dream of multi-screen shenanigans.

yeah, i sound like the old fart who don't like shinny things and change. but people impressed by this sound like the kids adding animated gif after animated gif to their geocities page. now get off my lawn!

"The benefit of this being that we can use the same media queries in the Javascript as we have used in our Javascript."

I guess the second mention of "Javascript" should be "CSS", right?

The one problem I've found with this approach is making sure that the CSS and JS breakpoints stay in sync as a site is maintained. At my previous job, we came up with a way of changing JS behavior based on CSS changes to DOM objects. http://blog.cloudfour.com/behavioral-breakpoints/

Has any work been done on identifying the browsers connection speed so that we may serve high quality vs. low quality assets? The only thing I've been able to find for this is the MaxMind GeoIP Netspeed database, but I have no idea if the data is accurate enough to be valuable. I suppose you could measure latency, but not during the initial page load..

I can see the appeal, but I wonder if this might not be better accomplished with an HTTP header that would explicitly give the viewport dimensions and/or some information about the connection type/speed.

Wrote a little layer on top of the matchMedia api: https://github.com/twobit/mquery

Sad to see another site making the mistake of thinking that Opera 12 and below are the same as Opera 15 and above, despite the two sharing literally zero code.

aka "Progressive Enhancement"

Nice resource. It would be cool if the author added links to the libraries that are being referenced.