Welcome to Cyrus Yip’s blog. It contains articles about Linux, programming, etc. I may write anything.
How to install Google Play on OPPO / OnePlus / ColorOS
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
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/):
What Is Ajax and How to Use it
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.
Prototype and Inheritance in JavaScript
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.
JavaScript Data Types
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.
box-sizing in CSS: How Width and Height Are Calculated
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 modelBy 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.
Introduction to Cascade in CSS
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 type class 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.
Introduction to Inheritance in CSS
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.
What Is Block Formatting Context (BFC) in CSS
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; } Further reading:
What Is Clearfix in CSS
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.