Compare commits

..

1 Commits

Author SHA1 Message Date
Nathan Steel 527335e205 WIP: web bloat blog 5 years ago

@ -1,52 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Oops, something went wrong">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>404!</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Error 404</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">
<section>
<h2>You broke the internet</h2>
<p>This page probably doesn't exist, but if it's supposed to a developer will be looking into why it's borked.</p>
<p>Use the navigation above, or below to head to somewhere a little more, functional</p>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/guides/guide-to-server-hosting.php">Guide to server hosting</a></li>
<li><a href="/projects.html">My projects</a></li>
</ul>
</section>
</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>

@ -15,49 +15,13 @@ semantic, accessable, and snappy.
- Finalise Content
- Add Pages
- Software
- About Me
- OneBag
- Design Choices (for website)
- Living Room
- Kitchen
- Collectables
- Add RSS to blog
- A blog with RSS
## Release Notes
### v0.10.0
- Tweaks to blog articles, and pages
### v0.9.0
- Accessibility changes
- Change colours
- Increase font size/whitespace
- Add "skip to content" button
- Redesign burger navigation
[Patch notes](https://aney.co.uk/blog/release-0.9.0)
### v0.8.0
- Add about page
- Add burger nav
- Change nav links
- Content changes
- Seperate blog into blog/guides/recipes
### v0.7.0
- Add bulk blog articles (mainly server guide)
- Add styling (e.g. tables) used in articles
- Add 404 page
- Add sitemap.xml
- Remove noreferrer from links
### v0.6.0
- Add blog
- Update URLS
- Update list styling
### v0.5.0
- Update styling

@ -1,65 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="An introduction to who I am, and what I do.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>About me</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>About me</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">
<section>
<h2>Who are you</h2>
<p>A developer, and self-hoster that enjoys art/design, automation, Unix, and intentional living.</p>
<h2>What do you do?</h2>
<p>I'm a web developer. Currently working for <a href="https://onlinefulfilmentcentre.co.uk/" target="_blank" rel="noopener">Online Fulfilment Centre</a>. For more details, and previous employement check my <a href="/cv.html">CV</a>.</p>
<h3>What do you do, that isn't work?</h3>
<p>Outside of work I work on writing <a href="/guides/">guides</a> on <a href="/guides/guide-to-server-hosting.html">server hosting</a>, and <a href="/guides/web-dev-101.html">web development</a>.</p>
<p>I keep a little <a href="/blog">Blog</a>, work on other <a href="/projects.html">Projects</a>, and often play video games with friends, read, or watch video media. I try to walk a few times each day, and do some very minor exercise.</p>
<h2>What do you own?</h2>
<p>Maybe this seems a little odd, but as I also practise minimalism, frugalism, and work towards OneBagging, Financial Independance (FI/RE), no-waste, and intentional living. I thought I'd add this, so I can have some public facing 'accountability' as such.</p>
<ul>
<li>My <a href="/equipment.html">hardware/tech</a></li>
<li>My kitchen</li>
<li>Living Room and <a href="/bedroom.html">Bedroom</a></li>
<li>Collectables and Sentimental</li>
<li>Misc</li>
</ul>
</section>
</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>

@ -1,216 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A list of items that live in Aney's bedroom">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>My Bedroom Belonging</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's Bedroom</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">
<section>
<h2>My Bedroom Belongings</h2>
<p>The items that typically live in my bedroom, assuming I'm currently staying in the house.</p>
<section id="bed">
<h3>Bed</h3>
<p>My bed, made up of a base, memory foam topped mattress, a duvet, two pillows, and a headboard.</p>
<h4>Atop the bed:</h4>
<ul>
<li>Buc-ee's throw</li>
<li>Pyjama bottoms</li>
<li>Croca (my teddy crocodile)</li>
</ul>
<h4>On/around the headboard:</h4>
<ul>
<li>Reading lamp/torch</li>
<li>Sleeping mask</li>
</ul>
</section>
<section>
<h3>Bedside Cabinet</h3>
<p>A generic 3 tiered bedside cabinet my Grandad gave me.</p>
<h4>Atop the cabinet:</h4>
<ul>
<li>Lamp</li>
<li>Current book I'm reading</li>
<li>Croca (my teddy crocodile)</li>
</ul>
<h4>First drawer:</h4>
<ul>
<li>Pocket notebook(s)</li>
<li>Travel Toiletry bag (with any toiletries not currently in use)</li>
<li>Hayfever/wet wipes</li>
<li>Tablets, vitamins, beard cream, chewing gum</li>
<li>Grip strengthener</li>
</ul>
<h4>Second drawer:</h4>
<ul>
<li>1x pair of jeans</li>
<li>2x t-shirts</li>
<li>1x pyjama bottoms</li>
</ul>
<h4>Third drawer:</h4>
<ul>
<li>2x bamboo socks</li>
<li>2x bombas socks</li>
<li>2x bamboo underwear</li>
<li>Merino wool gloves</li>
<li>Merino wool buff</li>
<li>Wooly hat</li>
</ul>
<h4>Beneath:</h4>
<ul>
<li>Rpi5 8GB **</li>
<li>240GB SSD (with USB to Sata adapter) **</li>
<li>Router **</li>
</ul>
</section>
<section>
<h3>Hanger</h3>
<p>This is a small 4 knobbed hanger attached to the boiler door.</p>
<ul>
<li>2x Jumpers</li>
<li>Sling/Bumbag *</li>
</ul>
</section>
<section>
<h3>Cabinet</h3>
<p>A medium sized four tiered plastic cabinet, it cost ~£10.</p>
<h4>Atop:</h4>
<ul>
<li>Pencil case *</li>
</ul>
<h4>First drawer:</h4>
<ul>
<li>SAD Lamp</li>
<li>Small sewing kit</li>
</ul>
<h4>Second drawer:</h4>
<ul>
<li>7.5m auto locking tape</li>
</ul>
<h4>Third drawer:</h4>
<ul>
<li>Skipping rope</li>
<li>Second monitor, and stand</li>
</ul>
<h4>Fourth drawer:</h4>
<ul>
<li>Jigsaw (puzzle)</li>
<li>Rubicks Cube</li>
<li>Light ankle weights</li>
<li>3x medium packing cubes</li>
</ul>
</section>
<section>
<h3>Makeshift Table</h3>
<p>Next to the plastic draw, a 'table' constisting of two stools with a 1U server chassic atop.</p>
<h4>Atop:</h4>
<ul>
<li>Pencil holder</li>
</ul>
<h4>Beneath:</h4>
<ul>
<li>Small rubbish bin</li>
</ul>
</section>
<section>
<h3>Workspace</h3>
<p>This sits near the window, where I can get sunlight while staring at a screen.</p>
<ul>
<li>Foldable desk</li>
<li>Foldable chair</li>
</ul>
<p>When these are not in use, they're folded up and put behind the 'table', and plastic cabinet.</p>
</section>
<section>
<h3>Other/Misc.</h3>
<ul>
<li>Dip bar</li>
<li>TP-Link Powerline Adapter</li>
<li>Scales (No battery)</li>
<li>Backpack</li>
<li>Soundcore Mini 3 **</li>
<li>Kovebble Bluetooth Headphones **</li>
</ul>
<p>When these are not in use, they're folded up and put behind the 'table', and plastic cabinet.</p>
</section>
</section>
<section>
<h2>Stuff that moves around</h2>
<p>I have a few things that don't have a 'home', but follow me where I am spending my time, whether at my desk(s), in bed, or in my pocket if I'm not in the room.</p>
<ul>
<li>Water bottle</li>
<li>Phone, and phone stand</li>
<li>Bullet Journal (and pen)</li>
<li>Inhaler(s)</li>
<li>Allergy tablets</li>
<li>Toilet roll</li>
</ul>
</section>
<section>
<p>(*) Has more detail, but I'll likely add that to my 'OneBag' page when I get around to writing that.</p>
<p>(**) Listed elsewhere on the site.</p>
</section>
</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>

@ -1,66 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Some open thoughts about how this blog may/may not change">
<meta name="keywords" content="Blog, articles, thoughts">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Blog Thoughts</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Blog Thoughts</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">
<section>
<p class="intro">I've been having some thoughts about potential changes to the blog, including layouts, moving existing content, and such.</p>
<h2>Seperate article types?</h2>
<p>This was something I thought about when initially adding this blog, "what do I want on the blog". It was a thought due to wanting to add different variations of post, e.g. Traditional Article, Guide/Tutorial, Reviews, Thoughts (think twitter length posts), Recipes, etc. and I wondered how to do them. Did I want to have seperate /guides/, /blog/, /recipes/ sections, or lump them all together?</p>
<p>The easiest option was just to lump everything together into /blog/, and then start writing what I wanted to put onto the site, and slowly get some content in. I'm glad I did this as it's tricked my little pea-brain into getting at least some content up, but most of it sits in guide territory, and that makes it more difficult to find my actual articles/thoughts (very few as of now, but eh).</p>
<p>I have two trains of though in this matter. Which are: </p>
<ul>
<li>Migrate content to new categories on the site (/guides/, /blog/, /recipes/)</li>
<li>Add tags (like on the <a href="/projects.html">projects</a>, and <a href="/cv.html">CV</a> pages</li>
<li>Add tags v.2. By this I mean, potentially change the bullet point colour to match the article types together (in concept I like this)</li>
</ul>
<p>If I do the former here, I can 301 (into 302 if 100%) the articles to their new locations, but I'm unsure for now, so experimentation is in order.</p>
<h2>Pagination</h2>
<p>I honestly haven't put any thought into this at all, but as the blog page gets slowly filled with article links, I feel it's a little much for one page. If for instance I write 10,000 articles, that's a lot of searching, and more importantly a lot of page size that doesn't need to exist.</p>
<p>I am not using a blogging platform, nor a server-side language, or even a framework like <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> currently, each page is entirely hand-written, so pagination will be a pain in the backside. For this reason it's on this list, as I need to figure out a decent way to do it, with it nightmare to do, and keep up to date.</p>
<h2>Featured/Pinned</h2>
<p>A short thought. I could simply leave the pinned articles as-is, with a few articles in a seperate list without styling, or I could style them a little.</p>
<p>If the styling option is gone for, it'd be nothing hugely fancy, probably just 3 boxes with the title, and maybe even a background colour. I'm not sure how I feel about it though, as adding ~100 bytes or so to the CSS is unneeded, and the styling could posiblity redact from the rest of the blog page.</p>
</section>
</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>

@ -1,63 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Burger menu, who dis? I've added a burger menu to the site, and figured I'd write a piece about it as it's currently the only 'advanced' piece of funtionality that exists here.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Hello, Burger menu!</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Hello, Burger menu!</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">
<section>
<p class="intro">On Friday 18th of November 2022, I released version 0.8.0 of this website. With that a large, and very noticable change occured. The addition of a burger menu.</p>
<h2>What is a burger menu?</h2>
<p>A burger menu is simply a type of navigational menu. It's typically hidden by default with just a visible icon, but when (the icon is) clicked the navigational content becomes visible, and accessible.</p>
<h3>Why is it called a burger menu?</h3>
<p>The name burger/hamburger comes from the appearance of the icon. It consists of 3 horizontal lines, ordered vertically, so at a glance it sort of looks like the top of a bun, a patty, and the bottom of a bun.</p>
<h2>Why add a burger menu?</h2>
<p>Simple, I wasn't a fan of how the site showed the navigational menu on mobiles. I felt it took up too much of the screen real estate, and the requirement for some users to scroll down to get to the content is terrible design. With the implimentation of the burger menu I believe the site looks much cleaner, with a better user-experience on mobiles. So an overall great success, all without losing any navigational control.</p>
<h2>CSS only</h2>
<p>Unlike many of the burger menus you'll spot in the wild, the burger menu on my site is written with pure CSS. It makes use of a checkbox input for toggling, so those of you with Javascript disabled can still benefit from the better user experience.</p>
<p>The only downside to this is in the case that CSS doesn't load, as there will be a random visible checkbox atop of the navigation.</p>
<h2>What? I don't see it?</h2>
<p>This could be one of two reasons, your browser isn't small enough (try resizing it), or you've got the old CSS cached. If you've got the old CSS you'll notice the random checkbox I mentioned, try hitting CTRL+F5 to perform a hard-reload.</p>
<h2>Inspiration</h2>
<p>Like many things, I started by googling similar implementations, and found this <a href="https://codepen.io/alvarotrigo/pen/MWEJEWG" target="_blank" rel="noopener">snippet by Alvaro</a>. I used this as the starting point, stripping it down, and making my own changes to make it work for my site in a way I liked.</p>
</section>
</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>

@ -1,58 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A new step for aney.co.uk, there's now a blog.">
<meta name="keywords" content="Blog, articles, news">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>I'm going to America</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>I'm going to America</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">
<section>
<p>Hey, hey. Quick update, I'm travelling to, and visiting America to see my parents.</p>
<h2>Whatchu gonna do?</h2>
<p>I'll still be working, as I WFH, so I'll be enjoying 3AM starts whilst in the US.</p>
<p>Other than working, we'll just be spending time together. There are plans for a week in Universal Studios, so I'm looking forwards to that!</p>
<h2>What about your project?</h2>
<p>Work will still be done on it, but very slowly, and I may forget where I was with the codebase by the time I get back, so that's going to slow it down even more.</p>
<h2>So no devlogs?</h2>
<p>I have some content worth writing up already done, and almost done (in codebase, not written into posts), so there likely will still be devlogs.</p>
<p>If I do write these up, there will only be one a week (keeping friday), and they will be posted much later in the day, maybe even the next day.</p>
<p>I did say I'd be keeping Friday, but potentially next Friday will be skipped (or posted on Monday), as I will be jetlagged when I arrive, and will be working throughout the first week I'm in the US, beginning the literal day after I arrive (which gives me 2 hours to spend with parents upon the airport landing, then I need to hit the hay).</p>
</section>
</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>

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Aney's Blog">
<meta name="description" content="A collection of typically tech related articles, authored by Aney.">
<meta name="keywords" content="Blog, articles, news">
<meta name="author" content="Nathan (Aney) Steel">
@ -15,14 +16,11 @@
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's Blog</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="/equipment.html">equipment</a>
<a href="/projects.html">projects</a>
<a href="/blog/">blog</a>
<a href="/sitemap.html">misc</a>
@ -31,49 +29,19 @@
<hr/>
</header>
<main id="main">
<main>
<section>
<p>You may be looking for my <a href="/guides/">guides</a>, or <a href="/recipes/">recipes</a>.</p>
</section>
<section>
<h2>2024</h2>
<ul>
<li><a href="/blog/p1-front-end-debugging.html">Project 1 Part 6: Front End Debugging</a> - 01/11/2024</li>
<li><a href="/blog/p1-ecsey-code-restructure.html">Project 1 Part 5: ECSey Code Restructure</a> - 25/10/2024</li>
<li><a href="/blog/im-going-to-america.html">I'm going to America</a> - 21/10/2024</li>
<li><a href="/blog/p1-basic-mechanic-hack-in.html">Project 1 Part 4: Basic Mechanic Hack In</a> - 18/10/2024</li>
<li><a href="/blog/p1-spreadsheet-gdd.html">Project 1 Part 3: Spreadsheet GDD</a> - 14/10/2024</li>
<li><a href="/blog/p1-basic-drawing-and-interaction.html">Project 1 Part 2: Basic Drawing and Interaction</a> - 11/10/2024</li>
<li><a href="/blog/p1-the-stack-and-rooms.html">Project 1 Part 1: The Stack, and Rooms</a> - 07/10/2024</li>
<li><a href="/blog/prioritising-my-project.html">Prioritising my project</a> - 04/10/2024</li>
<li><a href="/blog/return-of-the-me.html">Return of the me</a> - 27/09/2024</li>
</ul>
<h2>2023</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>
<li><a href="/blog/reducing-homelab.html">Reducing my Homelab</a> - 26/09/2022</li>
<li><a href="/blog/blog-thoughts-220822.html">Blog Thoughts (Layout/Articles)</a> - 22/08/2022</li>
<li><a href="/blog/my-steamdeck-arrived.html">My SteamDeck Arrived!</a> - 22/08/2022</li>
</ul>
<h2>2021</h2>
<ul>
<li><a href="/blog/web-bloat.html">Web Bloat</a> - 22/11/2021</li>
<li><a href="/blog/ive-started-a-blog.html">I've started a blog</a> - 20/11/2021</li>
</ul>
</section>
</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>
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
</footer>
</body>
</html>

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="I've started a blog">
<meta name="description" content="A new step for aney.co.uk, there's now a blog.">
<meta name="keywords" content="Blog, articles, news">
<meta name="author" content="Nathan (Aney) Steel">
@ -15,14 +16,11 @@
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>I've started a blog</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="/equipment.html">equipment</a>
<a href="/projects.html">projects</a>
<a href="/blog/">blog</a>
<a href="/sitemap.html">misc</a>
@ -31,9 +29,9 @@
<hr/>
</header>
<main id="main">
<main>
<section>
<p>To preface, I am not an author. In fact my skill with the pen was much more proficient when I was a youngling, but alas I have returned to write.</p>
<p>To prefix, I am not an author. In fact my skill with the pen was much more proficient when I was a youngling, but alas I have returned to write.</p>
<h2>Why?</h2>
<p>There are many reasons, although I don't believe there even needs to be one. If you want to blog, blog!</p>
<h3>To improve my writing skills</h3>
@ -49,7 +47,7 @@
<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>
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
</footer>
</body>
</html>

@ -1,87 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="After many moons, it has arrived. My SteamDeck is within my hands, a glorious day">
<meta name="keywords" content="Blog, articles, template">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>My SteamDeck Arrived!</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>My SteamDeck Arrived!</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">
<section>
<p class="intro">The title does not decieve you, my SteamDeck has in fact arrived! Well actually it arrived on the 15th of August, and I've been using it since.</p>
<h2>Why order the SteamDeck?</h2>
<p>I liked the concept, I loved that Valve opted for, and have aided in the development of the Linux kernel (notably for gaming), I wanted to untether from my desktop PC, and I wanted to emulate handheld games on a, well, a handheld.</p>
<p>I also figured buying this device puts a little money in Valve's pocket, and shows that there's a want, for both Valve, and other game developers.</p>
<h2>Which did I order?</h2>
<p>I ordered the 256GB model (the middle tier), as I figured Valve made nothing on the model before, and I couldn't justify to myself (at the time) the model after.</p>
<h2>How long did it take to get?</h2>
<p>It took a bit over a year for me to recieve my order email (check Steam for your estimated dates though!). I ordered on the 16th of July (2021) after much hesitation, and got the email on the 8th of August (2022), but after the order was placed, it was around a week for it to get delivered to my house. It did take a little over a week for me to receive it though, as I missed the Friday delivery due to being at work, and had to take the day off on Monday, to ensure I recieved it next working day.</p>
<h2>Worth?</h2>
<p>I've only been using it for around a week, but it has been my daily driver so I can give a current thought which is <strong>yes</strong>.</p>
<p>Using it in both gaming mode, and desktop mode (with external peripherals) has been great, and if you enjoy handhelds I wholely recommend grabbing one once they're more readily available.</p>
<p>With my thought on its worth (strongly worth), I've still written this article unbiased, with any qualms I have with entire honesty, because I cannot stand when people lie about products they like</p>
<h2>Desktop Mode</h2>
<p>Desktop mode with peripherals works as any Arch desktop would, there are a few hoops to jump through on first use, but after that it's a neat PC. Most of my desktop use is gaming with friends on Discord, or SSHing into servers to work on them, and the SteamDeck does them both.</p>
<h3>Problems</h3>
<p>Sometimes when tabbing between programs, and more often when new media starts to play, my audio will stop, which is annoying as I need to use volume controls to change back to the correct device each time this occurs. It's probably an issue with Pulseaudio itself, but none-the-less it's annoying.</p>
<p>Maybe not a problem, as many laptops are heading this way, but I needed to buy an adapter (USB-C splitter) to plug in my USB-As, HDMI, Ethernet, etc.</p>
<h2>Gaming Mode</h2>
<p>This is how most of my time with the SteamDeck has been spent. I've played a bunch of Hades, some (emulated) Pokémon Legends Arceus, Minecraft, and tried some mid 2010 AAAs. Within this short stint, it's been a fantastic experience, the screen's splendid indoors, audio is great (for a non-audiophile like me at least), and the controls feel balanced, and responsive, can't ask for much else.</p>
<h3>Problems</h3>
<p>I feel like there's room for improvement with the Steam GUI, such as hotkeys to get to the top bar, etc. but I'm a tiling window manager guy, so of course I want the efficiency of hotkeys.</p>
<p>After a few hours of play, I get some pain in my right arm, and thumb, although if you don't have RSI already, this likely won't affect you.</p>
<p>The screen is very reflective on my model, and is annoying to use outside. I went for a walk while playing Pokémon, and even at full brightness I couldn't see the gameplay very well whilst in the sunlight.</p>
<p>My joysticks make a very quiet clicking noise when I tap them upwards, which most people probably don't notice, but unfortunately I do. Thankfully with the speakers on it's non-noticable.</p>
<p>Battery life is a bit lacking for me, with ~2-5 hours or so depending on the games played (even with GPU clocked down). I knew what I was getting into, but still hope the next iteration has a lil' more juice.</p>
<h2>Any Regrets?</h2>
<p>Actually yes, I regret not purchasing the 512GB model with the reflective screen. As mentioned I've tried using the device outside, and the reflection is annoying (could just be the 'tism), but not entirely unusable especially at higher brightnesses (and definitely usable outside of sunlight). I'll likely purchase a screen protector to try to fix this problem.</p>
<p>I've also noticed that I've used a lot of storage already, and the extra 256GB from the SSD would have been majorly useful (especially since I may well have installed some larger, 100GB+ titles if I had it). This can be solved with a larger SD card, or by switching the SSD, but it'd have been nice to have from the start.</p>
<p>Not a regret per se, but something I've spotted. In this ~week of usage my battery health has dropped from 100% to 96%. It may be a calculation issue, but still that's spooky, and I don't like that it's already gone down. I'm going to get a 20k mAh battery pack to allow me to use it during travel, etc.</p>
<h2>Last thoughts</h2>
<p>Yea, the SteamDeck's pretty good. I'll be investing in a reflective screen protector, and a powerbank to hopefully cover up its flaws, but besides that it's definitely worth the buy so far.<p>
<p>If you don't own a PC, this is a good starting point, as it's an affordable in, and unlike traditional PC gaming, you don't need to sit at a desk the whole time!</p>
<p>I'm looking forwards to some LAN-esk ventures with the 'Deck, and if a new version is announced in the next couple years, I'll definitely be hopping onto that pre-order queue.</p>
</section>
</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>

@ -1,97 +0,0 @@
<!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>Project 1: Basic Drawing and Interaction</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1 style="font-size: 2.4rem">Project 1: Basic Drawing and Interaction</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">
<p>Switching away from the server-side stuff after getting the stack setup, I've opted to the basic game 'drawn', and 'playable', if you can call it those.</p>
<h2>Drawing</h2>
<p>Since I'm using JS and HTML canvas I need to draw each shape onto the canvas setting each individual shapes co-ordinates and size. This sounds simple, but the more shapes you draw, and the more you don't want them to overlap, or to add zoomed in/out shapes it gets much more complicated than you'd think. This is a prime example of why a solid grasp on basic mathematics is good for developers.</p>
<h3>Shape class</h3>
<p>Repeating the setting of context data, and the drawing of each shape became tedious and took a big chunk of my code-base after not long, so I decided to simplify by creating a Path2D extended class.</p>
<pre class="pre--small"><code>class Shape extends Path2D{
constructor(params){
super();
this.shape = params.shape || 'rectangle';
this.name = params.name;
this.x = params.x || 0;
this.y = params.y || 0;
this.width = params.width || 0;
this.height = params.height || 0;
this.fillStyle = params.fillStyle || "#FFFFFF";
}
draw(){
context.fillStyle = this.fillStyle;
if(this.shape == 'circle'){
context.beginPath();
context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
context.fill();
context.closePath();
}else if(this.shape == 'semi'){
context.beginPath();
context.arc(this.x, this.y, this.width/2, Math.PI, 0);
context.fill();
context.closePath();
}else if (this.shape == 'rectangle'){
context.fillRect(this.x, this.y, this.width, this.height);
}
context.fillStyle = defaultFillStyle; // Reset back to default
}
}</code></pre>
<p>Pretty simple, I pass the shape I want to draw, x,y co-ordinates, width and height, and the fill. Not included above, but the class also accepts, and draws the shape stroke.</p>
<p>I then call the draw method of the new Shape, and it sorts everything for me.</p>
<h2>Interaction with Event Handlers</h2>
<p>Next up, for the game to be a game and not just some visual media, we need to be able to interact with it.</p>
<p>Basic interaction is simple enough, I threw in a 'click' EventListener, then take the event/click's X/Y position and subtract the canvas's offset from the HTML body (to have 0,0 set to the top-left of the canvas, and not the HTML page).</p>
<p>This new X/Y, which I will just call X/Y is then compared to the X/Y locations of each shape. If the event X/Y occurs in a location greater (or equal) than the shape X/Y, and less than (or equal) Shape X/Y plus the shape Width/Height I then do whatever action I require.</p>
<p>This is another thing I've simplified by creating a function:</p>
<pre class="pre--small"><code>function clickableCheck(x,y,shape){
if(
y > shape.y && y < shape.y + shape.height
&& x > shape.x && x < shape.x + shape.width)
{
return true;
}
return false;
}</code></pre>
<p>The function above is even simpler too, as all you need to do to check for a click, is pass a Shape object, created by the Shape class earlier in this post!</p>
<p>Fun Fact! Shape here, is actually called clickable in my code-base, but I've changed it to make more sense without context.</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>

@ -1,184 +0,0 @@
<!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>Project 1: Basic Mechanic Hack In</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1 style="font-size: 2.4rem">Project 1: Basic Mechanic Hack In</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">
<p>With the basic mechanics now thought of thanks to my research, and constantly evolving <a href="/blog/p1-spreadsheet-gdd.html">Spreadsheet GDD</a>, I can now add them (in their most basic sense) into my game!</p>
<p>Disclaimer! Anything written in this article is not indicative of how the mechanic will work in it's final stages. The code examples here are also specifically examples of the hackyness of this stage, and extremely far from what the codebase will be.</p>
<h2>Still developing on front-end</h2>
<p>For ease, and speed of development I opted to continue the development work front-end to benefit from console logs, and alert pop-ups when a condition that shouldn't get hit, gets hit. I also don't have to think about any data to be sent, so can happily hack away changing everything at a whim.</p>
<h2>'Basic' Mechanics?</h2>
<p>My game has a number of mechanics, each with more complexity than is 'needed' to have a playable game, this complexity is what will allow me to balance, and create distinctions between similar items.</p>
<p>Keeping this in mind, I just need a somewhat playable experience that uses the absolute basics of my core/fundamental mechanics so I can get a big boost in progress of making the game itself. The complexity will be added later on, once the codebase exists, has been tidied up, and made a bit more efficient (foreshadowing for a future article, how does he do it).</p>
<h2>The Hack-in</h2>
<p>Since my only concern at this point was to get the mechanics in, and make each of the most basic 'playable' moves I added very basics.</p>
<ul>
<li>Summoning units</li>
<li>Adding shield, and 'resource'</li>
<li>Attacking with units</li>
<li>Inspecting oppossing units</li>
<li>Basic one-dimensional win condition</li>
<li>Preventing interaction during 'special events', such as during an attack</li>
</ul>
<p>These are my current mechanics (still attempting to be vague), which I believe I'm mostly settled on, likely with only minor changes to the limits and conditions for each field location. When the game's closer to a testing phase I'll do a full writeup of each.</p>
<h2>Summon a unit</h2>
<p>Once a unit is available to be played a check is done to see if there is enough 'resource' to add it to the field, for the hack-in I've only done a requirement of one per unit, but it does need to be of the same 'alliedType'.</p>
<pre class="pre--small"><code>playCardToField(index){
let UnitPlayed = availableUnits[index];
// Check if there's space to add unit
if(unitArea.length >= maxUnits){
return 0;
}
if(UnitPlayed.cost > playerResource.length){
return 0;
}else{
let canPlay = false;
let needsResource = 1;
let usedResource = 0;
playerResource.forEach(function(ResourceUnit, key){
if(UnitPlayed.alliedType == ResourceUnit.alliedType && ResourceUnit.cantAttack == false && needsResource > usedResource)
{
ResourceUsed.push(key);
usedResource++;
canPlay = true;
}
});
if(!canPlay){
return 0;
}
}
// Mark resource as used (so they can't be used for another unit)
ResourceUsed.forEach(function(UnitKey, key){
playerResource[UnitKey].used = true;
});
// Remove from playable units
availableUnits.splice(index, 1);
// Add unit to field
unitArea.push(UnitPlayed);
}</code></pre>
<p>This code is essentially the same for adding shields, and 'resource' too, just with a few minor changes, as the hack-in mode in me let me just straight copy-and-paste functions.</p>
<h2>Special Events + Check</h2>
<p>A Special event, is what I ended up naming events that have specific options to progress/end such as 'Attacking' and 'Inspecting' which I used for testing in the hack-in.</p>
<p>If the game has been won, or there is a unit being inspected, or attacking a variable within the eventListeners is set.</p>
<pre class="pre--small"><code>let specialEvent = false;
if(inspectUnit !== null || attackingUnit !== null || gameWin){
specialEvent = true;
}
</code></pre>
<p>This variable is then checked when a certain target is selected, and depending on if specialEvent is true (if so it typically will check for the correct event, i.e. attacking as below) it'll trigger a different function call, or if false just prevent a function call.</p>
<pre class="pre--small"><code>playerField.forEach(function(item, index){
let clickable = item.clickable;
if(clickableCheck(x,y,clickable)){
if(attackingUnit !== null && item == attackingUnit[0]){
endAttack();
}
if(!specialEvent && item.cantAttack != true){
startAttack(index);
}
}
});</code></pre>
<p>The attacking/inspectingUnit, event data is set when one is triggered, explained in the text below.</p>
<h2>Attacking</h2>
<p>Attacking is split into three phases.</p>
<p>When an available unit is selected, it sets that unit in the 'attacking' variable in startAttack().</p>
<pre class="pre--small"><code>startAttack(index){
attackingUnit = [playerField[index], index];
}</code></pre>
<p>If player then selects an opposing shield or unit, while an 'attacking' unit is set, the makeAttack() function passes the (jank incoming) array, arrayName, and the targets array index to perform checks.</p>
<p>If a shield is destroyed, the opposing player gets whatever unit was used as a shield added to their 'availableUnits', as a catch-up mechanic.</p>
<p>If units are of equal power, they are both unalived, if one is stronger they get to live, while the other, not so much.</p>
<pre class="pre--small"><code>makeAttack(index, array = null, name = null){
if(array == null){ array = opponentField; name = 'opponentField' }
let defendingUnit = array[index];
// If hitting shield, don't calc combat damage
if(name == 'opponentShield'){
if(array[index].tapped){
array[index].tapped = false;
opponentAvailableUnits.push(array[index]);
array.splice(index, 1);
}else{
array[index].tapped = true;
}
playerField[attackingUnit[1]].tapped = true;
this.endAttack();
return 1;
}
// Do calc combat damage for each unit if unit vs unit fight
if(defendingUnit.atk &lt;= attackingUnit[0].atk){
array.splice(index, 1);
}
if(attackingUnit[0].atk &lt;= defendingUnit.atk){
playerField.splice(attackingUnit[1], 1);
}else{
playerField[attackingUnit[1]].tapped = true;
}
this.endAttack();
}</code></pre>
<p>Once the makeAttack() has completed, it then calls endAttack(), which sets the 'attacking' variable to null that will allow non-specific interactions again, then checks the opposing player's shield, if it's destroyed the gameWin state is set. endAttack() can also be called by reselecting the 'attacking' unit, as a means to not force players into combat.</p>
<pre class="pre--small"><code>endAttack(){
attackingUnit = null;
if(opponentShield.length &lt;= 0){
gameWin = 1;
}
}</code></pre>
<p>That's all. My vagueness remains for the time being (inc. in the code examples, as I've changed variable names for example), I only hope that I'm not getting people excited for a gametype that isn't what I'm making. I need to keep the vagueness thoguh, as once I annouce what it is I will feel a mix of pressure, and pre-success that I believe will detriment my development, and potentially get me to quit before completion.</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>

