I update this page over time as I find new courses and resources. If you have any suggestions, please let me know. I ensure that I only link to high-quality content. This page focusses on JavaScript, obviously. I have another page on .NET related courses planned.
I've experienced a variety of code bases and have seen both great and terrible code. As a software developer, I want to make sure I'm using the best tools and techniques for my job. I want other developers to have this mindset also. Bad code can be written with anything, but in particular I've been facing a multitude of problems, bugs, spaghetti code, and general misuse of particular frameworks and libraries in the combined JavaScript, Node, and frontend space.
In short, I have grown frustrated with low quality, unmaintainable code. I made this page as a way to share what I consider to be excellent resources to help other developers write better code across the spectrum - frameworks, styling, testing, build tools, etc.
I've noticed that this is a topic which, surprisingly, many developers do not know about. We should be using ES modules and their related import and export syntax. I've also noticed that in some code bases the developers will
use it only at the surface level or even simply incorrectly such as exporting an object with attached functions thus negating the point of modules. Understanding ES modules is essential for modern JS and TS build tooling as well.
When you see older code bases that use require and module.exports know that this is using the "CommonJS" style of modules. These are an absolutely terrible module specification.
ES modules are part of the language meanwhile CommonJS is a made up format specifically for Node. Node supports ES modules now. There is no reason to use CommonJS in modern code.
This is an introductory course that can be used as a refresher for principles, language features, and syntax. I've found that in some projects there is liberal use of the “any” keyword to workaround unfamiliarity with TypeScript - which has knock on effects and can result in runtime errors the user experiences.
We should be aiming to fully utilise TypeScript to ensure we're developing robust software.
Pluralsight - TypeScript Fundamentals
This builds upon the knowledge from the previous fundamentals course. I've found that many projects using TypeScript do not have a strict
tsconfig.json``. This means there's whole categories of features not being used or enforced in these projects. By learning and then applying what these compiler flags enable, you will be able to write more robust and maintainable code in order to reduce bugs or any` keyword
workarounds.
Pluralsight - Getting the most from the TypeScript Compiler
This builds upon the previous two courses. TypeScript has a unique and very powerful type system. I recommend watching this because even if you don't currently use these features it's very likely that you'll end up using them all the time once you've understood them because of how effective they are. It's common to need to read third party library code where these features are common-place. The course covers how to use and create your own types and then build on top of them.
Pluralsight - Using Specialized Types and Language Features in TypeScript
There are several projects I've been involved with that use React and TypeScript that do not follow standard React patterns and principles. This leads to overly complex components that are hard to understand, maintain, and test. In some cases entire projects have been created with a small number of large components instead of building it up with smaller components to make bigger components. Furthermore, the way state is being handled in these projects is also not following expected React patterns (or in some cases, general component framework state management patterns).
I've listed these React courses that start from introductory to more advanced.
This is an essential video on the correct usage of `useState`` and common mistakes when using it.
Make sure to watch this after the video on useState. This hook is often misunderstood and learning how it works will reduce the chances of
writing bugs. Ever created an infinite loop with just useEffect? You forgot to supply the dependency array!
Knowing when to use useMemo allows for better performance and less rerenders.
This is an introduction to building React applications with TypeScript. I recommend completing this before the others.
Pluralsight - Building React Apps with TypeScript
State is essential to any component based framework. Projects with poor state management are a common side effect of a poorly architected applications. There are many options we can use to help improve this situation. This course covers a few options.
Pluralsight - Managing React State
Writing your data fetching logic by hand is over. Tell React Query where to get your data and how fresh you need it to be and the rest is automatic. React Query handles caching, background updates and stale data out of the box with zero-configuration
Toss out that granular state management, manual refetching and endless bowls of async-spaghetti code. TanStack Query gives you declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences.
I recommend watching this 100 second introduction video and then watching the longer video.
The longer video:
There's several modern options for styling with React that go beyond simple plain CSS or SASS files. Often, component styling depends upon state. That is, styling can be made declarative. The phrase to describe this is CSS-in-JS/TS. I'm not going to list all of the options for this as I'm aiming to make this page approachable for everyone. Some of the most popular tools are in the article linked.
One very popular tool in this space is styled-components. I recommend watching this video that introduces it. There are some tools that build on top of this as well - like xstyled.
While this course was written for React 16, and the current version is 18, this course introduces fundamentals.
This course introduces Jest and covers unit testing React components and applications including mocking of dependencies.
Pluralsight - Testing React 16 Applications with Jest 26
Tailwind is a design system API and set of automatically generated utility CSS classes. It can be used with any framework.