Jordan's working notes
ShaderStack Home 🌙 ShaderStack I’ve been working on a Concatenative Programming Language which compiles to GLSL for writing fragment shaders. You can play with it at shaders.jordanscales.com . Concatenative programming languages (sometimes referred to as “catlangs”) have an elegant syntax for function composition: placing words next to each other. // An example in JavaScript translateX ( scale (…
I recently sat down for coffee with one of my oldest friends in the industry Home 🌙 I recently sat down for coffee with one of my oldest friends in the industry Author’s note: This piece was originally posted on LinkedIn , believe it or not. I recently sat down for coffee with one of my oldest friends in the industry. “How’s everything going?” I asked, “Crazy times right?” “We’re up to 1 million…
It’s just a website Home 🌙 It’s just a website Show up, learn, help others, make people laugh, hone your craft. Take pride in your work but remember, it’s just a website. When you’re stressed and anxious and otherwise feeling doom, remember, it’s just a website. When someone on a podcast who just raised millions talks about changing the world, they’re probably talking about a website. When you…
Where I put my money Home 🌙 Where I put my money I work in New York City as a Software Engineer. I earn a salary and use it pay for expenses such as rent, food, and things that make me happy. At the end of the month there is money left over, and this post explains where I put it to achieve my rough financial goals. 🔗 tl;dr 4-5 months expenses (based on 2 years of spending data) in cash in a…
Credit card rewards points Home 🌙 Credit card rewards points When you swipe your credit card to pay for dinner, the credit card company charges the restaurant a few percentage points – essentially a fee for the service of moving money around quickly and reliably. Additionally, when you carry a balance on your credit card (instead of paying it off), you the consumer are charged pretty substantial…
My career as a series of emails Home 🌙 My career as a series of emails I met with a new colleague at Notion last week and our conversation started with my career history. My half-joking summary is “falling ass-backwards into great opportunities over and over again.” My honest summary is “a series of events where I created luck for myself.” I proceeded to rant for well over half an hour, waving my…
French House Home 🌙 French House French house (sometimes called “Filter house” and part of the “French touch” supergenre) is my favorite type of music by a wide margin. It could be because Daft Punk’s Discovery came out during the time my brain was forming in my preteen years. It could be because the “ Blog house ” subgenre was a movement I contributed to with a blog that taught me how to create…
Reflections on 98.css Home 🌙 Reflections on 98.css On April 16, 2020 I wrote the first commit for what would become 98.css . I’m really proud with how it turned out for reasons technical and non-technical, and wanted to gather my thoughts below. 🔗 When buttons were good I explored the idea of Windows 98 style button borders with a small codepen about two years prior. The inspiration being your…
I Peeked Into My Node_Modules Directory And You Won’t Believe What Happened Next Home 🌙 I Peeked Into My Node_Modules Directory And You Won’t Believe What Happened Next I originally wrote this post on Medium in 2016. It’s now behind a paywall, so I am posting it here on my own website in its entirety – Enjoy! The left-pad fiasco shook the JavaScript community to its core when a rouge developer…
Let’s make a web server Home 🌙 Let’s make a web server The net module, which ships with Node.js, can be used to create TCP servers and clients. Today we’ll make a server, use it, and then upgrade that server to a web server which can serve websites and web applications to your browser. We can import the net module and use createServer to create a server, then listen to attach it to a port. const…
Rosalind #2: Transcribing DNA into RNA Home 🌙 Rosalind #2: Transcribing DNA into RNA An RNA string is a string formed from the alphabet containing 'A', 'C', 'G', and 'U'. Given a DNA string t t t corresponding to a coding strand, its transcribed RNA string u u u is formed by replacing all occurrences of 'T' in t t t with 'U' in u u u . Given: A DNA string t t t having length at most 1000 nt .…
Rosalind #1: Counting DNA Nucleotides Home 🌙 Rosalind #1: Counting DNA Nucleotides A string is simply an ordered collection of symbols selected from some alphabet and formed into a word; the length of a string is the number of symbols that it contains. An example of a length 21 DNA string (whose alphabet contains the symbols 'A', 'C', 'G', and 'T') is "ATGCTTCAGAAAGGTCTTACG." Given: A DNA string…
Euler #1: Multiples of 3 or 5 Home 🌙 Euler #1: Multiples of 3 or 5 Let’s solve Euler #1 ( https://projecteuler.net/problem=1 ) in BQN . If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. Find the sum of all the multiples of 3 or 5 below 1000. We can compute the remainder with 𝕨 | 𝕩: Modulus . 3 | 6 0 3 | 10 1 We can…
BQN Home 🌙 BQN I’ve been learning the array language BQN ( https://mlochbaum.github.io/BQN/index.html ), which is a an array language designed and developed by Marshall Lochbaum , previously of Dyalog . 🔗 Articles Here are some posts I’m writing in BQN, similar to my articles of The J Programming language . Euler #1: Multiples of 3 or 5 Rosalind #1: Counting DNA Nucleotides Rosalind #2:…
Prime streams Home 🌙 Prime streams This is a continuation of my post Operating on infinite lists which walks you through writing a primitive “Stream” datatype to represent infinite lists of values. Consider scanning through it, but I’ll do a quick refresher. In this post I’ll use them for one of my favorite recursion tricks – generating lists of prime numbers ( SICP 3.5.2 ). 🔗 Recap A stream is…
Away Messages Home 🌙 Away Messages Over the past few days I’ve been working on my love letter to instant messaging – away.jordanscales.com . It lets you write away messages using a composer similar to the one AOL provided with its AIM software. Give it a whirl. I dipped my toes into retro computing monuments with 98.css , and about two years ago used it to make a basic Away Message dialog on…
What comes next? Home 🌙 What comes next? I made a piece of hashart called element . It allows you to generate realistic sounding chemical elements from a seed phrase - the same phrase always gives you the same element. seed values --> The algorithm that generates the name of the element uses a Markov chain . A Markov chain or Markov process is a stochastic model describing a sequence of possible…
Handcrafted emoji Home 🌙 Handcrafted emoji In JavaScript, strings can contain emoji. You’ll quickly notice, however, that they don’t behave quite like the ASCII characters you come across in most strings. export const emojiExample = [ "😶🌫️" . length , "😶🌫️" [ 0 ] , ] ; Output: [ 6 , "\ud83d" ] That’s because these “characters” are not characters at all but “graphemes” which consist of many…
How to invent reactive JavaScript Home 🌙 How to invent reactive JavaScript Web applications are filled with state and effectively managing and updating that state has more solutions than problems. One solution that I would like to explore is Reactive programming . For example, in an imperative programming setting, a : = b + c a := b + c a := b + c would mean that a a a is being assigned the…
network Home 🌙 network I really wanted to build a piece of art with a bunch of tangled edges on it. At first I tried to do a Traveling salesperson visualization, but the algorithms for doing so are pretty annoying to write and ship. So instead I went “simpler” and drew a Minimum spanning tree over a fully-connected graph (each node connects to every other node). I did this with Kruskal’s…
epicycles Home 🌙 epicycles I wanted to make a piece on double pendulums, but I thought something more Have you had two different menu symmetrical like a spirograph would be better. I’ve taken quite a liking to sine/cosine const x = ( l1 / 2 ) * Math . cos ( ( v1 - 0.5 ) * i * radialUnit ) + ( l2 / 2 ) * Math . cos ( ( v2 - 0.5 ) * i * radialUnit ) ; const y = ( l1 / 2 ) * Math . sin ( ( v1 - 0.5…
automata Home 🌙 automata It was only a matter of time before I made some hashart based on Elementary cellular automata . This piece seeds the canvas to make things interesting, and reuses a lot of the code from turing to draw the bits. I opted to not show a legend on the page because I felt it to be distracting. An automata piece on my e-ink screen with a 1” paper border and a wooden frame seed…
fifteen Home 🌙 fifteen seed values A visualization of the famous Fifteen puzzle , where the hash of the input is used to move the tiles around. 🔗 Layout A lot of these pieces work on canvases of all sizes and shapes (as long as they’re rectangular). Many pieces can reasonably centered in a “square” based on the minimum of the width and height of the canvas, but for this piece I wanted to…
turing Home 🌙 turing A visualization of a 3-symbol, 3-state Turing machine . seed values 🔗 Details The input turing complete hashes to the following: 66a77509eaf0d8589812c53dacb80ebb5f98f16dc06b6ae65f3bd67a5a00937e We divvy this hash up into several parameters: α0 66a775 β0 09eaf0 γ0 d85898 α1 12c53d β1 acb80e γ1 bb5f98 α2 f16dc0 β2 6b6ae6 γ2 5f3bd6 input 7a5a00937e Our machine has a head which…
A blueprint for large numbers Home 🌙 A blueprint for large numbers Consider a modest function “A,” which takes a number and adds one to it. A ( 1 ) = 2 A ( 2 ) = 3 A ( 99 ) = 100 \begin{aligned} A(1) &= 2 \\ A(2) &= 3 \\ A(99) &= 100 \end{aligned} A ( 1 ) A ( 2 ) A ( 99 ) = 2 = 3 = 100 It’s not much of an operator, and is easily defeated by its counterpart: “evil A.” A ˇ ( 2 ) = 1 A ˇ ( 3 ) =…
Operating on infinite lists Home 🌙 Operating on infinite lists Today we’re going to step through one of my favorite exercises in composing functions - building and operating on infinite streams of data. The question we’ll be answering is: How might you represent the following operations? nums // => 1, 2, 3, 4, ... double ( nums ) // => 2, 4, 6, 8, ... fib // => 0, 1, 1, 2, 3, 5, 8, ... This post…
Functions that go backwards Home 🌙 Functions that go backwards In most programming languages, we may author a function that takes an input and produces some output . console . log ( getTrafficLightColor ( "green" , "wait" ) ) // => "yellow" We can say that our code answers the following question: Given a light color and an action, what happens to the color of the light? And it answers it well! We…
Topological sort Home 🌙 Topological sort In computer science, a topological sort or topological ordering of a directed graph is a linear ordering of its vertices such that for every directed edge uv from vertex u to vertex v , u comes before v in the ordering. — Topological sorting , Wikipedia Math terminology aside, a topological sort allows you take a series of "a comes before b" commands a…
98.css Home 🌙 98.css A few days ago I launched 98.css , a "design system" (it's a CSS file) for making interfaces that look like Windows 98 ( on GitHub ). I'm pretty proud with how it turned out. I actually started exploring this idea two years ago in a small codepen where I had a go at styling some buttons. This was born out of a remarkably pedantic observation I made where many people would…
When code is data Home 🌙 When code is data You may find yourself itching to write a new programming language, or at least learn why someone might want to write a new programming language. Perhaps it looks like JavaScript. Well, JavaScript is a complicated language. If I were to give you the following code: for ( let i = 1 ; i <= 100 ; i ++ ) { if ( i % 15 === 0 ) { console . log ( "FizzBuzz" ) }…
Is this true? Home 🌙 Is this true? You're writing some code - maybe building out some new features - and it's time to test your work. For some reason, you named your function fn and, for some reason, you want the result to be true . describe ( "our function" , ( ) => { it ( "returns true" , ( ) => { expect ( fn ( ) ) . toBe ( true ) } ) } ) A pretty reasonable scenario, right? Let's make it…