@ -1,312 +0,0 @@
<!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>Project 1: ECSey Code Restructure</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1 style="font-size: 2.4rem">Project 1: ECSey Code Restructure</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">
<p>Believe me when I say, the <a href="/blog/p1-basic-mechanic-hack-in.html">hack in</a> code hurts me more than it hurts you. With that said, it was essential to getting the core in, and can easily be re-written, which I started on immediately after it's completion.</p>
<h2>Data Oriented?</h2>
<p>While creating the core of the game, even during the hack in I had a somewhat data-oriented approach, with the use of arrays, and objects of pure data scattered around rather than classes that could bulk and slow the game down.</p>
<p>As it was hacky though, it eventially become that there were too many arrays with too much similar data, that were accessed slightly differently.</p>
<p>This led me to look into slowly writting the code base over, replacing individual arrays and functions with more universal data, with each piece of data only being referrenced once, and any functionality directly working with that data.</p>
<h2>ECSey</h2>
<p>With my mind in a semi data oriented mode, I thought of other games (and performant required software) and how they would typically implement an ECS (Entity Component System), and I opted to go the same route.</p>
<p>I have never written an ECS, and didn't look into it, as I vaguely understood what's what and the purpose. Since I did this however I'm unsure if I ended up with a 'true ECS', so I opted to refer to my codebase as 'ECSey'.</p>
<p>Here's how it works, mostly.</p>
<h3>The Breakdown</h3>
<h4>Entity</h4>
<p>The 'object' itself, these are stored in an 'item' array, and are stored only as an integer, no other data at all.</p>
<pre class="pre--small"><code>item = [0,1,2,3,4];</code></pre>
<h4>Component</h4>
<p>The 'attributes' of the Entity. These contain the actual data for each of the 'objects'/entities. They are stored in an array (an object in JS) and are accessed by referring to said array with the key of the 'entity'/item ID the attribute belongs to.</p>
<pre class="pre--small"><code>size[entityId] = [width, height]; position[itemKey] = [positionX,positionY];</code></pre>
<h4>System</h4>
<p>Each system consists of the function calls, and processes that access and perform actions with the entity's attributes, iterating each of them and performing the actions according to their data. So, for instance I have a 'drawItems' function that loops each item, and draws that item to the board based on the entity's size, and position (if it has then both set).</p>
<h2>ECSey code examples</h2>
<p>And here are some snippets of what the new codebase looks like at current. Still not finalised, but so much better.</p>
<h3>Basic Components</h3>
<p>As this is the first pass for the ECSey design, I replicated the existing arrays and objects into components/attributes. This is not all there will be in the future, in fact this list has more than doubled already!</p>
<pre class="pre--small"><code>let item = [];
let itemCount = 0; // Used to keep track of how many items there have been
let boardElement = {};
let cardData = {};
let position = {};
let size = {};
let cardStatus = {};
let player = {};
let listPosition = {};</code></pre>
<h3>Get Items</h3>
<p>This loop all the entities, compares the passed 'boardElement', 'playerId', 'cardStatus', 'listPosition', and any other attributes passed, and returns a new array of only the entities that match the criteria.</p>
<pre class="pre--small"><code>getItems(playerId = null, boardElementId = null, ... ){
let newItems = item; // Set array to all items (item is current name of entities array)
let tempArray = []; // New array for filtering
// Check if each item shares the PLAYERID passed
if(playerId !== null){ // Only check if a playerId has been passed to getItems
for(let newItem = 0; newItem &lt; newItems.length; newItem++){
let itemKey = newItems[newItem]; // Get the entity key/ID
// If the item shares the playerId, add it to the tempArray
if(playerId == player[itemKey]){
tempArray.push(newItems[newItem]);
}
}
// Set newItems to tempArray so it can be looped again with only what matched
newItems = tempArray;
}
// Reset tempArray so it can be reused in next loop
tempArray = [];
...
// Return the new specified itemList
return newItems;
</code></pre>
<p>Each of the components passed gets checked and looped in the same manner, slowly filtering out what's not wanted. Then the newItems array is returned to be used however needed.</p>
<h3>Get Item Key</h3>
<p>Sometimes only a single item is wanted. This can be retried by passing the three core components I have in the game to date.</p>
<pre class="pre--small"><code>getItemKey(boardElementId, listPositionId, playerId){
// This calls getItems from example above, passing the component data
let itemKey = this.getItems(boardElementId, playerId, null, listPositionId);
if(itemKey.length &lt; 1){ return false; } // Didn't find a key
if(itemKey.length &gt; 1){ return false } // Found more than 1 key
// Return first index of array, aka the itemKey
return itemKey[0];
}</code></pre>
<p>All this does is call getItems, does a little error handling and returns the first (only) entitiy.</p>
<p>This will only return one, unless something gets broken elsewhere, as each player's boardElements have unique 1..X listPositions that get moved up/down when something is added/removed from the boardElement. There are also error messages, but I've ommited them from the snippet.</p>
<h3>Playing to boardElement, Board/Mana/Shield</h3>
<p>To demonstrate the fact that getItemKey() will only return one entity we'll look at how I switch entities between the 'boardElements'</p>
<pre class="pre--small"><code>addFromBoardElement(playerFrom, fromPosition, elementFrom, elementTo, toPosition=null, playerTo=null){
// If no playerTo provided (typical behavior), pass between elements for same player
if(playerTo == null){ playerTo = playerFrom; }
// Check there is only 1 item that exists with the from info
let itemKey = this.getItemKey(elementFrom, fromPosition, fromPlayer);
// Check if there is a specific position the item needs to go to
if(toPosition == null){
// If not get the next available position of the elementTo
toPosition = getCurrentPositionAndLength(elementTo, playerTo)[0]+1;
}
this.setCardPosition(itemKey, toPosition, elementTo, playerTo, fromPosition, elementFrom, playerFrom);
this.removeItemStatus(itemKey); // Untap, remove 'attacking' etc.
}</code></pre>
<p>setCardPosition called first decreases the listPosition of anything from the old boardElement after the old listPosition by 1. It then increases the listPositions in the new boardElement up by one for anything equal to or higher than the new position.</p>
<p>Don't worry if it doesn't make sense at first, I wrote it and it took me a while of writing arrays in a physical notebook before I was sure what would work.</p>
<pre class="pre--small"><code>setCardPosition(card, newPosition, newElement, newPlayer, oldPosition, oldElement, oldPlayer){
// Move old boardElement listPositions down
this.moveElementPositions(0, oldElement, oldPosition, oldPlayer);
// Move new boardElement listPositions up
this.moveElementPositions(1, newElement, newPosition, newPlayer);
// Then fit the card into the new gap that's opened up in new boardElement
listPosition[card] = newPosition;
boardElement[card] = newElement;
}</code></pre>
<p>This is what moveElementPositions does.</p>
<pre class="pre--small"><code>moveElementPositions(direction, elementFrom, fromPosition, playerFrom){
// Loop the elementFrom, and move positions up/down by one
let items = this.getItems(elementFrom, playerFrom, null, null);
for(let item = 0; item &lt; items.length; item++){
let itemKey = items[item];
// Move everything after the old position down
if(direction == 0 && listPosition[itemKey] > fromPosition){
listPosition[itemKey]--;
}
// Move everything from the new position up
if(direction == 1 && listPosition[itemKey] >= fromPosition){
listPosition[itemKey]++;
}
}
}</code></pre>
<h3>Attacking</h3>
<p>Some of the changes to the attacking code, that you may remember was shown in it's prior hacked-in form.</p>
<pre class="pre--small"><code>startAttack(itemAttacking){
if(this.isTapped(itemAttacking)){ return false; }
this.setEvent('attack', itemAttacking);
this.setCardStatus(itemAttacking, 'attacking');
}</code></pre>
<pre class="pre--small"><code>makeAttack(itemDefending, itemAttacking = null){
// If itemAttacking not defined, use the item from inEvent
if(itemAttacking == null){ itemAttacking = inEvent[1]; }
if(this.isTapped(itemAttacking)){ return false; }
switch (boardElement[itemDefending]) {
case 'board':
let atkAttacker = this.attackOf(itemAttacking);
let atkDefender = this.attackOf(itemDefending);
// Does Attacker kill Defender
if(atkDefender &lt;= atkAttacker){ this.sendToGrave(itemDefending); }
// Does Defender kill Attacker
if(atkAttacker &lt;= atkDefender){
this.sendToGrave(itemAttacking);
this.endAttackFor(itemAttacking);
}
else{ this.endAttackFor(itemAttacking); }
break;
case 'shield':
// If the shield is tapped 'destroy' it
if(this.isTapped(itemDefending)){ this.destroyShield(itemDefending); }
// Otherwise tap the shield, so it can be destroyed in future
else{ this.tapCard(itemDefending); }
this.endAttackFor(itemAttacking);
break;
}
}</code></pre>
<p>And here's the first pass of the eventListener change to start/make attacks.</p>
<pre class="pre--small"><code>for(let itemKey = 0; itemKey &lt; item.length; itemKey++){
if(itemKey in size && itemKey in position && clickableCheck(x,y,itemKey)){
let playerId = player[itemKey];
// Check the location of element
switch(boardElement[itemKey]){
case 'board':
// playerBoard
if(!inEvent && !board.isTapped(itemKey) && playerId == yourPlayerId){
board.startAttack(itemKey);
break;
}
// opponentBoard
if(inEvent && inEvent[0] == 'attack' && inEvent[1] != itemKey && playerId != yourPlayerId){
// Make attack on the card clicked, with card in inEvent[1]
board.makeAttack(itemKey);
break;
}
...
}
...
board.drawBoard();
return true;
}
}</code></pre>
<h3>Helper Functions</h3>
<p>These are smaller functions that perform specific tasks, but written so that I can call them and not replicate code. The examples are simple ones, and some are more simplified for the demonstation.</p>
<pre class="pre--small"><code>tapCard(itemKey){ cardStatus[itemKey] = 'tapped'; } </code></pre>
<pre class="pre--small"><code>remainingShieldCount(playerId){ return getCurrentPositionAndLength('shield', playerId)[1]; }</code></pre>
<pre class="pre--small"><code>isTapped(itemKey){ if(cardStatus[itemKey] == 'tapped'){ return true; } return false; }</code></pre>
<pre class="pre--small"><code>isAttacking(itemKey){ if(cardStatus[itemKey] == 'attacking'){ return true; } return false; }</code></pre>
<pre class="pre--small"><code>destroyShield(itemKey){
if(!this.isTapped(itemKey)){ return false; }
let items = this.getItems('shield', player[itemKey], null, null);
for(let item = 0; item &lt; items.length; item++){
let itemKey = items[item];
// If ANY of their shields are untapped, you can't destroy target
if(!board.isTapped(itemKey)){
return false;
}
}
// Shield is now destroyed, move it from shield to owners hand (for the catchup mechanic)
this.addShieldToHand(player[itemKey], listPosition[itemKey]);
return true;
}</code></pre>
<pre class="pre--small"><code>addShieldToHand(playerFrom = null, listPositionFrom = null){
this.addFromBoardElement(playerFrom, listPositionFrom, 'shield', 'hand', null, null);
}</code></pre>
<pre class="pre--small"><code>sendToGrave(itemKey){
this.addFromBoardElement(player[itemKey], listPosition[itemKey], boardElement[itemKey], 'grave', null, null);
}</code></pre>
<p>Some helpers like 'addShieldToHand' have other bits to them too that would trigger other functions, or effects too. Some are literally just one liners to make the code easier to understand and work with.</p>
<h2>No more hiding what the game is?</h2>
<p>For my code examples from now on, they will be near identical to the code at the time I merge the feature the topic is based on into my devlopment branch. Eventually (rather soon in episodic article terms) I will need to detail what the game is to convey the why, so look forwards to that.</p>
<p>Being said, up to then I won't directly address the genre, but won't be changing names of 'card', etc. anymore.</p>
<p>I hope to keep showing the progressing code-base, and would love for people to follow my development journey, and to inspire others to start a game. If you do start a game, feel free to reference my work in these articles, but try not to rip off everything (despite what I post being mostly unfinished/finalised).</p>
<h2>Updates</h2>
<p>29/10/24 - If you're reading this as a semi-guide, this is not the optimal way to deal with entities/components. I will be rewriting this once the core functionality of the game is written.</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>

@ -1,163 +0,0 @@
<!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>Project 1: Front End Debugging</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1 style="font-size: 2.4rem">Project 1: Front End Debugging</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">
<p>Whilst working on the codebase I found that I had to repeatedly go back into the code, and add console logs just to verify basic things like if the correct card had been moved to the correct listPosition and boardElement.</p>
<h2>Solution</h2>
<p>To prevent the need to keep editing the code for basic logs, I opted to write some front-end debuging tools using the existing <a href="/blog/p1-ecsey-code-restructure.html">ECSey functions</a> I wrote prior.</p>
<p>I gave a quick thought of what I regularly need to check, and add some buttons with related function calls dedicated to console logging the results. getItemsAndPrintFrontEnd() is the start of the debugging process.</p>
<h3>The UI</h3>
<p>I've removed the onClick events from the buttons, but the only one you need to know is the second row's button calls getItemsAndPrintFrontEnd(). Those in the first row are remnants of the most basic debugging that I soon realised I needed/wanted better. Well besides 'Untap all' that well, guess what that does.</p>
<hr>
<button onclick="alert('Never')">Untap all</button>
<button onclick="alert('gonna')">Print cardlist to console</button>
<button onclick="alert('give')" >Print cardsInDeck for player0</button>
<button onclick="alert('you')">Print cardsInDeck for player1</button>
<hr>
<div>
<button onclick="alert('up')">Echo cards: </button>
<select name="boardElementId" id="boardElementId">
<option value="">All</option>
<option value="realDeck">realDeck</option>
<option value="deck">deck</option>
<option value="hand">hand</option>
<option value="mana">mana</option>
<option value="shield">shield</option>
<option value="board">board</option>
<option value="grave">grave</option>
</select>
<select name="playerId" id="playerId">
<option value="">All</option>
<option value="0">Player0</option>
<option value="1">Player1/Opponent</option>
</select>
<input name="listPositionId" id="listPositionId" placeholder="In position 1,2,3..."></input>
<select name="cardStatusId" id="cardStatusId">
<option value="">All</option>
<option value="attacking">Attacking</option>
<option value="tapped">Tapped</option>
</select>
<select name="itemOrCardData" id="itemOrCardData">
<option value="item">Item Data</option>
<option value="card">Card Data</option>
</select>
</div>
<h3>Code examples</h3>
<p>The UI (on the second row) then triggers the code below, and console logs the data requested based on the component/attributes set in the front-end UI (above).</p>
<pre class="pre--small">function getItemsAndPrintFrontEnd(){
let boardElementId = document.getElementById("boardElementId").value;
if(boardElementId == ""){ boardElementId = null; }
let playerId = document.getElementById("playerId").value;
if(playerId == ""){ playerId = null; }
let cardStatusId = document.getElementById("cardStatusId").value;
if(cardStatusId == ""){ cardStatusId = null; }
let listPositionId = document.getElementById("listPositionId").value;
if(listPositionId == ""){ listPositionId = null; }
let itemOrCard = document.getElementById("itemOrCardData").value;
getItemsAndPrint(boardElementId, playerId, cardStatusId, listPositionId, itemOrCard);
}</code></pre>
<p>getItemsAndPrint() is called with the item/entity data from the front-end.</p>
<pre class="pre--small">function getItemsAndPrint(boardElementId = null, playerId = null, cardStatusId = null, listPositionId = null, itemOrCard = 'item'){
let items = board.getItems(boardElementId, playerId, cardStatusId, listPositionId);
if(itemOrCard == 'card'){
console.log('----- CardData -----');
printCardData(items);
}else{
console.log('----- ItemData -----');
printECSData(items);
}
console.log('Items array length: '+items.length);
}</code></pre>
<p>The above then calls one of printCardData() or printECSData() depending on what I need.</p>
<p>ECS data returns the data stored in each of the attributes/components for each of the items requested.</p>
<pre class="pre--small"><code>function printECSData(items){
for(let item = 0; item &lt; items.length; item++){
let itemKey = items[item];
console.log(
'itemId: '+itemKey+"\n"+
'boardElement: '+boardElement[itemKey]+"\n"+
'cardData: '+cardData[itemKey]+"\n"+
'position: '+position[itemKey]+"\n"+
'size: '+size[itemKey]+"\n"+
'cardStatus: '+cardStatus[itemKey]+"\n"+
'player: '+player[itemKey]+"\n"+
'listPosition: '+listPosition[itemKey]+"\n"+
'cardFace: '+cardFace[itemKey]
);
}
}</code></pre>
<p>And Card data returns an easier to read array of the cardData for each item requested. This will be the 'base' cardData, as all the elements within the card will eventually be changed into components/attributes so they can be easily altered without changing anything directly in the cardData.</p>
<pre class="pre--small"><code>function printCardData(items){
let cardArray = [];
for(let item = 0; item &lt; items.length; item++){
let itemKey = items[item];
cardArray.push(cardData[itemKey]);
}
console.log(cardArray);
}</code></pre>
<h2>Future Debugging</h2>
<p>When I decide it's needed I will be adding more debugging functions, that will be used to trigger events, switch turns, play cards, view opponents hand/deck, etc. All of these will be to make development and testing easier, but for now I'd rather spend the time fleshing out the game itself.</p>
<p>There will be DB debug tools, and a toggleable option for me to return logs from each server call in the future, when the code finally gets migrated from front-end to back-end so that I can continue to debug as-if I was working front-end, just with a little more overhead.</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>

@ -1,59 +0,0 @@
<!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>Project 1: Spreadsheet GDD</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1 style="font-size: 2.4rem">Project 1: Spreadsheet GDD</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">
<p>Since starting development of this project I had vague ideas of what the mechanics would be, the overarching theme, and the background for it. These things weren't however completely thought through, so I opted to start some kind of GDD.</p>
<h2>What is a GDD?</h2>
<p>It can vary, but a GDD (Game Design Document) is a 'living' document that contains all the mechanics, designs, plans for UI/UX, the story, characters, etc. Essentially, if it's going to be in the game, it's in the GDD, along with any research regarding the rational.</p>
<h3>Living?</h3>
<p>The 'living' here means that the document changes and gets updated along with the game, if a mechanic is changed in the game, it changes in the GDD. The GDD is typically then shown to any partners, etc. to show them the progress, and let them note any changes they think would be beneficial.</p>
<p>A GDD is typically a large word doc, so with this in mind, I didn't use a GDD in the standard sense.</p>
<h2>Why not use a standard GDD?</h2>
<p>I wanted someplace to throw all my ideas, future plans, mechanics, etc. and keep in a uniform location, and to check, and amend each thing with more ease than a standard document, and to be able to pre-plan (and in some instances test) development changes before coding them in.</p>
<p>This let to creating a google sheet to throw all my basic ideas into, that I can then flesh out organically, and quickly as they evolve.</p>
<p>The main difference between a sheet, and doc, is the speed at which I can edit, update, and add notes, along with comparing against my older concepts to decide what should make it into the game, and my development.</p>
<h2>The Spreadsheet</h2>
<p>This game is an exercise in three things I enjoy, the <em>game genre</em> itself (and within that mechanics, and balancing), development, as it's intended as a PC game first which I'm doing with 'realtime' server side <em>development</em> that's new to me. The third thing is <em>world building</em> and writing lore, so that the world of my game feels real and alive.</p>
<p>The spreadsheet itself currently consists of numerous tabs to facilitate for notes for completed, incomplete, and future plans for each of the mechanics, balancing, development notes, and lore/world building with them overlapping when needed.</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>

@ -1,78 +0,0 @@
<!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>Project 1: The Stack, and Rooms</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Project 1: The Stack, and Rooms</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">
<p>The plan is to make a multiplayer PvP game, with defined turns, and per-player customisable elements.
I'm being a little vague, but I'm sure you can figure it out from that.</p>
<h2>The Stack</h2>
<p>First I needed to select a stack I could use for this, with decent documentation to starting off an async multiplayer experience.</p>
<p>After looking about I landed on a JS stack consisting of JS, and HTML Canvas for the front-end, and JS, NodeJS, SocketIO, and MySQL for the back-end. This stack should allow me to work on the game itself, rather than look into TCP interfacing (which may be simple, but I have enough stuff on at current to not want to look into this, at least for the time being).</p>
<h2>Rooms</h2>
<p>To get the swing of the multiplayer aspect, I opted to start with rooms.
Well that, and the Socket.IO guide I used to start this off with had basic room functionality (add player to room, start the game, etc).</p>
<h3>What is a Room?</h3>
<p>
A room/instance (in my project at least), is a means to have multiple game instances running on the same server. Since there will be XvX players during a game, but there can be more than 2X players on the server, the servers resources can be better utilised by running many smaller instances, that manage themselves on the host.
</p>
<h3>Current Room Functionality</h3>
<p>
Each room will eventually manage the state of the game being played in said room. For the time, I currently have a room in the most basic form, it has a count of the players in said room, a specific (non-unique) identifier, and name. As I mentioned, very basic, but it sets the field for what will be needed in the future.
</p>
<p>
Along with the room itself, I have a number of helper functions that are triggered in the client with socket emits, and return data to the client from the server with socket.to, and socket.on.
</p>
<p>These helper functions include:</p>
<ul>
<li>Requesting all existing rooms</li>
<li>Creating a new room (if there is space to do so)</li>
<li>Joining an existing room via ID (again if there is space to do so)</li>
</ul>
<p>
The first two are near-final I assume, but joining a room currently just uses a numeric counter to log the players already connected, so it allows the same player to join the same, and multiple different rooms at the same time. This will be changed later down the line, but for now there's a decent proof-of-concept to show me that what I want it feasible without too much difficulty.
</p>
<p>Next up is <a href="/blog/p1-basic-drawing-and-interaction.html">Basic Drawing and Interation</a>.</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>

@ -1,67 +0,0 @@
<!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>Prioritising my project</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Prioritising my project</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">
<p>It's Friday, so according to my last article, I should have something posted for you.</p>
<h2>Ok, and?</h2>
<p>Well, I do have something, this post. This however is more-so, a last second realisation that
I should post something.</p>
<p>Today, I've been working on a project of mine. It's a secret for now, until I have something to show,
otherwise I won't complete it, or have it anywhere near. I know this because I originally started it 1-2 years ago.
</p>
<h2>Why are you back on it?</h2>
<p>It's a project I wanted to work on for a while. I am <em>not</em> however "back on it", I started from scratch, as I couldn't
remember where I was, or what was what. Thankfully (kind of), I didn't get far on before.
</p>
<p>I may keep y'all updated on this, on my blog, or elsewhere on my site once I get somewhere. I was thinking,
perhaps I could do updates every week or so, but of something I did a few weeks prior to then.</p>
<h2>What about other content?</h2>
<p>That's why I opted to write this. Just a quick bit to let you know what's occuring, as I may not post articles for a while, or
may seem to be 'ignoring' my site again. I kind of will be, but there is reason, and I hope it goes somewhere, or leads to
other projects/tasks getting done!
</p>
<p>Thanks for reading, and understanding. Apologies if this is a terribly written article, I have written in in 5-10 minutes in the midst
of working on the project I mentioned.
</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>

@ -1,113 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="I've taken down my homelab during the energy crisis in the UK, and have mitigated the loss of this by migrating services to alernate locations, and low power hardware.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Reducing my Homelab</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Reducing my Homelab</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">
<section>
<p>Homelabbing, and with it self-hosting, has been a great exploration into server maintance, dabbling with new technologies, and has overall (sometimes it's been a hassle, but it comes with the territory) been an enjoyable little hobby.</p>
<p>As the title implies, however, I have reduced the amount of services, and horsepower in my homelab, at least for the time being, starting from 24/09/2022.</p>
<h2>Why?</h2>
<h3>Energy costs a lot now</h3>
<p>With the increase of gas/electric prices many households (including my own), have been looking at ways of reducing their bills, especially with Winter approaching, and the knowledge that there will be more usage in the coming months.</p>
<p>Couple this with the already inflated cost-of-living, this is making it less, and less sustainable for me to run devices 24/7, as I cannot justify the expenditure.</p>
<h3>I want to go nomadic</h3>
<p>Looking on the brighter-side, a big thing in my mind at the moment, is wanting to travel around one-bagging for as long a period as I can. So paring down my belongings is already something I'm doing, as ideally I only own what I need, and what can be easily stored for when I get back into renting a place. Storing multiple PCs is much harder than a couple of Raspberry Pis.</p>
<h3>Reliability of my public services is iffy</h3>
<p>With my in-home self-hosting there were always a couple of pitfalls, but I was happy to deal with these.</p>
<p>First, my IP isn't static, so when the ISP decides it's time for a new IP, boom. I've then got to change my DNS settings for my domains to keep things up.</p>
<p>Second, it's not a fantastic connection as-is. I will randomly get hit by blips of no internet throughout the day, which takes the services offline for however-long, sometimes multiple times a day.</p>
<h2>What does this actually entail?</h2>
<p>I've taken lilman, my last remaining server, out-of-comission for the time being (just after upgrading to 32GB RAM...), and have popped two RPIs in my shed in it's stead to cover my in-home needs for hosted services. I've also migrated services that are exposed to the web to the VPSs I already owned, and I'm also looking at Oracle's Always Free tier to migrate some of my game servers to (although credit card validation is playing with me).</p>
<h2>What's happened with services?</h2>
<p>So you may be wondering what's to happen with the services I was previously self-hosting at home. Some things, such as virtualisation, and any testing environments have been taken away, but for others they've been migrated around.</p>
<h3>In-home</h3>
<p>Of course there are some things that I want/need to keep at home, these services primarily come down to those that deal with files, and don't require internet access, however there are some outliers to this rule.</p>
<h4>NAS (OMV)</h4>
<p>To maintain access to my files needed to work, my ISOs, my media collection, etc. I've setup a RPI3B+ (nasberrypi) as a NAS, connected to my 4TB HDD via an externally powered SATA hub. This is the only real "essential", as I can access these files on a laptop, and easily watch, edit, etc.</p>
<h4>VPN</h4>
<p>If I want to access my services, and namely my NAS from outside of my network, I need a VPN. This is on the RPI3B+, as the only thing alongside the NAS in case I opt to just maintain the NAS.</p>
<h4><s>Jellyfin</s></h4>
<p><s>I watch media, and Jellyfin was the best option I found quite a while back. I've read it works well on RPIs, so I'm giving it a go on a seperate RPI3B (mediapi). So far though, it's not performing very well, but I'll struggle with it for the time being.</s></p>
<h4><s>Adguard</s></h4>
<p><s>Whilst I still have an internet connection, I'd like to keep blocking wanky ads. This is on the 3B.</s></p>
<h4><s>Nginx</s></h4>
<p><s>Not for websites, but for the proxy-pass functionality, so that I can safely share my Jellyfin, etc. instances over the web. On the 3B.</s></p>
<h4><s>AirSonic (New)</s></h4>
<p><s>Trying out AirSonic, as I'd like to play my own music when, and wherever, whilst having the actual files stored in case of no interwebs. On the 3B.</s></p>
<h4>OSMC (instead of Jellyfin)</h4>
<p>My second Pi will likely just be an OSMC box, with media mounted from the NAS, as it seems like the best way to get anything to work. I don't really need to stream to my laptop/phone, just using the TV in the living room seems a better option for an intential lifestyle. Although, I do still want to see about music streaming.</p>
<h3>VPSed</h3>
<p>The services I've migrated to my already exisitng VPSes (to go along with what they already hosted), are those which are internet accessed, and need additional reliability.</p>
<h4>Webserver</h4>
<p>I've migrated <a href="https://aney.co.uk" target="_blank" rel="noopener">aney.co.uk</a> and <a href="https://anetwork.uk" target="_blank" rel="noopener">anetwork.uk</a> to my American VPS that hosts my node applications, obviously this makes my sites slower (in the UK), but I'll take what I can get for now, and maybe get a new UK based VPS in the future.</p>
<h4>Git</h4>
<p>Git has been migrated to my off-site backup server. The logic behind this is that I'll have my repos checked-out, and with more up to date code than on the server, so this is alright. The performance difference here isn't noticable to me currently, which is nice.</p>
<h3>Oracle VM (Maybe)</h3>
<p>As I stated, this still isn't a guarantee, but if I opt to get game servers back online, the Oracle always free tier will be my first option. Who knows, when you're reading this I could have <a href="https://anetwork.uk" target="_blank" rel="noopener">aNetwork</a> entirely running on an Oracle VM instead of offline, like it is without lilman.</p>
<h2>Possible Changes</h2>
<p>Two come to mind right at the beginning of this "experiment".</p>
<ol>
<li>Putting lilman back in the driver seat. I've moved some services off of the device, but for my media consumption the 3B isn't cutting it. With this, getting lilman set back up is probably the idea, either that or setting up a thinkpad as a server that's not always on.</li>
<li>Just having a NAS. I may just keep the 3B+ as a NAS, and set the other Pi up as a client, with OSMC. This way I can mount the files, and watch them on the TV. A little annoying that I won't be able to stream from laptops/phones, but it could be better like that anyway. This has been opted for currently.</li>
</ol>
<p>If I remember to do so, I'll make a new post, or some edits to this, in regards to how this downsizing is going, and if it's overall a positive, or negative experience.</p>
<h2>Will you go back to hosting at home?</h2>
<p>Yes (most probably, I could find I love the low-end setup though), assuming one of two things.</p>
<ol>
<li>That energy gets decoupled from gas prices, and/or gets reduced to a non-stupid amount, so that I can keep multiple servers running without breaking bank.</li>
<li>I can build a super efficient lab, probably with "mobile" hardware, and a little additional undervolting. This one is also a lead into wanting to be more self-sufficient, so it'd ideally pair with solar panels, etc. to keep the lab going.</li>
</ol>
</section>
</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>

@ -1,128 +0,0 @@
<!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>

@ -1,78 +0,0 @@
<!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>Return of the Me</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Return of the Me</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">
<p>It's been a little while, but I've returned, at least for a while.</p>
<h2>Where did you go?</h2>
<p>I just got pre-occupied with life, namely work and the general stresses of it all.
The website, my projects, and personal development took a large hit, and I sort of just, fell off.
I had a bunch of cool things planned, which I'm going to ignore until I can get back into the swing of writing
for the site, but once I can get back to it I'll be doing some fancy bits.
</p>
<h2>What's the plan?</h2>
<p>The focus for now will be to add new content to the site in the form of <a href="/guides">guides</a>, <a href="/recipes">recipes</a>, and <a href="/blog">articles</a>.
I'll be trying to get two 'posts' of those varieties out a week, on mondays and fridays (hey look, this is one of them). And I have done this for a little while already, however I'm already starting to struggle with this.
</p>
<ul>
<li><a href="/guides/linux-file-permissions.html">Linux File Permissions</a> Guide</li>
<li><a href="/guides/docker-install.html">Docker Installation</a> Guide</li>
<li><a href="/guides/linux-acl.html">Linux ACL</a> Guide</li>
<li><a href="/recipes/protein-oat-cookies.html">Protein Oat Cookies</a> Recipe</li>
</ul>
<p>When I get comfortable making the weekly posts, I'll be going back through the 'existing' articles that I've left unfinished, or just there with no content, and finish those up.
Then I'll be making improvements to the site such as adding some new content, and also re-focussing on my <a href="/projects.html">projects</a>, especially those not currently listed.
</p>
<h2>Sellout!</h2>
<p>There are now affiliate links around the site to attempt to get a little cash.
I'm not expecting a lot, or really anything from them, and I'm not intending to make them obstrusive at all,
but if I reference a service, item, etc. I will throw a link to it, and if I can I will use an affiliate code within the link.
</p>
<p>I'm also going to be adding some Javascript too, only a tiny bit to improve the user experience, things such as code snippet copying and basic filter searching on articles, et cetera.
<h2>Why are you back?</h2>
<p>This website is something I wanted to do, and I still do. My lack of energy for it doesn't mean I want to stop working on it.</p>
<p>If all goes well, I'd love to prioritise the site, and ideally start my own web-dev pursuit instead of working for someone else, so we'll see.</p>
<p>If you're reading this, and visit my site at all, thank you.</p>
</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>

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Web Bloat">
<meta name="description" content="The web has become bloated, and inaccessible to many, but continues to head that way. As a collective we need to address the issue, and change this.">
<meta name="keywords" content="internet, web, website, bloat">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Web Bloat</title>
</head>
<body>
<header>
<h1>Web Bloat</h1>
<hr/>
<nav>
<a href="/">home</a>
<a href="/equipment.html">equipment</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>
<section>
<p>The world wide web was designed to be an <a href="https://www.w3.org/People/Berners-Lee/1996/ppf.html">interactive world of shared information</a>. Of course, like everything the web has evolved, and now serves practically everything, from informational sites, to assorted media, and even full fledged applications! With these changes to the web, things have become a little, <em>bloated</em>.</p>
<h2>What is web bloat?</h2>
<blockquote><p>Websites, and pages that are unneccesarily larger than the content they provide.</p></blockquote>
<p>This can be seperated into two main points:</p>
<ul>
<li>The overall webpage filesize is far too high for the content it provides.</li>
<li>The real content the webpage offers is too little, and overshadowed by all the meaningless 'content'/anti-user bloat surrounding it.</li>
</ul>
<h2>Why is Web Bloat a problem?</h2>
<h3>Filesize is too damn high</h3>
<p>This is the main concern for most when it comes to web bloat, and for good reason.
<p>Webpage filesizes have increased by about <a href="https://httparchive.org/reports/page-weight?start=2011_10_01&end=latest&view=list">3 times (desktop) and 8 times (mobile) the size in the last 10 years</a>, which is fine for most internet users, but not everyone's network speeds have been able to keep up, preventing them from accessing many pages.</p>
<blockquote><p>Just because the average person can climb the steps to your store, doesn't mean you should forget about accessibity for those who can't.</p></blockquote>
<h3>Content isn't king/Anti-user bloat</h3>
<p>Many sites have actively chosen to make their marketing, advertising, huge images, auto-playing hero videos, and other non-content (i.e. anti-user bloat) more inportant than the content itself. Not only is this bad from a user experience perspective, as it distracts from the content, but also for filesize, as much of this (bloat) could be omitted, or at the least optimised.</p>
<p>An example of this <em>anti-user bloat</em> are seemingly innocent pages that greet users with a mass of adverts, and popups that obstruct the information. That's alone is bad enough, but sometimes still the content itself second to, and positioned below other media, articles, and non-content, making it harder to find.</p>
<h2>Who's the culprit?</h2>
<p>The problem here is not that the web allows for better sharing than ever, but with it's evolution, and growth (<a href="https://www.statista.com/statistics/617136/digital-population-worldwide/">4.66 billion</a> users), many websites were created, corners were cut, and trends were followed that has lead to making the web less accessible.</p>
<p>No neccesarily who, but what. And in this case, the what consists of a number of things:</p>
<ul>
<li>Non-text Content/Media</li>
<li>Development Tools</li>
<li>Time Restrictions - Project Leads and Employers</li>
<li>Careless/Thoughtless Development</li>
</ul>
<p>As the tools available for web development inreasing more, and more developers are making use of these to create websites more quickly, and "efficiently".</p>
<p>As an example, over the last 10 years many frameworks have popped up to "standardise" (which I believe is an issue of it's own) and make development faster, typically at the loss of granular control, and optimisation. Don't get me wrong, frameworks can be super useful for large bespoke websites, but...</p>
<h2>What can I do?</h2>
<p>I belive this to be topic upon itself, so I'll be writing another article regarding dechonking the web at a later date. For now focus on thinking about the size of your pages, how long they take to load, and what content is truly important.</p>
<h3>Remove everything un-needed</h3>
<p>If there's anything on the page that doesn't add to the page's focal content, remove it. The big wins here are images, video, and scripts, but styling, and text that adds nothing to page should also be taken out.</p>
<h3>Minimise, compress, and optimise</h3>
<p>For the CSS, JS, and media that has been deemed keepable, make sure it's minified and compressed. Minification is an easy way to make filesize savings with no loss for CSS, and JS; with image compresion being very much the same, just take care not to compress images too much or you may lose some quality.</p>
</section>
<section>
<h2>More...</h2>
<ul>
<li><a href="https://danluu.com/web-bloat" target="_blank" rel="noopener noreferrer ">Dan Luu - Web Bloat</a></li>
<li><a href="https://idlewords.com/talks/website_obesity.htm" target="_blank" rel="noopener noreferrer ">Idle Words - Website Obesity</a></li>
<li><a href="https://mobiforge.com/research-analysis/the-web-is-doom" target="_blank" rel="noopener noreferrer ">MobiForge - The Web is Doom</a></li>
<li><a href="https://speedy.site/website-size-the-average-web-page-size-is-more-than-2mb-twice-the-size-of-the-average-page-just-3-years-ago/" target="_blank" rel="noopener noreferrer ">Speedy Site - Web Page Size</a></li>
<li><a href=https://www.youtube.com/watch?v=3J0SPMFjXvs"" target="_blank" rel="noopener noreferrer ">Go Make Things - The lean web (Youtube) </a></li>
<li><a href="https://www.apica.io/blog/page-bloat-what-should-we-do-about-it/" target="_blank" rel="noopener noreferrer ">Apacia - Page Bloat, what should we do about it</a></li>
</ul>
</section>
</main>
<footer>
<hr/>
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
</footer>
</body>
</html>

@ -1,52 +0,0 @@
/* Form stuff */
/* If I do a CSS framework, it'll need to have a reset too... */
/* e.g. https://github.com/necolas/normalize.css/blob/master/normalize.css
https://byby.dev/normalize-css#:~:text=css%23css%2Dresets-,Normalize.,experience%20for%20each%20web%20browser.
https://www.joshwcomeau.com/css/custom-css-reset/
*/
form{
border:1px solid;
padding: 1rem;
}
input,select,textarea{
font:1.2rem/1.62 sans-serif;color:#556;
border:1px solid #CCC;
}
textarea{
resize: vertical;
}
input,select,textarea{
background: #EEE;
border: 2px solid #556;
box-sizing: border-box;
color: #556;
display: block;
line-height: 1;
vertical-align: top;
transition-duration:.2s;
}
input,textarea{
width:100%;
}
input[type="checkbox"]{
display:inline-block;
}
input:focus,select:focus,textarea:focus {
border-color: #9CF;
}
@media(min-width:720px){
input,select,textarea{
display:inline-block;
max-width:50%; /* so half it can be, with margins factored in... */
max-width:346.8px;
}
input,textarea{
width:auto;
}
}
@media(prefers-color-scheme:dark){
input,select,textarea{
background:#CCC;border-color:#CCC;
}
}

@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The course of life, employment history, and skillset of Aney.">
<meta name="keywords" content="Web Design, Development, Education, Job History, Hobbies">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="green">
@ -14,14 +15,11 @@
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's CV</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="/equipment.html">equipment</a>
<a href="/projects.html">projects</a>
<a href="/blog/">blog</a>
<a href="/sitemap.html">misc</a>
@ -30,59 +28,45 @@
<hr/>
</header>
<main id="main">
<main>
<section id="about">
<h2>About Me</h2>
<p>I'm a helpful and well-mannered person that can work both alone, and as part of a team. I have a willingness to learn, and a proficiency with post-optimisation, and problem-solving. A goal of mine is to always help people to the best of my ability, and to improve myself wherever possible.</p>
<p>I'm a helpful and well-mannered person that can work both alone, and as part of a team. I have a willingness to learn and I have great logical and problem-solving skills. I also aim to help people to the best of my ability, and always attempt to improve myself, and my skills wherever possible.</p>
</section>
<section id="experience">
<h2>Experience/Employment History</h2>
<section>
<h3><a href="https://onlinefulfilmentcentre.co.uk/" target="_blank" rel="noopener">Online Fulfilment Centre</a></h3>
<p>April 2026 - Current </p>
<p>Position: IT Support/Developer</p>
<p>Initially taken on to migrate warehouse management systems from Mintsoft to Helm. This lead to creating custom websites for automations using Helm's API, scripting QOL changes into the system, and assisting clients with all technical aspects, including setting up Zoho CRM schedules to bring in Helm order data.</p>
<p>Skills: <span class="tag">Python</span> <span class="tag">Fast API</span> <span class="tag">Svelte</span> <span class="tag">SvelteKit</span> <span class="tag">Tailwind</span> <span class="tag">APIs</span> <span class="tag">WMSs</span> <span class="tag">Valkey</span> <span class="tag">Redis</span> <span class="tag">Celery</span> <span class="tag">Workers</span></p>
</section>
<section>
<h3><a href="https://www.360ss.com/" target="_blank" rel="noopener">360</a></h3>
<p>May 2023 - April 2026</p>
<p>Position: Developer</p>
<p>As part of the development team at 360, I spend my time working full-stack on the numerous client sites. This is almost entirely using a Laravel stack, with Bootstrap, Jquery, and vanilla CSS.</p>
<p>Skills: <span class="tag">PHP</span> <span class="tag">Laravel</span> <span class="tag">Jquery</span> <span class="tag">Bootstrap</span> <span class="tag">SQL</span></p>
</section>
<section>
<h3><a href="https://www.tjs.co.uk/" target="_blank" rel="noopener">TJS</a></h3>
<p>April 2021 - January 2023</p>
<h3><a href="https://www.tjs.co.uk/" target="_blank" rel="noopener noreferrer">TJS</a></h3>
<p>April 2021 - Current</p>
<p>Position: Developer</p>
<p>My time at TJS online was spent developing, and maintaining both the front, and back-end of the dozens of client websites, primarily using a Symfony based stack. This also entailed working with the databases, and ensuring service, and cronjob uptimes.</p>
<p>My time at TJS online is spent developing, and maintaining both the front, and back-end of the dozens of client websites, primarily using a Symfony based stack.</p>
<p>Skills: <span class="tag">PHP</span> <span class="tag">Symfony</span> <span class="tag">SCSS</span> <span class="tag">Git</span> <span class="tag">Linux</span> <span class="tag">NGINX</span> <span class="tag">SEO</span></p>
</section>
<section>
<h3><a href="https://www.advantage-finance.co.uk/" target="_blank" rel="noopener">Advantage Finance Ltd</a></h3>
<h3><a href="https://www.advantage-finance.co.uk/" target="_blank" rel="noopener noreferrer">Advantage Finance Ltd</a></h3>
<p>Time: October 2018 - March 2021</p>
<p>Position: System Developer and Technician</p>
<p>I worked as part of the DevOps team at the car financing company, Advantage Finance. Whilst there I worked full-stack on the numerous bespoke systems; adding features, working on bug fixes, and rewriting legacy code for both desktop and web applications. I also assumed the position of IT support, aiding with general AD and PC issues, along with assisting in the training of new starters.</p>
<p>Skills: <span class="tag">VB6</span> <span class="tag">VB.net</span> <span class="tag">ASP&nbsp;Classic</span> <span class="tag">SVN</span> <span class="tag">SQL</span> <span class="tag">Active&nbsp;Directory</span></p>
<p>I worked as part of the DevOps team at the car financing company, Advantage Finance. Whilst there I worked full-stack on the numerous bespoke systems; adding features, working on bug fixes and rewriting legacy code for both desktop and web applications. I also assumed the position of IT support, aiding with general AD and PC issues, along with assisting in the training of new starters.</p>
<p>Skills: <span class="tag">VB6</span> <span class="tag">VB.net</span> <span class="tag">ASP Classic</span> <span class="tag">SVN</span> <span class="tag">SQL</span> <span class="tag">Active Directory</span></p>
</section>
<section>
<h3><a href="https://www.oxfam.org.uk/" target="_blank" rel="noopener">Oxfam</a></h3>
<h3><a href="https://www.oxfam.org.uk/" target="_blank" rel="noopener noreferrer">Oxfam</a></h3>
<p>Time: January 2014 - September 2018</p>
<p>Position: Volunteer</p>
<p>While at the renowned charity organisation’s shop I handled a multitude of tasks; ranging from working the till, cash handling, tidying and stocking the shop. I was also entrusted with additional tasks such as making bank deposits, opening the shop, and supervising Saturday’s staff. I enjoyed holding conversations with the customers, learning the familiar faces, and helping everyone feel welcom in the shop.</p>
<p>While at the renowned charity organisation’s store I handled a multitude of tasks; ranging from working the till, cash handling, tidying and stocking the shop. I was also entrusted with additional tasks such as making bank deposits, opening the store and supervising Saturday’s staff tasks. I also enjoyed holding conversations with many of the customers, helping them feel welcome in the store.</p>
</section>
<section>
<h3><a href="https://www.tesco.com/" target="_blank" rel="noopener">Tesco</a></h3>
<h3><a href="https://www.tesco.com/" target="_blank" rel="noopener noreferrer">Tesco</a></h3>
<p>Time: March 2014 - April 2014</p>
<p>Position: Personal Picker</p>
<p>Whilst on the Prince's Trust I did a month’s work experience at a large Tesco shop. This involved making 'picks' that were all completed without any errors or customer complaints. I also assisted a number of customers find their desired products and way around the shop.</p>
<p>Whilst on the Prince's Trust I did a month’s work experience at a large Tesco store. This involved making 'picks' that were all completed without any errors or customer complaints. I also assisted a number of customers find their desired products and way around the shop.</p>
</section>
<section>
<h3>Lake Marketing and Events</h3>
<p>Time: January 2013 - December 2013</p>
<p>Position: (Apprentice) Graphic Designer</p>
<p>During my apprenticeship I designed a multitude of various prints such as posters, business cards, flyers, etc. for a wide array of local and regional businesses ranging from small start-ups to larger brands such as <a href="https://www.subway.com/en-GB" target="_blank" rel="noopener">Subway</a>. I also designed, and wireframed a number of websites, and aided in the development of a few; including the company's own website, and the Lincolnshire Food Festival’s using Wordpress.</p>
<p>During my apprenticeship I designed a multitude of various prints such as posters, business cards, flyers, etc. for a wide array of local and regional businesses ranging from small start-ups to larger brands such as Subway. I also designed, and wireframed a number of websites, and aided in the development of a few; including the company's own website, and the Lincolnshire Food Festival’s using Wordpress.</p>
<p>Skills: <span class="tag">Photoshop</span> <span class="tag">Illustrator</span> <span class="tag">Wordpress</span></p>
</section>
</section>
@ -97,7 +81,7 @@
</section>
<section>
<h3>Misc</h3>
<h4><a href="https://www.princes-trust.org.uk/" target="_blank" rel="noopener">Prince's Trust</a></h4>
<h4><a href="https://www.princes-trust.org.uk/" target="_blank" rel="noopener noreferrer">Prince's Trust</a></h4>
<p>Time: April 2014 - July 2014</p>
</section>
<section>
@ -136,14 +120,14 @@
<section id="contact">
<h2>Contact</h2>
<p>If you like what you see, feel free to contact me via:</p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/nathan-steel-a72247267/" target="_blank" rel="noopener">Nathan Steel</a></p>
<p>If you like what you see, feel free to contact me via one of the methods below:</p>
<p><a href="mailto:the.nathan.steel@outlook.com">the.nathan.steel@outlook.com</a></p>
</section>
</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>
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
</footer>
</body>
</html>

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Aney's computing equipment, and hardware">
<meta name="description" content="A collection of the hardware, and other tools used by Aney, to work, and create">
<meta name="keywords" content="Equipment, Technology, Hardware, Computing">
<meta name="author" content="Nathan (Aney) Steel">
@ -10,19 +11,16 @@
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Computing equipment, and Hardware</title>
<title>Hardware</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's Hardware</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="/equipment.html">equipment</a>
<a href="/projects.html">projects</a>
<a href="/blog/">blog</a>
<a href="/sitemap.html">misc</a>
@ -31,107 +29,83 @@
<hr/>
</header>
<main id="main">
<main>
<section>
<h2>My everyday tech</h2>
<p>This is what I use basically every day. It's either at my desk, in my bag, or within arms reach.</p>
<section id="pc">
<h3>Daily Driver</h3>
<p>I use a Dell Pro 14 Plus PB14250, with an Intel Ultra 5 235U, 32GB RAM, and a 240GB NVME, running Fedora, with PaperWM.</p>
<h3>Laptop - Thinkpad x220</h3>
<p>My everyday driver is a Thinkpad x220, specced with an i5 2540m, 6GB RAM, and a 500GB EVO 860 mSata SSD. It typically runs Debian with dwm, but since I've been having problems with my arm, it's been running Pop!_OS like a champ.</p>
<p>I use this laptop for practically everything, and it performs well for my use-cases whether docked at my desk, or standalone for travels.</p>
<h4>X220 Docking Station</h4>
<p>When I'm at home, I typically stay docked to this station as it has all my ports pre-plugged, and an additional 500GB HDD (which I don't use). This makes it easy to switch between working at the desk, and lounging on the seatee/bed.</p>
</section>
<section id="peripherals">
<h3>Peripherals</h3>
<ul>
<li>Secondary Monitor: <a href="https://amzn.to/3Wgjq7f" class="ref" target="_blank" rel="nofollow noopener">ARZOPA Portable Monitor, S1 Table 15.6" 1920x1080</a></li>
<li>Monitor Stand: <a href="https://amzn.to/460Rl73" class="ref" target="_blank" rel="nofollow noopener">Urlixin Tablet Stand</a></li>
<li>Mouse: <a href="https://amzn.to/3zLwF6T" class="ref" target="_blank" rel="nofollow noopener">Logitech MX Master 3</a></li>
<li>Laptop Stand: <a href="https://amzn.to/3xRpYQa" class="ref" target="_blank" rel="nofollow noopener">K-MART adjustable laptop stand</a></li>
<li>Using a deskmat from Helm's promo pack</li>
<li>Charger: <a href="https://amzn.to/3WiQtGH" class="ref" target="_blank" rel="nofollow noopener">Anker Nano II</a> and a <a href="https://amzn.to/4cW6Qzk" class="ref" target="_blank" rel="nofollow noopener">3M Anker 100W USB-C Cable</a></li>
</ul>
<p>Monitor: Philips E-Line 227E4LHAB 21.5" LCD</p>
<p>Keyboard: Razer Blackwidow Lite</p>
<p>Mouse: Logitech MX Master</p>
<p>Microphone: Blue Yeti</p>
<p>Speakers: Logitech Z200</p>
<p>Backup USB: 64GB Sandisk</p>
</section>
<section id="misc">
<h3>Misc.</h3>
<ul>
<li id="mobile">Mobile: <a href="https://amzn.to/3zD1Npl" class="ref" target="_blank" rel="nofollow noopener">Google Pixel 8a</a></li>
<li>Phone Stand: <a href="https://amzn.to/3S0ANGy" class="ref" target="_blank" rel="nofollow noopener">Eono/LinkRich Stand</a></li>
<li id="powerbank">Power Bank: <a href="https://amzn.to/3Wgi4tb" class="ref" target="_blank" rel="nofollow noopener">Anker PowerCore III</a> 19K</li>
<li>Travel Adapter: <a href="https://amzn.to/4cCdaMM" class="ref" target="_blank" rel="nofollow noopener">MOMAX 70w Universal Travel Adapter</a></li>
<li id="speakers">Bluetooth Speaker: <a href="https://amzn.to/3VKp7d6" class="ref" target="_blank" rel="nofollow noopener">Soundcore Mini 3</a></li>
<li>Bluetooth Earphones: Kovebble Bluetooth Headphones</li>
<li>3.5mm Earphones: <a href="https://amzn.to/3LiteY1" class="ref" target="_blank" rel="nofollow noopener">Blukar Headphones</a></li>
<li>USB C Hub: <a href="https://amzn.to/4cPCjTK" class="ref" target="_blank" rel="nofollow noopener">Lemorele 6-in-1</a></li>
<li>Cables: 5 assorted lengths of USB-A/USB-C to USB-C cables</li>
<li>Adapter: Google USB A to USB C adapter (comes with phone)</li>
<li>Seconday SD: 16GB MicroSD (with microSD to SD adapter)</li>
<li>Router: <a href="https://amzn.to/3Rsjlu8" class="ref" target="_blank" rel="nofollow noopener">TP-Link AX3000</a></li>
<li>PowerLine Adapter(s): <a href="https://amzn.to/3Rsjlu8" class="ref" target="_blank" rel="nofollow noopener">TP-Link Passthrough</a></li>
</ul>
<p id="mobile">Mobile: Google Pixel 4a</p>
<p id="powerbank">Power Bank: 10,000mAh PowerAdd Pilot 2GS</p>
<p>Wireless Earphones: Besdio something</p>
</section>
</section>
<section id="gaming">
<h2>Gaming</h2>
<h3>Custom PC</h3>
<p>i5-6500, RTX 2060s, 240GB SSD, 16GB RAM</p>
<p>It plays Smite 2 and HS Battlgrounds fine, so it's fine</p>
<h3>Steam Deck</h3>
<p>I also have a 256GB Steam Deck (Original), with a 512GB SD card, for couch, and chill games. This is often accompied (for couch gaming) with a PS4 controller, and a Dock.</p>
<section id="gaming-pc">
<h2>Gaming PC</h2>
<p>Red, a custom built machine sporting an R5 2600X, 16GB RAM, a 500GB EVO 970 NVME, and a Vega 64. This is my only device running Windows.</p>
<p>I don't use this anywhere near as much as I used to, but when I want to play a game I've got this PC that I know will perform, regardless of the title.</p>
<p>I am heavily considering selling it when the <a href="https://store.steampowered.com/steamdeck" target="_blank" rel="noopener noreferrer">Steamdeck</a> releases, however.</p>
</section>
<section id="media">
<h2>Media Consumption</h2>
<p>Youtube, and other 'non-regular' media is watched straight or phone before bed basically.</p>
<p>As for music I use my phone connected to my <a href="https://amzn.to/3VKp7d6" class="ref" target="_blank" rel="nofollow noopener">Soundcore Mini 3</a>, or just listen from my laptop.</p>
<section id="tv">
<h3>TV</h3>
<p>A basic non-smart TV from years back. I got it for my 16th Birthday, 10 years ago.</p>
<h4>Fire TV Stick 4K</h4>
<p>Since my TV is useless alone, and I don't watch traditional television, this is plugged in to give me access to Netflix, Amazon Video, Crunchyroll, and Jellyfin.</p>
</section>
<section id="music">
<h3>Amazon Echo 3</h3>
<p>I don't use this for anything other than playing music. It stays next to the TV waiting for me to say "Alexa, play <a href="https://youtu.be/6Zbi0XmGtMw?t=27" target="_blank" rel="noopener noreferrer">We like to party, by the Vengaboys</a>."
</section>
</section>
<section id="servers">
<h2>Servers</h2>
<section>
<h3>Local/Physical</h3>
<p>pi1: <a href="https://amzn.to/3Liy8En" class="ref" target="_blank" rel="nofollow noopener">Raspberry Pi 5 8GB</a>, with an NVME board, and 256GB NVME, and <a href="https://amzn.to/3RsTy5f" class="ref" target="_blank" rel="nofollow noopener">4TB Seagate BarraCude HDD</a> connected by a <a href="https://amzn.to/3Xp8Uvc" class="ref" target="_blank" rel="nofollow noopener">WavLink Sata Dock</a>.</p>
<h3>lilman</h3>
<p>An HP 290 G1 MT, with an i5-7500, and 8GB RAM. This is my primary server, although I've still yet to get around to migrating services from rpi3.</p>
</section>
<section>
<h3>Offsite/VPS</h3>
<p>rn3: <a href="https://my.racknerd.com/aff.php?aff=8453" class="ref" target="_blank" rel="nofollow noopener">Racknerd</a>, 2C, 2.5GB RAM, 40GB SSD</p>
<p>av1: <a href="https://alphavps.com/clients/aff.php?aff=754" class="ref" target="_blank" rel="nofollow noopener">AlphaVPS</a>, 1C E5, 512M RAM, 128GB HDD</p>
<p>dedirock: 1C, 2GB RAM, 30GB SSD</p>
<p>servitro: 2C, 4GB RAM, 50GB SSD</p>
<h3>rpi3</h3>
<p>A Raspberry Pi 3B+ that's running my webserver, and gitserver, alongside a few docker containers. It's a pretty swell device, and I may very well start a cluster with it when I get the chance.</p>
</section>
</section>
<section id="unused">
<section>
<h2>Unused/Spares</h2>
<p>Besides what I've listed, I also have the following;</p>
<ul>
<li>Thinkpad x200</li>
<li>Thinkpad x201</li>
<li>Thinkpad x220</li>
<li>Thinkpad t420</li>
<li>Raspberry Pi 4 4GB</li>
<li>Raspberry Pi Zero W</li>
<li>Blue Yeti (and mic stand)</li>
<li>2x Switches</li>
<li>Spare router</li>
<li>Generic router provided by ISP</li>
<li>Previous laptop. Latitude 7320 with i7-1185G7, 16GB RAM, 512GB NVME</li>
</ul>
<p>I go through hoarding phases unfortunately, so besides what I've listed, I also have; 5 other PCs of various specs, a 1U server, 4 more laptops (3 of which are Thinkpads), and a RPI 3B. Out of these, I intend to keep two PCs, the 3 thinkpads, and the RPI3.</p>
</section>
</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>
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
</footer>
</body>
</html>

@ -1 +0,0 @@
google-site-verification: google8a330c8201b08f7e.html

@ -1,65 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="To avoid using an IP, this guide will help you point your domain name at your server.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Link your domain name to your server</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Link your domain name to your server</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">
<section>
<p class="intro">To avoid needing to remember an IP, this guide will help to link your domain name to your server. It assumes you have already <a href="/guides/get-a-domain-name">attained a domain name</a>.</p>
<h2>Login to your domain name registrar</h2>
<p>Login to the registrar, and select the domain name you want to point at your server.</p>
<h2>Find the section for DNS</h2>
<p>The domain name should have a section named, "DNS", "Custom DNS records", or something similar to this. Find, and open it, there should be a bunch of boxes and an option to add a new record.</p>
<h2>Add the A record</h2>
<p>Find the box that allows you to "Add a new record" and input the below, changing <IP> and <DOMAIN> with your IP address, and domain name.</p>
<pre><code>&lt;DOMAIN&gt; A 86400 &lt;IP&gt;</code></pre>
<h2>Wait for propagation</h2>
<p>Now there's a bit of a waiting game, as you need to wait for the new DNS record to propagate (get updated) for all nameservers. This can be anywhere from instantly to 72 hours, but typically takes an hour or two.</p>
<h3>Check your domain has propagated</h3>
<p>Pinging the domain name will let you know when the IP has propagated, as when the ping command shows your IP, you're all set.</p>
<pre><code>ping -c 3 domainname.com</code></pre>
</section>
</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>

@ -1,74 +0,0 @@
<!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="keywords" content="Blog, articles, guide, php, nginx">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Adding PHP to NGINX server</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Adding PHP to NGINX server</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">
<section>
<p class="intro">PHP is one of the highest used programming languages for websites, and it allows you to add practically any functionality you'd ever want to your sites.</p>
<h2>Install</h2>
<pre><code>sudo apt install php-fpm</code></pre>
<p>If you want to work with mysql, then you also need to install <strong>php-mysql</strong>.
<h2>Add to Website's NGINX conf</h2>
<p>For each website you want to use php, you'll need to edit the config file.</p>
<pre><code>sudo vim /etc/nginx/sites-available/<WEBSITE></code></pre>
<p>The following code needs adding within the <strong>server</strong> block.</p>
<pre><code>location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php&lt;VERSION&gt;-fpm.sock;
}</pre></code>
<p>This will use nginx's fastcgi-php.conf snippet which is more secure by default than many other php/nginx configs because it 404s if the requested file doesn't exist. Read Neal Poole's <q><a href="https://nealpoole.com/blog/2011/04/setting-up-php-fastcgi-and-nginx-dont-trust-the-tutorials-check-your-configuration/" target="_blank" rel="noopener">Don't trust the tutorials</a></q> for more info.</p>
<h2>Reload NGINX</h2>
<pre><code>sudo systemctl reload nginx</code></pre>
<h2>Test it works</h2>
<p>Create a PHP file e.g. <strong>filename.php</strong> in the website's directory, and add the snippet below into it.</p>
<pre><code>&lt;?php phpinfo(); ?&gt;</code></pre>
<p>Go to that webpage in your browser e.g. <strong>domain.co.uk/filename.php</strong>, and if php is working you should see a dump of your PHP's version, headers, etc.</p>
<h2>Make nginx use index.php as homepage/root</h2>
<p>Now we'll set nginx to load up index.php as the root of the website, if it exists. Open the site's config with an editor.</p>
<pre><code>vim /etc/nginx/sites-available/<WEBSITE></code></pre>
<p>Change the index line to read as below. This will then tell the server to load index.php, and if it doesn't exists, load index.html in its stead.</p>
<pre><code>index index.php index.html</code></pre>
</section>
</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>

@ -1,88 +0,0 @@
<!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="keywords" content="Blog, articles, guide, mysql, mariadb, database">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Adminer Setup</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Adminer Setup</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">
<section>
<p>Adminer is a simple front-end for your database server that can be access through the browser</p>
<h2>Pre-Requirements</h2>
<p>To run adminer, you'll need a webserver with php set up. Thankfully I'm a great guy, and have written about these topics before.</p>
<ul>
<li><a href="/guides/nginx-install.html">Nginx Webserver Setup</a></li>
<li><a href="/guides/add-php-to-nginx.html">PHP setup for NGINX</a></li>
</ul>
<h2>Download the latest release</h2>
<p>This will download the latest release to your default web directory, this can be changed, by altering the path following <strong>-O</strong>.</p>
<pre><code>wget "http://www.adminer.org/latest.php" -O /var/www/html/adminer.php</code></pre>
<h2>Set permissions for your web server</h2>
<pre><code>chown -R www-data:www-data /var/www/html/adminer.php
chmod 755 /var/www/html/adminer.php</code></pre>
<h2>Access it</h2>
<p>Head to your <strong>&lt;WEBSITE/IP&gt;/adminer.php</strong>, and you should load into the adminer login. Using your mysql/mariaDB credentials, you can then login, and use the GUI to manage your database(s)</p>
<h2>Make it a directory, not a file</h2>
<p>Instead of accessing <strong>/adminer.php?&lt;ARGUMENTS&gt;</strong>, we can make it look like <strong>/adminer/&lt;ARGUMENTS&gt;</strong></p>
<pre><code>location /adminer/ {
root /var/www/html ;
try_files $uri $uri/ /adminer/index.php/$is_args$args ;
}</code></pre>
<h2>Password Protect</h2>
<p>An additional level of security, just in case. Using Htaccess, any file, or directory can be password protected</p>
<pre><code>sudo apt install apache2-utils
htpasswd -c /home/&lt;USER&gt;/.htpasswd admin</code></pre>
<h3>Add to location</h3>
<p>Add the location of the auth file to the adminer location block</p>
<pre><code>auth_basic "Adminer" ;
auth_basic_user_file /home/&lt;USER/&gt;.htpasswd ;</code></pre>
<p>They block should look like below</p>
<pre><code>location /adminer/ {
auth_basic "Adminer" ;
auth_basic_user_file /home/&lt;USER&gt;/.htpasswd ;
root /var/www/html ;
try_files $uri $uri/ /adminer/index.php/$is_args$args ;
}</code></pre>
</section>
</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>

@ -1,93 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A guide to adding a free SSL certificate to your website(s) using cerbot, and automatically renewing them">
<meta name="keywords" content="Blog, articles, guide, certbot, SSL, secure certificate, website">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>at, for one-off cronjobs</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>at, for one-off cronjobs</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">
<section>
<p><a href="/guides/backup-with-cron.html#add-a-cronjob">Scheduling a cronjob</a> is great, but sometimes you only want it to run once. You could add, then remove the job, or write a script that executes once, but there is a better way.</p>
<h2>Install at</h2>
<pre><code>sudo apt install at</code></pre>
<h2>Schedule a script with at</h2>
<p>The below examples show two different ways to run a script with at.</p>
<pre><code>echo /script/to/run | at 20:30</code></pre>
<pre><code>at 20:30 -f ./script/to/run</code></pre>
<p>For this, the script needs to exist, and needs executable permissions for your user, <code>sudo chmod +x /script/to/run</code>, if you need a lil' hint.</p>
<p>The time/date passed <code>20:30</code> in this example, can then be passed in a few assorted ways.</p>
<ul>
<li><code>at now +5 minutes</code></li>
<li><code>at 11:00 today</code></li>
<li><code>at 11:00 tomorrow</code></li>
<li><code>at 20:30</code></li>
<li><code>at 20:30 093024</code></li>
<li><code>at 08:30PM Sep 30</code></li>
<li><code>at 08:30PM Sep 30 2024</code></li>
<li><code>at 08:30PM Sep 30 24</code></li>
</ul>
<h3>Batch a script</h3>
<p>Similar to the regular means of scheduling, except the batch will wait for the system load drops to a set point.</p>
<pre><code>echo /script/to/run | at -b 20:30</code></pre>
<p>You can also run <code>batch</code>, as follows.</p>
<pre><code>echo /script/to/run | batch 20:30</code></pre>
<h2>Check Queue</h2>
<pre><code>atq</code></pre>
<p>Running the command above, will show you something akin to...</p>
<pre><code>10 Sun Sep 29 14:14:00 2024 a user</code></pre>
<p>Which broken down shows the ID <code>10</code>, the date/time the item will run <code>Sun Sep 29 14:14:00 2024</code>,
the queue the item is in <code>a</code>, and the user executing the item <code>user</code></p>
<h2>Remove from Queue</h2>
<p>You can remove an item from the queue, with the <code>atrm</code> command, passing just the ID.</p>
<pre><code>atrm 3</code></pre>
<h2>Mail the user</h2>
<p>Like cron, at also allows the ability to mail the user about the task once executed. By default, if the command produces an output, at will mail the user, you can override this with:</p>
<pre><code>at -M</code></pre>
<p>This will prevent mail being sent to the user. You can also force a mail sent even if there is no output with:</p>
<pre><code>at -m</code></pre>
</section>
</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>

@ -1,55 +0,0 @@
<!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="keywords" content="Blog, articles, guide, mysql, mariadb, database">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Backup MySQL/MariaDB</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Backup MySQL/MariaDB</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">
<section>
<p>A database if a huge part of many projects, services, and servers. If something goes wrong, data is wrongly updated/deleted there could be many problems. Thankfully we can make backups to make sure our data is safe.</p>
<h2>Manual Backup of a DB</h2>
<h2>Backup all DBs</h2>
<p>This follows on from the manual backup, so assumes you have the backup directory created</p>
<h2>Automate hourly backups</h2>
<h2>My backup script</h2>
<p>I follow the 3-2-1 backup approach, so I want to keep the files in multiple locations</p>
</section>
</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>

@ -1,118 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Backups are fantastic, and can save hours upon hours of work if they're done. So we want to make sure they're done, and PCs are good with that, with automation.">
<meta name="keywords" content="Blog, articles, template">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Automating Backups with Cronjobs</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Automating Backups with Cronjobs</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">
<section>
<p class="intro">Backups are wonderful things that save hours upon hours of work, and stress, so long as they're actually made in the first place!</p>
<p>Automatically taking backups allows for peace of mind that your work won't be lost forever whilst you go about your normal workflow..</p>
<h2>Create a backup script</h2>
<p>You can just call rsync, etc. in cron, but I recommend making a backup script (or a few) for each specific type of backup you want to make.</p>
<p>Create the file where-ever you want to keep them, for the sake of this, it'll be a scripts directory in your home directory</p>
<pre><code>vim ~/scripts/backup_script.sh</code></pre>
<p>And add whatever your backup scripts wants to do. If you've no idea, check out my <a href="/guides/backup-with-rsync.html" target="_blank">rsync</a>, and <a href="/guides/backup-with-rdiff.html" target="_blank">rdiff</a> articles first.</p>
<pre><code>rdiff-backup $DIRECTORY_TO_BACKUP $DIRECTORY_TO_BACKUP_TO
rdiff-backup --force --remove-older-than 2W $DIRECTORY_TO_BACKUP_TO</code></pre>
<p>The above example will backup a directory, and remove any changes from 2 weeks ago.</p>
<p>Now make the script executable</p>
<pre><code>chmod +x ~/scripts/backup_script.sh</code></pre>
<h2 id="add-a-cronjob">Add a cronjob</h2>
<p>Now for the automation part. Using cron we can set this script to run at many time variations. I recommend <a href="https://crontab.guru/" target="_blank" rel="noopener">crontab guru</a> to learn more about the expressions used for cron.</p>
<p>Edit the cron table (crontab)</p>
<pre><code>crontab -e</code></pre>
<p>And add the following</p>
<pre><code>* */2 * * * /home/$USERNAME/scripts/backup_script.sh</code></pre>
<p>This will run the backup script every 2 hours, every day</p>
<h2>An advanced backup script</h2>
<p>An advantage of using a script for backups, is that it allows for more intricate functionality, you may not need to use this functionality, but it's greatly useful.</p>
<p>The script below is something I wrote to backup my home directories for each of my servers. It's used to make hourly backups, and send these backups to a remote server daily at midnight.</p>
<pre><code>#!/bin/bash
# Set locations to backup/backup to from the flags
while getopts s:d:b:r:R:n: flag
do
case "${flag}" in
d) DATA=${OPTARG};;
b) BACKUPDIR=${OPTARG};;
r) REMOTE=${OPTARG};;
R) REMOTEBACKUP=${OPTARG};;
n) NOW=${OPTARG};;
esac
done
# If the backup directory doesn't exist, make it
mkdir -p $BACKUPDIR
# Incremental backup of the directory locally
rdiff-backup $DATA $BACKUPDIR
# Don't keep changes from over 1W ago
rdiff-backup --force --remove-older-than 1W $BACKUPDIR
# Backup to remote
# Get the hour/minute time
TIME=$(date +%H%M)
# If it's a midnight backup, or a manual backup with -n 1 flag set
if [ "$TIME" = 0000 ] || [ "$NOW" = 1 ]
then
# Create the remote directory for backup if it doesn't exist
ssh $REMOTE mkdir -p $REMOTEBACKUP
# Copy the backup to the remote location
# -e ssh makes it secure
rsync -azh -e ssh \
--delete \
$BACKUPDIR \
$REMOTE:$REMOTEBACKUP
fi
</code></pre>
<p>Which is called in the crontab like so</p>
<pre><code># Hourly rdiff-backup of $DIRECTORY_TO_BACKUP
0 */1 * * * $SCRIPT_LOCATION -d $DIRECTORY_TO_BACKUP -b $LOCATION_TO_SAVE_BACKUP -r $EXTERNAL_SERVER_SSH -R $EXTERNAL_SERVER_BACKUP_LOCATION</code></pre>
<p>This script can easily be used for many different directories, on each server without needing to change the script itself. All that's needed is to change the cronjob, and/or add another cronjob changing the values it takes.</p>
<h2>One off scheduling</h2>
<p>If you only want something to happen once at a specific date/time, you should look into using <a href="/guides/at-one-off-cronjobs.html" rel="noopener">at, for one off scheduling</a> rather than cron.</p>
</section>
</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>

