Cyrus Yip's blog

How to Enable Per-App Language Preferences for Every App

Sat, 18 Oct 2025 00:00:00 +0800

Android 13 introduces Per-app language preferences, which allows you to set different languages for different apps. It is a useful feature in Android, but it’s not available for all apps. Fortunately, we can enable this feature for every app.

Enable developer options.
Enable USB debugging in developer options.

Connect your phone to your PC and run the following command:

1

adb shell settings put global settings_app_locale_opt_in_enabled false

If the command does not work for your device’s operating system (e.g. HyperOS), try Language Selector instead.

Reference: How to make every app appear in Android 13’s new per-app language settings : r/Android

Upgrade Firmware for OnePlus Ace 3

Tue, 06 May 2025 00:00:00 +0800

My OnePlus Ace 3 runs on PixelOS, which doesn’t include the firmware, so I need to upgrade the firmware by myself.

Firmware is installed via fastboot and fastbootd, so we need to test them:

Connect the phone to the computer
Press the volume-down button and power button to enter fastboot
Run fastboot devices, and make sure the phone is in fastboot
Run fastboot reboot fastboot to enter fastbootd
Run fastboot devices, and make sure the phone is in fastbootd

My phone runs on PixelOS_aston-15.0-20250424 with PJE110_15.0.0.500 firmware, and I want to upgrade the firmware to PJE110_15.0.0.701.

Installation steps:

Press the volume-down button and power button to enter fastboot.
Download the firmware from this link. I will download PJE110_15.0.0.701. Extract the file.
Run install_images.sh on Linux/macOS, and install_images.bat on Windows.

Upgrade OnePlus Ace 3 from PixelOS 14 to PixelOS 15

Thu, 13 Feb 2025 00:00:00 +0800

Required files #

PJE110domestic_11_14.0.0.317CN01_2024012904340000.zip (Click All Packages: DOWNLOAD. Log in a Google account if you can’t download.)
ColorOS PJE110_15.0.0.500(CN01) C.32 全量包 (Copy the link of 官方链接 and use aria2 or Aria2App to download the file.)
1.3.zip and prog_firehose_ddr.zip (Download files from How To Guide - [12R/Ace 3] EDL DownloadTool to restore your device to OxygenOS/ColorOS | XDA Forums.)

Steps #

Backup apps and data using DataBackup (root required, optional step).
Follow How To Guide - [12R/Ace 3] EDL DownloadTool to restore your device to OxygenOS/ColorOS | XDA Forums to flash PJE110domestic_11_14.0.0.317CN01_2024012904340000.zip.
Flash ColorOS PJE110_15.0.0.500 using local install on ColorOS 14 (flash ColorOS 15 the first time). Try General - General Local install issues on system updater and how to fix it | XDA Forums if local install is gray in the system updater.
Flash ColorOS PJE110_15.0.0.500 using local install on ColorOS 15 (flash ColorOS 15 the second time).
Flash PixelOS 15 following the instructions on the website.
Restore data using DataBackup (optional step).

This post was shared on XDA forum.

How to install Google Play on OPPO / OnePlus / ColorOS

Fri, 15 Nov 2024 00:00:00 +0800

Enable Google Services: Open Settings, search “google”, open “Google setting”, and enable “Google Mobile Services”.
Install Google Play: Open App Market, search “google play”, update “谷歌应用市场”, and Play Store will appear on the home screen after updating.

Tested device: OnePlus Ace 3 (ColorOS 14) and OPPO Reno12 (ColorOS 14).

What Is HTTP

Tue, 29 Oct 2024 00:00:00 +0800

Introduction #

HTTP (Hypertext Transfer Protocol) is a protocol for transferring information, such as HTML files. It’s the foundation of data communication for the World Wide Web. In a typical HTTP session, the client (such as a browser) sends a request to the server, which sends back a response.

HTTP Request #

A typical HTTP request consists of:

request line (request method, path, protocol version)
request header
empty line
optional message body

