Blog: Add bad-theming.md

Makefile

@@ -37,11 +37,9 @@ temp/openring.html: temp templates/openring.html scripts/openring/openring
 	scripts/openring/openring -l 256\
 		-s http://jakob.space/feed.xml \
 		-s https://drewdevault.com/feed.xml \
-		-s https://alwayslivid.com/feed/blog.xml\
 		-s http://mjsstuf.x10host.com/wp49/feed/ \
-		-s https://cadence.moe/blog/rss.xml?limit=4 \
 		-s https://blag.nicolor.tech/feed/feed.xml \
-		-s https://jazz.cro.wtf/rss.xml \
+		-s https://cricket.piapiac.org/blog/atom.xml \
 		< templates/openring.html \
 		> temp/openring.html
 

music.json

@@ -1,4 +1,11 @@
 [
+	{
+		"id": "scrap_13",
+		"name": "Scrap #13",
+		"description": "I don't like this one",
+		"group": "Scraps",
+		"timestamp": 1636314430
+	},
 	{
 		"id": "scrap_12",
 		"name": "Scrap #12",

posts/2021-11-04-git-diversity.md

@@ -0,0 +1,37 @@
+template: post
+title: Diversity in git hosting
+author: flewkey
+timestamp: 1636061911
+license: CC-BY
+
+I recently ran a quick & dirty[^1] scan of the packages on my laptop to figure
+out where their git repositories are hosted. The full log of it is
+[here](https://pastebin.com/qruXskVf), if anyone is interested.
+
+[^1]: Because most packages don't seem to include an EGIT_REPO_URI, my script
+could only check 10% of them
+
+Going into this, I expected GitHub to be host 80% of the packages, GitLab to
+host 10% of the packages, and other sites to host the remaining 10%.
+
+I was correct about GitHub. However, I was pleasantly surprised to see that more
+packages lived on project-specific hosts than I'd thought. Conversely, GitLab
+turned out to be smaller than I'd thought.
+
+I might try to get more accurate results in the future by including more
+packages.
+
+### Top 10 git hosts
+
+```
+github.com: 1769 (81.26%)
+gitlab.com: 76 (3.49%)
+anongit.gentoo.org: 36 (1.65%)
+gitlab.freedesktop.org: 31 (1.42%)
+git.code.sf.net: 24 (1.10%)
+git.sr.ht: 20 (0.92%)
+git.kernel.org: 16 (0.73%)
+git.savannah.gnu.org: 15 (0.69%)
+anongit.freedesktop.org: 14 (0.64%)
+gitlab.gnome.org: 11 (0.51%)
+```

posts/2021-11-08-bad-theming.md

@@ -0,0 +1,28 @@
+template: post
+title: Respect my damn color scheme preference
+author: flewkey
+timestamp: 1636400000
+license: CC-BY
+
+I recently switched from light themes to dark themes. Dark themes seem to be
+supported enough that most applications seem to work with them. Many
+websites don’t, but it’s not the end of the world. Theming is hard and I do not
+expect developers to support it.
+
+However, I find it inexcusable and frustrating when a website already has a dark
+theme, but ignores the user’s preferences. Especially if they have a stupid
+little theme selector that writes to a value in localStorage or something.
+
+![That’s _not_ how you do that!]({root}images/theme-selector.png)
+
+If you must use JavaScript to set your themes, consider taking your user’s color
+scheme preference into consideration when choosing which theme to default to. We
+will be grateful.
+
+```
+if (window.matchMedia("(prefers-color-scheme: dark)").matches)
+	/* Set theme */
+```
+
+Even better, you can just use a media query like a normal person. If you need
+to override it with JavaScript later, you can do that.

scripts/template_md.py

@@ -6,7 +6,7 @@ from template import template
 from pymdownx.superfences import SuperFencesCodeExtension
 
 def main():
-	md = markdown.Markdown(extensions = ["meta", "extra", "toc", SuperFencesCodeExtension(preserve_tabs=True)])
+	md = markdown.Markdown(extensions = ["meta", "extra", "toc", "markdown_captions", SuperFencesCodeExtension(preserve_tabs=True)])
 	with open(sys.argv[1], "r", encoding="utf-8") as file_in:
 		html = md.convert(file_in.read())
 	output = template(html, sys.argv[2], ".html", md.Meta) if "template" in md.Meta else html

static/style.css

@@ -38,6 +38,11 @@
 	font-style: normal;
 }
 
+:root {
+	--color-fg-faded: #555;
+	--color-bg-faded: #EEE;
+}
+
 body {
 	font-family: 'Fira Sans', sans-serif;
 	font-size: 18px;
@@ -211,14 +216,13 @@ div.block:first-of-type, div.block-small {
 	border-top: none;
 }
 
-code {
+pre, code {
-	background-color: #EEEEEE;
+	background-color: var(--color-bg-faded);
 }
 
 pre {
 	line-height: 1.5;
 	font-size: 14px;
-	background-color: #EEEEEE;
 	padding: 6px;
 	overflow: auto;
 }
@@ -272,6 +276,15 @@ p.openring {
 	text-align: right;
 }
 
+figure {
+	text-align: center;
+}
+
+figure figcaption {
+	line-height: 1;
+	color: var(--color-faded);
+}
+
 @media only screen and (max-width: 950px) {
 	header {
 		height: 172px;
@@ -423,6 +436,10 @@ p.openring {
 }
 
 @media (prefers-color-scheme: dark) {
+	:root {
+		--color-fg-faded: #BBB;
+		--color-bg-faded: #222;
+	}
 	body {
 		background-color: #111111;
 		color: #DDDDDD;
@@ -441,7 +458,7 @@ p.openring {
 		border-left: solid 2px #444444;
 	}
 
-	div.post-head span.subtext, div.article p.extra, p.openring {
+	p.faded, span.faded, div.post-head span.subtext, div.article p.extra, p.openring {
 		color: #BBBBBB;
 	}