@ -1,56 +0,0 @@
<!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="keywords" content="Blog, articles, template">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Backup with rdiff-backup</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Backup with rdiff-backup</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">
<section>
<p class="intro">Like rsync, rdiff-backup is a tool used for incremental backups. Unlike rsync however, rdiff keeps the most-recent file change, along with any previous changes, deletions, etc.</p>
<h2>Install</h2>
<pre><code>sudo apt install rdiff-backup</code></pre>
<h2>Backup</h2>
<pre><code>rdiff-backup $dir $backup</code></pre>
<h2>Restore</h2>
<pre><code>rdiff-backup -r 2D $backup $restore_dir</code></pre>
<h2>Advanced</h2>
<h3>Only keep backups for a certain time period</h3>
<pre><code>rdiff-backup --force --remove-older-than 2M $backup</code></pre>
<p>This will remove all backups older than 2 months from $backup.</p>
</section>
</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>

@ -1,86 +0,0 @@
<!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="keywords" content="Blog, articles, template, rsync, backup">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Backup with rsync</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Backup with rsync</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">
<section>
<p class="intro">Rsync is a program that allows for incremental backups. This means that rsync will not create an additional copy of the data when backing up, it will only backup changes to the files/directories, saving bandwidth and storage space.</p>
<h2>Installation</h2>
<pre><code>sudo apt install rsync</code></pre>
<h2>Backup</h2>
<pre><code>rsync -azh $ORIGINAL $BACKUP</code></pre>
<p>Replace $ORIGINAL with the file/directory to backup, and $BACKUP with the location for the backup to reside.</p>
<p>The $BACKUP destination must be a blank directory, an rsync directory, or not currently exist.</p>
<h3>Remote rsync backup</h3>
<p>If you need to rsync from one PC to another, it's essential the same command, but with the additional layer of ssh</p>
<pre><code>rsync -azh -e ssh $ORIGINAL $BACKUP</code></pre>
<p>$BACKUP here will be an ssh connection pointed to a location, much like when using scp, so the command will look like</p>
<pre><code>rsync -azh -e ssh $ORIGINAL $USER@$HOST:$LOCATION</code></pre>
<p>Replacing $USER and $HOST with the username and hostname/IP for the server</p>
<h2>Restore</h2>
<p>A restore in rsync doesn't require any rsync code per-se, as you can just copy individual files from the backup location to the restore location.</p>
<p>Alternatively to restore the entire directory, keeping files that haven't changes, and those that have to the time of the last backup, rsync can do that as below</p>
<pre><code>rsync -auv $BACKUP $RESTORE</code></pre>
<h3>Over the internet</h3>
<p>Like with backups, these restores can be done over the network/internet too</p>
<pre><code>rsync -auv $USER@$HOST:$BACKUP $RESTORE</code></pre>
<h2>Notes/Advanced</h2>
<pre><code>-r recursive. All files/directories in the path will be backed up
-a archive mode. Recursive, but with file permissions, symlinks, etc retained.
-z compress
-b backups
-R relative
-u update - copy only changed files
-P progress
-c compress
-p preserve permissions
-h human readable. Make the output readible by humans
</code></pre>
<h2>Downsides</h2>
<p>Rsync only keeps one copy of the data, and doesn't keep the changes that were made, making it impossible* to restore a file's contents from the day previous. If this is what you're after, look at <a href="/guides/backup-with-rdiff.html">rdiff-backup</a>.</p>
<p>* Not impossible, as you <em>can</em> set rsync to do this, but it requires a bit of scripting, and isn't as easy as just running the program</p>
</section>
</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>

