Learning Summary — from Making JS Toy Projects

This is a summary of my learning by making 3 small JS toy projects. I made Target Pointer, Shopping List, and Carrot Game. You can check the projects here. They include very basic yet essential front-end knowledge. Now, I am going to briefly illustrate 5 important concepts/things I learned.

⚠️ 1. ‘defer’ & Resource events

in Target Pointer📍

— The code block below is an attempt to adjust the target image to be center.
— However, it does not work because targetHalfWidth and targetHalfHeigthare somehow `0`, even though it does not look like it on the browser.

const target = document.querySelector(“.target”);
const targetRect = target.getBoundingClientRect();
 const targetHalfWidth = targetRect.width / 2;
 const targetHalfHeight = targetRect.height / 2;
document.addEventListener(“mousemove”, () => {
 const x = event.clientX;
 const y = event.clientY;
 …
 target.style.transform = `translate(${x — targetHalfWidth}px, ${y -
 targetHalfHeight}px)`;
 …
 });

— It is because the <script> is embedded with defer,
— which means as soon as the HTML is ready, the script is executed before the src(in this case, <img class="target" src="img/target.png" alt=”target”/>) arrives,
— therefore, the value of targetHalfWidth and targetHalfHeigth are `0`.

— to solve this issue ✅ , the code block should be called with the load event. Below code block is the solution. See more info about Resource events.

const target = document.querySelector(“.target”);
// 👾 be aware of the "load" event below
addEventListener(“load”, () => {
 const targetRect = target.getBoundingClientRect();
 const targetHalfWidth = targetRect.width / 2;
 const targetHalfHeight = targetRect.height / 2;
document.addEventListener(“mousemove”, () => {
 const x = event.clientX;
 const y = event.clientY;
 …
 target.style.transform = `translate(${x — targetHalfWidth}px, ${y -
 targetHalfHeight}px)`;
 …
 });
});

⚠️ 2. CSS & Critical Rendering Path

in Target Pointer📍

— For better performance(to improve CRP),
tag.style.top = `${y}px` better be changed to tag.style.transform = `${y}px`

— Because transform does not trigger layout event, whereas top or lefdoes. See more on CSS Triggers.

⚠️ 3. JS Module & CORS Error

in Carrot Game 🥕

In an attempt to do refactoring by creating js modules…

— you need to include type="module” in the <script> element, to declare this script as a module.
— for example: to import the main.js script, we use this: <script type="module" src="main.js"></script>

🤦🏻‍♀️ During this process, you might run into an error in a local testing environment

— if you try to load the HTML file locally (i.e. with a file://URL), you’ll run into CORS errors due to JavaScript module security requirements.
— You need to do your testing through a server. More info here.
— to solve this issue ✅ , (AND if you use VS Code) Install Live Server extension.

⚠️ 4. JS Class& bind method

in Carrot Game 🥕

In an attempt to do refactoring…
— you will encounter bugs unless you bind methods in classes.
— There are three ways to bind functions.
— and I decided to bind the function in the class properties by using an arrow function syntax since it is also an applicable way of using React.

 // from this
 onClick (event) {
 // onClick logics
 };
 // 👾 to this 
 onClick = (event) => {
 // onClick logics
 };

⚠️ 5. JS Class& bind method

in Carrot Game 🥕

In an attempt to do refactoring…
— you can implement a builder pattern like this in the project.
— a builder pattern separates the construction of a complex object from its representation.
— by implementing a builder pattern, you can build a complex object using a simple object.