Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

Style with Substance

Craig Sharkie at Web Directions 2015
Sign up for Conffab Free to watch this and hundreds of other videos for free
  • Details
  • Keypoints

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.

View image on Twitter

Follow

Meligy ?️ ng-sydney @Meligy

Aaron, Sharkie, Adam, and Andy on stage, with beers #wd15

3:32 PM – 30 Oct 2015

  • Retweets
  • 33 likes

Twitter Ads info and privacy

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)

You may also be interested in

Thumbnail for vw + vh === vnice

vw + vh === vnice

Craig Sharkie

Thumbnail for Responding to Responsive Design

Responding to Responsive Design

Craig Sharkie

Thumbnail for Functional CSS yesterday

Functional CSS yesterday

Craig Sharkie

Thumbnail for Functional Cascading Style Sheets

Functional Cascading Style Sheets

Craig Sharkie

Thumbnail for Once More with Feeling

Once More with Feeling

Tim Kadlec

Thumbnail for CSS Grid Layout

CSS Grid Layout

Rachel Andrew

Thumbnail for Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Stephanie Rewis

Thumbnail for The Power and Responsibility of Unicode Adoption

The Power and Responsibility of Unicode Adoption

Katie McLaughlin

More presentations from Web Directions 2015

    Thumbnail for The Website Obesity Crisis

    The Website Obesity Crisis

    Maciej Ceglowski

    Thumbnail for Financial Inclusion in the Solomon Islands

    Financial Inclusion in the Solomon Islands

    Rose Matthews

    Thumbnail for Enough Lipstick on Pigs

    Enough Lipstick on Pigs

    Tom Loosemore

    Thumbnail for The New Age of Indie

    The New Age of Indie

    Kai Brach

    Thumbnail for Designing Connected Products

    Designing Connected Products

    Martin Charlier

    Thumbnail for Customer Service as a Core Feature

    Customer Service as a Core Feature

    Mathew Patterson

    Thumbnail for Souls and Machines: Designing the Future of Content

    Souls and Machines: Designing the Future of Content

    Hannah Donovan

    Thumbnail for Hacking the Creative Brain

    Hacking the Creative Brain

    Denise Jacobs

Conffab
  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up

© Conffab 2025