Style with Substance
The revolution in JavaScript is not just in ES6 and ESNext, but in the changes that don’t make the headlines. String concatenation and forEach iteration don’t have the allure of a shadow DOM, but they’ve changed the way we look at behaviour development.
With the strong trend to Responsive Development, matchMedia is another way the browsers are showing they’ve got your back. A CSS Developer with a command of Media Queries can shake the way you see your site across viewports, and with matchMedia your JavaScript can make that shake an earthquake.
Javascript borrowed from many other languages at the beginning and has continued to do so today. JS is now borrowing ideas from CSS – media queries! With great power comes great responsibility.
Part 1 – the separation of concerns
Structure, Behaviour, Presentation. HTML, JS, CSS.
If you should be doing something in HTML, do it in HTML! If you are going to use a CSS feature in JS, minimise the amount.
For demonstration purposes, Sharkie will assign each concern to a beer… (demonstration of three people opening one bottle, vs one person opening three bottles) the one becomes a bottleneck.
Aaron, Sharkie, Adam, and Andy on stage, with beers #wd15
Part 2 – Matchmedia
Media queries are awesome. We have width, height, max-width, device-aspect-ratios… lots of stuff that JS isn’t very good at detecting.
But when you need to do more than set breakpoints for styling, you need something more.
Matchmedia allows you to inject new content when it’s required, but not send it down the pipe just to hide it with CSS. (obviously this would have accessibility impacts, so use with caution)
The old way to do this with JS was debounced window resize events; the new way is to watch a matchmedia query.
window.matchMedia(mediaquery)
Polyfill: paulirish/matchMedia.js
Matchmedia doesn’t really need to be debounced as it doesn’t fire events the way resize sprays them (even when debounced!).
Matchmedia also gives you state – where CSS doesn’t know what you just did or will do next, Matchmedia can. (demonstration of an animated bird – CSS makes it fly backwards, Matchmedia makes the bird turn around to fly back)
