Confident with your front-end knowledge? Try answer these questions!

Hello, it's me again. Today we're going to go through some questions/concepts which I think not all of you guys will notice/know/care about it, but they're interesting to know. Even though I've been working for almost 3 years in the Front-end field, I still struggle to find the answer to these questions. Okay, let's get started. One thing to notice is that I'll update this blog several times if I find out any new interesting questions.

What's the main difference between getElementBy[..] and querySelector[All]?

The first thing to know is that querySelector[All] are new features and they are more powerful, instead of selecting specific elements, they allow us to query elements in any way, by id, by class name, by parent-children relation, by attribute,... But besides, it will a little bit slower than getElementBy[...] and not really well-supported in old browsers.

The second thing I want to mention is that the return value of them. document.getElementsByClassName() is an HTMLCollection, and is live. document.getElementsByTagName() is an HTMLCollection, and is live. document.getElementsByName() is a NodeList and is live. document.querySelectorAll() is a NodeList and is not live. So what do I mean by "live". For example, if you use querySelector at some point to select element with classname is 'description'. Let's assume that we only have 1 element i.e

const descriptionElements = document.querySelectorAll(".description");
console.log("descriptionElements.length:", descriptionElements.length);
// 1. Ok, sounds good

const descriptionElements = document.querySelectorAll(".description");
console.log("descriptionElements.length:", descriptionElements.length);
// 1. Ok, sounds good

But after that, we added one more element with 'description' class. This time, when we call

console.log("descriptionElements.length:", descriptionElements.length);
// 1. Oh, nothing changes.

console.log("descriptionElements.length:", descriptionElements.length);
// 1. Oh, nothing changes.

At that time, using document.getElementsByClassName()

const e = document.getElementsByClassName("description");
const descriptionElements = document.querySelectorAll(".description");
console.log("descriptionElements.length:", descriptionElements.length);
// 1.
console.log("e.length:", e.length); // 1

// after we add another element
console.log("descriptionElements.length:", descriptionElements.length);
// 1.
console.log("e.length:", e.length); // 2

const e = document.getElementsByClassName("description");
const descriptionElements = document.querySelectorAll(".description");
console.log("descriptionElements.length:", descriptionElements.length);
// 1.
console.log("e.length:", e.length); // 1

// after we add another element
console.log("descriptionElements.length:", descriptionElements.length);
// 1.
console.log("e.length:", e.length); // 2

See ? so getElementBy[...] is kind of live, everytime we change elements related to them, they change too!

What's <template> tag and when to use it It's one of the interesting elements which I think you guys might want to know. Especially when you guys are working with native HTML/CSS/Javascript. The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads. The content inside <template> can be rendered later with JavaScript. You can use the <template> tag if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the <template> tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code. Remember back to the first day I started to learn about Javascript and want to create elements based on data I got from the server. I had to write template code something like this:

const generateElements = (data) => {
  data?.forEach((item) => {
    const element = document.createElement("article");
    element.classList.add("result-item");
    element.innerHTML = `
						<figure class="result-item__thumbnail-container">
									<img src="${item.thumbnailUrl}" alt="" class="result-item__thumbnail" />
            </figure>
						<a href="${item.url}" class="result-item__link" target="_blank">
									<p class="title">${item.title}</p>
						</a>
        `;
    document.querySelector(".items").appendChild(element);
  });
};

const generateElements = (data) => {
  data?.forEach((item) => {
    const element = document.createElement("article");
    element.classList.add("result-item");
    element.innerHTML = `
						<figure class="result-item__thumbnail-container">
									<img src="${item.thumbnailUrl}" alt="" class="result-item__thumbnail" />
            </figure>
						<a href="${item.url}" class="result-item__link" target="_blank">
									<p class="title">${item.title}</p>
						</a>
        `;
    document.querySelector(".items").appendChild(element);
  });
};

It still works and I think that nowadays, many applications still use this type of code to generate content. It's totally fine. But missing HTML code in Javascript code is not my type. Let's see what we can do with template.

// index.html
<!-- some code.. -->
<div id="result-content">
  <template id="result-item">
    <article class="result-item">
      <figure class="result-item__thumbnail-container">
        <img src="" alt="" class="result-item__thumbnail" />
      </figure>
      <a href="" class="result-item__link" target="_blank">
        <p class="title"></p>
      </a>
    </article>
  </template>
</div>

