Hello! I just graduated with a Masters of Computer Science. I write code, design games, and occasionally tweet. Why not subscribe to my blog with RSS?

25 Days, 25 Languages

Posted December 1, 2018. Programming, Text. 165 words.

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.

Reddit, Your Site is Terrible, Please Make it Worse

Posted November 15, 2018. Rant, Reddit, Text. 785 words.

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

Posted October 24, 2018. Fonts, Text. 141 words.

Something I have been wanting to do for a while, is to make a handwriting font. Doing seemed like a fun thing to do, and useful for me to use.

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.

Now while this is something I want to share, I would rather not share to liberally. So, I have chosen to license these fonts under the Creative Commons Attribution-NonCommercial-NoDerivatives license.

Download from GitHub

Post 100!!!

Posted October 21, 2018. Celebration, Text. 133 words.

Somehow I managed to reach 100 posts! Here is to another 100! See the Swedish Army Band to celebrate!

The Swedish Army Band

Okay, the video is rather shaky. YouTube has removed the enhancement and ffmpeg is really, really, slow on my laptop. Sorry.

BBC Radio Playlists

Posted October 18, 2018. Music, Playlists, Text. 25 words.

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

Maikovsky: Composing Folk Music with Markov Chains

Posted October 14, 2018. Music, Text. 154 words.

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

Turnpike To Martindale's Trip

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

Posted October 7, 2018. Games, Text. 349 words.

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 Chess! Reverse Chess! Stratego Chess!

Posted September 28, 2018. Games, Rules, Text. 254 words.

Box Chess!

Not to be confused with chess boxing, although feel free to play box chess boxing.

Bow 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 peice or check? I do not know!


Stratego Chess!

Statego 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 peices are not hidden, it is a mix between the two.

I have been Slacking, My Promise for the Future

Posted September 17, 2018. Text. 229 words.

This summer I finished my exams, developed this blog, travelled across northern 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 travelled 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.

Starting this week, and aiming for every week (hopefully), I am going to challenge myself to design, create, and publish something here on this blog. I want to make new things. I want to fail. I want to fail a lot. But I know that even with my limited time, I will eventually make something good.

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!

Anyway, I need to get back to work.

See you this weekend.

Lazy Loading Images, the Jekyll Way

Posted September 10, 2018. Text. 834 words.

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, lazyily 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

1 / 11 Next Page »
StatCounter Pixel