Welcome to Cyrus Yip’s blog. It contains articles about Linux, programming, etc. I may write anything.
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.
What is Margin Collapsing in CSS
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):
Add a Horizontal Scrollbar to a Table with CSS
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>