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. I also added sprinkles of shameless plugs. 😎

También puedes leer este artículo en español gracias a Chema Bescós!

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

Most resources are free, but some resources you need to pay. 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 at work, use it. Also, many 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 massive shoutout to public libraries. 😎

I work with Preact daily, and I also work with React. There are other libraries and frameworks out there, but I will veer away from all that in this post. The browser extensions section is the only place where I'll mention frameworks and libraries.

This post is a work in progress, so expect this list to update throughout 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 are some excellent resources to get you there.

• JavaScript 30 – A classic care of Wes Bos. These are fun projects to help solidify some JS fundamentals.
• JavaScript Katas – I found this resource a long time ago, but it's gotten a refresh in recent years. I even did a live stream of doing some of the Katas!

• patterns.dev

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

• Jake Archibald: In The Loop - JSConf.Asia

• Tasks, microtasks, queues and schedules – A great post from Jake Archibald on some more advanced stuff

• Lydia Hallie's JavaScript Visualized series on DEV – Lydia is great at explaining concepts through visualizations.

• Just JavaScript – From Dan Abramaov and Maggie Appleton. Like the site says:

Discover and rebuild your JavaScript mental models.

• I don't go super deep in this lunch and learn, but I give some tips on how to get started with debugging JavaScript.

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 – Marius has a tonne of great blog posts about TypeScript and some great courses on Egghead.
• Practical Advanced TypeScript – I loved this course from Rares Matei
• The TypeScript team’s 2021 type | treat series on DEV – Orta from the TypeScript team put some amazing challenges together this year
• TypeScript Playground – The TypeScript Playground keeps improving and is a great place to test stuff out.
• Learn TypeScript from the Ground Up with James Henry – A great free course from James Henry. If you enjoy it, consider buying his advanced course.

Update July 2022: I created a new post for TypeScript learning resources, so check that out too!

Learning Resources for TypeScript

Nick Taylor ・ Jul 10 '22

#typescript

CSS

Let's skip the centring jokes in CSS. We're in the 2020s now, and this is something relatively 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
• What the flexbox?!
• An Interactive Guide to Flexbox

HTML

If you're doing web development long-term, you must become familiar with semantic markup. Pass on the order for <div /> soup.

• MDN as always
• HTMHell – A great site with horrible examples of HTML and how to fix them
• Periodic table of HTML elements – A fun spin on the classic periodic table
• This one isn't just HTML, so I should probably create another section. 🙃 Check out buildexcellentwebsit.es for key foundations & principles of building great sites.

Accessibility

Accessibility is super important and honestly, if you want to stand out as a frontend developer, levelling up here is a good move.

• WebAIM's contrast checker – An easy way to check colour contrast
• ButtonBuddy – A fun interactive building tool to create accessible buttons
• Inclusive Components – A great site on how to build inclusive components
• Forem Developer documentation on accessibility – I'm biased, but I love our a11y documentation
• Marcy Sutton has a great list of a11y tools on her course site testingaccessibility.com
• web.dev's Learn Accessbility
• 5 things I'm thinking about when I check a Pull Request for accessibility – A great checklist of things to look for when reviewing frontend related pull requests

5 things I'm thinking about when I check a Pull Request for accessibility

Suzanne Aitchison ・ Mar 30 '21

#a11y #webdev #javascript

Animations

Animations are a great way of enhancing a user experience, but remember, don't add animations to your site for the sake of adding animations. Here's some great people's work to check out in this space.

• Anything by Jhey Thompkins
• Anything by Cassie Evans
• I'm biased, but my co-worker @coffeecraftcode is a whiz when it comes to animations. 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 her stuff.
• prefers-reduced-motion: Taking a no-motion-first approach to animations by Tatiana Mac – This falls under accessibility concerning animations, but I'm putting it here to make it stand out a bit more

Jamstack

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

Browser Extensions

• WAVE – "evaluate web content for accessibility issues directly within your browser"
• axe – "test your web applications to help identify and resolve common accessibility issues"
• Accessibility Insights for Web – "helps developers find and fix accessibility issues in web apps and sites"
• If you're working with React: React DevTools (Chromium based browsers | Firefox)
• If you're working with Preact: Preact DevTools
• VisBug – Open source web design debug tools

Testing

Testing is a big topic, and I'll scratch the surface here, but knowing what to test is super important. At the end of the day, when you ship something, ask yourself, "Do I feel confident with shipping this?".

• I'm a fan of Cypress, and we use it at Forem (the software that powers dev.to). Over time, we've been building out our documentation, and I think it's a 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.

Living on the Edge

A lot of cool stuff is happening on The Edge. I haven't done much here, but looking to level up in 2022.

• Cloudflare Workers – Includes stuff like Durable Objects, key value stores etc.
• Cloudflare Pages
• Living on the edge: A deep dive into Netlify Edge Functions
• Vercel Edge Functions

Tooling

We all love tools. There's plenty to go around, but I'll touch on a few.

• 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 '21

#devtools #summaries #javascript

Books

These are some great reads.

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

Twitch Streams

I'm a big fan of Twitch. I stream on my own at livecoding.ca as well as on the DEV Twitch stream. Here are some great folks you should be watching for all things frontend.

• 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 initially, I will update this over the coming year.

If you liked this, consider subscribing to my newsletter!

Other places you can find me at:

🎬 YouTube

🎬 Twitch
🎬 nickyt.live
💻 GitHub
👾 My Discord
🐦 Twitter/X
🧵 Threads
🎙 My Podcast
🗞️ One Tip a Week Newsletter
🌐 My Website