mrspeaker's head in a monitorYou find yourself at the entrance to the Hompage of Mr Speaker. In a darkened corner sits a trunk containing HTML5 games and some JavaScript tidbits. In a dark corner you spy a Twitter account. Exits are North, East, and .

?> _

Me n’ Carl Sagan hand-rolling some WebGL2

Imagine, if you may, an apple sitting happily on your desk. One day, and in a manner causing much confusion to our apple friend - you wrote some weird WebGL2 thing from scratch. From the apple's perspective, it might look something like this.
Carl Sagan in a WebGL2 cosmos
However, from a source code's point of view it would look more like this.


Popcorn kernel bread ™

It is, with no doubt, the greatest idea I have ever had: bake bread with a bunch of popcorn kernels in it.

This idea... it's just... it's by far better than any other idea on this blog. It's better than my Kentucky Fried Chicken Feen from 2005. It's better than my BASIC revelation from 2015. As far as ideas go, it's just about the best there is. The best I could hope for.

It doesn't work though. The kernels don't want to pop. I'm not sure why, but here's how it went:

1. Bake bread

Since taking up the challenge of catching wild yeast in my house, trapping it in a container, feeding it after midnight, then harnessing it's power to convert boring old flour into delicious leavened sourdough - I've began wondering how I could push the limits of this ancient art form.

Adding popcorn kernels was the answer I came up with.

2. With popcorn kernels in it

popcorn kernel bread dough

I mixed in a handful (a bit more I guess) of kernels in to my active-starter-powered dough, and mixed them in thoroughly.

risen popcorn kernel bread dough

Once the dough had risen (~7 hours), I baked it in a cast-iron dutch oven, inside my extremely hot oven set to as-high-as-it-can-go... Then I waited for the fireworks...

3. Wait for the fireworks

baked popcorn kernel bread

Some time later, beautifully-browned, delicious-smelling, sourdough bread. Perfect in every way bar one: it was filled with un-popped popcorn kernels. Not even those on the outside of the dough went out with a bang.

A second great idea arose from the ashes: how about toasting the bread with the still-intact kernels? Could it maybe, possible, maybe give us some kind of interesting result?!

3. Wait for the fireworks

toasted popcorn kernel bread

No, it couldn't. The kernels were inert. Why they refused to pop in the oven, I can not say. In fact, I have not tried to analyse possible reasons, or develop alternative ideas for overcoming these reasons - because of my deep deep disappointment. Also my laziness.

Still... such a great idea.

