Great articles seem to run in bunches - there will be a ton of new CSS Grid posts, or React posts, and they all kind of cluster together. This week we’ve got a cluster of posts about different developer tools built into Chrome and Firefox! One down to earth practical debugging tutorial in the JavaScript section and two super cool exploratory pieces under ‘Other Awesome’.

Happy Friday!
KBall from ZenDev

P.S. I’d love to make these more useful for you, and it would help to know more about what you’re interested in. What are you working on learning right now? Shoot me an email at [email protected] and let me know!

CSS & SCSS

The Ultimate Guide to Flexbox — Learning Through Examples

An excellent set of example problems and solutions to common layout problems using Flexbox.


Basic grid layout with fallbacks using feature queries

If you want to use CSS grid but need to support existing browsers, you’re going to need to set up some fallbacks. This is an excellent tutorial on how to create a fallback system for your grid using Flexbox where available, and inline block (yes, really!) where not to get all the way back to IE8.


CSS Almanac: unicode-range

Did you know that you can control which characters are rendered using a custom font loaded with @font-face? And even combine multiple fonts varying by character? I didn’t, but apparently so - super cool right?


CSS in JS is like replacing a broken screwdriver with your favorite hammer.

A high level look at why moving CSS into Javascript is applying the wrong tool to the problem of unmaintainable CSS. Full disclosure: I wrote this piece, and wrote it deliberately to be a bit provocative. If you disagree, let me know! I’m happy to learn more about better ways to do CSS.


The All-New Guide to CSS Support in Email

CSS in Email is it’s own special beast, and I don’t know anyone who doesn’t need a reference when they’re coding HTML emails (except maybe if you’re using Foundation for Emails, but still!). This newly updated reference by Campaign Monitor is a phenomenal resource!


JavaScript

Learn How To Debug JavaScript with Chrome DevTools

A nice beginner-level tutorial into how to go beyond console.log and use the Chrome DevTools for debugging with breakpoints, watch expressions, and more!


JavaScript Monads Made Simple

“Made Simple” might be overselling it a little bit - if you’re new to functional programming and lingo this may still twist your brain around, but it is still one of the most thorough and useful introductions to Monads that I’ve seen. Read it, it will make you smarter. :)


How to Organize a Large React Application and Make It Scale

One of the great features of React is that it is not prescriptive about many things - you can fit React into quite a few different application structures. The downside of this is that it often leads folks wondering how to structure a large React application. This is a great article on a highly effective approach to React application architecture.


4 Important Changes In Vue.js 2.4.0

Vue.js continues to make great strides in becoming one of the top tier JavaScript frameworks. Check out some of the great improvements in 2.4.0, with a particular emphasis on better Async Component support.


Ember. Your best bet.

Ember hasn’t been getting nearly the buzz of other JavaScript frameworks recently, but some of my friends swear by it, and I’ve never seen Yehuda Katz build something that wasn’t amazing. This article is a reasonable intro to some of the reasons you might want to give Ember another look.


Other Awesomeness

Is there any value in people who cannot write JavaScript?

A deeply thoughtful piece about the way our industry thinks about and values people and skills. Spoiler Alert: The answer to the question is a resounding YES! :D


Prototyping the Future of DevTools

Fascinating look back into the history of web developer tools and an exploration into ways we might make the tools of the future more flexible and powerful.


9 Things You Didn’t Know About Firefox Dev Tools

I’ve been using Chrome devtools for so long it’s hard to imagine switching, but Firefox has been doing some really cool, innovative stuff to improve their tooling. Check out this article of amazing things you can do with the Firefox Dev Tools, and let me know if you’re thinking of switching. :D


Smartphones are driving all growth in web traffic

Excellent data on web traffic and growth by device, with a breakdown by industry vertical. Another reminder that mobile-first web dev is one of the most important skills you can have.


Lazy async SVG rasterisation

A super cool technique to improve performance on animation of complex SVG graphics.


Happy Friday!