Hello! I studied Computer Science, and live in Bath. I write code, design games, and occasionally tweet.
Hello! I studied Computer Science, and live in Bath. I write code, design games, and occasionally tweet.

Posts about Text Other Categories

Image Bit Planes Jul. 7, 2020 in Text

Image Bit Planes

TabTool Apr. 19, 2020 in Text

I made a FireFox extension called TabTool mainly for me, but also for anyone else who wants to give it a try.

Screenshot Screenshot Screenshot

A minimal Firefox browser extension that lets you easily copy, manipulate, and open list of URLs. Supports light and dark!

I Completed BathHalf 2020 Mar. 15, 2020 in Text

BathHalf, in partnership with Bishop Fleming: 15th March 2020. Congratulations Matthew Consterdine on completing the Half Marathon in a time of 01:51:45. 2020 Finisher.

Moving this Blog to GitLab Feb. 11, 2020 in Text

This blog has now been moved to GitLab, allowing me to experiment with their CI / CD setup.

Continue Reading...

Hello Lisbon Sep. 2, 2019 in Photos, Text

Rua Augusta Arch

Jekyll Category and Year Pages Without Plugins Mar. 20, 2019 in Jekyll, Text

Jekyll is fantastic, easy to use, and extensible. However, some Jekyll hosts such as GitHub Pages do not allow people to use custom plugins - and I want category and year pages. But rightly so. Allowing custom plugins would require hosts to allow users to run arbitrary Ruby code on their build servers and possibly create a mess. This problem is solvable, but it’s ultimately simpler to just ban them entirely.

This constrained environment forces you to get creative. On this blog I use the fantastic jekyll-compress-html template which minifies the very post you are reading. I have written by own template to automatically replace standard markdown or HTML images with lazily loaded ones. And finally, I have written a small (it’s only a hundred or so lines ;) ) Makefile to automatically, among other-things, generate year and category pages:

# Find categories and years
CATTARGETS  = $(shell grep -h '^categories:' -r _posts/ | awk -F ':' \
              '{print $$2}' | tr ' ' '\n' | sed '/^$$/d' | sort | uniq | \
              awk '{print "categories/"$$1".html"}')
YEARTARGETS = $(shell find _posts/ -regextype egrep -regex '.*/[0-9]{4}.[^/]*' \
              -printf '%P\n' | cut -c-4 | sort | uniq | \
              awk '{print "years/"$$1".html"}')

# Generate category pages
cat: cat-clean $(CATTARGETS)
categories/%.html: _templates/category.html
	cp $< $@
	sed -i 's/#####CATEGORY#####/$*/' $@

# Generate year pages
year: year-clean $(YEARTARGETS)
years/%.html: _templates/year.html
	cp $< $@
	sed -i 's/#####YEAR#####/$*/' $@

To use, simply create _templates/category.html and a _templates/year.html templates and run make cat year. The code assumes your posts start with the date and they are stored in the default _posts/. When run #####CATEGORY##### and #####YEAR##### will be replaced with the templated value.

Let it Snow! Let it Snow! Let it Snow! Feb. 1, 2019 in Photos, Snow, Text

Let it snow

Not a great photo, still alive. Have an avatar generator.

25 Days, 25 Languages Dec. 1, 2018 in Programming, Text

This year I am going to take part in the 2018 Advent of Code, where each day, two new programming challenges are uploaded to the site. But as I live in the UK and I don’t want to ruin my sleeping schedule for a month, competing for the leaderboard is out of the question. Instead, I am going to challenge myself to use 25 different programming languages.

For this I will treat different versions of the same language as the same language, so no Python 2 and Python 3 solutions. However, I can use C, C++, and C# as they are all different languages, even if they are rather similar syntactically. As for what language I pick on the day, it really depends how I am feeling. If the problem is simple, I am more likely to choose a more complex or unfamiliar language. I’ll be saving some language for when I am really struggling.

My solutions will be posted on GitHub.

Edit: Oops, so that didn’t happen. Not long after starting this challenge I broke my dominant wrist roller-skating, and just in time for Christmas! But anyway, this means that it is unlikely that I will finish this. While incomplete, I am glad I attempted it and will definitely consider using Rust in future projects - it is a nice language.

Reddit You're Terrible, Please Be Worse Nov. 15, 2018 in Rant, Text

Reddit, the 18th largest site worldwide is a fantastic site full of fun user-created content, amazing photos from around the world, and crazy far-right conspiracy theories. The web experience is great too. On desktop you can see several posts at a time amidst a sea of extraneous white-space. On mobile the site fills your browser until it is time to nag you, at least twice, to install their app. And then touch-events are registered 1​cm up the page for no good reason. Or images refuse to load no matter what you do. You get the picture.

