Add new blog post

6 files changed, 135 insertions, 0 deletions

diff --git a/content/posts/2021-10-08-sane-scrollbar.md b/content/posts/2021-10-08-sane-scrollbar.md
new file mode 100644
index 0000000..e8c5ba8
--- /dev/null
+++ b/content/posts/2021-10-08-sane-scrollbar.md
@@ -0,0 +1,135 @@
+---
+title: "How NOT to mess with the scroll bar"
+date: 2021-10-08
+lang: en
+categories: [ blog, rant ]
+tags: [ ux, usability, scrollbar ]
+translationKey: "sane-scrollbar"
+---
+
+Be prepared to use your scrollbar a lot, since it's topical 😉[^0].
+
+## GTK custom styling
+
+Recently, I've tried [BadWolf][badwolf], a browser written by someone I found
+on the Fedi.  It's quite amazing if you are interested minimalism---the memory
+footprint is very small, even smaller than qutebrowser, a quite well-known
+minimal web browser.  I've packaged it on [openSUSE][os-wolf] thanks to
+<abbr title="Open Build Service">OBS</abbr>.  That being said, its feature is
+quite limited---bookmarks and history, for examples, are not quite
+well-supported.
+
+[badwolf]: https://hacktivis.me/projects/badwolf
+[os-wolf]: https://software.opensuse.org/package/badwolf
+
+But I digressed.  I brought up BadWolf not because it is great (should I rather
+say, small), but because by using it, I now know how to configure GTK window
+styling with <abbr title="Cascade StyleSheet">CSS</abbr>.  On a Unix-like
+system, this <abbr>CSS</abbr> file would be located at
+`$HOME/.config/gtk-3.0/gtk.css`.  I configure my scrollbar like this:
+
+```css
+scrollbar, scrollbar slider {
+    min-width: 10px;
+    min-height: 20px;
+}
+
+scrollbar {
+    background: #111;
+}
+
+scrollbar slider {
+    background: lightblue;
+}
+
+scrollbar slider:hover {
+    background: lightgreen;
+}
+```
+
+The default GTK scrollbar is way too small, so I enlarge it to at least 10
+pixels to make it more clickable.  The default scrollbar is like grey on...
+darker grey?  That's not very contrast, so I make it light blue on dark grey
+background to be more visible.  Additionally, it turns green to let me know my
+mouse is at the right place when I need to scroll.
+Additionally, I also set `GTK_OVERLAY_SCROLLING=0` so that it doesn't disappear
+when I don't hover on it.  (Yes, I have a very peculiar expectation.)
+
+![BadWolf's compliant scrollbar with expected
+width](/images/scrollbar-badwolf.png)
+
+## The troublemakers
+
+And then here comes the developers who decided to mess with the scrollbar:  it
+now looks ugly at best and unusable at worst.  GTK unfortunately doesn't have
+`!important` in its CSS to disallow these overriding.
+
+### Firefox
+
+So when I go back to Firefox, I'm slightly disapointed to see that it does not
+follow my <abbr>CSS</abbr>: the scrollbar is smaller than 10 pixels:
+
+![Firefox's scrollbar with smaller width](/images/scrollbar-firefox.png)
+
+Well, at least it's still clickable somewhat, I guess.  I've seen smaller bars.
+
+### LibreOffice
+
+On the opposite side, LibreOffice's scrollbar is just way too large:
+
+![LibreOffice's scrollbar with extravagant
+width](/images/scrollbar-libreoffice.png)
+
+I haven't looked at the source for LibreOffice, but it seems they even increase
+the scrollbar size to be way too large.  This doesn't make it less usable by
+any mean, but it's an eyesore for me.
+
+### Mastodon
+
+Who knows that it's not only the apps, but also the websites who are not
+supposed to modify *our* software, can style the scrollbar to our dismay?  As
+much as I like Fediverse, this scrollbar is the thing I like the least:
+
+![Mastodon's scrollbar without round border](/images/scrollbar-mastodon-1.png)
+
+Just by looking at this, do you know which part is the slider (the thing you
+hold on to scroll)? That's why we have margin and border.  Please don't change
+this!
+
+But well, what's worse is that...
+
+![Mastodon's scrollbar without contrast color](/images/scrollbar-mastodon-2.png)
+
+I just hover the slider and it's **GONE**.
+
+Note that this is done on BadWolf.  On Firefox, thanks to them messing with the
+scrollbar, the problem just stops at the contrast.
+
+## Stylus to the rescue
+
+Earlier, I have given a [shoutout][post-stylus] to [Stylus][stylus].  I'd like
+to give a shoutout again: Thanks Stylus for protecting me from these websites
+who like to mess with my scrollbar!  I have a custom style named "No one dares
+override my GTK config" which is like this:
+
+```css
+html {
+    scrollbar-color: inherit !important;
+    scrollbar-width: inherit !important;
+}
+```
+
+Of course, this can't change Firefox's or LibreOffice's modification, but now
+I'm at peace knowing that websites can no longer tamper with my scrollbar.  🙂
+
+[post-stylus]: /posts/2021-05-30-css-stylus/
+[stylus]: https://addons.mozilla.org/en-US/firefox/addon/styl-us/
+
+[^0]: I know you can use the mouse scroller, but if you're like me and have a
+  mouse that sucks, using the scroller is quite painful by itself.
+  On related note, I've finalized a [JavaScript script][gen-index] that helps
+  generating index from heading, thanks to a [discussion on Fosstodon][dis].
+  You may find scrolling with headings easier using this script.
+
+[gen-index]: https://github.com/Huy-Ngo/generate-index
+[dis]: https://fosstodon.org/@huy_ngo/106930129214709390
diff --git a/static/images/scrollbar-badwolf.png b/static/images/scrollbar-badwolf.png
new file mode 100644
index 0000000..c8f0a63
--- /dev/null
+++ b/static/images/scrollbar-badwolf.png
Binary files differdiff --git a/static/images/scrollbar-firefox.png b/static/images/scrollbar-firefox.png
new file mode 100644
index 0000000..3d39137
--- /dev/null
+++ b/static/images/scrollbar-firefox.png
Binary files differdiff --git a/static/images/scrollbar-libreoffice.png b/static/images/scrollbar-libreoffice.png
new file mode 100644
index 0000000..21607ae
--- /dev/null
+++ b/static/images/scrollbar-libreoffice.png
Binary files differdiff --git a/static/images/scrollbar-mastodon-1.png b/static/images/scrollbar-mastodon-1.png
new file mode 100644
index 0000000..4c266dc
--- /dev/null
+++ b/static/images/scrollbar-mastodon-1.png
Binary files differdiff --git a/static/images/scrollbar-mastodon-2.png b/static/images/scrollbar-mastodon-2.png
new file mode 100644
index 0000000..3b5eda6
--- /dev/null
+++ b/static/images/scrollbar-mastodon-2.png
Binary files differ