Merge pull request #41 from de-soot/main

edited and added images to posts
de-soot · Sep 9, 2024 · 57f8464 · 57f8464
2 parents cc06618 + f9430cc
commit 57f8464
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 42 deletions.
diff --git a/_posts/2024-05-24-giscus-comments.md b/_posts/2024-05-24-giscus-comments.md
@@ -9,9 +9,11 @@ permalink: /giscus-comments
 I added a commenting feature for the blog using [giscus][giscus]. Basically, it uses [Github Discussions][discussions-docs] to store comments instead of storing it in its own database on the web server. Since this website is hosted on [Github Pages][pages-docs] and Pages only supports static websites, it cannot host its own databases to store things such as comments.
 
 # Try it
+
 You can test it out yourself in the comments on blog post below by signing into your github account and commenting, or you can comment on the repository's Github Discussions directly and it will show up on the comments section on the website similarly.
 
 # Add it to your own Github Pages website
+
 1) Make sure to enable Github Discussions on your website's Github repository.
 
 2) Navigate to `giscus.app` on your browser's address bar and follow the instructions under the "Configuration" section to configure your `<script>` tag attribute values.
@@ -21,6 +23,7 @@ You can test it out yourself in the comments on blog post below by signing into
 ---
 
 # Note
+
 Giscus finds and links the comments to the Github Discussions by searching through and matching URLs, path names, titles, and other such metadata. If you try to change a page's title without editing the associated Github Discussion accordingly, it may lead to giscus not being able to find and link it to the Github Discussion (this is especially noticible if you set the `<script>`'s `data-strict` attribute value to `"1"`), and hence Giscus will create a new Github Discussion.
 
 Giscus also only creates Discussions when someone comments, so it is easier to go back and edit to fix some things on your post if you do not have any comments yet rather than when your post already has comments in its own Discussion and you have to manually copy across those changes.

diff --git a/_posts/2024-09-07-dark-mode.md b/_posts/2024-09-07-dark-mode.md
@@ -7,14 +7,20 @@ permalink: /dark-mode
 ---
 
 # Why Dark Mode
+
 For users visiting your website in a dark room or at night, it is often less straining for the eyes if your webpage to be displayed in [dark mode][dark-mode].
 
+<img src="https://zerowidthjoiner.net/uploads/2020/04-11/light-vs-dark.png" alt="Comparison image of light theme on the left and dark theme on the right.">
+
 # How to do it
+
 From [MDN Web Docs][mdn]:
 > The @media [CSS][css] [at-rule][at-rule] can be used to apply part of a [style sheet][style-sheet] based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
 
 ## For Non-Static-Site-Generator Websites
+
 ### External Style Sheet
+
 In your HTML document, you can either link an external CSS style sheet in your `<head>` if you wish to separate your code out more:
 
 ```html
@@ -43,6 +49,7 @@ And in your `styles.css`:
 ```
 
 ### With the \<style> HTML tag
+
 You can also type out your CSS code in between `<style>` tags if you prefer everything to be contained in one HTML document:
 
 ```html
@@ -69,6 +76,7 @@ You can also type out your CSS code in between `<style>` tags if you prefer ever
 There also exists a [video guide by Eric Murphy on Youtube on how to do this similarly][yt-vid] if you prefer to follow along with a video or if you find reading this blog-style guide boring becuase Tiktok and Instagram Reels have fried your zoomer ADHD brain beyond repair.
 
 ## For Static-Site-Generator Websites
+
 It is a little bit less straightforward to do this with a static site generator like Jekyll (which has native support with Github Pages and is what this website uses) or Hugo as you have to override the theme's CSS style sheet.
 
 There is a [blog post by Tom Kadwill on how to override your CSS styles in Jekyll][css-blog] you can follow to create your SCSS file and after which you should get something that resembles this:
@@ -98,12 +106,14 @@ And you should get something like this after adding the dark mode code.
 
 For other static-site-generator generated websites, you can refer to the official documentation found online for information on how to override your theme's CSS.
 
-# Why Not Use a Toggleable Button Instead
+# Why Not Use a Toggleable Button Instead (Rant Warning)
+
 Rather than defaulting to light or dark mode and having a separate button (that uses Javascript) for the user to manually switch to their preferred theme, it might be better to automatically default to what they already set their browser's preferred theme to. This is so they do not get flashbanged by their monitors at night if your website defaults to light theme and they open their browser to your website for the first time, or without toggling it to dark mode the last time they visited, or just simply because your website does not store cookies about their previously toggled theme either due to your lack of know how, respect for user privacy, or plain laziness.
 
 You can also include the button to toggle themes on the website alongside if you like having more buttons on your website for showing off your Javascript skills to potential employers (I know the tech job market out there is rough for fresh grads right now) or just want to follow the current web trend on including more and more unnecessary Javascript bloat on websites with features that can be done easily with simple HTML and CSS.
 
 # Configure Giscus Theme
+
 To set it to match your website (if you have done the CSS `@media` trick shown above), simply set the `<script>`'s `data-theme` attribute value to `"preferred_color_scheme"` as shown below.
 
 ```html