// index.html
<!-- some code.. -->
<div id="result-content">
  <template id="result-item">
    <article class="result-item">
      <figure class="result-item__thumbnail-container">
        <img src="" alt="" class="result-item__thumbnail" />
      </figure>
      <a href="" class="result-item__link" target="_blank">
        <p class="title"></p>
      </a>
    </article>
  </template>
</div>

const createResultElement = (item) => {
  if (!resultContent || !template || !item) return;

  if ("content" in document.createElement("template")) {
    const clone = template.content.cloneNode(true);

    const thumbnail = clone.querySelector(".result-item__thumbnail");
    const link = clone.querySelector(".result-item__link");
    const title = clone.querySelector(".title");

    if (thumbnail) {
      thumbnail.src = item?.thumbnailUrl || "";
    }

    if (link) {
      link.href = item?.url || "#";
    }

    if (title) {
      title.textContent = item?.title;
    }

    resultContent.appendChild(clone);
  }
};

const generateContent = (data) => {
  data?.forEach((item) => {
    createResultItem(item);
  });
};

const createResultElement = (item) => {
  if (!resultContent || !template || !item) return;

  if ("content" in document.createElement("template")) {
    const clone = template.content.cloneNode(true);

    const thumbnail = clone.querySelector(".result-item__thumbnail");
    const link = clone.querySelector(".result-item__link");
    const title = clone.querySelector(".title");

    if (thumbnail) {
      thumbnail.src = item?.thumbnailUrl || "";
    }

    if (link) {
      link.href = item?.url || "#";
    }

    if (title) {
      title.textContent = item?.title;
    }

    resultContent.appendChild(clone);
  }
};

const generateContent = (data) => {
  data?.forEach((item) => {
    createResultItem(item);
  });
};

It's longer than the previous one, but I think it's more "native" to me, we separate HTML code and Javascript code.

Distinguish the differences between blank, defer, and async attributes of the script tag
jsx
```
<script src="./main.js"></script>
<script src="./main.js" defer></script>
<script src="./main.js" async></script>
```
```
<script src="./main.js"></script>
<script src="./main.js" defer></script>
<script src="./main.js" async></script>
```
The first one is the most common type, with this when the browser renders our HTML file and meet this tag, it will stop and execute all the code in that Javascript file before continuing to render the page With the second one, the browser will load your HTML first then load your code in Javascript file no matter where we put that script tag With the third type, when the browser meets that tag, it will load the HTML page and download Javascript code at the same time, when Javascript file is ready to be executed, the browser will stop loading your HTML page and execute the Javascript file, after finishing Javascript execution, it will continue to load your HTML page. This picture is a visualizer of how these 3 types work
Confident with your front-end knowledge? Try answer these questions! — figure 1
One might wonder so what's the main difference between putting a normal script tag at the end of HTML and using defer. The point here is that even though it's guaranteed that the script will be only executed after we loaded the page entirely, but using defer still makes the browser download scripts wherever it see scripts tag so it might slow down the loading time of your page.
What's the difference between SVG and Canvas elements? SVG is an XML-based image format that can be scaled up or down without losing the image quality Canvas is an HTML element is used to draw graphics on a web page.
What will happen to CSS when you go to a page?
Confident with your front-end knowledge? Try answer these questions!: 255597943 2719875938312514 2106534783858308106 n
Explain layout, painting, and compositing
- JavaScript: Typically JavaScript is used to handle work that will result in visual changes, whether it's jQuery's animate function, sorting a data set, or adding DOM elements to the page. It doesn't have to be JavaScript that triggers a visual change, though: CSS Animations, Transitions, and the Web Animations API are also commonly used.
- Style calculations: This is the process of figuring out which CSS rules apply to which elements based on matching selectors, for example, .headline or .nav > .nav__item. From there, once rules are known, they are applied and the final styles for each element are calculated.
- Layout: Once the browser knows which rules apply to an element it can begin to calculate how much space it takes up and where it is on screen. The web's layout model means that one element can affect others, for example, the width of the <body> element typically affects its children's widths and so on all the way up and down the tree, so the process can be quite involved for the browser.
- Paint: Painting is the process of filling in pixels. It involves drawing out text, colors, images, borders, and shadows, essentially every visual part of the elements. The drawing is typically done onto multiple surfaces, often called layers.
- Compositing: Since the parts of the page were drawn into potentially multiple layers they need to be drawn to the screen in the correct order so that the page renders correctly. This is especially important for elements that overlap another since a mistake could result in one element appearing over the top of another incorrectly.
The specificity and how CSS rules are resolved when parsing When combining different stylesheet and resolving conflicts between different CSS rules and declarations, when one or more rules are applied to an element the browser will resolve by the specificity and this is the order
1. Style with ! (important mark) will have the highest priority
2. Next is specificity of element: It will go in this order:
  
  Inline style > Id > classes, pseudo-classes, attribute > elements, pseudo-elements.