Here is an example of HTTP request message (curl --verbose https://cyrusyip.org/en/):

1
2
3
4


GET /en/ HTTP/2
Host: cyrusyip.org
User-Agent: curl/8.10.1
Accept: */*

HTTP Request Methods #

HTTP request methods (also called HTTP verbs) indicate the purpose of the request and what to expect. Here are the common request methods:

GET: request the specified resource
POST: sends information to the server

HTTP Response #

A typical HTTP response consists of:

status line (protocol version, status code, optional explanation of status code)
response header
empty line
optional message body

Here is an example of HTTP response message (curl --verbose https://example.com/):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


HTTP/2 200
age: 190635
cache-control: max-age=604800
content-type: text/html; charset=UTF-8
date: Mon, 28 Oct 2024 09:39:38 GMT
etag: "3147526947+gzip+ident"
expires: Mon, 04 Nov 2024 09:39:38 GMT
last-modified: Thu, 17 Oct 2019 07:18:26 GMT
server: ECAcc (sac/2571)
vary: Accept-Encoding
x-cache: HIT
content-length: 1256

<!doctype html>
<html>
<head>
content is stripped...
</head>

<body>
<div>
 <h1>Example Domain</h1>
 <p>This domain is for use in illustrative examples in documents. You may use this
 domain in literature without prior coordination or asking for permission.</p>
 <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>

HTTP Status Codes #

HTTP status codes are three-digit numbers that indicate whether an HTTP request has been successfully completed. They are grouped in five classes:

1xx (Informational): The request was received, continuing process.
2xx (Successful): The request was successfully received, understood, and accepted.
3xx (Redirection): Further action needs to be taken in order to complete the request.
4xx (Client Error): The request contains bad syntax or cannot be fulfilled.
5xx (Server Error): The server failed to fulfill an apparently valid request.

Here are some commonly used HTTP status codes:

103 Early Hints: This status code lets the user agent preload resources while the server prepares a response.
200 OK: The request succeeded.
301 Moved Permanently: The URL of the requested resource has been permanently changed.
302 Found: The URL of the requested resource has been temporarily changed.
403 Forbidden: The client does not have access permission to the resource.
404 Not Found: The server cannot find the requested resource.
500 Internal Server Error: The server has encountered an unexpected condition that prevented it from fulfilling the request.
503 Service Unavailable: The server is not ready to handle the request. It may be down for maintenance, or it may be overloaded.

References #

What Is Ajax and How to Use it

Tue, 08 Oct 2024 00:00:00 +0800

Ajax (Asynchronous JavaScript and XML) is a method for sending and receiving data from a web server. It allows parts of a web page to be updated without reloading the whole page. Ajax isn’t a specific technology, but rather a concept that can be implemented using various methods: XMLHttpRequest, fetch() or libraries like Axios. Although Ajax originally used XML, it uses JSON more commonly nowadays.

Set Up a Test Server #

Before we dive into Ajax examples, let’s create a simple server to handle our requests. Save the following code as server.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


// Usage: save this code as server.js and run "node server.js [port]"
import http from 'http';
import fs from 'fs';

// Get the port from command-line arguments
const port = process.argv[2] || 3000;

const requestListener = (request, response) => {
 console.log(request.url)
 if (request.url === '/' || request.url === '/index.html') {
 // Serve the index.html file
 const filePath = 'index.html';
 fs.readFile(filePath, (err, data) => {
 if (err) {
 response.writeHead(500, { 'Content-Type': 'text/plain' });
 response.end('Error loading index.html');
 } else {
 response.writeHead(200, { 'Content-Type': 'text/html' });
 response.end(data);
 }
 });
 } else if (request.url === '/data1') {
 // Return text for URL '/data1'
 response.writeHead(200, { 'Content-Type': 'text/plain' });
 response.end('This is the response for /data1');
 } else if (request.url === '/data2') {
 // Return text for URL '/data2'
 response.writeHead(200, { 'Content-Type': 'text/plain' });
 response.end('This is the response for /data2');
 } else if (request.url === '/data3') {
 // Return text for URL '/data3'
 response.writeHead(200, { 'Content-Type': 'text/plain' });
 response.end('This is the response for /data3');
 } else {
 response.writeHead(404, { 'Content-Type': 'text/plain' });
 response.end('404 Not Found');
 }
};

// Create and start the server
const server = http.createServer(requestListener);

server.listen(port, () => {
 console.log(`Server is running at http://localhost:${port}`);
});

Interactive Demo of fetch(), XMLHttpRequest and Axios #

The following demo showcases three methods for making Ajax requests. Save the code as index.html to the directory that contains server.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87


<!-- Copy this code and save it as "index.html" -->
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Ajax Demo</title>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
 <h1>Ajax Demo</h1>
 <hr />
 <h2>Use fetch()</h2>
 <button onclick="LoadDataFetch('/data1')">Load data 1 (fetch)</button>
 <button onclick="LoadDataFetch('/data2')">Load data 2 (fetch)</button>
 <button onclick="LoadDataFetch('/data3')">Load data 3 (fetch)</button>
 <button onclick="LoadDataFetch('/data4')">Load data 4 (fetch, 404)</button>
 <h2>Use XMLHttpRequest</h2>
 <button onclick="LoadDataXHR('/data1')">Load data 1 (XHR)</button>
 <button onclick="LoadDataXHR('/data2')">Load data 2 (XHR)</button>
 <button onclick="LoadDataXHR('/data3')">Load data 3 (XHR)</button>
 <button onclick="LoadDataXHR('/data4')">Load data 4 (XHR, 404)</button>
 <h2>Use Axios</h2>
 <button onclick="LoadDataAxios('/data1')">Load data 1 (Axios)</button>
 <button onclick="LoadDataAxios('/data2')">Load data 2 (Axios)</button>
 <button onclick="LoadDataAxios('/data3')">Load data 3 (Axios)</button>
 <button onclick="LoadDataAxios('/data4')">Load data 4 (Axios, 404)</button>
 <h2>Data</h2>
 <p id="response">No data loaded</p>
 <script>
 const responseElement = document.querySelector("#response");
 // Fetches data using fetch()
 const LoadDataFetch = (url) => {
 fetch(url)
 .then((response) => {
 // Check if the response status is OK (200-299)
 if (!response.ok) {
 return `HTTP error: ${response.status}`;
 }
 return response.text(); // Return the response data as text
 })
 .then((data) => {
 // Display the data
 responseElement.textContent = data;
 })
 .catch((error) => {
 // Handle errors, e.g., network issues
 responseElement.textContent = "Request failed (fetch)";
 });
 };

 const LoadDataXHR = (url) => {
 const xhr = new XMLHttpRequest();
 xhr.open("GET", url);
 xhr.onreadystatechange = () => {
 // Check if the response status is 200
 if (xhr.readyState === 4 && xhr.status === 200) {
 // Display the data
 responseElement.textContent = xhr.responseText;
 } else {
 responseElement.textContent = `HTTP error: ${xhr.status}`;
 }
 };
 xhr.onerror = () => {
 // Handle errors, e.g., network issues
 responseElement.textContent = "Request failed (XHR)";
 };
 xhr.send();
 };
 const LoadDataAxios = (url) => {
 axios
 .get(url)
 .then((response) => {
 // Display the data
 responseElement.textContent = response.data;
 })
 .catch((error) => {
 // Handle errors, e.g., 404 and network issues
 responseElement.textContent = `Request failed (Axios): ${error.message}`; // Offline, 404
 });
 };
 </script>
</body>

</html>

Run node server.js, and visit http://localhost:3000/. The demo provides buttons to load data from different URLs using three methods: fetch(), XMLHttpRequest and Axios. Try clicking the buttons to see how each method handles requests, including error responses.

Reference #

Prototype and Inheritance in JavaScript

Wed, 02 Oct 2024 00:00:00 +0800

Prototype #

In JavaScript, every object has a hidden built-in property called prototype ([[Prototype]] in ECMAScript Specification and Chrome, <prototype> in Firefox), which is an object. With prototypes, we can create shared properties. To get or set [[Prototype]], use Object.getPrototypeOf() and Object.setPrototypeOf(). __proto__ is a non-standard getter/setter of [[Prototype]], but it’s implemented by many JavaScript engines.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


const fruit = {
 eatable: true,
}

const apple = {
 shape: "round",
 __proto__: fruit, // set [[Prototype]] as fruit
}
console.log(apple.__proto__) // { eatable: true }
console.log(apple.shape) // round, own property
console.log(apple.eatable) // true, inherit from [[Prototype]]
console.log(apple.requireCooking) // undefined, not exist in apple or fruit
fruit.requireCooking = false // add a property to [[Prototype]]
console.log(apple.requireCooking) // false, inherit from [[Prototype]]

const banana = {
 shape: "long and curved",
}
Object.setPrototypeOf(banana, fruit) // set [[Prototype]] as fruit
console.log(Object.getPrototypeOf(banana)) // { eatable: true, requireCooking: false } 
console.log(banana.eatable) // true, inherit from [[Prototype]]

Prototype Chain / Inheritance #

An object has a prototype and its prototype also has a prototype. All these prototypes are called the prototype chain. The last prototype’s prototype is null. An object can inherit properties from multiple prototypes in the prototype chain. When a property is accessed, the object is first checked. If the property is not found, check every prototype in the prototype chain until the property is found. If the property is not found at the end, undefined is returned.

In the apple example, the prototype chain of apple is:

1

apple -> fruit -> Object.prototype -> null

The code below demonstrates the prototype chain:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


const fruit = {
 eatable: true,
}
const apple = {
 shape: "round",
 __proto__: fruit,
}
// fruit
console.log(apple.__proto__) // { eatable: true }
console.log(apple.__proto__ === fruit) // true
// Object.prototype
console.log(apple.__proto__.__proto__) // { … }
console.log(apple.__proto__.__proto__ === Object.prototype) // true
// null
console.log(apple.__proto__.__proto__.__proto__) // null

Test #

Prototypal inheritance#tasks - javascript.info

JavaScript Data Types

Sat, 28 Sep 2024 00:00:00 +0800

JavaScript has 8 data types:

Undefined (undefined)
Null (null)
Boolean (true / false)
Number
BigInt
String
Symbol (unique value)
Object

Object is the only mutable type. Other types are immutable and are called primitive types.

Undefined #

The Undefined type has only one value: undefined, which means a variable is declared but no value is assigned to it.

1
2


let name;
console.log(name); // undefined

undefined can be assigned to a variable but one should use null to represent emptiness.

1
2
3
4


let name = "Kate";
console.log(name) // Kate
name = undefined;
console.log(name); // undefined

Null #

The Null type has only one value: null, which means empty.

1
2


let name = null;
console.log(name); // null

Boolean #

The Boolean type has two values: true and false. The Boolean values are usually used in conditional operations.

1
2
3
4
5
6


console.log(1 > 2); // false
if (1 > 2) {
 console.log("One is greater than two."); // not executed
} else {
 console.log("One is less than two."); // executed
}

Number #

The Number type represents both integer and floating point numbers.

1
2
3


let num;
num = 10;
num = 10.1;

The Number type contains some special values: Infinity, -Infinity and NaN (Not a Number).

1
2
3
4


console.log(10 / 0); // Infinity
console.log(-10 / 0); // -Infinity
console.log(10 / 'a'); // NaN
console.log(NaN === NaN); // false

JavaScript can only safely store integers in the range of Number.MIN_SAFE_INTEGER -(2⁵³ − 1) to Number.MAX_SAFE_INTEGER (2⁵³ − 1).

1
2
3
4


console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MAX_SAFE_INTEGER + 1); // 9007199254740992
console.log(Number.MAX_SAFE_INTEGER + 2); // 9007199254740992
console.log(Number.MAX_SAFE_INTEGER + 3); // 9007199254740994

BigInt #

The BigInt type can safely store integers beyond Number.MIN_SAFE_INTEGER and Number.MAX_SAFE_INTEGER. To create a BigInt value, append n to an integer or call the BigInt() function. Note that when BigInt() accept a number beyond the safe limits, the number will be rounded.

1
2
3
4
5
6


console.log(9007199254740991); // 9007199254740991
console.log(9007199254740992); // 9007199254740992
console.log(9007199254740993); // 9007199254740992, number is rounded
console.log(9007199254740993n); // 9007199254740993n
console.log(BigInt(9007199254740993)); // 9007199254740992n, number is rounded
console.log(BigInt("9007199254740993")); // 9007199254740993n

String #

The String type represents text.

1
2
3
4
5
6


const firstName = "Jane";
const lastName = "Doe";
const fullName = firstName + " " + lastName;
console.log(fullName); // Jane Doe
const selfIntroduction = `Hi, I am ${fullName}.`;
console.log(selfIntroduction); // Hi, I am Jane Doe.

Symbol #

The Symbol type represents a unique and immutable value. To create a Symbol value, call Symbol() function with an optional string as its description.

1
2
3
4
5


const sym1 = Symbol();
const sym2 = Symbol("foo");
const sym3 = Symbol("foo");
console.log(sym1 === sym2); // false
console.log(sym2 === sym3); // false

Object #

Object is a collection of key-value pairs, similar to a dictionary.

1
2
3
4
5


const englishDictionary = {
 article: "A piece of writing",
 happy: "Feeling or showing pleasure",
 water: "Clear and tasteless liquid, essential for life"
}

References #

box-sizing in CSS: How Width and Height Are Calculated

Tue, 24 Sep 2024 00:00:00 +0800

In CSS, a block element is a box (rectangle) made up of four parts: content, padding, border, and margin. box-sizing determines how total width and height of an element is calculated.

Box model

By default (box-sizing: content-box;), the width property only sets the width of content, which is very unintuitive. When you set width: 100% and border to a element, it becomes wider than the parent element and its border extends beyond the parent element.

1
2
3


<div class="container">Parent
 <div class="child">Child</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.container {
 width: 100px;
 height: 100px;
 outline: 1px solid green;
}
.child {
 width: 100%;
 border: 10px solid blue;
 box-sizing: content-box;
}

If we use box-sizing: border-box on the child element, the width property sets the width of content, padding and border, so the child element won’t be wider than the parent element.

It’s recommended to set border-box to all elements to avoid pitfalls about width and height.

1
2
3


*, *::before, *::after {
 box-sizing: border-box;
}

Introduction to Cascade in CSS

Mon, 23 Sep 2024 00:00:00 +0800

The cascade is the algorithm that determines the correct rule when multiple CSS rules apply to an HTML element.

The cascade is determined by several factors (from least important to most important):

source order (least important)
specificity
1. type
2. class
3. id
inline styles
!important (most important)

Source order #

Later declared rules override previous rules.

1

<p>Hello, world!</p>

1
2
3
4
5
6
7


p {
 color: green;
}
p {
 /* This rule wins */
 color: blue;
}