diff --git a/_posts/2024-09-07-justify-text.md b/_posts/2024-09-07-justify-text.md
@@ -8,42 +8,57 @@ permalink: /justify-text
 
 You may have noticed while reading my blog posts that the way the text are aligned are a little different from the usual way the ones from other websites are --- that they always align as blocks of text no matter how you change your browser window's size. This is because using CSS, I have justified the text on my website.
 
-# How to Hyphenate
-Though there is a way to do this with Javascript using [Hyphenopoly.js][hyphenopoly], hyphenation already has built-in functionality in CSS and it is widely supported by browsers, so it is a no-brainer to do it the CSS way, unless your target audience has a `user-agent` that does not support CSS' `hyphens` property for some reason.
+# How to Justify
 
-To add hyphenation to your body text, simply add the `hyphens` property to your body section in your CSS style sheet and set it to `auto`, like so:
+It is actually pretty simple --- to justify your body text, just add this to your CSS style sheet:
 
 ```css
 body {
     ...
-    hyphens: auto
+    text-align: justify;
 }
 ```
 
-# How to Justify
-Great! So now your text wraps words using hyphens, but there is still jaggedness on the right due to your text not being aligned properly. To fix this, we can use the `text-align` property and set it to `justify`, like this:
+This will justify your text so it all aligns neatly in a block-like shape.
+
+# How to Hyphenate
+
+Though there is a way to do this with Javascript using [Hyphenopoly.js][hyphenopoly], hyphenation already has built-in functionality in CSS and it is widely supported by browsers, so it is a no-brainer to do it the CSS way, unless your target audience has a `user-agent` that does not support CSS' `hyphens` property for some reason.
+
+To add hyphenation to your body text, simply add the `hyphens` property to your body section in your CSS style sheet and set it to `auto`, like so:
 
 ```css
 body {
     ...
-    text-align: justify;
+    hyphens: auto
 }
 ```
 
-This will justify your text so it all aligns neatly.
+So now your text wraps words using hyphens, but why do we need to use hyphens when we can make blocks of text by just justifying?
+
+# Why Hyphenate
+
+Text justification can make your paragraphs look tidier, but this has the potential side-effect of awkwardly stretching out whitespace in between words --- which can create or worsen an often undesirable effect commonly referred to as 'rivers of white,' which are known to trip up dyslexic readers, making your writing less accessible as a result.
+
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Typographic_river_marking.svg/1280px-Typographic_river_marking.svg.png" alt="Image from Wikipedia with visual marking around an example of a 'rivers of white' effect.">
+
+This is also a highly-cited reason as to why justification is generally [not][applewood] [recommended][max] for text output on browsers and on the web.
 
 # Other Blogs That Justify
+
 Here are a list of other blogsites that I know of that use justified text:
 - Chris Noxz's [noxz.tech][noxz], which renders static HTML from [`groff`][groff].
 - Simon Johnston's [simonkjohnston.life][simon], which does not use hyphenation.
 - Kyle Mcdonald's [kylemcdonald.net][kyle], which also does not hyphenate.
 - Public Delivery's [publicdelivery.org][pubdeliver], which also justifies without hyphens.
 - JPEG XL's [jpegxl.info][jpg], which had fixed its un-hyphenated text.
 
