Premium Membership

A linear path for serious beginners who want to become amazing developers


The Path

Before signing up, you must complete all the lessons in Practical JavaScript. Because the membership covers advanced software engineering topics, you have to be comfortable with all of the concepts in Practical JavaScript before you start.

Join the community

Learning on your own is hard. That's why a key part of your membership is a Slack community where you have direct access to me and other motivated students. You'll start the path by introducing yourself to the group and getting to know other Watch and Code students.

TodoMVC jQuery Part 1

Reading code is one of the most important skills as a programmer. In this session, you'll learn the process that I use for understanding unfamiliar programs. Then we'll test out the process on two simple methods in the app.

TodoMVC jQuery Part 2

We'll take a look at how event bindings work inside the app. Along the way you'll learn how to actually see event listeners in the console. We'll wrap things up by looking at the toggle and delete features as well as the various methods for getting filtered todos.

TodoMVC jQuery Part 3

The most complicated part of the app is creating and updating data. For updating alone, there are three methods, edit, editKeyup, and update. We'll walk through each one individually. Finally we'll close by looking at how the app generates unique IDs.

TodoMVC jQuery Part 4

The rendering methods in our app use a templating library called Handlebars. I'll show you the general idea behind templating in web development and then we'll also go through some exercises with simple Handlebars templates. Finally, we'll look into how Handlebars is integrated into our app.

TodoMVC jQuery Part 5

In the last session, you'll learn about how the app uses localStorage to persist data so it sticks around even if you close your browser or refresh the page. We'll also look at how the app sets everything up in the init method.

Test Driven Development Part 1

We'll start by learning about why testing is important and connect it to a familiar process that you'll recognize from Practical JavaScript (remember the slides with red and green requirements?). After going over the concepts, you'll get a concrete example so you can actually see how things work. This is the foundation that you'll need before we get real and start writing our own tests in the next installment.

Test Driven Development Part 2

In part 2, you'll build forEach piece-by-piece using test driven development. You'll directly feel how deeply testing impacts the way that you code for the better. That's because it forces you to break down big problems into itty bitty pieces. Nobody ever talks about this approach to problem solving, but it might be the most important skill to your success as a programmer.

Test Driven Development Part 3

Now you'll get more practice by adding additional features to forEach that weren't in the original version we wrote in Practical JavaScript. These new features will give the callback function access to the original array that forEach is being called on, and the position of the current element.

Test Driven Development Part 4

You'll expand your forEach function so that it takes an optional this argument. In Practical JavaScript's displayTodos method, we actually used this feature of the native forEach function, so it'll be interesting to see how something like this is actually made. You'll also get some experience using function.bind, which we first saw in the jQuery TodoMVC app.

Test Driven Development Part 5

In this installment, we're starting from scratch on a brand new filter function. In one shot we do everything, from researching the native filter method, to planning, to design, to writing tests and programming our final implementation.

Test Driven Development Part 6

map is similar in many ways to forEach and filter, but there are some very subtle and important differences. In particular, we need to deal with what some people call "holes" in our arrays. These are elements that take up space in our array but have not been assigned a value.

Test Driven Development Part 7

I'm really proud of this one and think it's the best treatment of reduce you will find anywhere. There isn't any other explanation that starts from first principles, building up piece-by-piece until you derive the core ideas without even realizing it. In the next part, we'll worry about the nitty gritty implementation details and tests.

Test Driven Development Part 8

Making sense of weirdly written documentation is hard. Turning those docs into requirements is hard. And then writing test descriptions that make sense is also hard. Sometimes the hardest part of programming isn't the coding at all, it's the reading and writing. And in this video you can see the perfect example of that as we turn a wall of text (the reduce docs) into focused test cases.

Test Driven Development Part 9

We wrap up this series on testing with a monster 103-minute episode where we get all our reduce tests to pass. We'll need to use some pretty advanced techniques to get everything to work just right, and we'll even have to write some extra tests to cover additional cases we didn't think of when we started. As a bonus, you'll also learn about how to throw, catch and test for JavaScript errors.

