Coffee Space

CSS Dark Mode

We now have a dark mode on the website! It’s very basic and simply implemented in CSS using a media query selector, being the least intrusive method of implementation I could think of. It uses a query like so:

0001 body, code{
0002   background-color: #DDD;
0003   color: #222;
0004   font-family: "Computer Modern Serif", serif;
0005   font-size: 18px;
0006   margin: 0px;
0007   text-align: center;
0008 }
0009 @media (prefers-color-scheme: dark){
0010   body, code{
0011     background-color: #222;
0012     color: #DDD;
0013   }
0014 }

By default the theme is light. I’ve seen a few websites use @media (prefers-color-scheme: light) to reduce elements being set too many overriding properties - but this doesn’t feel fail-safe encase the media query is not supported.

As you can see, we only need to override the colours for the dark mode, and this is only done if the browser supports this. This appears to be the best fail-safe low-compromise solution to the problem.

By default, this is the view I enjoy in Firefox - personally I find it better. I’m still slightly adjusting the colours, but they are mostly there now. I still need to update Dead Social to also support the dark mode theme.

MathML Insertion

This one is more of a discussion about how the sausage is made, but now we are only inserting the MathML JS when we detect that the rendered output requires it. This removes the need for the 95% of pages that do not include any MathML to require the JS, which is only required for Chrome, Chromium and Safari users currently.

$$MathML_{support} = true$$

In general I am currently of the opinion that MathML is the real winner of the browser math libraries, and with the one I’m using weighing in at just 80kB (compare to other much heavier libraries) I’m pretty happy with the compromise.

Just recently I was glad to have implemented the MathML functionality when I was discussing $R_0$ values in an article about the COVID lockdown.

External Link Hinting

NOTE: This is a late addition to this article, apologies. The idea was too good to not implement!

After reading an article by Hund and then an article by Christian Oliff I have decided to also do the same, and use external link hinting. I used to do this quite some years ago, but I used bitmaps and it looks like crap.

In order to implement this, I used the following CSS:

0015 /* Annotate links */
0016 a[href^="http"]::after, a[href^="https://"]::after{
0017   content: "";
0018   width: 11px;
0019   height: 11px;
0020   margin-left: 4px;
0021   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='cyan' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
0022   background-position: center;
0023   background-repeat: no-repeat;
0024   background-size: contain;
0025   display: inline-block;
0026 }
0027 a[href^="https://coffeespace.org.uk/"]::after, a[href^="https://coffeespace.org.uk/"]::after{ display: none !important; }

It is essentially a clone of Hund’s CSS, except I use Christian’s data URI to save the browser the additional requests, and therefore limit re-layout of the document once the image is requested. My assumption is also that if your browser supports such advanced CSS, then you will likely support the data URI. For example, it works in Firefox and Chromium, but not NetSurf or Dillo ¹.

At some point it would be good to add a special link for RSS feeds too… Perhaps in a nice orange colour!

Finally, regarding Hund’s comment:

As for the “dark mode” users, there’s unfortunately no way to override the black icon with a white icon. I don’t know why it doesn’t work, but it’s not something I can do about it.

This is relatively easy using the CSS hack I implemented previously.

Content

I have obviously been uploading quite a bit of content (and continue to do so as I type). Particularly worth checking out in the recent articles (in my opinion) are:

• Keto diet updates - A series of updates about my keto diet progress.
• COVID lockdown - An important discussion about misconception about vaccination results.
• Chunk boi pro - The start of creating a custom laptop to replace my current daily driver.
• Polygon experiments - A fun project in creating vector images from bitmaps.

Of course as always, use your favourite RSS feed reader and subscribe to the sections of the website that interest you the most.

Statistics

A while back I discussed website statistics, specifically those of last year. 6 or so months on we can now discuss how things have changed.

Daily requests are now a little higher, averaging more than 10x more traffic per day. A few changes were made based on my previous ideas:

• SEO optimization - This was mostly about forcing search engines to check back more regularly for additional content. This turned out to be the most successful change.
• Link preview - This didn’t have so much effect in the end, but was a worthwhile exercise nevertheless. If the website does gain some mainstream attention (hopefully positive) at least the website will be prepared.

It appears that most of these new requests were picked up in the Netherlands - I have zero idea for why this is the case. I had a look online and couldn’t find out too much information as to why this is the case.