+[max]: https://maxwellforbes.com/posts/web-justified-text
 [jpg]: https://jpegxl.info 
 [noxz]: https://noxz.tech
 [kyle]: https://kylemcdonald.net/psac
 [simon]: https://simonkjohnston.life
 [groff]: https://www.gnu.org/software/groff
+[applewood]: https://applewoodinteractive.com/accessibility/rivers-of-white-why-you-should-never-justify-your-text 
 [pubdeliver]: https://publicdelivery.org
 [hyphenopoly]: https://mnater.github.io/Hyphenopoly
diff --git a/_site/assets/main.css b/_site/assets/main.css
@@ -195,11 +195,11 @@ table td { border: 1px solid #e8e8e8; }
 .highlight .vi { color: #008080; }
 .highlight .il { color: #099; }
 
-body { background-color: #fafafa; }
+body { background-color: #fafafa; font-size: 1.2rem; }
 
-h1, h2, h3, p, ol, ul { font-family: serif; }
+h2, h3, p, ol, ul { font-family: serif; }
 
-h1 { color: #0d0d0d; }
+h1 { color: #0d0d0d; font-family: sans-serif; font-weight: bold; }
 
 h2 { color: #1a1a1a; }
 

diff --git a/_site/dark-mode.html b/_site/dark-mode.html
@@ -7,8 +7,8 @@
 <meta name="generator" content="Jekyll v3.10.0" />
 <meta property="og:title" content="Dark Mode on Websites with CSS @media Queries" />
 <meta property="og:locale" content="en_US" />
-<meta name="description" content="Why Dark Mode For users visiting your website in a dark room or at night, it is often less straining for the eyes if your webpage to be displayed in dark mode." />
-<meta property="og:description" content="Why Dark Mode For users visiting your website in a dark room or at night, it is often less straining for the eyes if your webpage to be displayed in dark mode." />
+<meta name="description" content="Why Dark Mode" />
+<meta property="og:description" content="Why Dark Mode" />
 <link rel="canonical" href="http://localhost:4000/dark-mode" />
 <meta property="og:url" content="http://localhost:4000/dark-mode" />
 <meta property="og:site_name" content="de_soot" />
@@ -17,7 +17,7 @@
 <meta name="twitter:card" content="summary" />
 <meta property="twitter:title" content="Dark Mode on Websites with CSS @media Queries" />
 <script type="application/ld+json">
-{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-09-07T00:00:00+08:00","datePublished":"2024-09-07T00:00:00+08:00","description":"Why Dark Mode For users visiting your website in a dark room or at night, it is often less straining for the eyes if your webpage to be displayed in dark mode.","headline":"Dark Mode on Websites with CSS @media Queries","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/dark-mode"},"url":"http://localhost:4000/dark-mode"}</script>
+{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-09-07T00:00:00+08:00","datePublished":"2024-09-07T00:00:00+08:00","description":"Why Dark Mode","headline":"Dark Mode on Websites with CSS @media Queries","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/dark-mode"},"url":"http://localhost:4000/dark-mode"}</script>
 <!-- End Jekyll SEO tag -->
 <link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="de_soot" /></head>
 <body><header class="site-header" role="banner">
@@ -48,16 +48,22 @@ <h1 class="post-title p-name" itemprop="name headline">Dark Mode on Websites wit
 
   <div class="post-content e-content" itemprop="articleBody">
     <h1 id="why-dark-mode">Why Dark Mode</h1>
+
 <p>For users visiting your website in a dark room or at night, it is often less straining for the eyes if your webpage to be displayed in <a href="https://en.wikipedia.org/wiki/Light-on-dark_color_scheme">dark mode</a>.</p>
 
+<p><img src="https://zerowidthjoiner.net/uploads/2020/04-11/light-vs-dark.png" alt="Comparison image of light theme on the left and dark theme on the right." /></p>
+
 <h1 id="how-to-do-it">How to do it</h1>
+
 <p>From <a href="https://developer.mozilla.org/en-US">MDN Web Docs</a>:</p>
 <blockquote>
   <p>The @media <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rule</a> can be used to apply part of a <a href="https://en.wikipedia.org/wiki/Style_sheet_(web_development)">style sheet</a> based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.</p>
 </blockquote>
 
 <h2 id="for-non-static-site-generator-websites">For Non-Static-Site-Generator Websites</h2>
+
 <h3 id="external-style-sheet">External Style Sheet</h3>
+
 <p>In your HTML document, you can either link an external CSS style sheet in your <code class="language-plaintext highlighter-rouge">&lt;head&gt;</code> if you wish to separate your code out more:</p>
 
 <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- something resembling this --&gt;</span>
@@ -84,6 +90,7 @@ <h3 id="external-style-sheet">External Style Sheet</h3>
 </code></pre></div></div>
 
 <h3 id="with-the-style-html-tag">With the &lt;style&gt; HTML tag</h3>
+
 <p>You can also type out your CSS code in between <code class="language-plaintext highlighter-rouge">&lt;style&gt;</code> tags if you prefer everything to be contained in one HTML document:</p>
 
 <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- something like this --&gt;</span>
@@ -109,6 +116,7 @@ <h3 id="with-the-style-html-tag">With the &lt;style&gt; HTML tag</h3>
 <p>There also exists a <a href="https://youtu.be/g85LQVp0hGM">video guide by Eric Murphy on Youtube on how to do this similarly</a> if you prefer to follow along with a video or if you find reading this blog-style guide boring becuase Tiktok and Instagram Reels have fried your zoomer ADHD brain beyond repair.</p>
 
 <h2 id="for-static-site-generator-websites">For Static-Site-Generator Websites</h2>
+
 <p>It is a little bit less straightforward to do this with a static site generator like Jekyll (which has native support with Github Pages and is what this website uses) or Hugo as you have to override the theme’s CSS style sheet.</p>
 
 <p>There is a <a href="https://tomkadwill.com/2017/12/16/how-to-override-css-styles-in-jekyll">blog post by Tom Kadwill on how to override your CSS styles in Jekyll</a> you can follow to create your SCSS file and after which you should get something that resembles this:</p>
@@ -136,12 +144,14 @@ <h2 id="for-static-site-generator-websites">For Static-Site-Generator Websites</
 
 <p>For other static-site-generator generated websites, you can refer to the official documentation found online for information on how to override your theme’s CSS.</p>
 
-<h1 id="why-not-use-a-toggleable-button-instead">Why Not Use a Toggleable Button Instead</h1>
+<h1 id="why-not-use-a-toggleable-button-instead-rant-warning">Why Not Use a Toggleable Button Instead (Rant Warning)</h1>
+
 <p>Rather than defaulting to light or dark mode and having a separate button (that uses Javascript) for the user to manually switch to their preferred theme, it might be better to automatically default to what they already set their browser’s preferred theme to. This is so they do not get flashbanged by their monitors at night if your website defaults to light theme and they open their browser to your website for the first time, or without toggling it to dark mode the last time they visited, or just simply because your website does not store cookies about their previously toggled theme either due to your lack of know how, respect for user privacy, or plain laziness.</p>
 
 <p>You can also include the button to toggle themes on the website alongside if you like having more buttons on your website for showing off your Javascript skills to potential employers (I know the tech job market out there is rough for fresh grads right now) or just want to follow the current web trend on including more and more unnecessary Javascript bloat on websites with features that can be done easily with simple HTML and CSS.</p>
 
 <h1 id="configure-giscus-theme">Configure Giscus Theme</h1>
+
 <p>To set it to match your website (if you have done the CSS <code class="language-plaintext highlighter-rouge">@media</code> trick shown above), simply set the <code class="language-plaintext highlighter-rouge">&lt;script&gt;</code>’s <code class="language-plaintext highlighter-rouge">data-theme</code> attribute value to <code class="language-plaintext highlighter-rouge">"preferred_color_scheme"</code> as shown below.</p>
 
 <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://giscus.app/client.js"</span>