[UPDATE! I received this great suggestion from Snaptastic (but have since temporarily removed comments, so I'll just post it here!)]: This would be so great!! Try wrapping a kernel in foil next time. And be careful not to eat it. If it pops,then you know it’s a sogginess issue. If not, then might be a temperature issue. I read somewhere that kernels shouldn’t be completely dry since they rely on steam to pop. If it’s a sogginess problem maybe you could coat the kernels in oil first? We need to get to the bottom of this!

ES6 (ES2017+) module support

It's been a long time coming, and we're still on shaky ground - but native module support is close. Not "burn your build tools!" close, but "burn your build tools for personal projects!" close... like arrow function syntax in 2013. If you have Firefox Nightly, or Safari Tech Preview (or Edge, I believe!) - you can give Babel a nice kick in the guts, and get back to some plain ol' JavaScript + HTML + CSS.

At the moment there's a couple of differences from the import syntax you know and love: first, your entry point needs to be a script tag from your HTML file:

<script type="module" src="main.js"></script>

Additionally, you need to add the file extension as part of the import path:

import test from "./test.js";

Notice the ".js" on the end there? Required. This means we lose the "default to 'index.js'" for importing just a folder path:

import test from "./test/index.js";

(Rather than the nicer import test from "./test") Still, I'll take it! Module support is enabled by default in Safari Technology Preview and can be switched on in Firefox Nightly in about:config under the key dom.moduleScripts.enabled - which default to false.

Building geometry with fraggles

My last experiment got out of hand and now the cubes have become self aware. See for yourself!

The earlier "lil cube" example worked by creating individual box meshes and adding them to the scene. This is not a very scalable approach if we want a lot of boxes! Creating a single chunk of 16 x 16 x 32 blocks would take about 20ms to create: More than a single frame at 60 fps, and way too long to do anything dynamic.

Then next thing I tried was to merge the boxes into a parent geometry, rather than adding each mesh individually. This did indeed give a performance boost, with each chunk only taking 5 to 10ms to create. Good, but still pretty slow.

Finally, I went all in for building the geometry myself. Using Three.js's BoxBufferedGeometry as a base, I wrote a function that would create the entire geometry for a single chunk. Each plane is added to a BufferGeometry - excluding any planes that would be obscured by a neigbouring box.

To work with Multi Materials (so you can have a different texture for each side of a cube) I had to split the creation into faces: rendering all the "top" faces first, then all the "front" faces and so on.

The result is a ~1ms render for most chunks on my machine: getting up higher with very complex and hole-y chunks.

Lil’ cube-y thing

Just adding something before the new year. Gotta get those posting stats up.
Lil' cube-t thing!

lil cube-y thing

Made with three.js, quick-sticks. Source of course.

Horizontal Rulez! for your terminal

Horizontal Rulez!

A handy script for your image-enabled (I'm looking at you, iTerm 3) shell. hr will spit out a random horizontal rule, straight from the depths of a GeoCities page. Good times.


THIS IS WHERE YOUR DEMO GOES is my aborted attempt for this year's js1k competition. It uses the browser's speechSynthesis capabilities along with some Web Audio API drones to make a lovely bedtime song...

I don't think I'll get it squashed to < 1k in the next few days though, so plopping it up here for posterity. The source is buried in the middle of the js1k shim somewhere. Just search for "THIS IS WHERE YOUR DEMO GOES".

The elusive Pinterest App Link handler

App Links seem like a perdy good idea: trying to bring back a bit of the web to walled garden-ed applications. Of course, the issue is it's up to the individual app developers to support them. And it seems that the big social sites are quite fond of not making things more open. Also, they like to break stuff that was working before.

The tl;dr is the old Pinterest protocol handler for opening the app was pinit12, now it's pinterestsdk.v1. Previously, to create a pin you'd use pinit12://pin/create/bookmarklet/ now you use pinterestsdk.v1://pinit/. I haven't tested it out completely, because I got really bored of the limitless hell that is "sharing to social networks" - but it opens up the app and looks like it works (I added the info.plist settings from the SDK docs - though they probably shouldn't be necessary).

I found the handler thanks to an error message that popped-up in a stack trace. It eventually lead me to PDKPin.m which contained the following lumps of gold:

static NSString * const kPDKPinterestAppPinItURLString = @"pinterestsdk.v1://pinit/";
NSURL *pinitURL = [NSURL URLWithString:[NSString stringWithFormat:@"%@?%@", kPDKPinterestAppPinItURLString, [params _PDK_queryStringValue]]];
    if ([[UIApplication sharedApplication] canOpenURL:pinitURL]) {
        [[UIApplication sharedApplication] openURL:pinitURL];
    } else {
        //open web pinit url
        NSDictionary *webParams = @{@"url": [sourceURL absoluteString],
                                    @"media": [imageURL absoluteString],
                                    @"description": pinDescription};
        NSURL *pinitWebURL = [NSURL URLWithString:[NSString stringWithFormat:@"%@?%@", kPDKPinterestWebPinItURLString, [webParams _PDK_queryStringValue]]];
        [[UIApplication sharedApplication] openURL:pinitWebURL];

Hopefully this is useful to fellow tired and weary social-sharing-integration souls wandering the wastelands of terrible SDKs and out-of-date documentation (including, most likely, this blog post). God speed.

CyberVision Lite

Indie Game: the movie was filled with inspirational things. The least of which was probably Phil Fish's self-air-quoted childhood "software" creation: CyberVision. When I watched this a few years ago I thought it was too good to be lost to the ages, so I recreated it. Choose between 150, 300, 600, and 1200 flash. There might more more flash's available in the future as downloadable content.

Stick your face in it and stare at it. For a long time.