SimpleTest Part 1

We want to make our testing framework easier to use, but before we do that, we need to carefully read through the existing code. You'll learn more about error handling and will also get a much deeper understanding of how browsers handle different types of tasks. For example, when the browser has to run JavaScript, update the DOM, and manage timers through something like setTimeout, how does it decide what to do?

SimpleTest Part 2

Now that we have a good understanding of our test framework, we can write our new features. Along the way, you'll learn about constructors, ternary operators, and advanced console features so that you can style and group console output. This a really fun one because it's really about making better software. Making things better is why we program at all, so I want to make sure you get a feel for it early on.

SimpleTest Part 3

This is a little bit of a detour from past sessions and is a casual chat with James (a student) about SimpleTest and how it fits in with everything we've done so far. We touch on a bunch of things including surprising concepts I learned while producing this series, the "forced self-reinforcement" principle, code quality versus product quality, mastering different codebases, studying tips, and why memorizing things is a waste of time.

AccountingJS Part 1

This is everything we've learned (callbacks, test driven development, testing frameworks) in a real library that's maintained by a real company. This is reality hitting you in the face. It's one of those jumps where things will start feeling materially different, but I think you're all ready for it. This is what it feels like to escape from tutorial land. All other tutorials will be kind of ruined for you after this if they weren't already. I also tried to have a little fun with the intro and do something different by starting from a familiar place (StackOverflow), so things feel even more real. You'll see what I mean when you start watching.

AccountingJS Part 2

In this video, we look at how you can approach documentation like a pro. Along the way, we'll also encounter minified JavaScript and talk about how it differs from un-minified code.

AccountingJS Part 3

Immediately invoked function expressions or "IIFEs" for short, show up in JavaScript libraries all the time, and AccountingJS is no exception. We start out by looking at how IIFEs work. After that, we go through a few examples so that you can see why they're useful. And then lastly, we'll see how they're used in AccountingJS.

AccountingJS Part 4

In this video we look at the technique AccountingJS uses for sharing data in an IIFE (immediately invoked function expression) with the rest of our program. This is an important technique to understand because it's used in almost every open source JavaScript library.

AccountingJS Part 5

Scopes, locals, closures, globals, ugh. These are complicated words that sound intimidating. In a few minutes though, I'm going to prove to you that it's all just for show. They're actually simple concepts hiding behind complicated vocabulary. If I do my job, by the end of the video you should be thinking, "WHAT that's all there is to it?" If this is not the case, let me know immediately.

AccountingJS Part 6

Attaching a single library object to window is a very effective technique for reducing the number of global variables in your code. But with this approach, every library in your app has a global variable. So in an extreme example, if your app uses 100 libraries, you'll create 100 global variables. We can do a lot better though. By using the power of functions, we can create a world where we have just a single global variable no matter how many libraries our app uses.

AccountingJS Part 7

This one talks about the .noConflict method that's in AccountingJS as well as many other libraries such as jQuery and Underscore.

AccountingJS Part 8