3. Source order, the last declaration will override all.
How CSS values like rem, em, and percent are calculated? The first thing to remember is that except for rem, em and percent are measured relative to the parent value with the type of value they're measuring.
- Percent:
  - x% (font-size): x% * parent's computed font-size
  - x% (length): x% * parent's computed length
- em:
  - x em (font-size): x * parent's computed font-size
  - x em (length): x * parent's computed length
- rem: use the root's font-size as reference.
  - One thing to note is that the default value for the root's font size is usually the browser default font size which is usually 16px.
Inheritance in CSS
- Properties related to text are inherited: font-family, font-size, color,...
- properties like margin, padding are not inherited.
- The computed value of a property is what get inherited not the declared value.
- Inheritance only works if there is no declared value for that property.
Differences between box types
- Block:
  - 100% of parent width
  - One after another vertically
  - Element with default display is block: <p>, <h1>, <div>, <header>...
- Inline:
  - Content is distributed inline
  - Occupies only content's space
  - No line-break
  - Padding and margin only horizontal (left and right)
  - Tags: <a>, <span> , <strong>, and <img> ...
- Inline-block
  - Mix of block and inline
  - Occupies only content's space
  - No line-break
  - Can be padding and margin both horizontal and vertical
  - Tags: <input>, <button>, <select>, <textarea>...
What's the version at the end of the file path of static files for? Sometimes when you go to the website, you will notice that the file path to their CSS, scripts, or image files is followed with something like ?v=1,?v=2. It's JavaScript/CSS Version Control with Cachebusting. Why? Because the larger your website is, the more files/HTTP request it has to call so we have the cache to resolve unnecessary call to the static files which are not frequently changed. Developers usually config cache in expires header, but at some point when they make changes to static files but the expiration time hasn't reached yet, they need to add a version to static files to mark up that they're new files and should not be cached.
What happens when I type an URL in the browser and hit enter The entire process is pretty complex and it will be a really long article if you want to go into detail. Simply, you only need to know that it will go through some steps like this
1. The browser will find the IP address of the URL you've typed in the browser.
2. The browser opens a TCP connection with the server
3. The browser sends an HTTP request to the server.
4. The server handles the request and sends back an HTTP response.
Why is JSON so popular
- It's extremely lightweight to send back and forth in HTTP Requests and Responses due to the small size
- It's easy to read and much cleaner than XML
- JSON also integrates very nicely with Javascript since JSON is just a subset of JS, which means everything you write in a JSON is a valid JS
- Almost every single major language has some form of a library of built-in functionality to parse JSON strings into objects or classes in that language.
Why it's standard to put scripts at the bottom and CSS at top of HTML files?
- You should put CSS at the top of HTML files because the browser will automatically prevent the page from loading without styles (to avoid a flash of unstyled content).
  - But note that not all browsers will do the same thing when you put CSS at the bottom of your page.
- You should put scripts at the bottom of the pages because
  - Normally, the browser will stop parsing HTML when it meets the scripts tag, the default behavior will be that browser will download and execute the scripts file first, then it continue to parse your page afterward.
  - The second thing is that your scripts might use some elements which haven't been available at the point the scripts are placed which leads to unexpected behavior (or errors in worse cases)
Why should we use external scripts and CSS instead of inline scripts and CSS while inlines are faster? Inline scripts and CSS are faster than external scripts and CSS, it's easy to see. Because the more external scripts/CSS your page has, the more HTTP request it has to call which can slow your website down. But why using external scripts/CSS is still best practice? It has to do with the cache process. Your scripts/CSS has the opportunity to be cached by the browser which can help reducing the loading time of your website while inline scripts/CSS is not, they will be downloaded every time the page load. The other reason to use external scripts/CSS is about reusable. :D It's obvious that you might reuse some HTML files somewhere else, using inline scripts/CSS will make you to copy and paste multiple times and leads to some bugs if your copy-paste process is not done carefully.

To be continued...