Friday Frontend: Trying New Things Edition
It’s amazing how getting out of your comfort zone in a new place can simultaneously exhaust you but also inspire you to learn more.
This week, I’d challenge you to dig into something you wouldn’t normally. If you’re mostly in the CSS world, dig into some of the JS posts. If you’re mostly a JS developer, try out the CSS posts. And if you do everything frontend, maybe dig into the WASM post towards the end of the newsletter.
Regardless, enjoy and have a great weekend!
KBall from ZenDev
P.S. Getting super close to launching some new resources for learning Vue.js! Watch for an announcement next week!
CSS & SCSS
This is a really neat technique for utilizing placeholders when inputs are empty but switching out to a label when there is content in there so users can maintain context. The post doesn’t show it, but you can even add animations to make it seem like the placeholder is sliding into the label location. Very very cool stuff!
An interesting take highlight the pros and cons of utilizing the
& feature from Sass to create sets of related classes. The conclusion matches a take I’ve seen over and over again in software… we love to optimize for terseness, but for long term maintainability being explicit wins almost every time.
A great take breaking down the mental model of Flexbox and when you’d want to use it, as opposed to CSS Grid or even more traditional layout mechanisms. I love the description of flexbox as “squishy” - in many ways it is the most “web-native” layout mechanism, adjusting layout seamlessly based on your content and the viewing device.
One of the things that makes CSS Grid sometimes a little daunting to learn and adopt is how many different ways there are of doing the things you might want to do. This post breaks down the many different properties of Grid into 4 digestible chunks.
For simple component relationships, props down events up are the right way to handle things. For complex stateful UIs, a state manager like VueX is far better. But in the middle there are a set of cases where an Event Bus can be a useful tool, and it turns out it’s super simple to implement one in Vue.
this is confusing or challenging to work with.
If you’re using React but it still feels like magic, and you’re not sure how the pieces fit together or what it’s actually doing under the hood, this is a nice article to start getting more of a sense. Certainly doesn’t cover everything, but really makes clear the basics of how component rendering works and how that interacts with the actual DOM.
I’m a huge fan of opinionated scaffolds as a place to start applications, and in the React world ‘Create React App’ is the gold standard. They just released their 2.0 version, and there are some very nice upgrades! I’m particularly a fan of the built-in SCSS/CSS modules integration, but there’s a load of other good stuff that this blog post walks through in detail.
I saw a stat recently that something less than 50% of the images on the web have alternative text defined, leaving users of screen readers and other enabling devices completely blind to those images. But even for those that are labeled, how many of those alt texts are actually useful? This post explains what you should be thinking about when you’re writing alt texts and other content around an image to be the most helpful.
Microsoft Edge is about to roll out a new release, and there’s lots of goodies in there for web developers. I’m particularly excited about the Web Authentication API, but there’s also better Service Worker support and much more. Check it out!
This merger was something I wrote about last week, and it’s been the talk of the conference here at Node + JS Interactive. Here’s another take on it, from one of the big names in the ecosystem, founder of npm and former ‘BDFL’ at Node.js