From 853064e755c0e06f81199aa2445660f9c2b0fed2 Mon Sep 17 00:00:00 2001
From: Nathan Steel <aney.login+rpi3@gmail.com>
Date: Tue, 21 Feb 2023 09:23:01 -0500
Subject: [PATCH] Add release 0.9.0 patch notes

---
 blog/index.html         |   5 ++
 blog/release-0.9.0.html | 128 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 133 insertions(+)
 create mode 100644 blog/release-0.9.0.html
diff --git a/blog/index.html b/blog/index.html
index 7945e9d..c1c6bb4 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -37,6 +37,11 @@
 			</section>
 			<section>
 
+				<h2>2022</h2>
+				<ul>
+					<li><a href="/blog/release-0.9.0.html">Release 0.9.0</a> - 21/02/2023</li>
+				</ul>
+
 				<h2>2022</h2>
 				<ul>
 					<li><a href="/blog/burger-menu.html">Hello, Burger menu!</a> - 21/11/2022</li>
diff --git a/blog/release-0.9.0.html b/blog/release-0.9.0.html
new file mode 100644
index 0000000..9914b33
--- /dev/null
+++ b/blog/release-0.9.0.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="">
+		<meta name="author" content="Nathan (Aney) Steel">
+		<meta name="theme-color" content="white">
+		<meta name="theme-color" content="green">
+		<link rel="stylesheet" type="text/css" href="/main.css">
+		<link rel="icon" type="image/png" href="/images/favicon.svg">
+		<title>Release 0.9.0</title>
+	</head>
+
+	<body>
+		<header>
+			<a href="#main" class="vh">Jump directly to main content</a>
+			<h1>Release 0.9.0</h1>
+			<input id="burger-toggle" type="checkbox"/>
+			<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
+			<hr/>
+			<nav>
+				<a href="/">home</a>
+				<a href="/about.html">about</a>
+				<a href="/projects.html">projects</a>
+				<a href="/blog/">blog</a>
+				<a href="/sitemap.html">misc</a>
+				<a href="/support.html">support</a>
+			</nav>
+			<hr/>
+		</header>
+
+		<main id="main">
+			<h2>Accessibility and  Design</h2>
+			<p>Release 0.9.0 was a non-functionality release, as I focussed my lil' brain on Accessibility, the User Experience (UX), and the design of the website. Also this is my first publicised "patch note" so go easy, ok.</p>
+
+			<h2>Accessiblity</h2>
+			<ul>
+				<li>Fix burger menu's accessiblity issues
+				<ul>
+					<li>Add label content, but make hidden for non screen-readers.</li>
+					<li>Make top of burger clickable. The burger wasn't fitting to its elements container, as a negative margin was used.</li>
+				</ul></li>
+				<li>Add "Skip nav" functionality
+				<ul>
+					<li>Added a hidden button for keyboard tab-targetting that skips over the navigation, straight to the content.</li>
+				</ul></li>
+			</ul>
+
+			<h2>User Experience</h2>
+			<ul>
+			<li>Styled <code>&lt;code&gt;</code> tags
+				<ul>
+					<li>So they can be used in-line to aid with any development guides.</li>
+				</ul>
+			</li>
+			<li>
+				Make mobile nav/burger fixed
+				<ul>
+					<li>This allows the navigation to be opened/closed and visible from anywhere on the page, not just the top.</li>
+				</ul>
+			</li></ul>
+
+			<h2>Design/User Interface</h2>
+			<ul>
+				<li>Font<ul>
+					<li>Increase the font-size.</li>
+					<li>Increase the whitespace used around the site.</li>
+				</ul></li>
+				<li>Colours<ul>
+					<li>Altered colours to improve the visual hierarchy of the elements.</li>
+				</ul></li>
+				<li>Remove hr above navigation<ul>
+					<li>Due to the nav now being atop the page, this wasn't needed to seperate the content.</li>
+				</ul></li>
+				<li>Restyle mobile nav<ul>
+					<li>Instead of having the nav just pop-up atop the page, it now displays as a sidebar.</li>
+				</ul></li>
+				<li>Add background and border to burger<ul>
+					<li>As it's not fixed it needed to be visually differentiated from content.</li>
+				</ul></li>
+				<li>Scrollable table<ul>
+					<li>Super basic overflow-x on a parent of table so tables fit on screen, but all content can still be accessed.</li>
+				</ul></li>
+				<li>Add <code>&amp;nbsp;</code> to tags<ul>
+					<li>Multiple word tags were breaking, and looked pretty bad, so made them non-breakable.</li>
+				</ul></li>
+			</ul>
+
+			<h2>Dev</h2>
+			<ul>
+				<li>Colour simplification<ul>
+					<li>I changed the colours to all be 3 digit HEX values, saving a few bytes for the CSS.</li>
+				</ul></li>
+				<li>Add test.html page<ul>
+					<li>For <a href="/test.html">testing elements</a> without navigating through the site, it's public too because why not.</li>
+					<li>Side note: This got me thinking about writing a lil' CSS framework.</li>
+				</ul></li>
+			</ul>
+
+			<h2>Known Issues</h2>
+			<ul>
+				<li>When the burger menu is active, the page is still scrollable<ul>
+					<li>Easily fixed with JS (and a basic overflow), however I want to stay away from JS as much as possible. I believe the approach I took is the best-case scenario, as users at least know if they're scrolling with the sidebar styled nav.</li>
+				</ul></li>
+				<li>Burger nav animation<ul>
+					<li>Changes to clickable area of burger icon meant the animation needed tweaking, and it looks worse. It's not really important though.</li>
+				</ul></li>
+				<li>h1 in nav<ul>
+					<li>I was contemplating moving this into the main, but have yet to do so. Not sure if this is technically an issue, but will need to look into it.</li>
+				</ul></li>
+				<li>Scrollable table<ul>
+					<li>I'd like a better solution than this, preferably one that doesn't require an additional element.</li>
+				</ul></li>
+			</ul>
+
+			<h2>Final words</h2>
+				<p>This release should offer better accesibility, and a nicer look and feel all around.</p>
+				<p>All changes were made as semantic as possible, and the site has been kept accessible, and usable for those not running CSS/JS at all (for instance terminal browsers, and neo-luddites with everything disabled).</p>
+		</main>
+
+		<footer>
+			<hr/>
+			<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
+		</footer>
+	</body>
+</html>
+
