Vanilla JavaScript - Series Intro

I am embarking on a journey to a deeper understanding of the JavaScript programming language. I have completed a handful of courses on JavaScript, and interact with it regularly as I build user interfaces in React and Next.js in my current role. The reliance on pre-built components and the necessity of rapid project delivery have left me grappling with not understanding how all of my code really works. I need to gain a firm handle on plain old JavaScript so that I can move past getting things to ‘work’ and understand why and how they work.

My goals

JavaScript goes deep and wide just like any programming language but I want to:

• Get a firm handle on the foundational concepts and the pillars that are necessary to work as a developer for any company.
• Be prepared to successfully pass technical job interviews.
• Contribute to open-source projects

My plan

I am using a variety of free and paid resources, feel free to add any of your recommendations in the comments. I have broken up my learning into phases based on the way concepts are grouped in the book series You Don’t Know JS by Kyle Simpson. In his Frontend Masters lecture series, Kyle Simpson mentions that you can read the first edition and second edition for free on GitHub, however, I purchased the paperback copy of Getting Started to show some support. Plus, reading a physical copy is so much more enjoyable.

The approach I am taking is to explore Javascript by topic. I want to explore that topic in the variety of resources that I have and then move on to the next topic. This is in contrast to completing each resource from start to finish and then moving on to the next. The second important piece of my projects is to build a small project daily and push it to GitHub. To start I am using Wes Bos’s JavaScript30, to complete 30 small projects in Vanilla JS. Let’s get those green squares baby.

💡Quick, but important side note on the subject of those little green squares. For your commit history to show on your desired GitHub profile, make sure that your commit email address matches that of your profile. See this GitHub article to check if you are unsure and update it if necessary. As it states in the article “Any commits you made prior to changing your commit email address are still associated with your previous email address.” I had more than 8 contributions within this timeframe. One reason there are so few is because my job used GitLab instead of GitHub up until July 2023, the other reason is the rest of my contributions are on an email address I no longer use after changing my business name. I thought updating the primary email address on my GitHub account was enough. Wrong 🙃I also needed to update my commit email address on my local machine. See this GitHub Docs article for other reasons why your contributions may not be showing.

Once you set your commit email address, you can add additional email addresses to your GitHub account, and any contributions made under that email will also appear on your profile. After updating my commit email address and making it my primary email on my account, I added my old email address and then my commits under that email address appeared.

Phase One

• Programming Essentials
  • Topics
    • Values
    • Variables
    • Operations
    • Expressions & Statements
    • Decisions: If & Else
    • Loops
  • Resources
    • You Don’t Know JS Yet - Up & Going (1st Ed) Getting Started (2nd Ed)
    • Front End Masters - Getting Started with JavaScript (free with signup)
    • 100 Devs Class 10, Class 12, & Class 16 (Loops)
    • FrontendExpert - JavaScript - JavaScript Basics & Variables & Scoping
    • Fireship JS in 100 seconds, Crash Course, & History of JS

Phase Two

• JavaScript Pillar 1 - Types / Coercion
  • Topics
    • Types
    • Arrays
  • Resources
    • You Don’t Know JS Yet Types / Grammar
    • 100 Devs - Class 19 & Class 20 (Arrays)
    • FrontendExpert JavaScript - Arrays
    • Fireship Modern JS Course - Array Tricks, Destructuring

Phase Three

• Javascript Pillar 2 - Scope /Closures
  • Topics
    • Functions
  • Resources
    • You Don’t Know JS Yet - Scope & Closures
    • 100 Devs - Class 14 (Functions)
    • FrontendExpert- JavaScript - Closures
    • Functional Light by Kyle Simpson - Chapters 1-4
    • Fireship Modern JS Course - Closures, Nullish Coalescing, Higher Order Functions

Phase Four

• JavaScript Pillar 3 - this / Prototypes
  • Topics
    • Objects
  • Resources
    • You Don’t Know JS Yet - this / Object Prototypes
    • 100 Devs Class 21 & Class 22 (objects)
    • Frontend Expert JavaScript - Objects & This
    • Fireship Modern JS Course - Prototype Chain, Destructuring, Spread, Optional Chaining

That is the nuts and bolts of my process. I will be sharing my progress along the way. Happy Scripting!