A web browser, as a standalone computer program, is usually consisted of 3 parts: * Rendering engine, AKA browser engine, AKA layout engine is responsible for parsing the HTML document into a DOM tree, render(paint) it into a viewable format to show to the user. * Javascript engine parses, executes, and

This post will introduce the specs of a script tag's properties, which might help if you want to optimize your page load time. Script tag loading order The following image explains the loading time of a script tag based on its property. There are several notes: Source: https://html.spec.

ffmpeg [https://www.ffmpeg.org/] is a popular open-source tool to manipulate your video/audio files. Remove video segments (without audio) For example, you want to remove 108→157, 226 → 341, 404 → 407 (unit: second) segments from your video recording. Note that the audio is not modified. ffmpeg \ -i 'screenrecord.

Fundamental concepts * In general, x/ left suffices refer to the horizontal distance, while y/ top suffices refer to the vertical one. * Viewport is the area/portion of the web page (precisely speaking, the nearest iframe) that we can see on the screen. Imagine a web page is an infinite landscape,

TLDR; * z z or z .: move the current line to the center (in German: zentrum) of the viewport. * z t: move the current line to the top of the view port. * z b: move the current line to the bottom of the view port. * ctrl y: move the viewport up

* Init project: terraform init. This command will set up modules, download provider modules, and create the .terraform.lock.hcl lock file. If there is an error with this command, you can delete .terraform directory and .terraform.lock.hcl and re-run terraform init. * Show update plan: terraform plan. User -target= to

Check the current swap space configuration Use swapon --show or free -h. If swap space is not used, swapon --show will output nothing, while free -h outputs with 0 bytes for swap, for example: total used free shared buff/cache available Mem: 1.9Gi 214Mi 138Mi 2.0Mi 1.6Gi

In the very first time of installing any Linux distributions, I got confused at the partitioning step. After years of experience, here is how I am doing now and I am quite satisfied with this partitioning strategy. From the beginning to end (left to right) of the disk: * 500MB, FAT32,

Docker is a very handy tool to replicate the running environment for your server. The caching mechanism of container building is also brilliant. However, it comes with a cost, you usually run out of disk space. To mitigate the issue and optimize the disk for other development tasks, I usually

You have ever written bash scripts to start a server, and send a probe request to check for the sever's healthy. However, you want your script to finish right after it detects the server alive, or, after a number of tries, or, after a limited time (in seconds). The idea

In the previous post [https://transang.me/ssh-tunnel-in-ubuntu/], I have introduced how to create a reverse tunnel to access your local machine from a remote machine, by pass the firewall, or, access a network in the behavior of another machine. In this post, I advance the topic by introducing how

Regular expression [https://en.wikipedia.org/wiki/Regular_expression] [https://en.wikipedia.org/wiki/Comparison_of_regular-expression_engines], invented by the American mathematician Stephen Cole Kleene [https://en.wikipedia.org/wiki/Stephen_Cole_Kleene], is a search pattern used to match, or find and replace, strings. While its name is

In computer science, formal language is a field that studies formal languages. Language definition * A non-empty, finite set Σ is called an alphabet. * An alphabet's elements are called letter, or character, or symbol. * A (finite or infinite) subset of the power set of an alphabet is called a language. Language

Whenever writing a shell script, I mostly always include this option at the beginning of the script #!/usr/bin/env bash set -Eeuo pipefail Sometimes, I also include. DIR=$(cd "$(dirname "${BASH_SOURCE[0]}")" >/dev/null 2>&1 && pwd) Explanation The env command wrapping * #!/usr/bin/env bash: trigger the

Definition What is event bubbling? Most events attached to the DOM node do propagate (bubble/capture). In other words, when an event is triggered * It first goes from the most parent event (i.e., the window object) to the lowest descendant. This phase is called capturing. Note: IE does not

I made this post to summarize several critical practices in the PR review process based on my experience. The list includes only essential rules, rather than general ones. Feel free to pick up and adopt any of them to your team. Hope that they can be helpful. -------------------------------------------------------------------------------- P1. Avoid

In this post, I will share my coding convention for my React projects. If you think they are useful for your project especially at the initial setup stage of the project, please feel free to pick up any of them and apply to your team. Although these rules are rather

From ES6, there are Proxy [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy] and Reflect [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect] classes that allow us to customize the objects at several language levels. For example property retrieval, assignment, iteration, function

Check if a value is an array type. To check whether an object is array type, use Array.isArray() [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray] , instead of instanceof Array. Reason: instanceof Array does not work across realms ( window, iframe). Check here [https://stackoverflow.

TLDR; * With an ES6 Map, use for (const [key, value] of myMap), this is equivalent to for (const [key, value] of myMap.entries()). * With an ES6 Set, use for (const value of mySet), this is equivalent to for (const value of mySet.values()). * With an array, use for (const value

In Javascript, an object's property falls into exactly one of two categories (not both, not none of them): data property, accessor property (ECMA [https://tc39.es/ecma262/#sec-object-type]). Definition Regardless of with or without your explicit definition, all object's properties have their associated property descriptor, which has the following properties.

How does the new operator work in Javascript, when for example, calling new MyClass(...params)? * Step 1: create a new object by Object.create(MyClass.prototype). * Step 2: call MyClass's constructor function (the MyClass itself if and only if (iff) it is a function) with this set as the object

When it happens that you want to find the first pair of elements from two arrays. You would want to break the for-loop after the predicate is satisfied. The common approach is to introduce a flag and check after each iteration in the outer loop. // NOTE: we have a better

This post explains how javascript does when it compares two values with a relational operator ( <, >, <=, >=). If you are looking for equality comparison ( ==, ===), check this post [https://transang.me/javascript-equality-and-sameness/] instead. -------------------------------------------------------------------------------- Abstract Relational Comparison algorithm The relation comparison in Javascript mainly follows the Abstract Relational Comparison algorithm [https://tc39.es/

TLDR; The list of required permissions is as follows: These include BatchCheckLayerAvailability, GetAuthorizationToken, CompleteLayerUpload, InitiateLayerUpload, PutImage, and UploadLayerPart. This is the role's detail in JSON format. { "Version": "2012-10-17", "Statement": [ { "Sid": "VisualEditor0", "Effect": "Allow", "Action": [ "ecr:CompleteLayerUpload", "ecr:UploadLayerPart", "ecr:Initiate