leilukin-site/changelogs/2024/index.html

1179 lines
46 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="en" dir="ltr" id="top">
<head>
2024-10-08 18:32:41 +00:00
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:title" content="Website Changelog Archive: 2024">
2024-10-08 18:32:41 +00:00
<link rel="canonical" href="https://leilukin.com/changelogs/2024/">
<meta name="generator" content="Eleventy v3.0.0">
<meta name="author" content="Leilukin">
<meta name="description" content="Changelog of my website during the year of 2024.">
2024-10-08 18:32:41 +00:00
<meta name="fediverse:creator" content="@Leilukin@dragonscave.space">
<meta property="og:site_name" content="Leilukin's Hub">
2024-10-08 18:32:41 +00:00
<meta property="og:type" content="article">
<meta property="og:description" content="Changelog of my website during the year of 2024.">
2024-10-08 18:32:41 +00:00
<meta property="og:url" content="https://leilukin.com/changelogs/2024/">
<meta property="og:locale" content="en_MY">
<meta property="og:image" content="https://leilukin.com/assets/leilukin/leilukins-hub-meta-img.png">
<meta name="theme-color" content="#3d2163">
<link rel="alternate" type="application/rss+xml" title="Leilukin&#39;s Hub" href="/feed.xml">
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin="">
<style>
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 400;
src: url('/assets/fonts/lexend/lexend-v19-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 700;
src: url('/assets/fonts/lexend/lexend-v19-latin-700.woff2') format('woff2');
}
</style>
<link rel="stylesheet" href="/assets/fonts/fonts.css">
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/a11y-syntax-highlighting-dark.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
<style>.changelog__nav,
.changelog__nav--links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.changelog__nav {
flex-direction: column;
gap: 0.2em;
align-self: center;
font-weight: 700;
gap: 0.5em;
}
.changelog__nav--links li {
text-align: center;
align-self: center;
}
.changelog__nav--links [aria-current="page"] {
text-decoration: none;
color: var(--clr-bold-txt);
}
@media (min-width: 640px) {
.changelog__nav {
flex-direction: row;
gap: 1em;
}
}
.breadcrumbs {
list-style-type: "";
padding: 0;
margin: 0 0 0.7em 0;
display: flex;
gap: 0.5em;
flex-wrap: wrap;
justify-content: center;
}
.breadcrumbs li::after {
content: '➔';
padding-left: 0.3em;
}
.blog__post--pagination {
padding-top: 1em;
margin-block-start: 2.5em;
border-top: 0.1em solid var(--clr-title-border);
}
.blog__post--nextprev {
list-style-type: "";
padding: 0;
margin: 0;
display: grid;
gap: 0.7em;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: 'prev next';
}
.blog__post--prev { grid-area: prev; }
.blog__post--next { grid-area: next; }
.hero img { filter:
drop-shadow(0.1rem 0.1rem 0.2rem black)
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
; }
.hero {
width: 100%;
background-color: var(--clr-hero-bg);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.hero__top-bar {
background: var(--clr-navbar-bg);
width: 100%;
padding: 0.5em 0.7em;
}
.hero__img {
display: grid;
place-content: center;
}
.hero img {
object-fit: contain;
overflow: hidden;
max-height: 16rem;
}
.navbar {
background: var(--clr-navbar-bg);
width: 100%;
z-index: 998;
position: sticky;
top: 0;
padding: 0.6em;
}
.navbar__menu {
list-style-type: "";
margin: 0;
padding: 0;
display: flex;
gap: 1em;
flex-wrap: wrap;
text-align: center;
}
.navbar__menu a {
color: var(--clr-navbar-link);
text-decoration: none;
2024-12-02 07:29:48 +00:00
font-weight: 700;
cursor: pointer;
display: inline-block;
}
.navbar__menu a:hover { color: var(--clr-link-hover); }
.navbar__menu a:focus { outline-offset: 0.2em; }
.navbar__links {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 0.5em;
}
.navbar__toggle {
background-color: inherit;
color: var(--clr-navbar-link);
border: none;
padding: 0;
font-size: 1.25rem;
font-weight: 700;
display: none;
align-items: center;
gap: 0.3em;
}
.navbar__toggle svg { fill: currentColor; }
.navbar__toggle:focus,
.navbar__menu a:focus { outline-offset: 0.1em; }
.navbar__toggle:focus,
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
.navbar__popover {
background: var(--clr-navbar-bg);
border: 0.15em solid var(--clr-navbar-link);
padding: 1.5em;
max-width: 85%;
}
.navbar__popover::backdrop {
background-color: black;
opacity: 0.5;
}
@supports selector([popover]) {
.navbar__toggle { display: flex; }
.navbar__links { display: none; }
}
/* Tablet screen size */
@media only screen and (min-width: 43.75rem) {
.navbar { padding: 1em 0.6em; }
.navbar__toggle, .navbar__popover { display: none; }
.navbar__links { display: flex; }
}
.top-btn,
.top-btn:hover {
color: var(--clr-top-btn-txt);
text-decoration: none;
2024-12-02 07:29:48 +00:00
font-weight: 700;
}
.top-btn {
position: fixed;
bottom: 0.5rem;
right: 0.5rem;
z-index: 999;
background-color: var(--clr-top-btn-bg);
display: flex;
align-items: center;
border-radius: 50em;
padding: 0.3em 0.5em;
gap: 0.2em;
}
.top-btn:focus {
outline: 0.25em solid var(--clr-top-btn-bg);
outline-offset: 0.15em;
}
.top-btn__arrow {
display: inline-block;
width: 1em;
aspect-ratio: 1 / 1;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
:root { --footer-gap: 0.5em; }
.footer {
margin-top: auto;
width: 100%;
background: var(--clr-main-footer-bg);
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
text-align: center;
display: grid;
gap: var(--footer-gap);
}
.footer__links,
.footer__shrines {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: var(--footer-gap);
}
.footer__links { justify-self: center; }
.footer__shrines { align-self: center; }</style>
2024-10-12 09:00:10 +00:00
<link rel="icon" sizes="32x32" href="/favicon.ico">
2024-08-01 10:23:42 +00:00
<link rel="icon" type="image/svg+xml" href="/assets/favicon/leilukin-bee-favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<link rel="me" href="mailto:contact@leilukin.com">
<link rel="me" href="https://dragonscave.space/@Leilukin">
<link rel="me" href="https://github.com/Leilukin">
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<script src="/assets/js/D968lGk6J8.js" defer=""></script>
<title>
Website Changelog Archive: 2024 | Leilukin's Hub
</title>
</head>
<body>
<div class="skip-btn"><a href="#content">Skip to content</a></div>
<header class="hero">
<div class="hero__top-bar hidden"></div>
<div class="hero__img">
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
</div>
</header>
<nav class="navbar" aria-labelledby="top-level-nav-title">
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
<ul class="navbar__menu navbar__links">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about/">About</a>
</li>
<li>
<a href="/now/">Now</a>
</li>
<li>
<a href="/blog/">Blog</a>
</li>
<li>
<a href="/articles/">Articles</a>
</li>
<li>
<a href="/projects/">Projects</a>
</li>
<li>
<a href="/shrines/">Shrines</a>
</li>
<li>
<a href="/adoptables/">Adoptables</a>
</li>
<li>
<a href="/links/">Links</a>
</li>
<li>
<a href="/guestbook/">Guestbook</a>
</li>
</ul>
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"></path></svg>
Navigation
</button>
</nav>
<div popover="" id="nav-menu" class="navbar__popover">
<ul class="navbar__menu">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about/">About</a>
</li>
<li>
<a href="/now/">Now</a>
</li>
<li>
<a href="/blog/">Blog</a>
</li>
<li>
<a href="/articles/">Articles</a>
</li>
<li>
<a href="/projects/">Projects</a>
</li>
<li>
<a href="/shrines/">Shrines</a>
</li>
<li>
<a href="/adoptables/">Adoptables</a>
</li>
<li>
<a href="/links/">Links</a>
</li>
<li>
<a href="/guestbook/">Guestbook</a>
</li>
</ul>
</div>
<main id="content">
<header class="main__header">
<h1>Website Changelog Archive: 2024</h1>
<p>Changelog of my website during the year of 2024.</p>
</header>
<content-wrapper>
<article class="content">
<nav class="changelog__nav" aria-labelledby="changelog-nav-title">
<p class="changelog__nav--title" id="changelog-nav-title">Changelog Archive:</p>
<ul class="inline-nav changelog__nav--links">
<li><a href="/changelogs">Latest</a></li>
<li><a aria-current="page" href="/changelogs/2024/">2024</a></li>
<li><a href="/changelogs/2023/">2023</a></li>
<li><a href="/changelogs/2022/">2022</a></li>
<li><a href="/changelogs/layouts/">Website Layouts</a></li>
</ul>
</nav>
<p>To get notified of the updates on this website, you can subscribe to its <a href="/feed.xml"><svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"></path></svg>RSS feed</a>, which contains new articles, blog posts and website changelogs.</p>
<div class="heading-wrapper h2">
<h2 id="2024-12-16">
16 December 2024
</h2>
<a class="heading-anchor" href="#2024-12-16" aria-labelledby="2024-12-16"><span hidden="">#</span></a>
</div>
<ul>
<li>New blog post: <a href="/blog/posts/2024-12-16-leaving-my-first-developer-job">&quot;Leaving My First Developer Job&quot;</a></li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-12-15">
15 December 2024
</h2>
<a class="heading-anchor" href="#2024-12-15" aria-labelledby="2024-12-15"><span hidden="">#</span></a>
</div>
<ul>
<li>Add new article: <a href="/articles/living-with-retinitis-pigmentosa">&quot;Living with Retinitis Pigmentosa&quot;</a></li>
<li>Update my code snippet for <a href="/projects/snippets/disability-pride-flag-background">responsive Disability Pride flag CSS background</a> by using the CSS <code>linear-gradient()</code> function instead of an inline SVG</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-12-10">
10 December 2024
</h2>
<a class="heading-anchor" href="#2024-12-10" aria-labelledby="2024-12-10"><span hidden="">#</span></a>
</div>
<ul>
<li>Obfuscate my email address with CSS and HTTP redirects. (Credit to Spencer Mortensen's article, <a href="https://spencermortensen.com/articles/email-obfuscation/">&quot;Email obfuscation: What works in 2024?&quot;</a>)</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-12-09">
9 December 2024
</h2>
<a class="heading-anchor" href="#2024-12-09" aria-labelledby="2024-12-09"><span hidden="">#</span></a>
</div>
<ul>
<li>Add table of contents to each tab section of the <a href="/links">Links</a> page.</li>
<li>Add link to my <a href="https://www.pixelcatsend.com/profile&amp;id=24121">Pixel Cat's End profile</a> to my <a href="/adoptables">Adoptables</a> page. Free free to check out my not-cats!</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-12-03">
3 December 2024
</h2>
<a class="heading-anchor" href="#2024-12-03" aria-labelledby="2024-12-03"><span hidden="">#</span></a>
</div>
<ul>
<li>Improve footnotes by enlarging the target area of reference links and footntoe backlinks.</li>
<li>Update article <a href="/articles/accessible-footnotes/#update-3-december-2024-enlarge-link-target-area">&quot;How I (Tried to) Implement Accessible Footnotes&quot;</a> with information about improving footnote links' target area.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-12-01">
1 December 2024
</h2>
<a class="heading-anchor" href="#2024-12-01" aria-labelledby="2024-12-01"><span hidden="">#</span></a>
</div>
<ul>
<li>New blog post: <a href="/blog/posts/2024-12-01-indieweb-carnival-november-2024-impact">IndieWeb Carnival November 2024: Impact</a></li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-11-21">
20 November 2024
</h2>
<a class="heading-anchor" href="#2024-11-21" aria-labelledby="2024-11-21"><span hidden="">#</span></a>
</div>
<ul>
<li>Officially launch my <a href="/shrines/pokemonoras"><cite>Pokémon Omega Ruby</cite> and <cite>Alpha Sapphire</cite> shrine</a> to celebrate the 10th anniversary of the games' release.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-11-19">
19 November 2024
</h2>
<a class="heading-anchor" href="#2024-11-19" aria-labelledby="2024-11-19"><span hidden="">#</span></a>
</div>
<ul>
<li>Expand the home page of my <a href="/shrines/cassettebeasts"><cite>Cassette Beasts</cite> shrine</a> by adding a <a href="/shrines/cassettebeasts/#cassette-beasts-my-ultimate-comfort-media">&quot;<cite>Cassette Beasts</cite> — My Ultimate Comfort Media&quot;</a> section.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-10-28">
28 October 2024
</h2>
<a class="heading-anchor" href="#2024-10-28" aria-labelledby="2024-10-28"><span hidden="">#</span></a>
</div>
<ul>
<li>New blog post: <a href="/blog/posts/2024-10-28-re-social-media-personal-blog">&quot;Re: Social Media Hasn't Killed the Personal Blog Just Yet&quot;</a></li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-09-17">
17 September 2024
</h2>
<a class="heading-anchor" href="#2024-09-17" aria-labelledby="2024-09-17"><span hidden="">#</span></a>
</div>
<ul>
<li>Add <a href="/adoptables/#Pantson-Color-Club">Pantson Color Club section</a> to my <a href="/adoptables">adoptables page</a>, including my own colour card for the pixel club.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-09-06">
6 September 2024
</h2>
<a class="heading-anchor" href="#2024-09-06" aria-labelledby="2024-09-06"><span hidden="">#</span></a>
</div>
<ul>
<li>Replace the estimated reading time of articles and blog posts with word count, by using the <a href="https://www.npmjs.com/package/eleventy-plugin-wordcount-extended">eleventy-plugin-wordcount-extended</a> plugin.</li>
<li>Create 200×40 pixel size version of Leilukin's Hub site button.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-08-18">
18 August 2024
</h2>
<a class="heading-anchor" href="#2024-08-18" aria-labelledby="2024-08-18"><span hidden="">#</span></a>
</div>
<ul>
<li>New blog post about me officially becoming a professional web developer, <a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer">&quot;From Hobbyist to Professional Web Developer&quot;</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-08-11">
11 August 2024
</h2>
<a class="heading-anchor" href="#2024-08-11" aria-labelledby="2024-08-11"><span hidden="">#</span></a>
</div>
<ul>
<li>Improve the site's <a href="/feed.xml">RSS feed</a>:
<ul>
<li>Make RSS feeds <a href="https://blog.jim-nielsen.com/2021/automatically-discoverable-rss-feeds/">automatically discoverable</a> by feed readers</li>
<li>Use time and time zone to make feed items' timestamps accurate</li>
</ul>
</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-08-06">
6 August 2024
</h2>
<a class="heading-anchor" href="#2024-08-06" aria-labelledby="2024-08-06"><span hidden="">#</span></a>
</div>
<ul>
<li>New article: <a href="/articles/accessible-footnotes">&quot;How I (Tried to) Implement Accessible Footnotes&quot;</a>, which is also my entry for <a href="https://32bit.cafe/">32-Bit Cafe</a>'s <a href="https://32bit.cafe/~xandra/events/codejam5/">Community Code Jam #5: Back to School</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-08-02">
2 August 2024
</h2>
<a class="heading-anchor" href="#2024-08-02" aria-labelledby="2024-08-02"><span hidden="">#</span></a>
</div>
<ul>
<li>Added my first publicly released code snippet on this website: <a href="/projects/snippets/disability-pride-flag-background">Responsive Disability Pride Flag CSS Background</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-07-27">
26 July 2024
</h2>
<a class="heading-anchor" href="#2024-07-27" aria-labelledby="2024-07-27"><span hidden="">#</span></a>
</div>
<ul>
<li>Leilukin's Hub and all its subsites have been migrated to <a href="https://www.hostinger.my/">Hostinger</a></li>
<li>New blog post: <a href="/blog/posts/2024-07-27-hostinger-migration-leilukins-hub">Leilukin's Hub Has Migrated to Hostinger</a></li>
<li>Change the theme of <a href="https://tumbleblog.leilukin.com/">Leilukin's Hub Tumbleblog</a> to a custom theme based on the Umbra theme from Chyrp Lite</li>
<li>Add a link to contact me via email to the website's footer</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-07-22">
22 July 2024
</h2>
<a class="heading-anchor" href="#2024-07-22" aria-labelledby="2024-07-22"><span hidden="">#</span></a>
</div>
<ul>
<li>Add a <a href="https://zine.kalechips.net/index">Salad Magazine</a> section to my <a href="/adoptables">Adoptables pages</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-07-21">
21 July 2024
</h2>
<a class="heading-anchor" href="#2024-07-21" aria-labelledby="2024-07-21"><span hidden="">#</span></a>
</div>
<ul>
<li>Add a section for the <a href="https://divergentrays.com/kitty">Kitty Friends Pixel Club</a> to my <a href="/adoptables">Adoptables page</a>, including my kitty friends!</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-07-20">
20 July 2024
</h2>
<a class="heading-anchor" href="#2024-07-20" aria-labelledby="2024-07-20"><span hidden="">#</span></a>
</div>
<ul>
<li>Remake the mobile version of navigation menu by using the HTML <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover"><code>popover</code></a> attirbutes, allowing the navigation menu to be dismissed without JavaScript</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-07-18">
18 July 2024
</h2>
<a class="heading-anchor" href="#2024-07-18" aria-labelledby="2024-07-18"><span hidden="">#</span></a>
</div>
<ul>
<li>Add list of web cliques I joined to the home page</li>
<li>Add pixel cliques I joined to the <a href="/adoptables">Adoptables page</a></li>
<li>Add a <a href="/links/#joined">Joined</a> tab to the <a href="/links">Links page</a> to list the web cliques and widgets of web rings I joined, as well as linking to my fanlisting collective.</li>
<li>Upgrade Eleventy to version 3.0</li>
<li>Bundle page-specific CSS and JavaScript in the <code>&lt;head&gt;</code> element with Eleventy 3.0's <a href="https://github.com/11ty/eleventy-plugin-bundle">built-in bundle plugin</a></li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-07-13">
13 July 2024
</h2>
<a class="heading-anchor" href="#2024-07-13" aria-labelledby="2024-07-13"><span hidden="">#</span></a>
</div>
<ul>
<li>Add an inline SVG icon to external links</li>
<li>Use inline SVG for Font Awesome icons to remove the need of hosting Font Awesome assets</li>
<li>Add dark mode support for <a href="/shrines/cassettebeasts"><cite>Cassette Beasts</cite> shrine</a> based on user preference in system setting</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-07-06">
6 July 2024
</h2>
<a class="heading-anchor" href="#2024-07-06" aria-labelledby="2024-07-06"><span hidden="">#</span></a>
</div>
<ul>
<li>Implement accessible tooltips that meet Web Content Accessibility Guidelines (WCAG) 2.2 success criterion for <a href="https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html">1.4.13: Content on Hover or Focus (Level AA)</a>, by utilising <a href="https://github.com/scottaohara/a11y_tooltips">Scott O'Hara's ARIA Tooltips</a> script. (Thank you <a href="https://www.groundedwren.com/">Vera</a> for your feedback on my previous implementation of the tooltips)</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-07-03">
3 July 2024
</h2>
<a class="heading-anchor" href="#2024-07-03" aria-labelledby="2024-07-03"><span hidden="">#</span></a>
</div>
<ul>
<li>Add <a href="/links/#articles">Articles</a> and <a href="/links/#resources">Resources</a> tabs to the <a href="/links">links page</a>.</li>
<li>Show visible stylised tooltips for some website buttons on mouse hover or keyboard focus (thanks to <a href="https://solaria.neocities.org/accessibility">Solaria's web accessibility guide</a> for the inspiration).</li>
<li>Add a list of webrings my website is part of to the home page.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-07-02">
2 July 2024
</h2>
<a class="heading-anchor" href="#2024-07-02" aria-labelledby="2024-07-02"><span hidden="">#</span></a>
</div>
<ul>
<li>The main site header now would display a Disability Pride Month blurb and the disability pride flag during July</li>
<li><a href="https://fan.leilukin.com">My fanlisting collective</a> and <a href="https://fan.leilukin.com/cassettebeasts"><cite>Cassette Beasts</cite> fanlisting</a> launched!</li>
<li><a href="/projects">Projects page</a>:
<ul>
<li>Reorganised pages for my video game mods into their own directory</li>
<li>Add code projects, started with <a href="/projects/code/bellabuffs-phpmailer">BellaBuffs with PHPMailer Integration</a></li>
</ul>
</li>
<li>New blog post: <a href="/blog/posts/2024-07-02-fanlisting-collective-launch">Cassette Beasts Fanlisting and My Fanlisting Collective Launched</a></li>
<li><a href="/links">Links page</a>:
<ul>
<li>Add tabs to sort my link collection by category (thanks to <a href="https://kalechips.net/projects/snippets/tabs">Kalechips' JavaScript-free tabs code scnippet</a> for the inspiration)</li>
<li>Add <a href="/links/#webmastery">webmastery resources</a></li>
</ul>
</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-27">
27 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-27" aria-labelledby="2024-06-27"><span hidden="">#</span></a>
</div>
<ul>
<li>Added a <a href="/articles/palestine-masterlist/#spotlight-crowdfunding-campaigns">Spotlight Crowdfunding Campaigns</a> section to my <a href="/articles/palestine-masterlist">Palestine masterlist</a> to highlight fundraising campaigns that I have been asked to help and share by Palestinians on Tumblr, and that have been vetted by other Palestinians on Tumblr.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-26">
26 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-26" aria-labelledby="2024-06-26"><span hidden="">#</span></a>
</div>
<ul>
<li>Added my other websites to my <a href="/projects">Projects page</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-24">
24 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-24" aria-labelledby="2024-06-24"><span hidden="">#</span></a>
</div>
<ul>
<li>New blog post: <a href="/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved">My Cassette Beasts Fanlisting Application has been Approved</a></li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-23">
23 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-23" aria-labelledby="2024-06-23"><span hidden="">#</span></a>
</div>
<ul>
<li>Add <a href="/adoptables">Adoptables page</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-21">
20 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-21" aria-labelledby="2024-06-21"><span hidden="">#</span></a>
</div>
<ul>
<li>Leilukin's Hub now has a tumbleblog at <a href="https://tumbleblog.leilukin.com/">tumbleblog.leilukin.com</a>! Read the latest blog post to learn more: <a href="/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched">Leilukin's Hub Tumbleblog Launched</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-19">
19 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-19" aria-labelledby="2024-06-19"><span hidden="">#</span></a>
</div>
<ul>
<li>Add new article: <a href="/articles/palestine-masterlist">Palestine Masterlist</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-13">
12 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-13" aria-labelledby="2024-06-13"><span hidden="">#</span></a>
</div>
<ul>
<li>Add a Virtual Pets section to the home page.</li>
<li>The <a href="https://status.cafe/">status.cafe</a> widget and the <a href="https://www.websitecarbon.com/badge/">Website Carbon badge</a> on the home page will display a note about JavaScript being required for these widgets if the visitor has disabled JavaScript.</li>
<li>Remove JavaScript from the &quot;Back to top&quot; button.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-12">
11 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-12" aria-labelledby="2024-06-12"><span hidden="">#</span></a>
</div>
<ul>
<li>Remake the navigation hamburger menu for mobile, so JavaScript is no longer needed to open and close the navigation menu, although JavaScript is still used to enable closing the menu with the Escape key. (Special thanks to Kale for the <a href="https://kalechips.net/projects/snippets/burger">accessible hamburger menu code snippet</a>).</li>
<li>New blog post: <a href="/blog/posts/2024-06-12-performance-improvement-leilukins-hub/">Improving Site Performance of Leilukin's Hub</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-11">
11 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-11" aria-labelledby="2024-06-11"><span hidden="">#</span></a>
</div>
<ul>
<li>Improve &quot;Back to top&quot; button and footer link:
<ul>
<li>Replace arrow unicode with inline SVG for the button and border styling for the footer link</li>
<li>Display the footer link only if JavaScript is disabled</li>
<li>Use anchor HTML tag (<code>&lt;a&gt;</code>) instead of button tag (<code>&lt;button&gt;</code>) for the button</li>
</ul>
</li>
<li>Disable smooth scrolling for users with reduced motion settings.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-09">
9 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-09" aria-labelledby="2024-06-09"><span hidden="">#</span></a>
</div>
<ul>
<li>Convert most of the images on this website to AVIF format to reduce file size and save bandwidth.</li>
<li>Improve my status.cafe widget:
<ul>
<li>Write local JavaScript code to fetch data from status.cafe.</li>
<li>Display a loading message before the data fetch request is completed.</li>
<li>Display an error message if the data fetching fails.</li>
<li>Add a link to my status.cafe profile below the widget.</li>
</ul>
</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-07">
6 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-07" aria-labelledby="2024-06-07"><span hidden="">#</span></a>
</div>
<ul>
<li>Update Leilukin's Hub's site button. This time, I made my site button myself by using Adobe Photoshop CS5.</li>
<li>Add a <a href="/colophon">colophon page</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-06">
6 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-06" aria-labelledby="2024-06-06"><span hidden="">#</span></a>
</div>
<ul>
<li>Remove unused Font Awesome assets, including font and CSS files, to improve site performance.</li>
<li>Convert header images, playlist covers and my avatar to AVIF format to reduce file size.</li>
<li>Set shrine index images, shrine home page images and my avatar to lazy loading.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-04">
4 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-04" aria-labelledby="2024-06-04"><span hidden="">#</span></a>
</div>
<ul>
<li>Preload the Lexend regular and Lexend 700 font files to improve site performance, remove flash of unstyled text (FOUT) and prevent Cumulative Layout Shift (CLS).</li>
<li>Replace the Webrings section of my home page with a Badges section (though you can still see the list of webrings I have joined on my <a href="/links">Links page</a>).</li>
<li>Updates to Leilukin's Hub will no longer be pushed to Neocities. Read the <a href="/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/#what-happens-now-with-my-neocities-account">&quot;What Happens Now with My Neocities Account&quot;</a> section of my blog post, &quot;Custom Domain Name and Hosting Change for Leilukin's Hub&quot; for more information.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-06-02">
2 June 2024
</h2>
<a class="heading-anchor" href="#2024-06-02" aria-labelledby="2024-06-02"><span hidden="">#</span></a>
</div>
<ul>
<li>Update the <a href="/guestbook">guestbook</a> to add a warning message and a link to send comments via email if the Discord webhook fails.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-31">
31 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-31" aria-labelledby="2024-05-31"><span hidden="">#</span></a>
</div>
<ul>
<li>Leilukin's Hub now has a custom domain name: leilukin.com.</li>
<li>Leilukin's Hub is now hosted on Netlify.</li>
<li>New blog post: <a href="/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub">Custom Domain Name and Hosting Change for Leilukin's Hub</a>.</li>
<li>Add <a href="https://status.cafe/users/leilukin">my status.cafe</a> widget to the home page.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-29">
29 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-29" aria-labelledby="2024-05-29"><span hidden="">#</span></a>
</div>
<ul>
<li>New blog post: <a href="/blog/posts/2024-05-29-new-guestbook-leilukins-hub">The Search for a Guestbook Solution for Leilukin's Hub</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-28">
27 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-28" aria-labelledby="2024-05-28"><span hidden="">#</span></a>
</div>
<ul>
<li><a href="/shrines/asummersend"><cite>A Summers End — Hong Kong 1986</cite> shrine</a>: Add Passion Patch screenshots section to the <a href="/shrines/asummersend/gallery">Gallery page</a> (<strong>Warning:</strong> The Passion Patch screenshots are not safe for work, though they are hidden by default when you visit the gallery page).</li>
<li>Add a &quot;Skip to content&quot; button for screen reader and keyboard users (thank you <a href="https://kalechips.net/projects/snippets/skip">Kale</a> for the inspiration).</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-26">
26 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-26" aria-labelledby="2024-05-26"><span hidden="">#</span></a>
</div>
<ul>
<li>Add &quot;Personal Sites I Love&quot; section to the <a href="/links">Links</a> page.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-25">
24 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-25" aria-labelledby="2024-05-25"><span hidden="">#</span></a>
</div>
<ul>
<li>Use <a href="https://groundedwren.neocities.org/pages/demo_controls/guestbookDemo">Grounded Wren's guestbook code</a> for this site's <a href="/guestbook">guestbook</a>.</li>
<li>Add &quot;Link Exchanges&quot; section to the <a href="/links">Links</a> page.</li>
<li>Move my mod build links from the Links page to the <a href="/projects">Projects</a> page.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-22">
22 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-22" aria-labelledby="2024-05-22"><span hidden="">#</span></a>
</div>
<ul>
<li>Add <a href="/accessibility/">accessibility statement</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-20">
20 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-20" aria-labelledby="2024-05-20"><span hidden="">#</span></a>
</div>
<ul>
<li>Replace the entire site's default font from Noto Sans to Lexend.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-19">
19 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-19" aria-labelledby="2024-05-19"><span hidden="">#</span></a>
</div>
<ul>
<li>Replace the <a href="https://www.htmlcommentbox.com/">HTML Comment Box</a> widget on the <a href="/guestbook">guestbook page</a> with a guestbook that is powered by <a href="https://firebase.google.com/docs/database/">Firebase Realtime Database</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-18">
17 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-18" aria-labelledby="2024-05-18"><span hidden="">#</span></a>
</div>
<ul>
<li>Add footnotes section to <a href="/shrines/asummersend/trivia/"><cite>A Summers End — Hong Kong 1986</cite> shrine Trivia page</a> and <a href="/shrines/cassettebeasts/facts/"><cite>Cassette Beasts</cite> shrine Facts page</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-14">
14 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-14" aria-labelledby="2024-05-14"><span hidden="">#</span></a>
</div>
<ul>
<li>New blog post: <a href="/blog/posts/2024-05-14-james-somerton-my-video-game-footage">James Somerton Used My Video Game Footage Without Credit or Permission</a>.</li>
<li>Replace 123Guestbook guestbook with a <a href="/guestbook">guestbook page</a> with <a href="https://www.htmlcommentbox.com/">HTML Comment Box</a>, as 123Guestbook will be <a href="https://web.archive.org/web/20240504201300/https://www.123guestbook.com/news.php?id=closure">shutting down on 1 July 2024</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-05-09">
9 May 2024
</h2>
<a class="heading-anchor" href="#2024-05-09" aria-labelledby="2024-05-09"><span hidden="">#</span></a>
</div>
<ul>
<li><a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite> shrine</a>:
<ul>
<li>Rename Trivia page to <a href="/shrines/cassettebeasts/facts/">Facts page</a>.</li>
<li>Add &quot;Frequently Asked Topics&quot; section to the Facts page.</li>
</ul>
</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-04-29">
29 April 2024
</h2>
<a class="heading-anchor" href="#2024-04-29" aria-labelledby="2024-04-29"><span hidden="">#</span></a>
</div>
<ul>
<li>Turn the top navigation manu into a hamburger menu when this website is viewed on mobile devices.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-04-27">
27 April 2024
</h2>
<a class="heading-anchor" href="#2024-04-27" aria-labelledby="2024-04-27"><span hidden="">#</span></a>
</div>
<ul>
<li>New blog post: <a href="/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/">Happy Lesbian Visibility Day and 1-Year Anniversary of Cassette Beasts</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-04-21">
21 April 2024
</h2>
<a class="heading-anchor" href="#2024-04-21" aria-labelledby="2024-04-21"><span hidden="">#</span></a>
</div>
<ul>
<li>New blog post: <a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">April 2024 Leilukin's Hub Overhaul with Eleventy</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-04-20">
20 April 2024
</h2>
<a class="heading-anchor" href="#2024-04-20" aria-labelledby="2024-04-20"><span hidden="">#</span></a>
</div>
<ul>
<li>Finished overhauling this entire website with the static site generator <a href="https://www.11ty.dev/">Eleventy</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-04-05">
5 April 2024
</h2>
<a class="heading-anchor" href="#2024-04-05" aria-labelledby="2024-04-05"><span hidden="">#</span></a>
</div>
<ul>
<li>Add table of contents to my <a href="/projects/videogamemods/kotor1/">Star Wars: Knights of the Old Republic</a> and <a href="/projects/videogamemods/kotor2/">Star Wars: Knights of the Old Republic II: The Sith Lords mods</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-03-06">
6 March 2024
</h2>
<a class="heading-anchor" href="#2024-03-06" aria-labelledby="2024-03-06"><span hidden="">#</span></a>
</div>
<ul>
<li>New blog post: <a href="/blog/posts/2024-03-06-I-Received-a-Lifetime-Premium-Membership-on-Nexus-Mods-for-Free">I Received a Lifetime Premium Membership on Nexus Mods for Free</a>.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-02-08">
8 February 2024
</h2>
<a class="heading-anchor" href="#2024-02-08" aria-labelledby="2024-02-08"><span hidden="">#</span></a>
</div>
<ul>
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Added <a href="/shrines/cassettebeasts/resources">Resources</a> page.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-02-07">
7 February 2024
</h2>
<a class="heading-anchor" href="#2024-02-07" aria-labelledby="2024-02-07"><span hidden="">#</span></a>
</div>
<ul>
<li><a href="/projects/">Projects</a>: Added My Characters section.</li>
</ul>
<div class="heading-wrapper h2">
<h2 id="2024-01-09">
9 January 2024
</h2>
<a class="heading-anchor" href="#2024-01-09" aria-labelledby="2024-01-09"><span hidden="">#</span></a>
</div>
<ul>
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Added a new section: My Contributions to the Cassette Beasts community.</li>
</ul>
</article>
</content-wrapper>
</main>
<footer class="footer">
<p>
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
<a rel="nofollow, noindex" href="emailme/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
</p>
<h2 class="visually-hidden">Footer Navigation:</h2>
<ul class="inline-nav footer__links">
<li>
<a href="/feed.xml"><svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"></path></svg>RSS Feed</a>
</li>
<li><a href="/sitemap/
">Site Map</a></li><li><a href="/changelogs/">Changelogs</a></li><li><a href="/accessibility/">Accessibility</a></li><li><a href="/colophon/">Colophon</a></li></ul>
<p>Made with ♥ by Leilukin since 11 September 2022</p>
<p>
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M96 64c0-17.7 14.3-32 32-32l320 0 64 0c70.7 0 128 57.3 128 128s-57.3 128-128 128l-32 0c0 53-43 96-96 96l-192 0c-53 0-96-43-96-96L96 64zM480 224l32 0c35.3 0 64-28.7 64-64s-28.7-64-64-64l-32 0 0 128zM32 416l512 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32z"></path></svg>
<a href="https://ko-fi.com/leilukin">Support me on Ko-Fi</a>
</p><div class="h-card hidden">
<span class="p-name p-nickname">Leilukin</span>
<a href="/" class="u-url">Home page</a>
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
<span class="p-country-name">Malaysia</span>
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
</div><a href="#top" class="top-btn">
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
</svg>
Back to Top
</a>
</footer>
</body>
</html>