Welcome to Cyrus Yip’s blog. It contains articles about Linux, programming, etc. I may write anything.
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>
Names of Punctuation Marks on a QWERTY Keyboard
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
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.
Run Different Versions of Hugo without Installation via npx
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 [email protected] npx [email protected] version npx [email protected] server # Hugo v0.99.1 npx [email protected] 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.
How to Change Network Configuration on Proxmox VE
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
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”
Create Top-Level 404 Page for a Multilingual Hugo Site
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.
How to Fix Banking Apps / SafetyNet / Play Integrity on LineageOS without Root
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.