Posted on Feb 18, 2015

Since the new year I've been doing some research about what's being going on in the front-end dev world in the last few years since I've been away from it.  The times, they are a changing, and they are a changing rapidly!  I've pulled together a link dump of a bunch of articles that I found really interesting on a range of topics, you may find some of this useful and insightful...

  • Five Easy Ways to Be A Better Web Professional: A few tidbits of timeless wisdom.  From here I picked up this article about new the performance bottle neck, web latency.  Bandwidth is becoming less of a problem (still an issue for mobile web but it keeps getting better), but websites are made up of multiple small components (html, css, js, images, etc.) and internet performance is slowed down by all those round trip calls and responses to the server.

    Bonus: this video on how to move from being an Intermediate developer to an Expert developer is also pretty great.
     
  • The fate of client services and web design: Is web design a career path that may be on its way out? With tools available to allow people to create their own site designs and produce code (Macaw, Froont), or just use a cheap or free theme for their favourite CMS, or heck, even let an AI design your site (The Grid), are web designers and design firms on their way out?  Has design been commodified?

    I started out on this article about whether humans can beat the machines, which linked off to a whole bunch of other places...
    • Decline of the web page: a hypothetic piece about how we access less and less web pages and more and more services that help us find or digest those webpages, both good (we are starting to develop a standardized way of navigating the web) and bad (web design and UX will matter less)
    • The End of Client Services: On the tension between helping a client tell a story, and how, increasingly, telling a digital story requires building a digital product, which doesn't fit the traditional web dev/design business model, time lines and billing.  The author argues that there are opportunities to be had in this new paradigm.  Bonus: Dear Graphic and Web Designers...
       
    And I found that original link through the wonderful CSS Tricks.

The rest of the following links are kind of all over the place...

And lastly...a new (?) way of checking whether your site is being viewed in it's mobile or desktop media query mode.  I couldn't find any article that described this technique, so here's a description of how it works...

Javascript and media query break points

Sometimes you need to write some Javascript or load a graphic or resource which is only used in the desktop layout of your responsive design.  To determine which "mode" your user is currently in, you could detect the width of the screen or viewport, but results will vary across browsers and versions and which aspect of the browser's height or width that you're looking for.

There's a new window.matchMedia object available that allows programatic access and test methods to find whether a media query is currently being applied to a page. (window.msMatchMedia is the older Microsoft version, although IE 10 and up supports the standard window.matchMedia object)  To test whether a media query is currently being applied, you can do this:

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

Support for matchMedia is pretty good across all browsers except < IE 10, and of course someone has already abstracted this away in a library, adding in support for all kinds of queries.

The method I found that originally inspired this post uses a CSS-only approach using the ::before selector and content: .... You start with something like this in your CSS (adjust the breakpoints as you see fit):

body::before { content: 'mobile'; display: none; } @media (min-width: 768px) and (max-width: 991px) { body::before { content: 'tablet'; display: none; } } @media only screen and (min-width: 992px) { body::before { content: 'desktop'; } }

What this will do is add the appropriate text into the ::before of the body element and hidden from view. If the text is found, then you know what media query is currently being used on the page! To find the text, use:

var MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "");

Of course, if your browser doesn't support media queries, then this won't work.  That's why you default to mobile!

At the end of the day, the pure javascript method of window.matchMedia is probably the better way to go as it requires less code.

Categories: 

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.