Hey, if you like me are in a place that is locked down, it might be feeling a bit hard. You might be wondering if it’s working, if it’s worth it, and all of that. But there is some real data that it is! Keep it up, we can beat this darned virus!

If having front-end development articles helps you with passing the time and staying in, enjoy the articles below. If you’re overwhelmed with caring for kids, or parents, or others and just don’t have the time, don’t feel guilty if you’re falling behind at work and reading. Taking care of yourself and your family is first, and then helping whoever else you can, and only then worry about keeping up.

Stay safe and healthy!

Best,
KBall from ZenDev

P.S. I’ve been hearing about a number of tech layoffs, particularly in consulting companies and those focused on SMBs. Thankfully a fair amount of the tech industry has not been super negatively impacted yet, and there are still jobs available. If you’ve been impacted and are looking for work, feel free to hit REPLY and tell me what you’re looking for and a bit about yourself, and I will happily connect you to some of the folks I know that are still hiring. Most of my immediate connections are in the US, but wherever you are let me know and I’ll do my best.

CSS & SCSS

Indicating Scroll Position on a Page With CSS

Very clever trick for using a combination of position: sticky and CSS blend mode to create a CSS+HTML-only horizontal scroll indicator. Love it!


A Practical Overview Of CSS Houdini

It seems like I’ve been waiting for CSS Houdini for FOREVER (I think I first heard about it and got excited in 2017), but I’ve kinda not paid any attention to it in a while because it seemed like it was never going to get support. Well. It looks like I may have ignored it too long; a striking number of Houdini features have been added by at least the chrome & chromium teams, and both Firefox & Safari appear to be plugging along behind. We may have already crossed the point where it’s worth using as a progressive enhancement. If you’re not familiar with Houdini, this article is a great way to learn.


How to use the currentColor value in CSS

Short and sweet. The currentColor value is not something I’ve used much, but it seems like it could be very useful, particularly when using CSS variables and doing other more complex things with colors.


How to create an accordion hover effect with box-shadows

Nice targeted tutorial about how to make a particular effect work, using a stacked set of cards as the example, using the multi-box-shadow technique.


Positioning Text Along a Path with CSS

Delightfully whimsical look at positioning (and animating) text along a path. Does use a little JS as well, but the primary tool is the offset-path property. Very fun!


JavaScript

React Suspense in Practice

Seamlessly handling asynchronicity is one of the hardest problems in web development, and one for which there are many different approaches to tackling. React’s Suspense is one of the most interesting attempts to declaratively solve for asynchronicity. Definitely worth learning about.


For of loops in Javascript one loop to rule them all

This is an article I wish I’d written. The for of loop introduced in more modern versions of JavaScript is super powerful, but we’ve had so many loop structures, and it is just slightly different from those that have come before, so it’s always been confusing. This article lays out a set of scenarios and makes it super clear how to simply use for of in each one.


Deep dive into Vue state management

This article uses Vue as the example, but I think it will be useful to anyone who’s relatively new to building complex, SPA-style front-end applications. It breaks down the concepts of local state, passing state down through components (prop drilling), and using a centralized store. It explains the pros and cons of each. Highly recommend if you’re newer to this space, and if you’re working in React instead of Vue, skim past the syntax specific things and substitute Redux or Mobx in your head for Vuex.


Redwood brings full-stack to the JAMstack (Audio)

(Bias alert - I was on this podcast) Two weeks ago I linked out to the release of the new Redwood.js JavaScript framework - now I want to share a super fun and interesting interview that JSParty did with Tom Preston-Werner about Redwood. We dive deep into the motivations, what makes it unique, and where it’s going. And if you don’t like audio, don’t worry there’s a transcript!


Other Awesomeness

Wikimedia (and thus Wikipedia) to use Vue.js

This is both really interesting as a statement (despite it’s popularity, Vue.js lags wayyyy behind React in terms of adoption), but also because of the detailed breakdown of the reasons behind adoption. The Wikimedia laid out a set of requirements, found that of existing modern frontend frameworks only React and Vue would meet those requirements, and then chose Vue for clear and understandable set of benefits. If you or your org are making these decisions, definitely take look through!


Maintaining Performance

Interesting post, a little bit stream-of-consciousness style, looking at the ongoing treadmill of maintaining a site with good performance. If you’re looking for a “how to” post, this is not it, but if you want something that will make you think and talk through some of the concerns in keeping up a high-speed web app or site, check this out.


Top Front-End Development YouTube Channels

If you like learning by video, this has a great set of available resources. I’m not usually a video learner, but the one I’ve watched some of here is Layout Land, and can vouch for it being top notch. There’s also a lot of suggestions in the comments, so don’t stop at the main article.


Web Accessibility Checklist

Really nice lists of items to address to improve accessibility. I particularly appreciate how the list is sourced by looking at what problems are most observed in the wild, first by looking at top ecommerce sites and then top websites over all.


npm is joining GitHub

In case you missed it, this massive announcement came out a bit over a week ago. I have mixed feelings about this - on the one hand, it pretty much ensures npm is not going to just collapse and die, which was a real concern. On the other hand, it continues the trend of consolidating open source infrastructure under a few massive corporations, with Microsoft in particular owning SO much of our ecosystem. Yikes!