Below is a procedural snowman. I'm using a little code to create Christmas
cards again this year, and as before I wanted each to be unique! If you received
a card from me, you may see something like ?seed=1234567890
in the URL bar.
That will be the random seed which generated your snowflake (and it's yours to
keep). To see a random snowflake, remove everything after the question mark and
hit enter. Refresh the page to see a fresh random snowman…
I went to ffconf 2022 a couple of weeks ago, and two of the talks in
particular resonated with me... (more actually, but these felt actionable)…
The :has()
CSS pseudo-class opens up all sorts of possibilities. I
wanted to see if it could simplify how I handle the ruby text (annotations above
or below text to help with reading) in my Japanese notes. It works (in Safari
and Chrome at least, and hopefully Firefox soon)…
Below is a procedural snowflake. I'm using a little code to create Christmas
cards this year, and I wanted each to be unique! If you received a card from me,
you may see something like ?seed=1234567890
in the URL bar. That will be the
random seed which generated your snowflake (and it's yours to keep). To see a
random snowflake, remove everything after the question mark and hit enter.
Refresh the page to see a fresh random snowflake…
A generative patchwork of pastel colours. The colours begin with a randomly
picked colour in LCH. Other
colours are hue rotations in LCH space so that they're perceptually nice
together. Feature detection is used to render using LCH colours when the browser
supports them (Safari only at the time of writing), or to pick a close colour in
RGB space when LCH is not supported (the code for this is based on code in
d3-color). Refreshing generates a new
patchwork…
I had some issues getting the v3 AWS SDK for JavaScript to communicate
with localstack S3, but I found a solution! With the V2 JS SDK, the
configuration object for the S3 client looks like…
This site uses a static site generator to build plain HTML pages. Since there's
no database to add, update, or delete pages from, determining when to dispatch
mentions can be challenging! Here's how I use a Netlify
build plugin and an atom feed to manage it…
I use marked
to do the markdown rendering for this blog. A recent
feature makes it possible to create custom block types with a little hacking. In
this post I show you how…
Based on the last experiment, this one uses hexagonal grids rather than
triangular ones. The way the SVG is constructed isn't pretty (a mish-mash of
paths) but it gets the job done. I've given the two grids red and blue lines
and a black background to make the moiré pattern stand out…
This experiment was inspired by field of twistronics, the study
of the intersesting properties of misaligned graphene sheets. The misalignment
produces a moiré pattern which echoes the underlying structure. I'm too
lazy to do hexagonal grids in an afternoon of tinkering so I used triangular
grids instead…
An experiment into generating SVG circles which don't overlap. It was timeboxed to an hour,
so it's a little rough around the edges (but I think that adds to its charm)…
It's been a while since my last maths heavy article. I
enjoy writing these but struggle to find the time to write many…
The graphic below is generated randomly and rendered as an SVG. Occasionally it
glitches, but that's all part of the fun! It was inspired by a graphic seen in
Charlotte Dann's ffconf 2019 talk at about 6:25
in. See the next post for a description of the maths I used to do this…
The day was packed with interesting and diverse talks, and there's just too much
to talk about in a single post. It's definitely worth searching around for other
blog posts to see other's takes on the day…
In the past I used atd to schedule the
publication of my blog posts. When I moved to Netlify I lost the ability to
schedule posts, and didn't think about it until
a recent conversation on twitter with Remy Sharp. Remy asked
how to schedule blog posts for static sites and it got me thinking…
I made the source code for this site public! You can find it
here. I've
written at length about how I've built this, and having
the code makes it easier to point to particular lines. I hope it'll
inspire you to do the same…
I've made a couple of small contributions to Node.js in the past. These were
quite esoteric, and unlikely to be discovered or noticed by most developers.
Recently I made a contribution which might be noticed though…
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 tweak the angular speeds using
the three number inputs…
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)…
In a recent post I wrote that I had integrated
webmentions, and some of that has since changed. Time for an update…
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…
SPOILER ALERT: If you're doing the 2017 Advent of Code, you may not want to read
onward…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…