And I find myself going back.

Other social-networks simply don’t grab me the same way that Reddit does. Reddit is a never-ending fire-hose of content, you can keep scrolling, and keep scrolling, and keep scrolling, and keep scrolling, and I do. Facebook is a useful tool, but I never find myself scrolling through the news feed. Twitter is an endless feed of announcements, politics, and small things taken out of context. LinkedIn is a professional waste of time. Twitch is background noise, I listen to it, I don’t watch it, and I don’t feel that I waste the little time I spend there. YouTube, well I spend a fair amount of time on YouTube. There are great videos published near daily, but my subscription-feed is curated, and the front-page is limited.

Reddit just keeps going.

I only have finite time in a day, in a year, in a life, and I don’t think Reddit is a good way to spend any of it. I set perpetual Cold Turkey blocks on Reddit and other distractions on my computers. I do not have a Reddit app installed on my phone, but I do have a web-browser. I try to not use Reddit on my phone, I do it anyway. I clear my history from time to time to clear Reddit from my suggestions, it comes back. I definitely need to try harder.

I think I would block Reddit entirely if I could.

As far as I know, there is no perfect method to block Reddit on a non-rooted Android phone (I like Google Pay and similar applications) like there is on a regular computer. Cold Turkey has an Android app, but it blocks the phone instead of Reddit. It is still a useful app but it’s not what I am looking for. You can use an app to setup an Accessibility, VPN, or DNS blocker but doing so is finicky. Either it needs a persistent notification, drains what little battery life my old phone has left, or needs to be configured for every single WiFi network you connect to. I recently found BlockSite which seems promising, but I am a little concerned about how easy it would be to uninstall.

This isn’t great, but there is a solution.

Reddit, you keep making your site worse on a near weekly basis. Mobile used to be fantastic, fast, and worked well. First adverts and sponsored content were added which is fair, a site needs to earn money to survive. Cookie banners came next, but they are commonly thought to be required by law (I am not a lawyer). Then the site started to nag you to install the app, which is annoying but only seemed to appear once per tab. The touch-events bug came after, stopping browsing sessions in their tracks. Next Reddit added the blue pill at the bottom of every page, it’s really annoying to close. And now, Reddit has added yet another prompt to install their app. On every page you now need to confirm that yes, you want to continue using Google Chrome. If you make a mistake, or the touch-events bug strikes you will be whisked away from your dark Reddit experience into the stark white Play store.

So thank you Reddit, and please keep up the good work.

Continue Reading...

The Consto Family of Fonts Oct. 24, 2018 in Fonts, Text

Something I have been wanting to do for a while, is to make a handwriting font.

The four fonts

  • Consto Ballpoint - The first of four fonts. A sharp font that is too the point.
  • Consto Marker - A softer font, made using your favourite brand of permanent markers.
  • Consto Pencil - A sketchy font made using a pencil. A rough and jagged font with lots of bumps.
  • Consto Pixel - A three by three pixel font, it is surprisingly legible, it could not be any smaller.

Swedish Army Band Oct. 21, 2018 in Celebration, Text

Swedish Army Band Swedish Army Band

See the Swedish Army Band play their instruments! Sorry about the shakyness.

BBC Radio Playlists Oct. 18, 2018 in Music, Playlists, Text

Sticking with music, here are three playlists each containing every BBC Radio station in 320kbps, 128kbps, and 94kbps.

Composing Folk Music with Markov Chains Oct. 14, 2018 in Music, Text

This week I used Markov Chains to create folk music. It is output in ABC and rendered using ABCjs.

The music it makes is a little bit strange and it doesn’t really understand how many beats should be in a bar, but if that is a problem up the iterations. Keep raising the iterations and eventually you might even hear a tune that you know!

Under the hood, it is relatively simple. I started by downloaded about 300 folk tunes from Sourceforge. After making an Ajax request to load them, it “parses” each tune into a data structure that is easy to work with. Then two Markov Chains are generated for the title and for the music, the other attributes are just chosen randomly. Tunes can be played back with or without chords, and on any instrument. Click here to start.

Bring the Light Oct. 7, 2018 in Games, Text

I teased with an idea, and here is a very basic demo of it complete and released. Just a warning, it runs poorly, looks bad, and isn’t fun to play. Enjoy!

Bring the Light