@ -1,67 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A guide to adding a free SSL certificate to your website(s) using cerbot, and automatically renewing them">
<meta name="keywords" content="Blog, articles, guide, certbot, SSL, secure certificate, website">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Setup SSL with Certbot</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Setup SSL with Certbot</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">
<section>
<p>An SSL certificate is used to secure a domain, preventing people from seeing many things, including those entered into forms (username, password, etc.).</p>
<h2>Install Certbot</h2>
<pre><code>sudo apt install python3-certbot</code></pre>
<p>or</p>
<pre><code>sudo apt install python3-certbot-nginx</code></pre>
<h2>Run Certbot</h2>
<pre><code>sudo certbot --nginx</pre></code>
<p>or</p>
<pre><code>sudo certbot --nginx -d <DOMAIN-NAME></pre></code>
<p>I recommend the former command, as it will ask which domain you'd like to setup for, where the latter should be used if you know for certain the domain-name is configured in nginx</p>
<p>The first time you run certbot you'll need to enter an email (for alerts), and agree to T&Cs</p>
<h3>Configure HTTPS</h3>
<h2>Auto renew</h2>
<p>Certificates attained via Certbot are valid for 90 days, so to keep it up indefinitely we'll need to auto-renew before it expires</p>
<p>To do this we'll set up a cronjob to run on... . This crontab needs to be run by root, so we'll open the crontab with sudo.</p>
<pre><code>sudo crontab -e</code></pre>
<p>If it's your first time editing the crontab (as root), it'll ask for your editor of choice</p>
<p>When the crontab is open, add a line to the bottom with the following</p>
<pre><code>0 0 * * * certbot --nginx renew</code></pre>
<p>Exit and save, you'll be imformed the crontab has been changed, and every day the cronjob will auto renew SSL certificates that are due to expire in the next 30 days.</p>
</section>
</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>

@ -1,119 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A guide to adding a free SSL certificate to your website(s) using cerbot, and automatically renewing them">
<meta name="keywords" content="Blog, articles, guide, certbot, SSL, secure certificate, website">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Docker Install (inc. Portainer)</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Docker Install (inc. Portainer)</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">
<section>
<p>Docker's pretty cool. Containers are a simple way to, well containerise applications. They're essentially a virtual machine with less overhead.</p>
<p>This guide assumes you have a <a href="/guides/server-install-debian.html" target="_blank" rel="noopener">debian install</a>, either physical or a VM (I recommend a VM).</p>
<h2>Installing Docker</h2>
<p>The following is the script I use for my docker installations. Copy/Paste or throw into a file and execute it.</p>
<pre><code>sudo apt-get install ca-certificates curl gnupg
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg
echo \
"deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian \
"$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin</code></pre>
<p>This will download add the required keyring, download the correct docker version for your PCs arhitecture, and the sources, and download the required packages.</p>
<p>With this docker is now installed and ready to go!</p>
<h2>Installing your first container, Portainer</h2>
<p>Portainer is a web-GUI for managing docker containers, so I figure it's a good place to start.</p>
<h3>Docker Run</h3>
<p>Not recommended. Use <a href="#compose">compose</a>.</p>
<pre><code>docker run -d \
-p 9443:9443 \
--name portainer \
--restart unless-stopped \
-v data:/data \
-v /var/run/docker.sock:/var/run/docker.sock \
portainer/portainer-ce:latest</code></pre>
<h3 id="compose">Docker Compose</h3>
<p>My preferred way of setting up, and running containers. It makes it more managable, and easier to follow.
There are a few more 'steps' here, but that's more-so for managing the containers than a requirement.</p>
<p>First off we'll create a 'docker' directory, with a 'portainer' directory within it in our home directory.</p>
<pre><code>mkdir -p ~/docker/portainer && cd ~/docker/portainer && touch docker-compose.yml</code></pre>
<p>Next from within the portainer directory, open up/create <code>docker-compose.yml</code>.
Use your preferred text editor here, I like vim, so I'll be using it in the snippet.</p>
<p>Paste the following into the file, and save it.</p>
<pre><code>services:
portainer:
image: portainer/portainer-ce:latest
container_name: portainer
restart: unless-stopped
security_opt:
- no-new-privileges:true
volumes:
- /etc/localtime:/etc/localtime:ro
- /var/run/docker.sock:/var/run/docker.sock:ro
- ./data:/data
ports:
- 9443:9443</code></pre>
<p>Next we'll run docker compose, which will do as the run command did, pulling the container (if not already done so), and running it.</p>
<pre><code>sudo docker compose up -d</code></pre>
<h3>Accessing Portainer</h3>
<p>Once this has been run successfully you should be able to access portainer using the IP of the docker host, or localhost (if running docker on the same PC).</p>
<p><a href="https://localhost:9443">https://localhost:9443</a></p>
<p><a href="https://192.168.0.100:9443">https://192.168.0.100:9443</a></p>
</p>
</section>
</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>

@ -1,57 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A basic guide on how to purchase a domain name">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Get a domain name</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Get a domain name</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">
<section>
<p>A domain name, as many will know is what you type into a browser to access a website. Without a domain name, everyone accessing your server/website would need to be entering the IP address.</p>
<h2>Choose a registrar</h2>
<p>First thing is to choose a registrar (who you are leasing the domain from). You can search for "domain name registrars" and find who is cheapest. So long as they handle DNS (which most do) you're good.</p>
<p>I'm currently using <a href="https://tsohost.com" target="_blank" rel="noopener" >tsohost.com</a>, as they're pretty cheap, and besides a few little issues, it works for me.</p>
<h2>Choose a domain name</h2>
<p>On the registrar's website there will be a section to purchase a domain. Upon clicking this you'll likely be greeted with a searchbar, search for whatever domain you'd like here, and they'll let you know if it's available, and what similar domains there are.</p>
<p>Select the domain(s) you wish, and add it/them to your cart.</p>
<h2>Purchase your domain name</h2>
<p>Simply checkout, and make your way through the process. Tada, you now have a domain name!</p>
<p>Next up you'll need to <a href="/guides/add-domain-to-server">link your server and domain name</a> with DNS.</p>
</section>
</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>

@ -1,112 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn to host a public/private server with a bunch of great services">
<meta name="keywords" content="Blog, server, hosting, website, guide, admin, homelab, self-host">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Aney's guide to server hosting</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's guide to server hosting</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">
<section>
<p class="intro">If you want to start getting into server hosting, system administration, or just want to get a basic minecraft/web server up for you and your friends, then welcome. We all start somewhere, and I would love if I could get your foot in the door.</p>
<h2>Basic Server setup</h2>
<ul>
<li>Get a server and <a href="/guides/server-install-debian.html">Install Debian</a></li>
<li><a href="/guides/initial-server-setup.html">Basic Debian Server setup (with some security)</a></li>
<li><a href="/guides/get-a-domain-name.html">Get a domain name</a></li>
<li><a href="/guides/add-domain-to-server.html">Connect your server and domain name</a></li>
<li>TODO:Port Forwarding (home server)</li>
</ul>
<p>Now you officially own, and have setup a server. Currently all you can do is SSH into it though, so let's get some services on there</p>
<h2>Virtualisation</h2>
<p>Virtual machines allow you to use your server as multiple servers at once, with different operating systems, services, files, etc. If you're self-hosting this is a great way to separate concerns, having one system for each distinct task.</p>
<ul>
<li><a href="/guides/setup-qemu-kvm.html">Setup Qemu/KVM</a></li>
<li><a href="/guides/setup-kvm-bridge.html">Setup a bridged adapter</a></li>
<li>TODO:<a href="/guides/install-kvm-virtual-machine.html">Install a virtual machine</a></li>
<li>TODO:<a href="/guides/kvm-optimisation.html">Optimisate KVM Virtual Machines</a></li>
<li>TODO:<a href="/guides/virsh-cheatsheet.html">Virsh cheatsheet</a></li>
<li><a href="/guides/vm-seperation-of-concerns.html">Example of Separation of Concerns (SoC)</a></li>
</ul>
<h2>Nginx Webserver</h2>
<p>A great first service for any server is a website, even if it's just a little page to let people know you own the server/domain name</p>
<ul>
<li><a href="/guides/nginx-install.html">Install nginx</a></li>
<li><a href="/guides/setup-nginx-website.html">Setup an nginx website</a></li>
<li><a href="/guides/certbot-ssl.html">Add an SSL certificate w/Certbot</a></li>
<li>TODO:<a href="/guides/nginx-web-optimisation.html">Nginx web optimisation</a></li>
<li><a href="/guides/add-php-to-nginx.html">(Optional) Add PHP to your webserver</a></li>
</ul>
<h2>MariaDB Database</h2>
<p>A database is a great tool to store, access, and filter data. Typically used alongside a website, or other services, but can be useful standalone if you know what you're doing</p>
<ul>
<li><a href="/guides/install-mysql-mariadb.html">Install mariaDB</a></li>
<li>TODO:<a href="/guides/sql-cheatsheet.html">SQL cheatsheet</a></li>
<li><a href="/guides/adminer-setup.html">(Optional) Adminer setup</a></li>
<li>TODO:<a href="/guides/backup-mysql-mariadb.html">(Optional) Backup databases</a></li>
</ul>
<h2>Backup your server!</h2>
<p>Backups are super useful. If something breaks, or gets accidentally deleted you can always use a backup to get it back</p>
<ul>
<li><a href="/guides/backup-with-rsync.html">Backup with rsync</a></li>
<li>TODO:<a href="/guides/backup-with-rdiff.html">Backup with rdiff-backup</a></li>
<li><a href="/guides/backup-with-cron.html">Setup backup cronjob(s)</a></li>
</ul>
<h2>Additional services/potential guides</h2>
<p>Unless there is an anchor, these are all "TODO", and may just be omitted from this list</p>
<h3>Useful tidbits</h3>
<ul>
<li>TODO:<a href="/guides/nginx-proxy.html">Proxy services with NGINX proxy pass</a></li>
<li>TODO:<a href="/guides/password-protect-webpage.html">Password protect webpages</a></li>
</ul>
<h3>Additional Services</h3>
<ul>
<li><a href="/guides/setup-git-server.html">git</a></li>
<li>Uptime Kuma</li>
<li>torrentbox</li>
<li>Jellyfin</li>
<li>VPN</li>
</ul>
</section>
</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>

