Hope you’ve had a great week! This episode contains a lot of interesting stuff, but what stands out to me are 2 deep-dive articles on different pieces of JavaScript. Particularly the article comparing function components to classes was a mindblower, and I enjoyed wrapping my head around the article on promises as well.

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!

Best,
KBall from ZenDev

CSS & SCSS

Do CSS Custom Properties Beat Sass Loops?

Nice look at the readability benefits of CSS Custom Properties over some prior mechanisms used to create a set of themed components (like alerts).


The CSS mental model

The author attempts to lay out some of the differences in how one thinks about CSS vs JavaScript. This is a challenging topic - I’ve read a lot about it, and written some - and I’m not sure it’s possible to do a complete assessment. This article doesn’t try; it stays pretty basic, but I think it’s a worthwhile addition to the conversation.


Lesser-known CSS properties in GIFs

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.


CSS selectors cheatsheet & details

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.


State of CSS Survey

I already included this once, but I want to put it out there again and encourage you to go take it. Particularly if you’re focused on CSS! The authors of the survey have done some prior surveys in the JavaScript world, and while they’ve put in good faith efforts to get broad responses their audiences have tended to be very heavy in the React world. Personally, as much as I love React (which I do, it’s a great tool!), that community tends to be out on one edge of a lot of trends, so I’d really like to encourage folks who are in more traditional frontend roles to participate in the survey.


JavaScript

How the “Golden Rule” of React components can help you write better code

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.


Creating Custom Directives in Vue.js

Straightforward, clear introduction to what goes into creating a custom directive in Vue. If you happened to read my article last week, I highlight custom directives as one of the key tools in your toolchest for integrating 3rd party JavaScript - if you liked that but still were unsure of how to proceed, this article starts from the very basics and builds up.


All The Numbers From The State of Vue.js Report 2019

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.


How Are Function Components Different from Classes?

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.


A deep-dive into promise resolution with objects including a then property

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.


Promoted Link

One Month Bootcamp

One Month is a cohort-based online bootcamp that provides a number of different courses. Run by an instructor who’s taught at places like General Assembly and Columbia University, they run 1-month long project based courses. New courses start next Monday, and along with the pre-recorded materials you get access to weekly office hour sessions and a shared slack channel with both the instructor and other students. They have a range of courses including JavaScript, HTML & CSS, and much much more. Click any of these links for a 10% discount.


Other Awesome

Should I Use Source Maps in Production?

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.


When Is A Button Not A Button?

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.


How To Build An Endless Runner Game In Virtual Reality (Part 1)

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.


W3C approves WebAuthn as the web standard for password-free logins

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.