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.
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)