Sinabro JavaScript

• innerHTML
• createElement
• appendChild
• addEventListener

We learn the basic DOM API and practice how to structure HTML and attach events without using a frontend framework.

Part 1. Basic Implementation

We implement the product list and shopping cartof an e-commerce website. The goal is to implement dynamic interactions directly using the DOM APIs.

When you add or remove items from the shopping cart, we ensure that the quantity updates everywhere at once (in both the product list and the cart). This helps us understand the importance of modern front-end frameworks.

Part 2. Refactoring Code into Components

We refactor the code from the Part 1, breaking them down into multiple components for better management. We think about design, meaning, and role in doing so.

Part 3. Implementing Reactivity

Instead of imperatively finding each DOM element and updating the quantity, we reactively update the DOM elements as data changes.

We learn the basics of a web server by using Express. These days, Serverless Functions provided by Vercel or Netlify are easy and convenient. However, we're going to see how the backend used to be made with Express before such things existed. We'll also explore how a frontend launched with vite sends requests to the Express server, and renders the received data.

We practice three Array methods (filter, map, and reduce). Unit tests with input and output are provided. Your task is to write the code that makes all the tests pass. This practice helps you grow muscle to use arrays better.

We will examine the structure of npm libraries, and take our time to understand the complex issues entangled with Common JS and ES Module. Then, we will deploy the library to npm.

We are going to create a small subset of jQuery. We will learn how to set up a monorepo using yarn workspace, and experience the overall workflow by working on a library, sample apps, and a documentation site within the monorepo. We will also write unit tests using vitest, experience the difficulties that occurs during the library build process, and learn about treeshaking.

We are going to create a movie search website. The outcome is very simple, but we will cover very important concepts in this episode. We will learn about the browser's History API, and use it to implement client-side routing, similar to React Router, ourselves. And then, we directly implement Server-Side Rendering using an Express server. We also implement the part where the client performs Hydration. After completing this, you will be able to understand the process of SSR + Hydration in Next.js in quite detail.

Similar to the Array method practice episode, we practice with callback, Promise, async, and await to better handle asynchronous flows.

We often create static websites using Jekyll, Gatsby, Next.js, and so on. We examine how such tools create static websites and try to mimic their build process. In the process, we make a script written in Node.js, without any framework or tool, build posts written in markdown into a static blog and eventually deploy it on Vercel.

We will examine the structure of CLI libraries on npm, and try to create and deploy our own CLI to NPM. After that, you can install and use it with the command npm install -g <your-package-name>.

<form action="/save" method="post">

In the past, we used to create forms like above. We will implement it in the old way to understand how it works. And you'll learn why we do it differently now.

Nowadays, we use libraries like react-hook-form quite a lot. We will understand the benefits of such libraries and create something similar ourselves.