Hello! I studied Computer Science, now I live in Bath! I write code, design games, and occasionally tweet. Why not subscribe?

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.

Get an email each week I post, zero spam             

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. Jekyll, 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.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

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')) {
} 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

Moving to Bath

Posted August 13, 2018. Bath, Photos. 67 words.

University is over and it’s time to start a new chapter of my life. After what was approaching nearly two decades in education, it’s finally time to enter the real world.

I’m moving to Bath where I’ll be working for Netcraft, a company which specialises in internet research, anti-phishing and security services.

I’m looking forward to it!

My Graduation

Posted July 19, 2018. Photos, University. 172 words.

My Graduation Ceremony

Four years later, and my time at university has come to a close. I have earned my Masters. My time here is at a close. It is a bitter-sweet day.

After The Ceremony A Group Of My Friends The Reception

After The Ceremony everyone went outside for a year photo. We took photos of Jet, LLoyd, Daniel, Me, Andy, and Edmund. And finally enjoyed the reception.

Interrailing into London

Posted July 17, 2018. Interrailing, London, Photos, Travel. 175 words.

The last day of our trip. In the evening we fly back. Our flight is delayed so I spend the night with a friend. Tomorrow I will take the trains back home and prepare for Graduation.

Were Off To Rent A Boat A Paddleboat Along The River We Go

We’re Off To Rent A Boat. A Paddleboat. Along The River We Go

Continue Reading...

Interrailing into Stockholm: Day 5

Posted July 16, 2018. Interrailing, Photos, Stockholm, Travel. 238 words.

The penultimate day. We see the metro system, a museum, and escape from an escape room.

We Explore The Subway This Is T Centralen We Get Off After One Stop

We Explore The Subway. This Is T Centralen. We Get Off After One Stop.

Continue Reading...

Interrailing into Stockholm: Day 4

Posted July 15, 2018. Interrailing, Photos, Stockholm, Travel. 303 words.

Theme park number two. We board the ferry and spend the day in Tivoli.

Walking Along The South Bank Looking On The Water We Wait At A Dock

Walking Along The South Bank. Looking On The Water. We Wait At A Dock.

Continue Reading...

Interrailing into Stockholm: Day 3

Posted July 14, 2018. Interrailing, Photos, Stockholm, Travel. 415 words.

A history lesson.

We Start The Day Heading To The Old Town Where We Join A Walking Tour

We Start The Day Heading To The Old Town Where We Join A Walking Tour.

Continue Reading...

Interrailing into Stockholm: Day 2

Posted July 13, 2018. Interrailing, Photos, Stockholm, Travel. 337 words.

A fairly relaxing day. We watch the changing of the guard, explore the city, and have a good time.

Stockholm Is Under Construction Walking Through The Bustling Streets Towards The Palace

Stockholm Is Under Construction. Walking Through The Bustling Streets Towards The Palace.

Continue Reading...

« Last Page 2 / 11 Next Page »
StatCounter Pixel