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.
I spent most of this week in beautiful Vancouver Canada for Node + JS Interactive. It’s been great talking with folks from all across the JavaScript world, as well as seeing a beautiful city that I’d never before visited. I love how it’s jogged me out of my routine and prompted me to think about some new things.
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!
Best,
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
The Way We Talk About CSS
This article beautifully encapsulates something I’ve struggled to express: CSS is unique as a language because it serves a unique environment. But it is codified, thoroughly designed, and (mostly) consistent. Where it is not consistent, often it is for legacy reasons (we can’t break the web), a problem shared by JavaScript and HTML. But it is different, and we need to stop apologizing for those differences and instead focus on explaining them and understanding why.
CSS Only Floated Labels with :placeholder-shown pseudo class
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!
Sass selectors: to nest or not to nest?
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.
Use Cases For Flexbox
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.
How I remember CSS Grid properties
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.
JavaScript
Using Event Bus to Share Props Between Vue Components
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.
Taming this In JavaScript With Bind Operator
Very interesting! A stage 0 proposal (AKA don’t use it yet) for continuing to iterate on JavaScript’s syntax to add a Bind operator to handle a few more binding cases where this is confusing or challenging to work with.
These React Fundamentals You Skip may be Killing You
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.
Hello, Create React App 2.0!
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.
Deep Dive Into The New Vue Devtools v5.0
One of the most interesting areas of front-end innovation right now is not in the core JavaScript frameworks, but the meta-frameworks and tooling around them. This post goes through the new features in Vue Devtools version 5, including some tools for better understanding routing, some super sweet looking new performance tools, and more!
Other Awesomeness
Calls between JavaScript and WebAssembly are finally fast 🎉
I love this. Not only is the announcement super great - it’s now fast to call back and forth between JavaScript and WASM - but this post gives a great visual explainer of how all this stuff works under the hood.
Writing good text alternatives
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.
What’s new in Microsoft Edge in the Windows 10 October 2018 Update
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!
Node + JS Foundation
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
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)