Welcome to Cyrus Yip’s blog. It contains articles about Linux, programming, etc. I may write anything.
Upgrade Firmware for OnePlus Ace 3
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.
Upgrade OnePlus Ace 3 from PixelOS 14 to PixelOS 15
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
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.