Wellcome to Haz001 Neocities

PDF Format Available

Page Info
Hover Over To Expand

From HTML/CSS/JS, Linux and Computer Science to random rants about technology.


14th Jan 2021

Last updated:

2nd March 2021


Harry S




So this site is going to be a blog site and also a portfolio piece. I am not going to have constant posts but they will come like XFCE DE release cycle. I will try to make this site have all the cool features all the cool sites have like dark mode (CSS pallet swap) and some extra features. This site is going to be JavaScript heavy, I will be using JS to add features that would usually be done on a server (don’t have access to the server) like to keep the site consistent (wonder why old News pages always have the the current style and logos), links updated and to add cool features. I will try to comment on all the code I can for this site but no promises.

What is this site?

This site is going to be a blog site, proof of consept and a portfolio piece.


First of all posts won’t be constant, I am a Uni Students, this means I am very busy, I most likely do big updates every so often (like XFCE I’m busy, not dead). I am thinking of posting about HTML, CSS, JavaScript (so make a better tutorial than NeoCities, W3Schools, MDN2 and other HTML/CSS/JS tutorial sites), projects I’m working on, pieces of work from Uni, Linux tips/command lists and rants about tech things. All articles will have time stamps when they were last updated, author (to make referencing easier (don’t reference me for actual essays/reports)). This is because I hate sites that don’t do this, it really annoying to have to add multiple (Anon. 20XX). I bloody hate it when these large organizations think it is ok to just not date their work or even add authors. All pages will have a PDF equivilant, I am currently using LaTeX to write these blog posts (to learn LaTeX) and then using pandoc to convert it to HTML and then I just concatinate the header and footer to it. As LaTeXis extreamly easy to convert I just though why not? Its just one command away and a few extra bytes. Finally all content, unless otherwise specified, on this site will be under Creative Commons Attributions 4.0 International License so if you want to copy, remix and distribute any content, unless otherwise specified, you can as long as you reference me, the author.


I am planning to make this just as easy and feature packed as most LAMP/LEMP3 News sites while being all client side. If that didn’t make any sense to you then I am going to try and implement all the features most News sites have in this site but as I am using NeoCities as a host I am unable to do anything server side. This means the site is static4, this is a big limitation as most News sites are very server side reliant, they use servers to implement features like: search, personalized content, comments, invasive tracking and more. This means I have to be very creative and put a lot of work in. Some of the features I am planning to implement are:


I will try to make this site look visually pleasing, unique while being simple to navigate and accessible to all (almost5) but i have no formal design enducation, thus I am only relying on my knowledge of CSS. I plan to have essay like blog posts so I might try to make it more that style.

One of the elements that I have already used is copying the layout of LaTeX, this means centred text, large margin6 and a width of 80 characters. Another thing is that I am encapilating all my text in <article> tags, this means that reading mode (in browsers taht have reading mode) will be enabled. See Figure [codeExample1] for example code. But then I might change my mind, hopefully when I have some more content I will have a better idea of what I want this site to look like.


JavaScript, being the devils language7, is quite a powerful programming langauge but without a backend it has its limits. I want to push JavaScriptand, my abilities, to find its limit. I want to use this site to show some of the incredible things JavaScript can do on its own, I’m not going to make a WebOS like Windows93.net.

I plan on having lots of features on this site, some easy to implement, some that will take a long time. These will range from simple one liners to extreamly complex 1000+ line JS scripts.

Standards Compliance

I am planning to follow a set of standards on this web page from basic HTML guidelines to Web Content Accessiblity Guidelines (WCAG). The HTML guidelines are quite easy, it is bascially make sure that you end all your tags and stuff but the WCAG is a bit more difficult and I might even write a post about it.

Basically it is a guideline to help make the web easier for people with disability to access the web, this means that I have to do a bit more work. If your interested you can read more @W3.org.

Code quality

Now as this is going to be a portfolio piece I am going to propely comment my code, name my variables and only "use strict" JS8. I will also try to make tutorials on everything I do but again I am very busy so some things might not be explained, commented, complete.

Code Examples

	max-width: 80ch;
	margin-left: auto;
	margin-right: auto;
    article> p, h1{
	padding-left: 1rem;
    <h1>Lorem Ipsum</h1>
	Lorem ipsum dolor sit amet.

  1. https://www.ofcom.org.uk/__data/assets/pdf_file/0023/91625/OfcomQRG-AOC.pdf↩︎

  2. Mozilla Developer Network↩︎

  3. LAMP/LEMP stands for: Linux (OS), Apache/Nginx (HTTP Software), MySQL/MariaDB (Database), PHP (Server Side Programming Language)↩︎

  4. the page you get is predetermined and will be the same for everyone↩︎

  5. I am not going to translate or pay for translating of each page (that would be way to expensive), I will be adding accessibility features like high contrast, bigger text, alternaitve colour backgrounds↩︎

  6. Why are default LaTeX margins so big?↩︎

  7. I will rant about this in the future, just you wait↩︎

  8. for my sainty↩︎

Ideas don't come out fully formed, they only become clearer as you work on them. You just have to get started.
- Mark Zuckerberg

If you like the content, bookmark this site.

Created With Vim Web Badge. Text: Created with Vim Get Firefox Web Badge. Text: GetFirefox
Hover Over To Expand

Get Firefox Web Badge/Button:
Attributions: Rakaz.nl
License: Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Generic

Created with Vim Badge/Button:
Attributions: Vim.org
License: Unknown

All content is under Creative Commons Attribution 4.0 International License except where otherwise stated

Creative Commons Licence
This work is licensed under a Creative Commons Attribution 4.0 International License.