I want to know - đŠ 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 current role
I want to talk about my current role a bit to give a clearer picture of where I am in my programming knowledge. My first post gives more detailed information about my background however a couple of years back I completed a few HTML and CSS tutorials and the very basics of JS. My Mom needed a website for her business at the time so I built one using Webflow. Webflow is a no-code platform but it allows for full customization and therefore requires you to understand HTML and CSS, otherwise you wonât accomplish much. JavaScript is handled by adding what they call âinteractionsâ but you really donât need to understand how JS works to use these.
After building this Webflow site for my Mom, I spoke with a friend who is a developer, who happened to be in need of a Webflow developer for a couple of projects he had coming up. In fact, he was going to look online for a freelancer the next day and I said that I would love to give it a shot since I completed a site recently. That was a couple of years ago and I have been contracting with his agency ever since.
The first year, it was mainly marketing sites built on Webflow, plus some HTML emails, and app user interfaces using CSS frameworks like Bulma and Tailwind CSS. I was not required to add any interactive elements, simply to build the UI. I started using some Javascript to implement custom solutions on various Webflow projects where a native solution did not exist. In time, I started building projects in React and Next.js. This meant that I was using JavaScript technically, but so much of it is pre-built when using component libraries. I know that I would have saved myself a ton of time getting these projects done if my foundational knowledge was better. So here we are.
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. I have broken up my learning into phases based on how 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.
2024 Update, MDN has a curriculum that they have developed to establish a baseline knowledge and skillset that a web developer should have to be successful and employable. I will use this resource and the order in which the content is structured as a guide.
The second important piece of my project is to build a small project daily and push it to GitHub. To start I am using JavaScript30, to complete 30 small projects in Vanilla JS and 50 Projects in 50 Days - HTML, CSS, & JavaScript. 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 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 Zero
Quickly read through the following resources to get a birds eye view of the terrain before taking my time in the other phases. I will ask and find answers to various questions along the way and write about it here:
- You Donât Know JS Yet - Up & Going (1st Ed) Getting Started (2nd Ed)
- MDN Curriculum - JavaScript Fundamentals
- JavaScript Simplified Course - I like the way the topics are grouped in this course. It helps me in my goal of delineating need-to-know information from nice-to-know. The explanations are not deep on several topics but it serves the purpose of being just enough to get started.
- I am completing this projects by only typing out the JavaScript and using the source fils for the HTML and CSS since that is not my focus at the moment) and following along with the instructor. Every once in a while I will test myself to guess the next step but at this phase, I am most benefitted by exposure at a high volume. This allows me to start to recognize patterns which further distills this sea of information into the JavaScript topics that are used daily.
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)
- Fireship JS in 100 seconds, Crash Course, & History of JS
- MDN Curriculum - JavaScript Fundamentals
- Topics
Phase Two
- Javascript Pillar 1 - Types / Coercion
- Topics
- Types
- Arrays
- Resources
- You Donât Know JS Yet Types / Grammar
- Fireship Modern JS Course - Array Tricks, Destructuring
- MDN Curriculum - JavaScript Fundamentals
- Topics
Phase Three
- Javascript Pillar 2 - Scope /Closures
- Topics
- Functions
- Resources
- You Donât Know JS Yet - Scope & Closures
- Functional Light by Kyle Simpson - Chapters 1-4
- Fireship Modern JS Course - Closures, Nullish Coalescing, Higher Order Functions
- MDN Curriculum - JavaScript Fundamentals
- Topics
Phase Four
- Javascript Pillar 3 - this / Prototypes
- Topics
- Objects
- Resources
- You Donât Know JS Yet - this / Object Prototypes
- Fireship Modern JS Course - Prototype Chain, Destructuring, Spread, Optional Chaining
- MDN Curriculum - JavaScript Fundamentals
- Topics
Throughout these phases, I will solve coding problems using Code Wars and Great Frontend.
That is the nuts and bolts of my process. I will be sharing my progress along the way. Happy Scripting!