This video is about the core ideas behind JavaScript's prototype system. Believe it or not, prototypes are the last JavaScript feature you need to learn. So after this, you'll know about all the major features of JavaScript (I'm pumped!!!).

AccountingJS Part 9

This one is about how JavaScript's prototype system works with constructor functions. You'll learn exactly what happens when you use new and how Function.prototype is automatically assigned to new objects.

AccountingJS Part 10

We start by looking over the codebase briefly to see how everything is organized and then carefully look at one of the internal helper methods, isString. You'll learn about some weird stuff like !!, understand unnecessarily complicated logic statements, and see why primitive string values can access methods on String.prototype.

AccountingJS Part 11

In this one, we go through almost all of the remaining internal helper methods. You'll also learn a bunch of little things, like how to use to borrow a method from another object and how to use hasOwnProperty to avoid prototype properties and methods.

AccountingJS Part 12

checkCurrencyFormat is the last internal helper method and also gives us a good starting point to see how currency formatting works. You'll also learn about the string methods .match and .replace, how to structure comments, and how you can use scenario analysis to better understand code.

AccountingJS Part 13

Surprisingly, JavaScript doesn't provide a consistent way to round decimals. That's where AccountingJS's toFixed comes in. It's designed to work around the oddities of JavaScript. However, we quickly find that it's not perfect. Can we improve on AccountingJS and write something that works better?

AccountingJS Part 14

In this video, we look at the most important function in AccountingJS, formatMoney. By this point, reading this code will be pretty easy because we already understand the internal helper methods that formatMoney depends on. In my review, I spend most of my time scrutinizing the style and thinking about how we can make the code easier to understand.

AccountingJS Part 15

AccountingJS uses recursion a lot, so we need to know it well to keep going. We start from the simplest of observations ("functions can see themselves") and then continue through three different example functions.

AccountingJS Part 16

Here we go deeper into recursion to see how it can be used in different contexts. In the final example in this video, we build a nifty forEach-like function that recursively travels through the DOM and processes each element.

AccountingJS Part 17

In this last video on recursion, we look at how at how AccountingJS recursively maps arrays of numbers into currencies. Since this is a complicated example of recursion, we go through a set of diagrams that help you to visualize what's happening at every step. We wrap up with some general observations on recursion and how you can get good at it over time.

AccountingJS Part 18

Before we can continue, we need to learn about regular expressions. Regular expressions are a very powerful and concise way to search for patterns in strings. In this introduction, you'll see how regular expressions can be used to grade the strength of different passwords (I was inspired by an article titled "The World's worst password requirements list"). You'll (definitely) learn about regular expressions and (hopefully) will think about this video in the future when you need to come up with password requirements in your own apps.

AccountingJS Part 19

In this lesson, you'll learn how to use String.prototype.replace with regular expressions. We'll also use parentheses to save sub-patterns (called capture groups) and will get some practice by building a phone number obfuscator and name formatter. Along the way, you'll also learn about Regexr, a powerful online tool that helps you create regular expressions.

AccountingJS Part 20

This is the last video dedicated to regular expressions before we return to AccountingJS. You'll learn about two advanced topics: lookaheads (both positive and negative) and backreferences.

AccountingJS Part 21

In our return to AccountingJS, we review formatNumber. This is our chance to see an example of regular expressions that uses metacharacters, quantifiers, capture groups, and positive lookaheads.

AccountingJS Part 22

In unformat, we get more practice with regular expressions. We'll also learn a powerful new technique (using new RegExp) that'll allow us to dynamically create regular expressions based on other variables in our code.

AccountingJS Part 23

What happens when you encounter JavaScript that can't be explained by documentation, StackOverflow, and hours of Googling? In situations like this, we'll need to take a look at the ECMAScript specification, the document that describes exactly how JavaScript works (in excruciating technical detail).

AccountingJS Part 24

formatColumn is used to format numbers so that when they're displayed in a column, the currency symbols and decimals line up. At the end of the video I talk about why the strategy for generating whitespace is undesirable and why we so often end up with headaches like this. When some people see code like this, they think things like "clever", "elegant", and "concise". When I see code like this, I think "hard to read", "time consuming for no reason", and "probably blindly copied from a blog post".

AccountingJS Part 25

With formatColumn as a backdrop, we explore a systematic approach for reading and writing recursive code. When you analyze recursive code this way, you can almost trick your mind into thinking recursive code isn't recursive at all.

AccountingJS Part 26

In the series finale, we take a look at the odd state of AccountingJS's tests and see how broken they are. After diagnosing the test failures, we consider two ways of fixing the problem. We wrap up with some closing thoughts.

More coming soon!

Future series will cover increasingly more sophisticated software and will continue to emphasize skills that are crucial on any project such as reading code, consistency and style, debugging, refactoring, and test-driven development.