Specificity #

Specificity determines the importance of a selector. In general, the more specific a selector is, the more weight is has.

For example, an id selector is more specific than a type selector, so the id selector has more weight.

1

<p id="p">Hello, world!</p>

1
2
3
4
5
6
7


#p {
 /* This rule wins */
 color: green;
}
p {
 color: blue;
}

Specificity calculation #

The specificity score is calculated using three components:

A = the number of ID selectors
B = the number of class selectors, attribute selectors and pseudo-classes
C = the number of type selectors and pseudo-elements

Specificity scores are compared by comparing three components in order. The specificity score with a larger A value is higher. If two A values are equal, compare B values. If two B values are also equal, compare C values. If all values are equal, two specificity scores are equal. For example, (1,0,0) is larger than (0,2,0).

When you inspect an element using devtools and hover the cursor to a selector of a style declaration, you will see the specificity score in the form of Specificity: (A,B,C).

Here are some specificity score examples:

Selector	A (ID)	B (Class)	C (Type)	Score
`*`	0	0	0	0,0,0
`p`	0	0	1	0,0,1
`div.highlight`	0	1	1	0,1,1
`main .table-wrapper > table`	0	1	2	0,1,2
`#avatar`	1	0	0	1,0,0

Inline styles #

Inline styles are declared inside a style attribute. Inline styles have the highest specificity score (1,0,0,0).

1

<p style="color: blue;" id="p">I am blue</p>

1
2
3


#p {
 color: green;
}

!important #

!important flag overrides all other factors (source order, specificity, and inline styles).

