This content originally appeared on DEV Community and was authored by Nick Taylor
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.
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
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
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
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
Books
Twitch Streams
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.
This content originally appeared on DEV Community and was authored by Nick Taylor
Nick Taylor | Sciencx (2021-12-28T04:16:47+00:00) Frontend Developer Resources 2022. Retrieved from https://www.scien.cx/2021/12/28/frontend-developer-resources-2022/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.