DEV Community

Cover image for Frontend Developer Resources 2022
Nick Taylor (he/him)
Nick Taylor (he/him)

Posted on • Updated on • Originally published at iamdeveloper.com

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. 😎

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!

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

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.

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.

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.

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.

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

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.

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

Books

These are some great reads.

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.

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!

Discussion (38)

Collapse
mjcoder profile image
Mohammad Javed

Awesome resources, enough here to keep anyone busy for a couple of months! Bookmarked and shared on Slack with my colleagues.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Jake Peralta from Brooklyn Nine Nine saying Hella Fresh!

Collapse
leptium profile image
Richard E. Salvatierra

Estimado amigo muchas gracias por toda la información super valiosa que nos estás entregando. Mi 2022 será mi año de entrega total al desarrollo y tu artículo será una de las mejores herramientas de trabajo. Éxitos para ti y gracias por compartirlo. Saludos desde Perú. // Dear friend, thank you very much for all the super valuable information that you are giving us. My 2022 will be my year of total dedication to development and your article will be one of the best work tools. Successes to you and thanks for sharing. Greetings from Peru.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Gracias!

Actor Leonardo DiCaprio as Gatsby doing a cheers

Collapse
wilhelmina12341 profile image
Wilhelmina1234

I would like to add one more free resource i.e. eBooks-Courses-Downloader.com where you can try eBooks like HTML To React: The Ultimate Guide, Fluent Python (2nd Edition), Jetpack Compose by Tutorials, Head First Java (3rd Edition), Head First C# (4th Edition), Ten++ Ways To Make Money As A Developer, etc.

Collapse
pani profile image
pharmtechps

Thank you so much for sharing so useful.
:)

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Actress Anna Kendrick in a film saluting as her character

Collapse
bharatdangar profile image
Bharat Dangar

Awesome resources, thank you for sharring it

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Glad you liked it!

Stephen Colbert saying Awesome Sauce

Collapse
posandu profile image
Posandu 🇺🇦

Nice article, Nick!

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Thanks!

Amy Poehler and Seth Green high fiving on News Update

Collapse
dragonares5 profile image
Jonatan Quennehen

I love this type of article. They are really useful resources. Thank you!

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Awesome!

Hackerman from Kung Fury putting on a Nintendo Power glove

Collapse
andrewbaisden profile image
Andrew Baisden

Tons of great resources in this list 👏

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Thanks!

Toast jumping out of a toastser

Collapse
nucliweb profile image
Joan León

Awesome resources, thank you! 💯

Btw, we can use VisBug on Chrome, Firefox, Safari, and Edge.

👉🏼 github.com/GoogleChromeLabs/Projec...

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

That's awesome! Thanks for the correction. I'll update the post.

Kylo Ren on Undercover Boss giving a thumbs up

Collapse
mjcoder profile image
Mohammad Javed

Awesome resources, thank you for taking the time in putting this together. Much appreciated. 👏

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

A kid twirling in a cowboy outfit firing pistols that are their fingers

Collapse
alxmcr profile image
Alejandro M. Coca

Wow!... Amazing resources and good organized😄. Thank you so much for sharing them!💯🎉🤩

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Geordi Laforge in a sweater saying “No problem”

Collapse
vikirobles profile image
Vicky V

thank you very much thats a gem!!

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

BB-8 giving a thumbs up

Collapse
suhakim profile image
sadiul hakim

That's a hard work! i appreciate 👍

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Captain America saluting

Collapse
serhiyandryeyev profile image
Serhiy

Thanks, Nick!

Collapse
nickytonline profile image
Nick Taylor (he/him) Author • Edited on

Glad you liked it!

Yes, that's awesome!

Collapse
nahid570 profile image
Nahid Faraji

I buy your yearly subscription, let's see how it's going.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Loki holding KFC

Collapse
golangch profile image
Stefan Wuthrich

A great series. Tk you
React Jobs

Collapse
dbrigiita profile image
Dani Brigiita

Awesome

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Thanks!

A T-Rex saying Yeah!

Collapse
han_solo profile image
Han Solo

Nice Content

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Chow Yun-fat giving a thumbs up

Collapse
adiatiayu profile image
Ayu Adiati

Thank you for this, Nick! 😃

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Hot Rod saying Cool beans!

Some comments have been hidden by the post's author - find out more