About This Website

General Design

The site has been around for a while in various formats, but the real effort started when I just decided one day to create a pixel font in Javascript.

I personally thought it turned out quite neat, so I thought “I have a domain i’m not using, why not make a blog”. So really, the art came before the content. As far as the colour scheme goes, i’m still not completely sure why I chose the colours used, but I guess I have a favourite now… obviously it’s not for everyone.

Has far as the content goes; there’s no particular thrust, just articles on what’s got me interested at the time, as well as occasional auto-didactic posts.

Updates, these days, are far and few between.

The site is as responsive as I can get it, with what little CSS experience I have – I’ve dropped out of doing web things a couple of times, and everytime I picked it up again, it seemed that the entire web tech landscape had changed.

The last time I did something in anger, I was quite happy with jQuery and Bootstrap.

In any case, I’m hoping it looks okay on desktops, laptops and mobile phones.

Site Builder

This site is driven by Jekyll, a static site generator, with the sources hosted on GitHub. The main branch, when pushed, will trigger GitHub to build and host the prepared site at https://committhis.github.io.

The sources were previously available, however I found that for occasional prototyping, I might need to play around with content and third-party resources that might not actually be publishable, and having a publicly accessible repo constrains that. Also, nobody wants to see a commit history which is just “updates” ad nauseaum. So I now pay for GitHub Pro.

Heading Fonts

The pixel-art style header font is generated dynamically via a Javascript library I wrote called “pixcells”. It’s not released anywhere, but that is likely to change at some point.

It works by using a fixed size sprite atlas, where a character is used to index it’s respective start coordinates within the overall image. This is then used to replace a character within a class/tag with a fixed size span with a CSS background image using the calculated offsets to display the actual character.

This is the base atlas for the blue font:

Sprite Atlas Example

The crazy squares are in place of characters which are either not-displayable or not-yet completed. If I see one, I know I’ve got some work to do.

A “complete” font can consist of multiple atlas’. In this case, a shadow, base, and a highlight layer, all with appropriate transparencies.

Additional metadata is required to display the font, as, while the grid on which the characters are placed is fixed, the library makes no assumptions on it’s dimensions. The cell height, width, characters per row, number of rows and the display width of each individual character is required. The constraints on the atlas are that:

The grid is regular, with each character occupying the same space - i.e, the storage for each character is equal;
The characters are placed on the grid with a coordinate that is equivalent to it’s ordinal accounting for grid size.

An cut down example of this follows:

const pixcellsFontMeta16x16 = {
	name: 'pixcells-16x16',
	cellWidth: 16,
	cellHeight: 16,
	cellsPerRow: 16,
    numRows: 16,
    margin: 0,
	widths: {
		' ': 4,  '!': 4,  '"':  12, '%': 12, '^': 8, 
		'`': 48, '~': 7,  '\'': 4,  '#': 12, ',': 6,  
		'O': 12, 'T': 8,  'W':  12, 'X': 12, '@': 16,
		'©': 16, 'default': 10
	}
};

The original text is preserved offscreen for the use of screen readers.

Images

Images have been sourced from a variety of places, and every effort has been made to provide attribution and credit where possible. The images are either royalty free or my own work, with the exception of the avatar which was made via the generator at Avatars In Pixels.

Attribution has been baked into the site’s templating so that any page that features an image that requires it will automatically display it.

Sources include, so far:

Code Formatting

While Jekyll/Kramdown comes with it’s own highlighting scheme, I found it to be a bit restrictive and searched for alternatives (although I can’t remember the specific reason). I found PrismJS, which has extensive language support, and easily integrated it into the build.

Then, in a moment of madness, I thought I could extend PrismJS with my own colour scheme, taking inspiration from the Synthwave ‘84 Visual Studio Code theme. What I liked about this the most was that it uses CSS trickery to give the impression that the text is glowing, which, as far as I am concerned, make it much easier for me to read. Of course, your mileage may vary.

Cookies

This is simple; this site has none. I had toyed with the idea of using analytics for page views and things, but I ended up thinking it would be more trouble than it’s worth.

CommitThis!