The Professional Developer's Toolbox

You now know JavaScript itself. But professional developers also use a set of tools around the language. You don't need to master these yet, but you should know what they are, because you'll hear about them constantly.

Git and GitHub: save points for your code

Git is a version control tool. It takes snapshots of your project (called commits) every time you reach a good point, like save points in a video game. Broke everything? Jump back to the last save. Want to see what you changed last Tuesday? Git knows.

A taste of the commands:

git init                         # start tracking this folder
git add .                        # stage all your changes
git commit -m "Add expense list" # take a snapshot, with a message
git log                          # see all your snapshots

GitHub is a website where you can store your Git projects online, back them up, show them off to employers, and collaborate with other developers. Remember to create a file called .gitignore containing the line node_modules, so Git doesn't save that enormous folder.

Learning Git is probably the single most useful next step after this book. Almost every software team in the world uses it.

Formatters and linters

• A formatter like Prettier automatically tidies your code's layout (spacing, indentation, quotes) every time you save. No more arguments about style!
• A linter like ESLint reads your code and warns you about likely bugs: unused variables, using == instead of ===, and so on. It's like having Buggsy's personal enemy looking over your shoulder.

Both have VS Code extensions. Install them and you'll write cleaner code immediately.

TypeScript

TypeScript is JavaScript with types added. You write what type each variable and parameter should be, and TypeScript checks your code before it runs:

function greet(name: string, age: number): string {
  return `Hi ${name}, you are ${age}`;
}

greet("Mia", "twenty"); // ❌ TypeScript error: "twenty" is not a number

It catches a huge category of bugs (remember all those "5" + 1 problems?) before you even run the code. Many companies use TypeScript for big projects. Since it's just JavaScript plus types, everything you've learned in this book still applies.

Frameworks and libraries

When web apps get big, building everything with createElement and addEventListener gets tiring. Frameworks give you a more organized way to build user interfaces. The most popular ones are React, Vue, Svelte and Angular. They all build on the ideas you learned in Grades 11 and 12: data in, page out, and reacting to events. Pick one after this book (React is the most widely used, but any of them is a great choice).

Build tools

Tools like Vite take your project's many files (JavaScript modules, CSS, images, TypeScript), optimize them, and bundle them up so they load quickly in the browser. They also give you a development server that refreshes instantly as you code, like Live Server with superpowers.

Hosting

When you've built something, you'll want to share it with the world! Services like GitHub Pages, Netlify, Vercel and Cloudflare Pages let you put simple websites (HTML, CSS and JavaScript) online, usually for free. Your capstone projects in Senior year are perfect candidates.

Junior year: done! You now work the way professional developers do: organized modules, Node.js, npm packages and automated tests. Only one year left.

In Senior year, there are no new topics. Instead, you'll put everything together to build three complete, real-world projects from scratch. Time to show what you've got.