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...
The rest of the following links are kind of all over the place...
- The State of Javascript in 2015: a post about the significant churn rate in the world of modern Javascript frameworks.
- Generation Javascript: a post about the lack of overall architecture and planning in the Javascript community.
- Awesome List: a list of awesome links, tutorials, etc. So many links!
- Why GitHub is not your CV: on the difference between looking at a coder's code, and talking to the coder. Plus, what exactly does "passion" mean.
- John Resig: Personal site for the creator of Sizzle, the CSS-selector secret sauce that made jQuery so powerful and popular.
- Code School and Code Academy
- A New Breed of Free Source Code Editors: Thinking of needing a new tool? Check these out.
- Real Favicon Generator: the last (?) favicon generator you'll ever need.
- A Guide to Web Components: the hot thing that's coming down the pipe.
- 18 Meta Tags every webpage should have in 2013: This is dated obviously but from what I've been able to gather, still mostly true, except for the author rel meta tag, which Google no longer supports in their search results. You can still use it, but right now I'm unclear as to what benefit you get by doing so.
- Humans.txt: A "standard" for creating an credits file for your site. This is an older one, I've used it on my public-facing projects in the last few years.
- A CSS-only, Javascript-less slider. Unfortunately, it's not at all accessible. Still, a neat idea.
- New CSS measurement units: Viewport Height and Width, and Root em.
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.
Recent comments