aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAkshay <[email protected]>2020-04-16 09:10:50 +0100
committerAkshay <[email protected]>2020-04-16 09:10:50 +0100
commit2a778912251874f9b808f82e61244efcd12210aa (patch)
tree72cd692749c36f068fe22a32ede51a88a65bc759
parentd71a288d944959057064d64ce03cad759a42ba06 (diff)
rerender with pandoc
Diffstat
-rw-r--r--docs/posts/WPA_woes/index.html68
-rw-r--r--docs/posts/bash_harder_with_vim/index.html92
-rw-r--r--docs/posts/bye_bye_BDFs/index.html51
-rw-r--r--docs/posts/call_to_ARMs/index.html115
-rw-r--r--docs/posts/color_conundrum/index.html66
-rw-r--r--docs/posts/font_size_fallacies/index.html131
-rw-r--r--docs/posts/get_better_at_yanking_and_putting_in_vim/index.html49
-rw-r--r--docs/posts/hold_position!/index.html47
-rw-r--r--docs/posts/my_setup/index.html54
-rw-r--r--docs/posts/onivim_sucks/index.html54
-rw-r--r--docs/posts/pixel_art_in_GIMP/index.html197
-rw-r--r--docs/posts/rapid_refactoring_with_vim/index.html312
-rw-r--r--docs/posts/static_sites_with_bash/index.html148
-rw-r--r--docs/posts/termux_tandem/index.html72
14 files changed, 667 insertions, 789 deletions
diff --git a/docs/posts/WPA_woes/index.html b/docs/posts/WPA_woes/index.html
index e329df6..f3fcfcf 100644
--- a/docs/posts/WPA_woes/index.html
+++ b/docs/posts/WPA_woes/index.html
@@ -37,48 +37,52 @@
37 WPA Woes 37 WPA Woes
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>I finally got around to installing Void GNU&#47;Linux on my main 40 <!DOCTYPE html>
41computer. Rolling release, non-systemd, need I say more?</p> 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42 42<head>
43<p>As with all GNU&#47;Linux distributions, wireless networks had 43 <meta charset="utf-8" />
44me in a fix. If you can see this post, it means I&#39;ve managed 44 <meta name="generator" content="pandoc" />
45to get online. It turns out, <code>wpa_supplicant</code> was detecting the 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46wrong interface by default (does it ever select the right 46 <title>WPA_woes</title>
47one?). Let us fix that:</p> 47 <style>
48 48 code{white-space: pre-wrap;}
49<pre><code>$ sudo rm -r &#47;var&#47;service&#47;wpa_supplicant 49 span.smallcaps{font-variant: small-caps;}
50$ sudo killall dhcpcd 50 span.underline{text-decoration: underline;}
51</code></pre> 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 ul.task-list{list-style: none;}
54 </style>
55 <!--[if lt IE 9]>
56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57 <![endif]-->
58</head>
59<body>
60<p>I finally got around to installing Void GNU/Linux on my main computer. Rolling release, non-systemd, need I say more?</p>
61<p>As with all GNU/Linux distributions, wireless networks had me in a fix. If you can see this post, it means I’ve managed to get online. It turns out, <code>wpa_supplicant</code> was detecting the wrong interface by default (does it ever select the right one?). Let us fix that:</p>
62<pre><code>$ sudo rm -r /var/service/wpa_supplicant
63$ sudo killall dhcpcd</code></pre>
53<p>What is the right interface though?</p> 64<p>What is the right interface though?</p>
54
55<pre><code>$ iw dev 65<pre><code>$ iw dev
56 ... 66 ...
57 Interface wlp2s0 67 Interface wlp2s0
58 ... 68 ...</code></pre>
59</code></pre> 69<p>Aha! Let us run <code>wpa_supplicant</code> on that interface, as a background process:</p>
60 70<pre><code>$ sudo wpa_supplicant -B -i wlp2s0 -c /etc/wpa_supplicant/wpa_supplicant.conf
61<p>Aha! Let us run <code>wpa_supplicant</code> on that interface, as a
62background process:</p>
63
64<pre><code>$ sudo wpa_supplicant -B -i wlp2s0 -c &#47;etc&#47;wpa_supplicant&#47;wpa_supplicant.conf
65$ sudo dhcpcd -B wlp2s0 71$ sudo dhcpcd -B wlp2s0
66$ ping google.com 72$ ping google.com
67PING ... 73PING ...</code></pre>
68</code></pre>
69
70<p>Yay! Make those changes perpetual by enabling the service:</p> 74<p>Yay! Make those changes perpetual by enabling the service:</p>
71
72<pre><code>------------------------------------------------------ 75<pre><code>------------------------------------------------------
73# Add these to &#47;etc&#47;wpa_supplicant&#47;wpa_supplicant.conf 76# Add these to /etc/wpa_supplicant/wpa_supplicant.conf
74OPTS=&#34;-B&#34; 77OPTS=&quot;-B&quot;
75WPA_INTERFACE=&#34;wlp2s0&#34; 78WPA_INTERFACE=&quot;wlp2s0&quot;
76------------------------------------------------------ 79------------------------------------------------------
77$ sudo ln -s &#47;etc&#47;sv&#47;wpa_supplicant &#47;var&#47;service&#47; 80$ sudo ln -s /etc/sv/wpa_supplicant /var/service/
78$ sudo ln -s &#47;etc&#47;sv&#47;dhcpcd &#47;var&#47;service&#47; 81$ sudo ln -s /etc/sv/dhcpcd /var/service/
79$ sudo sv restart wpa_supplicant 82$ sudo sv restart wpa_supplicant
80$ sudo sv restart dhcpcd 83$ sudo sv restart dhcpcd</code></pre>
81</code></pre> 84</body>
85</html>
82 86
83 </div> 87 </div>
84 88
diff --git a/docs/posts/bash_harder_with_vim/index.html b/docs/posts/bash_harder_with_vim/index.html
index 396fcfa..17c066a 100644
--- a/docs/posts/bash_harder_with_vim/index.html
+++ b/docs/posts/bash_harder_with_vim/index.html
@@ -37,60 +37,62 @@
37 Bash Harder With Vim 37 Bash Harder With Vim
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>Bash is tricky, don&#39;t let your editor get in your way. Here&#39;s a couple of neat 40 <!DOCTYPE html>
41additions you could make to your <code>vimrc</code> for a better shell programming 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42experience.</p> 42<head>
43 43 <meta charset="utf-8" />
44<h3 id="Man%20pages%20inside%20vim">Man pages inside vim</h3> 44 <meta name="generator" content="pandoc" />
45 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46<p>Source this script to get started: </p> 46 <title>bash_harder_with_vim</title>
47 47 <style>
48<pre><code>runtime ftplugin&#47;man.vim 48 code{white-space: pre-wrap;}
49</code></pre> 49 span.smallcaps{font-variant: small-caps;}
50 50 span.underline{text-decoration: underline;}
51<p>Now, you can open manpages inside vim with <code>:Man</code>! It adds nicer syntax highlighting 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52and the ability to jump around with <code>Ctrl-]</code> and <code>Ctrl-T</code>.</p> 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 53 ul.task-list{list-style: none;}
54 </style>
55 <!--[if lt IE 9]>
56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57 <![endif]-->
58</head>
59<body>
60<p>Bash is tricky, don’t let your editor get in your way. Here’s a couple of neat additions you could make to your <code>vimrc</code> for a better shell programming experience.</p>
61<h3 id="man-pages-inside-vim">Man pages inside vim</h3>
62<p>Source this script to get started:</p>
63<pre><code>runtime ftplugin/man.vim</code></pre>
64<p>Now, you can open manpages inside vim with <code>:Man</code>! It adds nicer syntax highlighting and the ability to jump around with <code>Ctrl-]</code> and <code>Ctrl-T</code>.</p>
54<p>By default, the manpage is opened in a horizontal split, I prefer using a new tab:</p> 65<p>By default, the manpage is opened in a horizontal split, I prefer using a new tab:</p>
55 66<pre><code>let g:ft_man_open_mode = &#39;tab&#39;</code></pre>
56<pre><code>let g:ft_man_open_mode = &#39;tab&#39; 67<h3 id="scratchpad-to-test-your-commands">Scratchpad to test your commands</h3>
57</code></pre> 68<p>I often test my <code>sed</code> substitutions, here is a sample from the script used to generate this site:</p>
58
59<h3 id="Scratchpad%20to%20test%20your%20commands">Scratchpad to test your commands</h3>
60
61<p>I often test my <code>sed</code> substitutions, here is
62a sample from the script used to generate this site: </p>
63
64<pre><code># a substitution to convert snake_case to Title Case With Spaces 69<pre><code># a substitution to convert snake_case to Title Case With Spaces
65echo &#34;$1&#34; | sed -E -e &#34;s&#47;\..+$&#47;&#47;g&#34; -e &#34;s&#47;_(.)&#47; \u\1&#47;g&#34; -e &#34;s&#47;^(.)&#47;\u\1&#47;g&#34; 70echo &quot;$1&quot; | sed -E -e &quot;s/\..+$//g&quot; -e &quot;s/_(.)/ \u\1/g&quot; -e &quot;s/^(.)/\u\1/g&quot;</code></pre>
66</code></pre>
67
68<p>Instead of dropping into a new shell, just test it out directly from vim!</p> 71<p>Instead of dropping into a new shell, just test it out directly from vim!</p>
69
70<ul> 72<ul>
71<li><p>Yank the line into a register:</p> 73<li>Yank the line into a register:</li>
72 74</ul>
73<pre><code>yy 75<pre><code>yy</code></pre>
74</code></pre></li> 76<ul>
75<li><p>Paste it into the command-line window:</p> 77<li>Paste it into the command-line window:</li>
76 78</ul>
77<pre><code>q:p 79<pre><code>q:p</code></pre>
78</code></pre></li> 80<ul>
79<li><p>Make edits as required:</p> 81<li>Make edits as required:</li>
80 82</ul>
81<pre><code>syntax off # previously run commands 83<pre><code>syntax off # previously run commands
82edit index.html # in a buffer! 84edit index.html # in a buffer!
83w | so % 85w | so %
84!echo &#34;new_post.md&#34; | sed -E -e &#34;s&#47;\..+$&#47;&#47;g&#34; --snip-- 86!echo &quot;new_post.md&quot; | sed -E -e &quot;s/\..+$//g&quot; --snip--
85^--- note the use of &#39;!&#39; 87^--- note the use of &#39;!&#39;</code></pre>
86</code></pre></li> 88<ul>
87<li><p>Hit enter with the cursor on the line containing your command!</p> 89<li>Hit enter with the cursor on the line containing your command!</li>
88 90</ul>
89<pre><code>$ vim 91<pre><code>$ vim
90New Post # output 92New Post # output
91Press ENTER or type command to continue 93Press ENTER or type command to continue</code></pre>
92</code></pre></li> 94</body>
93</ul> 95</html>
94 96
95 </div> 97 </div>
96 98
diff --git a/docs/posts/bye_bye_BDFs/index.html b/docs/posts/bye_bye_BDFs/index.html
index ad7243d..d7b7e46 100644
--- a/docs/posts/bye_bye_BDFs/index.html
+++ b/docs/posts/bye_bye_BDFs/index.html
@@ -37,31 +37,34 @@
37 Bye Bye BDFs 37 Bye Bye BDFs
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>Glyph Bitmap Distribution Format is no more, as the creators of 40 <!DOCTYPE html>
41<a href="https://pango.org">Pango</a>, one of the most widely used text rendering 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42libraries, 42<head>
43<a href="https://blogs.gnome.org/mclasen/2019/05/25/pango-future-directions/">announced</a> 43 <meta charset="utf-8" />
44their plans for Pango 1.44.</p> 44 <meta name="generator" content="pandoc" />
45 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46<p>Until recently, Pango used FreeType to draw fonts. They will be moving over 46 <title>bye_bye_BDFs</title>
47to <a href="https://harfbuzz.org">Harfbuzz</a>, an evolution of FreeType.</p> 47 <style>
48 48 code{white-space: pre-wrap;}
49 span.smallcaps{font-variant: small-caps;}
50 span.underline{text-decoration: underline;}
51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 ul.task-list{list-style: none;}
54 </style>
55 <!--[if lt IE 9]>
56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57 <![endif]-->
58</head>
59<body>
60<p>Glyph Bitmap Distribution Format is no more, as the creators of <a href="https://pango.org">Pango</a>, one of the most widely used text rendering libraries, <a href="https://blogs.gnome.org/mclasen/2019/05/25/pango-future-directions/">announced</a> their plans for Pango 1.44.</p>
61<p>Until recently, Pango used FreeType to draw fonts. They will be moving over to <a href="https://harfbuzz.org">Harfbuzz</a>, an evolution of FreeType.</p>
49<p><em>Why?</em></p> 62<p><em>Why?</em></p>
50 63<p>In short, FreeType was hard to work with. It required complex logic, and provided no advantage over Harfbuzz (other than being able to fetch opentype metrics with ease).</p>
51<p>In short, FreeType was hard to work with. It required complex logic, and 64<p>Upgrading to Pango v1.44 will break your GTK applications (if you use a <code>bdf</code>/<code>pcf</code> bitmap font). Harfbuzz <em>does</em> support bitmap-only OpenType fonts, <code>otb</code>s. Convert your existing fonts over to <code>otb</code>s using <a href="https://fontforge.github.io">FontForge</a>. It is to be noted that applications such as <code>xterm</code> and <code>rxvt</code> use <code>xft</code> (X FreeType) to render fonts, and will remain unaffected by the update.</p>
52provided no advantage over Harfbuzz (other than being able to fetch 65<p>Both <a href="https://github.com/nerdypepper/scientifica">scientifica</a> and <a href="https://github.com/nerdypepper/curie">curie</a> will soon ship with bitmap-only OpenType font formats.</p>
53opentype metrics with ease).</p> 66</body>
54 67</html>
55<p>Upgrading to Pango v1.44 will break your GTK applications (if you use a
56<code>bdf</code>&#47;<code>pcf</code> bitmap font). Harfbuzz <em>does</em> support bitmap-only OpenType fonts,
57<code>otb</code>s. Convert your existing fonts over to <code>otb</code>s using
58<a href="https://fontforge.github.io">FontForge</a>. It is to be noted that applications
59such as <code>xterm</code> and <code>rxvt</code> use <code>xft</code> (X FreeType) to render fonts, and will
60remain unaffected by the update.</p>
61
62<p>Both <a href="https://github.com/nerdypepper/scientifica">scientifica</a> and
63<a href="https://github.com/nerdypepper/curie">curie</a> will soon ship with bitmap-only
64OpenType font formats.</p>
65 68
66 </div> 69 </div>
67 70
diff --git a/docs/posts/call_to_ARMs/index.html b/docs/posts/call_to_ARMs/index.html
index 3f759e4..578a8b7 100644
--- a/docs/posts/call_to_ARMs/index.html
+++ b/docs/posts/call_to_ARMs/index.html
@@ -37,88 +37,59 @@
37 Call To ARMs 37 Call To ARMs
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>My 4th semester involves ARM programming. And proprietary 40 <!DOCTYPE html>
41tooling (Keil C). But we don&#39;t do that here.</p> 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42 42<head>
43<h3 id="Building">Building</h3> 43 <meta charset="utf-8" />
44 44 <meta name="generator" content="pandoc" />
45<p>Assembling and linking ARM binaries on non-ARM architecture 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46devices is fairly trivial. I went along with the GNU cross 46 <title>call_to_ARMs</title>
47bare metal toolchain binutils, which provides <code>arm-as</code> and 47 <style>
48<code>arm-ld</code> (among a bunch of other utils that I don&#39;t care 48 code{white-space: pre-wrap;}
49about for now). </p> 49 span.smallcaps{font-variant: small-caps;}
50 50 span.underline{text-decoration: underline;}
51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 ul.task-list{list-style: none;}
54 </style>
55 <!--[if lt IE 9]>
56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57 <![endif]-->
58</head>
59<body>
60<p>My 4th semester involves ARM programming. And proprietary tooling (Keil C). But we don’t do that here.</p>
61<h3 id="building">Building</h3>
62<p>Assembling and linking ARM binaries on non-ARM architecture devices is fairly trivial. I went along with the GNU cross bare metal toolchain binutils, which provides <code>arm-as</code> and <code>arm-ld</code> (among a bunch of other utils that I don’t care about for now).</p>
51<p>Assemble <code>.s</code> files with:</p> 63<p>Assemble <code>.s</code> files with:</p>
52 64<pre class="shell"><code>arm-none-eabi-as main.s -g -march=armv8.1-a -o main.out</code></pre>
53<pre><code class="language-shell">arm-none-eabi-as main.s -g -march=armv8.1-a -o main.out 65<p>The <code>-g</code> flag generates extra debugging information that <code>gdb</code> picks up. The <code>-march</code> option establishes target architecture.</p>
54</code></pre>
55
56<p>The <code>-g</code> flag generates extra debugging information that
57<code>gdb</code> picks up. The <code>-march</code> option establishes target
58architecture.</p>
59
60<p>Link <code>.o</code> files with:</p> 66<p>Link <code>.o</code> files with:</p>
61 67<pre class="shell"><code>arm-none-eabi-ld main.out -o main</code></pre>
62<pre><code class="language-shell">arm-none-eabi-ld main.out -o main 68<h3 id="running-and-debugging">Running (and Debugging)</h3>
63</code></pre> 69<p>Things get interesting here. <code>gdb</code> on your x86 machine cannot read nor execute binaries compiled for ARM. So, we simulate an ARM processor using <code>qemu</code>. Now qemu allows you to run <code>gdbserver</code> on startup. Connecting our local <code>gdb</code> instance to <code>gdbserver</code> gives us a view into the program’s execution. Easy!</p>
64 70<p>Run <code>qemu</code>, with <code>gdbserver</code> on port <code>1234</code>, with our ARM binary, <code>main</code>:</p>
65<h3 id="Running%20(and%20Debugging)">Running (and Debugging)</h3> 71<pre class="shell"><code>qemu-arm -singlestep -g 1234 main</code></pre>
66 72<p>Start up <code>gdb</code> on your machine, and connect to <code>qemu</code>’s <code>gdbserver</code>:</p>
67<p>Things get interesting here. <code>gdb</code> on your x86 machine
68cannot read nor execute binaries compiled for ARM. So, we
69simulate an ARM processor using <code>qemu</code>. Now qemu allows you
70to run <code>gdbserver</code> on startup. Connecting our local <code>gdb</code>
71instance to <code>gdbserver</code> gives us a view into the program&#8217;s
72execution. Easy!</p>
73
74<p>Run <code>qemu</code>, with <code>gdbserver</code> on port <code>1234</code>, with our ARM
75binary, <code>main</code>:</p>
76
77<pre><code class="language-shell">qemu-arm -singlestep -g 1234 main
78</code></pre>
79
80<p>Start up <code>gdb</code> on your machine, and connect to <code>qemu</code>&#8217;s
81<code>gdbserver</code>:</p>
82
83<pre><code>(gdb) set architecture armv8-a 73<pre><code>(gdb) set architecture armv8-a
84(gdb) target remote localhost:1234 74(gdb) target remote localhost:1234
85(gdb) file main 75(gdb) file main
86Reading symbols from main... # yay! 76Reading symbols from main... # yay!</code></pre>
87</code></pre> 77<h3 id="gdb-enhanced">GDB Enhanced</h3>
88 78<p><code>gdb</code> is cool, but it’s not nearly as comfortable as well fleshed out emulators/IDEs like Keil. Watching registers, CPSR and memory chunks update <em>is</em> pretty fun.</p>
89<h3 id="GDB%20Enhanced">GDB Enhanced</h3> 79<p>I came across <code>gdb</code>’s TUI mode (hit <code>C-x C-a</code> or type <code>tui enable</code> at the prompt). TUI mode is a godsend. It highlights the current line of execution, shows you disassembly outputs, updated registers, active breakpoints and more.</p>
90
91<p><code>gdb</code> is cool, but it&#39;s not nearly as comfortable as well
92fleshed out emulators&#47;IDEs like Keil. Watching registers,
93CPSR and memory chunks update <em>is</em> pretty fun. </p>
94
95<p>I came across <code>gdb</code>&#39;s TUI mode (hit <code>C-x C-a</code> or type <code>tui
96enable</code> at the prompt). TUI mode is a godsend. It highlights
97the current line of execution, shows you disassembly
98outputs, updated registers, active breakpoints and more.</p>
99
100<p><em>But</em>, it is an absolute eyesore.</p> 80<p><em>But</em>, it is an absolute eyesore.</p>
101 81<p>Say hello to <a href="https://github.com/hugsy/gef">GEF</a>! “GDB Enhanced Features” teaches our old dog some cool new tricks. Here are some additions that made my ARM debugging experience loads better:</p>
102<p>Say hello to <a href="https://github.com/hugsy/gef">GEF</a>! &#8220;GDB
103Enhanced Features&#8221; teaches our old dog some cool new tricks.
104Here are some additions that made my ARM debugging
105experience loads better:</p>
106
107<ul> 82<ul>
108<li>Memory watches</li> 83<li>Memory watches</li>
109<li>Register watches, with up to 7 levels of deref (overkill, 84<li>Register watches, with up to 7 levels of deref (overkill, I agree)</li>
110I agree)</li>
111<li>Stack tracing</li> 85<li>Stack tracing</li>
112</ul> 86</ul>
113 87<p>And it’s pretty! See for yourself:</p>
114<p>And it&#39;s pretty! See for yourself:</p> 88<p><a href="https://u.peppe.rs/wq.png"><img src="https://u.peppe.rs/wq.png" /></a></p>
115 89<h3 id="editing">Editing</h3>
116<p><a href="https://u.peppe.rs/wq.png"><img src="https://u.peppe.rs/wq.png" alt="gef.png" /></a></p> 90<p>Vim, with <code>syntax off</code> because it dosen’t handle GNU ARM syntax too well.</p>
117 91</body>
118<h3 id="Editing">Editing</h3> 92</html>
119
120<p>Vim, with <code>syntax off</code> because it
121dosen&#39;t handle GNU ARM syntax too well.</p>
122 93
123 </div> 94 </div>
124 95
diff --git a/docs/posts/color_conundrum/index.html b/docs/posts/color_conundrum/index.html
index 2001226..f732fd0 100644
--- a/docs/posts/color_conundrum/index.html
+++ b/docs/posts/color_conundrum/index.html
@@ -37,42 +37,36 @@
37 Color Conundrum 37 Color Conundrum
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>This piece aims to highlight (pun intended) some of the 40 <!DOCTYPE html>
41reasons behind my <a href="https://u.peppe.rs/bF.png">color 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42free</a> editor setup.</p> 42<head>
43 43 <meta charset="utf-8" />
44<p>Imagine highlighting an entire book because <em>all</em> of it is 44 <meta name="generator" content="pandoc" />
45important. That is exactly what (most) syntax highlighting 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46does. It is difficult for the human eye to filter out noise 46 <title>color_conundrum</title>
47in rainbow barf. Use color to draw attention, not diverge 47 <style>
48it.</p> 48 code{white-space: pre-wrap;}
49 49 span.smallcaps{font-variant: small-caps;}
50<p>At the same time, a book devoid of color is <em>boring!</em> What 50 span.underline{text-decoration: underline;}
51is the takeaway from this 10 line paragraph? What are the 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52technical terms used?</p> 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 53 ul.task-list{list-style: none;}
54<p>Prose and code are certainly different, but the fickle 54 </style>
55minded human eye is the same. The eye constantly looks for a 55 <!--[if lt IE 9]>
56frame of reference, a focal point. It grows tired when it 56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57can&#39;t find one.</p> 57 <![endif]-->
58 58</head>
59<p>The following comparison does a better job of explaining 59<body>
60(none, ample and over-the-top highlighting, from left to 60<p>This piece aims to highlight (pun intended) some of the reasons behind my <a href="https://u.peppe.rs/bF.png">color free</a> editor setup.</p>
61right):</p> 61<p>Imagine highlighting an entire book because <em>all</em> of it is important. That is exactly what (most) syntax highlighting does. It is difficult for the human eye to filter out noise in rainbow barf. Use color to draw attention, not diverge it.</p>
62 62<p>At the same time, a book devoid of color is <em>boring!</em> What is the takeaway from this 10 line paragraph? What are the technical terms used?</p>
63<p><a href="https://u.peppe.rs/lt.png"><img src="https://u.peppe.rs/lt.png" alt="hi.png" /></a></p> 63<p>Prose and code are certainly different, but the fickle minded human eye is the same. The eye constantly looks for a frame of reference, a focal point. It grows tired when it can’t find one.</p>
64 64<p>The following comparison does a better job of explaining (none, ample and over-the-top highlighting, from left to right):</p>
65<p>Without highlighting (far left), it is hard to differentiate 65<p><a href="https://u.peppe.rs/lt.png"><img src="https://u.peppe.rs/lt.png" /></a></p>
66between comments and code! The florid color scheme (far 66<p>Without highlighting (far left), it is hard to differentiate between comments and code! The florid color scheme (far right) is no good either, it contains too many attention grabbers. The center sample is a healthy balance of both. Function calls and constants stand out, and repetitive keywords and other noise (<code>let</code>, <code>as</code>) are mildly dimmed out. Comments and non-code text (sign column, status text) are dimmed further.</p>
67right) is no good either, it contains too many attention 67<p>I’ll stop myself before I rant about color contrast and combinations.</p>
68grabbers. The center sample is a healthy balance of both. 68</body>
69Function calls and constants stand out, and repetitive 69</html>
70keywords and other noise (<code>let</code>, <code>as</code>) are mildly dimmed
71out. Comments and non-code text (sign column, status text)
72are dimmed further.</p>
73
74<p>I&#39;ll stop myself before I rant about color contrast and
75combinations.</p>
76 70
77 </div> 71 </div>
78 72
diff --git a/docs/posts/font_size_fallacies/index.html b/docs/posts/font_size_fallacies/index.html
index 804dea2..f8bffad 100644
--- a/docs/posts/font_size_fallacies/index.html
+++ b/docs/posts/font_size_fallacies/index.html
@@ -37,99 +37,58 @@
37 Font Size Fallacies 37 Font Size Fallacies
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>I am not an expert with fonts, but I do have some 40 <!DOCTYPE html>
41experience <sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>, and common sense. This post aims to debunk some 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42misconceptions about font sizes!</p> 42<head>
43 43 <meta charset="utf-8" />
44<p>11 px on your display is <em>probably not</em> 11 px on my display. 44 <meta name="generator" content="pandoc" />
45Let&#39;s do some quick math. I have two displays, 1366x768 @ 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
4621&#8221; and another with 1920x1080 @ 13&#8221;, call them <code>A</code> and 46 <title>font_size_fallacies</title>
47<code>B</code> for now.</p> 47 <style>
48 48 code{white-space: pre-wrap;}
49<p>Display <code>A</code> has 1,049,088 pixels. A pixel is a square, of 49 span.smallcaps{font-variant: small-caps;}
50side say, <code>s</code> cm. The total area covered by my 21&#8221; display 50 span.underline{text-decoration: underline;}
51is about 1,066 cm<sup>2</sup> (41x26). Thus,</p> 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 ul.task-list{list-style: none;}
54 </style>
55 <!--[if lt IE 9]>
56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57 <![endif]-->
58</head>
59<body>
60<p>I am not an expert with fonts, but I do have some experience <a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>, and common sense. This post aims to debunk some misconceptions about font sizes!</p>
61<p>11 px on your display is <em>probably not</em> 11 px on my display. Let’s do some quick math. I have two displays, 1366x768 @ 21" and another with 1920x1080 @ 13", call them <code>A</code> and <code>B</code> for now.</p>
62<p>Display <code>A</code> has 1,049,088 pixels. A pixel is a square, of side say, <code>s</code> cm. The total area covered by my 21" display is about 1,066 cm^2 (41x26). Thus,</p>
53<pre><code>Display A 63<pre><code>Display A
54Dimensions: 1366x768 @ 21&#34; (41x26 sq. cm) 64Dimensions: 1366x768 @ 21&quot; (41x26 sq. cm)
551,049,088 s^2 = 1066 651,049,088 s^2 = 1066
56 s = 0.0318 cm (side of a pixel on Display A) 66 s = 0.0318 cm (side of a pixel on Display A)</code></pre>
57</code></pre> 67<p>Bear with me, as I repeat the number crunching for Display <code>B</code>:</p>
58
59<p>Bear with me, as I repeat the number crunching for Display
60<code>B</code>:</p>
61
62<pre><code>Display B 68<pre><code>Display B
63Dimensions: 1920x1080 @ 13&#34; (29.5x16.5 sq. cm) 69Dimensions: 1920x1080 @ 13&quot; (29.5x16.5 sq. cm)
642,073,600 s^2 = 486.75 702,073,600 s^2 = 486.75
65 s = 0.0153 cm (side of a pixel on Display B) 71 s = 0.0153 cm (side of a pixel on Display B)</code></pre>
66</code></pre> 72<p>The width of a pixel on Display <code>A</code> is <em>double</em> the width of a pixel on Display <code>B</code>. The area occupied by a pixel on Display <code>A</code> is <em>4 times</em> the area occupied by a pixel on Display <code>B</code>.</p>
67
68<p>The width of a pixel on Display <code>A</code> is <em>double</em> the width of a
69pixel on Display <code>B</code>. The area occupied by a pixel on Display
70<code>A</code> is <em>4 times</em> the area occupied by a pixel on Display <code>B</code>.</p>
71
72<p><em>The size of a pixel varies from display to display!</em></p> 73<p><em>The size of a pixel varies from display to display!</em></p>
73 74<p>A 5x11 bitmap font on Display <code>A</code> would be around 4 mm tall whereas the same bitmap font on Display <code>B</code> would be around 1.9 mm tall. A 11 px tall character on <code>B</code> is visually equivalent to a 5 px character on <code>A</code>. When you view a screenshot of Display <code>A</code> on Display <code>B</code>, the contents are shrunk down by a factor of 2!</p>
74<p>A 5x11 bitmap font on Display <code>A</code> would be around 4 mm tall 75<p>So screen resolution is not enough, how else do we measure size? Pixel Density! Keen readers will realize that the 5^th grade math problem we solved up there showcases pixel density, or, pixels per cm (PPCM). Usually we deal with pixels per inch (PPI).</p>
75whereas the same bitmap font on Display <code>B</code> would be around 76<p><strong>Note:</strong> PPI is not to be confused with DPI <a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a> (dots per inch). DPI is defined for printers.</p>
761.9 mm tall. A 11 px tall character on <code>B</code> is visually 77<p>In our example, <code>A</code> is a 75 ppi display and <code>B</code> is around 165 ppi <a href="#fn3" class="footnote-ref" id="fnref3" role="doc-noteref"><sup>3</sup></a>. A low ppi display appears to be ‘pixelated’, because the pixels are more prominent, much like Display <code>A</code>. A higher ppi usually means you can view larger images and render crispier fonts. The average desktop display can stuff 100-200 pixels per inch. Smart phones usually fall into the 400-600 ppi (XXXHDPI) category. The human eye fails to differentiate detail past 300 ppi.</p>
77equivalent to a 5 px character on <code>A</code>. When you view a 78<p><em>So … streaming an 8K video on a 60" TV provides the same clarity as a HD video on a smart phone?</em></p>
78screenshot of Display <code>A</code> on Display <code>B</code>, the contents are 79<p>Absolutely. Well, clarity is subjective, but the amount of detail you can discern on mobile displays has always been limited. Salty consumers of the Xperia 1 <a href="#fn4" class="footnote-ref" id="fnref4" role="doc-noteref"><sup>4</sup></a> will say otherwise.</p>
79shrunk down by a factor of 2!</p> 80<p>Maybe I will talk about font rendering in another post, but thats all for now. Don’t judge a font size by its screenshot.</p>
80 81<section class="footnotes" role="doc-endnotes">
81<p>So screen resolution is not enough, how else do we measure 82<hr />
82size? Pixel Density! Keen readers will realize that the 5<sup>th</sup>
83grade math problem we solved up there showcases pixel
84density, or, pixels per cm (PPCM). Usually we deal with
85pixels per inch (PPI).</p>
86
87<p><strong>Note:</strong> PPI is not to be confused with DPI <sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup> (dots
88per inch). DPI is defined for printers.</p>
89
90<p>In our example, <code>A</code> is a 75 ppi display and <code>B</code> is around
91165 ppi <sup id="fnref3"><a href="#fn3" rel="footnote">3</a></sup>. A low ppi display appears to be
92&#8216;pixelated&#8217;, because the pixels are more prominent, much
93like Display <code>A</code>. A higher ppi usually means you can view
94larger images and render crispier fonts. The average desktop
95display can stuff 100-200 pixels per inch. Smart phones
96usually fall into the 400-600 ppi (XXXHDPI) category. The
97human eye fails to differentiate detail past 300 ppi.</p>
98
99<p><em>So &#8230; streaming an 8K video on a 60&#8221; TV provides the same
100clarity as a HD video on a smart phone?</em></p>
101
102<p>Absolutely. Well, clarity is subjective, but the amount of
103detail you can discern on mobile displays has always been
104limited. Salty consumers of the Xperia 1 <sup id="fnref4"><a href="#fn4" rel="footnote">4</a></sup> will say
105otherwise.</p>
106
107<p>Maybe I will talk about font rendering in another post, but
108thats all for now. Don&#39;t judge a font size by its
109screenshot.</p>
110
111<div class="footnotes">
112<hr/>
113<ol> 83<ol>
114 84<li id="fn1" role="doc-endnote"><p>https://github.com/nerdypepper/scientifica<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
115<li id="fn1"> 85<li id="fn2" role="doc-endnote"><p>https://en.wikipedia.org/wiki/Dots_per_inch<a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
116<p><a href="https://github.com/nerdypepper/scientifica">https:&#47;&#47;github.com&#47;nerdypepper&#47;scientifica</a>&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p> 86<li id="fn3" role="doc-endnote"><p>https://www.sven.de/dpi/<a href="#fnref3" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
117</li> 87<li id="fn4" role="doc-endnote"><p>https://en.wikipedia.org/wiki/Sony_Xperia_1<a href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
118
119<li id="fn2">
120<p><a href="https://en.wikipedia.org/wiki/Dots_per_inch">https:&#47;&#47;en.wikipedia.org&#47;wiki&#47;Dots_per_inch</a>&#160;<a href="#fnref2" rev="footnote">&#8617;</a></p>
121</li>
122
123<li id="fn3">
124<p><a href="https://www.sven.de/dpi/">https:&#47;&#47;www.sven.de&#47;dpi&#47;</a>&#160;<a href="#fnref3" rev="footnote">&#8617;</a></p>
125</li>
126
127<li id="fn4">
128<p><a href="https://en.wikipedia.org/wiki/Sony_Xperia_1">https:&#47;&#47;en.wikipedia.org&#47;wiki&#47;Sony_Xperia_1</a>&#160;<a href="#fnref4" rev="footnote">&#8617;</a></p>
129</li>
130
131</ol> 88</ol>
132</div> 89</section>
90</body>
91</html>
133 92
134 </div> 93 </div>
135 94
diff --git a/docs/posts/get_better_at_yanking_and_putting_in_vim/index.html b/docs/posts/get_better_at_yanking_and_putting_in_vim/index.html
index d4e8fb4..6536f6d 100644
--- a/docs/posts/get_better_at_yanking_and_putting_in_vim/index.html
+++ b/docs/posts/get_better_at_yanking_and_putting_in_vim/index.html
@@ -37,28 +37,45 @@
37 Get Better At Yanking And Putting In Vim 37 Get Better At Yanking And Putting In Vim
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <ol start="1"> 40 <!DOCTYPE html>
41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42<head>
43 <meta charset="utf-8" />
44 <meta name="generator" content="pandoc" />
45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46 <title>get_better_at_yanking_and_putting_in_vim</title>
47 <style>
48 code{white-space: pre-wrap;}
49 span.smallcaps{font-variant: small-caps;}
50 span.underline{text-decoration: underline;}
51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 ul.task-list{list-style: none;}
54 </style>
55 <!--[if lt IE 9]>
56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57 <![endif]-->
58</head>
59<body>
60<p>a couple of nifty tricks to help you copy-paste better:</p>
61<ol type="1">
41<li><p>reselecting previously selected text (i use this to fix botched selections):</p> 62<li><p>reselecting previously selected text (i use this to fix botched selections):</p>
42 63<pre><code>gv &quot; :h gv for more
43<pre><code>gv &#34; :h gv for more 64 &quot; you can use `o` in visual mode to go to the `Other` end of the selection
44 &#34; you can use `o` in visual mode to go to the `Other` end of the selection 65 &quot; use a motion to fix the selection</code></pre></li>
45 &#34; use a motion to fix the selection
46</code></pre></li>
47<li><p>reselecting previously yanked text:</p> 66<li><p>reselecting previously yanked text:</p>
48
49<pre><code>`[v`] 67<pre><code>`[v`]
50`[ &#34; marks the beginning of the previously yanked text :h `[ 68`[ &quot; marks the beginning of the previously yanked text :h `[
51`] &#34; marks the end :h `] 69`] &quot; marks the end :h `]
52 v &#34; visual select everything in between 70 v &quot; visual select everything in between
53 71
54nnoremap gb `[v`] &#34; &#34;a quick map to perform the above 72nnoremap gb `[v`] &quot; &quot;a quick map to perform the above</code></pre></li>
55</code></pre></li>
56<li><p>pasting and indenting text (in one go):</p> 73<li><p>pasting and indenting text (in one go):</p>
57 74<pre><code>]p &quot; put (p) and adjust indent to current line
58<pre><code>]p &#34; put (p) and adjust indent to current line 75]P &quot; put the text before the cursor (P) and adjust indent to current line</code></pre></li>
59]P &#34; put the text before the cursor (P) and adjust indent to current line
60</code></pre></li>
61</ol> 76</ol>
77</body>
78</html>
62 79
63 </div> 80 </div>
64 81
diff --git a/docs/posts/hold_position!/index.html b/docs/posts/hold_position!/index.html
index 58851c5..b14d41a 100644
--- a/docs/posts/hold_position!/index.html
+++ b/docs/posts/hold_position!/index.html
@@ -37,27 +37,36 @@
37 Hold Position! 37 Hold Position!
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>Often times, when I run a vim command that makes &#8220;big&#8221; changes to a file (a 40 <!DOCTYPE html>
41macro or a <code>:vimgrep</code> command) I lose my original position and feel disoriented.</p> 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42 42<head>
43 <meta charset="utf-8" />
44 <meta name="generator" content="pandoc" />
45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46 <title>hold_position!</title>
47 <style>
48 code{white-space: pre-wrap;}
49 span.smallcaps{font-variant: small-caps;}
50 span.underline{text-decoration: underline;}
51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 ul.task-list{list-style: none;}
54 </style>
55 <!--[if lt IE 9]>
56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57 <![endif]-->
58</head>
59<body>
60<p>Often times, when I run a vim command that makes “big” changes to a file (a macro or a <code>:vimgrep</code> command) I lose my original position and feel disoriented.</p>
43<p><em>Save position with <code>winsaveview()</code>!</em></p> 61<p><em>Save position with <code>winsaveview()</code>!</em></p>
44 62<p>The <code>winsaveview()</code> command returns a <code>Dictionary</code> that contains information about the view of the current window. This includes the cursor line number, cursor coloumn, the top most line in the window and a couple of other values, none of which concern us.</p>
45<p>The <code>winsaveview()</code> command returns a <code>Dictionary</code> that contains information 63<p>Before running our command (one that jumps around the buffer, a lot), we save our view, and restore it once its done, with <code>winrestview</code>.</p>
46about the view of the current window. This includes the cursor line number,
47cursor coloumn, the top most line in the window and a couple of other values,
48none of which concern us.</p>
49
50<p>Before running our command (one that jumps around the buffer, a lot), we save
51our view, and restore it once its done, with <code>winrestview</code>.</p>
52
53<pre><code>let view = winsaveview() 64<pre><code>let view = winsaveview()
54s&#47;\s\+$&#47;&#47;gc &#34; find and (confirm) replace trailing blanks 65s/\s\+$//gc &quot; find and (confirm) replace trailing blanks
55winrestview(view) &#34; restore our original view! 66winrestview(view) &quot; restore our original view!</code></pre>
56</code></pre> 67<p>It might seem a little overkill in the above example, just use `` (double backticks) instead, but it comes in handy when you run your file through heavier filtering.</p>
57 68</body>
58<p>It might seem a little overkill in the above example, just use `` (double 69</html>
59backticks) instead, but it comes in handy when you run your file through
60heavier filtering.</p>
61 70
62 </div> 71 </div>
63 72
diff --git a/docs/posts/my_setup/index.html b/docs/posts/my_setup/index.html
index c3812ec..aaad548 100644
--- a/docs/posts/my_setup/index.html
+++ b/docs/posts/my_setup/index.html
@@ -37,32 +37,34 @@
37 My Setup 37 My Setup
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>Decided to do one of these because everyone does one of 40 <!DOCTYPE html>
41these.</p> 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42 42<head>
43<p><img src="https://u.peppe.rs/Hb.png" alt="scrot" /></p> 43 <meta charset="utf-8" />
44 44 <meta name="generator" content="pandoc" />
45<p>My entire setup is managed with GNU <code>stow</code>, making it easier 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46to replicate on fresh installations. You can find my 46 <title>my_setup</title>
47configuration files on <a href="https://github.com/nerdypepper">GitHub</a>.</p> 47 <style>
48 48 code{white-space: pre-wrap;}
49<p>I run Void Linux (glibc) on my 49 span.smallcaps{font-variant: small-caps;}
50<a href="https://store.hp.com/us/en/mdp/laptops/envy-13">HP Envy 13&#8221; (2018)</a>. 50 span.underline{text-decoration: underline;}
51To keep things simple, I run a raw X session with <code>2bwm</code> as my 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52window manager, along with <code>dunst</code> (notification daemon) and 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53Sam&#39;s <a href="https://github.com/sdhand/compton"><code>compton</code></a> 53 ul.task-list{list-style: none;}
54(compositor) fork.</p> 54 </style>
55 55 <!--[if lt IE 9]>
56<p>I am a fan of GNU tools, so I use <code>bash</code> as my shell, and 56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57<code>coreutils</code> to manage files, archives, strings, paths etc. I 57 <![endif]-->
58edit files with <code>vim</code>, chat with <code>weechat</code>, listen to music 58</head>
59with <code>cmus</code>, monitor processes with <code>htop</code>, manage sessions 59<body>
60with <code>tmux</code>, read pdfs in <code>zathura</code>. I rarely ever leave 60<p>Decided to do one of these because everyone does one of these.</p>
61the comfort of my terminal emulator, <code>urxvt</code>.</p> 61<p><img src="https://u.peppe.rs/Hb.png" /></p>
62 62<p>My entire setup is managed with GNU <code>stow</code>, making it easier to replicate on fresh installations. You can find my configuration files on <a href="https://github.com/nerdypepper">GitHub</a>.</p>
63<p>Most of my academic typesetting is done with TeX, and 63<p>I run Void Linux (glibc) on my <a href="https://store.hp.com/us/en/mdp/laptops/envy-13">HP Envy 13" (2018)</a>. To keep things simple, I run a raw X session with <code>2bwm</code> as my window manager, along with <code>dunst</code> (notification daemon) and Sam’s <a href="https://github.com/sdhand/compton"><code>compton</code></a> (compositor) fork.</p>
64compiled with <code>xelatex</code>. Other <em>fun</em> documents are made with 64<p>I am a fan of GNU tools, so I use <code>bash</code> as my shell, and <code>coreutils</code> to manage files, archives, strings, paths etc. I edit files with <code>vim</code>, chat with <code>weechat</code>, listen to music with <code>cmus</code>, monitor processes with <code>htop</code>, manage sessions with <code>tmux</code>, read pdfs in <code>zathura</code>. I rarely ever leave the comfort of my terminal emulator, <code>urxvt</code>.</p>
65GIMP :).</p> 65<p>Most of my academic typesetting is done with TeX, and compiled with <code>xelatex</code>. Other <em>fun</em> documents are made with GIMP :).</p>
66</body>
67</html>
66 68
67 </div> 69 </div>
68 70
diff --git a/docs/posts/onivim_sucks/index.html b/docs/posts/onivim_sucks/index.html
index c2c6ffe..9635c8c 100644
--- a/docs/posts/onivim_sucks/index.html
+++ b/docs/posts/onivim_sucks/index.html
@@ -37,33 +37,33 @@
37 Onivim Sucks 37 Onivim Sucks
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p><a href="https://v2.onivim.io">Onivim</a> is a &#8216;modern modal editor&#8217;, combining fancy 40 <!DOCTYPE html>
41interface and language features with vim-style modal editing. What&#39;s wrong you 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42ask?</p> 42<head>
43 43 <meta charset="utf-8" />
44<p>Apart from <a href="https://github.com/onivim/oni2/issues/550">buggy syntax highlighting</a>, 44 <meta name="generator" content="pandoc" />
45<a href="https://github.com/onivim/oni2/issues/519">broken scrolling</a> and 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46<a href="https://github.com/onivim/oni2/issues?q=is%3Aissue+label%3A%22daily+editor+blocker%22+is%3Aopen">others</a>, 46 <title>onivim_sucks</title>
47Onivim is <strong>proprietary</strong> software. It is licensed under a commercial 47 <style>
48<a href="https://github.com/onivim/oni1/blob/master/Outrun-Labs-EULA-v1.1.md">end user agreement license</a>, 48 code{white-space: pre-wrap;}
49which prohibits redistribution in both object code and source code formats.</p> 49 span.smallcaps{font-variant: small-caps;}
50 50 span.underline{text-decoration: underline;}
51<p>Onivim&#39;s core editor logic (bits that belong to vim), have been separated from 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52the interface, into <a href="https://github.com/onivim/libvim">libvim</a>. libvim is 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53licensed under MIT, which means, this &#8216;extension&#8217; of vim is perfectly in 53 ul.task-list{list-style: none;}
54adherence to <a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license">vim&#39;s license text</a>! 54 </style>
55Outrun Labs are exploiting this loophole (distributing vim as a library) to 55 <!--[if lt IE 9]>
56commercialize Onivim.</p> 56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57 57 <![endif]-->
58<p>Onivim&#39;s source code is available on <a href="https://github.com/onivim/oni2">GitHub</a>. 58</head>
59They do mention that the source code trickles down to the 59<body>
60<a href="https://github.com/onivim/oni2-mit">oni2-mit</a> repository, which (not yet) contains 60<p><a href="https://v2.onivim.io">Onivim</a> is a ‘modern modal editor’, combining fancy interface and language features with vim-style modal editing. What’s wrong you ask?</p>
61MIT-licensed code, <strong>18 months</strong> after each commit to the original repository.</p> 61<p>Apart from <a href="https://github.com/onivim/oni2/issues/550">buggy syntax highlighting</a>, <a href="https://github.com/onivim/oni2/issues/519">broken scrolling</a> and <a href="https://github.com/onivim/oni2/issues?q=is%3Aissue+label%3A%22daily+editor+blocker%22+is%3Aopen">others</a>, Onivim is <strong>proprietary</strong> software. It is licensed under a commercial <a href="https://github.com/onivim/oni1/blob/master/Outrun-Labs-EULA-v1.1.md">end user agreement license</a>, which prohibits redistribution in both object code and source code formats.</p>
62 62<p>Onivim’s core editor logic (bits that belong to vim), have been separated from the interface, into <a href="https://github.com/onivim/libvim">libvim</a>. libvim is licensed under MIT, which means, this ‘extension’ of vim is perfectly in adherence to <a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license">vim’s license text</a>! Outrun Labs are exploiting this loophole (distributing vim as a library) to commercialize Onivim.</p>
63<p>Want to contribute to Onivim? Don&#39;t. They make a profit out of your contributions. 63<p>Onivim’s source code is available on <a href="https://github.com/onivim/oni2">GitHub</a>. They do mention that the source code trickles down to the <a href="https://github.com/onivim/oni2-mit">oni2-mit</a> repository, which (not yet) contains MIT-licensed code, <strong>18 months</strong> after each commit to the original repository.</p>
64Currently, Onivim is priced at $19.99, &#8216;pre-alpha&#8217; pricing which is 80% off the 64<p>Want to contribute to Onivim? Don’t. They make a profit out of your contributions. Currently, Onivim is priced at $19.99, ‘pre-alpha’ pricing which is 80% off the final price! If you are on the lookout for an editor, I would suggest using <a href="https://vim.org">Vim</a>, charity ware that actually works, and costs $100 lesser.</p>
65final price! If you are on the lookout for an editor, I would suggest using 65</body>
66<a href="https://vim.org">Vim</a>, charity ware that actually works, and costs $100 lesser.</p> 66</html>
67 67
68 </div> 68 </div>
69 69
diff --git a/docs/posts/pixel_art_in_GIMP/index.html b/docs/posts/pixel_art_in_GIMP/index.html
index 5caa446..7bd1eed 100644
--- a/docs/posts/pixel_art_in_GIMP/index.html
+++ b/docs/posts/pixel_art_in_GIMP/index.html
@@ -37,146 +37,77 @@
37 Pixel Art In GIMP 37 Pixel Art In GIMP
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>I&#39;ve always been an admirer of pixel art, because of it&#8217;s 40 <!DOCTYPE html>
41simplicity and it&#39;s resemblance to bitmap font design. 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42Recently, I decided to take the dive and make some art of my 42<head>
43own.</p> 43 <meta charset="utf-8" />
44 44 <meta name="generator" content="pandoc" />
45<p>I used GIMP because I am fairly familiar with it. Aseprite 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46seems to be the editor of choice for animated pixel art 46 <title>pixel_art_in_GIMP</title>
47though.</p> 47 <style>
48 48 code{white-space: pre-wrap;}
49<h3 id="Setting%20up%20the%20canvas">Setting up the canvas</h3> 49 span.smallcaps{font-variant: small-caps;}
50 50 span.underline{text-decoration: underline;}
51<p>Picking a canvas size is daunting. Too small, and you won&#8217;t 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52be able to fit in enough detail to make a legible piece. Too 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53big and you&#39;ve got too many pixels to work with!</p> 53 ul.task-list{list-style: none;}
54 54 </style>
55<p>I would suggest starting out with anywhere between 100x100 55 <!--[if lt IE 9]>
56and 200x200. <a href="https://u.peppe.rs/u9.png">Here&#8217;s</a> a sample 56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57configuration. </p> 57 <![endif]-->
58 58</head>
59<p>Sometimes I use a 10x10 grid, <code>View &#62; Show Grid</code> and <code>Edit &#62; 59<body>
60Preferences &#62; Default Grid &#62; Spacing</code>, but that can get 60<p>I’ve always been an admirer of pixel art, because of it’s simplicity and it’s resemblance to bitmap font design. Recently, I decided to take the dive and make some art of my own.</p>
61jarring, so I throw down a couple of guides, drag right or 61<p>I used GIMP because I am fairly familiar with it. Aseprite seems to be the editor of choice for animated pixel art though.</p>
62down from the left or top gutters for vertical and 62<h3 id="setting-up-the-canvas">Setting up the canvas</h3>
63horizontal guides respectively.</p> 63<p>Picking a canvas size is daunting. Too small, and you won’t be able to fit in enough detail to make a legible piece. Too big and you’ve got too many pixels to work with!</p>
64 64<p>I would suggest starting out with anywhere between 100x100 and 200x200. <a href="https://u.peppe.rs/u9.png">Here’s</a> a sample configuration.</p>
65<h3 id="Choosing%20a%20Brush">Choosing a Brush</h3> 65<p>Sometimes I use a 10x10 grid, <code>View &gt; Show Grid</code> and <code>Edit &gt; Preferences &gt; Default Grid &gt; Spacing</code>, but that can get jarring, so I throw down a couple of guides, drag right or down from the left or top gutters for vertical and horizontal guides respectively.</p>
66 66<h3 id="choosing-a-brush">Choosing a Brush</h3>
67<p>The most important part of our setup is the brush. Use the 67<p>The most important part of our setup is the brush. Use the Pencil Tool (<code>n</code> on the keyboard) for hard edge drawings. Here’s a small comparison if you don’t know the difference between a hard edge and a soft edge:</p>
68Pencil Tool (<code>n</code> on the keyboard) for hard edge drawings. 68<figure>
69Here&#39;s a small comparison if you don&#39;t know the difference 69<img src="https://u.peppe.rs/kz.png" alt="" /><figcaption>Hard edge vs Soft Edge</figcaption>
70between a hard edge and a soft edge:</p> 70</figure>
71 71<p>I turn the size down all the way to 1 (<code>[</code> on the keyboard). Set <code>Dynamics</code> off. <a href="https://u.peppe.rs/Fs.png">Here’s</a> a sample brush configuration.</p>
72<p><img src="https://u.peppe.rs/kz.png" alt="hard edge vs soft edge" /></p> 72<h3 id="laying-down-the-pixels">Laying down the pixels!</h3>
73 73<p>With the boring stuff out of the way, we can start with our piece. I usually follow a three step process:</p>
74<p>I turn the size down all the way to 1 (<code>[</code> on the keyboard).
75Set <code>Dynamics</code> off. <a href="https://u.peppe.rs/Fs.png">Here&#8217;s</a> a
76sample brush configuration.</p>
77
78<h3 id="Laying%20down%20the%20pixels!">Laying down the pixels!</h3>
79
80<p>With the boring stuff out of the way, we can start with our
81piece. I usually follow a three step process:</p>
82
83<ul> 74<ul>
84<li>draw a rough outline</li> 75<li>draw a rough outline</li>
85<li>fill in the shadows</li> 76<li>fill in the shadows</li>
86<li>add highlights</li> 77<li>add highlights</li>
87</ul> 78</ul>
88 79<p>But this process is better explained with an example: an onigiri. Let us start off with a 100x100 canvas.</p>
89<p>But this process is better explained with an example: an 80<h4 id="drawing-the-outline">Drawing the outline</h4>
90onigiri. Let us start off with a 100x100 canvas.</p> 81<p>For the most part, our figure will be symmetric. If you are on GIMP 2.10+, you can take advantage of the Symmetry Painting feature. Go ahead and enable vertical symmetry, <code>Window &gt; Dockable Dialogs &gt; Symmetry Painting</code> and <code>Symmetry Painting &gt; Symmetry &gt; Mirror &gt; Vertical</code>.</p>
91 82<p>If you are running an older version of GIMP, draw in the left side, duplicate the layer, flip it horizontally, and merge it with the original.</p>
92<h4 id="Drawing%20the%20outline">Drawing the outline</h4>
93
94<p>For the most part, our figure will be symmetric. If you are
95on GIMP 2.10+, you can take advantage of the Symmetry
96Painting feature. Go ahead and enable vertical symmetry,
97<code>Window &#62; Dockable Dialogs &#62; Symmetry Painting</code> and
98<code>Symmetry Painting &#62; Symmetry &#62; Mirror &#62; Vertical</code>. </p>
99
100<p>If you are running an older version of GIMP, draw in the
101left side, duplicate the layer, flip it horizontally, and
102merge it with the original.</p>
103
104<p>Your outline might look something like this:</p> 83<p>Your outline might look something like this:</p>
105 84<p><img src="https://u.peppe.rs/mn.png" /></p>
106<p><img src="https://u.peppe.rs/mn.png" alt="rice_outline" /></p> 85<p>Go ahead and fill it in with the fill tool (<code>Shift + b</code> on the keyboard), add in some seaweed as well, preferably on a different layer. You can toggle symmetry on and off to save yourself some time.</p>
107 86<p><img src="https://u.peppe.rs/xu.png" /></p>
108<p>Go ahead and fill it in with the fill tool (<code>Shift + b</code> on 87<h4 id="shadows">Shadows</h4>
109the keyboard), add in some seaweed as well, preferably on a 88<p>For now, let us focus on the shadows on the object itself, we’ll come back to the shadows cast by the object on the surface later.</p>
110different layer. You can toggle symmetry on and off to save 89<p>Shadows on any surface always follow the shape of the surface. A spherical onigiri would have a circular shadow:</p>
111yourself some time.</p> 90<p><img src="https://u.peppe.rs/FU.png" /></p>
112
113<p><img src="https://u.peppe.rs/xu.png" alt="with_seaweed" /></p>
114
115<h4 id="Shadows">Shadows</h4>
116
117<p>For now, let us focus on the shadows on the object itself,
118we&#39;ll come back to the shadows cast by the object on the
119surface later.</p>
120
121<p>Shadows on any surface always follow the shape of the
122surface. A spherical onigiri would have a circular shadow:</p>
123
124<p><img src="https://u.peppe.rs/FU.png" alt="riceball_shadow" /></p>
125
126<p>A couple of noticeable changes:</p> 91<p>A couple of noticeable changes:</p>
127 92<p><strong>Layers</strong>: The layer containing the seaweed has been hidden.<br />
128<p><strong>Layers</strong>: The layer containing the seaweed has been hidden.<br/> 93<strong>Color</strong>: The color of the shadow is just a slightly lighter version of the original object (reduce the Value on the HSV scale).<br />
129<strong>Color</strong>: The color of the shadow is just a slightly 94<strong>Area</strong>: The shadow does not go all the way (notice the bottom edges).</p>
130lighter version of the original object (reduce the Value on 95<p>The shadow does not go all the way because we will be filling in that area with another, darker shadow! An image might explain better:</p>
131the HSV scale).<br/> 96<p><img src="https://u.peppe.rs/Br.png" /></p>
132<strong>Area</strong>: The shadow does not go all the way (notice the bottom 97<p>To emulate soft lights, reduce the value by 2 to 3 points every iteration. Notice how area <code>1</code> is much larger than area <code>4</code>. This is because an onigiri resembles a bottom heavy oblate spheroid, a sphere that is slightly fatter around the lower bottom, and areas <code>1</code> and <code>2</code> catch more light than areas <code>3</code> and <code>4</code>.</p>
133edges). </p> 98<p>Do the same with the seaweed. The seaweed, being a smaller, flatter object, doesn’t cast much of a shadow, so stop with 1 or 2 iterations of the gradient:</p>
134 99<p><img src="https://u.peppe.rs/T3.png" /></p>
135<p>The shadow does not go all the way because we will be 100<p>We’re getting there!</p>
136filling in that area with another, darker shadow! An image 101<h4 id="highlights">Highlights</h4>
137might explain better:</p> 102<p>This step handles the details on the strongly illuminated portions of the object. Seaweed is a bit glossy, lighten the edges to make it seem shiny. The rice is not as shiny, but it does form an uneven surface. Add in some shadows to promote the idea of rice grains. Here is the finished result:</p>
138 103<p><img src="https://u.peppe.rs/VE.png" /></p>
139<p><img src="https://u.peppe.rs/Br.png" alt="shadow_all" /></p> 104<h3 id="finishing-touches">Finishing Touches</h3>
140 105<p>Some color correction and <code>a e s t h e t i c</code> Japanese text later, our piece is complete!</p>
141<p>To emulate soft lights, reduce the value by 2 to 3 points 106<p><img src="https://u.peppe.rs/cn.png" /></p>
142every iteration. Notice how area <code>1</code> is much larger than 107<p>Hold on, why is it so tiny? Well, that’s because our canvas was 100x100, head over to <code>Image &gt; Scale Image</code>, set <code>Quality &gt; Interpolation</code> to <code>None</code> and scale it up to 700x700, et voilà!</p>
143area <code>4</code>. This is because an onigiri resembles a bottom 108<p><img src="https://u.peppe.rs/CH.png" /></p>
144heavy oblate spheroid, a sphere that is slightly fatter 109</body>
145around the lower bottom, and areas <code>1</code> and <code>2</code> catch more 110</html>
146light than areas <code>3</code> and <code>4</code>.</p>
147
148<p>Do the same with the seaweed. The seaweed, being a smaller,
149flatter object, doesn&#39;t cast much of a shadow, so stop with
1501 or 2 iterations of the gradient:</p>
151
152<p><img src="https://u.peppe.rs/T3.png" alt="shadow_weed" /></p>
153
154<p>We&#39;re getting there!</p>
155
156<h4 id="Highlights">Highlights</h4>
157
158<p>This step handles the details on the strongly illuminated
159portions of the object. Seaweed is a bit glossy, lighten the
160edges to make it seem shiny. The rice is not as shiny, but
161it does form an uneven surface. Add in some shadows to
162promote the idea of rice grains. Here is the finished
163result:</p>
164
165<p><img src="https://u.peppe.rs/VE.png" alt="highlights" /></p>
166
167<h3 id="Finishing%20Touches">Finishing Touches</h3>
168
169<p>Some color correction and <code>a e s t h e t i c</code> Japanese text
170later, our piece is complete!</p>
171
172<p><img src="https://u.peppe.rs/cn.png" alt="small_onigiri" /></p>
173
174<p>Hold on, why is it so tiny? Well, that&#39;s because our canvas
175was 100x100, head over to <code>Image &#62; Scale Image</code>, set
176<code>Quality &#62; Interpolation</code> to <code>None</code> and scale it up to
177700x700, et voilà!</p>
178
179<p><img src="https://u.peppe.rs/CH.png" alt="big_onigiri" /></p>
180 111
181 </div> 112 </div>
182 113
diff --git a/docs/posts/rapid_refactoring_with_vim/index.html b/docs/posts/rapid_refactoring_with_vim/index.html
index a309066..36d06fc 100644
--- a/docs/posts/rapid_refactoring_with_vim/index.html
+++ b/docs/posts/rapid_refactoring_with_vim/index.html
@@ -37,207 +37,161 @@
37 Rapid Refactoring With Vim 37 Rapid Refactoring With Vim
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>Last weekend, I was tasked with refactoring the 96 unit 40 <!DOCTYPE html>
41tests on 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42<a href="https://github.com/ruma/ruma-events/pull/70">ruma-events</a> 42<head>
43to use strictly typed json objects using <code>serde_json::json!</code> 43 <meta charset="utf-8" />
44instead of raw strings. It was rather painless thanks to 44 <meta name="generator" content="pandoc" />
45vim :)</p> 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46 46 <title>rapid_refactoring_with_vim</title>
47<p>Here&#39;s a small sample of what had to be done (note the lines 47 <style>
48prefixed with the arrow):</p> 48 code{white-space: pre-wrap;}
49 49 span.smallcaps{font-variant: small-caps;}
50<pre><code>→ use serde_json::{from_str}; 50 span.underline{text-decoration: underline;}
51 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52 #[test] 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 fn deserialize() { 53 ul.task-list{list-style: none;}
54 assert_eq!( 54 pre > code.sourceCode { white-space: pre; position: relative; }
55→ from_str::&#60;Action&#62;(r#&#34;{&#34;set_tweak&#34;: &#34;highlight&#34;}&#34;#), 55 pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
56 Action::SetTweak(Tweak::Highlight { value: true }) 56 pre > code.sourceCode > span:empty { height: 1.2em; }
57 ); 57 code.sourceCode > span { color: inherit; text-decoration: inherit; }
58 } 58 div.sourceCode { margin: 1em 0; }
59</code></pre> 59 pre.sourceCode { margin: 0; }
60 60 @media screen {
61 div.sourceCode { overflow: auto; }
62 }
63 @media print {
64 pre > code.sourceCode { white-space: pre-wrap; }
65 pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
66 }
67 pre.numberSource code
68 { counter-reset: source-line 0; }
69 pre.numberSource code > span
70 { position: relative; left: -4em; counter-increment: source-line; }
71 pre.numberSource code > span > a:first-child::before
72 { content: counter(source-line);
73 position: relative; left: -1em; text-align: right; vertical-align: baseline;
74 border: none; display: inline-block;
75 -webkit-touch-callout: none; -webkit-user-select: none;
76 -khtml-user-select: none; -moz-user-select: none;
77 -ms-user-select: none; user-select: none;
78 padding: 0 4px; width: 4em;
79 }
80 pre.numberSource { margin-left: 3em; padding-left: 4px; }
81 div.sourceCode
82 { }
83 @media screen {
84 pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
85 }
86 code span.al { font-weight: bold; } /* Alert */
87 code span.an { font-style: italic; } /* Annotation */
88 code span.cf { font-weight: bold; } /* ControlFlow */
89 code span.co { font-style: italic; } /* Comment */
90 code span.cv { font-style: italic; } /* CommentVar */
91 code span.do { font-style: italic; } /* Documentation */
92 code span.dt { text-decoration: underline; } /* DataType */
93 code span.er { font-weight: bold; } /* Error */
94 code span.in { font-style: italic; } /* Information */
95 code span.kw { font-weight: bold; } /* Keyword */
96 code span.pp { font-weight: bold; } /* Preprocessor */
97 code span.wa { font-style: italic; } /* Warning */
98 </style>
99 <!--[if lt IE 9]>
100 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
101 <![endif]-->
102</head>
103<body>
104<p>Last weekend, I was tasked with refactoring the 96 unit tests on <a href="https://github.com/ruma/ruma-events/pull/70">ruma-events</a> to use strictly typed json objects using <code>serde_json::json!</code> instead of raw strings. It was rather painless thanks to vim :)</p>
105<p>Here’s a small sample of what had to be done (note the lines prefixed with the arrow):</p>
106<div class="sourceCode" id="cb1"><pre class="sourceCode rust"><code class="sourceCode rust"><span id="cb1-1"><a href="#cb1-1"></a>→ <span class="kw">use</span> <span class="pp">serde_json::</span><span class="op">{</span>from_str<span class="op">};</span></span>
107<span id="cb1-2"><a href="#cb1-2"></a> </span>
108<span id="cb1-3"><a href="#cb1-3"></a> <span class="at">#[</span>test<span class="at">]</span></span>
109<span id="cb1-4"><a href="#cb1-4"></a> <span class="kw">fn</span> deserialize() <span class="op">{</span></span>
110<span id="cb1-5"><a href="#cb1-5"></a> <span class="pp">assert_eq!</span>(</span>
111<span id="cb1-6"><a href="#cb1-6"></a>→ <span class="pp">from_str::</span><span class="op">&lt;</span>Action<span class="op">&gt;</span>(<span class="st">r#&quot;{&quot;set_tweak&quot;: &quot;highlight&quot;}&quot;#</span>)<span class="op">,</span></span>
112<span id="cb1-7"><a href="#cb1-7"></a> <span class="pp">Action::</span>SetTweak(<span class="pp">Tweak::</span>Highlight <span class="op">{</span> value<span class="op">:</span> <span class="cn">true</span> <span class="op">}</span>)</span>
113<span id="cb1-8"><a href="#cb1-8"></a> )<span class="op">;</span></span>
114<span id="cb1-9"><a href="#cb1-9"></a> <span class="op">}</span></span></code></pre></div>
61<p>had to be converted to:</p> 115<p>had to be converted to:</p>
62 116<div class="sourceCode" id="cb2"><pre class="sourceCode rust"><code class="sourceCode rust"><span id="cb2-1"><a href="#cb2-1"></a>→ <span class="kw">use</span> <span class="pp">serde_json::</span><span class="op">{</span>from_value<span class="op">};</span></span>
63<pre><code>→ use serde_json::{from_value}; 117<span id="cb2-2"><a href="#cb2-2"></a> </span>
64 118<span id="cb2-3"><a href="#cb2-3"></a> <span class="at">#[</span>test<span class="at">]</span></span>
65 #[test] 119<span id="cb2-4"><a href="#cb2-4"></a> <span class="kw">fn</span> deserialize() <span class="op">{</span></span>
66 fn deserialize() { 120<span id="cb2-5"><a href="#cb2-5"></a> <span class="pp">assert_eq!</span>(</span>
67 assert_eq!( 121<span id="cb2-6"><a href="#cb2-6"></a>→ <span class="pp">from_value::</span><span class="op">&lt;</span>Action<span class="op">&gt;</span>(<span class="pp">json!</span>(<span class="op">{</span><span class="st">&quot;set_tweak&quot;</span><span class="op">:</span> <span class="st">&quot;highlight&quot;</span><span class="op">}</span>))<span class="op">,</span></span>
68→ from_value::&#60;Action&#62;(json!({&#34;set_tweak&#34;: &#34;highlight&#34;})), 122<span id="cb2-7"><a href="#cb2-7"></a> <span class="pp">Action::</span>SetTweak(<span class="pp">Tweak::</span>Highlight <span class="op">{</span> value<span class="op">:</span> <span class="cn">true</span> <span class="op">}</span>)</span>
69 Action::SetTweak(Tweak::Highlight { value: true }) 123<span id="cb2-8"><a href="#cb2-8"></a> )<span class="op">;</span></span>
70 ); 124<span id="cb2-9"><a href="#cb2-9"></a> <span class="op">}</span></span></code></pre></div>
71 } 125<h3 id="the-arglist">The arglist</h3>
72</code></pre> 126<p>For the initial pass, I decided to handle imports, this was a simple find and replace operation, done to all the files containing tests. Luckily, modules (and therefore files) containing tests in Rust are annotated with the <code>#[cfg(test)]</code> attribute. I opened all such files:</p>
73 127<div class="sourceCode" id="cb3"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1"></a><span class="co"># `grep -l pattern files` lists all the files</span></span>
74<h3 id="The%20arglist">The arglist</h3> 128<span id="cb3-2"><a href="#cb3-2"></a><span class="co"># matching the pattern</span></span>
75 129<span id="cb3-3"><a href="#cb3-3"></a></span>
76<p>For the initial pass, I decided to handle imports, this was 130<span id="cb3-4"><a href="#cb3-4"></a><span class="ex">vim</span> <span class="va">$(</span><span class="fu">grep</span> -l <span class="st">&#39;cfg\(test\)&#39;</span> ./**/*.rs<span class="va">)</span></span>
77a simple find and replace operation, done to all the files 131<span id="cb3-5"><a href="#cb3-5"></a></span>
78containing tests. Luckily, modules (and therefore files) 132<span id="cb3-6"><a href="#cb3-6"></a><span class="co"># expands to something like:</span></span>
79containing tests in Rust are annotated with the 133<span id="cb3-7"><a href="#cb3-7"></a><span class="ex">vim</span> push_rules.rs room/member.rs key/verification/lib.rs</span></code></pre></div>
80<code>#[cfg(test)]</code> attribute. I opened all such files:</p> 134<p>Starting vim with more than one file at the shell prompt populates the arglist. Hit <code>:args</code> to see the list of files currently ready to edit. The square [brackets] indicate the current file. Navigate through the arglist with <code>:next</code> and <code>:prev</code>. I use tpope’s vim-unimpaired <a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>, which adds <code>]a</code> and <code>[a</code>, mapped to <code>:next</code> and <code>:prev</code>.</p>
81 135<p>All that’s left to do is the find and replace, for which we will be using vim’s <code>argdo</code>, applying a substitution to every file in the arglist:</p>
82<pre><code># `grep -l pattern files` lists all the files 136<pre><code>:argdo s/from_str/from_value/g</code></pre>
83# matching the pattern 137<h3 id="the-quickfix-list">The quickfix list</h3>
84 138<p>Next up, replacing <code>r#" ... "#</code> with <code>json!( ... )</code>. I couldn’t search and replace that trivially, so I went with a macro call <a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a> instead, starting with the cursor on ‘r’, represented by the caret, in my attempt to breakdown the process:</p>
85vim $(grep -l &#39;cfg\(test\)&#39; .&#47;**&#47;*.rs) 139<pre><code>BUFFER: r#&quot; ... &quot;#;
86
87# expands to something like:
88vim push_rules.rs room&#47;member.rs key&#47;verification&#47;lib.rs
89</code></pre>
90
91<p>Starting vim with more than one file at the shell prompt
92populates the arglist. Hit <code>:args</code> to see the list of
93files currently ready to edit. The square [brackets]
94indicate the current file. Navigate through the arglist
95with <code>:next</code> and <code>:prev</code>. I use tpope&#39;s vim-unimpaired
96<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>, which adds <code>]a</code> and <code>[a</code>, mapped to <code>:next</code> and
97<code>:prev</code>.</p>
98
99<p>All that&#39;s left to do is the find and replace, for which we
100will be using vim&#39;s <code>argdo</code>, applying a substitution to
101every file in the arglist:</p>
102
103<pre><code>:argdo s&#47;from_str&#47;from_value&#47;g
104</code></pre>
105
106<h3 id="The%20quickfix%20list">The quickfix list</h3>
107
108<p>Next up, replacing <code>r#&#34; ... &#34;#</code> with <code>json!( ... )</code>. I
109couldn&#39;t search and replace that trivially, so I went with a
110macro call <sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup> instead, starting with the cursor on
111&#8216;r&#8217;, represented by the caret, in my attempt to breakdown
112the process:</p>
113
114<pre><code>BUFFER: r#&#34; ... &#34;#;
115 ^ 140 ^
116 141
117ACTION: vllsjson!( 142ACTION: vllsjson!(
118 143
119BUFFER json!( ... &#34;#; 144BUFFER json!( ... &quot;#;
120 ^ 145 ^
121 146
122ACTION: &#60;esc&#62;$F# 147ACTION: &lt;esc&gt;$F#
123 148
124BUFFER: json!( ... &#34;#; 149BUFFER: json!( ... &quot;#;
125 ^ 150 ^
126 151
127ACTION: vhs)&#60;esc&#62; 152ACTION: vhs)&lt;esc&gt;
128
129BUFFER: json!( ... );
130</code></pre>
131
132<p>Here&#39;s the recorded <sup id="fnref3"><a href="#fn3" rel="footnote">3</a></sup> macro in all its glory:
133<code>vllsjson!(&#60;esc&#62;$F#vhs)&#60;esc&#62;</code>. </p>
134
135<p>Great! So now we just go ahead, find every occurrence of
136<code>r#</code> and apply the macro right? Unfortunately, there were
137more than a few occurrences of raw strings that had to stay
138raw strings. Enter, the quickfix list.</p>
139
140<p>The idea behind the quickfix list is to jump from one
141position in a file to another (maybe in a different file),
142much like how the arglist lets you jump from one file to
143another.</p>
144
145<p>One of the easiest ways to populate this list with a bunch
146of positions is to use <code>vimgrep</code>:</p>
147 153
154BUFFER: json!( ... );</code></pre>
155<p>Here’s the recorded <a href="#fn3" class="footnote-ref" id="fnref3" role="doc-noteref"><sup>3</sup></a> macro in all its glory: <code>vllsjson!(&lt;esc&gt;$F#vhs)&lt;esc&gt;</code>.</p>
156<p>Great! So now we just go ahead, find every occurrence of <code>r#</code> and apply the macro right? Unfortunately, there were more than a few occurrences of raw strings that had to stay raw strings. Enter, the quickfix list.</p>
157<p>The idea behind the quickfix list is to jump from one position in a file to another (maybe in a different file), much like how the arglist lets you jump from one file to another.</p>
158<p>One of the easiest ways to populate this list with a bunch of positions is to use <code>vimgrep</code>:</p>
148<pre><code># basic usage 159<pre><code># basic usage
149:vimgrep pattern files 160:vimgrep pattern files
150 161
151# search for raw strings 162# search for raw strings
152:vimgrep &#39;r#&#39; .&#47;**&#47;*.rs 163:vimgrep &#39;r#&#39; ./**/*.rs</code></pre>
153</code></pre> 164<p>Like <code>:next</code> and <code>:prev</code>, you can navigate the quickfix list with <code>:cnext</code> and <code>:cprev</code>. Every time you move up or down the list, vim indicates your index:</p>
154 165<pre><code>(1 of 131): r#&quot;{&quot;set_tweak&quot;: &quot;highlight&quot;}&quot;#;</code></pre>
155<p>Like <code>:next</code> and <code>:prev</code>, you can navigate the quickfix list 166<p>And just like <code>argdo</code>, you can <code>cdo</code> to apply commands to <em>every</em> match in the quickfix list:</p>
156with <code>:cnext</code> and <code>:cprev</code>. Every time you move up or down 167<pre><code>:cdo norm! @q</code></pre>
157the list, vim indicates your index:</p> 168<p>But, I had to manually pick out matches, and it involved some button mashing.</p>
158 169<h3 id="external-filtering">External Filtering</h3>
159<pre><code>(1 of 131): r#&#34;{&#34;set_tweak&#34;: &#34;highlight&#34;}&#34;#; 170<p>Some code reviews later, I was asked to format all the json inside the <code>json!</code> macro. All you have to do is pass a visual selection through a pretty json printer. Select the range to be formatted in visual mode, and hit <code>:</code>, you will notice the command line displaying what seems to be gibberish:</p>
160</code></pre> 171<pre><code>:&#39;&lt;,&#39;&gt;</code></pre>
161 172<p><code>'&lt;</code> and <code>'&gt;</code> are <em>marks</em> <a href="#fn4" class="footnote-ref" id="fnref4" role="doc-noteref"><sup>4</sup></a>. More specifically, they are marks that vim sets automatically every time you make a visual selection, denoting the start and end of the selection.</p>
162<p>And just like <code>argdo</code>, you can <code>cdo</code> to apply commands to
163<em>every</em> match in the quickfix list:</p>
164
165<pre><code>:cdo norm! @q
166</code></pre>
167
168<p>But, I had to manually pick out matches, and it involved
169some button mashing.</p>
170
171<h3 id="External%20Filtering">External Filtering</h3>
172
173<p>Some code reviews later, I was asked to format all the json
174inside the <code>json!</code> macro. All you have to do is pass a
175visual selection through a pretty json printer. Select the
176range to be formatted in visual mode, and hit <code>:</code>, you will
177notice the command line displaying what seems to be
178gibberish:</p>
179
180<pre><code>:&#39;&#60;,&#39;&#62;
181</code></pre>
182
183<p><code>&#39;&#60;</code> and <code>&#39;&#62;</code> are <em>marks</em> <sup id="fnref4"><a href="#fn4" rel="footnote">4</a></sup>. More
184specifically, they are marks that vim sets automatically
185every time you make a visual selection, denoting the start
186and end of the selection.</p>
187
188<p>A range is one or more line specifiers separated by a <code>,</code>:</p> 173<p>A range is one or more line specifiers separated by a <code>,</code>:</p>
189
190<pre><code>:1,7 lines 1 through 7 174<pre><code>:1,7 lines 1 through 7
191:32 just line 32 175:32 just line 32
192:. the current line 176:. the current line
193:.,$ the current line to the last line 177:.,$ the current line to the last line
194:&#39;a,&#39;b mark &#39;a&#39; to mark &#39;b&#39; 178:&#39;a,&#39;b mark &#39;a&#39; to mark &#39;b&#39;</code></pre>
195</code></pre> 179<p>Most <code>:</code> commands can be prefixed by ranges. <code>:help usr_10.txt</code> for more on that.</p>
196 180<p>Alright, lets pass json through <code>python -m json.tool</code>, a json formatter that accepts <code>stdin</code> (note the use of <code>!</code> to make use of an external program):</p>
197<p>Most <code>:</code> commands can be prefixed by ranges. <code>:help 181<pre><code>:&#39;&lt;,&#39;&gt;!python -m json.tool</code></pre>
198usr_10.txt</code> for more on that.</p> 182<p>Unfortunately that didn’t quite work for me because the range included some non-json text as well, a mix of regex and macros helped fix that. I think you get the drift.</p>
199 183<p>Another fun filter I use from time to time is <code>:!sort</code>, to sort css attributes, or <code>:!uniq</code> to remove repeated imports.</p>
200<p>Alright, lets pass json through <code>python -m json.tool</code>, a 184<section class="footnotes" role="doc-endnotes">
201json formatter that accepts <code>stdin</code> (note the use of <code>!</code> to 185<hr />
202make use of an external program):</p>
203
204<pre><code>:&#39;&#60;,&#39;&#62;!python -m json.tool
205</code></pre>
206
207<p>Unfortunately that didn&#39;t quite work for me because the
208range included some non-json text as well, a mix of regex
209and macros helped fix that. I think you get the drift.</p>
210
211<p>Another fun filter I use from time to time is <code>:!sort</code>, to
212sort css attributes, or <code>:!uniq</code> to remove repeated imports.</p>
213
214<div class="footnotes">
215<hr/>
216<ol> 186<ol>
217 187<li id="fn1" role="doc-endnote"><p>https://github.com/tpope/vim-unimpaired It also handles various other mappings, <code>]q</code> and <code>[q</code> to navigate the quickfix list for example<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
218<li id="fn1"> 188<li id="fn2" role="doc-endnote"><p><code>:help recording</code><a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
219<p><a href="https://github.com/tpope/vim-unimpaired">https:&#47;&#47;github.com&#47;tpope&#47;vim-unimpaired</a> 189<li id="fn3" role="doc-endnote"><p>When I’m recording a macro, I prefer starting out by storing it in register <code>q</code>, and then copying it over to another register if it works as intended. I think of <code>qq</code> as ‘quick record’.<a href="#fnref3" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
220It also handles various other mappings, <code>]q</code> and <code>[q</code> to 190<li id="fn4" role="doc-endnote"><p><code>:help mark-motions</code><a href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
221navigate the quickfix list for example&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p>
222</li>
223
224<li id="fn2">
225<p><code>:help recording</code>&#160;<a href="#fnref2" rev="footnote">&#8617;</a></p>
226</li>
227
228<li id="fn3">
229<p>When I&#39;m recording a macro, I prefer starting out by
230storing it in register <code>q</code>, and then copying it over to
231another register if it works as intended. I think of <code>qq</code> as
232&#8216;quick record&#8217;.&#160;<a href="#fnref3" rev="footnote">&#8617;</a></p>
233</li>
234
235<li id="fn4">
236<p><code>:help mark-motions</code>&#160;<a href="#fnref4" rev="footnote">&#8617;</a></p>
237</li>
238
239</ol> 191</ol>
240</div> 192</section>
193</body>
194</html>
241 195
242 </div> 196 </div>
243 197
diff --git a/docs/posts/static_sites_with_bash/index.html b/docs/posts/static_sites_with_bash/index.html
index 1919cea..fff53dc 100644
--- a/docs/posts/static_sites_with_bash/index.html
+++ b/docs/posts/static_sites_with_bash/index.html
@@ -37,61 +37,99 @@
37 Static Sites With Bash 37 Static Sites With Bash
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>After going through a bunch of static site generators 40 <!DOCTYPE html>
41(<a href="https://blog.getpelican.com/">pelican</a>, 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42<a href="https://gohugo.io">hugo</a>, 42<head>
43<a href="https://github.com/icyphox/vite">vite</a>), I decided to roll 43 <meta charset="utf-8" />
44my own. If you are more of the &#8216;show me the code&#8217; kinda guy, 44 <meta name="generator" content="pandoc" />
45<a href="https://github.com/nerdypepper/site">here</a> you go.</p> 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46 46 <title>static_sites_with_bash</title>
47<h3 id="Text%20formatting">Text formatting</h3> 47 <style>
48 48 code{white-space: pre-wrap;}
49<p>I chose to write in markdown, and convert 49 span.smallcaps{font-variant: small-caps;}
50to html with <a href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p> 50 span.underline{text-decoration: underline;}
51 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52<h3 id="Directory%20structure">Directory structure</h3> 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 53 ul.task-list{list-style: none;}
54<p>I host my site on GitHub pages, so 54 pre > code.sourceCode { white-space: pre; position: relative; }
55<code>docs&#47;</code> has to be the entry point. Markdown formatted posts 55 pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
56go into <code>posts&#47;</code>, get converted into html, and end up in 56 pre > code.sourceCode > span:empty { height: 1.2em; }
57<code>docs&#47;index.html</code>, something like this:</p> 57 code.sourceCode > span { color: inherit; text-decoration: inherit; }
58 58 div.sourceCode { margin: 1em 0; }
59<pre><code>posts=$(ls -t .&#47;posts) # chronological order! 59 pre.sourceCode { margin: 0; }
60for f in $posts; do 60 @media screen {
61 file=&#34;.&#47;posts&#47;&#34;$f # `ls` mangled our file paths 61 div.sourceCode { overflow: auto; }
62 echo &#34;generating post $file&#34; 62 }
63 63 @media print {
64 html=$(lowdown &#34;$file&#34;) 64 pre > code.sourceCode { white-space: pre-wrap; }
65 echo -e &#34;html&#34; &#62;&#62; docs&#47;index.html 65 pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
66done 66 }
67</code></pre> 67 pre.numberSource code
68 68 { counter-reset: source-line 0; }
69<h3 id="Assets">Assets</h3> 69 pre.numberSource code > span
70 70 { position: relative; left: -4em; counter-increment: source-line; }
71<p>Most static site generators recommend dropping image 71 pre.numberSource code > span > a:first-child::before
72assets into the site source itself. That does have it&#8217;s 72 { content: counter(source-line);
73merits, but I prefer hosting images separately:</p> 73 position: relative; left: -1em; text-align: right; vertical-align: baseline;
74 74 border: none; display: inline-block;
75<pre><code># strip file extension 75 -webkit-touch-callout: none; -webkit-user-select: none;
76ext=&#34;${1##*.}&#34; 76 -khtml-user-select: none; -moz-user-select: none;
77 77 -ms-user-select: none; user-select: none;
78# generate a random file name 78 padding: 0 4px; width: 4em;
79id=$( cat &#47;dev&#47;urandom | tr -dc &#39;a-zA-Z0-9&#39; | fold -w 2 | head -n 1 ) 79 }
80id=&#34;$id.$ext&#34; 80 pre.numberSource { margin-left: 3em; padding-left: 4px; }
81 81 div.sourceCode
82# copy to my file host 82 { }
83scp -P 443 &#34;$1&#34; emerald:files&#47;&#34;$id&#34; 83 @media screen {
84echo &#34;https:&#47;&#47;u.peppe.rs&#47;$id&#34; 84 pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
85</code></pre> 85 }
86 86 code span.al { font-weight: bold; } /* Alert */
87<h3 id="Templating">Templating</h3> 87 code span.an { font-style: italic; } /* Annotation */
88 88 code span.cf { font-weight: bold; } /* ControlFlow */
89<p><a href="https://github.com/NerdyPepper/site/blob/master/generate.sh"><code>generate.sh</code></a> 89 code span.co { font-style: italic; } /* Comment */
90brings the above bits and pieces together (with some extra 90 code span.cv { font-style: italic; } /* CommentVar */
91cruft to avoid javascript). It uses <code>sed</code> to produce nice 91 code span.do { font-style: italic; } /* Documentation */
92titles from the file names (removes underscores, 92 code span.dt { text-decoration: underline; } /* DataType */
93title-case), and <code>date(1)</code> to add the date to each post 93 code span.er { font-weight: bold; } /* Error */
94listing!</p> 94 code span.in { font-style: italic; } /* Information */
95 code span.kw { font-weight: bold; } /* Keyword */
96 code span.pp { font-weight: bold; } /* Preprocessor */
97 code span.wa { font-style: italic; } /* Warning */
98 </style>
99 <!--[if lt IE 9]>
100 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
101 <![endif]-->
102</head>
103<body>
104<p>After going through a bunch of static site generators (<a href="https://blog.getpelican.com/">pelican</a>, <a href="https://gohugo.io">hugo</a>, <a href="https://github.com/icyphox/vite">vite</a>), I decided to roll my own. If you are more of the ‘show me the code’ kinda guy, <a href="https://github.com/nerdypepper/site">here</a> you go.</p>
105<h3 id="text-formatting">Text formatting</h3>
106<p>I chose to write in markdown, and convert to html with <a href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p>
107<h3 id="directory-structure">Directory structure</h3>
108<p>I host my site on GitHub pages, so <code>docs/</code> has to be the entry point. Markdown formatted posts go into <code>posts/</code>, get converted into html, and end up in <code>docs/index.html</code>, something like this:</p>
109<div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1"></a><span class="va">posts=$(</span><span class="fu">ls</span> -t ./posts<span class="va">)</span> <span class="co"># chronological order!</span></span>
110<span id="cb1-2"><a href="#cb1-2"></a><span class="kw">for</span> <span class="ex">f</span> in <span class="va">$posts</span><span class="kw">;</span> <span class="kw">do</span></span>
111<span id="cb1-3"><a href="#cb1-3"></a> <span class="va">file=</span><span class="st">&quot;./posts/&quot;</span><span class="va">$f</span> <span class="co"># `ls` mangled our file paths</span></span>
112<span id="cb1-4"><a href="#cb1-4"></a> <span class="bu">echo</span> <span class="st">&quot;generating post </span><span class="va">$file</span><span class="st">&quot;</span></span>
113<span id="cb1-5"><a href="#cb1-5"></a></span>
114<span id="cb1-6"><a href="#cb1-6"></a> <span class="va">html=$(</span><span class="ex">lowdown</span> <span class="st">&quot;</span><span class="va">$file</span><span class="st">&quot;</span><span class="va">)</span></span>
115<span id="cb1-7"><a href="#cb1-7"></a> <span class="bu">echo</span> -e <span class="st">&quot;html&quot;</span> <span class="op">&gt;&gt;</span> docs/index.html</span>
116<span id="cb1-8"><a href="#cb1-8"></a><span class="kw">done</span></span></code></pre></div>
117<h3 id="assets">Assets</h3>
118<p>Most static site generators recommend dropping image assets into the site source itself. That does have it’s merits, but I prefer hosting images separately:</p>
119<div class="sourceCode" id="cb2"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1"></a><span class="co"># strip file extension</span></span>
120<span id="cb2-2"><a href="#cb2-2"></a><span class="va">ext=</span><span class="st">&quot;</span><span class="va">${1##</span>*.<span class="va">}</span><span class="st">&quot;</span></span>
121<span id="cb2-3"><a href="#cb2-3"></a></span>
122<span id="cb2-4"><a href="#cb2-4"></a><span class="co"># generate a random file name</span></span>
123<span id="cb2-5"><a href="#cb2-5"></a><span class="va">id=$(</span> <span class="fu">cat</span> /dev/urandom <span class="kw">|</span> <span class="fu">tr</span> -dc <span class="st">&#39;a-zA-Z0-9&#39;</span> <span class="kw">|</span> <span class="ex">fold</span> -w 2 <span class="kw">|</span> <span class="fu">head</span> -n 1 <span class="va">)</span></span>
124<span id="cb2-6"><a href="#cb2-6"></a><span class="va">id=</span><span class="st">&quot;</span><span class="va">$id</span><span class="st">.</span><span class="va">$ext</span><span class="st">&quot;</span></span>
125<span id="cb2-7"><a href="#cb2-7"></a></span>
126<span id="cb2-8"><a href="#cb2-8"></a><span class="co"># copy to my file host</span></span>
127<span id="cb2-9"><a href="#cb2-9"></a><span class="fu">scp</span> -P 443 <span class="st">&quot;</span><span class="va">$1</span><span class="st">&quot;</span> emerald:files/<span class="st">&quot;</span><span class="va">$id</span><span class="st">&quot;</span> </span>
128<span id="cb2-10"><a href="#cb2-10"></a><span class="bu">echo</span> <span class="st">&quot;https://u.peppe.rs/</span><span class="va">$id</span><span class="st">&quot;</span></span></code></pre></div>
129<h3 id="templating">Templating</h3>
130<p><a href="https://github.com/NerdyPepper/site/blob/master/generate.sh"><code>generate.sh</code></a> brings the above bits and pieces together (with some extra cruft to avoid javascript). It uses <code>sed</code> to produce nice titles from the file names (removes underscores, title-case), and <code>date(1)</code> to add the date to each post listing!</p>
131</body>
132</html>
95 133
96 </div> 134 </div>
97 135
diff --git a/docs/posts/termux_tandem/index.html b/docs/posts/termux_tandem/index.html
index 972f0e2..a2aba29 100644
--- a/docs/posts/termux_tandem/index.html
+++ b/docs/posts/termux_tandem/index.html
@@ -37,52 +37,46 @@
37 Termux Tandem 37 Termux Tandem
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>I learnt about <code>termux</code> from a friend on IRC recently. 40 <!DOCTYPE html>
41It looked super gimmicky to me at first, but it eventually 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42proved to be useful. Here&#39;s what I use it for:</p> 42<head>
43 43 <meta charset="utf-8" />
44 <meta name="generator" content="pandoc" />
45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46 <title>termux_tandem</title>
47 <style>
48 code{white-space: pre-wrap;}
49 span.smallcaps{font-variant: small-caps;}
50 span.underline{text-decoration: underline;}
51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 ul.task-list{list-style: none;}
54 </style>
55 <!--[if lt IE 9]>
56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57 <![endif]-->
58</head>
59<body>
60<p>I learnt about <code>termux</code> from a friend on IRC recently. It looked super gimmicky to me at first, but it eventually proved to be useful. Here’s what I use it for:</p>
44<h3 id="rsync">rsync</h3> 61<h3 id="rsync">rsync</h3>
45 62<p>Ever since I degoogled my android device, syncing files between my phone and my PC has always been a pain. I’m looking at you MTP. But, with <code>termux</code> and <code>sshd</code> all set up, it’s as simple as:</p>
46<p>Ever since I degoogled my android device, syncing files
47between my phone and my PC has always been a pain. I&#8217;m
48looking at you MTP. But, with <code>termux</code> and <code>sshd</code> all set up,
49it&#39;s as simple as:</p>
50
51<pre><code>$ arp 63<pre><code>$ arp
52Address HWtype HWad ... 64Address HWtype HWad ...
53192.168.43.187 ether d0:0 ... 65192.168.43.187 ether d0:0 ...
54 66
55$ rsync -avz 192.168.43.187:~&#47;frogs ~&#47;pics&#47;frogs 67$ rsync -avz 192.168.43.187:~/frogs ~/pics/frogs</code></pre>
56</code></pre> 68<h3 id="ssh-tmux">ssh &amp; tmux</h3>
57 69<p>My phone doubles as a secondary view into my main machine with <code>ssh</code> and <code>tmux</code>. When I am away from my PC (read: sitting across the room), I check build status and IRC messages by <code>ssh</code>ing into a tmux session running the said build or weechat.</p>
58<h3 id="ssh%20&amp;#38;%20tmux">ssh &#38; tmux</h3> 70<h3 id="file-uploads">file uploads</h3>
59 71<p>Not being able to access my (ssh-only) file host was crippling. With a <code>bash</code> instance on my phone, I just copied over my ssh keys, and popped in a file upload script (a glorified <code>scp</code>). Now I just have to figure out a way to clean up these file names …</p>
60<p>My phone doubles as a secondary view into my main machine 72<pre><code>~/storage/pictures/ $ ls
61with <code>ssh</code> and <code>tmux</code>. When I am away from my PC (read:
62sitting across the room), I check build status and IRC
63messages by <code>ssh</code>ing into a tmux session running the said
64build or weechat.</p>
65
66<h3 id="file%20uploads">file uploads</h3>
67
68<p>Not being able to access my (ssh-only) file host was
69crippling. With a <code>bash</code> instance on my phone, I just copied
70over my ssh keys, and popped in a file upload script (a
71glorified <code>scp</code>). Now I just have to figure out a way to
72clean up these file names &#8230;</p>
73
74<pre><code>~&#47;storage&#47;pictures&#47; $ ls
7502muf5g7b2i41.jpg 7alt3cwg77841.jpg cl4bsrge7id11.png 7302muf5g7b2i41.jpg 7alt3cwg77841.jpg cl4bsrge7id11.png
76mtZabXG.jpg p8d5c584f2841.jpg vjUxGjq.jpg 74mtZabXG.jpg p8d5c584f2841.jpg vjUxGjq.jpg</code></pre>
77</code></pre>
78
79<h3 id="cmus">cmus</h3> 75<h3 id="cmus">cmus</h3>
80 76<p>Alright, I don’t really listen to music via <code>cmus</code>, but I did use it a couple times when my default music player was acting up. <code>cmus</code> is a viable option:</p>
81<p>Alright, I don&#39;t really listen to music via <code>cmus</code>, but I 77<p><a href="https://u.peppe.rs/CP.jpg"><img src="https://u.peppe.rs/CP.jpg" /></a></p>
82did use it a couple times when my default music player was 78</body>
83acting up. <code>cmus</code> is a viable option:</p> 79</html>
84
85<p><a href="https://u.peppe.rs/CP.jpg"><img src="https://u.peppe.rs/CP.jpg" alt="cmus.png" /></a></p>
86 80
87 </div> 81 </div>
88 82
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-21 06:45:33 +0100