@ -1,90 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A collection of typically tech related guides, authored by Aney.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Aney's Guides</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's Guides</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">
<section>
<h2>Pinned</h2>
<ul>
<li><a href="/guides/guide-to-server-hosting.html">Guide to server hosting</a></li>
<li><a href="/guides/web-dev-101.html">Web Development 101</a></li>
</ul>
<h2>2024</h2>
<ul>
<li><a href="/guides/at-one-off-cronjobs.html">at, for one off cronjobs</a> - 20/09/2024</li>
<li><a href="/guides/linux-acl.html">Linux Access Control Lists (ACL)</a> - 20/09/2024</li>
<li><a href="/guides/docker-install.html">Docker Install</a> - 16/09/2024</li>
<li><a href="/guides/linux-file-permissions.html">Linux File Permissions</a> - 14/09/2024</li>
</ul>
<h2>2022</h2>
<ul>
<li><a href="/guides/webpage-to-website.html">Webpage to website</a> - 22/11/2022</li>
<li><a href="/guides/your-first-webpage.html">Your first webpage</a> - 18/11/2022</li>
<li><a href="/guides/web-dev-101.html">Web Development 101</a> - (WIP)18/11/2022</li>
<li><a href="/guides/password-protect-webpage.html">Password protect webpages</a> - (WIP)14/09/2022</li>
<li><a href="/guides/nginx-proxy.html">Proxy services with Nginx</a> - (WIP)14/09/2022</li>
<li><a href="/guides/install-kvm-virtual-machine.html">Install a KVM Virtual Machine</a> - (WIP)14/09/2022</li>
<li><a href="/guides/setup-git-server.html">Setup git server</a> - 13/09/2022</li>
<li><a href="/guides/backup-with-cron.html">Automate Backups with Cron</a> - 26/08/2022</li>
<li><a href="/guides/server-install-debian.html">Debian Install Guide (for Server)</a> - 22/08/2022</li>
<li><a href="/guides/set-static-ip.html">How to set a static IP</a> - 22/08/2022</li>
<li><a href="/guides/vm-seperation-of-concerns.html">VM Seperation of Concerns</a> - 29/07/2022</li>
<li><a href="/guides/setup-kvm-bridge.html">Setup a KVM bridge</a> - 29/07/2022</li>
<li><a href="/guides/virsh-cheatsheet.html">Virsh Cheatsheet</a> - 29/07/2022</li>
<li><a href="/guides/setup-qemu-kvm.html">Install KVM for virtualisation</a> - 29/07/2022</li>
<li><a href="/guides/backup-with-rdiff.html">Backup files with rdiff</a> - 17/07/2022</li>
<li><a href="/guides/backup-with-rsync.html">Backup files with rsync</a> - 17/07/2022</li>
<li><a href="/guides/add-php-to-nginx.html">PHP on Nginx setup</a> - 10/06/2022</li>
<li><a href="/guides/sql-cheatsheet.html">SQL Cheatsheet</a> - 09/06/2022</li>
<li><a href="/guides/adminer-setup.html">Adminer Setup</a> - 09/06/2022</li>
<li><a href="/guides/backup-mysql-mariadb.html">Backing Up MySQL/MariaDB</a> - 09/06/2022</li>
<li><a href="/guides/install-mysql-mariadb.html">MySQL/MariaDB Setup Guide</a> - 09/06/2022</li>
<li><a href="/guides/nginx-web-optimisation.html">NGINX web optimisation</a> - 30/05/2022</li>
<li><a href="/guides/certbot-ssl.html">Setup SSL with Certbot</a> - 30/05/2022</li>
<li><a href="/guides/setup-nginx-website.html">How to setup an nginx website</a> - 30/05/2022</li>
<li><a href="/guides/nginx-install.html">How to install an nginx webserver</a> - 30/05/2022</li>
<li><a href="/guides/get-a-domain-name.html">How to purchase a domain name</a> - 30/05/2022</li>
<li><a href="/guides/add-domain-to-server.html">Link your domain name to your server</a> - 24/05/2022</li>
<li><a href="/guides/initial-server-setup.html">Debian Server Setup</a> - 24/05/2022</li>
<li><a href="/guides/guide-to-server-hosting.html">Aney's guide to server hosting</a> - 24/05/2022</li>
</ul>
</section>
</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>

@ -1,201 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A guide for the first steps following a new debian server install">
<meta name="keywords" content="Blog, articles, news">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Initial Server Setup</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Initial Server Setup</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">
<section>
<p>This section assumes you have a fresh Debian install on a server (either physical or VPS)</p>
<p>It will cover installing the essentials for access, and basic security so you don't need to worry in the future. This section may seem a little daunting for a first-time linux user, but most of it is copy/paste, hopefully with enough description to understand what is being done.</p>
</section>
<section>
<p>This first section will be done on the physical PC, or on the VPS via their website, or SSH'd as root if that's the option given.</p>
<h2>Login</h2>
<p>Perhaps silly, but login as your user with root priveleges or the root user if a user isn't currently setup.</p>
<p>For the first few steps it's written as if you're logged in as root, if you followed my <a href="/guides/server-install-debian.html" target="_blank" rel="noopener">install guide</a>, this won't have a password, so we'll change user with the following command</p>
<pre><code>sudo su -</code></pre>
<p>Now just follow along with the remainder of the guide. If you wish not to change users you could also just add sudo in-front of the commands to run them as root that way.</p>
<h2>Update the OS</h2>
<p>Even with a fresh install of Debian from the latest ISO, there may be some updates you're missing, and it's a good idea to have these, especially in case they're security updates.</p>
<pre><code>apt update &amp;&amp; apt upgrade</code></pre>
<h2>Install essential packages</h2>
<p>These are packages that are needed for accessing, and controlling the server</p>
<pre><code>apt install sudo ssh -y</code></pre>
<h3>Some useful packages too</h3>
<pre><code>apt install vim htop wget curl tmux -y</code></pre>
<h2>Add a user, and give super user privilleges</h2>
<p>This can be ignored if my guide was followed, or you already have a user setup. Some VPS just have root however, so I believe this should be included.</p>
<p>The reason for a new account instead of using root, basically comes down to security. If you want multiple people on the server too, it's best to have a unique account for each.</p>
<pre><code>adduser $USERNAME$
usermod -aG sudo $USERNAME$</code></pre>
<p>*replace $USERNAME$ with the user you want to create, e.g. nathan</p>
<h2>(Local server) Set static IP</h2>
<p>If the server is a physical PC in your home you will need to set a static IP, otherwise your router could assign a different IP on reboot, and this would mess with port forwarding, and internal DNS.</p>
<p>If you're using a VPS, this step can be ignored.</p>
<p><a href="#" target="_blank" rel="noopener">Set static IP for local server</a></p>
<h2>Secure ssh</h2>
<p>Although this is optional, I recommend it, as SSH (secure shell) will likely be the primary means of access to the server. You don't want to be next to it whenever you've got a change to make.</p>
<p>Open the following file with your editor of choice, I use vim.</p>
<pre><code>vim /etc/ssh/sshd_config</code></pre>
<p>Within the editor you will need to search for <strong>PermitRootLogin</strong> and set it to <strong>no</strong>, this prevents ssh as root</p>
<p>Search for <strong>Port</strong> and set it to a different port than 22, a port over 1024 prevents basic nmap scans, and therefor a lot of bruteforcing, so let's go with 2020 as it's easy to remember</p>
<p>Below the <strong>Port</strong> line, add a new line and write <strong>Protocol 2</strong> this enables ssh2, which is more secure than the standard ssh protocol.</p>
<p>(Optional) Comment/Add a <strong>#</strong> to the beginning of the <strong>passwordlogin</strong> line. This will prevent sshing to the server from any PC that doesn't have it's SSH key on the server already. I recommend only doing this if your sshkeys are on the server, or you're comfortable adding them.</p>
<pre><code>systemctl reload sshd</code></pre>
<p>This reloads the ssh daemon, and enables all the changes we've made</p>
<h2>Setup UFW</h2>
<p>UFW (Uncomplicated Firewall) is a simple to use firewall, that can be used to easily open/close ports on your server.</p>
<p>We'll install ufw, deny access inwards to all ports, but allow our server to access any ports outwards. We will then manually allow traffic to the SSH port we set, in this case 2020.</p>
<pre><code>apt install ufw</code></pre>
<pre><code>ufw default deny incoming &amp;&amp;
ufw default allow outgoing &amp;&amp;
ufw allow 2020 &amp;&amp;
ufw enable</code></pre>
<p>If there are any other ports that need to be opened in the future this can be done with:</p>
<pre><code>ufw allow $PORT</code></pre>
<h2>Set hostname</h2>
<p>Setting the name for a server is not an important step, but it's nice to have each server easily identifable.</p>
<p>Simply change the hostname within the two files below. Ensure they share the same name between files.</p>
<pre><code>vim /etc/hosts</code></pre>
<p>and</p>
<pre><code>vim /etc/hostname</code></pre>
</section>
<section>
<hr>
<p>This next section is to be done via a terminal, or an SSH client e.g. PuTTY for Windows. This part of the guide is written for a Unix terminal.</p>
<h2>SSH into the server</h2>
<p>This is a two part section, and I recommend using this every time you SSH into a server from a new PC.</p>
<pre><code>ssh $USER$@$HOST$ -p 2020</code></pre>
<p>This will likely display a message asking to verify the key for the server. This is to prevent man-in-the-middle attacks, so I recommend verifying this whenever asked.</p>
<h3>Verify SSH</h3>
<p>To verify, you'll need to run the following command on the server.</p>
<pre><code>ssh-keygen -l -f /etc/ssh/ssh_host_ed25519_key.pub</code></pre>
<p>Then if the key the server shows matches that on your PC's SSH prompt, type <strong>yes</strong> and hit enter from your PC.</p>
<h2>SSH without a password</h2>
<p>To be more secure, and to SSH faster we can setup an SSH key, and use that for user authentication.</p>
<h3>Create an SSH key</h3>
<p>We'll create an ed25519 ssh-key, as it's more secure, and performant than the default rsa.</p>
<pre><code>ssh-keygen -t ed25519</code></pre>
<h3>Copy the SSH key onto the server</h3>
<p>From the terminal there's a nifty command to copy ssh keys to a server.</p>
<pre><code>ssh-copy-id -p 2020 -i ~/.ssh/id_ed25519 USER@HOST</code></pre>
<p>Alternatively you can add the key to the server manually. This is recommended, especially when adding other users.</p>
<p>First on your PC you need to run the following, and take note of the output.</p>
<pre><code>cat ~/.ssh/id_ed25519.pub</pre></code>
<p>Then on the server, open the following file, and add the output to a new line.</p>
<pre><code>vim /home/USER/.ssh/authorized_keys</code></pre>
<h3>SSH again</h3>
<p>Now simply run the same ssh command as before, and you shouldn't get a password prompt.</p>
<pre><code>ssh $USER$@$HOST$ -p 2020</code></pre>
<h2>(Optional) Fail2Ban</h2>
<p>Fail2ban is used to periodically check server logs, and bans IPs that appear to be trying to brute-force into your server. It's only "required" for servers exposed to the internet.</p>
<pre><code>apt install fail2ban -y</code></pre>
<pre><code>systemctl enable fail2ban</code></pre>
<p>There's a lot of options for fail2ban, this just installs it. For a little more detail checkout <a href="https://wiki.crowncloud.net/?How_To_Protect_SSH_With_Fail2Ban_on_Debian_12" target="_blank" rel="noopener">Crownclouds fail2ban guide</a>.</p>
<h2>TODO:(Optional) Unattended Upgrades</h2>
<p>Updates to a server typically want to be done by a human in case things go wrong, but smaller updates can be set to be done automatically.</p>
<pre><code>apt install unattended-upgrades</pre></code>
<p>The above downlads, and starts unattended-upgrades with some good defaults, but if you want a some more details check cyberciti's<a href="https://www.cyberciti.biz/faq/how-to-keep-debian-linux-patched-with-latest-security-updates-automatically/" target="_blank" rel="noopener">unattended upgrades guide</a>.</p>
<h2>(Optional) Setup User preferences</h2>
<p>These are a few things I personally like to have on a basic server. If you have your own preferences, dotfiles, or intend to use oh-my-zsh fell free to skip over this.</p>
<h3>Vi mode bash</h3>
<p><strong>Warning</strong> this is a preference you may not want to use if you're a beginner, and/or don't use VIM (text editor), as it sets the terminal to work more like VIM</p>
<p>Open your .bashrc file in your editor of choice<p>
<pre><code>vim ~/.bashrc</code></pre>
<p>Add the following to the bottom of the file</p>
<pre><code>set -o vi</code></pre>
<h3>Aliases</h3>
<p>Instead of typing out long commands you can alias them, and type a shorthand version. I've written an <a href="#">article about aliases</a> that explains setting up, and aliases I use. Below are some essentials for those that don't want to jump to another article.</p>
<pre><code>alias ll="ls -lhtr"
alias df="df -h"
alias ta="tmux attach || tmux new"
alias ipe="curl ifconfig.co"</code></pre>
<h2>Reads shouldn't write!</h2>
<p>Another personal opinion, and change is to enable noatime, and nodiratime. Be careful with this change! And ignore if you followed my Debian install guide, as they're already enabled.</p>
<p>Basically without these, when a file is opened (read) on your filesystem, a write is invoked to update the time it was opened, which causes unwanted writes, and CPU cycles.</p>
<p>Open your fstab file</p>
<pre><code>sudo vim /etc/fstab</code></pre>
<p>And edit your mounted drive(s) to include these flags</p>
<pre><code>UUID=&lt;YOUR-UUID&gt; / ext4 noatime,nodiratime 0 1</code></pre>
<p>The above uses an example, make your EXISTING lines look kinda like the above. Essentially just adding <strong>noatime, nodiratime</strong></p>
<h2>Server maintance notes</h2>
<p>Keep the server up-to date as much as possible</p>
<p>Only install things that you need. If this is a server for learning, half ignore this, but for production servers only install services, and make changes that are required.</p>
<p>
</section>
</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>

@ -1,66 +0,0 @@
<!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="keywords" content="Blog, articles, template">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Template for Blog</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Template for Blog</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">
<section>
<p class="intro">This is an intro, you gotta believe me</p>
<h2>Heading</h2>
<p>Yea, you're probably wondering how I got here.</p>
<h2>Install with virt (CLI)</h2>
<h2>Install with virt-manager (GUI)</h2>
By default virsh lists vms belonging to user
virsh --connect qemu:///system list --all
The above run as root shows all vms
For virtmanager, etc to controll vms from an remote host
It needs ssh-key shared
If a different port, then use virt-manager -c 'qemu+ssh://myuser@192.168.1.139:2222/system?keyfile=id_rsa'
e.g.
virt-manager -c 'qemu+ssh://nathan@aney.co.uk:2020/system?keyfile=id_rsa'
</section>
</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>

@ -1,76 +0,0 @@
<!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="keywords" content="Blog, articles, guide, mysql, mariadb, database">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>MySQL (actually MariaDB) Setup Guide</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>MySQL (actually MariaDB) Setup Guide</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">
<section>
<p>MySQL is a well known free, open-source relational database service, and it's great. MariaDB is just MySQL (a fork of it), but better.</p>
<h2>Install MariaDB</h2>
<pre><code>sudo apt install mariadb-server</code></pre>
<h2>Secure Install/Setup</h2>
<pre><code>sudo mysql_secure_installation</code></pre>
<p>Run the above command, and follow the instructions, if you don't want to then follow mine.</p>
<p>Press enter for the current password, and again when asked if you want to set a root password. Enter the password, then press enter for everything else.
<h2>Create Admin user</h2>
<pre><code>sudo mysql</code></pre>
<pre><code>GRANT ALL ON *.* TO 'admin'@'localhost' IDENTIFIED BY '&lt;DESIRED_PASSWORD&gt;' WITH GRANT OPTION;</code></pre>
<pre><code>FLUSH PRIVILEGES;</code></pre>
<pre><code>exit;</code></pre>
<h2>Test it works</h2>
<p>Simply try logging in as the admin account.</p>
<pre><code>mysql -u admin -p</code></pre>
<p>It should ask for a password, so enter your <strong>DESIRED_PASSWORD</strong>, and if you get mysql access, it's successful.</p>
<h2>(Optional) Make it easier to access on command line</h2>
<p>If you're working with a terminal, when calling <code>mysql</code> you'll need to enter a password each time. You can store the passwordwith a special .cnf file, making it faster to get into writing SQL.</p>
<p>Create/Edit the file with your editor of choice (mine's vim)</p>
<pre><code>vim ~/.my.cnf</code></pre>
<p>Add the following, with your credentials</p>
<pre><code>[mysql]
user=&lt;USERNAME&gt;
password=&lt;PASSWORD&gt;</code></pre>
<p>The above can be used for mysqldump, mysqladmin, and others too, by replacing the <code>[mysql]</code> block, with the related. e.g. <code>[mysqldump]</code>.</p>
</section>
</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>

@ -1,73 +0,0 @@
<!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="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>KVM Optimisation</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>KVM Optimisation</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">
<section>
<h2>KVM Optimisations</h2>
transmit queue
virsh domiflist <vm>
# this is then the txqueuelen change below ???
# changing to 4096
ifconfig <interface_name> txqueuelen <length>
txqueuelen (iwbcman comment)
defaults to 1000, apparently 200 is good
ip link set eth0 txqueuelen 200
vim /etc/network/interfaces
add
post-up /sbin/ip link set eth0 txqueuelen 200
to the end
If virtual hdd is slow can try
Cache mode: none (not default!)
I/O mode: native<Paste>
https://unix.stackexchange.com/a/48584
non caching on dirves?
https://blog.jdpfu.com/2012/07/30/improving-kvm-performance
://documentation.suse.com/smart/linux/html/concept-virtual-disk-cache-modes/concept-virtual-disk-cache-modes.html#:~:text=A%20disk%20cache%20is%20a,example%2C%20by%20setting%20its%20type.
On VM turning cache off essentially acts like accessing the drive itself. No exactly a passthrough, but decent enough
http://www.linux-kvm.org/page/Tuning_KVM
</section>
</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>

@ -1,93 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A guide to adding a free SSL certificate to your website(s) using cerbot, and automatically renewing them">
<meta name="keywords" content="Blog, articles, guide, certbot, SSL, secure certificate, website">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Linux Access Control Lists (ACL)</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Linux Access Control Lists (ACL)</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">
<section>
<p>Sometime linux filesystem permissions and ownership can only get you so far, for more complicated, or fine-tuned permissions we'll to use need another method, ACLs.</p>
<p>If you don't know much about linux file permissions I recommend you check my first guide on <a href="/guides/linux-file-permissions.html" rel="noopener">Linux File Permissions</a> first, as this guide will only be covering the how-to, and not the why.</p>
<h2>What are ACLs?</h2>
<p>Access Control Lists, ACL for short are essentially a filter that can be set for files and directories to allow/disallow permissions for multiple users and groups without the need to change ownerships.</p>
<h3>Install ACL</h3>
<pre><code>sudo apt install acl</code></pre>
<h2>Create ACL Entries/Permissions</h2>
<h3>Directory ACL</h3>
<p>Like default linux permissions, the same deal applies for u,g,o/rwx.
The main difference being that alternate users/groups can be defined by name such as <code>u:username:rw</code>, and <code>g:groupname:x</code>.</p>
<pre><code>setfacl -dm "u:user:rwx" DIRECTORY # New Files
setfacl --recursive -m "u:user:rwx" DIRECTORY # Existing Files</code></pre>
<p>The above will change the permissions for the directory, and any new children created within it to be rwx for the user "user". The second part of the above will then change all existing child files/directories of the directory to those same ACL permissions.</p>
<h3>File ACL</h3>
<p>Much like directory ACL, except for files. Any standalone files, or those within directories with an ACL set.</p>
<pre><code>setfacl -m "u:user:rwx" FILENAME</code></pre>
<h2>View ACL Entries</h2>
<p>Sometimes you need to check the permissions, and a <code>ls -l</code> will no longer cut it with ACL in use, so <code>getfacl</code> should be used.</p>
<pre><code>getfacl FILENAME</code></pre>
<p>The above will show something along the lines of:</p>
<pre><code># file: FILENAME
# owner: root
# group: root
user::rwx
user:user:rwx
group::r-x
mask::rwx
other::r-x</code></pre>
<p>The <code>owner</code>, <code>group</code>, <code>user::</code>, <code>group::</code>, and <code>other::</code>, are self-explanitory as they're basic <a href="/guides/linux-file-permissions.html" rel="noopener">Linux File Permission</a> bits 'n' bobs.</p>
<p><code>mask::rwx</code> sets the maximum permissions that can be used for the other user/groups that aren't the owners. So having rwx allows different user/groups to be able to have all permissions.</p>
<p><code>user:user:rwx</code> shows that the user "user" has rwx permissions for the file.</p>
<h2>Remove ACL Entries</h2>
<p>If you're don't want the ACLs anymore, you can always remove them for a file/directory. Adding <code>-R</code> to the command will recursively remove ACL from any children too.</p>
<pre><code>setfacl -b FILENAME</code></pre>
<h3>Remove ACL entry for a specific user/group</h3>
<pre><code>setfacl -x "u:user" FILENAME</code></pre>
</section>
</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>

@ -1,116 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A guide to adding a free SSL certificate to your website(s) using cerbot, and automatically renewing them">
<meta name="keywords" content="Blog, articles, guide, certbot, SSL, secure certificate, website">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Linux File Permissions</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Linux File Permissions</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">
<section>
<p>Having multiple users and groups with access to the same linux PC/server is great, but not everyone should have access to everything, eh.</p>
<p>For this, we'll use an example file, and switch ownership between root, and our user. So run the following snippet if your're using this as a tutorial, otherwise just read on.</p>
<pre><code>mkdir ~/permsExample && cd ~/permsExample && sudo touch FILENAME</code></pre>
<h2>Basic File Permisssion Breakdown</h2>
<p>For certain things, such as computers with only a few users/groups this works splendid.</p>
<p>If we run a <code>ls -l FILENAME</code>, we'll see something along the lines of the below.</p>
<pre><code>-rw-r--r-- 1 root root 0 Sep 14 13:02 FILENAME</code></pre>
<p><code>-rw-r--r--</code> being the permissions for User, Group, and Others which can be rwx for read, write, and executable permissions. Set in groups of 3s for User/Group/Others respectively.</p>
<p><code>root root</code> refers to the owner user and owner group.</p>
<h2>Set User/Group Ownership</h2>
<p>Each file, and directory within UNIX has an owner user, and owner group.<br>
By default when you create a file your user will be the owner, and your usergroup will be the owner group.</p>
<p>This can be changed with a simple command (that may need to be run with sudo).</p>
<pre><code>chown USER FILENAME
chown :GROUP FILENAME
chown USER:GROUP FILENAME</code></pre>
<p>The above snippet has the <code>chown</code> command run three different times with different purposes.
The first is to change just the owner user, second to change just the owner group,
and third to change both at the same time.</p>
<p>So to change the owner user for FILENAME to our own user, we'd run <code>sudo chown $USER FILENAME</code>, then verify the change by running <code>ls -l FILENAME</code>.</code></p>
<h2>Set Permissions for User/Group/Others</h2>
<p>Now we'll take a look at the file permissions that will affect the owners, and all other users.</p>
<p>If we look back at the <code>ls -l FILENAME</code> mentioned earlier you'll recall the brief <code>-rw-r--r--</code> mention.</p>
<h3>Intro to the rw-r--r-- meaning</h3>
<p>There are 10 dashes (-) that can be set, ignoring the first for now leaves us with 9, seperated by 3s.</p>
<p>The first group of three <code>rw-</code> in this example shows that the owner user has read/write permissons, but no executable permissions.
<br>The second group <code>r--</code>, shows the owner group only has read permissions, not write/executable permissions.
<br>And the third group <code>r--</code>, shows that other users have read permissions, but cannot write/execute the files.</p>
<h3>Set permissions</h3>
<p>The below commands will set read, write, and execute permissions for the user, and group and give all other users read permissions for filename.file.</p>
<pre><code>chmod ug+rwx FILENAME
chmod o+r FILENAME</code></pre>
<p>First thing after the <code>chmod</code> command (and a space) can be any combination of <code>ugoa</code>. Referring to user, group, other, and all.</p>
<p>Second, immediately after the letters can be one of <code>+,-,=</code> which are used to add, remove, or set (exact) permissions.</p>
<p>Third, any combination of <code>rwx</code> for read, write, executable permissions.</p>
<p>Follow this up with a space and the file/directory name and poof, permissions are set. If you'd like to set permissions for all files within a directory (and not just new ones created), also add a <code> -R</code> at the end of the command.</code></p>
<h4>Set permissions by number</h4>
<p>Many guides, examples, snippets, and such do not give their demonstration of setting permissions in the same manner as above, instead they'll use numbers, such as the below.</p>
<pre><code>chmod 755 FILENAME</code></pre>
<p>This chmod command will give rwx permissions to the owner user, and rx to the owner group, and other.</p>
<p>The numbers are much simpler to understand than you'd think:
<br>4 = Read
<br>2 = Write
<br>1 = Execute/executable
</p>
<p>These numbers get added up and grant those permissions to the users. So 7 = rwx, 6 = rw, 5 = rx, 3 = wx, 0 = no permissions, etc.</p>
<p>You'll also spot that there are 3 numbers, 7,5,5. These are for user, group, and other respectively. So each rwx number up to 7 sets the permissions for different users.</p>
<h3>Chmod directories</h3>
<p>The <code>chmod</code> command can also be used on directories. The following example will give all permissions to all users for that directory, and all its child files/directories.</p>
<pre><code>chmod a=rwx directoryName -R</code></pre>
<h2>Extra</h2>
<p><a href="/guides/linux-acl.html">Access Control Lists (ACL) Permissions</a> for a guide to access control lists.</p>
</section>
</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>

@ -1,79 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A guide to installing an NGINX web server">
<meta name="keywords" content="Blog, articles, news, NGINX, web server, guide">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>How to install an NGINX web server</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>How to install an NGINX web server</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">
<section>
<p>NGINX (engine X) is one of the top webservers. It has relatively easy learning curve, is fast, and <a href="">secure</a>. It's a great step into web hosting, and a good first service for many servers.</p>
<h2>Install</h2>
<pre><code>sudo apt install nginx</code></pre>
<h2>Enable, and start</h2>
<pre><code>sudo systemctl enable nginx --now</code></pre>
<p>or</p>
<pre>
<code>sudo systemctl enable nginx
sudo systemctl start nginx</code></pre>
<h2>Enable the http port</h2>
<p>If you have UFW installed ala the <a href="/guides/initial-server-setup.html">initial server setup</a> guide you'll need to open the http port on the server</p>
<pre><code>sudo ufw allow 80</code></pre>
<p>or</p>
<pre><code>sudo ufw allow http</code></pre>
<h2>Check it's working</h2>
<p>Open your browser, and head over to your IP address, or domain name. With any luck you should see the default NGINX page, with a "Welcome to NGINX"</p>
<h3>Basic checks in case it's not</h3>
<p>Check nginx is actually running</p>
<pre><code>sudo systemctl status nginx</code></pre>
<p>In the active section, this should show "Active", if not try starting nginx again</p>
<pre><code>sudo systemctl start nginx</code></pre>
<p>Check UFW port is enabled<p>
<pre><code>sudo ufw status</code></pre>
<p>This should show port 80, and 80 (v6) with ALLOW. If not, run ufw allow again</p>
</section>
<section>
<h2>Next...</h2>
<p><a href="/guides/setup-nginx-website.html">Setup an nginx website</a></p>
</section>
</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>

@ -1,48 +0,0 @@
<!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="keywords" content="Blog, articles, template">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Template for Blog</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Template for Blog</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">
<section>
<p class="intro">This is an intro, you gotta believe me</p>
<h2>Install</h2>
<p>.</p>
</section>
</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>

@ -1,119 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn how to Secure, and optimise your NGINX server with an easy guide">
<meta name="keywords" content="Blog, articles, news">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>NGINX web optimisation</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>NGINX web optimisation</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">
<section>
<p>Optimisations for the nginx configs will increase both the security, and performance of your website
<h2>TODO: Headers</h2>
<p>These headers tell nginx what, and how things can be served. They need to be added to each site-available that intends to use them</p>
<pre><code>sudo vim /etc/nginx/sites-available/<DOMAIN></code></pre>
<p>Within the server block. If certbot/SSL is setup, add into the block listening to port 443 (HTTPS)</p>
<pre><code>add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload';
add_header Content-Security-Policy "default-src 'self';" always;
add_header X-Frame-Options SAMEORIGIN always;
add_header "X-XSS-Protection" "1";
add_header X-Content-Type-Options nosniff ;</code></pre>
<h2>Gzip Compression</h2>
<p>Compressing data that is sent to the client is a simple way to save some bandwidth, and gain a bit of speed</p>
<pre><code>sudo vim /etc/nginx/nginx.conf</code></pre>
<p>This goes within the http block, there is likely already a gzip section, so find it and replace with the below. Otherwise just add to the http block.</p>
<pre><code>##
# Gzip Settings
##
gzip on ;
gzip_disable "msie6" ;
gzip_min_length 256 ;
gzip_vary on ;
gzip_proxied any ;
gzip_comp_level 6 ;
gzip_buffers 16 8k ;
gzip_http_version 1.1 ;
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/svg+xml
text/css
text/javascript
text/plain
text/xml
;</code></pre>
<h3>TODO: Brotli Compression</h3>
<p>Brotli is a new less used contender in the web compression space, but I've heard good things. I'll add this section once I've tested performance vs gzip myself</p>
<h2>TODO: SSL Tweaks</h2>
<h2>HTTP/2</h2>
<p>The newer standard of HTTP. It allows for parallel downloading, and other niceities. I believe Certbot does this for you when setting up SSL for a site, but if that changes, or you've used a different SSL cert, you can set this manually.</p>
<pre><code>sudo vim /etc/nginx/sites-available/<WEBSITE_CONFIG></code></pre>
<p>Alter the existing listen lines to append http2</p>
<pre><code>listen 443 ;</pre></code>
<p>to</p>
<pre><code>listen 443 http2 ;</pre></code>
<p>After an nginx reload, this can be checked, by looking for HTTP/2 being returned by the below curl command</p>
<pre><code>curl -I -L https://<WEBSITE></code></pre>
<h2>TODO: Cache Files, and Images</h2>
<p></p>
<h2>TODO: Limit requests</h2>
<p>To prevent potential DOS attacks, and web scrapers the amount of requests/connections per IP can be reduced</p>
<h2>TODO: Redirect www/non-www to each other</h2>
<p>People still type www. before a domain, even if it's not required. Cringe</p>
</section>
</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>

@ -1,48 +0,0 @@
<!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="keywords" content="Blog, articles, template">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Template for Blog</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Template for Blog</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">
<section>
<p class="intro">This is an intro, you gotta believe me</p>
<h2>Heading</h2>
<p>Yea, you're probably wondering how I got here.</p>
</section>
</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>

@ -1,139 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A guide on how do a fresh install of Debian, with some personal bias from me">
<meta name="keywords" content="Blog, articles, debian, install, linux">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Debian Install Guide (for Servers)</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Debian Install Guide for Servers</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">
<section>
<p class="intro">Debian is a fantastic linux distrubution that works, and rarely causes issues. Due to this, it is a common canditate for a server OS, and is what this guide will walkthrough how to install on a PC.</p>
<h2>Assumptions</h2>
<p>You have a PC/laptop with an internet connection<p>
<p>You have a PC/laptop/VM to install Debian to<p>
<p>You have a USB that can be rewritten with the debian ISO<p>
<p>You're on a network with DHCP (the typical home network will be)</p>
<p>Currently assumes you boot via BIOS, not UEFI (Will be updated for UEFI too)</p>
<h2>Download and Burn the ISO</h2>
<p>First thing is to get the install media setup. If you know how to burn an ISO, go ahead and get that done, I'll wait for you in the next section. If not follow below.</p>
<p>Download the latest debian ISO from the <a href="https://www.debian.org/distrib/" target="_blank" rel="noopener">debian distrubution page</a>, at the time of writing it's <a href="https://cdimage.debian.org/debian-cd/current/amd64/iso-cd/debian-12.2.0-amd64-netinst.iso" target="_blank" rel="noopener">this release</a> (assuming you're installing on a 64bit PC), but get it from their page.</p>
<p>Download <a href="https://etcher.balena.io/" target="_blank" rel="noopener">Balena Etcher</a> for your device (Windows, MacOS, Linux), and install it</p>
<p>Then open Etcher (with an empty USB plugged in), select the USB, and the downloaded ISO image, then hit run.</p>
<p>When finished remove the USB and plug it into the PC you want to install Debian to</p>
<h2>Boot from the USB</h2>
<p>You may be able to just plug the USB in, boot the PC, and be greeted with the installer. If so great! If not, then read on.</p>
<h3>BIOS boot order</h3>
<p>When your PC boots you should see a screen with a logo (a splash screen), hit a one of the button it tells you (Normally Esc, Del, F2, F3, or F12) to enter the bios. Find your bios's boot section, and move the USB to boot priority 1. After a reboot your PC will now always attempt to boot from your USB first, and from your internal drive if it cannot.</p>
<h3>One time boot</h3>
<p>Like above, press the key to get into either a one-time boot menu, or the bios. From there select your USB as a boot override. This will boot from the USB just this time, and then revert to the normal boot order.</p>
<h2>Start install</h2>
<p>When you're greeted by a debian boot page, select "Install" (that's what I'll be using) but "Graphical Install" is also fine, as it's essentially the same thing, but you can use a mouse.</p>
<h2>Localisation</h2>
<p>As if you are filling out an online form, simply ensure the boxes are correct to your language, location (sets time, and download servers), and keyboard layout.</p>
<h3>Hostname</h3>
<p>What you wish to call your server, I like to give names that are quirky, but still kinda explain what they do. For example, some names I've used are "spiderverse" for a web server, and "lilnas" for a NAS, etc.</p>
<h3>Domain name</h3>
<p>Leave this as default "home", and hit continue.</p>
<h2>Set up users and password</h2>
<p>The first thing you'll see is a screen asking for a root password.</p>
<h3>Don't set a root password</h3>
<p>Simply hit the <strong><kbd>Enter</kbd></strong> key, then again when it asks for the password the second time. A root user with a password is a vulnerability, so we're avoiding this.</p>
<h3>Create your user (admin account)</h3>
<p>Now enter your username, and password as the installer requests.</p>
<p>This account will be added to the sudo group, making it an admin with that can act as the root user.</p>
<h2>Disk Partitioning</h2>
<p>For this I am assume you're using a new drive, or at least one that you don't want any of the data on it</p>
<h3>Guided/Auto-partitioning</h3>
<p>You can do this, and it's recommended if you're new to linux. Once you've got the hang of it, you can always re-install your server from scratch (I recommend this a couple of times if it's non-integral).</p>
<p>Select <em>Guided - use entire disk</em> then select the drive you want to boot from.</p>
<p>Then select <em>All files in one partition (recommended for new users)</em>, as it's the simplest option.</p>
<h3><del>Manual Partitioning</del></h3>
<p>I've opted to leave this out, as it's a beginner guide. If you're reading this though I typically don't create a swap partition, but the guided installer does. It's no problem, but following this guide makes it redundant.</p>
<h3>(Optional) Preferences</h3>
<p>With your disk partitioned select the partion that has a <strong>/</strong> at the far right, and hit <kbd>Enter</kbd>.</p>
<p>Go to <em>Mount Options</em>, and select (using <kbd>Space</kbd>) <em>noatime</em>, and <em>nodiratime</em>. Then hit <kbd>Enter</kbd>, and select <em>Done setting up the partition</em>.</p>
<h3>Finalising Partitioning</h3>
<p>Simply hit <kbd>Enter</kbd> on <em>Finish partitioning and write changes to disk</em> at the bottom of the page.</p>
<p>Another screen will appear to verify you wish to partition, hit <em>Yes</em>, and it'll begin partitioning. Give it a little time.</p>
<h3>Configure the package manager</h3>
<p>A simple one, select your country, hit enter to the top selection, hit enter again when it asks for a proxy (unless you know what you're doing), and sorted.</p>
<h2>Popularity Contest</h2>
<p>I typically select <em>No</em> here, but read what it is and select for yourself.</p>
<h2>Software Selection</h2>
<p>Now tasksel will load up, and ask if you want any software installed during setup.</p>
<p>I choose to deselect everything pre-selected (the ones with asterisks), however for a new setup keeping <em>standard system utilities</em> is a-ok.</p>
<p>If you're after a GUI experience you can select <em>Xfce</em> as it's pretty lightweight, however I'd recommend going with no GUI for a server.</p>
<p>Once you've selected what to install, hit <kbd>Enter</kbd>.</p>
<h2>Reboot, and enjoy!</h2>
<p>Reboot your server, and tada!</p>
<h2>Setup Swap</h2>
<p>I mentioned earlier I don't setup a swap partition, and that it'd be redundant if you follow this guide, so here we go.</p>
<p>Swap sizes vary per PC as different services use more RAM, etc. A decent(ish) rule of thumb is to set half your RAM size as the swap size, but to be honest 8GB will likely suffice.</p>
<h3>Create the swap file</h3>
<pre><code>sudo fallocate -l 8G /swapfile</code></pre>
<h3>Set permissions</h3>
<pre><code>sudo chmod 600 /swapfile</code></pre>
<h3>Set the file as a swap area</h3>
<pre><code>sudo mkswap /swapfile &amp;&amp; sudo swapon /swapfile</code></pre>
<h3>Set on boot</h3>
<p>Open <strong>/etc/fstab</strong> with a text editor. I'll use vi for this.</p>
<pre><code>sudo vi /etc/fstab</code></pre>
<p>Press <kbd>g<kbd><kbd>g<kbd>, followed by <kbd>Shift</kbd>+<kbd>o</kbd>, then type the following.</p>
<pre><code>/swapfile swap swap defaults 0 0</code></pre>
<p>Then press <kbd>esc</kbd>, followed by <kbd>shift</kbd>+<kbd>Z</kbd><kbd>Z</kbd>.</p>
<h2>Next steps</h2>
<p>Now that you've got a basic Debian install, you'll need to configure, and install a few things. I've written a little something, somthing like that, so check <a href="/guides/initial-server-setup.html">how to setup a new server install</a></p>
</section>
</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>

@ -1,94 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This will cover how to set a static IP address for your linux computer">
<meta name="keywords" content="Blog, articles, linux, networking, guide">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Set a static IP (Guide)</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>How to set a static IP</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">
<section>
<p class="intro">For those that don't know a static IP is an IP address that doesn't change on reboots, etc. The opposite of a dynamic IP, which can change on reboots, and is the default mode for computers to get an IP (via DHCP).</p>
<h2>Get your network</h2>
<p>If you don't know what network/range of ports you're on, check first by following the below. If you do, and this is a flash-card of sorts, ignore this section.</p>
<pre><code>ip a</code></pre>
<p>You can likely gauge from this, what network you're on, as most routers default to a single range, with the router being the first address on that range<p>
<p>So... If your <strong>ip a</strong> shows <u>192.168.1</u>.xxx (after the last dot doesn't matter), I assume your address will need to be <u>192.168.1.</u>x, and your gateway will be <u>192.168.1</u>.1</p>
<h2>Set your static IP</h2>
<p>Open up the <strong>/etc/network/interfaces</strong> file with your editor of choice</p>
<pre><code>sudo vim /etc/network/interfaces</code></pre>
<p>And edit the file to look a little something like below. If that's a little difficult to understand, read on</p>
<pre><code>auto enp2s0
iface enp2s0 inet static
address 192.168.1.226
netmask 255.255.255.0
gateway 192.168.1.1
dns-namespaces 192.168.1.1 8.8.8.8 8.8.4.4</code></pre>
<h3>1) Set static network device</h3>
<p>Change the iface for your network device from</p>
<pre><code>iface enp2s0 inet dhcp</code></pre>
<p>to</p>
<pre><code>iface enp2s0 inet static</code></pre>
<p>Substituting enp2s0 for whatever your device is called. This device will pre-exist in the file, but can also be found with the following command</p>
<pre><code>ip a</code></pre>
<h3>2) Add your network details</h3>
<p>Below the editted line, add the following, based on your network (slightly mentioned in the very first section)</p>
<pre><code>address 192.168.1.220</code></pre>
<p>This is the IP that you want your PC to have, the number after the final dot, can be between (inclusively) 2, and 254</p>
<p>Followed by (on a new line)<p>
<pre><code>netmask 255.255.255.0</code></pre>
<p>This is an assumption about the average home network<p>
<p>Then, again on a new line<p>
<pre><code>gateway 192.168.1.1</code></pre>
<p>Another assumption, but this is your routers IP, that traditionally sits at the first IP</p>
<h3>3) Add your dns details</h3>
<p>I've seperated this out, as this is a common point of failure for setting a static IP, so make sure this is gucci<p>
<p>So below the address, etc. Add this line<p>
<pre><code>dns-namespaces 8.8.8.8 8.8.4.4</code></pre>
<p>This basically tells your PC where to look to find domain names<p>
<h2>Restart your networking service</h2>
<p>Now restarting your networking service (or entire PC if you so desire) will set your computer's IP to that in the <strong>/etc/network/interfaces</strong> file.</p>
<p>Simply use the command below, and voila</p>
<pre><code>sudo systemctl restart networking</code></pre>
</section>
</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>