On a more serious note, while this is not the result I wanted I have definitely learned, or at least re-learned a few things. Looking over it, a project like this is likely too big for me, at my current skill level, with the short amount of time I gave myself.

Continue Reading...

How to Play: Box, Reverse, and Stratego Chess Sep. 28, 2018 in Games, Rules, Text

Box Chess!

Not to be confused with chess boxing, although feel free to play box chess boxing. Box chess is a new, dumb, derivative, variant of chess that we almost certainly reinvented down at the pub on a Friday night. To play take a standard chessboard. No piece is allowed to enter or pass through c3-c6, d3, d6, e3, e6, or f3-f6. The knight however can jump over the spaces and land in the center two by two square. It was fun, and strange to play. If bishops feel to week swap the blocked spaces for c4-c5, d3, d6, e3, e6, and f4-f5 to form a ring instead.

Reverse Chess!

Reverse chess is quick, simple, and deadly. Start the game with the row of pawns swapped with the back row. That is it. Unlike a regular game of chess which starts with a slow (relatively) ramp up reverse chess is action packed from the beginning. Every piece is at risk and you are one move away from being checked. I also suspect that this dumb perversion of chess could be solvable, or the start at least be optimised. What is the best first move, take a piece or check? I do not know!

Stratego Chess!

Stratego Chess is chess, played on a Stratego-like grid. The squares d2-d3, d6-d7, e2-e3, and e6-e7 are blocked out and no piece, no even the knight can enter. Unlike Stratego the pieces are not hidden, it is a mix between the two.

I have been Slacking Sep. 17, 2018 in Text

This summer I finished my exams, developed this blog, traveled across north-western Europe, graduated from university, relaxed in Center Parcs, moved to Bath, started learning new instruments, and started working for Netcraft. It has been a busy time where I have traveled far and done many things. But when I think about it, I do not feel I have done enough. I feel that I have failed to create. I need to change this.

So, what will I make? I’m honestly not entirely sure. I am planing to start with a couple of Unity games and I am considering resuming work on some previous ideas. From there, I want to work on a lower level, and I have ideas. But, I do not only want to make games and demos. I want to experiment and make new, different things. Maybe I’ll write fiction, compose music, make art. Who knows? I don’t!

Lazy Loading Images, the Jekyll Way Sep. 10, 2018 in Jekyll, Text

Intersection Observer is a relatively new API with decent support that can have a huge impact on performance. It has many uses and can trigger all sorts of code but this article is simply looking into performance. With it, image lazy loading can be quickly and easily added to any site including static Jekyll sites.

To start, define a variable to store the Interaction Observer. For simpler deployment, the code below avoids using modern JavaScript features such as let and arrow functions.

var observer

Secondly, a function to load a given image. Here, a temporary image is created to load the image and if successful the source of the actual image is replaced.

function loadImage(image) {
	var i = new Image();
	i.onload = function() {
		image.classList.add('lazy-loaded')
		image.src = image.dataset.lazySrc
	}
	i.onerror = function() {image.classList.add('lazy-error')}
	i.src = image.dataset.lazySrc
}

Thirdly, a function to process intersections. It checks which images are currently intersecting.

function onIntersection(entries) {
	for (var e in entries) {
		if(entries[e].intersectionRatio <= 0) continue
		observer.unobserve(entries[e].target) // Stop watching
		loadImage(entries[e].target)
	}
}

Fourthly, lazily loaded images are located and the code is run.

var images = document.querySelectorAll('img[data-lazy-src]')
if ('IntersectionObserver' in window) {
	observer = new IntersectionObserver(onIntersection, {rootMargin: '250px'})
	for(var i in images) {
		if(typeof images[i] === 'object' && 'classList' in images[i] &&
			 !images[i].classList.contains('lazy-loaded') &&
			 !images[i].classList.contains('lazy-error')) {
			observer.observe(images[i])
		}
	}
} else {
	for(var image in images) loadImage(image)
}

But, the code above can only lazy-load images with very specific markup. This is where this nasty piece of Liquid code comes in. Liquid is fundamentally a very limited language with no direct way to initialise arrays, weird syntax, and no regular expressions. So, instead of using regular expressions, we can instead create a nasty piece of splitting code which works just well enough for the job.

The HTML Jekyll generates from Markdown is simple and regular enough for the following code to work. I would not expect it to work for more complicated HTML. But it’s worth a shot!

