Danya Lette

Blog

Jun 15, 2017

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.

Jun 3, 2017

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.

Jun 3, 2017

New Website and Blog!

jekyll

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

Jun 1, 2017

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:

Apr 22, 2017

Pixel Value Visualization

machine learning threejs

github website

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

Mar 16, 2017

ThreeJS Terraforming Tool

threejs

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

Mar 15, 2017

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:

Feb 20, 2017

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.

Feb 19, 2017

Pure Scss Slideshow

css

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

Here you go!

gist codepen

Nov 3, 2016

Old Sites

neither hither nor thither

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

Oct 26, 2016

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:

Dec 13, 2015

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

Oct 16, 2015

Pure CSS Animated Squiggle Underline

animation css

Probably not a great use of my time. Anyways…

Hover over me

Oct 14, 2015

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.

Oct 5, 2015

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.

Aug 9, 2015

Life Without Buildings

music

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

Jul 22, 2015

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:

May 15, 2015

Heart

neither hither nor thither

heart-paint-slower

oil paint + 4 clear plastic sheets

Feb 13, 2015

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!

Feb 7, 2015

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

Jan 10, 2015

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

???

Jan 10, 2015

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:

Jan 5, 2015

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:

Dec 16, 2014

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;

Dec 15, 2014

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

Dec 3, 2014

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!

Nov 18, 2014

SVGPathInfo Web Interface

javascript svg

SVGPathInfo user interface

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.

Nov 13, 2014

SVGPathInfo.js

javascript svg

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

github website.

Nov 13, 2014

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.

Nov 9, 2014

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:

Oct 31, 2014

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.

Sep 17, 2014

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; };

Sep 13, 2014

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

Sep 5, 2014

Pentagram ≅ Pentagon

animation javascript math svg graphs

 

Pentagrams and pentagons are actually a bit spooky…

Sep 4, 2014

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.

Sep 3, 2014

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

Aug 22, 2014

60’s French Pop

music

60’s french pop is extremely cute:

Aug 21, 2014

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.

Aug 21, 2014

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.

Aug 15, 2014

Lazy Livin’…

music

Song by the new tweedy brothers:

Jul 25, 2014

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;
}

Jul 23, 2014

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:

Jul 12, 2014

JS's HTMLCollection is a Pseudo-Array

javascript

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