@ -1,84 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="To keep control of your version control, and not be reliant on any third parties, a git server can be easily self hosted. Side benefit, you don't need to install anything on your server other than git, and ssh.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Git server setup</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Git server setup</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">
<section>
<p class="intro">Self-hosted version control is great way to not be dependant of a third party to keep your git server up, or your code secure.</p>
<h2>Install Git</h2>
<p>Many Unix operating systems have git installed by default, but if not it's a simple command.</p>
<pre><code>sudo apt install git</code></pre>
<h2>Create a git user</h2>
<p>This user will be used to push/pull all your git repos</p>
<pre><code>sudo useradd -m git -d /srv/git -s /bin/bash</code></pre>
<p>Change <strong>/srv/git</strong> to the location you wish to hold your repositories.</p>
<h2>Create a repo</h2>
<p>With the user, and directory created next you'll need to create a repo.</p>
<p><em>This step will need to be repeated for each new repo you create.</em></p>
<pre><code>git init --bare repo.git</code></pre>
<h2>Enable SSH</h2>
<p>Next you'll need to set up SSH for the git user.</p>
<h3>Install and Enable SSH (If not already done)</h3>
<pre><code>sudo apt install ssh &amp;&amp; sudo systemctl enable ssh --now</code></pre>
<h3>Create ssh key for git user</h3>
<pre><code>ssh-keygen -t ed25519</code></pre>
<h2>Use the git server</h2>
<p>With all the setup out the way, the git server is now usable as a remote for any of your git repos.</p>
<p>So on another PC, you can use git as normal. For example.</p>
<h3>Add remote to existing repo</h3>
<pre><code>git remote add origin git@&lt;your-server&gt;:/&lt;repo.git&gt;</code></pre>
<h3>Clone the repo</h3>
<pre><code>git clone git@&lt;your-server&gt;/:&lt;repo.git&gt;</code></pre>
<h3>Different SSH port</h3>
<p>If you are using a different ssh port for your server hosting git, you'll need to add the following after the colon (:) to the two previous commands</p>
<pre><code>&lt;port&gt;</code></pre>
<p>Giving you something like this</p>
<pre><code>git clone git@&lt;your-server&gt;:&lt;port&gt;/&lt;repo.git&gt;</code></pre>
<h2>Completed</h2>
<p>From here you can use git as you would via any other provider, but with the knowledge that your remote is yours.</p>
</section>
</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>

@ -1,117 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This guide covers how to set a KVM bridge network for use with Virtual Machines">
<meta name="keywords" content="Blog, articles, template">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Setup a bridge network for KVM</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Setup a bridge network for KVM</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">
<section>
<p class="intro">A bridge network is a means to connect/bridge different networks together to act as a single network. In this case, it allows any virtual connections to the bridge network to get their own internal IPs, as if plugged into the network directly.</p>
<h2>Install bridge-utils</h2>
<pre><code>sudo apt install bridge-utils</code></pre>
<h2>Find the network device to bridge</h2>
<p>First we need to find the network device we want to bridge to the VMs.</p>
<pre><code>ip link</code></pre>
<p>You'll likely have a device called something similar to <strong>enp1s0</strong>, or <strong>eth0</strong>.</p>
<h2>Create the bridge network</h2>
<p>This will be familiar to those who have <a href="/guides/set-static-ip.html">set a static ip</a> on linux, as it's essentially the same, with a few additional lines related to bridging</p>
<h3>Remove interface from interfaces file</h3>
<p>First step is to remove any references to your network device from <strong>/etc/network/interfaces</strong>, if this file is untouched there will likely be two lines at the bottom.</p>
<pre><code>sudo vim /etc/network/interfaces</code></pre>
<h3>Create a new bridge interface</h3>
<p>Now create a file in the <strong>/etc/network/interfaces.d/</strong> directory, with the name of your bridge (I like <strong>br0</strong>).</p>
<h4>Static IP</h4>
<pre><code>auto br0
iface br0 inet static # Name the same as your file (br0)
address 192.168.0.100
broadcast 192.168.0.255
netmask 255.255.255.0
gateway 192.168.0.1 # Normally your router's IP
dns-nameservers 192.168.0.1 8.8.8.8 8.8.4.4 # Don't set if resolveconf is installed, comment if internet borked
bridge_ports enp1s0 # Your device name
bridge_stp off # Disable Spanning Tree Protocol
bridge_waitport 0 # No delay before a port becomes available
bridge_fd 0 # No forwarding delay (Connects to network immediately)</code></pre>
<h4>Dynamic IP</h4>
<pre><code>iface br0 inet dhcp
bridge_ports enp2s0</code></pre>
<h2>(Optional) Create Virtual Network</h2>
<p>To make it easier to manage with VMs, this new bridge can also be made into a Virtual Network (Basically so you can select it from a dropdown).</p>
<h3>Create XML file</h3>
<p>Open up a text-editor, and create a file called <strong>br0.xml</strong>, named after the bridge itself.</p>
<pre><code>vim br0.xml</code></pre>
<p>Enter the following, then save</p>
<pre><code>&lt;network&gt;
&lt;name&gt;br0&lt;/name&gt;
&lt;forward mode="bridge"/&gt;
&lt;bridge name="br0"/&gt;
&lt;/network&gt;</code></pre>
<h3>Create the virtual network</h3>
<pre><code>sudo virsh net-define br0.xml</code></pre>
<p>Activate, and auto-start (on boot) the new network.</p>
<pre><code>sudo virsh net-start br0</code></pre>
<pre><code>sudo virsh net-autostart br0</code></pre>
<p>You can now remove the br0.xml file.</p>
<h2>Reload the network</h2>
<pre><code>sudo systemctl restart networking</code></pre>
<p>This may claim to have failed, but if checking with <strong>ip link</strong> shows the bridge, reboot. Essentially the bridge has been brought up, and it's trying to bring it up again (and can't), then throws an error.</p>
<pre><code>sudo reboot</code></pre>
<h3>Check it's there</h3>
<p>Run some checks and you should now see br0, with an IP4 address.</p>
<pre><code>ip a</code></pre>
<pre><code>ping google.co.uk</code></pre>
</section>
<section>
<h2>Useful Links</h2>
<ul>
<li><a href="https://ostechnix.com/how-to-find-available-network-interfaces-on-linux/">OSTechNix - Find available network interfaces</a></li>
<li><a href="https://www.cyberciti.biz/faq/how-to-configuring-bridging-in-debian-linux/">CyberCiti - Configure bridging in debian</a></li>
</ul>
</section>
</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>