{%- assign excerpt = content | split: '<img src="' -%}
{%- for e in excerpt -%}
	{%- if forloop.first == true -%}
		{{ e }}
	{%- else -%}
		{%- if e contains '" alt="' -%}
			{%- assign f = e | split: '" alt="' -%}
			{%- assign url = f | first -%}
			{%- assign g = f | shift | join: '" alt="' | split: '"' -%}
			{%- assign alt = g | first -%}
			{%- assign rest = g | shift | join: '"' -%}
			<noscript><img src="{{ url }}" alt="{{ alt }}" /></noscript><img class="script-required" src="#" data-lazy-src="{{ url }}" alt="{{ alt }}"{{ rest }}
		{%- else -%}
			{%- assign f = e | split: '"' -%}
			{%- assign url = f | first -%}
			{%- assign rest = f | shift | join: '"' -%}
			<noscript><img src="{{ url }}" /></noscript><img class="script-required" src="#" data-lazy-src="{{ url }}"{{ rest }}
		{%- endif -%}
	{%- endif -%}
{%- endfor -%}

Now I recommend styling the unloaded images with width and height. If known ahead of time it can be set explicitly. Failing that, I recommend setting a generic default using CSS.

img {
	min-width: 100px;
	min-height: 100px;
}

And finally with this in place, my site often enjoys a perfect score in Google Chrome Inspector Audit. It cleanly beats google.com which has a top score of 91 and even beats motherfuckingwebsite.com in every category but performance where it draws at 100.

(100) Performance, (100) Progressive Web App, (100) Accessibility, (100) Best Practices, (100) SEO

Earth Today May. 28, 2018 in Text

Photo of Earth

Photos of the earth taken today by NASA DSCOVR EPIC. Earth Polychromatic Imaging Camera (EPIC) captures images of a sunlit earth to monitor the atmosphere and the environment. View earth

oneM2M Federation: Multi-Vendor Internet-of-Things Mar. 16, 2018 in Text

This year in a team of five, we set out to investigate and experiment with the oneM2M standard, for our client InterDigital. Overall we were successful, here are our findings:

For the mass deployment of the Internet of Things to be a success, a global standard for machine to machine communication needs to become established. This report explores the oneM2M standard for Machine to Machine communication, researching its capabilities, how to make use of it, and ultimately builds systems upon it. Using them, data streaming, live video, and federation are put to the test.

This project is a oneM2M research project, with InterDigital as the client. They have created the oneTRANSPORT data marketplace, and this report with federate with their system, to demonstrate oneM2M.

The Unofficial Stack Exchange Puzzle Book Jan. 20, 2018 in Text

After recent browsing, I had the idea to convert the Puzzling Stack Exchange into a book. Overall, the project was a success, however maths is currently not rendered as such. The book contains the top 100 questions and answers ever submitted to the site, formatted nicely to fit into a small A5 book(let).

I would like to thank the Puzzling Stack Exchange community for writing the puzzles, Stack Exchange for providing the data, and creativecommons.org for making this possible. Like the puzzles within, the book is licensed under the CC BY-SA 3.0 license. The book was created using the Stack Exchange Data Explorer to gather data, Python to parse and structure the data, and Pandoc to typeset as PDF. And thank you, the reader for reading this “book”. I hope you enjoy the puzzles. If you wish to contribute to this book, it can be found on my github.

Download and happy puzzling!

Classic Games Apr. 24, 2017 in Text

Classic Games Screenshot

I’ve put together a HTML5 recreation of several classic games. Play online.

A Jison, DnD-style Dice Roller Sep. 27, 2016 in Photos, Text

Screenshot

A Jison, DnD-style dice roller. Type then it will automatically roll. Supports arithmetic, keeping high/low dice, and fudge dice.

Usage

npm install fantasy-dice [-g]

roll 4d6h3

echo -e "var dice = require('fantasy-dice');\nconsole.log(dice("4d6h3"));" > dice.js
node dice.js

Kitty-agers Nov. 21, 2013 in Text

More Cats

Isle of Wight Oct. 29, 2012 in Photos, Text

Boats

Drummers Needles

Egyptian Manor Jun. 25, 2009 in Text

Egyptian Manor

Young Engineers Jun. 12, 2008 in Text

Two Brightly Coloured, Gas Canister Powered Vehicles

Two White Birds Mar. 31, 2008 in Photos, Text

Two White Birds

Royal Navy's Fleet Air Arm Museum Oct. 23, 2007 in Photos, Text

A Gray, Royal Navy Helicopter

Hello, World! Sep. 1, 2007 in Text

Hello, World! Welcome to my new blog. I’ll be posting here about my projects, travels, and life. Stay tuned!