Blog

Reading Classic Papers in Programming Languages

programming languages

I’ve decided to read some classic papers in programming languages over the winter holidays. I’m mostly drawing my list of papers from here and here. I’ll make a little post with a summary of each one as I go along, and write out anything that I found particularly interesting or surprising.

How to Organize a CS Research-a-Thon

community

When I first decided to organize a computer science research-a-thon, I had no idea where to begin. I expected to find plenty of useful info online from other unis and clubs. However, I found almost nothing; this event, apparently, has not been attempted before.

Heavy (But Not in Wait)

music

Heavy (But Not in Wait) by L’Rain

Migrating From Wordpress To Jekyll

jekyll

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.

Getting Started With Jekyll

jekyll

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.

New Website and Blog!

jekyll

I finally got around to updating my personal website and blog!

Playing Around With LeNet

machine learning

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:

Pixel Value Visualization

machine learning threejs

I’m currently doing a machine learning course and spending…slightly more time than usual contemplating high-dimensional data.

ThreeJS Terraforming Tool

threejs

So, somewhat accidentally, I made a terraforming tool in threejs! Check it out:

ThreeJS Rhombic Dodecahedron

threejs math

I’ve been working with threejs a bunch lately. Here’s a pretty shiny tessellation of a space-filling polyhedron called the rhombic dodecahedron:

Building Themeable Web Apps

rambling

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.

Pure Scss Slideshow

css

The performance of this snippet is not great in chrome, but nonetheless…

Here you go!

Old Sites

neither hither nor thither

i’m redoing my personal website and feeling super nostalgic for my websites of yore.

Ear Velvet

music

I’ve listened to this Indonesian band Sore a bunch lately. Also, I’m currently recovering from a very serious Cocteau Twins addiction. Some great songs:

Command-Click Prevent Default

javascript

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.

$(".something").click(function(event){
    if (!event.metaKey) {
        event.preventDefault();
        // etc
    } else {
        //other stuff
    }
})

Pure CSS Animated Squiggle Underline

animation css

Probably not a great use of my time. Anyways…

UPDATE: Delaunay Triangulation

javascript math svg

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.

Delaunay Triangulation in JS

javascript math svg

My initial goal was to make a dynamically generated triangle pattern for a site, like so:

The pattern.

That site will generate a new pattern on each visit.

Here you see a set of points, randomly generated, that has been triangulated. In other words, every generated point has become the vertex of a triangle and all triangles are non-overlapping.

The demo.

In the demo, drag points to see the triangulation recalculate.

Life Without Buildings

music

Ahhhhhh! Loving this band lately. Here are some of my favorites:

CSS Border-Style Animation

animation css

You can’t use CSS to animate between a solid and a dotted border style, which makes sense because the change is non-numerical. But you can use CSS to achieve the following effect:

Heart

neither hither nor thither

oil paint + 4 clear plastic sheets

Double Slider Widget

css javascript

CSS Hack: Fixed Width-To-Height Ratio

css

Somehow I only just heard about this hack. But now it seems so obvious!

Set a fixed width-to-height ratio on a css element by including a tiny img in that element and setting the image’s width to 100%.

If my image is 10 pixels wide and 5 pixels high, the element that contains it will also maintain that 2:1 ratio!

Oulipoidal Poegenic Potentiomat

games

i made a thing. the purpose of this thing is for you to make a thing also. y’know? so, make something! (And you should totally send me a screenshot of the thing that you make.)

Transition-Timing-Function

css

So, obviously

transition: all 1s ease;

and

transition: all 1s linear;

but did you know

transition: all 1s cubic-bezier(0.42,0,0.58,1);

???

Random Normally Distributed Values in JS

javascript math

I want random data! But…I want them to be distributed normally!

The ability to generate random data that are normally distributed is very useful. Here’s how you do it in Javascript:

Cross-Browser Custom Dropdown

css

I’ve read a number of recommendations for customizing the appearance of dropdowns. This is the closest I’ve come to finding a cross-browser solution:

Bug in Vertical Alignment?

css

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.

To fix this issue, make sure you normalize this value, e.g.:

vertical-align: bottom;

Prevent Text Selection

css

utility class:

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

scss mixin:

@mixin noselect() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.item { @include noselect(); }

from SO

Little Animation Thingy

animation

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!

SVGPathInfo Web Interface

javascript svg

I made this site so that SVGPathInfo can be used online. Just paste in your path string and convert it to JSON, relative, absolute or cubic Bézier.

SVGPathInfo.js

javascript svg

I made a little Javascript library to quickly get info on an SVG path element. Check it out:

Math of Bézier Curves

animation javascript math svg

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.

I just read this really illuminating article.

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.

SVG Arc Command Parameters

animation svg

An SVG <path> element’s “arc” command (denoted a or A) has 7 parameters:

<path d='a {rx} {ry} {x-axis-rotation} {large-arc-flag} {sweepflag} {x} {y}' />

That’s quite a lot of params for one command, and the names of the params are not exactly enlightening. Here’s the deal:

Conway’s GOLf

animation games javascript

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.

SCSS Mixin For @font-face

css

define it

@mixin font-face($fontname){
  $filepath: "fonts/" + $fontname + "/" + $fontname;
  @font-face {
    font-family: $fontname;
    src: url($filepath + ".eot");
    src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $fontname + "") format('svg');
  }
}

use it

$font1: helvetica;
@include font-face($font1);
p{ font-family: $font1; };

Compile SCSS Automatically On Request w/ PHP

css

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.)

Pentagram ≅ Pentagon

animation javascript math svg graphs

Pentagrams and pentagons are actually a bit spooky…

Graph Theory

animation javascript math svg graphs

I’m currently reading a book on graph theory.

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.

Circle w/ Cubic Bézier

math svg

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).

60’s French Pop

music

60’s french pop is extremely cute:

SSH Keys, Briefly

linux, etc

Using ssh keys is super useful for speeding up the process of logging onto remote machines, doing file transfers between machines, or using git. Here is a brief guide to getting started.

Force Favicon Reload

html

<link rel="shortcut icon" href="http://website.com/favicon.ico?v=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.

Lazy Livin’…

music

Song by the new tweedy brothers:

Texturized Text

css

.class {
 color: red;
 -webkit-text-fill-color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(path/to/bg/image) repeat;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;
}

Mandatory Yearly Björk Phase

music

For about 3 years now [UPDATE: 4 years!] I’ve experienced a yearly 2- or 3-week long obsession with Björk. These are some lovely songs:

JS's HTMLCollection is a Pseudo-Array

javascript

var realArray = Array.prototype.slice.call(document.getElementsByClassName('classname'), 0);