db9bae60504168b7890d5c6aee0ba91c3a83f705 — Humaid AlQassimi a month ago 914b27d
Use webp for some images, optimise resources, and fix broken links.

Also added back the background texture, and link colours matches the
site theme.
36 files changed, 63 insertions(+), 72 deletions(-)

M assets/main.css
A content/blog/_index.md
M content/blog/gopher.md
M content/blog/public-feed.md
M content/blog/qnap.md
M content/blog/status-update-1.md
M content/blog/thinkpad-t590.md
M content/projects/4DG.md
M content/projects/JukeboxHopperMod.md
M content/projects/WhatsMorse.md
M content/projects/_index.md
M content/projects/iglu.md
M content/projects/ns2-trace-go.md
M content/projects/platform.md
D content/projects/screenshots/4DG.gif
D content/projects/screenshots/4DG.png
A content/projects/screenshots/4DG.webp
D content/projects/screenshots/JukeboxHopperMod.gif
D content/projects/screenshots/JukeboxHopperMod.png
A content/projects/screenshots/JukeboxHopperMod.webp
D content/projects/screenshots/WhatsMorse.gif
D content/projects/screenshots/WhatsMorse.png
A content/projects/screenshots/WhatsMorse.webp
D content/projects/screenshots/ns2-analysis.png
A content/projects/screenshots/ns2-analysis.webp
D content/projects/screenshots/yabfig.jpg
A content/projects/screenshots/yabfig.webp
M content/projects/shopsheet.md
M content/recipes/_index.md
M layouts/_default/list.html
M layouts/partials/header.html
D static/avatar.jpg
A static/avatar.webp
A static/bg.webp
A static/favicon.ico
D static/favicon.png
M assets/main.css => assets/main.css +7 -25
@@ 8,7 8,7 @@ body {
  font-family: "Inter", "San Fransisco", -apple-system, "BlinkMacSystemFont", "Source Sans Pro", "Roboto", sans-serif;
  font-size: 14pt;
  line-height: 1.4;
  background-color: #edeee6; /* for dillo */
  background: url("/bg.webp") repeat scroll 0% 0%, #edeee6 none repeat scroll 0% 0%;
  max-width: 980px;
  margin: 0 auto;

@@ 17,13 17,16 @@ main {
  background-color: #fefefe;

a {
  color: #134dae

.nav {
  background-color: #134dae;
  margin: 0;
  padding: 8px 0;

.nav a {
  margin: 0;
  padding: 8px 0;

@@ 39,7 42,6 @@ main {
  background-color: #ffbf47;

.nav, .nav a {
  color: #fefefe;

@@ 102,7 104,7 @@ h1, h2, h3, h4, h5, h6 {

.meta p {
  margin: 0 0 0 25px;
  margin: 5px 0 0 25px;

main {

@@ 128,23 130,12 @@ a:focus {
  outline: 2.5pt solid #ffbf47;

/* Images and Gallery */
/* Images */
img {
  max-width: 100%;
  height: auto;

.gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;

.gal img {
  max-width: 95%;
  max-height: 220px;

/* Code blocks */
pre {
  font-family: "SFMono-Regular","Menlo","Consolas","Liberation Mono","Courier New",monospace;

@@ 162,15 153,6 @@ code {

/* Responsiveness */
@media only screen and (max-width: 780px) {
  .gal {
    grid-template-columns: none;
  .gal img {
    display: block;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
  body {
    font-size: 1.1em;

A content/blog/_index.md => content/blog/_index.md +8 -0
@@ 0,0 1,8 @@
title: "Blogs"
description: "Humaid's personal blog"
  - /b
  - /blogs
  - /articles

M content/blog/gopher.md => content/blog/gopher.md +1 -1
@@ 12,7 12,7 @@ alternatively, view the site with [Floodgap](https://gopher.floodgap.com/gopher/
on a modern browser. This is how it looks with lynx:

![A screenshot of my Gopher page, showing the same description of my main
HTTPS website, loaded on the lynx browser](gopher.png)
HTTPS website, loaded on the lynx browser](/blog/gopher/gopher.png)

In the future, I may extend it to be a closer copy of my current website, and
to include the blog, projects, among other things.

M content/blog/public-feed.md => content/blog/public-feed.md +1 -1
@@ 20,7 20,7 @@ Now sfeed is configured on this website's project and it is hosted on
[/sfeed.html](/sfeed.html), so not only I could view my feed on any device, but
I could share it with friends.

![A screenshot of the sfeed page](sfeed.png)
![A screenshot of the sfeed page](/blog/public-feed/sfeed.png)

With [Tridactyl], I could use vim-like shortcuts on Firefox when loading the
page, so that is convenient.

M content/blog/qnap.md => content/blog/qnap.md +3 -3
@@ 6,7 6,7 @@ aliases:
  - "/blog/qnap"

<img src="qnap.jpg" alt="A picture of the QNAP on a wooden desk" width="480" />
<img src="/blog/qnap/qnap.jpg" alt="A picture of the QNAP on a wooden desk" width="480" />

About four years ago I got the QNAP TS-459 as a network-attached storage (NAS)
so I can store family pictures and backups of our devices. It came with QNAP

@@ 41,13 41,13 @@ installation went smoothly and it booted to the FreeNAS selection menu.
After plugging in the Ethernet, I visited the NAS IP address, lo and behold, we
are greeted by a FreeNAS login page.

![A screenshot of the FreeNAS login form on a browser](login.png)
![A screenshot of the FreeNAS login form on a browser](/blog/qnap/login.png)

And the dashboard...

![A screenshot of the FreeNAS dashboard, displaying the system information, the
system load, memory available (which is 4 gigabytes), and the connected
Ethernet interface](dashboard.png)
Ethernet interface](/blog/qnap/dashboard.png)

Since FreeNAS has no issues detecting the drives, the next step is going to be
purchasing new drives to use with this setup.

M content/blog/status-update-1.md => content/blog/status-update-1.md +1 -1
@@ 53,7 53,7 @@ to be released soon.

![A picture of a website, called Notes Overflow, with a list of University
courses, below it a number of the posts. On the navigation menu there is a
title of the website, and a login link.](notes-overflow-alpha.png)
title of the website, and a login link.](/blog/status-update-1/notes-overflow-alpha.png)

That's all for this month!

M content/blog/thinkpad-t590.md => content/blog/thinkpad-t590.md +1 -1
@@ 13,7 13,7 @@ This gave me freedom to install any distribution without worrying much about
driver support. I switched away from the laptop, for reasons I explained on my
[blog post about the System76 Kudu](/blog/kudu-two-year/).

![A picture of the ThinkPad T590](laptop.jpeg)
![A picture of the ThinkPad T590](/blog/thinkpad-t590/laptop.jpeg)

ThinkPads are known for their reliability, many Linux enthusiasts and
businesses rely on ThinkPads due to the Linux support and durability of the

M content/projects/4DG.md => content/projects/4DG.md +7 -5
@@ 8,7 8,7 @@ Language: Go
date: 2018-05-16
GoDoc: true
HasBuilds: true
Screenshot: "4DG.gif"
Screenshot: "4DG.webp"
Description: "A 4D movie scripting program which runs on a Raspberry Pi using GPIO."
Usability: 1
url: /4dg

@@ 17,7 17,9 @@ aliases:

### 1. Purpose
![A picture of 4DG control panel](/projects/screenshots/4DG.gif)
![A picture of 4DG control panel](/projects/screenshots/4DG.webp)

**Note:** Some work is needed to be done before this project is usable.

The goal of this program is to allow anyone to create a 4D movie script. When run on a Raspberry Pi, the program will allow you to control Raspberry Pi's GPIO pins.  

@@ 56,7 58,7 @@ $ _4dg run

### 6. To-Do

- [ ] Unit testing
- [ ] Finish player interface
- [ ] Add different position format
- Unit testing
- Finish player interface
- Add different position format

M content/projects/JukeboxHopperMod.md => content/projects/JukeboxHopperMod.md +3 -3
@@ 6,7 6,7 @@ section: "Games"
License: BSD-2-Clause
Language: Java
date: 2022-05-15
Screenshot: "JukeboxHopperMod.gif"
Screenshot: "JukeboxHopperMod.webp"
Description: "A simple Minecraft mod which allows you to use hoppers to insert records into jukeboxes."
Usability: 4
LatestVersion: "v2.0.0"

@@ 17,7 17,7 @@ aliases:

### 1. Description
![Picture of mod in-game](/projects/screenshots/JukeboxHopperMod.gif)
<img src="/projects/screenshots/JukeboxHopperMod.webp" alt="Picture of a hopper on top of a jukebox in Minecraft" width="600" height="400" />

This is a simple Minecraft mod which allows players to use
a hopper to insert a record into a Jukebox.  

@@ 48,4 48,4 @@ run Minecraft with the mod pre-loaded.

### 5. To-Do

- [ ] Allow extracting music discs from jukeboxes.
- Allow extracting music discs from jukeboxes.

M content/projects/WhatsMorse.md => content/projects/WhatsMorse.md +2 -2
@@ 9,7 9,7 @@ date: 2018-01-06
site: https://morse.hmksq.ae
GoDoc: true
HasBuilds: true
Screenshot: "WhatsMorse.gif"
Screenshot: "WhatsMorse.webp"
Description: "A morse code web messaging application written in a two-hour hackaton."
Usability: 4
url: /morse

@@ 18,7 18,7 @@ aliases:
  - /projects/whatsmorse
### 1. Description
![Screenshot of WhatsMorse page](/projects/screenshots/WhatsMorse.gif)
![Screenshot of WhatsMorse page](/projects/screenshots/WhatsMorse.webp)

WhatsMorse is a web messaging application which translates all your messages to morse code written in a two hour ["Stupid" Hackathon by Transcend](https://www.meetup.com/transcenddubai/events/245505285/) in January of 2018.
The goal of the hackathon was to create something useless (can be anything, not limited to computer software).  

M content/projects/_index.md => content/projects/_index.md +1 -0
@@ 1,5 1,6 @@
title: "Projects"
description: "An index of projects I have worked on..."
  - /projs
  - /p

M content/projects/iglu.md => content/projects/iglu.md +9 -9
@@ 110,7 110,7 @@ Each project has a its own description, each project will be listed below.

![Screenshot of iglü's dashboard, showing a greeting, the outside temperature,
the solar battery status, the energy consumption and usage chart, favourite
shortcuts, and energy tips](iglu.png)
shortcuts, and energy tips](/projects/iglu/iglu.png)

This is the core of the smart home system. This project contains most of the
work done on the project. It is a self-contained project which includes:

@@ 168,7 168,7 @@ automatically on an SQLite database file.
#### 2.2. iglüOS

![a screenshot of the boot messages, with the snippet in the middle stating
Welcome to igluOS (snowball)](igluOS.jpeg)
Welcome to igluOS (snowball)](/projects/iglu/igluOS.jpeg)

iglüOS is our custom Raspbian Lite-based distribution built for Nacdlow's iglü.
It allows you to have an OS image for the Raspberry Pi with iglü installed as a

@@ 205,7 205,7 @@ Raspberry Pi fully configured and working.

#### 2.3. godoc2markdown

![a screenshot of the generated documentation](godoc.jpg)
![a screenshot of the generated documentation](/projects/iglu/godoc.jpg)

As we were working on private GitLab repositories, we weren't able to use
[GoDoc](https://godoc.org) to generate documentation for our project.

@@ 223,7 223,7 @@ which you may check out and use.

![a screenshot of the dev dns server running, indicating that it will resolve
local.nacdlow.com to, and other queries will be redirected to](devdns.jpg)](/projects/iglu/devdns.jpg)

This is a custom Domain Name Server which returns a custom response for our
domain, used for testing PWAs with HTTPS support (required by service workers).

@@ 236,7 236,7 @@ It uses Miek Gieben's DNS library for both resolving and serving.
#### 2.4. Plugin SDK

![a screenshot of a code snippet with an implementation of a test plugin,
displaying the OnLoad and GetManifest functions stubbed](plugin-sdk.jpg)
displaying the OnLoad and GetManifest functions stubbed](/projects/iglu/plugin-sdk.jpg)

This is our Software Development Kit for developing iglü server plugins in Go.
It is based on HashiCorp's [go-plugin] library, which they use in their products.

@@ 254,7 254,7 @@ load the binary.
![a screenshot of the plugin packager, with a text input of the plugin
directory to package, fields to display the plugin manifest, and tick boxes to
select architectures to build for. At the bottom there is a field to input the
repository directory, and a big "Package" button.](plugin-packager.jpg)
repository directory, and a big "Package" button.](/projects/iglu/plugin-packager.jpg)

This is our internal plugin package graphical program, which allows us to:

@@ 271,7 271,7 @@ depending on the platform/architecture (just like Debian's APT).

![a screenshot of the marketplace, showing the scheduler as the featured
plugin, priced at 1.99 pound sterling, there are options to view plugins by
category, and a list of plugins](marketplace.png)
category, and a list of plugins](/projects/iglu/marketplace.png)

This is iglü marketplace website and plugin repository. It contains the
descriptions of all plugins, and their compiled binaries. The website is also

@@ 289,7 289,7 @@ Visit the marketplace: <https://market.nacdlow.com>

![a screenshot of the Stripe payment gateway, on the payment page for the
Scheduler plugin, priced at 1.99 pound sterling, there are fields on the right
for the card payment details](payment.jpg)
for the card payment details](/projects/iglu/payment.jpg)

Our Stripe testing payment gateway, which is built for our static Marketplace
website. This is deployed on [Heroku] and uses Stripe's Go library.

@@ 304,7 304,7 @@ may try `4242 4242 4242 4242` with any expiry/CVV number.
![a photograph of the iglü device, which is a 3D printed rounded box with an
e-ink display, showing the URL of the system at local.nacdlow.com, the power
generation as 40 kilowatts, the power consumption at 120 kilowatts, and the
battery level at 57%](eink.jpg)
battery level at 57%](/projects/iglu/eink.jpg)

We wrote a program in Python which pulls in data from the smart home
system and displays it on the e-ink display. We used FontAwesome icons and

M content/projects/ns2-trace-go.md => content/projects/ns2-trace-go.md +2 -2
@@ 10,7 10,7 @@ GoDoc: true
HasBuilds: true
LatestVersion: v0.1
IssueTracker: true
Screenshot: "ns2-analysis.png"
Screenshot: "ns2-analysis.webp"
Description: "A trace analysis web app for Network Simulator 2 (ns2) trace files"
Usability: 3
url: /ns2

@@ 19,7 19,7 @@ aliases:
### 1. Description
![Screenshot of the analysis page showing statistics of the trace file and
a table of connections with buttons to view jitter](/projects/screenshots/ns2-analysis.png)
a table of connections with buttons to view jitter](/projects/screenshots/ns2-analysis.webp)

This web application allows you to analyse [trace files](http://nile.wpi.edu/NS/analysis.html)
generated by [ns2](https://www.isi.edu/nsnam/ns/) (Network Simulator 2). It

M content/projects/platform.md => content/projects/platform.md +1 -1
@@ 35,7 35,7 @@ features of the platform.

#### 1.1. The dashboard

![a screenshot of the dashboard](platform-dark.png)
![a screenshot of the dashboard](/projects/platform/platform-dark.png)

The dashboard has a configurable alert, and links & resources section. It also
shows all the class representatives configured on the system.

D content/projects/screenshots/4DG.gif => content/projects/screenshots/4DG.gif +0 -0
D content/projects/screenshots/4DG.png => content/projects/screenshots/4DG.png +0 -0
A content/projects/screenshots/4DG.webp => content/projects/screenshots/4DG.webp +0 -0
D content/projects/screenshots/JukeboxHopperMod.gif => content/projects/screenshots/JukeboxHopperMod.gif +0 -0
D content/projects/screenshots/JukeboxHopperMod.png => content/projects/screenshots/JukeboxHopperMod.png +0 -0
A content/projects/screenshots/JukeboxHopperMod.webp => content/projects/screenshots/JukeboxHopperMod.webp +0 -0
D content/projects/screenshots/WhatsMorse.gif => content/projects/screenshots/WhatsMorse.gif +0 -0
D content/projects/screenshots/WhatsMorse.png => content/projects/screenshots/WhatsMorse.png +0 -0
A content/projects/screenshots/WhatsMorse.webp => content/projects/screenshots/WhatsMorse.webp +0 -0
D content/projects/screenshots/ns2-analysis.png => content/projects/screenshots/ns2-analysis.png +0 -0
A content/projects/screenshots/ns2-analysis.webp => content/projects/screenshots/ns2-analysis.webp +0 -0
D content/projects/screenshots/yabfig.jpg => content/projects/screenshots/yabfig.jpg +0 -0
A content/projects/screenshots/yabfig.webp => content/projects/screenshots/yabfig.webp +0 -0
M content/projects/shopsheet.md => content/projects/shopsheet.md +6 -6
@@ 59,9 59,9 @@ Run with `go run main.go`.

### 7. To-do

- [ ] Deploy to Heroku
- [ ] Use [X]ORM
- [ ] Template changes/fixes
  - [ ] Clear cart when changing sites
  - [ ] Allow custom templates
  - [ ] Show add to cart confirmation
- Deploy to Heroku
- Use XORM
- Template changes/fixes
  - Clear cart when changing sites
  - Allow custom templates
  - Show add to cart confirmation

M content/recipes/_index.md => content/recipes/_index.md +1 -0
@@ 1,5 1,6 @@
title: Recipes
description: "Humaid's recipe book."

Welcome to my recipe book. Here are some of the recipes I learned from someone,

M layouts/_default/list.html => layouts/_default/list.html +2 -1
@@ 7,7 7,8 @@
</ul>{{ end }}
{{if .IsHome}}
  <img src="/avatar.jpg" class="me" alt="A picture of Humaid smiling, not while looking at the camera. Possibly in a discussion with people off-screen." />
  <img src="/avatar.webp" class="me" width="100px" height="100px"
     alt="A picture of Humaid smiling, not while looking at the camera. Possibly in a discussion with people off-screen." />
    <dd><a rel="me" href="mailto:public@huma.id">public@huma.id</a></dd>

M layouts/partials/header.html => layouts/partials/header.html +7 -11
@@ 6,23 6,19 @@
  {{ $style := resources.Get "main.css"}}{{ $syntax := resources.Get "syntax.css"}}
  {{ $css := slice $style $syntax | resources.Concat "bundle.css" | resources.Minify }}
  <link rel="stylesheet" href="{{ $css.Permalink }}">
  {{if eq .Type "blog"}}{{ $webring := resources.Get "webring.css" | resources.Minify }}
  <link rel="stylesheet" href="{{ $webring.Permalink }}">{{end}}
  <title>{{if .Title}}{{ .Title }} - {{end}}Humaid AlQassimi</title>
  <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
  <meta property="og:image" content="{{.Site.BaseURL}}avatar.jpg">
  <link rel="webmention" href="https://webmention.io/humaidq.ae/webmention" />
  <link rel="pingback" href="https://webmention.io/humaidq.ae/xmlrpc" />
  <link rel="icon" type="image/jpeg" href="/favicon.png">
  <meta property="og:image" content="{{.Site.BaseURL}}avatar.webp">
  <link rel="icon" type="image/xicon" href="/favicon.ico">
  <h1 class="title">Humaid AlQassimi</h1>
    <p class="c nav"><a href="/">Home</a>
    &middot; <a href="/blog">Blog</a> &middot;
    <a href="/projects">Projects</a>
    &middot; <a href="/recipes">Recipes</a>
    &middot; <a href="/now">Now</a></p>
    <p class="c nav"><a rel="prefetch" href="/">Home</a>
    &middot; <a rel="prefetch" href="/blog/">Blog</a>
    &middot; <a rel="prefetch" href="/projects/">Projects</a>
    &middot; <a rel="prefetch" href="/recipes/">Recipes</a>
    &middot; <a rel="prefetch" href="/now/">Now</a></p>
<main class="index">

D static/avatar.jpg => static/avatar.jpg +0 -0
A static/avatar.webp => static/avatar.webp +0 -0
A static/bg.webp => static/bg.webp +0 -0
A static/favicon.ico => static/favicon.ico +0 -0
D static/favicon.png => static/favicon.png +0 -0