Friday Frontend: Developer Tools edition!
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.
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!
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!
“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
Ember. Your best bet.
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.