Javascript Media Queries

Javascript media queries used to be a pain in the butt. I won't go in to why because thanks to window.matchMedia it's now very easy.

window.matchmedia has a matches property which returns a boolean value, so to run it once just use it something like and if statement:

if(window.matchMedia("(min-width: 500px)").matches) {  
  /* the viewport is at least 500 pixels wide */
} else {
  /* the viewport is less than 500 pixels wide */
}

It's also possible to add a listener to call a function to run some code whenever the query return value changes:

if(matchMedia){ // Only run if matchMedia is supported  
  const media_query = window.matchMedia("(max-width : 500px)"); // Create media query
  media_query.addListener(widthChange); // Optional listener with function to run
  widthChange(media_query); // Initial run
}

function widthChange(media_query){  
  if(media_query.matches){ // If the media query resolves true
    // window width is under 500px wide
    console.log('Under');
  } else {
    // window width is more than 500px wide
    console.log('Over');
  }
}

Paintings of the Weimar Republic

Painting of a Berlin street scene

Gustav Wunderwald's wonderful paintings of Weimar Berlin.

What to do about bookmarks

Browser bookmarks frustrate me. I need them for personal and professional use. Yet, like email, bookmark management just seems like a silo wherein I pile new bookmarks on top of old. I try to remember what concise list of tags I used in the past. But it's all a guessing game. Eventually the number becomes so great I export them all to an XML file and put that in a different kind of silo on a hard drive.

My bookmarks, and I suspect most folks', can be split in to three groups. The stuff we use daily, the stuff we're currently using but one day (work projects for example), and the stuff we want to come back to someday.

The first and second groups are, IMHO, what the bookmarks store in a browser is for. I want quick access to these. It's important to keep the two separate and clear out the transient stuff appropriately. When I finish a job I should collate all the bookmarks I've stored for that job in a text file and add it to the git repository and tarball for the job.

I've helped reduce the third group by embracing Pocket. But I still have bookmark folders full of long-forgotten links.

I tried using Pinboard and Delicious but that's even worse. They're like cold storage. I put stuff there and fool myself it'll be there when I want it. But it's easier just to Google something than to try and search these services.

So what to do? I don't know. I like the idea of keeping all those third-group links in appropriately named text files. But will I bother to keep them updated? Will I bother to look in them when I need a link?

What I'm more tempted to do is distill anything I learn from a link in to a document. A tutorial in my own words. Anything else can go in Pocket or simply be read and discarded.

Reading List #5

Five articles I've read and enjoyed recently.

Are Romantic Comedies Dead?

Why '27 dresses' isn't a patch on 'Annie Hall'.

If You’re Lying About Being a Navy SEAL, This Man Will Catch You

I have very little interest in the military and those who aspire to it, but this story about people who lie about it is very interesting.

The Saddest Homecoming Queen in Ohio

A very insightful and funny article about growing up.

The Keely Motor Fraud

John W. Keely's elaborate 19th century engineering and science hoax.

What it's like running an arcade in 2015

A look in to a handful of locations that are keeping arcades alive.

Reading List #4

Five articles I've read and enjoyed recently.

The Sea of Crises

A sumo wrestling tournament. A failed coup ending in seppuku. A search for a forgotten man. How one writer’s trip to Japan became a journey through oblivion.

The Economics (and Nostalgia) of Dead Malls

I didn't go to a mall until the late 90s, and I'll wager those in the UK are nothing like those in the US. Still, I found this fascinating.

The incredible true story behind the Toronto mystery tunnel

Why Elton McDonald built the Toronto tunnel that captivated the world.

Leaving Alaska

A man and his cabin in the woods.

Why you shouldn't exercise to lose weight

Explained with 60+ studies