Blog

When migrating from Wordpress to Jekyll, an obvious first step is exporting your data from Wordpress. Fortunately, there is a Wordpress plugin for that. Unfortunately, some features that we take for granted in Wordpress (such as featured images, and the <!--more--> tag) are not supported out-the-box by Jekyll and may require some extra fiddling.

When I decided to give Jekyll a shot, for my blog do-over, the first thing I did was take a look at the quickstart in their docs. It’s a very straightforward setup but the process would have been much smoother for me if I had known a few things ahead of time.

Just for fun, I followed along this tutorial on how to build LeNet – an early & famously successful neural net used for handwriting recognition – in Python. I’ve been playing with the data a bit to see how my modifications affect the learning rate. Here’s what I tried:

I recently worked on an app that was intended to be themeable – a “white label” app that had a default look and default behaviour which were expected to be selectively overridden on a client-by-client basis. I definitely did not grasp the scope of this requirement before diving in. So, I figured I would share some of my experiences in case they can save anyone else some time.

I often command-click links in order to open them in a new tab. I find it very irritating when a site’s JS usurps that functionality.

It turns out that click events have a boolean attribute – event.metaKey – that is true on command-click. So, you can event.preventDefault() your heart out and still easily retain the expected command-click behaviour.

Hover over me

Make your delaunay triangulation squirm in the updated version of this project, here.

This version also allows you to toggle between wallpaper and wireframe mode.

I decided to build in this functionality because I wanted to make my polygonal background wallpaper be constantly moving slightly, but it’s way too computationally expensive to do that atm. In other words, be warned: your fan will spin up.

I was having trouble applying styles to inline-block elements such that they are rendered consistently across browsers (incl. the latest versions of Firefox, Chrome and Safari). It turns out that they have different default values for vertical-align.

I’m working on an animation library which specializes in animating between paths whose commands are different in number and type. Essentially, from a given set of paths, all paths’ commands are converted to cubic Bézier and then the paths with fewer subpaths or fewer commands are padded (with ’empty’ paths or commands e.g. m0 0c0 0 0 0 0 0).

The interesting part is the way in which the padding is interleaved with the preexisting commands. I’d like to eventually include several parameters to create fine grained control over the style of interleaving. I also think that adding some “noise” or an arc trajectory to the motion of the control points would produce an interesting result. We’ll see!

If you are at all interested in SVG or Bézier curves, you’ve probably seen something like Jason Davies’ animation. I found that those animations are an excellent way of intuitively grasping how Bézier curves work. However, the math behind it all is less intuitive.

Something I hadn’t realized before reading the article is that, mathematically, Bézier curves are not defined as run-of-the-mill functions. Whereas generally one would plug an x value into a function to determine a y value, à la f(x) = y = ax + b , Bézier curves are defined parametrically. The values of x and y are determined independently, according to a third parameter, dubbed t.

This is the general formula for a cubic Bézier:

B(t) = (1-t)3·P0 + 3·(1-t)2·t·P1 + 3·(1-t)·t2·P2 + t3·P3

where P0 and P3 are the start and end points, and P1 and P2 are the first and second control points.

In my free time, I’m making a game based on conway’s game of life. Here’s the result of my work so far. Obviously, it’s not a game yet, but it is a functional cellular automaton written in javascript.

Click on a cell to flip its state, or drag to paint on living cells.

In this example, the starting state of living cells is called a “pulsar” – an example of a cyclic form with a period of 3. In other words, if you step 3 times it will return to the original state.
Click on the cells to turn them on or off – maybe you can find other stable or cyclic forms.

use it

I just started playing with SCSS. It didn’t take very long to learn and, so far, I love it.

There are loads of way to compile your SCSS to CSS to serve to the client. One of the easiest ways to get up and running, if you’re using php, is scssphp.
The SCSS is compiled and returns plain CSS, every time a request is made by a client to your server for a page containing SCSS. (I don’t recommend this in production though.)

A graph, in the mathematical sense, is a completely abstract object made up of sets. However, it definitely lends itself to visual representation, so I’m having a bit of fun making visualizations of some of the concepts.

This paper demonstrates an extremely accurate approximation of a circle using cubic bezier curves.

It takes 4 curves, one for each 90° circle arc.
As you can see above, I’ve implemented that approximation. The black dots represent the start (P_0) and end (P_3) of each segment, and the red dots represent the control points (P_1 & P_2).

Favicons are cached pretty hard by most browsers. This can be an annoyance. Fortunately, there’s a meta tag you can put in your <head> to specify the location of the favicon. Force the browser to grab a new one by appending ? + any string to the url of the favicon.