Frontend Developer Resources 2022

I don't know if I'll keep doing this every year, but I did one of these in 2020 and that post got some good signal, so I renamed it to Frontend Developer Resources 2020 which brings us to Frontend Developer Resources 2022. Oops, I missed 2021. Technically we're still in 2021, but humour me.

This is not a complete list, more a list of stuff I found compelling in 2021 that will keep you set in 2022 and on and builds off of my previous list. You may see some repeats in here from my previous post, but that's only because they're still super relevant.

Most resources are free, but some are paid. I also highly recommend an egghead.io subscription. I've been a happy subscriber for quite a while now.

If you have an educational stipend, I highly recommend egghead. Also, a lot of public libraries give you access for free to paid resources like LinkedIn Learning. Check out your local library before purchasing certain content. Also, just a huge shoutout to public libraries.

I work with Preact in my day to day and I also work with React. There are obviously other libraries and frameworks out there, but I'm going to veer away from all that in this post. The only mention I'll make is in the browser extensions section.

This is a work in progress, so expect this list to be updated over the course of 2022.

JavaScript

Regardless of whether or not you start with a library or framework, at some point as a frontend developer, you will need to understand JavaScript in more depth. Here's some good resources to get you there.

• JavaScript 30
• JavaScript Katas
• patterns.dev

Addy Osmani

@addyosmani

Introducing "Learning Patterns": patterns.dev - a free 435+ page book on JavaScript + React design & performance patterns from @lydiahallie and I. On the web, ePub & PDF.

07:36 AM - 20 Dec 2021

• Philip Roberts talk at JSConf EU "What the heck is the event loop anyway?" is a great explanation of the event loop.

• Jake Archibald: In The Loop - JSConf.Asia

• Tasks, microtasks, queues and schedules

• Lydia Hallie's JavaScript Visualized series on DEV

TypeScript

TypeScript is getting more and more popular every year. Even if you're not a fan of it, it's good to be at least aware of it.

• Anything by Marius Schulz
• Practical Advanced TypeScript
• The TypeScript teams 2021 type | treat series on DEV
• TypeScript Playground
• Learn TypeScript from the Ground Up with James Henry

CSS

Let's skip the centering jokes in CSS. We're in the 2020's now and this is something fairly easy to do nowadays. Dig in and level up on your CSS.

• Andy Bell's Modern CSS Reset
• Josh W. Comeau's CSS Reset
• Designing Beautiful Shadows in CSS
• CSS for JavaScript Developers
• Grid by Example
• cssgrid.io
• Modern CSS Solutions
• SmolCSS
• Every Layout
• A Primer On CSS Container Queries

HTML

• MDN as always
• HTMLHell

Accessibility

• WebAIM's contrast checker
• ButtonBuddy
• Inclusive Components
• 5 things I'm thinking about when I check a Pull Request for accessibility
• Forem Developer documentation on Accessibility

Animations

• Anything by Jhey Thompkins
• Anything by Cassie Evans
• My co-worker @coffeecraftcode is a whiz when it comes to animations as well. Check out her codepen profile and LinkedIn courses. I've paired with her a bunch of times to learn about animations, so I can 100% guarantee that she knows what she's talking about.

Jamstack

• Jamstack Explorers
• jamstack.org
• Incremental Static Regeneration
• Distributed Persistent Rendering

Browser Extensions

• WAVE
• axe
• Accessibility Insights for Web
• If you're working with React: React DevTools (Chromium based browsers | Firefox)
• If you're working with Preact: Preact DevTools
• VisBug (Chromium based browsers only)

Testing

• I'm a fan of Cypress and we use it at Forem (the software that powers dev.to). We've been building out our documentation over time, and I think it's a really great resource if you dive into end to end testing. Check out Writing Cypress Tests
• Testing library's suite of tools. Whether it's component tests in React, Svelte, plain old HTML/CSS/JS or end to end testing, Testing Library has you covered.

Cloud IDEs/full blown development environments

• Gitpod
• vscode.dev
• CodeSpaces (if you have access)
• Stackblitz
• CodeSandbox
• vscodetips.com a community discussing all things VS Code including cloud IDEs. Full disclosure that this is a shameless plug. It's a new community I started this year.

Tooling

• Storybook learnstorybook.com
• If you have Node.js installed and need to configure a JavaScript based project's gitignore file, from the root of the project run npx gitgnore node (It works for other languages as well or if you omit the language, it will give you a list of all the supported gitignores)
• Parcel
• Vite
• Turborepo

Why TurboRepo Will Be The First Big Trend of 2022

swyx Dec 27 5 min read

#devtools #summaries #javascript

Books

• Move Things With CSS
• TypeScript in 50 Lessons
• Inclusive Components: The Book

Twitch Streams

• TrostCodes
• Stephanie Eckles
• Jhey Tompkins
• Michael Chan
• Ben Myers
• Learn with Jason

I'm sure I've missed some stuff, but this is the initial brain dump. As mentioned at the beginning, I will update this over the coming year.