diff options
| -rw-r--r-- | _posts/2023-07-29-plaintext-is-beautiful.md | 78 | ||||
| -rw-r--r-- | _posts/_drafts/2023-07-29-plaintext-is-beautiful.md | 51 | ||||
| -rw-r--r-- | blog.html | 136 |
3 files changed, 129 insertions, 136 deletions
diff --git a/_posts/2023-07-29-plaintext-is-beautiful.md b/_posts/2023-07-29-plaintext-is-beautiful.md new file mode 100644 index 0000000..06b7c14 --- /dev/null +++ b/_posts/2023-07-29-plaintext-is-beautiful.md @@ -0,0 +1,78 @@ +--- +layout: post +title: Plaintext is Beautiful +date: 2023-07-18T09:27:00Z +tags: [webdev, text editor, development, gopher] +--- + +Alternative title: Why does this website look so different? + +You might notice that the site looks a lot different than it did before.<br> If +you're new, this is how it looked: + + + +For a lot of people, this may have been a lot more of a pleasing design than the +current one. Shit, I still think that design has its merits, but it did have to +change. I will explain why this was the case, and also why I went for this +current design (which I hope isn't too bad!). + +### Performance issues + +So, Chromium-based browsers offer a feature in their dev panel called +[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). In effect, +this is a tool that enables a developer to assess the quality of their website +based on some important metrics (a11y, performance) and some not so important +ones (like the dreaded SEO). I don't like using Google-related tools very much, +but out of curiosity I did decide to check how my site was doing. + +Accessibility and (_shudder_) SEO were great, but to my surprise, the +performance score was a disastrous 54 out of 100. To make matters worse, +Lighthouse had calculated that my home page took on average **7 seconds** to +load! This is really bad, especially since it was literally just a couple of pictures +and some text, so I checked what its recommendations were and followed them. I +managed to get the score up to around 70 or 80, but still the website felt +really sluggish. It was at this point that I came to the realisation that my efforts to optimise +the site in its current form were pointless, as the whole design was very +bloated (with lots of images everywhere). + +Thankfully, I had come across some new communities at the time which helped +provide inspiration for a new design! + +### Smolnet, gopher and tildes + +If you've read my previous posts, you'll know that I am a member of SDF, a +public access Unix system. If you haven't, [do it now](/2023/07/11/enter-the-fediverse)!!! + +Anyway, I discovered since then that SDF is not alone in this space of public Unix systems, +and in fact there is an entire federation of these systems (known as "tildes") called the +[tildeverse](https://tildeverse.org). All of these provide simple web hosting as well as +IRC, Usenet and some other useful things. Members of the tilde run services such as a +PBX telephone network, a zine and a Mastodon instance. It seemed that most of these tildes +provided a wider range of free services than SDF (which +requires you to fork out a verification fee in order to do anything - which is totally +fair, but not something I want to pay when I can get it free elsewhere). As a result, I picked +a tilde ([tilde.institute](https://tilde.institute) - because it sounds fancy to be a part of an +institute) and started to get set up with the various services provided. + +It was at this point that I discovered the [Gopher protocol](https://en.wikipedia.org/wiki/Gopher_(protocol)), +because it was a service provided by the institute. Basically, before the current HTTP(S) and WWW protocols +existed, Gopher was a simple protocol that existed for sharing plaintext documents over TCP networks. +Instead of HTML, Gopher has a `gophermap` format to define special pages with links, but most files are served +as simple `.txt` files. The protocol predated (and was largely replaced by) the WWW, possibly because +opportunities to monetise Gopher were much fewer and further between than the main Web, but it has seen +a resurgence in the 21st century among nerds and anti-capitalists alike, which when combined with users +of the newer Gemini and Spartan protocols make the Smolnet, an independent, minimal Web. +As someone who is both, this appealed to me greatly, and I quickly downloaded +[a browser capable of using the protocol](https://gmi.skyjake.fi/lagrange/) and started browsing. I +explored the gopherholes of fellow SDF members, fellow tilde members, and just random people via the +Floodgap directory and search. + +I set up my own gopher hole via the institute and copied over some content +from my regular website (save the blog which was a bit too image-heavy for the protocol). It was as I was +copying these things over that I realised - why don't I apply these principles to my main website? I was +having performance issues on my website, and gopherholes were loading way faster on my device that HTTP +websites ever did, so why can't I make *my* website work like that? I quickly went over to GitHub, tossed out +my CSS file and gave the website this terminal-esque look. I hope you enjoy the new layout! + +That doesn't mean I've abandoned the smolnet - check my gopherhole out at <br> `gopher://tilde.institute/~mounderfod`! diff --git a/_posts/_drafts/2023-07-29-plaintext-is-beautiful.md b/_posts/_drafts/2023-07-29-plaintext-is-beautiful.md deleted file mode 100644 index c85a045..0000000 --- a/_posts/_drafts/2023-07-29-plaintext-is-beautiful.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: post -title: Plaintext is Beautiful -date: 2023-07-18T09:27:00Z -tags: [webdev, text editor, development, gopher] ---- - -Alternative title: Why does this website look so different? - -You might notice that the site looks a lot different than it did before.<br> If -you're new, this is how it looked: - - - -For a lot of people, this may have been a lot more of a pleasing design than the -current one. Shit, I still think that design has its merits, but it did have to -change. I will explain why this was the case, and also why I went for this -current design (which I hope isn't too bad!). - -### Performance issues - -So, Chromium-based browsers offer a feature in their dev panel called -[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). In effect, -this is a tool that enables a developer to assess the quality of their website -based on some important metrics (a11y, performance) and some not so important -ones (like the dreaded SEO). I don't like using Google-related tools very much, -but out of curiosity I did decide to check how my site was doing. - -Accessibility and (_shudder_) SEO were great, but to my surprise, the -performance score was a disastrous 54 out of 100. To make matters worse, -Lighthouse had calculated that my home page took on average **7 seconds** to -load! - -This is really bad, especially since it was literally just a couple of pictures -and some text, so I checked what its recommendations were and followed them. I -managed to get the score up to around 70 or 80, but still the website felt -really sluggish. - -It was at this point that I came to the realisation that my efforts to optimise -the site in its current form were pointless, as the whole design was very -bloated (with lots of images everywhere). - -Thankfully, I had come across some new communities at the time which helped -provide inspiration for a new design! - -### Smolnet, gopher and tildes - -If you've read my previous posts, you'll know that I am a member of SDF, a -public access Unix system. If you haven't, [do it now](/2023/07/11/enter-the-fediverse)!!! - -<!-- TODO: finish this article !--> \ No newline at end of file diff --git a/blog.html b/blog.html index a2c477a..e064529 100644 --- a/blog.html +++ b/blog.html @@ -4,92 +4,58 @@ title: Blog permalink: /blog/ --- -<a href="/"><p>⟸ Back to homepage</p></a> +<a href="/"> + <p>⟸ Back to homepage</p> +</a> <h1>Blog</h1> +<a href="/feed.xml"> + <p>Click here for RSS feed</p> +</a> <script type="text/javascript" src="../mentions.js"></script> -{% for post in site.posts %} -<h2><a href="{{ post.url }}">{{ post.title }}</a></h2> -<p> - <svg - alt="date published" - xmlns="http://www.w3.org/2000/svg" - width="16" - height="16" - fill="gray" - class="bi bi-calendar-fill" - viewBox="0 0 16 16" - > - <path - d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z" - /> - </svg> - <em style="color: gray; padding-right: 1em" - >{{post.date | date: "%-d %B %Y"}}</em - > - <svg - alt="reading time" - xmlns="http://www.w3.org/2000/svg" - width="16" - height="16" - fill="gray" - class="bi bi-stopwatch-fill" - viewBox="0 0 16 16" - > - <path - d="M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16a7 7 0 0 0 5.29-11.584.531.531 0 0 0 .013-.012l.354-.354.353.354a.5.5 0 1 0 .707-.707l-1.414-1.415a.5.5 0 1 0-.707.707l.354.354-.354.354a.717.717 0 0 0-.012.012A6.973 6.973 0 0 0 9 2.071V1h.5a.5.5 0 0 0 0-1h-3zm2 5.6V9a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5.6a.5.5 0 1 1 1 0z" - /> - </svg> - {% assign time = post.content | number_of_words: "auto" | divided_by: 238 %} - {% if time == 0 %} - <em style="color: gray; padding-right: 1em">Less than a minute</em> - {% elsif time == 1 %} - <em style="color: gray; padding-right: 1em">{{time}} minute</em> - {% else %} - <em style="color: gray; padding-right: 1em">{{time}} minutes</em> - {% endif %} - <svg - alt="interactions" - xmlns="http://www.w3.org/2000/svg" - width="16" - height="16" - fill="gray" - class="bi bi-chat-right-text-fill" - viewBox="0 0 16 16" - > - <path - d="M16 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9.586a1 1 0 0 1 .707.293l2.853 2.853a.5.5 0 0 0 .854-.353V2zM3.5 3h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z" - /> - </svg> - <a - style="text-decoration: none" - href="https://webmention.io/api/mentions.html?token=LBBk4aar_MPltm9VG8bQTQ" - ><em style="color: gray" id="interactions" - ><span - data-webmention-count - data-url="https://www.mounderfod.online{{post.url | relative_url}}" - ></span> </em - ></a> -</p> -<p>{{ post.excerpt | truncatewords: 50 }}</p> -<p> - <svg - alt="tags" - xmlns="http://www.w3.org/2000/svg" - width="16" - height="16" - fill="gray" - class="bi bi-tag-fill" - viewBox="0 0 16 16" - > - <path - d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" - /> - </svg> - <em style="color: gray">{{post.tags | join: ", "}}</em> -</p> -{% endfor %} +<div class="posts"> -<a href="/feed.xml" style="text-align: center" - ><p>Click here for RSS feed</p></a -> + {% for post in site.posts %} + <div style="column-span: 1; break-inside: avoid;"> + <h2><a href="{{ post.url }}">{{ post.title }}</a></h2> + <p> + <svg alt="date published" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" + class="bi bi-calendar-fill" viewBox="0 0 16 16"> + <path + d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z" /> + </svg> + <em style="color: gray; padding-right: 1em">{{post.date | date: "%-d %B %Y"}}</em> + <svg alt="reading time" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" + class="bi bi-stopwatch-fill" viewBox="0 0 16 16"> + <path + d="M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16a7 7 0 0 0 5.29-11.584.531.531 0 0 0 .013-.012l.354-.354.353.354a.5.5 0 1 0 .707-.707l-1.414-1.415a.5.5 0 1 0-.707.707l.354.354-.354.354a.717.717 0 0 0-.012.012A6.973 6.973 0 0 0 9 2.071V1h.5a.5.5 0 0 0 0-1h-3zm2 5.6V9a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5.6a.5.5 0 1 1 1 0z" /> + </svg> + {% assign time = post.content | number_of_words: "auto" | divided_by: 238 %} + {% if time == 0 %} + <em style="color: gray; padding-right: 1em">Less than a minute</em> + {% elsif time == 1 %} + <em style="color: gray; padding-right: 1em">{{time}} minute</em> + {% else %} + <em style="color: gray; padding-right: 1em">{{time}} minutes</em> + {% endif %} + <svg alt="interactions" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" + class="bi bi-chat-right-text-fill" viewBox="0 0 16 16"> + <path + d="M16 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9.586a1 1 0 0 1 .707.293l2.853 2.853a.5.5 0 0 0 .854-.353V2zM3.5 3h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z" /> + </svg> + <a style="text-decoration: none" href="https://webmention.io/api/mentions.html?token=LBBk4aar_MPltm9VG8bQTQ"><em + style="color: gray" id="interactions"><span data-webmention-count + data-url="https://www.mounderfod.online{{post.url | relative_url}}"></span> </em></a> + </p> + <p>{{ post.excerpt | truncatewords: 50 }}</p> + <p> + <svg alt="tags" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-tag-fill" + viewBox="0 0 16 16"> + <path + d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> + </svg> + <em style="color: gray">{{post.tags | join: ", "}}</em> + </p> + </div> + {% endfor %} +</div> \ No newline at end of file |