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
An excellent set of example problems and solutions to common layout problems using Flexbox.
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.
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 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. :)
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.
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
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.
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
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.
A super cool technique to improve performance on animation of complex SVG graphics.