@ -1,86 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A guide to setting up an nginx website pointed at a domain/subdomain">
<meta name="keywords" content="Blog, articles, NGINX, web server, guide, website">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>How to setup an NGINX website</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>How to setup an NGINX website</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">
<section>
<p>Nginx has the ability to host multiple websites, all at different domains/sub-domains. This guide will show you how to point a domain at the server, and display a different website than the default NGINX page.</p>
<h2>Make the domain point to the server</h2>
<p>In your domains DNS records ensure that the domain/sub-domain is pointing to the servers IP address, otherwise NGINX won't get told to serve the website</p>
<h2>Create the website directory</h2>
<p>We need to create a directory for the website to live, and add a basic webpage to it. Websites typically live in <strong>/var/www/</strong> but sometimes in users home directories, or elsewhere. We'll stick with the former</p>
<h2>Change directory permissions to www-user</h2>
<p>Nginx's default group is www-user, so to serve the website we'll grant permissions to www-user</p>
<h3>Add user account to www-user</h3>
<p>Make it easier...</p>
<h2>Create an nginx site config</h2>
<p>To get nginx to check the domain, and return the correct website, we need to configure it to do so</p>
<p>Create a file in</p>
<pre><code>/etc/nginx/sites-available/<DOMAIN-NAME></code></pre>
<p>Containing the contents below. This will set the server to listen on port 80 (http) for any requests from the domain name set. It will then direct the root domain to the directory in root, and set the index page the file index.html, or index.htm if the former wasn't found</p>
<pre><code>server {
listen 80 default ;
listen [::]:80 ;
server_name <DOMAIN-NAME> ;
location / {
root /var/www/<DOMAIN-NAME> ;
index index.html index.htm ;
}</code></pre>
<h3>Create a symlink to sites-enables</h3>
<p>Now to get nginx to check this config we'll need to symlink it to from sites-available, to sites-enabled</p>
<pre><code>sudo ln -s /etc/nginx/sites-available/<DOMAIN-NAME> /etc/nginx/sites-enabled/</code></pre>
<h3>Reload nginx</h3>
<pre><code>sudo systemctl reload nginx</code></pre>
<p>If the above command fails, you can check your nginx config for errors with</p>
<pre><code>sudo nginx -t</code></pre>
<p>Then once any errors have been fixed, reload nginx again, and it should be good to go</p>
<h2>Add a basic webpage</h2>
<p>So we can tell the config is working, we'll add a basic webpage.</p>
<h2>Check the website</h2>
<p>In your browser enter the domain name we've just setup in nginx, and you'll see that the basic HTML page we've created is being displayed</p>
</section>
</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>

@ -1,93 +0,0 @@
<!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="keywords" content="Blog, articles, template, guide, KVM, QEMU, virtualisation">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Setup QEMU/KVM virtualisation</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Setup QEMU/KVM virtualisation</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">
<section>
<p class="intro">Virtualisation is the act of creating a virtualised computer (guest), inside another computer (the host) by sharing the hardware. This allows a single host the ability to run all your services, whilst keeping a level of <a href="/guides/vm-seperation-of-concerns">SoC</a>.</p>
<h2>Enable in the BIOS</h2>
<p>To run virtual machines, certain flags in the bios need to be set. If you don't want to bring down an existing server to check, then check the next section first.</p>
<ul>
<li>Reboot your PC</li>
<li>At the BIOS splashscreen, press your motherboard's prefered key (typically <kbd>ESC</kbd>, <kbd>F3</kbd>, or <kbd>F12</kbd>).</li>
<li>Find and enable the virtualisation setting(s).
<ul>
<li>One of VT-x, AMD-V, SVM, or Vanderpool.</li>
<li>One of Intel VT-d, or AMD IOMMU (if available)</li>
</ul>
</li>
</ul>
<h2>Check Virtualisation is enabled</h2>
<p>Double check to make sure your server can be used for virtualisation, if you've enabled it in the BIOS it should be good. Just run one of the following command</p>
<pre><code>lscpu | grep 'Virtualization'</code></pre>
<pre><code>grep -E --color '(vmx|svm)' /proc/cpuinfo</code></pre>
<h2>Install the packages</h2>
<p>The easiest part, just copy and paste the below to install the required packages.</p>
<pre><code>sudo apt install qemu-kvm libvirt-clients libvirt-daemon libvirt-daemon-system virtinst</code></pre>
<h2>Sessions</h2>
<p>There are two different session types for VMs, user, and system sessions. If you are using a desktop, and intend to virtualise other desktop OSs I recommend user sessions. If you're setting up a server hypervisor, then use System sessions.</p>
<h3>User Session</h3>
<p>A user session VM is what I recommend for personal PCs, laptops, etc. as it's the best option for desktop virtualisation (e.g. a Kali install for l33t hackers).</p>
<h4>Add user to group</h4>
<pre><code>sudo adduser $USER libvirt</code></pre>
<h4>Enable default network</h4>
<p>Check the name of your default network (typically just 'default').</p>
<pre><code>sudo virsh net-list --all</code></pre>
<p>Enable the network.</p>
<pre><code>sudo virsh net-start default</code></pre>
<p>(Optionally) Set it to turn on with system boot.</p>
<pre><code>sudo virsh net-autostart default</code></pre>
<h3>System Session</h3>
<p>For now all that's needed to know is that you run sudo before any virsh commands, and that the VMs will launch with root permissions.</p>
<h2>Extra</h2>
<p><a href="/guides/setup-kvm-bridge.html">Setup bridge adapter for KVM</a></p>
<p><a href="/guides/kvm-optimisation.html">Optimisations for KVM Virtual Machines</a></p>
</section>
</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>

@ -1,78 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Basic SQL cheatsheet for the commandline.">
<meta name="keywords" content="Blog, articles, guide, mysql, mariadb, database">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>SQL Cheatsheet</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>SQL Cheatsheet</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">
<section>
<p>SQL is a great, simple to use language to manipulate data within a database. This cheatsheet is aimed at basic SQL for MySQL/MariaDB.</p>
<h2>Access on the command line</h2>
<pre><code>mysql -u <USERNAME> -p</code></pre>
<p>When prompted enter your password</p>
<h2>Database manipulation</h2>
<h3>Show databases</h3>
<pre><code>SHOW databases;</code></pre>
<h3>Create new databases</h3>
<pre><code>CREATE DATABASE IF NOT EXISTS <DATABASE>;</code></pre>
<h3>Enter into a database</h3>
<pre><code>USE DATABASE <DATABASE>;</code></pre>
<p>or just</p>
<pre><code>USE <DATABASE>;</code></pre>
<h2>Table manipulation</h2>
<p>Once you've got a database selected, you can play with tables</p>
<h3>Create</h3>
<h3>Read</h3>
<h3>Update</h3>
<h3>Delete</h3>
<h2>Data manipulation</h2>
<p>Most of your SQL life will be CRUDing (Create, Read, Update, Delete) data. So I'll cover the basics here</p>
<h3>Create</h3>
<h3>Read</h3>
<h3>Update</h3>
<h3>Delete</h3>
<h2>Create additional users</h2>
</section>
</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>

@ -1,115 +0,0 @@
<!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="keywords" content="Blog, articles, guide, cheatsheet, virsh, virtual machine">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Virsh Cheatsheet</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Virsh Cheatsheet</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">
<section>
<p class="intro">Virsh is an extremely powerful tool for managing KVM/QEMU virtual machines. From restarting, to changing hardware, snapshotting, and cloning machines. I'll cover the basics of Virsh here, as it's all I personally use.</p>
<h2>List VMs</h2>
<pre><code>virsh list</code></pre>
<p>List all, including offline vms</p>
<pre><code>virsh list --all</code></pre>
<h2>Start/Stop</h2>
<pre><code>virsh start $vm</code></pre>
<pre><code>virsh shutdown $vm</code></pre>
<pre><code>virsh reboot $vm</code></pre>
<p>If the VM refuses to shutdown, etc. destroy performs an ungraceful shutdown</p>
<pre><code>virsh destroy $vm</code></pre>
<h3>Autostart</h3>
<pre><code>virsh autostart $vm</code></pre>
<pre><code>virsh autostart $vm --disable</code></pre>
<h2>Rename</h2>
<pre><code>virsh domrename $vm $new_name</code></pre>
<h2>Delete</h2>
<pre><code>virsh undefine $vm</code></pre>
<h3>Delete Snapshots</h3>
<p>If your VM has Snapshots it won't delete as simply, so delete those first<p>
<p>List the snapshots</p>
<pre><code>virsh snapshot-list --domain $vm</code></pre>
<p>And delete each snapshot with the following</p>
<pre><code>virsh snapshot-delete --domain $vm --snapshotname $snapshot</code></pre>
<h3>Deleting with all storage</h3>
<p>Delete the VM along with all the virtual storage</p>
<pre><code>virsh undefine --domain $vm --remove-all-storage</code></pre>
<h2>Snapshots</h2>
<h3>Create</h3>
<p>Save a snapshot of the VMs current state</p>
<pre><code>virsh snapshot-create-as --domain $vm --name "$snapshot_name"</code></pre>
<h3>Restore/Revert</h3>
<p>Revert the VM to the state it was in during the snapshot</p>
<pre><code>virsh snapshot-revert $vm $snapshot_name</code></pre>
<h3>Delete Snapshot</h3>
<p>Delete the snapshot, this doesn't delete anything else related to the VM</p>
<pre><code>virsh snapshot-delete --domain $vm --snapshotname $snapshot_name</code></pre>
<h2>(TODO)Drive management</h2>
<h3>Resize virtual drives</h3>
<p>Find the name of your drive.</p>
<pre><code>virsh domblklist $vm</code></pre>
<p>Resize with qemu</p>
<pre><code>sudo qemu-img resize /location/drive.qcow2 +10G</code></pre>
<h2>Change Memory</h2>
<p>In variantions of 512M, 1G, etc</p>
<pre><code>virsh setmem $vm $ram</code></pre>
<p>The amount of RAM the VM has assigned to it, this cannot be higher than the max, but can be altered on the fly (if I recall correctly).</p>
<pre><code>virsh setmaxmem $vm $ram</code></pre>
<p>The max mem sets the maximum amount of RAM the VM can use, and can only be set whilst the VM is offline</p>
<p>My recommendation here is to set a higher maxmem than you'd need, so if you do need to add some more RAM, it doesn't require any downtime.<p>
<h2>Change vCPU cores</h2>
<p>This is a little more tricky, as it involves editing the XML file</p>
<pre><code>virsh edit $vm</code></pre>
<p>Then edit the vcpus section, change between the tags</p>
<pre><code>&lt;vcpu placement='static'&gt;$vcpus&lt;/vcpu&gt;</code></pre>
<h2>Connect via serial/console</h2>
<p>This is a means to connect to your VMs via terminal</p>
<pre><code>virsh console $vm</code></pre>
<p>To do this you will likely need to first run the following command on the VM itself. This won't be required if you created the VM with console, but best to double check.</p>
<pre><code>systemctl enable serial-getty@ttyS0.service</code></pre>
</section>
</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>

@ -1,91 +0,0 @@
<!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="keywords" content="Blog, articles, virtual machines, seperation of concerns, SoC, optimise">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>VM/Server Seperation of Concerns</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>VM/Server Seperation of Concerns</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">
<section>
<p class="intro">Seperation of Concerns is a principle used in Computer Science that helps seperate functionality, making things easier to work with, and avoiding issues that could occur with too much going on in one place</p>
<h2>Why seperate concerns for a server?</h2>
<p>Simple, once your server has a lot of services, and functionality going on, it gets hard to maintain, and can cause additional issues. For example, if a service dies and requires a reboot, that will end up rebooting all your other services too.</p>
<h2>How to seperate concerns</h2>
<p>Some people will seperate each service into their own VM, however I don't believe this to be efficient (in all cases).</p>
<p>What I recommend is to take your server needs, and break them down into logical blocks, adding each of these blocks to their own VMs. This will keep certain things contained alone, as you want them seperated as much as possible (NAS, etc).</p>
<div class="tblcon">
<table>
<thead><tr><th colspan="2">Concern/VM</th><th colspan="5">Services</th></tr></thead>
<tbody>
<tr>
<th colspan="2">Production Web Server</th>
<td>Nginx</td>
<td>PHP</td>
<td colspan="5">CertBot</td>
</tr>
<tr>
<th colspan="2">Staging Web Server</th>
<td>Nginx</td>
<td>PHP</td>
<td>CertBot</td>
<td colspan="5">mariaDB</td>
</tr>
<tr>
<th colspan="2">NAS</th>
<td colspan="5">OpenMediaVault</td>
</tr>
<tr>
<th colspan="2">SQL server</th>
<td colspan="5">mariaDB</td>
</tr>
<tr>
<th colspan="2">Torrent Box</th>
<td>Transmission</td>
<td>VPN (to external)</td>
<td>Sonarr</td>
<td>Radarr</td>
<td colspan="5">Ombi</td>
</tr>
</tbody>
</table>
</div>
<h2>Why not use a dedicated server for each concern?</h2>
<p>You can! No-one's going to stop you, but unless each concern <em>requires</em> (i.e. needs the dedicated hardware/isolation) its own dedicated server, it's hugely redundant. Again NAS as an example, would be good for a dedicated machine, as it'll be safer if there's no additional chance it goes down due to failure of an unrelated service.</p>
</section>
</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>

@ -1,78 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A beginners guide to front-end web development, from absolutely no knowledge, to a junior developer.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Web Development 101. Guide to web development.</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Web Development 101</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">
<section>
<p>Interested in web development, but don't know where to begin? Don't worry, I've got you covered.</p>
<h2>My guides</h2>
<p>For each of my guides I recommend typing out the code snippets individually instead of copy and pasting, as it'll help you remember and learn.</p>
</section>
<section>
<h2>Getting started</h2>
<ul>
<li><a href="/guides/your-first-webpage.html">Your first webpage</a></li>
<li><a href="/guides/webpage-to-website.html">Webpage to website</a></li>
</ul>
</section>
<section>
<h2>HTML</h2>
<ul>
<li>What is a tag/element?</li>
</ul>
</section>
<section>
<h2>CSS</h2>
<ul>
<li>What is a selector?</li>
</ul>
</section>
<section>
<h2>Javascript</h2>
</section>
<section>
<h2>Snippets</h2>
</section>
</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>

@ -1,131 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Following on from the previous guide, this will cover creating a website from the single webpage we currently have. Links, additional design, all the shebang.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Webpage to website</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Webpage to website</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">
<section>
<p>With a <a href="/guides/your-first-webpage.html">basic webpage</a> now created, the next hurdle is to add multiple pages, and get them all linked together into a website of some sort.</p>
<h2>Create a new page</h2>
<p>First off we need a second page, with its own unique name. Let's call it <strong>about.html</strong>.</p>
<p>To quickly get this up, copy and paste the <strong>index.html</strong> file from the previous guide, and simply rename it.</p>
<h2>Link the pages</h2>
<p>Next up, creating our links. We're going the <em>traditional</em> route, with a navbar. So at the top of the body tag, above the other content, add the following.</p>
<pre><code>&lt;nav&gt;
&lt;a href="index.html"&gt;Home&lt;/a&gt;
&lt;a href="about.html"&gt;About&lt;/a&gt;
&lt;/nav&gt;</pre></code>
<p>The key part of the snippet is the <strong>anchor/a</strong> tag, as this tells the browser to create the link to the files in the hrefs.</p>
<h3>Style the navigation</h3>
<p>In the style tag, add the following (I recommend at the bottom of what's already there). Then give the page a reload.</p>
<pre><code>nav{
background-color: white;
border-bottom: 1px solid gainsboro;
padding: 12px;
}
nav a{
padding: 12px;
text-decoration: none;
font-weight: bold;
}
nav a:hover{
background-color: black;
color: white;
}</code></pre>
<p>Give each link a click to check everything's alright. Doing this you may spot the nav styling is only on one page, oops, simple mistake. To fix this you'll have to open up the other HTML file, and add the styling in there too.</p>
<h2>Make the styling global</h2>
<p>With multiple pages up, imagine for a second if you had 10-15 more pages. How much of a pain would changing some styling be? Even just a simple colour change would be mega annoying, and time consuming. <em>Open file, change style, save, and repeat...</em></p>
<p>Thankfully there's a simple solution to this problem, and it's actually best-practice to do this for every website!</p>
<h3>External CSS</h3>
<p>Our current internal stylesheet is now a hindrence as we've got multiple pages. So what we're going to do is take its content, and pop it into its own file.</p>
<h3>How</h3>
<p>First off, create a new file (same place as the .html files) called <strong>main.css</strong>, this will be our external stylesheet.</p>
<p>Next, open up one of the .html pages, and copy everything between the style tags, paste it into the CSS file, and save each file.</p>
<p>Now we've got the styling, we can get rid of the internal CSS entirely. Delete the style tags, and everything between from the .html pages, and replace them with the following snippet.</p>
<pre><code>&lt;link rel="stylesheet" type="text/css" href="main.css"&gt;</code></pre>
<p>Reload, and voila! The site looks exactly the same. It's just easier to manage now.</p>
<h2>Footer</h2>
<p>To finish things off, why not add a quick footer proclaiming our copyright of the site?</p>
<p>Add the following snippet just before the closing <code>&lt;/body&gt;</code> tag.</p>
<pre><code>&lt;footer&gt;
&lt;p&gt;&copy; Aney 2022 | Made with &heartsuit;&lt;/p&gt;
&lt;/footer&gt;</code></pre>
<p>And a little styling to the CSS file.</p>
<pre><code>body{
display: flex;
flex-direction: column;
}
main{
flex: 1 0 auto;
}
footer{
background-color: black;
color: white;
}</code></pre>
<p>You may notice that body has already been used in the CSS, and that's OK thanks to the cascading nature of CSS. This can become a problem if you have the same selectors scattered around though, as it can begin to override styling. To avoid this problem I recommend having just the one location for each selector. So take the new <strong>body</strong> styling, and add it to the pre-existing body styling near the top of your CSS file.</p>
<h2>We got a website</h2>
<p>A little bit of content here, and there. A couple of styling tweaks, and a few more pages then you've got your very first website.</p>
<p>From here there are a few different directions. You could:</p>
<ol>
<li>Follow along to the rest of my <a href="/guides/web-dev-101.html">web-dev 101</a></li>
<li>Venture to the internet and learn everything you can about web development</li>
<li><a href="/guides/guide-to-server-hosting.html">Setup a server</a>, pop what you've got on the worldwide web, and call it a day</li>
</ol>
<p>Whatever you choose to do, I offer you the best of luck.</p>
</section>
</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>

@ -1,172 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Ever thought of building your own website from scratch? This guide covers the basics of creating a webpage, leading on to learning more about the structure, and functionality needed to create one yourself.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Your first webpage</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Your first webpage</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">
<section>
<p>In my opinion learning is done by doing, so where better to start than making your own basic webpage. This assumes you already have a text editor; you can use Notepad, Vim, etc. but if you're learning coding, I recommend <a href="https://code.visualstudio.com/" target="_blank" rel="noopender">Visual Studio Code</a></p>
<h2>Create your html file</h2>
<p>First you need to create the file where the code will reside. For this guide (and others) I recommend making a new folder/directory to put your files in. Once you've created the new directory, make a new file inside of it, naming said file <b>index.html</b> (you may need to show filetypes to rename .txt to .html. So check here for <a href="https://support.apple.com/en-az/guide/mac-help/mchlp2304/mac" target="_blank" rel="noopener">MacOS</a>, or <a href="https://knowledge.autodesk.com/support/autocad/learn-explore/caas/sfdcarticles/sfdcarticles/How-to-enable-hidden-file-extensions-in-Windows.html" target="_blank" rel="noopener">Windows</a>).</p>
<h2>Basic Boilerplate</h2>
<p>There are some default things that each webpage needs to be 'compliant' with the web, so I recommend starting each page in the same way.</p>
<p>Add the following code snippet into your file, and save.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></code>
<p>Now if you double click the file it'll open a blank page in your browser (if you've got the .html extension). That's to be expected, as there's no actual content (yet).</p>
<p>Before we do get to the content, let's break down this snippet a little. The aim is to learn, not to blindly copy/paste, right?</p>
<h3>Snippet explaination</h3>
<p><b><code>&lt;!DOCTYPE html&gt;</code></b> a standalone tag that tells the browser what document type to expect. We're using HTML5, so it's a short and simple declaration.</p>
<p><b><code>&lt;html lang="en"&gt;</code></b> this element is a container for (almost) all the rest of the HTML, as it tells the browser everything inside it needs to be rendered as HTML, and which language the content is.</p>
<p><b><code>&lt;head&gt;</code></b> is a container for metadata (data about data), it gives the browser all the info it needs, to render the page how we want it. Anything between the <b>head</b> tags will not be <em>directly</em> shown on the webpage.</p>
<p><b><code>&lt;body&gt;</code></b> this is a container for the content/body of the webpage. This is where visible elements, and content is applied.</p>
<h2>Basic Content</h2>
<p>So now we'll add some visible content, to make a <em>real</em> webpage, and not just a blank page.</p>
<p>Between the <b>body</b> tags, we'll add a very simple introduction about ourselves. Change the content between the tags to whatever you want. I'll explain them in a later guide, but for now just play around.</p>
<pre><code>&lt;main&gt;&lt;div class="layout-wrapper"&gt;
&lt;h1&gt;Hi, I'm &lt;em&gt;Aney&lt;/em&gt;&lt;/h1&gt;
&lt;p&gt;Welcome to my site, it's pretty cool!&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;p&gt;I have an assortment of &lt;em&gt;skills&lt;/em&gt;, including:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Being swag&lt;/li&gt;
&lt;li&gt;Getting the bag&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Portfolio&lt;/h2&gt;
<!-- Any image on the internet can go here -->
&lt;img src="https://via.placeholder.com/200x200/"&gt;
&lt;img src="https://via.placeholder.com/200x200/"&gt;
&lt;img src="https://via.placeholder.com/200x200/"&gt;
&lt;/div&gt;&lt;/main&gt;</pre></code>
<p>Now if you refresh the webpage, tada! We have content.</p>
<h2>A little styling</h2>
<p>With content on the page we're done, right? However those keen eyed of you may notice it doesn't look very good, so we'll spice that up a with some basic CSS styling.</p>
<p>Between the <b>head</b> tags, we'll add the style tag, allowing us to embed the CSS into the page.</p>
<pre><code>&lt;style&gt;
&lt;/style&gt;</pre></code>
<h3>The CSS</h3>
<p>For the actual styling, add the following snippet between the <b>style</b> tags.</p>
<pre><code>html,body{
height: 100%;
}
html{
font-size: 12px;
background: #EEE;
background: linear-gradient(0, #DDD 0%, #EEE 35%, #FFF 55%, #EEE 100%);
}
body{
margin: 0;
text-align: center;
font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
.layout-wrapper{
margin: 0 auto;
padding: 4px 12px;
max-width: 980px;
}
h1{
font-size: 22px;
background-color: #10106b;
color: white;
}
/* The selector below styles em, but only if it's inside a h1 */
h1 em{
color: #8cecf5;
}
h2{
font-size: 20px;
background-color: #020024;
color: white;
}
p{
font-size: 14px;
}
ul{
padding: 0;
list-style-position: inside;
list-style-type: square;
}
img{
border: 2px solid #10106b;
border-style: dashed;
}
img:hover{
border-color: ##6f6fa5;
}</pre></code>
<p>Note how we specify the name of the HTML tags in the CSS. They're a direct one-to-one, so adding styling to ul in the CSS, changes the appearance of ul in the HTML.</p>
<h4>Customise your site</h4>
<p>I've intentionally made the styling <em>"cool"</em> and <em>experimental</em> for those unfamiliar with CSS. That means that there should be some wiggle room for you to figure out, and mess around with it, to find something you like.</p>
<p>If you're unsure about the #10106b, etc. they're colours, take a quick look <a href="https://www.google.com/search?q=hex+colour+picker&rlz=1C1CHBF_enGB948GB948&oq=hex&aqs=chrome.2.69i57j0i131i433i512l2j46i433i512j0i131i433i512j69i61l3.3688j0j7&sourceid=chrome&ie=UTF-8" target="_blank" rel="noopener" >here</a>.</p>
<h2>Page title</h2>
<p>You know those titles that show at the top of your browser/in tabs? We're going to add that in.</p>
<p>Between the head tags, and above the style tag add the following.</p>
<pre><code>&lt;title&gt;My website&lt;/title&gt;</pre></code>
<p>Reload your webpage and you should spot it. It doesn't show on the page itself, but it will show in your browser tab (hover over it if it doesn't all fit).</p>
<h2>It's done!</h2>
<p>Your first webpage is official complete. Before you start applying for jobs in the field, I do recommend looking at the rest of my <a href="/guides/web-dev-101.html">Web Development 101</a> guide. This will cover the most common elements, more CSS styling, a little Javascript for client-side scripting, and a few additional snippets.</p>
</section>
</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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 389 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 360 B

@ -3,7 +3,9 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Aney's self hosted network's homepage">
<meta name="description" content="The homepage for anyone finding Aney's small, self-hosted network/homelab">
<meta name="keywords" content="Self-hosted, Homepage, HTML, CSS">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
@ -14,14 +16,11 @@
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's Network</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="/equipment.html">equipment</a>
<a href="/projects.html">projects</a>
<a href="/blog/">blog</a>
<a href="/sitemap.html">misc</a>
@ -30,27 +29,29 @@
<hr/>
</header>
<main id="main">
<main>
<section>
<h2>I'm Aney</h2>
<p>A developer, and self-hoster that enjoys art/design, automation, Unix, and intentional living.</p>
<p>Somehow you've landed on my website, welcome!</p>
<h3>What this, then?</h3>
<p>It's my little place on the world wide web. It serves the purpose of being a one-stop location I can refer people to when they ask things, like:</p>
<ul>
<li><a href="/about.html">Who are you?</a></li>
<li>Who are you?</a></li>
<li><a href="/equipment.html">What hardware do you use?</a></li>
<li><a href="/blog/reducing-homelab.html">Why are your servers down?</a></li>
<li><a href="/guides/guide-to-server-hosting.html">How can I setup a server?</a></li>
<li><a href="/cv.html#contact">Can I hire you?</a></li>
<li>How about software?</a></li>
<li>What's in your onebag?</a></li>
<li>Why does your website look like that?</li>
<li>Anime recommendations?</li>
</ul>
<p>If you've found my site useful, you can support me by sharing any posts, and/or pages you enjoy to your friends, or by donating to me via my <a href="/support.html">Support page</a>.</p>
<h3>Where are the pictures?</h3>
<p>I've written this website with the intention to keep it minimal, quick, small, and easily self-hosted. I decided that there was little reason to bloat the pages with images, that add little value, as all they will do is prevent people with poor internet from visiting.</p>
</section>
</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>
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
</footer>
</body>
</html>

@ -1,151 +1,103 @@
html,body{height:100%}
html{font-size:15px}
header{position:relative}
header hr{display:none}
html, body {height: 100%;}
html{font-size: 14px;}
body{
max-width:768px;
margin:auto;padding:0 1.24rem;
font:1.25rem/1.5 sans-serif;color:#556;
display:-webkit-flex;display:-ms-flexbox;display:flex;
flex-direction:column}
main{flex:1 0 auto}
nav{
box-sizing:border-box;
z-index:9}
nav>a{
padding:.2rem 0;
display:block}
h1,h2,h3,h4,h5,h6{line-height:1}
header h1{margin:1.4rem 52px 1.2rem auto}
h1{color:#000}h2{color:#111}h3{color:#222}
h4,h5,h6{color:#333}
margin:0.2rem auto;
max-width:48rem;
padding:0 .62rem;
font:1.2rem/1.62 sans-serif;
}
h1,h2,h3,h4,h5,h6 {
line-height: 1;
}
header h1{
margin-top: 1.4rem;
margin-bottom: 1.2rem;
}
a{
text-decoration: none;
}
a:link, a:visited {color:#087ca7;}
a:hover, a:visited:hover {color:#09b2dc;}
ul{
padding-left: 0;
margin-left: 0;
list-style-position: inside;
}
li > ul{
margin-left: 1em;
}
footer p{
margin: 0;
}
a{text-decoration:none; border-bottom: 1px dotted #999}
a:link,a:visited{color:#07C}
a:hover,a:visited:hover{color:#1AE}
a.ref,a.ref:visited{color:#554}
/* Special Design */
.tag{
font-size: 0.8rem;
padding: 0.2rem;
border-radius: 0.33rem;
background-color: #191919;
color: white;
vertical-align: middle;
}
ul{padding-left:0;margin-left:0;list-style:inside}
ul li{margin:.35rem}
li>ul{margin-left:1em}
/*
* Flex is only there to put the footer at the bottom.
* Not actually needed. BLOAT!!
*/
body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
main{
flex: 1 0 auto;
}
.tag{
font-size:.8rem;vertical-align:middle;
padding:.2rem .5rem;border-radius:.33rem;
border:1px solid #CCC}
pre{
background:#EEE;padding:1rem;
white-space:pre-wrap;overflow-x:auto;
border:1px solid #DDD;border-radius:6px;
-moz-tab-size:4;-o-tab-size:4;tab-size:4}
.pre--small{font-size:.9rem;line-height:1.3rem}
code{
background:#EEE;padding:.05rem .4rem;
border:1px solid #DDD;border-radius:6px}
pre code{border:none;padding: 0;}
blockquote{
margin:0 .2rem;
border-left:2px solid;
padding:.4rem;padding-left:.8rem}
.page-nav{
float:right;
padding:14px;border:1px solid;
margin:1.4rem;margin-right:auto}
.sr{
position:absolute;overflow:hidden;
left:-9999px;top:auto;
width:1px;height:1px;
}
.vh{
position:absolute;
clip:rect(1px,1px,1px,1px);
height:1px;width:1px;
padding:2px 8px;overflow:hidden;
white-space:nowrap;
background:#FFF;z-index:10}
.vh:focus{
clip:auto;overflow:auto;
height:auto;width:auto}
.tblcon{overflow-x:auto}
footer {padding-bottom:.7rem}
footer p{margin:0}
@media (prefers-color-scheme: dark){
body {color:#fff;background:#191919;}
a:link, a:visited {color:#9cf;}
a:hover, a:visited:hover {color:#DA4167;}
.tag{background-color:white; color:black;}
}
table{text-align:left;width:100%;
border-collapse:collapse;
overflow-wrap:normal;
margin:24px 0}
td,th{border:1px solid #CCC;padding:9px 6px}
th{padding:12px}
thead tr{background:#FFF}
tbody tr:nth-child(odd){background:#EEE}
tbody tr:hover{background:#DDD}
@media print{
body{
max-width:none
}
}
table.erd{font-size:1rem;width:auto;display:inline-block;margin:.5rem .3rem;vertical-align: top}
table.erd td, table.erd th{padding:.4rem}
/* For Media over the mobile view */
@media screen and (min-width: 601px){
nav>a{
margin-left: 2rem;
}
nav>a:first-child{
padding: 1rem 0;
padding-left: 0;
margin-left: 0;
}
}
.burger-container{
position:absolute;height:34px;width:36px;
cursor:pointer;top:25px;right:1.24rem;
position:fixed;background:#FFF;
border:2px solid #EEE;border-radius:6px;
z-index:9}
#burger-toggle,#burger-toggle~nav{display:none}
.burger{left:3px;top:7px}
.burger,.burger::after,.burger::before{
position:absolute;background:#000;
height:4px;width:30px;border-radius:2px;content:"";
transition:transform 300ms cubic-bezier(.4,1,.5,1)}
.burger::before{margin-top:8px}
.burger::after{margin-top:16px}
#burger-toggle:checked~nav{display:block}
#burger-toggle:checked+.burger-container .burger::before{margin-top:8px;transform:rotate(45deg)}
#burger-toggle:checked+.burger-container .burger::after{margin-top:8px;transform:rotate(-45deg)}
#burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)}
/* For Media under the mobile view */
@media screen and (max-width: 600px){
body{
margin: 0.2rem;
text-align: center;
}
nav>a{
padding: 0.2rem 0;
display: block;
border-top: 1px dotted black;
}
nav>a:first-child{
border: none;
}
}
@media print{body{max-width:none}}
@media(min-width:720px){
body{margin:.2rem auto}
nav>a{margin-left:2rem;display:inline;border:none}
nav>a:first-child{margin-left:0}
ul li{margin:auto}
.burger-container{display:none}
#burger-toggle~nav,header hr{display:block}
}
@media(min-width:320px) and (max-width:719px){
nav{height:100%;
width:50%;min-width:250px;
position:fixed;
top:0;right:1.24rem;
padding:85px 1.24rem 1.24rem;
background:#FFF;border-left:1px solid #EEE;
z-index:8}
code{white-space:pre}
}
@media(max-width:320px){
#burger-toggle~nav{display:block}
.burger-container{display:none}
header h1{margin-right:auto}
body{overflow-wrap:anywhere}
img{width:100%;height:auto}
@media screen and (max-width: 600px) and (prefers-color-scheme: dark){
nav>a{
border-color: white;
}
@media(prefers-color-scheme:dark){
body{color:#CCC;background:#211F1C}
a:link,a:visited{color:#9CF}
a:hover,a:visited:hover{color:#C34}
nav{background:#211F1C;border-color:#555}
nav>a{border-color:#555}
a.ref,a.ref:visited{color:#DDD}
.burger-container{border:2px solid #555;background:#555;}
.burger,.burger::after,.burger::before{background:#EEE}
h1{color:#FFF}h2{color:#EEE}
h3,h4,h5,h6{color:#DDD}
td,th{border-color:#556}
thead tr{background:#211F1C}
tbody tr:nth-child(odd){background:#222}
tbody tr:hover{background:#333}
pre{background:#333;color:#EEE;border-color:#555}
code{background:#333}
.tag{border-color:#555;cursor:default}
}

@ -3,25 +3,24 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Aney's project list">
<meta name="description" content="A collection of current, previous, and future (mostly software) projects.">
<meta name="keywords" content="Projects, Portfolio">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Project List</title>
<title>Projects</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's Projects</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="/equipment.html">equipment</a>
<a href="/projects.html">projects</a>
<a href="/blog/">blog</a>
<a href="/sitemap.html">misc</a>
@ -30,37 +29,21 @@
<hr/>
</header>
<main id="main">
<main>
<section id="projects">
<h2>Current Projects</h2>
<section id="anetwork">
<h3><a href="https://anetwork.uk" target="_blank" rel="noopener">aNetwork</a></h3>
<p>A gaming community, and public server host. Halted, and to be restarted from scratch.</p>
<p>This will consist of a website, server hosting, and community/server administration.</p>
<p>Skills: <span class="tag">HTML</span> <span class="tag">CSS</span> <span class="tag">JS</span> <span class="tag">Linux</span> <span class="tag">System&nbsp;Administration</span></p>
</section>
<section>
<h3>Project 1</h3>
<p>You can read a little about it on my <a href="/blog/p1-the-stack-and-rooms.html" rel="noopener">Project 1 Devlog</a>.</p>
<p>Skills: <span class="tag">JS</span> <span class="tag">HTML Canvas</span> <span class="tag">NodeJS</span> <span class="tag">Socket.IO</span> <span class="tag">SQL</span></p>
</section>
<h2>'Completed' Projects</h2>
<section id="website">
<h3><a href="https://aney.co.uk" target="_blank" rel="noopener">Personal Website</a></h3>
<section id="aney-website">
<h3><a href="http://aney.co.uk" target="_blank" rel="noopener noreferrer">Personal Website</a></h3>
<p>A basic website to let me have my own little place on the internet.
<br/>You may recognise it, because you're using it right now!</p>
<p>Skills: <span class="tag">HTML</span> <span class="tag">CSS</span></p>
</section>
</section>
</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>
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
</footer>
</body>
</html>

@ -1,57 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A collection of recipes used, written, and altered by Aney. Bone jaw, I'm the chef.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Aney's Recipes</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's Recipes</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">
<section>
<p>A collection of recipes I use, mostly budget oriented, but always tastee.</p>
</section>
<section>
<ul>
<li><a href="/recipes/protein-oat-cookies.html">Protein Oat Cookies</a></li>
<li><a href="/recipes/woky-beef-stew.html">Woky Beef Stew</a></li>
<li><a href="/recipes/tortillas.html">Tortillas</a></li>
</ul>
<p>Recipes I have in markdown, that I haven't gotten around to converting to HTML for the site. Put through pandoc, will open in new tab with no decoration.</p>
<ul>
<li><a target="_blank" href="/recipes/pandoc/pork_and_apple_burger.html">Pork and Apple Burger</a></li>
</ul>
</section>
</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>

@ -1,37 +0,0 @@
<h1 id="pork-and-apple-burger">Pork and apple burger</h1>
<h2 id="time">Time</h2>
<p>~35m</p>
<h2 id="req">Req</h2>
<ul>
<li>Oven</li>
<li>Baking tray</li>
<li>Mixing Bowl</li>
<li>Knife</li>
</ul>
<h2 id="ingredients">Ingredients</h2>
<ul>
<li>1/2 Apple</li>
<li>Breadcrumbs ~10g</li>
<li>Pork mince ~250g</li>
<li>Cheese ~30g</li>
<li>Burger buns</li>
</ul>
<h3 id="optional">Optional</h3>
<ul>
<li>Salt, pepper</li>
</ul>
<h2 id="prep">Prep</h2>
<ul>
<li>Grate the apple</li>
</ul>
<h2 id="instructions">Instructions</h2>
<ol type="1">
<li>Combine the grated apple, breadcrumbs, and a pinch of salt and
pepper in a bowl. Add the pork mince, and mix together by hand.</li>
<li>Roll the mince into two even balls, then shape into ~1cm thick
burgers. Create a dent in the centre of each patty.</li>
<li>Add the burgers onto a baking tray and make for ~12-15 mins.</li>
<li>(Optional) Once cooked add cheese to the top of the burgers, and add
burger buns (halfed and faced up) to the baking tray. Cook for another
2-3 mins.</li>
</ol>

@ -1,112 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A simple, quick, and delicious torilla recipe.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Protein Oat Cookies</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Protein Oat Cookies</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">
<aside class="page-nav">
<ul>
<li><a href="#requirements">Requirements</a></li>
<li><a href="#ingredients">Ingredients</a></li>
<li><a href="#instructions">Instructions</a></li>
</ul>
</aside>
<section>
<h2 id="requirements">Requirements</h2>
<p>Time: 10-15 mins</p>
<ul>
<li>Scales</li>
<li>Wooden Spoon</li>
<li>Mixing Bowl</li>
<li>Pan</li>
<li>Baking Tray</li>
<li>Stovetop</li>
<li>Oven</li>
</ul>
</section>
<section>
<h2 id="ingredients">Ingredients</h2>
<p>These are the ingredients for five cookies.</p>
<p>Dry ingredients (can be measured together in same bowl)</p>
<ul>
<li>200g Oats (Whole Preferred)</li>
<li>2&#189;1/2 (~80-90g) Scoops Protein Powder</li>
<li>~20g/5tsp Chia Seeds</li>
<li>~20g/5tsp Ground Almond</li>
<li>50g Chocolate (Optional)</li>
</ul>
<p>Other Ingredients</p>
<ul>
<li>60g Sultanas</li>
<li>100g Honey</li>
<li>100g Butter/Lard</li>
<li>100ml Warm Water</li>
</ul>
</section>
<section>
<h2 id="instructions">Instructions</h2>
<ol>
<li>
<h3>Heat up the mixture</h3>
<p>Add the Sultanas, Honey, and Butter to a pan.</p>
<p>Put the pan on a low-medium heat, and stir occassionally until the butter and honey is liquified.</p>
</li>
<li>
<h3>Combine the dry ingredients</h3>
<p>In a bowl add the Oats, Protein Powder, Chia Seeds, and Almond Powder.</p>
<p>Mix to combined.</p>
</li>
<li>
<h3>(Optional) Add the Chocolate</h3>
<p>Smash some chocolate to oblivion, or use choc. chips.</p>
<p>Add the chocolate into the dry ingredients.</p>
</li>
<li>
<h3>Combine all the ingredients</h3>
<p>Create a well in the dry ingredients bowl, and pour in the heated mixture.</p>
<p>Mix well to combined.</p>
</li>
<li>
<h3>Slam 'em in the oven</h3>
<p>Seperate the mixture into 5 equally sized balls/piles on the baking tray.</p>
<p>Press each ball down lightly with the back of the spoon.</p>
<p>Put in the oven for around 7 minutes, at 180&deg;C</p>
</li>
</ol>
</section>
</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>

@ -1,104 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A simple, quick, and delicious torilla recipe.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Tortillas</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Tortillas</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">
<aside class="page-nav">
<ul>
<li><a href="#requirements">Requirements</a></li>
<li><a href="#ingredients">Ingredients</a></li>
<li><a href="#instructions">Instructions</a></li>
</ul>
</aside>
<section>
<h2 id="requirements">Requirements</h2>
<p>Time: ~30 minutes</p>
<ul>
<li>Scales</li>
<li>Wooden Spoon</li>
<li>Mixing Bowl</li>
<li>Pan</li>
<li>Stovetop</li>
</ul>
</section>
<section>
<h2 id="ingredients">Ingredients</h2>
<p>These are the ingredients for four small torillas</p>
<ul>
<li>100g Flour</li>
<li>2g Coarse Salt</li>
<li>2g Baking Powder</li>
<li>18g Melted Butter, <strong>or</strong> 18g oil/melted lard</li>
<li>60ml(/g) Warm Water</li>
</ul>
</section>
<section>
<h2 id="instructions">Instructions</h2>
<ol>
<li>
<h3>Combine the dry ingredients</h3>
<p><em>~ 30seconds-1min</em></p>
<p>Add the flour, salt, and baking powder to a bowl.</p>
<p>Mix to combined.</p>
</li>
<li>
<h3>Mix in the wets</h3>
<p><em>~ 1min</em></p>
<p>Melt the butter/lard.</p>
<p>Create a well in the centre of the dry mix, and pour in the butter, and warm water.</p>
<p>Mix the liquids in the well from the bottom up until it is all combined, and a dough is formed.</p>
</li>
<li>
<h3>Knead, seperate, and rest</h3>
<p><em>~ 25min</em></p>
<p>Knead the dough, first in the bowl, then on a lightly floured surface.</p>
<p>Divide the dough into four equal portions, and coat lightly with flour.</p>
<p>Leave the doughballs to rest for 20mins to an hour, in a warm area.</p>
</li>
<li>
<h3>Make them 'tillas</h3>
<p><em>~ 5mins</em></p>
<p>Bring your pan to a medium heat.</p>
<p>Roll each of the balls out into a circle, approx 6-7inches.</p>
<p>When the pan is hot, add each tortilla to the pan one at a time.</p>
<p>Cook one side for ~45s-1m, flip and cook the other for ~15-30seconds.</p>
</li>
</ol>
</section>
</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>

@ -1,149 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A simple, filling, and tasty beef stew cooked in a wok.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>Woky Beef Stew</title>
</head>
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Woky Beef Stew</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">
<aside class="page-nav">
<ul>
<li><a href="#requirements">Requirements</a></li>
<li><a href="#ingredients">Ingredients</a></li>
<li><a href="#preperation">Preperation</a></li>
<li><a href="#instructions">Instructions</a></li>
</ul>
</aside>
<section>
<p>This is an incomplete recipe, as I still need to get the seasonings down. Feel free to use, but just note it's not in its entirety.</p>
</section>
<section>
<h2 id="requirements">Requirements</h2>
<p>Time: ~1.5 hours</p>
<ul>
<li>Measuring jug</li>
<li>Wok</li>
<li>Wooden Spoon</li>
<li>(Chef's) Knife</li>
<li>Cutting Board</li>
<li>Tinfoil, or lid for wok</li>
<li>Bowl</li>
</ul>
</section>
<section>
<h2 id="ingredients">Ingredients</h2>
<p>These are the ingredients for two adult portions</p>
<ul>
<li>200g (Stewing) Steak (Diced)</li>
<li>1 Potato (Diced)</li>
<li>~1.5 Carrot (Sliced)</li>
<li>.5 Onion (Sliced)</li>
<li>.5 celery stalk (Sliced)</li>
<li>2 tsp Corn starch (mixed with water)</li>
<li>~75g Peas (Frozen or not)</li>
<li>~75g Corn (Frozen or not)</li>
<li>1.5 tbsp tomato puree</li>
<li>.5 tin chopped tomatos</li>
<li>300ml (boiling) water</li>
<li>1 beef/vegetable stock cube</li>
</ul>
<h3>Seasonings</h3>
<ul>
<li>1 tsp Salt</li>
<li>1 tsp Oregano</li>
<li>.5 tsp Basil</li>
<li>1 tsp Paprika</li>
<li>1 tsp Cinnamon</li>
<li>1 tsp Sugar</li>
<li>.5 tsp Turmeric</li>
<li>1 Garlic clove (Bashed)</li>
</ul>
</section>
<section>
<h2 id="preperation">Preperation</h2>
<p>Chop the ingredients as stated in the ingredients section.</p>
<p>Add stock cube(s) into the measuring jug, then fill with the boiling water. Mix until disolved little.</p>
<p>Add cornstarch into a mug/bowl with a little cold water and mix until a paste.</p>
</section>
<section>
<h2 id="instructions">Instructions</h2>
<ol>
<li>
<h3>Brown the beef/steak</h3>
<p><em>5-10 minutes</em></p>
<p>Add the wok to the stove, and set to a high heat for a few minutes.</p>
<p>Add a splash of oil, then the meat.</p>
<p>Allow the meat to brown on all sides, 'stirring' occassionally.</p>
<p>Once browned drain the fat.</p>
</li>
<li>
<h3>Add the flavour (and celery)</h3>
<p><em>3-5 minutes</em></p>
<p>Add the onion, celery, seasonings, and puree to the wok.</p>
<p>Stir thoroughly so that the puree and seasoning covers everything.</p>
<p>Slowly stir-fry for 1-3 minutes.</p>
</li>
<li>
<h3>Add the liquids</h3>
<p><em>15-20 minutes</em></p>
<p>Add the chopped tomatos, and the stock to the wok.<p>
<p>Mix the contents together.</p>
<p>Season to taste with salt/pepper. If unsure, just leave it as is.</p>
<p>Bring to a boil, then reduce the stoves heat.</p>
<p>Cover the wok with a lid, or some tinfoil, and leave to sit for 15-20 minutes.</p>
</li>
<li>
<h3>Add large veg</h3>
<p><em>20-25 minutes</em></p>
<p>Add the cornstarch mixture to the stew, and mix through.</p>
<p>Add the carrot, and potato to the wok.</p>
<p>Bring the stew back to a boil, then reduce the heat.</p>
<p>Re-cover the wok and leave for 20-25 minutes.</p>
</li>
<li>
<h3>Add small veg</h3>
<p><em>10-15 minutes</em></p>
<p>Add the peas, and corn, and mix through the stew.</p>
<p>Re-cover the wok again, and leave for another 10-15 minutes.</p>
</li>
<li>
<h3>Simmer or serve</h3>
<p><em>0-60 minutes</em></p>
<p>The stew should be good to serve now, however if you'd like it a little thicker, or the beef/veg a little softer then leave to simmer for up to an hour.</p>
</li>
</ol>
</section>
</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>

@ -4,5 +4,5 @@ Disallow: /files/
User-agent: *
Allow: *
Sitemap: https://aney.co.uk/sitemap.xml
#Sitemap: https://www.aney.co.uk/sitemap.xml

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Aney's Sitemap">
<meta name="description" content="The sitemap for aney.co.uk, now you can finally find that page you're after">
<meta name="keywords" content="Sitemap, aney.co.uk">
<meta name="author" content="Nathan (Aney) Steel">
@ -15,14 +16,11 @@
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's Sitemap</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="/equipment.html">equipment</a>
<a href="/projects.html">projects</a>
<a href="/blog/">blog</a>
<a href="/sitemap.html">misc</a>
@ -31,11 +29,10 @@
<hr/>
</header>
<main id="main">
<main>
<section>
<ul>
<li><a href="/">home</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/equipment.html">equipment</a></li>
<li><a href="/projects.html">projects</a></li>
<li><a href="/sitemap.html">sitemap/misc</a></li>
@ -50,18 +47,17 @@
<ul>
<li><a href="/blog/">blog</a>
<ul>
<li><a href="/blog/web-bloat.html">Web Bloat</a></li>
<li><a href="/blog/ive-started-a-blog.html">I've started a blog</a></li>
</ul>
</li>
<li><a href="/guides/">guides</a></li>
<li><a href="/recipes/">recipes</a></li>
</ul>
</section>
</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>
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
</footer>
</body>
</html>

@ -1,257 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
<url>
<loc>https://aney.co.uk/</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>1.00</priority>
</url>
<url>
<loc>https://aney.co.uk/about.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>https://aney.co.uk/projects.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>https://aney.co.uk/blog/</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>https://aney.co.uk/sitemap.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>https://aney.co.uk/support.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>https://aney.co.uk/equipment.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>https://aney.co.uk/blog/reducing-homelab.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/guide-to-server-hosting.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>https://aney.co.uk/cv.html</loc>
<lastmod>2024-05-11T17:32:29+00:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/web-dev-101.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/recipes/</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/blog/release-0.9.0.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/blog/burger-menu.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/blog/blog-thoughts-220822.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/blog/my-steamdeck-arrived.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/blog/ive-started-a-blog.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/websites.html</loc>
<lastmod>2024-05-11T17:32:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/server-install-debian.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/initial-server-setup.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/get-a-domain-name.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/add-domain-to-server.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/setup-qemu-kvm.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/setup-kvm-bridge.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/install-kvm-virtual-machine.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/kvm-optimisation.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/virsh-cheatsheet.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/nginx-install.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/setup-nginx-website.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/certbot-ssl.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/nginx-web-optimisation.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/add-php-to-nginx.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/install-mysql-mariadb.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/sql-cheatsheet.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/adminer-setup.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/backup-mysql-mariadb.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/backup-with-rsync.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/backup-with-rdiff.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/backup-with-cron.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/nginx-proxy.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/password-protect-webpage.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/setup-git-server.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.64</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/webpage-to-website.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.51</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/your-first-webpage.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.51</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/set-static-ip.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.51</priority>
</url>
<url>
<loc>https://aney.co.uk/guides/vm-seperation-of-concerns.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.51</priority>
</url>
<url>
<loc>https://aney.co.uk/recipes/woky-beef-stew.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.51</priority>
</url>
<url>
<loc>https://aney.co.uk/test.html</loc>
<lastmod>2024-05-10T21:55:29+00:00</lastmod>
<priority>0.51</priority>
</url>
</urlset>

@ -3,7 +3,9 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Aney's favourite websites, or something like that">
<meta name="description" content="A collection of methods you can use to support, and help finance Aney's projects">
<meta name="keywords" content="donate, support, funding">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
@ -14,14 +16,11 @@
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Support Me</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="/equipment.html">equipment</a>
<a href="/projects.html">projects</a>
<a href="/blog/">blog</a>
<a href="/sitemap.html">misc</a>
@ -30,36 +29,26 @@
<hr/>
</header>
<main id="main">
<main>
<section>
<p>If you'd like to support me, the site, or any projects I'm working on, thank you.</p>
</section>
<section>
<h2>Ko-fi</h2>
<p>Donate with <a href="https://ko-fi.com/siraney" target="_blank" rel="noopener">Ko-fi</a></a>
<p><a href="https://ko-fi.com/siraney" target="_blank" rel="noopener noreferrer">Donate me a hot choccy</a></a>
<h2>BAT (Brave)</h2>
<p>If you use the Brave browser, this site is setup to accept BAT. Press the triangle in the search bar.</p>
<p>If you use the Brave browser, this site is setup to accept BAT.</p>
<h2>Liberapay</h2>
<p>Donate with <a href="https://liberapay.com/aney/donate" target="_blank" rel=noopener">Liberapay</a></p>
</section>
<section>
<h2>What the money do?</h2>
<p>Your contribution will go towards:</p>
<ul>
<li>Purchases, such as hosting, domains, hardware, etc.</li>
<li>Funding the time it takes to write articles, and guides</li>
<li>Any projects I am currently working on</li>
</ul>
<h2><del>Liberapay</del></h2>
<p>I've yet to set this up, but when I do I'll likely push this.</p>
</section>
</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>
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
</footer>
</body>
</html>

@ -1,361 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A page with all HTML elements used on Aney's website. Attempted to get all elements, even those not used so it's easier to test.">
<meta name="author" content="Nathan (Aney) Steel">
<meta name="theme-color" content="white">
<meta name="theme-color" content="black">
<link rel="stylesheet" type="text/css" href="/main.css">
<link rel="stylesheet" type="text/css" href="/css/test.css">
<link rel="icon" type="image/png" href="/images/favicon.svg">
<title>HTML element test page</title>
</head>
<body id="top">
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>HTML element test page (h1)</h1>
<input id="burger-toggle" type="checkbox"/>
<label class="burger-container" for="burger-toggle"><div class="burger"></div><div class="sr">Burger menu</div></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">
<section>
<h1>HTML element test page (h1)</h1>
<p>Welcome, you've found my testing page. A page with all HTML elements I could drop in (even if not used on site), that is used for testing my CSS to ensure it's works everywhere I can get it to.</p>
<h2>heading 2 (h2)</h2>
<h3>heading 3 (h3)</h3>
<h4>heading 4 (h4)</h4>
<h5>heading 5 (h5)</h5>
<h6>heading 6 (h6)</h6>
<h2>Paragraphs</h2>
<p>A simple little paragraph.</p>
<p>Followed by another with a link <a href="/">home</a></p>
<h2>Lists</h2>
<h3>ul</h3>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<h3>ol</h3>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<h3>dl</h3>
<dl>
<dt>Term</dt>
<dd>Description 1</dd>
<dd>Descripton 2</dd>
</dl>
<h3>menu</h3>
<menu>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</menu>
<h2>Code</h2>
<pre><code>&lt;p&gt;Example of code inside a pre.&lt;p&gt;</code></pre>
<code>Code alone.</code>
<p>And heres some <code>code inside a tag</code>, namely a paragraph.</p>
<h2>Tables</h2>
<p>Each of these are wrapped by an element with <code>.tblcon</code> class.</p>
<div class="tblcon">
<table>
<thead><tr><th scope="col">Concern/VM</th><th scope="col">Services1</th></tr></thead>
<tbody>
<tr>
<th scope="row">Production Web Server</th>
<td>Nginx</td>
</tr>
<tr>
<th scope="row">Production Web Server</th>
<td>Nginx</td>
</tr>
</tbody>
</table>
</div>
<div class="tblcon">
<table>
<thead><tr><th scope="col">Concern/VM</th><th colspan="5" scope="colgroup">Services2</th></tr></thead>
<tbody>
<tr>
<td>Production Web Server</td>
<td>Nginx</td>
<td>Nginx</td>
<td colspan="3">Nginx</td>
</tr>
<tr>
<td>Production Web Server</td>
<td>Nginx</td>
<td colspan="4">Nginx</td>
</tr>
<tr>
<td>Production Web Server</td>
<td>Nginx</td>
<td>Nginx</td>
<td>Nginx</td>
<td>Nginx</td>
<td>Nginx</td>
</tr>
</tbody>
</table>
</div>
<div class="tblcon">
<table>
<tr><th scope="col">Concern/VM</th><th scope="col">Services3</th></tr>
<tr>
<td>Production Web Server</td>
<td>Nginx</td>
</tr>
<tr>
<td>Production Web Server</td>
<td>Nginx</td>
</tr>
</table>
</div>
<p>Table with all elements</p>
<div class="tblcon">
<table>
<caption>Here's a captioned table</caption>
<colgroup><col><col span="2"></colgroup>
<thead><tr><th scope="col">Name</th><th scope="col">Earned</th><th scope="col">Profit</th></tr></thead>
<tbody>
<tr>
<td>Mr. Epic</td>
<td>£15000</td>
<td>£1000</td>
</tr>
<tr>
<td>Sludge</td>
<td>£35000</td>
<td>£19000</td>
</tr>
<tr>
<td>Smart fella</td>
<td>£69420</td>
<td>£50000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>£119420</td>
<td>£70000</td>
</tr>
</tfoot>
</table>
<h2>Block<wbr>quotes</h2>
<blockquote cite="https://www.w3schools.com/tags/tag_blockquote.asp">A section that is quoted from another source</blockquote>
<p>Using q tag <q>for inline (short) quotations</q>, as you see. Nifty.</p>
<h2>Form</h2>
<p>Behold, the mega-form! If you want details check <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms">mozilla's form section</a></p>
<p>datalist, fieldset, input, legend, meter, output, select, textarea</p>
<p>input todo: datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week</p>
<form>
<label for="name">Name</label>
<input name="name" id="name" placeholder="Name here"></input>
<label for="fruits" id="fruits">Fruits</label>
<select name="fruits">
<option value="">--Choose your fav--</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="pear">Pear</option>
</select>
<label for="fruits-veg" id="fruits-veg">Fruits/Veg</label>
<select name="fruits-veg">
<option value="">--Choose your fav--</option>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Vegetables">
<option value="potato">Potato</option>
<option value="onion">Onion</option>
</optgroup>
</select>
<fieldset>
<legend>Answer these yes/nos</legend>
<input type="checkbox" id="check-smart" name="check-smart" checked/>
<label for="check-smart">Smart</label>
<input type="checkbox" id="check-swag" name="check-swag"/>
<label for="check-swag">Swag</label>
<input type="checkbox" id="check-epic" name="check-epic"/>
<label for="check-epic">Epic</label>
</fieldset>
<label for="prog">Progress</label>
<progress id="prog" max="100" value="55">55%</progress>
<label for="colour">Favourite Colour</label>
<input type="color" id="colour" name="colour" value="#CCCCCC"/>
<label for="birth">Birthdate</label>
<input type="date" id="birth" name="birth" min="1900-01-01" max="2020-01-01"/>
<label for="details">Details</label>
<textarea name="details" id="details" rows="4" placeholder="Describe yourself"></textarea>
<button type="button">Submit form</button>
</form>
<h2>Button</h2>
<button type="button">Button!</button>
<a class="button" href="#">Anchor!</a>
<h2>Grid System</h2>
<p>Not using one (curently at least) as it's un-needed. Perhaps if I make my own reset/base CSS file I'll add one for you guys.</p>
<h2>Util<wbr>ities</h2>
<h3>Tags</h3>
<div class="tag">Tag</div>
<p>As a span within <span class="tag">w</span> another element.</p>
<p>Actual usage <span class="tag">Tag&nbsp;1</span> <span class="tag">Tag&nbsp;2</span></p>
<h3>Notecards</h3>
<h3>Alerts</h3>
<h3>Modals</h3>
<h3>Example utils I may want</h3>
<a href="https://getbootstrap.com/docs/5.2/examples/">Bootstrap utilities</a>
<h2>Headers</h2>
<h2>Menus</h2>
<p>Maybe I'll do dropdowns soonish</p>
<h2>Searchbars</h2>
<h2>Inline elements</h2>
<h2>Unplanned<wbr>/<wbr>Dumped for now</h2>
<h3>Address</h3>
<address>testing</address>
<h3>Article</h3>
<article>testing</article>
<aside class="page-nav"><p>page-nav is here</p><ul><li>list 1</li><li>list 2</li></ul></aside>
<h3>Aside</h3>
<aside>Test aside</aside>
<p>There's also the class <code>.page-nav</code></p>
<h3>Images</h3>
<p>Webp. If it doesn't load your browser doesn't support it, but the picture below will work.</p>
<img src="/images/200px.webp" alt="Placeholder image" width="200" height="200">
<h3>Picture</h3>
<picture>
<source type="image/webp" srcset="/images/200px.webp">
<source type="image/jpeg" srcset="/images/200px.png">
<img src="/images/200px.png" alt="Placeholder image" width="200" height="200">
</picture>
<h3>Figure</h3>
<figure>
<picture>
<source type="image/webp" srcset="/images/200px.webp">
<source type="image/jpeg" srcset="/images/200px.png">
<img src="/images/200px.png" alt="Placeholder image" width="200" height="200">
</picture>
</figure>
<figure>
<picture>
<source type="image/webp" srcset="/images/200px.webp">
<source type="image/jpeg" srcset="/images/200px.png">
<img src="/images/200px.png" alt="Placeholder image" width="200" height="200">
</picture>
<figcaption>figcaption</figcaption>
</figure>
<h3>hr</h3>
<hr/>
<h3>misc</h3>
<p>Here's some examples of inline elements I currently don't use (or didn't up to now).</p>
<p>The list consists of <code>abbr</code> for <abbr>abbr</abbr> abbreviations, <code>bdi</code> <bdi>for bidirectional text</bdi>, <code>bdo</code> <bdo dir="rtl">(rtl) for changing text direction</bdo><br/>Oh there was a br (line break), not a new paragraph tag.</p>
<p>If something has been removed, <del>because it's wrong</del> <ins>for any reason</ins>, the <code>del</code> and <code>ins</code> elements are here!</p>
<h3>todo</h3>
<p>cite, data, dfn, em, i, kbd, mark, s, samp, small, strong, sub, sup, time, u, var, wbr</p>
<p>rp, rt, ruby</p>
<h2>Multimedia</h2>
<p>area, audio, img(done elsehwere), map, track, video</p>
<h2>Embedded content</h2>
<p>embed, iframe, object, picture, portal, source</p>
<h2>Svg</h2>
<h2>canvas</h2>
<p>This allows for scripting, animations, games, fancier graphics, etc.</p>
<canvas width="200" height="200"></canvas>
<h2>Interactive elements</h2>
<h3>details</h3>
<details>
<summary>Gangnam style</summary>
OP OP OP OP, OPPA GANGNAM STYLE
</details>
<h3>dialog</h3>
<p>Non-suggested way</p>
<dialog open>
<p>I am a dialog box! You cannot kill me!</p>
<form method="dialog">
<button>Kill</button>
</form>
</dialog>
<p>It's recommended to use JS to toggle dialogs, but to still use <code>dialog</code> (without the open attribute) over a <code>div</code> for semantic reasoning.
<h2>Web components</h2>
<p>slot, template</p>
<p>I've never used these, so I'm not sure 100% about their application, omitting for now.</p>
</section>
<section>
<h2>Up to date</h2>
<p>If you're looking for a complete (and up-to-date) list of HTML elements, look over at the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank" rel="noopener">mdn web docs</a>.</p>
<p>I'm recommending this, as it's where I yoinked all the elements from on <time datetime="2022-12-09">Dec 9th 2022</time>, and it's maintained regularly (unlike this page).<p>
</section>
<section>
#TODO:
<h2>Trivia</h2>
<p>As of today <time datetime="2022-12-09">09/12/22</time> thiss is the largest webpage on my site, with the HTML taking up ~13KB</p>
</section>
</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>

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Aney's favourite websites, or something like that">
<meta name="description" content="A collection of the websites Aney uses regularary, finds inspiration from, or just finds attractive">
<meta name="keywords" content="Websites, collection">
<meta name="author" content="Nathan (Aney) Steel">
@ -15,14 +16,11 @@
<body>
<header>
<a href="#main" class="vh">Jump directly to main content</a>
<h1>Aney's Favourite Sites</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="/equipment.html">equipment</a>
<a href="/projects.html">projects</a>
<a href="/blog/">blog</a>
<a href="/sitemap.html">misc</a>
@ -31,12 +29,12 @@
<hr/>
</header>
<main id="main">
<main>
<section>
<h2>Websites I frequent</h2>
<p>I use these, but maybe I should stop.</p>
<ul>
<li><a href="https://www.youtube.co.uk" target="_blank" rel="noopener">Youtube</a></li>
<li><a href="https://www.youtube.co.uk" target="_blank" rel="noopener noreferrer ">Youtube</a></li>
</ul>
</section>
@ -44,14 +42,12 @@
<h2>Useful Websites</h2>
<p>These websites make things easier for me.</p>
<ul>
<li><a href="https://coolors.co/generate" target="_blank" rel="noopener">coolors.co/generate</a></li>
<li><a href="https://webpagetest.org/" target="_blank" rel="noopener">webpagetest.org</a></li>
<li><a href="https://tools.pingdom.com/" target="_blank" rel="noopener">tools.pingdom.com</a></li>
<li><a href="https://vecta.io/nano" target="_blank" rel="noopener">vecta.io/nano</a></li>
<li><a href="https://tinypng.com/" target="_blank" rel="noopener">tinypng.com</a></li>
<li><a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="noopener">webaim.org/resources/contrastchecker/</a></li>
<li><a href="https://via.placeholder.com/" target="_blank" rel="noopener">via.placeholder.com</a> (raster) - <a href="https://via.placeholder.com/320x480/" target="_blank" rel="noopener">example</a></li>
<li><a href="https://placehold.co" target="_blank" rel="noopener">placehold.co</a> (vector) - <a href="https://placehold.co/768x384" target="_blank" rel="noopener">example</a></li>
<li><a href="https://coolors.co/generate" target="_blank" rel="noopener noreferrer ">coolors.co/generate</a></li>
<li><a href="https://webpagetest.org/" target="_blank" rel="noopener noreferrer ">webpagetest.org</a></li>
<li><a href="https://tools.pingdom.com/" target="_blank" rel="noopener noreferrer ">tools.pingdom.com</a></li>
<li><a href="https://vecta.io/nano" target="_blank" rel="noopener noreferrer">vecta.io/nano</a></li>
<li><a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer">tinypng.com</a></li>
<li><a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="noopener noreferrer">webaim.org/resources/contrastchecker/</a></li>
</ul>
</section>
@ -59,28 +55,28 @@
<h2>Websites that Inspire me</h2>
<p>Either their site, or their content. Ideally both.</p>
<ul>
<li><a href="https://lukesmith.xyz" target="_blank" rel="noopener">luksmith.xyz</a></li>
<li><a href="https://drewdevault.com" target="_blank" rel="noopener">drewdevault.com</a></li>
<li><a href="https://danluu.com/" target="_blank" rel="noopener">danluu.com</a></li>
<li><a href="https://1mb.club/" target="_blank" rel="noopener">1mb.club</a></li>
<li><a href="https://seirdy.one/" target="_blank" rel="noopener">seirdy.one</a></li>
<li><a href="https://jeremymaluf.com/" target="_blank" rel="noopener">jeremymaluf.com</a></li>
<li><a href="https://m-chrzan.xyz/" target="_blank" rel="noopener">m-chrzan.xyz</a></li>
<li><a href="https://www.joshwcomeau.com/" target="_blank" rel="noopener">joshwcomeau.com</a></li>
<li><a href="https://lukesmith.xyz" target="_blank" rel="noopener noreferrer ">luksmith.xyz</a></li>
<li><a href="https://drewdevault.com" target="_blank" rel="noopener noreferrer ">drewdevault.com</a></li>
<li><a href="https://danluu.com/" target="_blank" rel="noopener noreferrer ">danluu.com</a></li>
<li><a href="https://uglyduck.ca/" target="_blank" rel="noopener noreferrer ">uglyduck.ca</a></li>
<li><a href="https://1mb.club/" target="_blank" rel="noopener noreferrer ">1mb.club</a></li>
<li><a href="https://seirdy.one/" target="_blank" rel="noopener noreferrer ">seirdy.one</a></li>
<li><a href="https://jeremymaluf.com/" target="_blank" rel="noopener noreferrer ">jeremymaluf.com</a></li>
<li><a href="https://m-chrzan.xyz/" target="_blank" rel="noopener noreferrer ">m-chrzan.xyz</a></li>
</ul>
</section>
<section>
<h2>My websites</h2>
<ul>
<li><a href="https://aney.co.uk" target="_blank" rel="noopener">aney.co.uk</a></li>
<li><a href="https://www.aney.co.uk" target="_blank" rel="noopener noreferrer ">www.aney.co.uk</a></li>
</ul>
</section>
</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>
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
</footer>
</body>
</html>

Loading…
Cancel
Save