Repos / hi.imnhan.com / 5f01075b60
commit 5f01075b60b906bad64a6b105788cfa838771adc
Author: Nhân <hi@imnhan.com>
Date: Sat Aug 19 23:49:34 2023 +0700
WIP md to dj
diff --git a/about/index.html b/about/index.html
index f75b22e..a4bc919 100644
--- a/about/index.html
+++ b/about/index.html
@@ -36,7 +36,7 @@ <h1>About</h1>
</main>
<footer>
-© 2023 nhanb<br>
+© 2014–2023 nhanb<br>
Made with <a href="https://github.com/nhanb/s4g">s4g</a>
</footer>
diff --git a/content/posts/acer-chromebook-spin.md b/chromebook/index.dj
similarity index 91%
rename from content/posts/acer-chromebook-spin.md
rename to chromebook/index.dj
index 9a89df4..30f1ad4 100644
--- a/content/posts/acer-chromebook-spin.md
+++ b/chromebook/index.dj
@@ -1,16 +1,16 @@
Title: Acer Chromebook Spin 713 "Voxel": an adequate Crostini device, a buggy Linux laptop
-Date: 2023-04-22 15:55
-Slug: acer-chromebook-spin
-Category: consoom
+PostedAt: 2023-04-22 15:55
Thumb: images/voxel_battery.jpg
-**June 2023 update**: I [learned][11] that using pulseaudio instead of
+---
+
+*June 2023 update*: I [learned][11] that using pulseaudio instead of
pipewire works around the audio issue. The following is the original article.
---
-**TL;DR:** bright crisp screen, acceptable keyboard, thin & light build, random
+*TL;DR:* bright crisp screen, acceptable keyboard, thin & light build, random
touchpad lag on both ChromeOS and Linux, almost usable on MrChromebox UEFI +
Arch Linux except for the fact that internal speakers crash most of the time
(wired headphones work fine though). It's absolutely not worth the sticker
@@ -37,9 +37,9 @@ ## The hardware
Here it is sandwiched between a Samsung Tab S8 and a Thinkpad T530:
-
+
-
+
## ChromeOS/Crostini
@@ -98,11 +98,12 @@ ## Real Arch Linux on MrChromebox UEFI
protection. Fortunately, for this device all I needed to do was opening up the
laptop and [disconnecting the battery][7]:
-
+
-
+
-If you need more detailed instructions, here's the [official manual][8].
+If you need more detailed instructions, here's the
+[official manual](voxel_chromebook_cp7133w.pdf).
Then go [here][9] for instructions on how to download and run the MrChromebox
utility script. In my case, I also needed to enable developer mode to get
@@ -120,7 +121,7 @@ ## Real Arch Linux on MrChromebox UEFI
configs lifted straight from ChromeOS upstream. Sure enough, the device showed
up:
-
+
And it would actually play sound... for a while until it crashes. I later found
out that wired headphones and HDMI audio work just fine, so only using internal
@@ -149,7 +150,7 @@ ## Aside: Chromebook keyboard quirks on KDE
`hyper`, or `meta`). It's not a huge problem for me: I always make `capslock`
act as a `ctrl` key, so I can turn the original `ctrl` into `windows` instead:
-
+
Another problem is that the F1-12 keys are not usable: they are [mapped to
function keys][10] in MrChromebox UEFI firmware, and there's no modifier to use
@@ -159,16 +160,15 @@ ## Aside: Chromebook keyboard quirks on KDE
application-specific features that are hardwired to use F-keys are simply
unreachable: `htop` is one such example.
-
+
[1]: https://www.acer.com/us-en/chromebooks/acer-chromebook-enterprise-spin-713-cp713-3w/pdp/NX.AHAAA.006
[2]: https://git.sr.ht/~nhanb/neodots
[3]: https://wiki.archlinux.org/title/Chrome_OS_devices/Crostini
[4]: https://go.dev/
-[5]: /images/put.io_01_mpv.mp4
+[5]: ../video-streaming-3/put.io-drag-n-drop.mp4
[6]: https://orib.dev/interject.html
[7]: https://wiki.mrchromebox.tech/Firmware_Write_Protect#Hardware_Write_Protection
-[8]: /images/voxel_chromebook_cp7133w.pdf
[9]: https://mrchromebox.tech/#fwscript
[10]: https://github.com/MrChromebox/firmware/issues/349
[11]: https://github.com/WeirdTreeThing/chromebook-linux-audio/issues/2#issuecomment-1578962117
diff --git a/chromebook/index.html b/chromebook/index.html
new file mode 100644
index 0000000..5c0da84
--- /dev/null
+++ b/chromebook/index.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Acer Chromebook Spin 713 "Voxel": an adequate Crostini device, a buggy Linux laptop | Hi, I'm Nhân</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
+ <link rel="stylesheet" href="/_theme/base.css">
+</head>
+
+<body>
+
+<link rel="stylesheet" href="/_theme/navbar.css">
+<nav>
+ <a href="/">Home</a>
+ <a href="/about/">About</a>
+ <a href="/projects/">Projects</a>
+ <span class="posted-on">
+ Posted on
+ <time datetime="2023-04-22">
+ Saturday, 22 Apr 2023
+ </time>
+ </span>
+
+</nav>
+<hr class="nav-hr">
+
+
+<main>
+<h1>Acer Chromebook Spin 713 "Voxel": an adequate Crostini device, a buggy Linux laptop</h1>
+<p><strong>June 2023 update</strong>: I <a href="https://github.com/WeirdTreeThing/chromebook-linux-audio/issues/2#issuecomment-1578962117">learned</a> that using pulseaudio instead of
+pipewire works around the audio issue. The following is the original article.</p>
+<hr>
+<p><strong>TL;DR:</strong> bright crisp screen, acceptable keyboard, thin & light build, random
+touchpad lag on both ChromeOS and Linux, almost usable on MrChromebox UEFI +
+Arch Linux except for the fact that internal speakers crash most of the time
+(wired headphones work fine though). It’s absolutely not worth the sticker
+price at <a href="https://www.acer.com/us-en/chromebooks/acer-chromebook-enterprise-spin-713-cp713-3w/pdp/NX.AHAAA.006">$1,099.99</a> (lol). Maybe consider buying if you can find it at a
+heavy discount and the speakers issue has been fixed somehow.</p>
+<section id="Context">
+<h2>Context</h2>
+<p>Around 2022 I was looking for a replacement for my T530—something lighter
+with a better screen—and saw a listing for a used Acer Chromebook Spin 713-3W
+at only 10mil VND ($425, give or take). A recently released HiDPI laptop with
+an i5-1135G7 at 425 freedom dollars? And I get to play with ChromeOS/Crostini
+on a not-pathetically-weak x86 device? Sign me right up, I thought. The plan
+was to run ChromeOS/Android apps for GUI stuff, and install my usual tmux+vim
+based development <a href="https://git.sr.ht/~nhanb/neodots">environment</a> on Crostini.</p>
+</section>
+<section id="The-hardware">
+<h2>The hardware</h2>
+<ul>
+<li>
+Specs: i5-1135G7 (Tiger Lake), Xe graphics, 8GB RAM, 256GB SSD
+</li>
+<li>
+Keyboard: acceptable
+</li>
+<li>
+Screen: 2256x1504 (3:2) at 13.5“ (200dpi). Subjectively speaking, it’s
+bright, colorful and delivers crisp text—I have nothing but praise here.
+</li>
+<li>
+Speakers: worse and quieter than my Samsung Tab S8 tablet
+</li>
+</ul>
+<p>Here it is sandwiched between a Samsung Tab S8 and a Thinkpad T530:</p>
+<p><img alt="size" src="voxel_size.jpg"></p>
+<p><img alt="thickness" src="voxel_thickness.jpg"></p>
+</section>
+<section id="ChromeOS-Crostini">
+<h2>ChromeOS/Crostini</h2>
+<blockquote>
+<p>I’d just like to interject for a moment. What you’re referring to as Linux,
+is in fact, CHROME/Linux, or as I’ve recently taken to calling it, CHROME
+plus Linux. Linux is not an operating system unto itself, but rather another
+free component of a fully functioning CHROME system made useful by the CHROME
+v8, css utililties, and other vital system components comprising a full OS as
+defined by the W3C.</p>
+<p><em>– <a href="https://orib.dev/interject.html">some weird internet person</a></em></p>
+</blockquote>
+<p>As advertised, the laptop could run ChromeOS apps, Android apps, and Linux apps
+via containers. By default I got a Debian container, but since I needed
+up-to-date software for development, I set up an Arch container instead. <a href="https://wiki.archlinux.org/title/Chrome_OS_devices/Crostini">The
+process</a> itself was straightforward enough.</p>
+<p>Zoom for Android worked as expected, and to my surprise, Tailscale for Android
+managed to wrangle traffic correctly for programs running inside Crostini too!
+The only hiccup was that Magic DNS didn’t work, so I needed to put the
+hostname-IP pairs into /etc/hosts manually. I also had to change the temp dir
+from /tmp to ~/tmp for <a href="https://go.dev/">Go</a> tools to work, because Crostini programs weren’t
+allowed to exec files inside /tmp. Once I’d worked out those kinks, I could
+open up a terminal and start working as if I were on one of my Arch PCs. Hell,
+even docker/docker-compose Just Worked™ inside the container.</p>
+<p>But then came the papercuts.</p>
+<p>The touchpad would randomly lag, as in, dragging still
+worked but there was a noticeable delay between my dragging and seeing the
+cursor actually moving. The problem would just go away as randomly as it
+happened.</p>
+<p>Back when I used an actual Linux machine, I was used to having 10 virtual
+desktops, numbered from 1 to 10, with Alt-n mapped to “jump to desktop #n”, and
+Windows-n mapped to “move window to desktop #n” (the <code>0</code> key maps to
+desktop #10, naturally). While ChromeOS has a “workspaces” feature, there’s no
+way to navigate and juggle windows between them precisely and instantly.
+<em>Instantly</em> is an important keyword here: many tasks, while doable, suffered
+from gratuitous animations and tedious step-by-step navigation. This reminded
+me of when I tried to use a Macbook professionally: things kinda worked, but
+the experience would always be intrinsically worse.</p>
+<p>While Linux GUI programs were automagically put on the ChromeOS applications
+list as first class citizens, certain quality-of-life features didn’t work. For
+example, on KDE I used to be able to drag a video streaming link from the
+browser onto MPV’s taskbar icon <a href="../video-streaming-3/put.io-drag-n-drop.mp4">to play it</a>. This no longer worked on
+ChromeOS.</p>
+<p>So I jumped ship.</p>
+</section>
+<section id="Real-Arch-Linux-on-MrChromebox-UEFI">
+<h2>Real Arch Linux on MrChromebox UEFI</h2>
+<p>Installing <em>real</em> Linux on this device requires installing the MrChromebox
+custom UEFI firmware, which in turn requires disabling the firmware write
+protection. Fortunately, for this device all I needed to do was opening up the
+laptop and <a href="https://wiki.mrchromebox.tech/Firmware_Write_Protect#Hardware_Write_Protection">disconnecting the battery</a>:</p>
+<p><img alt="internals" src="voxel_internals.jpg"></p>
+<p><img alt="battery-connector" src="voxel_battery.jpg"></p>
+<p>If you need more detailed instructions, here’s the
+<a href="voxel_chromebook_cp7133w.pdf">official manual</a>.</p>
+<p>Then go <a href="https://mrchromebox.tech/#fwscript">here</a> for instructions on how to download and run the MrChromebox
+utility script. In my case, I also needed to enable developer mode to get
+access to the chrosh shell.</p>
+<p>After this I got a normal UEFI boot menu so I could pop in an Arch installer
+USB drive and carried out the installation as usual.</p>
+<p>I managed to install KDE plasma and everything worked except for audio: the
+usual “default” audio profile wouldn’t show up, even after I installed the
+necessary packages: <code>sof-firmware</code> (sound firmware for recent Intel
+generations) and <code>alsa-ucm-conf</code> (so-called topologies for these newer
+devices). After some desperate googling I found
+<a href="https://github.com/eupnea-linux/audio-scripts">https://github.com/eupnea-linux/audio-scripts</a> which installed some missing
+configs lifted straight from ChromeOS upstream. Sure enough, the device showed
+up:</p>
+<p><img alt="default-profile-get" src="voxel_audio_device.png"></p>
+<p>And it would actually play sound… for a while until it crashes. I later found
+out that wired headphones and HDMI audio work just fine, so only using internal
+speakers is problematic.</p>
+<p>I collected logs and tried googling but nothing comes up that matches my case.
+Asking in the eupnea discord server yielded an uncertain response:</p>
+<blockquote>
+<p>looks like yet again intel broke something</p>
+</blockquote>
+<p>Oh, and the random touchpad delay issue was still there, so I’m starting to
+think the touchpad hardware itself is problematic.</p>
+<p>And that’s where I’m at. I’ll probably gather more logs and submit an issue to
+the SOF project. For now, consider this a warning: the laptop as of now is
+probably not worth buying. Hell, in Vietnam you can get a second hand X1 Carbon
+6th gen with an i7-8650U and 16GB of RAM for $460 right now from
+<a href="https://chotot.com">https://chotot.com</a>; that’s a guaranteed best-in-class keyboard, decent
+screen and Linux compatibility, at just a slight decrease in performance.</p>
+<p>But hey, I would have never known any of this if I hadn’t tried, right?</p>
+</section>
+<section id="Aside-Chromebook-keyboard-quirks-on-KDE">
+<h2>Aside: Chromebook keyboard quirks on KDE</h2>
+<p>The most glaring issue is the absence of the <code>windows</code> key (aka <code>super</code>,
+<code>hyper</code>, or <code>meta</code>). It’s not a huge problem for me: I always make <code>capslock</code>
+act as a <code>ctrl</code> key, so I can turn the original <code>ctrl</code> into <code>windows</code> instead:</p>
+<p><img alt="changed-modifier-keys" src="voxel_keys_mod.jpg"></p>
+<p>Another problem is that the F1-12 keys are not usable: they are <a href="https://github.com/MrChromebox/firmware/issues/349">mapped to
+function keys</a> in MrChromebox UEFI firmware, and there’s no modifier to use
+them as F-keys either. That means no F11 to toggle fullscreen, no Alt-F4, no F9
+to toggle drop-down terminal, etc. Fortunately such global shortcuts can be
+configured trivially from KDE’s system preferences. On the other hand,
+application-specific features that are hardwired to use F-keys are simply
+unreachable: <code>htop</code> is one such example.</p>
+<p><img alt="htop-fkeys-unusable" src="voxel_keys_f.png"></p>
+</section>
+
+</main>
+
+<footer>
+© 2014–2023 nhanb<br>
+Made with <a href="https://github.com/nhanb/s4g">s4g</a>
+</footer>
+
+</body>
+
+</html>
diff --git a/content/images/voxel_audio_device.png b/chromebook/voxel_audio_device.png
similarity index 100%
rename from content/images/voxel_audio_device.png
rename to chromebook/voxel_audio_device.png
diff --git a/content/images/voxel_battery.jpg b/chromebook/voxel_battery.jpg
similarity index 100%
rename from content/images/voxel_battery.jpg
rename to chromebook/voxel_battery.jpg
diff --git a/content/images/voxel_chromebook_cp7133w.pdf b/chromebook/voxel_chromebook_cp7133w.pdf
similarity index 100%
rename from content/images/voxel_chromebook_cp7133w.pdf
rename to chromebook/voxel_chromebook_cp7133w.pdf
diff --git a/content/images/voxel_internals.jpg b/chromebook/voxel_internals.jpg
similarity index 100%
rename from content/images/voxel_internals.jpg
rename to chromebook/voxel_internals.jpg
diff --git a/content/images/voxel_keys_f.png b/chromebook/voxel_keys_f.png
similarity index 100%
rename from content/images/voxel_keys_f.png
rename to chromebook/voxel_keys_f.png
diff --git a/content/images/voxel_keys_mod.jpg b/chromebook/voxel_keys_mod.jpg
similarity index 100%
rename from content/images/voxel_keys_mod.jpg
rename to chromebook/voxel_keys_mod.jpg
diff --git a/content/images/voxel_size.jpg b/chromebook/voxel_size.jpg
similarity index 100%
rename from content/images/voxel_size.jpg
rename to chromebook/voxel_size.jpg
diff --git a/content/images/voxel_thickness.jpg b/chromebook/voxel_thickness.jpg
similarity index 100%
rename from content/images/voxel_thickness.jpg
rename to chromebook/voxel_thickness.jpg
diff --git a/content/posts/modern-vim-plugin-management-pathogen-vs-vundle_vi.md b/content/posts/modern-vim-plugin-management-pathogen-vs-vundle_vi.md
deleted file mode 100644
index 66457f0..0000000
--- a/content/posts/modern-vim-plugin-management-pathogen-vs-vundle_vi.md
+++ /dev/null
@@ -1,272 +0,0 @@
-date: 2013-05-13 12:00
-title: Quản lý plugin trong vim - Pathogen vs Vundle
-slug: modern-vim-plugin-management-pathogen-vs-vundle
-lang: vi
-category: Tutorials
-tags: vim
-summary: Pimp your vim with little effort.
-
-Dành cho những ai lười đọc: Vundle tốt hơn Pathogen.
-
-Bài viết này sẽ giải thich cách hoạt động của plugin trong vim và cách quản lý plugins bằng những
-công cụ được cộng đồng phát triển: Pathogen hoặc Vundle. Trong bài viết này tôi chỉ làm hướng dẫn
-cụ thể cho máy chạy Linux và đã cài sẵn git. Nếu không rõ cách cài git, bạn có thể hỏi
-Google.
-
-# Cấu trúc vim plugins
-
-Một plugin trong vim đơn giản chỉ là 1 nhóm các files có nhiệm vụ thay đổi hoặc thêm tính
-năng cho vim. Theo mặc định thì vim sẽ tìm trong home folder của người dùng (chính là
-`/home/username` hoặc có thể viết tắt là `~`):
-
-## ~/.vimrc (file)
-
-Đây là nơi bạn tùy biến mọi thứ trong vim: căn lề, gán phím, vân vân... Bài viết này sẽ không đề
-cập chi tiết cách tùy biến như thế nào. Lúc này bạn chỉ cần biết là nó có 1 file đó.
-
-Để tiện quản lý, chúng ta hãy đem file này vào folder `~/.vim`. Hãy tạo một file `~/.vim/vimrc`
-rồi dẫn symlink trỏ vào nó:
-
- :::bash
- touch ~/.vim/vimrc
- ln -s ~/.vim/vimrc ~/.vimrc
-
-## ~/.vim (directory)
-
-Folder này sẽ chứa một vài folder con khác. Ví dụ:
-
-- autoload
-- ftplugin
-- colors
-- syntax
-- doc
-
-Mỗi folder đều có một nhiệm vụ nhất định: `colors` chứa colorschemes, `syntax` cho phép
-bạn tùy chỉnh tô màu code, `doc` chứa tài liệu hướng dẫn... Một plugin thường sẽ chèn nhiều
-file vào nhiều folder ở đây. Hãy lấy plugin [tagbar](https://github.com/majutsushi/tagbar)
-làm ví dụ: ta sẽ cài nó bằng cách copy hết nội dung của nó vào `~/.vim`:
-
- :::bash
- ~/.vim
- ├── autoload
- │ └── tagbar.vim
- ├── doc
- │ ├── tagbar.txt
- │ └── tags
- ├── plugin
- │ └── tagbar.vim
- ├── README
- └── syntax
- └── tagbar.vim
-
-Everything looks good. Just copy and paste the whole thing, nice and simple. How about adding a
-decent colorscheme? Let's install [solarized](https://github.com/altercation/vim-colors-solarized):
-
- :::bash
- ├── autoload
- │ └── togglebg.vim
- ├── bitmaps
- │ └── togglebg.png
- ├── colors
- │ └── solarized.vim
- ├── doc
- │ ├── solarized.txt
- │ └── tags
- └── README.mkd
-
-Wait, `doc/tags` is already there. Ok, no problem! Let's just copy the content of solarized's
-tags file and paste it into the existing one. Now we have:
-
- :::bash
- ~/.vim
- ├── autoload
- │ ├── tagbar.vim
- │ └── togglebg.vim
- ├── bitmaps
- │ └── togglebg.png
- ├── colors
- │ └── solarized.vim
- ├── doc
- │ ├── solarized.txt
- │ ├── tagbar.txt
- │ └── tags
- ├── plugin
- │ └── tagbar.vim
- ├── README
- ├── README.mkd
- └── syntax
- └── tagbar.vim
-
-Now what if you you decide that solarized sucks and want to get rid of it? Good luck finding
-which file belongs to which plugin. Oh, don't forget the merged `doc/tags` file!
-Now imagine you have 20-30 plugins installed (which is normal, by the way). It's not a
-pretty sight now, is it?
-
-# Pathogen to the rescue!
-
-The legendary Tim Pope came up with a genius solution:
-[pathogen](https://github.com/tpope/vim-pathogen).
-Now let's install it like any regular plugin (I've omitted the README):
-
- :::bash
- ~/.vim
- └── autoload
- └── pathogen.vim
-
-Put this at the beginning of your `~/.vimrc`:
-
- :::vim
- execute pathogen#infect()
-
-Create this directory: `~/.vim/bundle`. To install tagbar and solarized, just create their own
-directories here:
-
- :::bash
- path
- ├── autoload
- │ └── pathogen.vim
- └── bundle
- ├── tagbar
- │ ├── autoload
- │ │ └── tagbar.vim
- │ ├── doc
- │ │ ├── tagbar.txt
- │ │ └── tags
- │ ├── plugin
- │ │ └── tagbar.vim
- │ ├── README
- │ └── syntax
- │ └── tagbar.vim
- └── vim-colors-solarized
- ├── autoload
- │ └── togglebg.vim
- ├── bitmaps
- │ └── togglebg.png
- ├── colors
- │ └── solarized.vim
- ├── doc
- │ ├── solarized.txt
- │ └── tags
- └── README.mkd
-
-What Pathogen does is that it adds every directory inside `bundle` into vim's "runtimepath".
-It means that each folder here can be considered a new `.vim` folder where vim looks for
-appropriate configuration files. The plugins are now isolated so removing or updating them
-becomes trivial: just remove or update its own directory.
-
-# Pathogen + Git
-
-Everything goes to the cloud these days, and certainly your vim setup should as well. If you
-haven't created a [Github](https://github.com) account, do it now. Create an empty repository
-with any name you want (mine is `.vim`). Don't commit yet. Create a file: `~/.vim/.gitignore`,
-add these lines to its content:
-
- :::bash
- bundle/
- .netrwhist
-
-.netrwhist is a local file generated by vim that is better off ignored. We also ignore bundle
-directory because the plugins will be included as git submodules (google *git submodule*
-for details). Remember to delete everything inside `bundle/`, because we will install the
-plugins again with git.
-
-Git init, commit and push to your github repo: (on the *git remote add...* line, replace `nhanb`
-with your github username, `.vim` with your repo name)
-
- :::bash
- cd ~/.vim
- git init
- git add .
- git commit -m 'init'
-
- git remote add origin https://github.com/nhanb/.vim.git
- git push -u origin master
-
-Everytime you edit anything in your .vim directory, remember to commit the changes and push to
-github:
-
- :::bash
- git add .
- git commit -m 'some message here'
- git push
-
-If you want to install a plugin, see if it has a git repo (9 out of 10 times it has a
-github repo). Find its git url and add to your .vim as a submodule:
-
- :::bash
- cd ~/.vim
- git add submodule https://github.com/majutsushi/tagbar.git bundle/tagbar
- git add submodule https://github.com/altercation/vim-colors-solarized.git bundle/solarized
- git submodule update --init
- git submodule foreach git pull origin master
-
-When you need to update your plugins, just run the last line to make git pull updates for all
-plugins.
-
-Here's the awesome part: when you're using a whole new computer and want to get all your vim settings
-from the cloud, simply clone your github repo, make a symlink for .vimrc and pull all plugins:
-
- :::bash
- cd ~
- git clone https://github.com/nhanb/.vim.git .vim
- ln -s ~/.vim/vimrc ~/.vimrc
- cd .vim
- git submodule update --init && git submodule foreach git pull origin master
-
-Now you must be really excited, no? Git does everything for you: upload/download, add plugins,
-update plugins *and* remove plugins... There must be some simple git command to remove a
-submodule, right?
-
-**NO**. Sadly, no. To remove a git submodule, you'll need to manually edit 2 git files and
-remove the folder by hand. See
-[this Stackoverflow question](http://stackoverflow.com/questions/1260748/how-do-i-remove-a-git-submodule)
-for detailed instructions.
-
-# Vundle, the new cool kid
-
-This time let's start fresh: remove all submodules and pathogen. Your bundle folder should be
-now empty. Clone [Vundle](https://github.com/gmarik/vundle):
-
- :::bash
- git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle
-
-Put this in your .vimrc (preferably at the beginning):
-
- :::vim
- set nocompatible " be iMproved
- filetype off " required!
-
- set rtp+=~/.vim/bundle/vundle/
- call vundle#rc()
-
- " let Vundle manage Vundle
- " required!
- Bundle 'gmarik/vundle'
-
- " My Bundles here:
- "
- " original repos on github
- Bundle 'majutsushi/tagbar'
- Bundle 'altercation/vim-colors-solarized'
-
- " Github repos of the user 'vim-scripts'
- " => can omit the username part
- Bundle 'L9'
- Bundle 'FuzzyFinder'
-
- " non github repos
- Bundle 'git://git.wincent.com/command-t.git'
- " ...
-
- filetype plugin indent on " required!
-
-Relaunch vim, run `:BundleInstall` to install the "bundles" you listed in .vimrc. When you want
-to update them, `:BundleUpdate`. To remove a plugin, just delete its line in your .vimrc file
-then relaunch vim and run `:BundleClean` to remove its folder inside ~/.vim/bundle/
-
-Vundle follows Pathogen's approach: putting plugins in their separate directories. However,
-it also takes care of the git stuff for us too! Note that by default it uses `git clone`, not
-`git add submodule` to add plugins. If you're using Windows, there's Vundle for Windows too,
-though I've never tried it.
-
-That's it, happy coding! Feel free to leave your comments if there's anything wrong/unclear here.
diff --git a/content/images/ajmg.png b/cool/ajmg.png
similarity index 100%
rename from content/images/ajmg.png
rename to cool/ajmg.png
diff --git a/content/images/cinema_1.png b/cool/cinema_1.png
similarity index 100%
rename from content/images/cinema_1.png
rename to cool/cinema_1.png
diff --git a/content/images/cinema_2.png b/cool/cinema_2.png
similarity index 100%
rename from content/images/cinema_2.png
rename to cool/cinema_2.png
diff --git a/content/posts/have-you-built-anything-cool-.md b/cool/index.dj
similarity index 86%
rename from content/posts/have-you-built-anything-cool-.md
rename to cool/index.dj
index 00154c7..f24ad19 100644
--- a/content/posts/have-you-built-anything-cool-.md
+++ b/cool/index.dj
@@ -1,52 +1,57 @@
Title: "Have you built anything cool?"
-Slug: have-you-built-anything-cool
-Date: 2014-01-25 10:37
-Category: misc
+PostedAt: 2014-01-25 10:37
Thumb: images/sealord.png
-So recently I went to a *networking event*--something I have never liked or been good at. I'm
+---
+
+So recently I went to a _networking event_--something I have never liked or been good at. I'm
not sure if I'm one of those introverts or if I'm just socially awkward, but the very idea of
going around trying to converse with total strangers just to exchange business cards is not at all
appealing to me. Anyway, that's another story. Right now I want to write about something a guy
from a non-tech company asked me:
-> \- Have you built anything cool?
-> \- [pause] Well, more or less...
-> \- What do you mean by "more or less"? [...] Have you built anything at all?
+> \- Have you built anything cool?
+>
+> \- [pause] Well, more or less...
+>
+> \- What do you mean by "more or less"? [...] Have you built anything at all?
-Then I went on trying to explain what my recent side project--
-[pytaku](https://pytaku-legacy.appspot.com)--does and why it is awesome for me. He seemed to be
-disinterested halfway through so I decided to shut up anyway.
+Then I went on trying to explain what my recent side
+project---[pytaku](https://pytaku-legacy.appspot.com)---does and why it is
+awesome for me. He seemed to be disinterested halfway through so I decided to shut up anyway.
Sure, I have done stuff now and then, be it assignment work or something I decided to create
for my own amusement. It is just funny how I have already stepped into to my final year without
taking a proper look back at what I have done in these past 2 years, so I'm going to do just that.
-If you--Nicholas--are reading this and don't want all the nerdy stuff, here are my condensed
+If you---Nicholas---are reading this and don't want all the nerdy stuff, here are my condensed
answers:
-### Have you built anything?
+### Have you built anything?
+
Yes, I have made desktop and Android games, a movie ticket sales program, a desktop manga
grabber, a web version of it that talks to dropbox, and several small shell scripts / web
utilities.
-### So, nothing cool?
+### So, nothing cool?
+
If you're neither a tech geek nor an otaku (which I assume you're not) then no, there's probably
nothing I've done that you would find interesting.
-## Nerd alert!
-The rest of this post is aimed at the <del>nerdier</del> more tech-savvy audience. You have been
+## Nerd alert!
+
+The rest of this post is aimed at the {-nerdier-} more tech-savvy audience. You have been
warned ;)
-## First year--Welcome to the web, and the GUI programming disillusionment
+## First year: Welcome to the web, and the GUI programming disillusionment
-I had touched *web stuff* before in high school: a vBulletin forum that I created (unofficially)
+I had touched _web stuff_ before in high school: a vBulletin forum that I created (unofficially)
for students in my middle school. However, I only properly learned PHP and JS when I started the
Web Programming course here. With (moderately) great power came great desires, so I set out to
build a basic PHP site to scrape a youtube view page's HTML to get direct video links (not working
-anymore since a recent youtube update)
+anymore since a recent youtube update):
-
+
That was my first touch on jQueryUI and regular expressions; I also learned how RMIT's mekong
server sucked to the point that it didn't allow `get_file_contents()`.
@@ -56,11 +61,11 @@ ## First year--Welcome to the web, and the GUI programming disillusionment
I also learned about MVC and GUI programming with Java swing. I did write a movie ticket program
with a (pretty minimal) seat picker and
-[a battleship-inspired game](https://github.com/nhanb/sealord):
+[a battleship-inspired game](https://github.com/nhanb/sealord):
-
-
-
+
+
+
Then it occurred to me that programming GUI interfaces for desktop programs was much more tedious
than doing it for the web, especially when working with the now-not-favored Swing toolkit.
@@ -75,7 +80,7 @@ ## First year--Welcome to the web, and the GUI programming disillusionment
To rub salt in the wound, I came to realize that nobody cared how Swing looked on any desktop
environment other than OS X and Windows. Font rendering was painful to look at, and the only way to
-make it *a little bit* more acceptable was using a
+make it _a little bit_ more acceptable was using a
[forked version of OpenJDK](http://www.webupd8.org/2013/06/install-openjdk-patched-with-font-fixes.html).
WTF guys? And that's not the only problem; let's talk Look And Feel. Java's built-in
getSystemLookAndFeel() could only detect GNOME's. When developing `ajmg` I discovered that and had
@@ -83,7 +88,7 @@ ## First year--Welcome to the web, and the GUI programming disillusionment
"What the hell, why do I even have to do this?" and decided that Swing was dead to me (or any
desktop Linux user for that matter).
-## Second year: enough of this <del>bull</del> school crap. I'm making stuff for myself!
+## Second year: enough of this {-bull-} school crap. I'm making stuff for myself!
To be fair, the following year has offered a number of new stuff: C/C++ programming, a taste of the
M$ .NET C# stack (still impressed by Visual Studio's vi mode plugin), more Java,
@@ -112,7 +117,7 @@ ### AJMG, then Pytaku, then... who knows?
it, because open source is awesome", I thought. Then I spent some time and got the minimal program
working program:
-
+
This program did help me get a firm knowledge of java's thread manipulation and using http proxy
(so I could exploit RMIT's awesome network bandwidth). I also succeeded in achieving separation of
diff --git a/cool/index.html b/cool/index.html
new file mode 100644
index 0000000..d002180
--- /dev/null
+++ b/cool/index.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>"Have you built anything cool?" | Hi, I'm Nhân</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
+ <link rel="stylesheet" href="/_theme/base.css">
+</head>
+
+<body>
+
+<link rel="stylesheet" href="/_theme/navbar.css">
+<nav>
+ <a href="/">Home</a>
+ <a href="/about/">About</a>
+ <a href="/projects/">Projects</a>
+ <span class="posted-on">
+ Posted on
+ <time datetime="2014-01-25">
+ Saturday, 25 Jan 2014
+ </time>
+ </span>
+
+</nav>
+<hr class="nav-hr">
+
+
+<main>
+<h1>"Have you built anything cool?"</h1>
+<p>So recently I went to a <em>networking event</em>–something I have never liked or been good at. I’m
+not sure if I’m one of those introverts or if I’m just socially awkward, but the very idea of
+going around trying to converse with total strangers just to exchange business cards is not at all
+appealing to me. Anyway, that’s another story. Right now I want to write about something a guy
+from a non-tech company asked me:</p>
+<blockquote>
+<p>- Have you built anything cool?</p>
+<p>- [pause] Well, more or less…</p>
+<p>- What do you mean by “more or less”? […] Have you built anything at all?</p>
+</blockquote>
+<p>Then I went on trying to explain what my recent side
+project—<a href="https://pytaku-legacy.appspot.com">pytaku</a>—does and why it is
+awesome for me. He seemed to be disinterested halfway through so I decided to shut up anyway.</p>
+<p>Sure, I have done stuff now and then, be it assignment work or something I decided to create
+for my own amusement. It is just funny how I have already stepped into to my final year without
+taking a proper look back at what I have done in these past 2 years, so I’m going to do just that.</p>
+<p>If you—Nicholas—are reading this and don’t want all the nerdy stuff, here are my condensed
+answers:</p>
+<section id="Have-you-built-anything">
+<h3>Have you built anything?</h3>
+<p>Yes, I have made desktop and Android games, a movie ticket sales program, a desktop manga
+grabber, a web version of it that talks to dropbox, and several small shell scripts / web
+utilities.</p>
+</section>
+<section id="So-nothing-cool">
+<h3>So, nothing cool?</h3>
+<p>If you’re neither a tech geek nor an otaku (which I assume you’re not) then no, there’s probably
+nothing I’ve done that you would find interesting.</p>
+</section>
+<section id="Nerd-alert">
+<h2>Nerd alert!</h2>
+<p>The rest of this post is aimed at the <del>nerdier</del> more tech-savvy audience. You have been
+warned ;)</p>
+</section>
+<section id="First-year-Welcome-to-the-web-and-the-GUI-programming-disillusionment">
+<h2>First year: Welcome to the web, and the GUI programming disillusionment</h2>
+<p>I had touched <em>web stuff</em> before in high school: a vBulletin forum that I created (unofficially)
+for students in my middle school. However, I only properly learned PHP and JS when I started the
+Web Programming course here. With (moderately) great power came great desires, so I set out to
+build a basic PHP site to scrape a youtube view page’s HTML to get direct video links (not working
+anymore since a recent youtube update):</p>
+<p><img alt="tubegrab v2.9" src="tubegrab.jpg"></p>
+<p>That was my first touch on jQueryUI and regular expressions; I also learned how RMIT’s mekong
+server sucked to the point that it didn’t allow <code>get_file_contents()</code>.</p>
+<p>About school assignments? Nothing interesting: standard minimal LAMP CMS with jQuery glitter
+sprinkled on top. Not a bad experience but meh.</p>
+<p>I also learned about MVC and GUI programming with Java swing. I did write a movie ticket program
+with a (pretty minimal) seat picker and
+<a href="https://github.com/nhanb/sealord">a battleship-inspired game</a>:</p>
+<p><img alt="Cinema Movie Picker" src="cinema_1.png">
+<img alt="Seat Picker" src="cinema_2.png">
+<img alt="Sealord" src="sealord.png"></p>
+<p>Then it occurred to me that programming GUI interfaces for desktop programs was much more tedious
+than doing it for the web, especially when working with the now-not-favored Swing toolkit.
+Nightmarish days…</p>
+<p>Another lesson learned the hard way was that “MVC” is not even a concrete thing, and there is
+hardly any obvious “one true way” to implement that. I spent much more time planning for plumbing
+code than I the time I spent actually writing “feature” code. And the result, now looking back, was
+not even that good. And yeah, there was no such thing as “separation of concerns” in my code back
+then, which eventually led to countless times of tracing obscure stack traces for debugging (good
+thing I had a lot of free time back then).</p>
+<p>To rub salt in the wound, I came to realize that nobody cared how Swing looked on any desktop
+environment other than OS X and Windows. Font rendering was painful to look at, and the only way to
+make it <em>a little bit</em> more acceptable was using a
+<a href="http://www.webupd8.org/2013/06/install-openjdk-patched-with-font-fixes.html">forked version of OpenJDK</a>.
+WTF guys? And that’s not the only problem; let’s talk Look And Feel. Java’s built-in
+getSystemLookAndFeel() could only detect GNOME’s. When developing <code>ajmg</code> I discovered that and had
+to write my own method that extended the thing to detect more DEs, but soon after that I thought
+“What the hell, why do I even have to do this?” and decided that Swing was dead to me (or any
+desktop Linux user for that matter).</p>
+</section>
+<section id="Second-year-enough-of-this-bull-school-crap-I-m-making-stuff-for-myself">
+<h2>Second year: enough of this <del>bull</del> school crap. I’m making stuff for myself!</h2>
+<p>To be fair, the following year has offered a number of new stuff: C/C++ programming, a taste of the
+M$ .NET C# stack (still impressed by Visual Studio’s vi mode plugin), more Java,
+<a href="http://truongtx.me/2013/05/02/agent-069-game/">Android app programming</a>, and some neat security
+tricks. However, none of those intrigued me much, so I decided to start making things for my own:</p>
+<section id="Shell-scripts">
+<h3>Shell scripts</h3>
+<p>If you have taken a look at my <a href="https://github.com/nhanb/dotfiles">dotfiles</a>, you’ll notice that I
+do write a bunch of shell scripts to automate stuff I do often. The one I’m currently proudest of
+is <a href="https://github.com/nhanb/dotfiles/blob/master/scripts/rmitproxy_silent">rmiproxy_silent</a>, a
+script that automatically detects whether I am using RMIT’s network and set/clear the appropriate
+proxy settings. Another one that I can’t live without is
+<a href="https://github.com/nhanb/dotfiles/blob/master/install.sh">install.sh</a>, a script that helps install
+all my dotfiles, sets up zsh and various things. It saved me <strong>a lot</strong> of time whenever I reinstall
+my system.</p>
+<p>Obligatory shout-out to <a href="https://github.com/robbyrussell/oh-my-zsh/">oh-my-zsh</a>, greatest invention
+since sliced bread! Those guys are awesome!</p>
+</section>
+<section id="AJMG-then-Pytaku-then-who-knows">
+<h3>AJMG, then Pytaku, then… who knows?</h3>
+<p>The original idea was actually creating a Java Swing program that helps download manga. It was born
+out of frustration of <a href="http://blog.domdomsoft.com/">DomDomSoft</a>, a manga downloader that requires
+“donation” to unlock full functionalities. “I could do that, and I’ll open source the crap out of
+it, because open source is awesome”, I thought. Then I spent some time and got the minimal program
+working program:</p>
+<p><img alt="" src="ajmg.png"></p>
+<p>This program did help me get a firm knowledge of java’s thread manipulation and using http proxy
+(so I could exploit RMIT’s awesome network bandwidth). I also succeeded in achieving separation of
+concern to a certain level this time, allowing contributors (if any) to easily add support for
+other manga reader sites. But then again, Swing’s quirks put me off, so my bad habit of losing
+interest quickly kicked in and the project stopped there.</p>
+<p>Then came <a href="https://pytaku-legacy.appspot.com">Pytaku</a>, ajmg’s spiritual successor. At this point I
+knew enough of python and wanted to try out Google App Engine, so I decided to make a web version
+of AJMG, with the difference that instead of downloading directly, it forwards everything to the
+user’s Dropbox folder. Why not Google Drive you ask? Because they haven’t even bothered to release
+an official Linux client for it. Shame on you, Google!</p>
+<p>Loads of exciting things were learned along the way: how URL handling works in webapp2 and in other
+web frameworks in general, proper templating (can’t believe I ever wrote <code><title><?php echo $title;
+?></title></code>… not cool!), OAuth2 (more than a few “Aha!” moments working with this little guy…),
+Google’s Datastore and NoSQL in general, and of course, Twitter Bootstrap–saving clueless
+non-designer developers since its inception.</p>
+<p>And now, I’m rewriting it from scratch, this time trying out TDD, making use of
+<a href="https://travis-ci.org/nhanb/pytaku">travis-ci</a>, which will be especially helpful to periodically
+test if a manga site has changed its page layout and screwed up Pytaku’s scraping code. I have
+encountered a number of quirks when trying to set up the correct testing boilerplate for a Google
+App Engine project, but it seems everything will be smooth from now on. This holiday season I plan
+to at least roll out an alpha version to show off. Stay tuned if you’re interested!</p>
+</section>
+</section>
+<section id="To-sum-it-up">
+<h2>To sum it up…</h2>
+<p>I don’t believe in developing products I myself don’t want to use. I want to make things that make
+my life easier, and if that helps others too then it’s a huge bonus. This is why Github is my
+favorite company right now, and
+<a href="https://www.youtube.com/watch?v=qyz3jkOBbQY">How GitHub uses GitHub to build GitHub</a> remains the
+best developer speech I have ever seen.</p>
+<p>Right now I haven’t made a full-blown program that I can confidently distribute to end users, but I
+certainly have made quite a few nifty tools to improve my day-to-day computing tasks and learned a
+lot along the way. Right now I cannot confidently answer this big question by pointing them to a
+polished website detailing every nook and cranny of my shiny widely-used, battle-tested program,
+but I’m confident I have the right knowledge to get there. If there is such a thing as “Lunar New
+Year Resolution”, I guess mine is that one year from now, I will have a satisfying answer to this
+question. Watch out world, I’m coming!</p>
+<p>If you managed to get here, you are probably a tech geek like me. So, have <strong>you</strong> built anything
+cool recently?</p>
+</section>
+
+</main>
+
+<footer>
+© 2014–2023 nhanb<br>
+Made with <a href="https://github.com/nhanb/s4g">s4g</a>
+</footer>
+
+</body>
+
+</html>
diff --git a/content/images/sealord.png b/cool/sealord.png
similarity index 100%
rename from content/images/sealord.png
rename to cool/sealord.png
diff --git a/content/images/tubegrab.jpg b/cool/tubegrab.jpg
similarity index 100%
rename from content/images/tubegrab.jpg
rename to cool/tubegrab.jpg
diff --git a/content/posts/look-ma-no-stock-theme.md b/custom-theme/index.dj
similarity index 90%
rename from content/posts/look-ma-no-stock-theme.md
rename to custom-theme/index.dj
index 5d76ca4..5991290 100644
--- a/content/posts/look-ma-no-stock-theme.md
+++ b/custom-theme/index.dj
@@ -1,7 +1,8 @@
Title: Look ma, no stock theme!
-Date: 2015-06-05 13:54
+PostedAt: 2015-06-05 13:54
+---
-**2023 Update**: I just realized that em dashes in certain default sans-serif
+*2023 Update*: I just realized that em dashes in certain default sans-serif
fonts look terrible (no space around the dash), so I now explicitly use Source
Sans Pro and Ubuntu Mono. Using specific fonts allow me to fine-tune my
typography again (e.g. making code block text a bit smaller).
@@ -13,13 +14,13 @@
I also took this chance to go full black-on-white, which I think looks way
crisper than black-on-cornsilk.
-**2020 Update**: I bit the bullet and removed all web fonts, relying on the
+*2020 Update*: I bit the bullet and removed all web fonts, relying on the
browser's configured sans-serif/monospace fonts instead. It's probably fine,
since even stock fonts seem to cover Vietnamese glyphs well these days.
Otherwise, people who care enough to be bothered by fallback fonts are likely
to know how to configure their browser with proper fonts anyway.
-**2017 Update**: Now that I like high contrast more, I just updated the
+*2017 Update*: Now that I like high contrast more, I just updated the
theme to a black/white/red palette with a [high-quality serif font][8]
instead. Thanks [Mr. Butterick][9]!
@@ -54,7 +55,7 @@ ## Clean and lightweight
That's why I decided to do no fancy cosmetic JS and try to keep my use of static assets to a
minimum:
-
+
I guess there's nothing I can do about the font files though, since I need to make sure my
Vietnamese posts are rendered in a font that supports it. Oh well, at least it looks awesome.
@@ -82,7 +83,7 @@ ## That's it!
You can find the source code to my theme [on GitHub][7]. I don't recommend using it as-is though,
since I haven't implemented many required templates (authors, tags, categories, etc.) because I
don't use them. There's also the hardcoded content in footer and probably a few more places. Maybe
-someday I'll stop being lazy and fix all that. *Maybe*.
+someday I'll stop being lazy and fix all that. _Maybe_.
[1]: https://github.com/duilio/pelican-octopress-theme/
[2]: https://developers.google.com/fonts/docs/getting_started#Effects
@@ -93,4 +94,4 @@ ## That's it!
[7]: https://github.com/nhanb/motherfucking-pelican-theme
[8]: https://github.com/adobe-fonts/source-serif-pro
[9]: https://practicaltypography.com/
-[10]: http://localhost:8000/posts/working-with-sqlite-in-python-without-an-orm-or-migration-framework/
+[10]: ../posts/working-with-sqlite-in-python-without-an-orm-or-migration-framework/
diff --git a/custom-theme/index.html b/custom-theme/index.html
new file mode 100644
index 0000000..0c4d1dd
--- /dev/null
+++ b/custom-theme/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Look ma, no stock theme! | Hi, I'm Nhân</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
+ <link rel="stylesheet" href="/_theme/base.css">
+</head>
+
+<body>
+
+<link rel="stylesheet" href="/_theme/navbar.css">
+<nav>
+ <a href="/">Home</a>
+ <a href="/about/">About</a>
+ <a href="/projects/">Projects</a>
+ <span class="posted-on">
+ Posted on
+ <time datetime="2015-06-05">
+ Friday, 05 Jun 2015
+ </time>
+ </span>
+
+</nav>
+<hr class="nav-hr">
+
+
+<main>
+<h1>Look ma, no stock theme!</h1>
+<p><strong>2023 Update</strong>: I just realized that em dashes in certain default sans-serif
+fonts look terrible (no space around the dash), so I now explicitly use Source
+Sans Pro and Ubuntu Mono. Using specific fonts allow me to fine-tune my
+typography again (e.g. making code block text a bit smaller).</p>
+<p>The extra http load is not that bad: each woff2 font variant averages at 50KB,
+and is only loaded if a page’s content actually calls for it. A particularly
+<a href="../posts/working-with-sqlite-in-python-without-an-orm-or-migration-framework/">bad case</a> loads 6 variants, clocking in at ~300KB. I can live with that.</p>
+<p>I also took this chance to go full black-on-white, which I think looks way
+crisper than black-on-cornsilk.</p>
+<p><strong>2020 Update</strong>: I bit the bullet and removed all web fonts, relying on the
+browser’s configured sans-serif/monospace fonts instead. It’s probably fine,
+since even stock fonts seem to cover Vietnamese glyphs well these days.
+Otherwise, people who care enough to be bothered by fallback fonts are likely
+to know how to configure their browser with proper fonts anyway.</p>
+<p><strong>2017 Update</strong>: Now that I like high contrast more, I just updated the
+theme to a black/white/red palette with a <a href="https://github.com/adobe-fonts/source-serif-pro">high-quality serif font</a>
+instead. Thanks <a href="https://practicaltypography.com/">Mr. Butterick</a>!</p>
+<p>The original post follows.</p>
+<hr>
+<p>I just redesigned my blog.</p>
+<p>To be totally honest, the previous design was not mine at all. I’ve always been using
+<a href="https://github.com/duilio/pelican-octopress-theme/">pelican-octopress-theme</a>, which is a Pelican port of the default theme for Octopress. It’s not
+that I have anything to complain about that theme: it was clean, readable and easy on the eyes. I
+just want my site to look unique. Content is king, sure, but it wouldn’t hurt to stand out from the
+crowd once in a while.</p>
+<p>I’m not a professional designer, but everything turned out quite well if I could say so. In this
+post I’ll explain my design goals and how I (hopefully) achieved them.</p>
+<section id="Clean-and-lightweight">
+<h2>Clean and lightweight</h2>
+<p>The web is messy. I’m not talking blinking-marquee-fire-animated-header messy (thank god we’re done
+with that… <a href="https://developers.google.com/fonts/docs/getting_started#Effects">or are we?</a>). I’m talking megabytes-of-useless-javascript-and-css messy. For
+whatever reason, some people now think it’s cool to include Bootstrap/Foundation to every project,
+or to include that new shiny parallax library to ruin scrolling for everybody. Oh, and don’t forget
+the marvellous invention that is <a href="https://xkcd.com/1309/">“infinite scrolling”</a>:</p>
+<p><img alt="" src="https://imgs.xkcd.com/comics/infinite_scrolling.png"></p>
+<p>In fact, the main motivation of my new theme is <a href="http://motherfuckingwebsite.com/">this satire page</a> on the sad state of the web
+we’re in today.</p>
+<p>That’s why I decided to do no fancy cosmetic JS and try to keep my use of static assets to a
+minimum:</p>
+<p><img alt="" src="mofo_01_loads.png"></p>
+<p>I guess there’s nothing I can do about the font files though, since I need to make sure my
+Vietnamese posts are rendered in a font that supports it. Oh well, at least it looks awesome.</p>
+</section>
+<section id="Content-is-king">
+<h2>Content is king</h2>
+<p>No more distracting sidebar with “latest news”, “related posts”, etc. with thumbnails popping up
+all over the place, just a good old article body from start to finish.</p>
+</section>
+<section id="Easy-on-the-eye">
+<h2>Easy on the eye</h2>
+<p>While <a href="http://bettermotherfuckingwebsite.com/">bettermotherfuckingwebsite</a> does a good job at demonstrating how far you can go with a
+few simple CSS rules (hint: very far), I found Tommi Kaikkonen’s <a href="http://www.kaikkonendesign.fi/typography/">Interactive Guide to Blog
+Typography</a> much more comprehensive and informative. I implemented many of the ideas found
+in that guide:</p>
+<ul>
+<li>
+Big body font
+</li>
+<li>
+Constrained line width to aid reading
+</li>
+<li>
+Generous line height, liberal whitespace to help with visual hierarchy
+</li>
+<li>
+Lower background-foreground contrast. I also find the slightly yellow-ish background somewhat
+soothing.
+</li>
+</ul>
+</section>
+<section id="That-s-it">
+<h2>That’s it!</h2>
+<p>You can find the source code to my theme <a href="https://github.com/nhanb/motherfucking-pelican-theme">on GitHub</a>. I don’t recommend using it as-is though,
+since I haven’t implemented many required templates (authors, tags, categories, etc.) because I
+don’t use them. There’s also the hardcoded content in footer and probably a few more places. Maybe
+someday I’ll stop being lazy and fix all that. <em>Maybe</em>.</p>
+</section>
+
+</main>
+
+<footer>
+© 2014–2023 nhanb<br>
+Made with <a href="https://github.com/nhanb/s4g">s4g</a>
+</footer>
+
+</body>
+
+</html>
diff --git a/content/images/mofo_01_loads.png b/custom-theme/mofo_01_loads.png
similarity index 100%
rename from content/images/mofo_01_loads.png
rename to custom-theme/mofo_01_loads.png
diff --git a/content/images/fcitx-skype.png b/fcitx/fcitx-skype.png
similarity index 100%
rename from content/images/fcitx-skype.png
rename to fcitx/fcitx-skype.png
diff --git a/content/posts/ibus-is-dead-to-me-use-fcitx-instead.md b/fcitx/index.dj
similarity index 87%
rename from content/posts/ibus-is-dead-to-me-use-fcitx-instead.md
rename to fcitx/index.dj
index 544c54c..ba0d01b 100644
--- a/content/posts/ibus-is-dead-to-me-use-fcitx-instead.md
+++ b/fcitx/index.dj
@@ -1,10 +1,8 @@
Title: Dẹp ibus-unikey đi, dùng fcitx-unikey nhé!
-Slug: ibus-is-dead-to-me-use-fcitx-instead
-Date: 2015-01-29 20:41
-Category: tutorials
-lang: vi
+PostedAt: 2015-01-29 20:41
+---
-**Cập nhật tháng 1/2021:** hiện tại mình dùng fcitx5 trên Arch + KDE, [cài đặt
+*Cập nhật tháng 1/2021:* hiện tại mình dùng fcitx5 trên Arch + KDE, [cài đặt
và config](https://wiki.archlinux.org/title/Fcitx5) không thể đơn giản hơn:
```sh
@@ -32,8 +30,8 @@
Sáng ra Netrunner bảo có vài chục cái update, mình chủ quan `dist-upgrade -y` rồi để đó không màng
đến nữa. Nửa tiếng sau, ibus không thèm chơi với firefox! :|
-Chuyện gõ tiếng Việt trên linux thì muôn đời trần ai rồi, mình không muốn bàn thêm nữa. Ngô "Chin"
-- một trong những người phát triển chính của [ibus-bogo][1] - đã viết một bài blog rất hay về tình
+Chuyện gõ tiếng Việt trên linux thì muôn đời trần ai rồi, mình không muốn bàn thêm nữa.
+Trung Ngô---một trong những người phát triển chính của [ibus-bogo][1]---đã viết một bài blog rất hay về tình
trạng gõ tiếng Việt hiện nay trên linux nói chung, ai quan tâm có thể tham khảo thêm [ở đây][2].
## fcitx-unikey
@@ -60,7 +58,7 @@ ## fcitx-unikey
Một điểm trừ là khi dùng trên skype, phần text đang trong preedit bị hiển thị trong một ô riêng chứ
không chỉ là text bị gạch dưới như trong những chương trình khác. (xem hình dưới)
-
+
## vim-fcitx
@@ -73,12 +71,12 @@ ## vim-fcitx
bằng cách sửa mã nguồn của fcitx-unikey.
Mình gõ tiếng Việt kiểu VNI nên bộ gõ chắc chắn không bao giờ xử lý ký tự `j` => có thể thêm ký tự
-`j` vào danh sách WordBreakSyms trong **src/unikey-im.cpp**. ([xem tại đây][7])
+`j` vào danh sách WordBreakSyms trong *src/unikey-im.cpp*. ([xem tại đây][7])
Sau đó chỉ cần compile lại fcitx-unikey là xong!
[1]: http://ibus-bogo.readthedocs.org/
-[2]: http://ngochin.com/2014/07/31/uoc-mo-bo-go-kieu-unikey/
+[2]: https://lewtds.notion.site/c-m-b-g-ki-u-Unikey-tr-n-Linux-9b12cc2fcdbe43149b10eefc7db6b161
[3]: https://github.com/BoGoEngine/fcitx-bogo
[4]: https://github.com/fcitx/fcitx
[5]: https://github.com/fcitx/fcitx-unikey
diff --git a/fcitx/index.html b/fcitx/index.html
new file mode 100644
index 0000000..c7e9956
--- /dev/null
+++ b/fcitx/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Dẹp ibus-unikey đi, dùng fcitx-unikey nhé! | Hi, I'm Nhân</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
+ <link rel="stylesheet" href="/_theme/base.css">
+</head>
+
+<body>
+
+<link rel="stylesheet" href="/_theme/navbar.css">
+<nav>
+ <a href="/">Home</a>
+ <a href="/about/">About</a>
+ <a href="/projects/">Projects</a>
+ <span class="posted-on">
+ Posted on
+ <time datetime="2015-01-29">
+ Thursday, 29 Jan 2015
+ </time>
+ </span>
+
+</nav>
+<hr class="nav-hr">
+
+
+<main>
+<h1>Dẹp ibus-unikey đi, dùng fcitx-unikey nhé!</h1>
+<p><strong>Cập nhật tháng 1/2021:</strong> hiện tại mình dùng fcitx5 trên Arch + KDE, <a href="https://wiki.archlinux.org/title/Fcitx5">cài đặt
+và config</a> không thể đơn giản hơn:</p>
+<pre><code class="language-sh">sudo pacman -S fcitx5 fcitx5-qt fcitx5-gtk fcitx5-unikey kcm-fcitx5
+</code></pre>
+<p>Sau đó thêm đoạn này vào /etc/environment:</p>
+<pre><code>GTK_IM_MODULE=fcitx
+QT_IM_MODULE=fcitx
+XMODIFIERS=@im=fcitx
+</code></pre>
+<p>Vào System Settings > Regional Settings > Input Method > Add Input Method,
+chọn Unikey, tùy chỉnh tùy ý.</p>
+<p>Fcitx5 khắc phục được lỗi crash renderer khi dùng facebook messenger trên
+Firefox, và gõ được trên Telegram 🤷.</p>
+<p>Còn dưới đây là bài viết cũ:</p>
+<hr>
+<p>Sáng ra Netrunner bảo có vài chục cái update, mình chủ quan <code>dist-upgrade -y</code> rồi để đó không màng
+đến nữa. Nửa tiếng sau, ibus không thèm chơi với firefox! :|</p>
+<p>Chuyện gõ tiếng Việt trên linux thì muôn đời trần ai rồi, mình không muốn bàn thêm nữa.
+Trung Ngô—một trong những người phát triển chính của <a href="http://ibus-bogo.readthedocs.org/">ibus-bogo</a>—đã viết một bài blog rất hay về tình
+trạng gõ tiếng Việt hiện nay trên linux nói chung, ai quan tâm có thể tham khảo thêm <a href="https://lewtds.notion.site/c-m-b-g-ki-u-Unikey-tr-n-Linux-9b12cc2fcdbe43149b10eefc7db6b161">ở đây</a>.</p>
+<section id="fcitx-unikey">
+<h2>fcitx-unikey</h2>
+<p>Lọ mọ trên trang github của bogo, mình vô tình phát hiện ra <a href="https://github.com/BoGoEngine/fcitx-bogo">fcitx-bogo</a>: dự án này thực chất
+cũng dùng bogo-engine nhưng chạy với <a href="https://github.com/fcitx/fcitx">fcitx</a> chứ không phải ibus như bình thường. Rất tiếc là
+khi mình cài đặt và chạy thử fcitx-bogo thì nó luôn crash fcitx trước khi xử lý ra được chữ tiếng
+Việt nào. :P</p>
+<p>Dạo một vòng quanh trang github của fcitx, mình thấy dự án này vẫn được phát triển đều đặn chứ
+không bị cảnh đem con bỏ chợ như ibus, và thứ làm mình ngạc nhiên và mừng nhất chính là một repo
+với cái tên rất hứa hẹn: <a href="https://github.com/fcitx/fcitx-unikey">fcitx-unikey</a>.</p>
+<p>Cách compile và cài đặt đã được nêu rõ trên README nên mình sẽ không nói lại ở đây nữa. Một vài
+nhận xét sau khi dùng thử trên Netrunner 14 (em họ của Kubuntu):</p>
+<ul>
+<li>
+Không hiện popup vô duyên khi chuyển method như ibus.
+</li>
+<li>
+Không bật method tiếng Việt vô tội vạ như ibus. Trước đây khi dùng ibus, mặc dù đã tắt tính năng
+“Share same input method among all applications”, method tiếng Việt vẫn được kích hoạt mặc định
+trong các system dialog của KDE, rất khó chịu (bực nhất là nó bật preedit trên ô điền password
+nên mỗi khi khóa máy rồi login lại là password hiện lên hết). Fcitx không bị như vậy, vì method
+mặc định luôn là tiếng Anh.
+</li>
+</ul>
+<p>Một điểm trừ là khi dùng trên skype, phần text đang trong preedit bị hiển thị trong một ô riêng chứ
+không chỉ là text bị gạch dưới như trong những chương trình khác. (xem hình dưới)</p>
+<p><img alt="" src="fcitx-skype.png"></p>
+</section>
+<section id="vim-fcitx">
+<h2>vim-fcitx</h2>
+<p>Những ai đã thử gõ tiếng Việt trên vim chắc chắn đều biết: không tài nào dùng normal mode khi
+preedit đang bật được. Ngày xưa khi dùng ibus mình có thử viết <a href="https://github.com/nhanb/vim-bogo">một plugin</a> để bật tiếng Việt
+khi vào insert mode và trở lại tiếng Anh khi ra normal mode, nhưng cuối cùng không dùng vì preedit
+trong insert mode làm hư <code>inoremap jj <esc></code>.</p>
+<p>Plugin <a href="https://github.com/nhanb/vim-bogo">vim-fcitx</a> hoạt động tương tự như trên, và vấn đề map jj nêu trên có thể được giải quyết
+bằng cách sửa mã nguồn của fcitx-unikey.</p>
+<p>Mình gõ tiếng Việt kiểu VNI nên bộ gõ chắc chắn không bao giờ xử lý ký tự <code>j</code> => có thể thêm ký tự
+<code>j</code> vào danh sách WordBreakSyms trong <strong>src/unikey-im.cpp</strong>. (<a href="https://github.com/nhanb/fcitx-unikey/commit/d976a64f560510125bfddf02bd892d42bc94e5b5">xem tại đây</a>)</p>
+<p>Sau đó chỉ cần compile lại fcitx-unikey là xong!</p>
+</section>
+
+</main>
+
+<footer>
+© 2014–2023 nhanb<br>
+Made with <a href="https://github.com/nhanb/s4g">s4g</a>
+</footer>
+
+</body>
+
+</html>
diff --git a/feed.xml b/feed.xml
index 9645ccc..7ece612 100644
--- a/feed.xml
+++ b/feed.xml
@@ -2,17 +2,45 @@
<title>Hi, I'm Nhân</title>
<id>https://hi.imnhan.com/</id>
<link rel="self" href="/feed.xml"></link>
- <updated>0001-01-01T00:00:00+00:00</updated>
+ <updated>2023-04-22T15:55:00+07:00</updated>
<author>
<name>nhanb</name>
<uri>https://hi.imnhan.com</uri>
<email>hi@imnhan.com</email>
</author>
<entry>
- <title>Projects</title>
- <id>https://hi.imnhan.com/projects/</id>
- <link href="https://hi.imnhan.com/projects/"></link>
- <published>0001-01-01T00:00:00+00:00</published>
- <updated>0001-01-01T00:00:00+00:00</updated>
+ <title>Acer Chromebook Spin 713 "Voxel": an adequate Crostini device, a buggy Linux laptop</title>
+ <id>https://hi.imnhan.com/chromebook/</id>
+ <link href="https://hi.imnhan.com/chromebook/"></link>
+ <published>2023-04-22T15:55:00+07:00</published>
+ <updated>2023-04-22T15:55:00+07:00</updated>
+ </entry>
+ <entry>
+ <title>The video streaming finale, or why put.io is awesome</title>
+ <id>https://hi.imnhan.com/video-streaming-3/</id>
+ <link href="https://hi.imnhan.com/video-streaming-3/"></link>
+ <published>2020-10-21T11:45:00+07:00</published>
+ <updated>2020-10-21T11:45:00+07:00</updated>
+ </entry>
+ <entry>
+ <title>Look ma, no stock theme!</title>
+ <id>https://hi.imnhan.com/custom-theme/</id>
+ <link href="https://hi.imnhan.com/custom-theme/"></link>
+ <published>2015-06-05T13:54:00+07:00</published>
+ <updated>2015-06-05T13:54:00+07:00</updated>
+ </entry>
+ <entry>
+ <title>Dẹp ibus-unikey đi, dùng fcitx-unikey nhé!</title>
+ <id>https://hi.imnhan.com/fcitx/</id>
+ <link href="https://hi.imnhan.com/fcitx/"></link>
+ <published>2015-01-29T20:41:00+07:00</published>
+ <updated>2015-01-29T20:41:00+07:00</updated>
+ </entry>
+ <entry>
+ <title>"Have you built anything cool?"</title>
+ <id>https://hi.imnhan.com/cool/</id>
+ <link href="https://hi.imnhan.com/cool/"></link>
+ <published>2014-01-25T10:37:00+07:00</published>
+ <updated>2014-01-25T10:37:00+07:00</updated>
</entry>
</feed>
\ No newline at end of file
diff --git a/content/posts/my-first-diy-fightstick.md b/fightstick-1/index.dj
similarity index 100%
rename from content/posts/my-first-diy-fightstick.md
rename to fightstick-1/index.dj
diff --git a/content/posts/my-first-diy-fightstick-2.md b/fightstick-2/index.dj
similarity index 100%
rename from content/posts/my-first-diy-fightstick-2.md
rename to fightstick-2/index.dj
diff --git a/content/posts/go-postgres-caddy-systemd-stack.md b/go-stack/index.dj
similarity index 100%
rename from content/posts/go-postgres-caddy-systemd-stack.md
rename to go-stack/index.dj
diff --git a/content/posts/bypass-rmit-domain-blocker-to-watch-hdviet.md b/hdviet/index.dj
similarity index 100%
rename from content/posts/bypass-rmit-domain-blocker-to-watch-hdviet.md
rename to hdviet/index.dj
diff --git a/ideas/index.html b/ideas/index.html
index 94943f4..f5f7acc 100644
--- a/ideas/index.html
+++ b/ideas/index.html
@@ -85,7 +85,7 @@ <h2>Discord bot that launches CSGO/etc. server on demand</h2>
</main>
<footer>
-© 2023 nhanb<br>
+© 2014–2023 nhanb<br>
Made with <a href="https://github.com/nhanb/s4g">s4g</a>
</footer>
diff --git a/index.html b/index.html
index dc1bb44..44b5a3c 100644
--- a/index.html
+++ b/index.html
@@ -35,9 +35,29 @@ <h1 class="site-title">Hi, I'm Nhân</h1>
<ul>
<li>
- <span class="time-prefix">0001-01-01 — </span>
- <a href="/projects/">Projects</a>
- <span class="time-suffix">(0001-01-01)</span>
+ <span class="time-prefix">2023-04-22 — </span>
+ <a href="/chromebook/">Acer Chromebook Spin 713 "Voxel": an adequate Crostini device, a buggy Linux laptop</a>
+ <span class="time-suffix">(2023-04-22)</span>
+ </li>
+ <li>
+ <span class="time-prefix">2020-10-21 — </span>
+ <a href="/video-streaming-3/">The video streaming finale, or why put.io is awesome</a>
+ <span class="time-suffix">(2020-10-21)</span>
+ </li>
+ <li>
+ <span class="time-prefix">2015-06-05 — </span>
+ <a href="/custom-theme/">Look ma, no stock theme!</a>
+ <span class="time-suffix">(2015-06-05)</span>
+ </li>
+ <li>
+ <span class="time-prefix">2015-01-29 — </span>
+ <a href="/fcitx/">Dẹp ibus-unikey đi, dùng fcitx-unikey nhé!</a>
+ <span class="time-suffix">(2015-01-29)</span>
+ </li>
+ <li>
+ <span class="time-prefix">2014-01-25 — </span>
+ <a href="/cool/">"Have you built anything cool?"</a>
+ <span class="time-suffix">(2014-01-25)</span>
</li>
</ul>
@@ -91,7 +111,7 @@ <h1 class="site-title">Hi, I'm Nhân</h1>
</style>
<footer>
-© 2023 nhanb<br>
+© 2014–2023 nhanb<br>
Made with <a href="https://github.com/nhanb/s4g">s4g</a>
</footer>
diff --git a/content/posts/why-i-use-linux-automation.md b/linux-automation/index.dj
similarity index 100%
rename from content/posts/why-i-use-linux-automation.md
rename to linux-automation/index.dj
diff --git a/manifest.txt b/manifest.txt
index 2bb9e07..0bb25ff 100644
--- a/manifest.txt
+++ b/manifest.txt
@@ -1,4 +1,8 @@
about/index.html
+chromebook/index.html
+cool/index.html
+custom-theme/index.html
+fcitx/index.html
feed.xml
ideas/index.html
index.html
@@ -31,4 +35,5 @@ posts/what-i-did-after-installing-manjaro-xfce/index.html
posts/why-i-use-linux-automation/index.html
posts/working-with-sqlite-in-python-without-an-orm-or-migration-framework/index.html
projects/index.html
+video-streaming-3/index.html
yaks/index.html
\ No newline at end of file
diff --git a/content/posts/what-i-did-after-installing-manjaro.md b/manjaro-xfce/index.dj
similarity index 100%
rename from content/posts/what-i-did-after-installing-manjaro.md
rename to manjaro-xfce/index.dj
diff --git a/content/posts/introducing-mcross.md b/mcross/index.dj
similarity index 100%
rename from content/posts/introducing-mcross.md
rename to mcross/index.dj
diff --git a/content/posts/set-up-node-webkit-development-environment.md b/node-webkit/index.dj
similarity index 100%
rename from content/posts/set-up-node-webkit-development-environment.md
rename to node-webkit/index.dj
diff --git a/notes/index.html b/notes/index.html
index e3b1fbb..5d2ad25 100644
--- a/notes/index.html
+++ b/notes/index.html
@@ -68,7 +68,7 @@ <h2>SRE</h2>
</main>
<footer>
-© 2023 nhanb<br>
+© 2014–2023 nhanb<br>
Made with <a href="https://github.com/nhanb/s4g">s4g</a>
</footer>
diff --git a/content/posts/modern-vim-plugin-management-pathogen-vs-vundle.md b/pathogen-vs-vundle/index.dj
similarity index 100%
rename from content/posts/modern-vim-plugin-management-pathogen-vs-vundle.md
rename to pathogen-vs-vundle/index.dj
diff --git a/content/posts/i-did-not-sign-that-stupid-petition.md b/petition-fraud/index.dj
similarity index 100%
rename from content/posts/i-did-not-sign-that-stupid-petition.md
rename to petition-fraud/index.dj
diff --git a/content/posts/i-made-my-python-webapp-pip-installable.md b/pippable-webapp/index.dj
similarity index 100%
rename from content/posts/i-made-my-python-webapp-pip-installable.md
rename to pippable-webapp/index.dj
diff --git a/projects/index.dj b/projects/index.dj
index 2d2ff31..dc87ab4 100644
--- a/projects/index.dj
+++ b/projects/index.dj
@@ -1,4 +1,5 @@
Title: Projects
+ShowInFeed: false
Thumb: images/keyboard-warrior.jpg
---
diff --git a/projects/index.html b/projects/index.html
index 99175de..0f428ef 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -78,7 +78,7 @@ <h2>Caophim</h2>
</main>
<footer>
-© 2023 nhanb<br>
+© 2014–2023 nhanb<br>
Made with <a href="https://github.com/nhanb/s4g">s4g</a>
</footer>
diff --git a/content/posts/how-to-install-pyqt5-on-virtualenv-on-ubuntu-14.04.md b/pyqt5/index.dj
similarity index 100%
rename from content/posts/how-to-install-pyqt5-on-virtualenv-on-ubuntu-14.04.md
rename to pyqt5/index.dj
diff --git a/content/posts/introducing-pytaku.md b/pytaku/index.dj
similarity index 100%
rename from content/posts/introducing-pytaku.md
rename to pytaku/index.dj
diff --git a/content/posts/fix-rmit-wifi-issue-with-ubuntu-13-04.md b/rmit-wifi/index.dj
similarity index 100%
rename from content/posts/fix-rmit-wifi-issue-with-ubuntu-13-04.md
rename to rmit-wifi/index.dj
diff --git a/content/posts/working-with-sqlite-without-an-orm.md b/sqlite-python/index.dj
similarity index 100%
rename from content/posts/working-with-sqlite-without-an-orm.md
rename to sqlite-python/index.dj
diff --git a/content/posts/simplest-possible-stepmania-soft-to-hard-pad-mod.md b/stepmania-pad/index.dj
similarity index 100%
rename from content/posts/simplest-possible-stepmania-soft-to-hard-pad-mod.md
rename to stepmania-pad/index.dj
diff --git a/content/posts/italic-text-in-vim-tmux-gnome-terminal.md b/tmux-italics/index.dj
similarity index 100%
rename from content/posts/italic-text-in-vim-tmux-gnome-terminal.md
rename to tmux-italics/index.dj
diff --git a/content/posts/installing-programs-in-ubuntu.md b/ubuntu-programs/index.dj
similarity index 100%
rename from content/posts/installing-programs-in-ubuntu.md
rename to ubuntu-programs/index.dj
diff --git a/content/posts/towards-an-acceptable-video-playing-experience.md b/video-streaming-1/index.dj
similarity index 100%
rename from content/posts/towards-an-acceptable-video-playing-experience.md
rename to video-streaming-1/index.dj
diff --git a/content/posts/streaming-videos-from-google-drive.md b/video-streaming-2/index.dj
similarity index 100%
rename from content/posts/streaming-videos-from-google-drive.md
rename to video-streaming-2/index.dj
diff --git a/content/posts/video-streaming-finale-or-why-put-io-is-awesome.md b/video-streaming-3/index.dj
similarity index 79%
rename from content/posts/video-streaming-finale-or-why-put-io-is-awesome.md
rename to video-streaming-3/index.dj
index a14d360..e6d2651 100644
--- a/content/posts/video-streaming-finale-or-why-put-io-is-awesome.md
+++ b/video-streaming-3/index.dj
@@ -1,9 +1,10 @@
Title: The video streaming finale, or why put.io is awesome
-Date: 2020-10-21 11:45
+PostedAt: 2020-10-21 11:45
+---
-[Previously](/posts/streaming-videos-from-google-drive-a-second-attempt/),
-[previously](/posts/towards-an-acceptable-video-playing-experience/).
+[Previously](../video-streaming-2),
+[previously](../video-streaming-1).
I ditched the whole self hosted mess and just bought a [put.io](https://put.io)
@@ -22,10 +23,12 @@
audio tracks, I can always drag-n-drop the original file's streaming URL from
the browser straight to an mpv launcher like this:
+``` =html
<video controls>
- <source src="/images/put.io_01_mpv.mp4" type="video/mp4">
- <a href="/images/put.io_01_mpv.mp4">Video: /images/put.io_01_mpv.mp4</a>
+ <source src="put.io-drag-n-drop.mp4" type="video/mp4">
+ <a href="put.io-drag-n-drop.mp4">Video: put.io-drag-n-drop.mp4</a>
</video>
+```
It also has a open source third-party [Android app][1] that lets me browse and
diff --git a/video-streaming-3/index.html b/video-streaming-3/index.html
new file mode 100644
index 0000000..471725e
--- /dev/null
+++ b/video-streaming-3/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>The video streaming finale, or why put.io is awesome | Hi, I'm Nhân</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
+ <link rel="stylesheet" href="/_theme/base.css">
+</head>
+
+<body>
+
+<link rel="stylesheet" href="/_theme/navbar.css">
+<nav>
+ <a href="/">Home</a>
+ <a href="/about/">About</a>
+ <a href="/projects/">Projects</a>
+ <span class="posted-on">
+ Posted on
+ <time datetime="2020-10-21">
+ Wednesday, 21 Oct 2020
+ </time>
+ </span>
+
+</nav>
+<hr class="nav-hr">
+
+
+<main>
+<h1>The video streaming finale, or why put.io is awesome</h1>
+<p><a href="../video-streaming-2">Previously</a>,
+<a href="../video-streaming-1">previously</a>.</p>
+<p>I ditched the whole self hosted mess and just bought a <a href="https://put.io">put.io</a>
+subscription instead. This has become the smoothest, most no-nonsense video
+streaming experience I’ve ever had.</p>
+<p>It’s a seedbox.</p>
+<p>It transcodes.</p>
+<p>It streams.</p>
+<p>It has a web-based video player that lets me pick subtitles.</p>
+<p>In cases when the subtitles aren’t recognized, or when I want to switch between
+audio tracks, I can always drag-n-drop the original file’s streaming URL from
+the browser straight to an mpv launcher like this:</p>
+<video controls>
+ <source src="put.io-drag-n-drop.mp4" type="video/mp4">
+ <a href="put.io-drag-n-drop.mp4">Video: put.io-drag-n-drop.mp4</a>
+</video>
+<p>It also has a open source third-party <a href="https://github.com/DSteve595/Put.io">Android app</a> that lets me browse and
+stream via mpv-android. As icing on the cake, this app supports casting to
+Chromecast-enabled TVs - everything Just Works (tm).</p>
+<p>The above is only possible because put.io exposes a powerful, well-documented
+API for everyone to play with.</p>
+<p>The web player is clean, snappy (see that, Google Drive team?) and has
+autoplay disabled by default (screw you, Netflix).</p>
+<p>It’s refreshing to find software that works <em>for</em> instead of <em>against</em> its
+users these days.</p>
+
+</main>
+
+<footer>
+© 2014–2023 nhanb<br>
+Made with <a href="https://github.com/nhanb/s4g">s4g</a>
+</footer>
+
+</body>
+
+</html>
diff --git a/content/images/put.io_01_mpv.mp4 b/video-streaming-3/put.io-drag-n-drop.mp4
similarity index 100%
rename from content/images/put.io_01_mpv.mp4
rename to video-streaming-3/put.io-drag-n-drop.mp4
diff --git a/content/posts/open-http-link-under-cursor-in-vim.md b/vim-open-link/index.dj
similarity index 100%
rename from content/posts/open-http-link-under-cursor-in-vim.md
rename to vim-open-link/index.dj
diff --git a/content/posts/virtualenvwrapper-with-python2-python3.md b/virtualenvwrapper/index.dj
similarity index 100%
rename from content/posts/virtualenvwrapper-with-python2-python3.md
rename to virtualenvwrapper/index.dj
diff --git a/yaks/index.html b/yaks/index.html
index 31f5cb4..808cd40 100644
--- a/yaks/index.html
+++ b/yaks/index.html
@@ -92,7 +92,7 @@ <h2>Home server</h2>
</main>
<footer>
-© 2023 nhanb<br>
+© 2014–2023 nhanb<br>
Made with <a href="https://github.com/nhanb/s4g">s4g</a>
</footer>