Of course, we’ve got lots of other good stuff in CSS and other awesome. Explorations of the CSS mental model, some good catalogs of CSS properties and selectors, and a big step forward towards a passwordless future. Enjoy!
KBall from ZenDev
CSS & SCSS
Nice look at the readability benefits of CSS Custom Properties over some prior mechanisms used to create a set of themed components (like alerts).
Animated visual demonstrations of a whole slew of CSS properties. This is great for getting a sense of the possible, and then when you find something you’re interested in there’s links off to resources to learn more.
Selectors are one of the fundamental building blocks of CSS. Sure you can go wild on those cool properties, but you really need to know how to target elements. This post includes not only a downloadable cheat sheet, but also a fun game where you can test your knowledge.
I found this to be a very nice breakdown/way of thinking about separation of concerns within the “everything is a component” mental model that React fosters. It does a good job of explaining the concepts of higher order components and shows how adopting a structure separating logical components from presentational components is helpful.
It’s no secret that I’m a big Vue.js fan, so I love to see things like this that dig into the community around Vue and how people are using it. Interesting to see that the most common “other JS library” used by Vue users is still jQuery, and that node & PHP are the two most popular backends (the latter probably related to Laravel’s embrace of Vue). Anyway, there’s a lot there, if you’re into Vue you should check it out.
This totally blew my mind. Took me a while to grok what the author was saying, but once I did it seemed so obvious I couldn’t believe I hadn’t noticed it before. In React it’s common to treat class-based components and functional components as relatively equivalent so long as you don’t need local state or lifecycle components. And now with hooks you can handle those cases as well, so they’re equivalent right?… and yet they are not the same. They are subtly, importantly different in the way they handle mutability. Read this post.
I recently had a conversation with someone who had taught at couple different code bootcamps, and I asked her what the most difficult thing for beginners seemed to be today. Promises, was the answer. Now some of that is probably just asynchronicity being hard in general, but some is specific to promises, so now I’m on the lookout for good articles on promises. This is one, digging deeply into how promise resolution works, particularly with different types of objects.
Prompted by a change in defaults over in the Rails world, Chris Coyier digs into the question and the pros and cons of shipping source maps to production. Most of the conversation focused around CSS, but I think the same thinking applies to JS.
Tongue and cheek walk through of a lot of the functionality that you get from the browser when you choose to use a
button element instead of trying to create your own with a div. Entertaining and educational.
VR is a bit outside of my wheelhouse, but the things you can do in WebVR with A-frame are pretty amazing. This article walks you through how to create a WebVR runner game using A-frame.
Ever since I switched everything into one-password and got a new-generation Macbook pro I’ve had a little bit of an advanced look at what our password-less future might be like. For the vast majority of applications I simply give my fingerprint on my mac and it logs me in… no passwords to forget, no cross-site vulnerability to password being hacked. It’s AMAZING. And now we’re looking at having a standard for that approach without the password manager in between. I can’t wait.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!