Responsive JavaScript

#1

Post by josephwegner » Tue, Feb 11, 2014, 7:38 PM UTC

Responsive JavaScript
responsivejavascript.com

Re: Responsive JavaScript

#2

Post by lucid00 » Tue, Feb 11, 2014, 8:13 PM UTC

aka "Progressive Enhancement"

Re: Responsive JavaScript

#3

Post by wwweston » Tue, Feb 11, 2014, 8:23 PM UTC

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.

Re: Responsive JavaScript

#4

Post by iMark » Tue, Feb 11, 2014, 8:24 PM UTC

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

Thanks for spreading the word.

Re: Responsive JavaScript

#5

Post by jitl » Tue, Feb 11, 2014, 8:30 PM UTC

wwweston wrote: post #3

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.

Viewports can change in size once the page has loaded. A Connection-Quality: GPRS, 512kbps; header would be nice. But then you still get an issue when phones must report or the user toggles on WiFi as soon as they see a few bad (low bitrate) assets.

Re: Responsive JavaScript

#6

Post by [deleted] » Tue, Feb 11, 2014, 8:53 PM UTC

[deleted]

Re: Responsive JavaScript

#7

Post by Mithaldu » Tue, Feb 11, 2014, 8:55 PM UTC

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.

Re: Responsive JavaScript

#8

Post by andrenotgiant » Tue, Feb 11, 2014, 9:06 PM UTC

[deleted] wrote: post #6

[deleted]

Hm - I don't think the particular example they used (where the function called by onresize just changes a variable) really needs a clear/setTimeout variable.

I see what you mean though, if the function called by onresize was actually making visual changes to the page, the designer would very quickly figure out they need an clear/setTimeout layer.

Re: Responsive JavaScript

#9

Post by 2bit » Tue, Feb 11, 2014, 9:29 PM UTC

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

Re: Responsive JavaScript

#10

Post by phaer » Tue, Feb 11, 2014, 9:37 PM UTC

"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?