Qubyte Codes

Routes of RESTful services with nested resources

Nested resources are common in real life, and when you're a programmer working on RESTful APIs you may have noticed that there are often tradeoffs when it comes to formatting the routes of nested resources

Automatic announcement of new blog entries

It occurred to me a couple of days ago that it'd be neat to build a glitch to announce new blog posts. Since I deploy this blog by pushing to a master branch on GitHub, creation of a blog post is somewhat less obvious than when publishing on a platform like wordpress or medium, so I needed to figure out another approach

A Battenberg in SVG

In celebration of the Battenberg theme, here is an animated Battenberg! It's made of two SVG paths composed of lines and arcs. These are calculated using three angles and a bucket load of trigonometry (I'm not as good as I used to be at trig). A requestAnimationFrame loop updates these angles and the paths. Click on start to begin the animation. You can tweek the angular speeds using the three number inputs

Content-Security-Policy and service workers

I was recently tripped over by a subtlety in how service worker fetch events and fetch works in conjunction with content security policy (CSP). This happened while adding an image to the about page. This post is the result of a conversation I had with Jake Archibald on twitter (with thanks for helping me to understand what was going on)

Update on webmentions

In a recent post I wrote that I had integrated webmentions, and some of that has since changed. Time for an update

A brighter shade of beige

When I originally built this blog, I gave it a very simple no nonsense theme. One colour (beige) for the background and black for text and the odd horizontal rule. After a couple of minor iterations I added a sticky navigation bar (in CSS, no JS)

Putting back the service worker

In the last post about this blog I wrote about why I removed the service worker which made this blog a progressive web application

About this blog 3

It's been a while since the last entry about how I've built this blog. Since it is constantly evolving, now seems as good a time as ever to write about some of the changes I've made

Essential tools for JavaScript beginners

I’ve noticed when helping people to learn JS is that I’m happy to let them learn without any tools. In hindsight this is very strange. I wouldn’t dream of programming like this! I make mistakes all the time, and tools help me to catch them early. Tools also help me to streamline repetitive tasks

Advent of Code 2017 day 20 task 2

SPOILER ALERT: If you're doing the 2017 Advent of Code, you may not want to read onward

Tip: Array.from

SPOILER ALERT: If you're doing the advent of code this year, you may not want to read onward. This post does not give any solutions away, but does contain information about how I approached a part of the first challenge

My first custom element

After some years of browser vendors working out what web components should look like, they're almost ready for the prime time. The part which I find most intriguing (custom elements) has finally stabilised. With custom elements, you can make new HTML elements which have custom behaviour which you define using JavaScript. In this post I'll demonstrate a custom element for fuzzy counting

Test friendly mixins

I've recently been attempting to code a clone of the classic game asteroids using canvas in the browser. Since this is me, I've been distracted by all sorts of programming detours

Making arcade controls: Arduino Leonardo code

I recently got it into my head that I wanted to build an arcade control panel from parts. Specifically, an 8 way digital joystick and a bunch of buttons. How it'll look when finished isn't important at the moment. It's enough now to say that there'll be a joystick, six regular buttons, and two buttons for start and select use

Promises and Node.js event emitters don't mix

To many experienced Node developers, the title of this post will seem intuitively obvious. Nevertheless, it's useful to see what unexpected behaviour can occur when the two are used together. Here's an example

Progressive enhancement #2

I recently attended ffconf, and was introduced to position: sticky;. Support for it is patchy, but where not available the header will scroll out of view as it did in the past. Where available, the navbar will stick to the top of the window when the rest of the header is scrolled out of view

Progressive enhancement #1

When I first put together the CSS for this blog I avoided a fixed header since the header felt a bit large, and I didn't want to take up too much space which could be used for content

Tip: customizing npm version

The npm CLI has a bunch of useful utilities for managing projects. The obvious one is npm test but there are others. I particularly like working with npm version (the subject of this tip)

Adding missing features to Set

ES2015 bought a Set constructor to JavaScript. It's pretty barebones, consisting of a constructor which creates objects with a few methods for adding, removing, checking if something is a member, and iterating over the set. Instances have the essential quality of a set; an item is a member of the set or not a member. Unlike an array, an item cannot be an element more than once. In other words you can avoid using arrays and doing a lot of indexOf checking

A presentation on async-await and Toisu!

Just before Christmas I gave a presentation on the upcoming async-await JavaScript language feature, its basis in promises and generators, and finally a tiny server framework (like Express but a lot leaner and more modular) which can make use of async functions as middleware (since an async function is indistinguishable from a normal function which returns a promise). I'll introduce Toisu! in a blog post soon, but until then here's the presentation

Interfaces for JavaScript

I use instanceof a lot in JavaScript. It's very handy when writing unit tests. It's easier to do an instanceof check than it is to exhaustively probe an object

Private methods for JS classes

This is a short companion to an earlier article I wrote on using WeakMap for private data with JS classes. While private data belongs to instances, private methods can be shared between instances of a class (just like its regular methods). An implementation using ES2015 modules looks like

How I schedule posts using atd

This blog is built with a static site generator. The generator, the markdown source files, and the generated HTML files are all kept together in the same git repository. Every time I commit a change, a pre-commit hook runs the generator and adds the generated HTML, so that the blog entries are always up to date. Then the changes are pushed up to GitHub

About this blog 2

I touched briefly on the technology used in this blog in a previous post, but I didn't explain the motivation behind a lot of the choices I made when building it. I'd like to do that in this post. The design and architecture of this blog is the product of what things I like in other blogs, and also those things that I find frustrating. Where a choice was not obvious, I opted for the simplest option. The point of the exercise was to get it online. Below are a few points in no particular order

About this blog

This blog took a long time to get started. Every time I tried to build it, I wound up focussed on some tech I wanted to use to host it. In the previous iteration, I even wrote a server framework. I took some holiday over the Christmas period, so I decided to throw everything away and make something minimal

Private data for JS classes with WeakMap

Private data has always been awkward in JavaScript. It's particularly difficult when it comes to constructors, and with ES2015 recently published, classes too. Let's say we have an example class, exported by an ES2015 module