1

<p style="color: blue;" id="p">I am green</p>

1
2
3


#p {
 color: green !important;
}

!important can make CSS work unexpectedly. Don’t use it unless you really need it.

References #

Test #

Test your skills: The Cascade - Learn web development | MDN

Introduction to Inheritance in CSS

Mon, 23 Sep 2024 00:00:00 +0800

Elements inherit some CSS properties from their ancestors. You can check whether a property is inherited in the formal definition section on MDN, e.g. width and color.

1
2
3
4
5


<div class="grandparent">
 <div class="parent">
 <div class="child">I inherit the green color from my parent, and the italic style from my grandparent. I don't inherit the border.</div>
 </div>
</div>

1
2
3
4
5
6
7


.grandparent {
 font-style: italic;
 border: 2px solid black; /* not inherited */
}
.parent {
 color: green; 
}

CSS provides five universal property values to control inheritance.

The CSS shorthand property all applies one of these values to all properties of an element.

What Is Block Formatting Context (BFC) in CSS

Sun, 22 Sep 2024 00:00:00 +0800

Block Formatting Context (BFC) is a mini layout in the page. When an element establishes a BFC, it:

includes internal floated elements
exclude external floated elements
suppresses margin collapsing

A BFC is created in many situations, see Block formatting context - CSS: Cascading Style Sheets | MDN. The simplest way to create a BFC is display: flow-root.

Here is an example of excluding external floated elements (live preview):

1
2
3
4
5
6
7
8
9


<div class="container">
 <div class="float">I am floated element.</div>
 <div class="content">I am content inside the container. I include the floated element.</div>
</div>
<hr>
<div class="container">
 <div class="float">I am floated element.</div>
 <div class="content flow-root">I am content inside the container. I have a BFC. I exclude the floated elements.</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


.float {
 float: left;
 border: 5px solid green;
}

.content {
 border: 5px solid blue;
}

.container {
 border: 5px solid red;
}

.content.flow-root {
 display: flow-root;
}

What Is Clearfix in CSS

Sun, 22 Sep 2024 00:00:00 +0800

Float can be used to lay out elements. Clearfix is a method used to fix the zero-height container issue caused by floated elements.

Here is an example of arranging items vertically using float (live preview):

1
2
3
4
5
6


<div class="container clearfix">
 <div class="item item1">item1</div>
 <div class="item item2">item2</div>
 <div class="item item3">item3</div>
</div>
<div class="outer">outer element</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.item {
 border: 1px solid red;
 width: 60px;
 height: 60px;
 float: left;
}

.container {
 border: 1px solid green;
}

Three items are properly arranged, but the outer element is at the right side of item3.

1

item1 | item2 | item3 | outer element

The outer element should be under all items.

1
2
3


item1 | item2 | item3 |

outer element

Since three items are floated, they are removed from the normal flow. As a result, .container contains nothing, so its height is 0. That’s why the outer element isn’t under three items. Here is the classic method for fixing the height:

1
2
3
4
5


.clearfix::after {
 content: '';
 display: block;
 clear: both;
}

Breakdown:

.clearfix::after creates an element and append it to .clearfix (.container)
content: ''; means the element is empty.
display: block; means the element is a block element.
clear: both; puts the element under left floated elements and right floated elements.
Since .clearfix (.container) has an element now, its height becomes normal.
You can see the element by applying content: 'hi'.

The classic method is obsolete and difficult to understand. Here is the modern and simpler method:

1
2
3


.clearfix {
 display: flow-root;
}

display: flow-root makes the container establish a block formatting context, which contains internal floated elements. For more details on block formatting context, see What is Block Formatting Context (BFC) in CSS.

Note that float layout is hacky and obsolete. Use flexbox or grid instead.

What Is Margin Collapsing in CSS

Sat, 21 Sep 2024 00:00:00 +0800

Margin collapsing is a feature in the flow layout. When an block element comes after another block elements, the bottom margin of the upper element and the top margin of the lower element collapse (merge into a single margin). The larger margin remains, and the smaller margin disappears. If the two margins are equal, one of them remains. Margins don’t collapse in a flex container or a grid container.

Example (live preview):

1
2
3
4
5


<!-- Margin collapsing example -->
<div class="container">
 <p class="upper">Upper element</p>
 <p class="lower">Lower element</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


p {
 /* Remove default margins */
 margin: 0;
}

.upper {
 /* Larger margin remains */
 margin-block-end: 50px;
}

.lower {
 /* Smaller margin disappears */
 margin-block-start: 10px;
}

.container {
 border: 1px solid purple;
 /* Margins don't collapse in the flex layout or grid layout */
 /* display: grid; */
}

p {
 border: 1px solid green;
}

The bottom margin of the upper element (50px) is larger, so it remains and another margin (10px) disappears. When we add display: grid; to the container, <p> elements become grid items, which establish block formatting contexts, so margin collapsing is disabled. Now you can see the two margins exist at the same time.

For more details on block formatting context, see What is Block Formatting Context (BFC) in CSS.

Further reading: Mastering margin collapsing - CSS: Cascading Style Sheets | MDN

Add a Horizontal Scrollbar to a Table with CSS

Fri, 20 Sep 2024 00:00:00 +0800

Tables with many columns can overflow the page width, which distorts the page layout. Adding a horizontal scrollbar avoids this problem.

To add a horizontal scrollbar to a table, wrap the table in a <div> container and apply overflow-x: auto; to the container.

1
2
3
4
5


<div style="overflow-x: auto;"> <!-- Wrapper -->
 <table>
 <!-- Table content -->
 </table>
</div>

Demo (live preview):

1
2
3