Other than that, views from Germany and the US seem to be quite high also. Bare in mind that I probably generate the majority of the traffic from New Zealand, there is an awful lot of traffic coming from other locations that is not generated by myself.

Looking at a random sample of the Nginx logs (filtered), a lot of the traffic consists of bots accessing /git/*, which is the cgit server. Good job I turned on static caching so heavily, otherwise the server would have melted by now!

0028 185.191.###.### - - [###] "GET /git/linux/diff/.gitignore?h=v2.6.34-rc3 HTTP/1.1" 200 1413 "-" "Mozilla/5.0 (compatible; SemrushBot/7~bl; +http://www.semrush.com/bot.html)"
0029 185.191.###.### - - [###] "GET /git/freerouting/commit/?id=dec00042ca637585ca23d1a97b3e0853f28e8bc5 HTTP/1.1" 200 2271 "-" "Mozilla/5.0 (compatible; SemrushBot/7~bl; +http://www.semrush.com/bot.html)"
0030 167.114.###.### - - [###] "GET /git/free-comment/diff/dat?h=v0.2.0&id=9d79abaa5baa04cf8a486f0e0fcfdc419e009a47&id2=cdeb9f1ba03259a53d0252e7a7b5f984c5d6dcbc HTTP/1.1" 200 1551 "-" "Mozilla/5.0 (compatible; MJ12bot/v1.4.8; http://mj12bot.com/)"
0031 185.191.###.### - - [###] "GET /git/oakwm/plain/res?id=cceeb4b702b3ba7a31837392a6ad9d81c0399f5b HTTP/1.1" 200 9457 "-" "Mozilla/5.0 (compatible; SemrushBot/7~bl; +http://www.semrush.com/bot.html)"
0032 114.119.###.### - - [###] "GET /git/free-comment/patch/res/default.properties?id=2d216293167febd6cc1b1aabffdcd1e00f8cb5f0 HTTP/1.1" 200 875 "-" "Mozilla/5.0 (Linux; Android 7.0;) AppleWebKit/537.36 (KHTML, like Gecko) Mobile Safari/537.36 (compatible; PetalBot;+https://webmaster.petalsearch.com/site/petalbot)"
0033 185.191.###.### - - [###] "GET /git/cgit.git/log/cgitrc?id=b44b02a98253e78334f7fd13d9c4e1eb59562392 HTTP/1.1" 200 2390 "-" "Mozilla/5.0 (compatible; SemrushBot/7~bl; +http://www.semrush.com/bot.html)"
0034 167.114.###.### - - [###] "GET /git/free-comment/diff/dat?h=v0.2.0&id=cdeb9f1ba03259a53d0252e7a7b5f984c5d6dcbc&id2=b8c47c2c099bcc3fb4267169e514c97216cb4503 HTTP/1.1" 200 1550 "-" "Mozilla/5.0 (compatible; MJ12bot/v1.4.8; http://mj12bot.com/)"

Traffic is traffic though - anything that gets search engines looking at my website is generally good for discoverability.

Moving

This old Scaleway C1 instance (bare metal) has its days numbered now, despite me still being relatively happy with the service. I’m getting quite aggressive emails now telling me to move the instance somewhere else. This is the current timeline:

• June 1, 2021: quotas and limitations

As a C1 instance customer, you will be able to keep all your current C1 instances running, and to create one more new C1 instance. You will be allowed to start, stop and back up C1 instances, so you can assess all possible migration scenarios.

As of June 1, Scaleway Elements customers that do not already have C1 instances will not be able to create new ones.

• July 1, 2021: end of support

July 1, 2021 will mark the end of support for C1, meaning no more patches, updates or interventions on software or hardware will be provided. You will not be able to open new support tickets for C1 instances either.

• August 1, 2021: instance creation freeze

Scaleway Elements users will no longer be able to create C1 instances. As a C1 instance customer, your current instances will keep running. However in case of an instance stopping (planned or unplanned), you will not be able to restart the instance.

• September 1, 2021: end of life

Flexible & dynamic public IPs will be detached from C1 instances to force a service interruption as a final warning. You will have 24 hours to migrate your instances.

Please note, flexible IPs will still be charged if you do not delete them.

As it stands, if the server crashes I’m screwed. I either need to migrate to another of their servers, or find a different one elsewhere. I am currently looking at different services. I have had a very good experience so far with ChicagoVPS and could be convinced to migrate my servers there. $15 per year is pretty competitive and I already have accounts and servers there, although it’s not nearly as powerful as what I currently run.