Update 'index.html'

index.html

@@ -1,388 +1,746 @@
-<h1 id="byebyemouse">🐭 Bye Bye Mouse</h1>
-<p><marquee>
-Because real power users don’t double-click—they type :)
-</marquee></p>
-<p>Escape the tyranny of the GUI one command at a time! This repo is your golden ticket to slick shell tricks, terminal wizardry, and keyboard-fueled productivity. Unplug that mouse and watch your workflow sprint.
-</br></p>
-<h2 id="quicklinks">Quick Links</h2>
-<ol>
-<li><a href="#copy-a-file">copy a file</a></li>
-<li><a href="#duplicate-a-file">duplicate a file</a></li>
-<li><a href="#copy-a-directory">copy a directory</a></li>
-<li><a href="#duplicate-a-directory">duplicate a directory</a></li>
-<li><a href="#move-a-file">move a file</a></li>
-<li><a href="#rename-a-file">rename a file</a></li>
-<li><a href="#move-a-directory">move a directory</a></li>
-<li><a href="#rename-a-directory">rename a directory</a></li>
-<li><a href="#merge-directories">merge directories</a></li>
-<li><a href="#create-a-new-file">create a new file</a></li>
-<li><a href="#create-a-new-directory">create a new directory</a></li>
-<li><a href="#show-filedirectory-size">show file/directory size</a></li>
-<li><a href="#show-filedirectory-info">show file/directory info</a></li>
-<li><a href="#open-a-file-with-the-default-program">open a file with the default program</a></li>
-<li><a href="#open-a-file-in-any-application">open a file in any application</a></li>
-<li><a href="#zip-a-directory">zip a directory</a></li>
-<li><a href="#unzip-a-directory">unzip a directory</a></li>
-<li><a href="#peek-files-in-a-zip-file">peek files in a zip file</a></li>
-<li><a href="#remove-a-file">remove a file</a></li>
-<li><a href="#remove-a-directory">remove a directory</a></li>
-<li><a href="#remove-all-files-of-certain-criteria">remove all files of certain criteria</a></li>
-<li><a href="#list-directory-contents">list directory contents</a></li>
-<li><a href="#tree-view-a-directory-and-its-subdirectories">tree view a directory and its subdirectories</a></li>
-<li><a href="#find-a-stale-file">find a stale file</a></li>
-<li><a href="#show-a-calendar">show a calendar</a></li>
-<li><a href="#find-a-future-date">find a future date</a></li>
-<li><a href="#use-a-calculator">use a calculator</a></li>
-<li><a href="#force-quit-a-program">force quit a program</a></li>
-<li><a href="#check-server-response">check server response</a></li>
-<li><a href="#view-content-of-a-file">view content of a file</a></li>
-<li><a href="#search-for-a-text-in-a-file">search for a text in a file</a></li>
-<li><a href="#search-in-all-files-in-current-working-directory-quickly-entire-disk-in-less-than-15-minutes">search in all files in current working directory, quickly (entire disk in less than 15 minutes)</a></li>
-<li><a href="#view-an-image">view an image</a></li>
-<li><a href="#show-disk-size">show disk size</a></li>
-<li><a href="#check-cpu-usage-processes-and-ram">check cpu usage, processes and RAM</a></li>
-<li><a href="#know-whether-your-computer-is-under-load-and-whether-its-due-to-memory-or-cpu">know whether your computer is under load, and whether it's due to memory or CPU</a></li>
-<li><a href="#poweroff-or-reboot-your-computer">poweroff or reboot your computer</a></li>
-<li><a href="#locate-usb-drives">locate USB drives</a></li>
-<li><a href="#unmount-usb-drives">unmount USB drives</a></li>
-<li><a href="#format-usb-drives">format USB drives</a></li>
-<li><a href="#check-usb-format">check USB format</a></li>
-<li><a href="#run-command-on-all-files-of-a-directory">run command on all files of a directory</a></li>
-<li><a href="#check-network-connectivity-to-a-remote-address-and-port">check network connectivity to a remote address and port</a></li>
-<li><a href="#check-dns-config-of-a-domain">check DNS config of a domain</a></li>
-<li><a href="#check-the-ownership-and-registration-of-a-domain">check the ownership and registration of a domain</a></li>
-</ol>
-<!-- 1. [Quick tips](#quick-tips) -->
-<ol>
-<li><a href="#hotkeys">Hotkeys</a></li>
-<li><a href="#i-cant-remember-these-cryptic-commands">I can't remember these cryptic commands</a></li>
-</ol>
-<h2 id="copyafile">copy a file</h2>
-<p><strong>STOP DRAG AND DROPPING A FILE, OR CMD/CTRL + C, CMD/CTRL + V A FILE</strong> :-1:</p>
-<p>Copy <code>readme.txt</code> to the <code>documents</code> directory</p>
-<pre><code class="shell language-shell">$ cp readme.txt documents/
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="duplicateafile">duplicate a file</h2>
-<p><strong>STOP RIGHT CLICKING AND DUPLICATE A FILE</strong> :-1:</p>
-<pre><code class="shell language-shell">$ cp readme.txt readme.bak.txt
-</code></pre>
-<p>More advanced:</p>
-<pre><code class="shell language-shell">$ cp readme{,.bak}.txt
-# Note: learn how the {} works with touch foo{1,2,3}.txt and see what happens.
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="copyadirectory">copy a directory</h2>
-<p><strong>STOP DRAG AND DROPPING A DIRECTORY, OR CMD/CTRL + C, CMD/CTRL + V A DIRECTORY</strong> :-1:</p>
-<p>Copy <code>myMusic</code> directory to the <code>myMedia</code> directory</p>
-<pre><code class="shell language-shell">$ cp -a myMusic myMedia/
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>🐭 Bye Bye Mouse</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    :root {
+      --primary: #4f8cff;
+      --accent: #ffb86c;
+      --bg-light: #f7f8fa;
+      --bg-dark: #181a1b;
+      --text-light: #222;
+      --text-dark: #f7f8fa;
+      --card-light: #fff;
+      --card-dark: #23272e;
+      --border-light: #e0e0e0;
+      --border-dark: #333;
+      --code-bg-light: #f4f4f4;
+      --code-bg-dark: #23272e;
+      --kbd-bg-light: #eaeaea;
+      --kbd-bg-dark: #333;
+      --kbd-text-light: #222;
+      --kbd-text-dark: #f7f8fa;
+    }
+    html {
+      scroll-behavior: smooth;
+    }
+    body {
+      font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+      background: var(--bg-light);
+      color: var(--text-light);
+      margin: 0;
+      padding: 0;
+      transition: background 0.3s, color 0.3s;
+    }
+    body.dark {
+      background: var(--bg-dark);
+      color: var(--text-dark);
+    }
+    header {
+      background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
+      color: #fff;
+      padding: 2rem 0 1rem 0;
+      text-align: center;
+      position: relative;
+    }
+    .toggle-mode {
+      position: absolute;
+      top: 1.5rem;
+      right: 2rem;
+      background: rgba(255,255,255,0.15);
+      border: none;
+      border-radius: 2rem;
+      padding: 0.5rem 1.2rem;
+      color: #fff;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .toggle-mode:hover {
+      background: rgba(0,0,0,0.15);
+    }
+    h1 {
+      font-size: 2.5rem;
+      margin: 0 0 0.5rem 0;
+      letter-spacing: -1px;
+    }
+    .marquee {
+      font-size: 1.1rem;
+      color: #fff;
+      background: rgba(0,0,0,0.08);
+      padding: 0.5rem 0;
+      border-radius: 1rem;
+      margin: 0 auto 1rem auto;
+      max-width: 600px;
+      overflow: hidden;
+      white-space: nowrap;
+      box-sizing: border-box;
+      animation: marquee 15s linear infinite;
+    }
+    @keyframes marquee {
+      0% { text-indent: 100% }
+      100% { text-indent: -100% }
+    }
+    main {
+      max-width: 900px;
+      margin: 2rem auto;
+      padding: 2rem;
+      background: var(--card-light);
+      border-radius: 1.5rem;
+      box-shadow: 0 4px 32px 0 rgba(0,0,0,0.07);
+      border: 1px solid var(--border-light);
+      transition: background 0.3s, border 0.3s;
+    }
+    body.dark main {
+      background: var(--card-dark);
+      border: 1px solid var(--border-dark);
+    }
+    h2, h3 {
+      color: var(--primary);
+      margin-top: 2.5rem;
+      margin-bottom: 1rem;
+      font-weight: 700;
+    }
+    h3 {
+      font-size: 1.3rem;
+      margin-top: 2rem;
+    }
+    p {
+      line-height: 1.7;
+      margin: 1rem 0;
+    }
+    ul, ol {
+      margin: 1rem 0 1rem 2rem;
+    }
+    a {
+      color: var(--primary);
+      text-decoration: none;
+      transition: color 0.2s;
+    }
+    a:hover {
+      color: var(--accent);
+      text-decoration: underline;
+    }
+    .toc {
+      background: var(--code-bg-light);
+      border-radius: 1rem;
+      padding: 1.2rem 1.5rem;
+      margin-bottom: 2rem;
+      border: 1px solid var(--border-light);
+      font-size: 1.05rem;
+      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
+    }
+    body.dark .toc {
+      background: var(--code-bg-dark);
+      border: 1px solid var(--border-dark);
+    }
+    .toc ol {
+      margin: 0;
+      padding-left: 1.2rem;
+    }
+    .toc li {
+      margin-bottom: 0.3rem;
+    }
+    code, pre {
+      font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
+      background: var(--code-bg-light);
+      color: #2d2d2d;
+      border-radius: 0.5rem;
+      padding: 0.2em 0.5em;
+      font-size: 1em;
+      transition: background 0.3s, color 0.3s;
+    }
+    pre {
+      display: block;
+      padding: 1em;
+      margin: 1.2em 0;
+      overflow-x: auto;
+      background: var(--code-bg-light);
+      color: #2d2d2d;
+      border: 1px solid var(--border-light);
+    }
+    body.dark code, body.dark pre {
+      background: var(--code-bg-dark);
+      color: #f7f8fa;
+      border-color: var(--border-dark);
+    }
+    .note {
+      background: var(--accent);
+      color: #222;
+      padding: 0.7em 1em;
+      border-radius: 0.7em;
+      margin: 1em 0;
+      font-size: 1.05em;
+      font-weight: 500;
+      display: inline-block;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      margin: 2em 0;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 1.5em 0;
+      font-size: 1em;
+      background: var(--code-bg-light);
+      border-radius: 1em;
+      overflow: hidden;
+      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
+      transition: background 0.3s;
+    }
+    body.dark table {
+      background: var(--code-bg-dark);
+    }
+    th, td {
+      padding: 0.7em 1em;
+      border-bottom: 1px solid var(--border-light);
+      text-align: left;
+    }
+    body.dark th, body.dark td {
+      border-bottom: 1px solid var(--border-dark);
+    }
+    th {
+      background: var(--primary);
+      color: #fff;
+      font-weight: 700;
+    }
+    kbd {
+      background: var(--kbd-bg-light);
+      color: var(--kbd-text-light);
+      border-radius: 0.3em;
+      padding: 0.2em 0.5em;
+      font-size: 1em;
+      font-family: inherit;
+      border: 1px solid var(--border-light);
+      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
+      margin: 0 0.1em;
+      display: inline-block;
+      transition: background 0.3s, color 0.3s, border 0.3s;
+    }
+    body.dark kbd {
+      background: var(--kbd-bg-dark);
+      color: var(--kbd-text-dark);
+      border: 1px solid var(--border-dark);
+    }
+    .back-to-top {
+      display: inline-block;
+      margin-top: 1.5em;
+      font-size: 0.95em;
+      color: var(--primary);
+      text-decoration: none;
+      border-bottom: 1px dashed var(--primary);
+      transition: color 0.2s, border 0.2s;
+    }
+    .back-to-top:hover {
+      color: var(--accent);
+      border-bottom: 1px dashed var(--accent);
+    }
+    @media (max-width: 700px) {
+      main {
+        padding: 1rem;
+      }
+      .toc {
+        padding: 1rem;
+      }
+      header {
+        padding: 1.5rem 0 0.7rem 0;
+      }
+      .toggle-mode {
+        right: 1rem;
+        top: 1rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <button class="toggle-mode" id="toggleModeBtn" aria-label="Toggle light/dark mode">🌙 Dark</button>
+    <h1>🐭 Bye Bye Mouse</h1>
+    <div class="marquee">Because real power users don’t double-click—they type :)</div>
+    <p style="margin:0.5em 0 0 0; font-size:1.1em; font-weight:500;">Escape the tyranny of the GUI one command at a time! This repo is your golden ticket to slick shell tricks, terminal wizardry, and keyboard-fueled productivity. Unplug that mouse and watch your workflow sprint.</p>
+  </header>
+  <main>
+    <section class="toc" id="quick-links">
+      <h2 style="margin-top:0;">Quick Links</h2>
+      <ol>
+        <li><a href="#copy-a-file">copy a file</a></li>
+        <li><a href="#duplicate-a-file">duplicate a file</a></li>
+        <li><a href="#copy-a-directory">copy a directory</a></li>
+        <li><a href="#duplicate-a-directory">duplicate a directory</a></li>
+        <li><a href="#move-a-file">move a file</a></li>
+        <li><a href="#rename-a-file">rename a file</a></li>
+        <li><a href="#move-a-directory">move a directory</a></li>
+        <li><a href="#rename-a-directory">rename a directory</a></li>
+        <li><a href="#merge-directories">merge directories</a></li>
+        <li><a href="#create-a-new-file">create a new file</a></li>
+        <li><a href="#create-a-new-directory">create a new directory</a></li>
+        <li><a href="#show-filedirectory-size">show file/directory size</a></li>
+        <li><a href="#show-filedirectory-info">show file/directory info</a></li>
+        <li><a href="#open-a-file-with-the-default-program">open a file with the default program</a></li>
+        <li><a href="#open-a-file-in-any-application">open a file in any application</a></li>
+        <li><a href="#zip-a-directory">zip a directory</a></li>
+        <li><a href="#unzip-a-directory">unzip a directory</a></li>
+        <li><a href="#peek-files-in-a-zip-file">peek files in a zip file</a></li>
+        <li><a href="#remove-a-file">remove a file</a></li>
+        <li><a href="#remove-a-directory">remove a directory</a></li>
+        <li><a href="#remove-all-files-of-certain-criteria">remove all files of certain criteria</a></li>
+        <li><a href="#list-directory-contents">list directory contents</a></li>
+        <li><a href="#tree-view-a-directory-and-its-subdirectories">tree view a directory and its subdirectories</a></li>
+        <li><a href="#find-a-stale-file">find a stale file</a></li>
+        <li><a href="#show-a-calendar">show a calendar</a></li>
+        <li><a href="#find-a-future-date">find a future date</a></li>
+        <li><a href="#use-a-calculator">use a calculator</a></li>
+        <li><a href="#force-quit-a-program">force quit a program</a></li>
+        <li><a href="#check-server-response">check server response</a></li>
+        <li><a href="#view-content-of-a-file">view content of a file</a></li>
+        <li><a href="#search-for-a-text-in-a-file">search for a text in a file</a></li>
+        <li><a href="#search-in-all-files-in-current-working-directory-quickly-entire-disk-in-less-than-15-minutes">search in all files in current working directory, quickly (entire disk in less than 15 minutes)</a></li>
+        <li><a href="#view-an-image">view an image</a></li>
+        <li><a href="#show-disk-size">show disk size</a></li>
+        <li><a href="#check-cpu-usage-processes-and-ram">check cpu usage, processes and RAM</a></li>
+        <li><a href="#know-whether-your-computer-is-under-load-and-whether-its-due-to-memory-or-cpu">know whether your computer is under load, and whether it's due to memory or CPU</a></li>
+        <li><a href="#poweroff-or-reboot-your-computer">poweroff or reboot your computer</a></li>
+        <li><a href="#locate-usb-drives">locate USB drives</a></li>
+        <li><a href="#unmount-usb-drives">unmount USB drives</a></li>
+        <li><a href="#format-usb-drives">format USB drives</a></li>
+        <li><a href="#check-usb-format">check USB format</a></li>
+        <li><a href="#run-command-on-all-files-of-a-directory">run command on all files of a directory</a></li>
+        <li><a href="#check-network-connectivity-to-a-remote-address-and-port">check network connectivity to a remote address and port</a></li>
+        <li><a href="#check-dns-config-of-a-domain">check DNS config of a domain</a></li>
+        <li><a href="#check-the-ownership-and-registration-of-a-domain">check the ownership and registration of a domain</a></li>
+        <li><a href="#hotkeys">Hotkeys</a></li>
+        <li><a href="#i-cant-remember-these-cryptic-commands">I can't remember these cryptic commands</a></li>
+      </ol>
+    </section>
+
+    <!-- All sections below, one after another, with anchors for each -->
+    <section id="copy-a-file">
+      <h3>copy a file</h3>
+      <div class="note">STOP DRAG AND DROPPING A FILE, OR CMD/CTRL + C, CMD/CTRL + V A FILE 👎</div>
+      <p>Copy <code>readme.txt</code> to the <code>documents</code> directory</p>
+      <pre><code>$ cp readme.txt documents/</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="duplicate-a-file">
+      <h3>duplicate a file</h3>
+      <div class="note">STOP RIGHT CLICKING AND DUPLICATE A FILE 👎</div>
+      <pre><code>$ cp readme.txt readme.bak.txt</code></pre>
+      <p>More advanced:</p>
+      <pre><code>$ cp readme{,.bak}.txt
+# Note: learn how the {} works with touch foo{1,2,3}.txt and see what happens.</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="copy-a-directory">
+      <h3>copy a directory</h3>
+      <div class="note">STOP DRAG AND DROPPING A DIRECTORY, OR CMD/CTRL + C, CMD/CTRL + V A DIRECTORY 👎</div>
+      <p>Copy <code>myMusic</code> directory to the <code>myMedia</code> directory</p>
+      <pre><code>$ cp -a myMusic myMedia/
 # or
-$ cp -a myMusic/ myMedia/myMusic/
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="duplicateadirectory">duplicate a directory</h2>
-<p><strong>STOP RIGHT CLICKING AND DUPLICATE A DIRECTORY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ cp -a myMusic/ myMedia/
+$ cp -a myMusic/ myMedia/myMusic/</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="duplicate-a-directory">
+      <h3>duplicate a directory</h3>
+      <div class="note">STOP RIGHT CLICKING AND DUPLICATE A DIRECTORY 👎</div>
+      <pre><code>$ cp -a myMusic/ myMedia/
 # or if `myMedia` folder doesn't exist
-$ cp -a myMusic myMedia/
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="moveafile">move a file</h2>
-<p><strong>STOP DRAG AND DROPPING A FILE, OR CMD/CTRL + X, CMD/CTRL + V A FILE</strong> :-1:</p>
-<pre><code class="shell language-shell">$ mv readme.txt documents/
-</code></pre>
-<p><strong>Always</strong> use a trailing slash when moving files, <a href="http://unix.stackexchange.com/a/50533">for this reason</a>.</p>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="renameafile">rename a file</h2>
-<p><strong>STOP RIGHT CLICKING AND RENAME A FILE</strong> :-1:</p>
-<pre><code class="shell language-shell">$ mv readme.txt README.md
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="moveadirectory">move a directory</h2>
-<p><strong>STOP DRAG AND DROPPING A DIRECTORY, OR CMD/CTRL + X, CMD/CTRL + V A DIRECTORY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ mv myMedia myMusic/
+$ cp -a myMusic myMedia/</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="move-a-file">
+      <h3>move a file</h3>
+      <div class="note">STOP DRAG AND DROPPING A FILE, OR CMD/CTRL + X, CMD/CTRL + V A FILE 👎</div>
+      <pre><code>$ mv readme.txt documents/</code></pre>
+      <p><b>Always</b> use a trailing slash when moving files, <a href="http://unix.stackexchange.com/a/50533" target="_blank">for this reason</a>.</p>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="rename-a-file">
+      <h3>rename a file</h3>
+      <div class="note">STOP RIGHT CLICKING AND RENAME A FILE 👎</div>
+      <pre><code>$ mv readme.txt README.md</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="move-a-directory">
+      <h3>move a directory</h3>
+      <div class="note">STOP DRAG AND DROPPING A DIRECTORY, OR CMD/CTRL + X, CMD/CTRL + V A DIRECTORY 👎</div>
+      <pre><code>$ mv myMedia myMusic/
 # or
-$ mv myMedia/ myMusic/myMedia
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="renameadirectory">rename a directory</h2>
-<p><strong>STOP RIGHT CLICKING AND RENAME A DIRECTORY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ mv myMedia/ myMusic/
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="mergedirectories">merge directories</h2>
-<p><strong>STOP DRAG AND DROPPING TO MERGE DIRECTORIES</strong> :-1:</p>
-<pre><code class="shell language-shell">$ rsync -a /images/ /images2/    # note: may over-write files with the same name, so be careful!
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="createanewfile">create a new file</h2>
-<p><strong>STOP RIGHT CLICKING AND CREATE A NEW FILE</strong> :-1:</p>
-<pre><code class="shell language-shell">$ touch 'new file'    # updates the file's access and modification timestamp if it already exists
+$ mv myMedia/ myMusic/myMedia</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="rename-a-directory">
+      <h3>rename a directory</h3>
+      <div class="note">STOP RIGHT CLICKING AND RENAME A DIRECTORY 👎</div>
+      <pre><code>$ mv myMedia/ myMusic/</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="merge-directories">
+      <h3>merge directories</h3>
+      <div class="note">STOP DRAG AND DROPPING TO MERGE DIRECTORIES 👎</div>
+      <pre><code>$ rsync -a /images/ /images2/	# note: may over-write files with the same name, so be careful!</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="create-a-new-file">
+      <h3>create a new file</h3>
+      <div class="note">STOP RIGHT CLICKING AND CREATE A NEW FILE 👎</div>
+      <pre><code>$ touch 'new file'    # updates the file's access and modification timestamp if it already exists
 # or
-$ &gt; 'new file'        # note: erases the content if it already exists
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="createanewdirectory">create a new directory</h2>
-<p><strong>STOP RIGHT CLICKING AND CREATE A NEW DIRECTORY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ mkdir 'untitled folder'
+$ > 'new file'        # note: erases the content if it already exists</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="create-a-new-directory">
+      <h3>create a new directory</h3>
+      <div class="note">STOP RIGHT CLICKING AND CREATE A NEW DIRECTORY 👎</div>
+      <pre><code>$ mkdir 'untitled folder'
 # or
-$ mkdir -p 'path/may/not/exist/untitled folder'
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="showfiledirectorysize">show file/directory size</h2>
-<p><strong>STOP RIGHT CLICKING AND SHOW FILE/directory INFO</strong> :-1:</p>
-<pre><code class="shell language-shell">$ du -sh node_modules/
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="showfiledirectoryinfo">show file/directory info</h2>
-<p><strong>STOP RIGHT CLICKING AND SHOW FILE/DIRECTORY INFO</strong> :-1:</p>
-<pre><code class="shell language-shell">$ stat -x readme.md   # on macOS
-$ stat readme.md      # on Linux
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="openafilewiththedefaultprogram">open a file with the default program</h2>
-<p><strong>STOP DOUBLE CLICKING ON A FILE</strong> :-1:</p>
-<pre><code class="shell language-shell">$ xdg-open file   # on Linux
+$ mkdir -p 'path/may/not/exist/untitled folder'</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="show-filedirectory-size">
+      <h3>show file/directory size</h3>
+      <div class="note">STOP RIGHT CLICKING AND SHOW FILE/directory INFO 👎</div>
+      <pre><code>$ du -sh node_modules/</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="show-filedirectory-info">
+      <h3>show file/directory info</h3>
+      <div class="note">STOP RIGHT CLICKING AND SHOW FILE/DIRECTORY INFO 👎</div>
+      <pre><code>$ stat -x readme.md   # on macOS
+$ stat readme.md      # on Linux</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="open-a-file-with-the-default-program">
+      <h3>open a file with the default program</h3>
+      <div class="note">STOP DOUBLE CLICKING ON A FILE 👎</div>
+      <pre><code>$ xdg-open file   # on Linux
 $ open file       # on MacOS
-$ start file      # on Windows
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="openafileinanyapplication">open a file in any application</h2>
-<p><strong>STOP RIGHT CLICKING AND OPEN WITH</strong> :-1:</p>
-<pre><code class="shell language-shell">$ open -a appName file
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="zipadirectory">zip a directory</h2>
-<p><strong>STOP RIGHT CLICKING AND COMPRESS DIRECTORY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ zip -r archive_name.zip folder_to_compress
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="unzipadirectory">unzip a directory</h2>
-<p><strong>STOP RIGHT CLICKING AND UNCOMPRESS DIRECTORY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ unzip archive_name.zip
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="decompressfilesofanyformat">decompress files of any format</h2>
-<p><strong>STOP RIGHT CLICKING AND UNCOMPRESS DIRECTORY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ unar archive_name.zip
-$ unar archive_name.7z
-$ unar archive_name.rar
-$ unar archive_name.ISO
-$ unar archive_name.tar.gz
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="peekfilesinazipfile">peek files in a zip file</h2>
-<p><strong>STOP USING WinRAR</strong> :-1:</p>
-<pre><code class="shell language-shell">$ zipinfo archive_name.zip
+$ start file      # on Windows</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="open-a-file-in-any-application">
+      <h3>open a file in any application</h3>
+      <div class="note">STOP RIGHT CLICKING AND OPEN WITH 👎</div>
+      <pre><code>$ open -a appName file</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="zip-a-directory">
+      <h3>zip a directory</h3>
+      <div class="note">STOP RIGHT CLICKING AND COMPRESS DIRECTORY 👎</div>
+      <pre><code>$ zip -r archive_name.zip folder_to_compress</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="unzip-a-directory">
+      <h3>unzip a directory</h3>
+      <div class="note">STOP RIGHT CLICKING AND UNCOMPRESS DIRECTORY 👎</div>
+      <pre><code>$ unzip archive_name.zip</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="peek-files-in-a-zip-file">
+      <h3>peek files in a zip file</h3>
+      <div class="note">STOP USING WinRAR 👎</div>
+      <pre><code>$ zipinfo archive_name.zip
 # or
-$ unzip -l archive_name.zip
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="peekfilesinacompressfileofanyformat">peek files in a compress file of any format</h2>
-<p><strong>STOP USING WinRAR</strong> :-1:</p>
-<pre><code class="shell language-shell">$ lsar -l archive_name.zip
-$ lsar -l archive_name.7z
-$ lsar -l archive_name.ISO
-$ lsar -l archive_name.rar
-$ lsar -l archive_name.tar.gz
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="removeafile">remove a file</h2>
-<p><strong>STOP RIGHT CLICKING AND DELETE A FILE PERMANENTLY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ rm my_useless_file
-</code></pre>
-<p><strong>IMPORTANT</strong>: The <code>rm</code> command deletes <code>my_useless_file</code> permanently, which is equivalent to move <code>my_useless_file</code> to Recycle Bin and hit Empty Recycle Bin.</p>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="removeadirectory">remove a directory</h2>
-<p><strong>STOP RIGHT CLICKING AND DELETE A DIRECTORY PERMANENTLY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ rm -r my_useless_folder
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="removeallfilesofcertaincriteria">remove all files of certain criteria</h2>
-<pre><code class="shell language-shell">$ find . -name "*.bak" -type f -delete
-</code></pre>
-<p><strong>IMPORTANT</strong>: run <code>find . -name "*.bak" -type f</code> first to see exactly which files you will remove.</p>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="listdirectorycontents">list directory contents</h2>
-<p><strong>STOP OPENING YOUR FINDER OR FILE EXPLORER</strong> :-1:</p>
-<pre><code class="shell language-shell">$ ls my_folder        # Simple
+$ unzip -l archive_name.zip</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="remove-a-file">
+      <h3>remove a file</h3>
+      <div class="note">STOP RIGHT CLICKING AND DELETE A FILE PERMANENTLY 👎</div>
+      <pre><code>$ rm my_useless_file</code></pre>
+      <p><b>IMPORTANT</b>: The <code>rm</code> command deletes <code>my_useless_file</code> permanently, which is equivalent to move <code>my_useless_file</code> to Recycle Bin and hit Empty Recycle Bin.</p>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="remove-a-directory">
+      <h3>remove a directory</h3>
+      <div class="note">STOP RIGHT CLICKING AND DELETE A DIRECTORY PERMANENTLY 👎</div>
+      <pre><code>$ rm -r my_useless_folder</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="remove-all-files-of-certain-criteria">
+      <h3>remove all files of certain criteria</h3>
+      <pre><code>$ find . -name "*.bak" -type f -delete</code></pre>
+      <p><b>IMPORTANT</b>: run <code>find . -name "*.bak" -type f</code> first to see exactly which files you will remove.</p>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="list-directory-contents">
+      <h3>list directory contents</h3>
+      <div class="note">STOP OPENING YOUR FINDER OR FILE EXPLORER 👎</div>
+      <pre><code>$ ls my_folder        # Simple
 $ ls -la my_folder    # -l: show in list format. -a: show all files, including hidden. -la combines those options.
-$ ls -ltrha my_folder # -r: reverse output. -t: sort by time (modified). -h: output human-readable sizes.
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="treeviewadirectoryanditssubdirectories">tree view a directory and its subdirectories</h2>
-<p><strong>STOP OPENING YOUR FINDER OR FILE EXPLORER</strong> :-1:</p>
-<pre><code class="shell language-shell">$ tree                                                        # on Linux
+$ ls -ltrha my_folder # -r: reverse output. -t: sort by time (modified). -h: output human-readable sizes.</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="tree-view-a-directory-and-its-subdirectories">
+      <h3>tree view a directory and its subdirectories</h3>
+      <div class="note">STOP OPENING YOUR FINDER OR FILE EXPLORER 👎</div>
+      <pre><code>$ tree                                                        # on Linux
 $ find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'      # on MacOS
 # Note: install homebrew (https://brew.sh) to be able to use (some) Linux utilities such as tree.
-# brew install tree
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="findastalefile">find a stale file</h2>
-<p><strong>STOP USING YOUR FILE EXPLORER TO FIND A FILE</strong> :-1:</p>
-<p>Find all files modified more than 5 days ago</p>
-<pre><code class="shell language-shell">$ find my_folder -mtime +5
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="showacalendar">show a calendar</h2>
-<p><strong>STOP LOOKING UP WHAT THIS MONTH LOOKS LIKE BY CALENDAR WIDGETS</strong> :-1:</p>
-<p>Display a text calendar</p>
-<pre><code class="shell language-shell">$ cal
-</code></pre>
-<p>Display selected month and year calendar</p>
-<pre><code class="shell language-shell">$ cal 11 2018
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="findafuturedate">find a future date</h2>
-<p><strong>STOP USING WEBAPPS TO CALCULATE FUTURE DATES</strong> :-1:</p>
-<p>What is today's date?</p>
-<pre><code class="shell language-shell">$ date +%m/%d/%Y
-</code></pre>
-<p>What about a week from now?</p>
-<pre><code class="shell language-shell">$ date -d "+7 days"                                           # on Linux
-$ date -j -v+7d                                               # on MacOS
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="useacalculator">use a calculator</h2>
-<p><strong>STOP USING CALCULATOR WIDGET</strong> :-1:</p>
-<pre><code class="shell language-shell">$ bc -l
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="forcequitaprogram">force quit a program</h2>
-<p><strong>STOP CTRL + ALT + DELETE and choose the program to kill</strong> :-1:</p>
-<pre><code class="shell language-shell">$ killall -9 program_name
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="checkserverresponse">check server response</h2>
-<p><strong>STOP OPENING A BROWSER</strong> :-1:</p>
-<pre><code class="shell language-shell">$ curl -i rbtreevi.web.app
-# curl's -i (--include) option includes HTTP response headers in its output.
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="viewcontentofafile">view content of a file</h2>
-<p><strong>STOP DOUBLE CLICKING A FILE</strong> :-1:</p>
-<pre><code class="shell language-shell">$ cat apps/settings.py
+# brew install tree</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="find-a-stale-file">
+      <h3>find a stale file</h3>
+      <div class="note">STOP USING YOUR FILE EXPLORER TO FIND A FILE 👎</div>
+      <p>Find all files modified more than 5 days ago</p>
+      <pre><code>$ find my_folder -mtime +5</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="show-a-calendar">
+      <h3>show a calendar</h3>
+      <div class="note">STOP LOOKING UP WHAT THIS MONTH LOOKS LIKE BY CALENDAR WIDGETS 👎</div>
+      <p>Display a text calendar</p>
+      <pre><code>$ cal</code></pre>
+      <p>Display selected month and year calendar</p>
+      <pre><code>$ cal 11 2018</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="find-a-future-date">
+      <h3>find a future date</h3>
+      <div class="note">STOP USING WEBAPPS TO CALCULATE FUTURE DATES 👎</div>
+      <p>What is today's date?</p>
+      <pre><code>$ date +%m/%d/%Y</code></pre>
+      <p>What about a week from now?</p>
+      <pre><code>$ date -d "+7 days"                                           # on Linux
+$ date -j -v+7d                                               # on MacOS</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="use-a-calculator">
+      <h3>use a calculator</h3>
+      <div class="note">STOP USING CALCULATOR WIDGET 👎</div>
+      <pre><code>$ bc -l</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="force-quit-a-program">
+      <h3>force quit a program</h3>
+      <div class="note">STOP CTRL + ALT + DELETE and choose the program to kill 👎</div>
+      <pre><code>$ killall -9 program_name</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="check-server-response">
+      <h3>check server response</h3>
+      <div class="note">STOP OPENING A BROWSER 👎</div>
+      <pre><code>$ curl -i rbtreevi.web.app
+# curl's -i (--include) option includes HTTP response headers in its output.</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="view-content-of-a-file">
+      <h3>view content of a file</h3>
+      <div class="note">STOP DOUBLE CLICKING A FILE 👎</div>
+      <pre><code>$ cat apps/settings.py
 # if the file is too big to fit on one page, you can use a 'pager' (less) which shows you one page at a time.
-$ less apps/settings.py
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="searchforatextinafile">search for a text in a file</h2>
-<p><strong>STOP CMD/CTRL + F IN A FILE</strong> :-1:</p>
-<pre><code class="shell language-shell">$ grep -i "Query" file.txt
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="searchinallfilesincurrentworkingdirectoryquicklyentirediskinlessthan15minutes">search in all files in current working directory, quickly (entire disk in less than 15 minutes)</h2>
-<p><strong>STOP CMD/CTRL + F IN A DIRECTORY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ ripgrep -i "Query"
-# brew install ripgrep
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="viewanimage">view an image</h2>
-<p><strong>STOP USING PREVIEW</strong> :-1:</p>
-<pre><code class="shell language-shell">$ imgcat image.png
-# Note: requires iTerm2 terminal.
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="showdisksize">show disk size</h2>
-<p><strong>STOP RIGHT CLICKING DISK ICON OR OPENING DISK UTILITY</strong> :-1:</p>
-<pre><code class="shell language-shell">$ df -h
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="checkcpuusageprocessesandram">check cpu usage, processes and RAM</h2>
-<p><strong>STOP OPENING YOUR ACTIVITY MONITOR OR TASK MANAGER</strong> :-1:</p>
-<pre><code class="shell language-shell">$ top
-</code></pre>
-<p>if you want some more details:</p>
-<pre><code class="shell language-shell">$ htop
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="knowwhetheryourcomputerisunderloadandwhetheritsduetomemoryorcpu">know whether your computer is under load, and whether it's due to memory or CPU</h2>
-<pre><code class="shell language-shell">$ glances
+$ less apps/settings.py</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="search-for-a-text-in-a-file">
+      <h3>search for a text in a file</h3>
+      <div class="note">STOP CMD/CTRL + F IN A FILE 👎</div>
+      <pre><code>$ grep -i "Query" file.txt</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="search-in-all-files-in-current-working-directory-quickly-entire-disk-in-less-than-15-minutes">
+      <h3>search in all files in current working directory, quickly (entire disk in less than 15 minutes)</h3>
+      <div class="note">STOP CMD/CTRL + F IN A DIRECTORY 👎</div>
+      <pre><code>$ ripgrep -i "Query"
+# brew install ripgrep</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="view-an-image">
+      <h3>view an image</h3>
+      <div class="note">STOP USING PREVIEW 👎</div>
+      <pre><code>$ imgcat image.png
+# Note: requires iTerm2 terminal.</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="show-disk-size">
+      <h3>show disk size</h3>
+      <div class="note">STOP RIGHT CLICKING DISK ICON OR OPENING DISK UTILITY 👎</div>
+      <pre><code>$ df -h</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="check-cpu-usage-processes-and-ram">
+      <h3>check cpu usage, processes and RAM</h3>
+      <div class="note">STOP OPENING YOUR ACTIVITY MONITOR OR TASK MANAGER 👎</div>
+      <pre><code>$ top</code></pre>
+      <p>if you want some more details:</p>
+      <pre><code>$ htop</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="know-whether-your-computer-is-under-load-and-whether-its-due-to-memory-or-cpu">
+      <h3>know whether your computer is under load, and whether it's due to memory or CPU</h3>
+      <pre><code>$ glances
 # brew install glances
-# pip install --user 'glances[all]'
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="powerofforrebootyourcomputer">poweroff or reboot your computer</h2>
-<p>This can be useful when you're patching a server that is accessed via SSH and you don't have a GUI.</p>
-<pre><code class="shell language-shell"># poweroff
+# pip install --user 'glances[all]'</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="poweroff-or-reboot-your-computer">
+      <h3>poweroff or reboot your computer</h3>
+      <p>This can be useful when you're patching a server that is accessed via SSH and you don't have a GUI.</p>
+      <pre><code># poweroff
 $ sudo shutdown -h now
 # reboot
-$ sudo shutdown -r now
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="locateusbdrives">locate USB drives</h2>
-<pre><code class="shell language-shell">$ df
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="unmountusbdrives">unmount USB drives</h2>
-<pre><code class="shell language-shell">$ sudo umount /dev/sdb1
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="formatusbdrives">format USB drives</h2>
-<pre><code class="shell language-shell"># FAT32
+$ sudo shutdown -r now</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="locate-usb-drives">
+      <h3>locate USB drives</h3>
+      <pre><code>$ df</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="unmount-usb-drives">
+      <h3>unmount USB drives</h3>
+      <pre><code>$ sudo umount /dev/sdb1</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="format-usb-drives">
+      <h3>format USB drives</h3>
+      <pre><code># FAT32
 $ sudo mkfs.vfat /dev/sdb1
 # NTFS
 $ sudo mkfs.ntfs /dev/sdb1
 # exFAT
-$ sudo mkfs.exfat /dev/sdb1
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="checkusbformat">check USB format</h2>
-<pre><code class="shell language-shell">$ sudo fsck /dev/sdb1
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="runcommandonallfilesofadirectory">run command on all files of a directory</h2>
-<p><strong>STOP CLICKING THE FILES ONE BY ONE</strong> :-1:</p>
-<pre><code class="shell language-shell">$ for FILE in *; do echo $FILE; done
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="checknetworkconnectivitytoaremoteaddressandport">check network connectivity to a remote address and port</h2>
-<p><strong>STOP USING NETWORK UTILITY</strong></p>
-<pre><code class="shell language-shell">$ nc -vz www.google.com 443
-$ nc -vz 1.1.1.1 53
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="checkdnsconfigofadomain">check DNS config of a domain</h2>
-<p><strong>STOP USING NETWORK UTILITY</strong></p>
-<pre><code class="shell language-shell">$ dig www.google.com
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="checktheownershipandregistrationofadomain">check the ownership and registration of a domain</h2>
-<p><strong>STOP USING NETWORK UTILITY AND THE WEBSITE OF DOMAIN REGISTRATION PROVIDERS</strong></p>
-<pre><code class="shell language-shell">$ whois www.google.com
-</code></pre>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
-<!-- ## Quick tips
-
-![CLI tips](./cli_tips.jpg)
-
-[Go to table of contents 🔼](#quick-links) -->
-<h2 id="hotkeys">Hotkeys</h2>
-<p>| Hotkey | Description |
-|----------|-------------|
-| <kbd>Ctrl</kbd>+<kbd>A</kbd> | Go to the beginning of the line you are currently typing on |
-| <kbd>Ctrl</kbd>+<kbd>E</kbd> | Go to the end of the line you are currently typing on |
-| <kbd>Ctrl</kbd>+<kbd>L</kbd> | Clears the Screen, similar to the clear command |
-| <kbd>Ctrl</kbd>+<kbd>U</kbd> | Clears the line before the cursor position. If you are at the end of the line, clears the entire line. |
-| <kbd>Ctrl</kbd>+<kbd>H</kbd> | Same as backspace |
-| <kbd>Ctrl</kbd>+<kbd>R</kbd> | Lets you search through previously used commands |
-| <kbd>Ctrl</kbd>+<kbd>C</kbd> | Kill whatever you are running |
-| <kbd>Ctrl</kbd>+<kbd>D</kbd> | Exit the current shell |
-| <kbd>Ctrl</kbd>+<kbd>Z</kbd> | Puts whatever you are running into a suspended background process. fg restores it. |
-| <kbd>Ctrl</kbd>+<kbd>W</kbd> | Delete the word before the cursor |
-| <kbd>Ctrl</kbd>+<kbd>K</kbd> | Clear the line after the cursor |
-| <kbd>Ctrl</kbd>+<kbd>T</kbd> | Swap the last two characters before the cursor |
-| <kbd>Ctrl</kbd>+<kbd>F</kbd> | Move cursor forward one character |
-| <kbd>Ctrl</kbd>+<kbd>B</kbd> | Move cursor backward one character |
-| <kbd>Esc</kbd>+<kbd>T</kbd> | Swap the last two words before the cursor |
-| <kbd>Alt</kbd>+<kbd>T</kbd> | Same as <kbd>Esc</kbd> + <kbd>T</kbd> |
-| <kbd>Alt</kbd>+<kbd>F</kbd> | Move cursor forward one word on the current line |
-| <kbd>Alt</kbd>+<kbd>B</kbd> | Move cursor backward one word on the current line |
-| <kbd>Esc</kbd>+<kbd>F</kbd> | Same as <kbd>Alt</kbd> + <kbd>F</kbd> |
-| <kbd>Esc</kbd>+<kbd>B</kbd> | Same as <kbd>Alt</kbd> + <kbd>B</kbd> |
-| <kbd>Alt</kbd>+<kbd>.</kbd> | Paste the last word of the most recently command |
-| <kbd>Tab</kbd> | Auto-complete files and directory names |
-<a href="#quick-links">Go to table of contents 🔼</a></p>
-<h2 id="icantrememberthesecrypticcommands">I can't remember these cryptic commands</h2>
-<p>You can always google or <code>man</code> the commands you are not familiar with. Or, checkout <a href="https://github.com/tldr-pages/tldr">tldr</a>, a collection of simplified and community-driven man pages.</p>
-<p><a href="#quick-links">Go to table of contents 🔼</a></p>
+$ sudo mkfs.exfat /dev/sdb1</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="check-usb-format">
+      <h3>check USB format</h3>
+      <pre><code>$ sudo fsck /dev/sdb1</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="run-command-on-all-files-of-a-directory">
+      <h3>run command on all files of a directory</h3>
+      <div class="note">STOP CLICKING THE FILES ONE BY ONE 👎</div>
+      <pre><code>$ for FILE in *; do echo $FILE; done</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="check-network-connectivity-to-a-remote-address-and-port">
+      <h3>check network connectivity to a remote address and port</h3>
+      <div class="note">STOP USING NETWORK UTILITY</div>
+      <pre><code>$ nc -vz www.google.com 443
+$ nc -vz 1.1.1.1 53</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="check-dns-config-of-a-domain">
+      <h3>check DNS config of a domain</h3>
+      <div class="note">STOP USING NETWORK UTILITY</div>
+      <pre><code>$ dig www.google.com</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="check-the-ownership-and-registration-of-a-domain">
+      <h3>check the ownership and registration of a domain</h3>
+      <div class="note">STOP USING NETWORK UTILITY AND THE WEBSITE OF DOMAIN REGISTRATION PROVIDERS</div>
+      <pre><code>$ whois www.google.com</code></pre>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="hotkeys">
+      <h3>Hotkeys</h3>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Hotkey</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>A</kbd></td><td>Go to the beginning of the line you are currently typing on</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>E</kbd></td><td>Go to the end of the line you are currently typing on</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>L</kbd></td><td>Clears the Screen, similar to the clear command</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>U</kbd></td><td>Clears the line before the cursor position. If you are at the end of the line, clears the entire line.</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>H</kbd></td><td>Same as backspace</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>R</kbd></td><td>Lets you search through previously used commands</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>C</kbd></td><td>Kill whatever you are running</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>D</kbd></td><td>Exit the current shell</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>Z</kbd></td><td>Puts whatever you are running into a suspended background process. fg restores it.</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>W</kbd></td><td>Delete the word before the cursor</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>K</kbd></td><td>Clear the line after the cursor</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>T</kbd></td><td>Swap the last two characters before the cursor</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>F</kbd></td><td>Move cursor forward one character</td></tr>
+            <tr><td><kbd>Ctrl</kbd>+<kbd>B</kbd></td><td>Move cursor backward one character</td></tr>
+            <tr><td><kbd>Esc</kbd>+<kbd>T</kbd></td><td>Swap the last two words before the cursor</td></tr>
+            <tr><td><kbd>Alt</kbd>+<kbd>T</kbd></td><td>Same as <kbd>Esc</kbd> + <kbd>T</kbd></td></tr>
+            <tr><td><kbd>Alt</kbd>+<kbd>F</kbd></td><td>Move cursor forward one word on the current line</td></tr>
+            <tr><td><kbd>Alt</kbd>+<kbd>B</kbd></td><td>Move cursor backward one word on the current line</td></tr>
+            <tr><td><kbd>Esc</kbd>+<kbd>F</kbd></td><td>Same as <kbd>Alt</kbd> + <kbd>F</kbd></td></tr>
+            <tr><td><kbd>Esc</kbd>+<kbd>B</kbd></td><td>Same as <kbd>Alt</kbd> + <kbd>B</kbd></td></tr>
+            <tr><td><kbd>Alt</kbd>+<kbd>.</kbd></td><td>Paste the last word of the most recently command</td></tr>
+            <tr><td><kbd>Tab</kbd></td><td>Auto-complete files and directory names</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+
+    <section id="i-cant-remember-these-cryptic-commands">
+      <h3>I can't remember these cryptic commands</h3>
+      <p>You can always google or <code>man</code> the commands you are not familiar with. Or, checkout <a href="https://github.com/tldr-pages/tldr" target="_blank">tldr</a>, a collection of simplified and community-driven man pages.</p>
+      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
+    </section>
+  </main>
+  <script>
+    // Light/Dark mode toggle
+    const btn = document.getElementById('toggleModeBtn');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    function setMode(dark) {
+      document.body.classList.toggle('dark', dark);
+      btn.textContent = dark ? '☀️ Light' : '🌙 Dark';
+      localStorage.setItem('theme', dark ? 'dark' : 'light');
+    }
+    // On load
+    (() => {
+      const saved = localStorage.getItem('theme');
+      if (saved) setMode(saved === 'dark');
+      else setMode(prefersDark);
+    })();
+    btn.onclick = () => setMode(!document.body.classList.contains('dark'));
+  </script>
+</body>
+</html>