.table-wrapper {
 overflow-x: auto;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92


<div class="table-wrapper">
 <table>
 <thead>
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 <th>Header 3</th>
 <th>Header 4</th>
 <th>Header 5</th>
 <th>Header 6</th>
 <th>Header 7</th>
 <th>Header 8</th>
 <th>Header 9</th>
 <th>Header 10</th>
 <th>Header 11</th>
 <th>Header 12</th>
 <th>Header 13</th>
 <th>Header 14</th>
 <th>Header 15</th>
 <th>Header 16</th>
 <th>Header 17</th>
 <th>Header 18</th>
 <th>Header 19</th>
 <th>Header 20</th>
 <th>Header 21</th>
 <th>Header 22</th>
 <th>Header 23</th>
 <th>Header 24</th>
 <th>Header 25</th>
 <th>Header 26</th>
 <th>Header 27</th>
 <th>Header 28</th>
 <th>Header 29</th>
 <th>Header 30</th>
 <th>Header 31</th>
 <th>Header 32</th>
 <th>Header 33</th>
 <th>Header 34</th>
 <th>Header 35</th>
 <th>Header 36</th>
 <th>Header 37</th>
 <th>Header 38</th>
 <th>Header 39</th>
 <th>Header 40</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Data 1</td>
 <td>Data 2</td>
 <td>Data 3</td>
 <td>Data 4</td>
 <td>Data 5</td>
 <td>Data 6</td>
 <td>Data 7</td>
 <td>Data 8</td>
 <td>Data 9</td>
 <td>Data 10</td>
 <td>Data 11</td>
 <td>Data 12</td>
 <td>Data 13</td>
 <td>Data 14</td>
 <td>Data 15</td>
 <td>Data 16</td>
 <td>Data 17</td>
 <td>Data 18</td>
 <td>Data 19</td>
 <td>Data 20</td>
 <td>Data 21</td>
 <td>Data 22</td>
 <td>Data 23</td>
 <td>Data 24</td>
 <td>Data 25</td>
 <td>Data 26</td>
 <td>Data 27</td>
 <td>Data 28</td>
 <td>Data 29</td>
 <td>Data 30</td>
 <td>Data 31</td>
 <td>Data 32</td>
 <td>Data 33</td>
 <td>Data 34</td>
 <td>Data 35</td>
 <td>Data 36</td>
 <td>Data 37</td>
 <td>Data 38</td>
 <td>Data 39</td>
 <td>Data 40</td>
 </tr>
 </tbody>
 </table>
</div>

Names of Punctuation Marks on a QWERTY Keyboard

Fri, 20 Sep 2024 00:00:00 +0800

AmE means American English, and BrE means British English.

Punctuation mark	Name
~	tilde
!	exclamation point (AmE) / exclamation mark (BrE)
@	at sign / at symbol
#	hash / pound sign / number sign
$	dollar sign
%	percent sign
^	caret
&	ampersand / and sign
*	asterisk
( )	parenthesis (AmE) / bracket (BrE) / round bracket (BrE)
-	hyphen / minus sign
+	plus sign
`	backtick/backquote/grave
_	underscore
=	equal sign (AmE) / equals sign (BrE)
{ }	brace / curly bracket
\|	verticle bar / pipe
[ ]	square bracket
\	backslash
:	colon
"	double quote / double quotation mark
;	semicolon
'	apostrophe / single quote / single quotation mark
<	less-than sign
>	greater-than sign
?	question mark
,	comma
.	period (AmE) / full stop (BrE)
/	slash / forward slash

Reference: Wikipedia, the free encyclopedia

Introduction to CSS BEM Naming Convention

Sun, 08 Sep 2024 00:00:00 +0800

BEM (Block, Element, Modifier) is a naming convention for class names in HTML and CSS. It makes HTML and CSS code more orgranized.

Concepts and Usage #

Don’t worry if you don’t understand it at first. There are examples later on.

Block: independent HTML element (such as <nav>), and it may not contain any HTML elements.
Element: any HTML element inside a block, it can’t be independently used (example: <li>), and double underscores __ should be added before it.
Modifier: it indicates the state or appearance of a block or element, and double hyphens -- should be added before it.
Use single hyphen to connect words, example: search-form.
An element only belongs to a block, not another element. Wrong: block__element1__element2. Correct: block__element2.
When using modifier, keep the class name without the modifier. Example: <a class="menu__link menu__link--active" href="/en/">Home</a>.

HTML Demo #

<nav> is a block, which contains the elements <ul>, <li> and <a>. --active is a modifier.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<nav class="menu">
 <ul class="menu__list">
 <li class="menu__item">
 <a class="menu__link menu__link--active" href="/en/">Home</a>
 </li>
 <li class="menu__item">
 <a class="menu__link" href="/en/posts/">Posts</a>
 </li>
 <li class="menu__item">
 <a class="menu__link" href="/en/about/">About</a>
 </li>
 </ul>
</nav>

CSS Demo #

Online demo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* Horizontal list */
.menu__list {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 list-style-type: none;
 padding-inline-start: 0;
}

/* Embolden the link that matches the current page */
.menu__link--active {
 font-weight: bolder;
}

SCSS Demo #

I strongly recommend SCSS because you can use the parent selector & to group together all styles of both a block and its elements. This structure clearly reflects the hierarchical relationship between them.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


.menu {
 // Horizontal list
 &__list {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 list-style-type: none;
 padding-inline-start: 0;
 }

 // Embolden the link that matches the current page
 &__link {
 &--active {
 font-weight: bolder;
 }
 }
}

Alternative: Atomic CSS #

If you find BEM too verbose or difficult to maintain, you can try atomic CSS frameworks like Tailwind CSS and UnoCSS that provide utilities (predefined classes). Developers only need to write predefined class names and don’t need to write CSS code. Here are some utilities in Tailwind CSS:

1
2
3
4
5
6


.flex {
 display: flex;
}
.flex-row {
 flex-direction: row;
}

To rewrite the previous CSS code in Tailwind CSS (online demo):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<script src="https://cdn.tailwindcss.com"></script>
<script>
 tailwind.config = {
 corePlugins: {
 preflight: false,
 }
 }
</script>
<nav>
 <ul class="flex flex-row flex-wrap justify-between list-none ps-0">
 <li>
 <a class="font-bold" href="/en/">Home</a>
 </li>
 <li>
 <a href="/en/posts/">Posts</a>
 </li>
 <li>
 <a href="/en/about/">About</a>
 </li>
 </ul>
</nav>

Run Different Versions of Hugo without Installation via npx

Wed, 20 Dec 2023 00:00:00 +0800

npx lets you run different versions of Hugo without installation. To use it, install Node.js and npm at first.

Run different versions #

The syntax of npx is npx <package-name>@<version>. If @<version> is not specified, the locally installed version or latest version will be used. Here are some examples:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# local installed version or latest version
npx hugo-extended
# Hugo latest
npx hugo-extended@latest
# Hugo v0.121.0
npx hugo-extended@0.121.0
npx hugo-extended@0.121.0 version
npx hugo-extended@0.121.0 server
# Hugo v0.99.1
npx hugo-extended@0.99.1 version

Available versions are listed here. Oldest version is 0.63.2. If you want to use the older versions, use hugo-bin package instead. Its version doesn’t match the Hugo version, so you have to check its commit history.

1
2


# Hugo v0.121.0
npx hugo-bin@0.117.0 version

Install a specific version #

You can install a specific version of Hugo in a git repository.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


cd cyrusyip-blog
# install Hugo v0.99.1
npm install --save-dev hugo-extended@0.99.1
# ignore local npm packages
echo 'node_modules' >> .gitignore
# commit change
git add --all
git commit --message 'add Hugo'
# use
npx hugo version # Hugo v0.99.1

To change the version, run install command again.

1
2


npm install --save-dev hugo-extended@0.125.5
npm install --save-dev hugo-extended@latest # latest version

If you clone the repository, install Hugo before using it.

1
2
3
4


git clone --recursive https://github.com/CyrusYip/cyrusyip-blog.git
cd cyrusyip-blog
npm install
npx hugo version # Hugo v0.99.1

Clean cache #

1
2
3
4


# clean npx cache
npx clear-npx-cache
# clean npm cache
npm cache clean --force

Note about package-lock.json #

By default, the directory name of source code will be shown in the name field in package-lock.json. To override that, set name field in package.json and run npm install.

Example of package.json:

1
2
3
4
5
6


{
 "name": "cyrusyip-blog",
 "devDependencies": {
 "hugo-extended": "^0.125.6"
 }
}

This tutorial was tested with npm/npx v10.5.2 and Node.js v21.7.3 on Arch Linux.

How to Change Network Configuration on Proxmox VE

Thu, 30 Nov 2023 00:00:00 +0800

When a Proxmox server connects to a new network (e.g. a new router), its network configuration needs to be changed.

Edit /etc/network/interfaces and /etc/hosts to change IP address and gateway, /etc/resolv.conf to change DNS. Then reboot the system.

1
2
3
4


# Use nano to edit
nano /etc/{network/interfaces,hosts,resolv.conf}
# Use Vim to edit
vim -p /etc/{network/interfaces,hosts,resolv.conf}

1

reboot

How to Enable Call Recording on Xiaomi / Redmi / HyperOS / MIUI

Mon, 27 Nov 2023 00:00:00 +0800

This tutorial is only tested on the China versions of MIUI and HyperOS. Tested devices: Redmi K40s (MIUI 14.0.7.0.TLMCNXM), Redmi Note 12 Turbo, and Redmi Turbo 3 (HyperOS 1.0.16.0.UNPCNXM).

HyperOS Guide #

Call recording in phone:

Open settings
Search “call recording”
Tap “call recording (App/Other settings/Sytem app settings/Phone/Call recording)”
Enable “Record calls automatically”

Call recording in apps:

Open settings
Search “recorder”
Tap “Recorder (Apps/Additional settings/System app settings/Recorder)”
Tap “Voice Call Recorder”
Enable “Voice Call Recorder”
Enable “Record calls automatically”
Select available apps (WeChat and QQ are supported)

MIUI Guide #

Call recording in phone: Open Settings -> Apps -> System app settings -> Call settings -> Call recording -> enable “Call recording notification” and “Record calls automatically”

Call recording in apps: Open Settings -> Apps -> System app settings -> Recorder -> Voice Call Recorder -> enable “Voice Call Recorder” and “Record calls automatically” (WeChat and QQ are supported)

Create Top-Level 404 Page for a Multilingual Hugo Site

Mon, 06 Nov 2023 00:00:00 +0800

If you build a multilangual Hugo site, you may want to enable defaultContentLanguageInSubdir to make URLs look consistent. For example:

/en/post/an-english-post
/cn/post/a-chinese-post

As of Hugo v0.120.4, defaultContentLanguageInSubdir = "true" still has the side effect that no 404 page (404.html) is generated at the root of public directory, which causes Cloudflare Pages to redirect non-exstent pages to root /. 404.html at the root is needed to fix the problem.

There are three workarounds: reuse 404.html in a subdirectory, create 404.md, and create custom 404.html in static directory. You don’t need these workarounds if you don’t enable defaultContentLanguageInSubdir.

Reuse 404.html #

Hugo generates 404.html in each subdirectory. Copy an 404.html to public directory after building. hugo && cp public/en/404.html public works for Cloudflare Pages, Netlify and Vercel.

Don’t copy generated 404.html to static directory. When 404.html changes, you need to delete 404.html, build the site and copy 404.html. It’s annoying to repeat these steps.

Create 404.md #

Create 404.md in a subdirectory, such as content/en/. Set url to /404.html.

1
2
3
4
5
6
7
8
9


---
# content/en/404.md
date: 2023-11-06T00:00:00+08:00
title: "404 Page Not Found"
url: "/404.html"
comment: false
---

[English Site](/en/) | [Chinese Site](/zh-cn/)

Create custom 404.html #

Create 404.html in static directory. It’s copied to public directory during building.

A minimal example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<!-- static/404.html -->
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>404 Page Not Found - Cyrus Yip's Blog</title>
 </head>
 <body>
 <h1>404 Page Not Found</h1>
 <p><a href="/en/">English Site</a> | <a href="/zh-cn/">Chinese Site</a></p>
 </body>
</html>

A more complicated example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


<!DOCTYPE html>
<!-- static/404.html -->
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>404 Page Not Found - Cyrus Yip's Blog</title>
 <style>
 body {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 height: 100vh;
 background-color: black;
 margin: 0;
 }
 .message {
 font-size: 2em;
 color: dimgray;
 }
 a {
 color: white;
 }
 </style>
 </head>
 <body>
 <p class="message">You are in darkness</p>
 <p class="link"><a href="/en/">Turn on the light</a></p>
 <p class="message">你掉入了虚空</p>
 <p class="link"><a href="/zh-cn/">离开</a></p>
 </body>
</html>

How to Fix Banking Apps / SafetyNet / Play Integrity on LineageOS without Root

Tue, 10 Oct 2023 00:00:00 +0800

Summary #

Flash ih8sn provided by althafvly or your maintainer(s) via Lineage Recovery, and banking apps will work correctly.

Explanation #

When you use banking apps on LineageOS without root, they may show the misleading error message that your device is rooted. Banking apps actually check SafetyNet or Play Integrity, both of which are used to verify device integrity.

After flashing ih8sn, LineageOS will pass those two tests, banking apps won’t complain any more, and Netflix will be available on Google Play. You can install YASNAC and Play Integrity API Checker to check. LineageOS will pass Basic integrity and CTS profile match on the former, MEET_DEVICE_INTEGRITY and MEET_BASIC_INTEGRITY on the latter.

This tutorial was tested on Mi 11 LE (lisa) and Mi 9 SE (grus) on LineageOS 20.

Fun fact: ih8sn means I hate SafetyNet.

How to Install Google Play On Xiaomi / Redmi / HyperOS / MIUI

Fri, 05 May 2023 00:00:00 +0800

Guide #

China Xiaomi / Redmi phones in Google Play supported devices¹ have built-in Google Services. We just need to install Google Play.

Turn on Google Services
- HyperOS: Settings -> Additional settings -> Account & sync -> Basic Google Services
- MIUI: Settings -> Account & sync -> Basic Google Services
Install Google Play: search “google play” on GetApps, and install or update “Google Play Store”. If Google Play isn’t found on GetApps, install it from Aptoide.

Now you should find Play Store on the home screen.

This tutorial was tested on Redmi K40S, Redmi Note 12 Turbo, Redmi Turbo 3, Mi 11 LE, and Xiaomi 14.

Thanks to Shitao Wu for testing Xiaomi 14 (HyperOS).

Notice #

This guide may not work for some phones. I don’t know which phones it doesn’t work for. You need to to try it by yourself.

If you haven’t buy the phone you want, you can:

Try this guide on the phone in a Xiaomi Store.
Buy a refundable phone online and try it.
Search online to see if someone succeeded with the phone you want.
Ask online if this guide works for the phone you want.

If you have already bought the phone but this guide doesn’t work for you, you can:

Return or sell it, and buy another one.
Unlock the bootloader and flash a custom ROM bundled with Google Play (this is quite complicated for average users. If you want to try, check XDA Forums and xiaomi.eu).

It’s not prerequisite. Google Play is possible to be installed on phones not in the list. ↩︎

How to Install the Latest Microcode on Proxmox VE (Debian stable)

Tue, 31 Jan 2023 00:00:00 +0800

In this tutorial, I will help you install the latest microcode in a upgradable way so that you can upgrade it via apt command. Please don’t install packages except microcode packages from the unstable repository to avoid a broken system. This tutorial was tested on Proxmox VE 7.4 / 8.0.2 .

Microcode is the firmware used to fix bugs in the CPU. It should be installed only on the host instead of virtual machines because microcode updates are applied during boot. We need to install it from the Debian unstable repository because microcode packages in Proxmox (Debian stable) may be out of date.

Installation #

Add the unstable repository with only non-free-firmware component.

1

echo "deb http://deb.debian.org/debian/ unstable non-free-firmware" > /etc/apt/sources.list.d/debian-unstable.list

To avoid installing other packages from the unstable repository, add this to /etc/apt/preferences.d/unstable-repo.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


# lower the priority of all packages in the unstable repository
Package: *
Pin: release o=Debian,a=unstable
Pin-Priority: 10

# allow upgrading microcode from the unstable repository
Package: intel-microcode
Pin: release o=Debian,a=unstable
Pin-Priority: 500
# This line should be a blank line or comment
Package: amd64-microcode
Pin: release o=Debian,a=unstable
Pin-Priority: 500

Update all repositories and make sure no package will upgrade from the unstable repository.

1

apt update && apt list --upgradable

Install one of the microcode packages according to your CPU manufacturer.

1
2
3
4


# Intel CPU
apt install intel-microcode
# AMD CPU
apt install amd64-microcode

Reboot the Proxmox host.

1

reboot

Verify that microcode is loaded.

1

journalctl -k --grep="microcode updated early to"

You should see similar output like this.

1

Sep 10 11:38:55 pve kernel: microcode: microcode updated early to revision 0x24000024, date = 2022-09-02

Note: The date displayed does not correspond to the version of the [intel-microcode] package installed. It does show the last time Intel updated the microcode that corresponds to the specific hardware being updated.

—Microcode - ArchWiki

Alternative installation #

If you don’t want to add the unstable repository, you can download microcode packages from Debian website. Get the latest download link from amd64-microcode or intel-microcode according to your CPU manufacturer, download the package via wget 'link' and install it via apt install ./filename.deb.

Example:

1
2
3
4
5
6
7


# AMD CPU
wget 'http://ftp.us.debian.org/debian/pool/non-free-firmware/a/amd64-microcode/amd64-microcode_3.20230808.1.1_amd64.deb/DontCopyThisLinkVerbatim'
apt install ./amd64-microcode_3.20230808.1.1_amd64.deb

# Intel CPU
wget 'http://ftp.us.debian.org/debian/pool/non-free-firmware/i/intel-microcode/intel-microcode_3.20230808.1_amd64.deb/DontCopyThisLinkVerbatim'
apt install ./intel-microcode_3.20230808.1_amd64.deb

Uninstallation #

To remove microcode and the unstable repository, run:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# remove microcode packages
apt purge amd64-microcode intel-microcode
apt autoremove
# make sure there is no installed package from the unstable repository
apt list --installed | grep '/unstable'
# remove unstable repository and config
rm /etc/apt/sources.list.d/debian-unstable.list /etc/apt/preferences.d/unstable-repo
# reboot
reboot
# check microcode, you should see "No entries"
journalctl -k --grep="microcode updated early to"

Motivation #

I installed Proxmox VE on a Beelink EQ59¹ N5105. I was satisfied at first, but some virtual machines froze from time to time, which bothered me very much. I found many N5105 CPU users had the same problem. One of the solutions is installing microcode, so I decided to install latest microcode. Though it doesn’t completely fix the problem, it really reduce freezing a lot. Besides, I also installed latest kernel in the Proxmox VE No-Subscription Repository.

Upgrading NixOS to Unstable Channel

Thu, 12 Jan 2023 00:00:00 +0800

As an Arch Linux user, I am used to using the lastest packages. Thus, I upgrade my NixOS to unstable channel.

1
2
3
4
5


# switch channel
sudo nix-channel --add https://nixos.org/channels/nixos-unstable nixos
sudo nixos-rebuild switch --upgrade
# show version
nixos-version

References:

Fixing File Permission Problem of Jellyfin on Arch Linux

Wed, 11 Jan 2023 00:00:00 +0800

This tutorial should work for other Linux distributions, but I only tested it on Arch Linux.

In order to add a directory to a Jellyfin library, Jellyfin needs to access the directory and all its parent directories. If you add ~/Videos to a library, Jellyfin fails to access it. Jellyfin runs as user jellyfin. Jellyfin can access ~/Videos (other::r-x) but can’t access its parent ~ (other::---).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


❯ getfacl ~/Videos
getfacl: Removing leading '/' from absolute path names
# file: home/cyrusyip/Videos
# owner: cyrusyip
# group: cyrusyip
user::rwx
group::r-x
mask::r-x
other::r-x

❯ getfacl ~
getfacl: Removing leading '/' from absolute path names
# file: home/cyrusyip
# owner: cyrusyip
# group: cyrusyip
user::rwx
group::---
mask::---
other::---

To fix it, grant Jellyfin execution permission for the home directory.

1

setfacl --modify user:jellyfin:--x ~

Now, Jellyfin can access not only ~/Videos but also other directories under ~, which is unsafe. We only want Jellyfin to access necessary directories. We’d better remove the permission for Jellyfin and create a dedicated directory for it.

1
2
3


setfacl --remove u:jellyfin ~
sudo mkdir /media
sudo chown $USER: /media

References:

Jellyfin#File_permission - ArchWiki (Actually, I wrote this section)

Removing Python 2 on Arch Linux

Fri, 23 Sep 2022 00:00:00 +0800

Python 2 was dropped from Arch Linux. It was lucky that there were only two python2 packages on my Arch.

1
2
3
4
5


❯ pacman -Qs python2
local/python2 2.7.18-5
 A high-level scripting language
local/python2-setuptools 2:44.1.1-2
 Easily download, build, install, upgrade, and uninstall Python packages

I removed them without hesitation.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


❯ sudo pacman -Rscn python2 python2-setuptools
checking dependencies...

Package (2) Old Version Net Change

python2 2.7.18-5 -76.84 MiB
python2-setuptools 2:44.1.1-2 -3.81 MiB

Total Removed Size: 80.65 MiB

:: Do you want to remove these packages? [Y/n] 
:: Processing package changes...
(1/2) removing python2-setuptools
(2/2) removing python2
:: Running post-transaction hooks...
(1/2) Arming ConditionNeedsUpdate...
(2/2) Refreshing PackageKit...

How to Paste over Selected Text without Overwriting the Unnamed Register in Vim

Mon, 08 Aug 2022 00:00:00 +0800

Summary: paste with P in visual mode.

It’s painful to paste over selected text in Vim, because the unnamed register is overwritten by the selected text. Thus, we can not paste the original yanked text twice.

If you have a file:

1
2


hello
kitty

You want to copy hello , paste it over kitty, and paste it again. You type these commands in Vim.

1
2
3
4
5


gg " move to the top
yy " copy current line
jV " move to the next line and select it
p " paste over the select line
p " paste again

You expect to get:

1
2
3


hello
hello
hello

However, you will get:

1
2
3


hello
hello
kitty

You should use P in visual mode, so the unnamed register is not changed. Put the original file content in Vim:

1
2


hello
kitty

Type ggyyjVPp, and you will get:

1
2
3


hello
hello
hello

You can read the help file by :h v_P for more information.

How to Ignore Kernel Upgrades on Arch Linux

Thu, 30 Jun 2022 00:00:00 +0800

Warning: Ignoring kernel upgrades makes the system more vulnerable due to the lack of the latest security fixes.

Ignore Temporarily #

Pacman’s --ignore option is used to ignore package upgrades. You can ignore multiple packages, separated by commas. This command upgrades the system but ignores three kernels.

1

sudo pacman -Syu --ignore linux,linux-header,linux-lts,linux-lts-headers,linux-zen,linux-zen-headers

Ignore Permanently #

Typing --ignore packages takes some time¹. Sometimes, you might forget to type it. You can permanently ignore kernel upgrades by adding this to /etc/pacman.conf in the [options] section.

1

IgnorePkg = linux linux-headers linux-lts linux-lts-headers linux-zen linux-zen-headers

Note that packages in IgnorePkg are separated by spaces. If you want to upgrade kernels after configuring IgnorePkg, install them explicitly:

1
2
3


sudo pacman -Syu --needed linux linux-headers linux-lts linux-lts-headers linux-zen linux-zen-headers
# or use brace expansion
sudo pacman -Syu --needed linux{,-lts,-zen}{,-headers}

About Partial Upgrades #

Partial upgrades are unsupported on Arch Linux. That means if you install or upgrade some package(s) without upgrading other packages, the system might break. For example, these commands might break the system.

1
2


pacman -Sy; pacman -S package
pacman -Sy package

I think ignoring kernel upgrades does not break the system because Linux software works with different versions of the kernel. Sometimes, I ignore kernel upgrades for a week and have no problems at all.

Why I Ignore Kernel Upgrades #

1
2


❯ head -n 1 /var/log/pacman.log
[2021-09-30T11:37:30+0000] [PACMAN] Running 'pacman -r /mnt -Sy --cachedir=/mnt/var/cache/pacman/pkg --noconfirm base base-devel linux linux-firmware dhcpcd iwd vim nano sudo bash-completion'

I have been using Arch Linux since September 30, 2021. I am a happy user most of the time. I love its update-to-date packages. The only thing annoying me is kernel upgrades. I installed three Linux kernels (stable, longterm, and zen kernel). I usually use zen kernel. It is updated frequently, about every 3 days. Upgrading the current kernel without rebooting breaks some functionalities such as USB and virtualization². Rebooting interrupts my work because I have to close the software and open it after rebooting. Upgrading the kernel is also much slower than upgrading other packages³. Thus, I dislike upgrading kernels. I would like to do it when I am free.

Acknowledgment #

I shared this post on Arch Linux subreddit. People corrected my wrong opinions. I learned a lot from the comments. Thank you.

References #

pacman - Skip package from being upgraded - ArchWiki

If you use fish or zsh-autosuggestions, that should not be a problem. ↩︎
This problem is caused by missing kernel modules and can be solved by kernel-modules-hook. ↩︎
Upgrade time can be reduced by uninstalling extra Dynamic Kernel Module Support (DKMS) modules and kernels. It also saves time installing packages by pacman -S <package> instead of pacman -Syu <package>. ↩︎

Cyrus Yip's blog

How to Enable Per-App Language Preferences for Every App

Upgrade Firmware for OnePlus Ace 3

Upgrade OnePlus Ace 3 from PixelOS 14 to PixelOS 15

Required files #

Steps #

How to install Google Play on OPPO / OnePlus / ColorOS

What Is HTTP

Introduction #

HTTP Request #

HTTP Request Methods #

HTTP Response #

HTTP Status Codes #

References #

What Is Ajax and How to Use it

Set Up a Test Server #

Interactive Demo of fetch(), XMLHttpRequest and Axios #

Reference #

Prototype and Inheritance in JavaScript

Prototype #

Prototype Chain / Inheritance #

Further Reading #

Test #

JavaScript Data Types

Undefined #

Null #

Boolean #

Number #

BigInt #

String #

Symbol #

Object #

References #

box-sizing in CSS: How Width and Height Are Calculated

Introduction to Cascade in CSS

Source order #

Specificity #

Specificity calculation #

Inline styles #

!important #

References #

Further reading #

Test #

Introduction to Inheritance in CSS

What Is Block Formatting Context (BFC) in CSS

What Is Clearfix in CSS

What Is Margin Collapsing in CSS

Add a Horizontal Scrollbar to a Table with CSS

Names of Punctuation Marks on a QWERTY Keyboard

Introduction to CSS BEM Naming Convention

Concepts and Usage #

HTML Demo #

CSS Demo #

SCSS Demo #

Alternative: Atomic CSS #

Further Reading #

Run Different Versions of Hugo without Installation via npx

Run different versions #

Install a specific version #

Clean cache #

Note about package-lock.json #

How to Change Network Configuration on Proxmox VE

How to Enable Call Recording on Xiaomi / Redmi / HyperOS / MIUI

HyperOS Guide #

MIUI Guide #

Create Top-Level 404 Page for a Multilingual Hugo Site

Reuse 404.html #

Create 404.md #

Create custom 404.html #

How to Fix Banking Apps / SafetyNet / Play Integrity on LineageOS without Root

Summary #

Explanation #

How to Install Google Play On Xiaomi / Redmi / HyperOS / MIUI

Guide #

Notice #

How to Install the Latest Microcode on Proxmox VE (Debian stable)

Installation #

Alternative installation #

Uninstallation #

Motivation #