I chose five personal websites out of the thirty or so I visit regularly and tried to understand what it is about them that utterly captures me.

Whether or not it is obvious to you, I have stolen many things from the following websites. Be it design tweaks, post ideas, or even turns of phrase. These websites are incredible and you should consume them.

Good artists borrow, great artists ~~steal~~ use the inspect tool.

# [arcana.computer](https://arcana.computer)

I have been following Justin Duke's writing for close to two years. His older page is now [depreciated](https://jmduke.com) and he posts to _arcana dot computer_, an [open source](https://github.com/jmduke/arcana.computer) website filled with catalogs and footnotes and light-touch design. The main framework is Jekyll, with dynamic content powered by Airtable. The [About](https://arcana.computer/miscellany/this-site.html) page of Justin's website explains the development/design/ideas behind the website in rich detail. So in this section I'll instead focus on how I _feel_ about the website.

![The index page of arcana.computer.](arcana.computer.png)

My philosophy towards personal websites matches Justin's. He writes:

> Lastly, if there’s anything I can convince you of: you should build a personal site, you should obsess over it, you should meticulously document it, and you should have quite a bit of fun doing so. (It’s worth it.)

The content throughout these pages is personal and reads true. Although it's not a journal as such, as I read through the notes and reviews I get a secret feeling that I'm looking somewhere I shouldn't be — like peeking in a hidden diary.

Justin writes about capturing his [media diet](https://arcana.computer/catalogs/media-diet):

> This started out as a lazy compulsion, but I’ve grown rather found of this habit over time. “You are what you eat”, and all that — I’ve realized that paying more attention to how I’m spending my consumptive time has made me more focused on consuming what I’m interested in, and not simply what’s easiest.

He talks about reviewing older sections of his media diet and how it helps him recollect that time in his life — "suddenly I am taken back to my old apartment on Capitol Hill, and my three weeks of funemployment before Stripe". When coming across old words that I have written, I've also experienced this almost-olfactory flashback of thoughts.

![The catalog listing of arcana.computer.](catalog.arcana.computer.png)

Overall, I am impressed with the breadth and depth of content on Justin's website, as well as how he's made Airtable work for him. I also like that sections are marked as in-progress. I like the personal structure to it. His methods for working on this website are similar to the goals of the [Long Now](https://en.wikipedia.org/wiki/Long_Now_Foundation) and that gels with me.

# [paulstamatiou.com](https://paulstamatiou.com)

Paul Stamatiou writes long form articles about his life and technology. If someone has a curiosity about a subject that he has covered (e.g. [creating with the iPad Pro](https://paulstamatiou.com/made-on-an-ipad-pro/), or [building a lightroom PC](https://paulstamatiou.com/building-a-windows-10-lightroom-photo-editing-pc/)) I wouldn't hesitate linking one of his articles to them — perhaps without even reading it — because of the consistent high quality I have come to expect.

![Paul Stamatiou's website.](paulstamatiou.com.png)

However, this quality comes with a cost, as he describes in [Writing more](https://paulstamatiou.com/writing-more/):

> I'm going to try something different and write more short-form posts here.

> Over the years my focus has been increasing the quality of my articles. They've ended up becoming increasingly time-consuming to create.

Although these articles (which for now he seems to have dubbed "briefs") are shorter and less researched than his other writing they read as complete entries to me. On another website, by another person, they would be complete blog posts.

The more things I write, the more hesitant I am to actually publish. So the way he talks about blogging in _Writing more_ resonates with me:

> I want to get back to what blogging felt like when I started in 2005. Back when posting a few sentences and publishing it within the same computing session was so easy and fun. Where expectations were low and it didn't have to be perfect.

He has written 1210 posts since 2005. My first thought goes to the build times of such a website! In 2011, he migrated from [Wordpress to Jekyll](https://paulstamatiou.com/how-to-wordpress-to-jekyll/). This year he [tweeted](https://twitter.com/Stammy/status/1307347164599922689) that he's looking at moving again:

> really, really want to migrate my jekyll blog to Hugo + Netlify but I have so many weird jekyll hacks and collections and templates/includes that I'm sure the migration would take months of spare time.

> probably faster to build a new site from the ground up, new CSS and all

Also this year, he was interviewed about his work (he's a designer at Twitter) and about his blog on [Thunder Nerds](https://www.thundernerds.io/2019/10/writing-a-blog-and-working-at-twitter-with-paul-stamatiou/). (More people should be interviewed about their technology blogs please.)

Paul is a photographer who generates fantastic photo sets and write ups with little animated maps of the location. His [photos](https://paulstamatiou.com/photos/), and the way they are arranged, is truly fantastic. He has of course written [thousands of words](https://paulstamatiou.com/photos/gear/) about his camera gear.

# [arp242.net](https://www.arp242.net)

Martin Tournoij is the creator of [Goat Counter](https://www.goatcounter.com/) and has posts dating back to 2013. His personal website is Jekyll-based and [open source](https://github.com/arp242/arp242.net). I usually run into his writing on [lobste.rs](https://lobste.rs) (a computing-focused community).

![Posts by Martin Tournoij](arp242-posts.png)

I like the one-page layout of the landing page. There's a list of posts and projects, a picture, and a link to his CV. My favorite post of his is [Analytics on personal websites](https://www.arp242.net/personal-analytics.html) — where he argues in part for vanity statistics:

> As for "vanity stats" or "stats to stroke your ego": I think that’s actually a valid use case as well. After you spent quite a bit of your spare time writing an article it’s just nice to know people are actually reading it. There’s nothing wrong with being validated – it’s a basic psychological need and I’m not a fan of casually dismissing it.

Later on, he wrestles with the fact that since he's the creator of an analytics tool, he doesn't want this website to turn into an advertising channel for it.

Martin doesn't shy away from controversial subjects on his blog. He writes about freedom and democracy, he pushes for empathy towards those he disagrees with. He writes without restraint which is admirable in itself.

He uses his own CSS template ([arp242/hello-css](https://github.com/arp242/hello-css)) which is worth a look. If you'll allow me to use a vague statement, his website has a unique visual readability to it.

# [joelcalifa.com](http://joelcalifa.com)

Joel Califa's website has whimsy. It doesn't take itself seriously.

![The third section of Joel Califa's website](joel-buttons.png)

Clicking this button makes text spawn and fly away and fade (the snippets are things from the old web like: ``, `<frameset>`, `<marquee>`, etc). There's an illustration of his head that hides away when you hover near. The writing in the section headers frizzles with energy.

Joel's website successfully serves as both a work portfolio and a design blog. His _Work_ page describes itself as a "A sample of text-heavy case studies for patient visitors." The design blog has "Low frequency, high quality design articles."

My favorite post is [Tiny Wins](http://joelcalifa.com/blog/tiny-wins/):

> I recently shipped two things at GitHub that had an impact beyond my wildest dreams.

Where he discusses the work involved in designing dynamic favicons for the Pull Request page:

> Now browser tabs will always show a PR’s current build status.

As well as adding an arrow that signals which branch your changes are "flowing" into:

> Before releasing this, people would regularly confuse which branch would be merged into which.

He writes with authentic authority. He covers subjects that seem so obvious after you read them. Like in [Revisiting :Visited](http://joelcalifa.com/blog/revisiting-visited/), where research, the web specification, and its practical uses, are combined:

> A Nielsen study summed this up nicely over ten years ago, “People get lost and move in circles when websites use the same link color for visited and new destinations. To reduce navigational confusion, select different colors for the two types of links.”

> Can’t we, as an industry, get behind that reasoning? A “visited” link isn’t that far off from a “read” email. They both provide the user with the tacit understanding of where they’ve been.

Joel exists in the wonderful space between technology and design where he is addressing problems that directly relate to me. For example, his website is the first place I read [a serious defense](http://joelcalifa.com/blog/unsolicited-dating-advice/) of the `month/day/year` date ordering system.

It fills me with joy that I have only read half of his content.

# [rsms.me](https://rsms.me)

Rasmus Andersson has the prettiest website in this list. An elegant three-column layout that perfectly scales to the browser's width — dropping to two columns then one column. When a page is selected from the top right menu, the background changes to a rich color and shifts the menu up or down. With a wide enough browser, gray bars frame the website on either side.

![rsms.me main menu.](rasmus-menu.png)

Rasmus is the creator of the [Inter](https://rsms.me/inter/) font and uses it to great effect with bold hover colors.

![rsms.me hover effects.](rasmus-hover.png)

Even his [404 page](https://rsms.me/bad-url) is sharp.

After looking around more, I found a `<script>` tag that includes [main.js](https://rsms.me/res/main.js), a debug tool that must have been used to develop the grid layout (which I think is based on [rsms/raster](https://rsms.me/raster/)). Pressing alt+D or alt+G overlays a system of boxes and dots.

![Debug boxes and dots over the post list.](rasmus-boxes.png)

Rasmus's last post was in 2017 — [Introduction to WebAssembly](https://rsms.me/wasm-intro) — but it's one that I revisit often as it's a clear and detailed explanation of the technology.

His use of the right arrow symbol (U+2192) as well as the rounded hover effect on titles (e.g. "Projects" and "Thoughts and ideas") is something that I closely copied for my own website as it is just too perfect.

Like Paul Stamatiou, Rasmus has hundreds of articles and has been blogging for a long time – almost two decades. The earlier posts are more likely to be reblogs, quotes, links, and small thoughts. The kind of things that Twitter is now used for.

Unlike Twitter, the permanence of these small thoughts is poetic. Here, in 2002, a new font is announced next to something like a diary entry without a paragraph break in between:

> I’ve completed a new typeface. It’s a sweet little thing called Hovden Stitch. Yes your guess was correct. It looks like stitches, cross-stitches to be precise. Go get it for your mac or pc right here. Yesterday I hung out on a free festival here in Trollhättan. Laurel Music was great. Paola sucked. Laurel Music is playing at the next Club Feber in Trollhättan.

Hovden Stitch is alive today at [rsms/hovden-stitch](https://github.com/rsms/hovden-stitch).

A decade and one month ago, a cosy post called [The snow is gently falling](https://rsms.me/archive/2010/building-some-software-while-the-snow-is-gently) has a polaroid of a 15" MacBook, a notebook, a warm drink, and the snow outside. A single sentence reads:

> Building some software while the snow is gently falling down over a quiet Stockholm.

# On Reading Writing

You cannot meet someone through their writing. There is always something held back, something distorted. But still, I try. As I spend more time on the internet in these COVID-times, I find myself running into a problem that plagued me during my undergrad years: is it possible to truly connect with someone through language?

One cynical view of language is that it's referential. David Foster Wallace [writes](https://www.dalkeyarchive.com/a-conversation-with-david-foster-wallace-by-larry-mccaffery/) about this view:

> In order for language both to be meaningful and to have some connection to reality, words like “tree” and “house” have to be like little pictures, representations of little trees and houses. Mimesis. But nothing more. Which means we can know and speak of nothing more than little mimetic pictures. Which divides us, metaphysically and forever, from the external world.

Thinking about this stuff puts me in a real funk and I begin to think about reading and speaking like it's a battle. Like I am trapped inside with my secret language and you are trapped inside with yours. The glyphs arrive in my browser and I read and scroll and read and I'm trying to meet you somewhere between my head and yours — to not be alone.

People that inspire me the most (and that I steal from most regularly).

Personal Websites and Internet Writing

I first heard about the [Ink](https://dotink.co/) programming language when I came across [Polyx](https://github.com/thesephist/polyx). Polyx is a productivity suite written in Ink that includes homegrown replacements for Dropbox and Trello as well as a personal relationship manager and a read-it-later service. [Linus Lee](https://thesephist.com/) is the sole author of Ink and Polyx. I read through the source code of Polyx because I was interested in owning my own personal infrastructure — and this was the start of my journey with Ink!

> A functional language that takes after modern JavaScript and Go

Ink exists in the area between a hobby project and a fully grown programming language. It has [documentation](https://dotink.co/docs/), open source [projects](https://dotink.co/docs/projects/), and it's actively developed with regular releases. It is easy to extend, and the source code is clear and understandable. It's got warts, sure, but you could write an application with it that gets you a customer and earns you a dollar.

I sent an email to Linus to chat about the language and he pointed me to some of his newer Ink projects that contained the most idiomatic code to learn from (which were [September](https://github.com/thesephist/september) and [inkfmt](https://github.com/thesephist/inkfmt)). He also fast tracked a planned VS Code [syntax highlighting extension](https://github.com/thesephist/ink-vscode) when he found out what editor I was using!

I spent a few weeks learning the language and created [Ink by Example](https://inkbyexample.com/) — a hands-on introduction to Ink using annotated example programs. Why was my first major project a learning resource? Well, writing about a topic helps me understand it but trying to teach a topic leads me to the hard questions that build mastery.

With technical topics, you meet the same problems that arise when trying to absorb a book. In [Why books don’t work](https://andymatuschak.org/books/), Andy Matuschak writes:

> Have you ever had a book like this—one you’d read—come up in conversation, only to discover that you’d absorbed what amounts to a few sentences? I’ll be honest: it happens to me regularly. Often things go well at first. I’ll feel I can sketch the basic claims, paint the surface; but when someone asks a basic probing question, the edifice instantly collapses

Until I explain a topic in a permanent medium (one that exists outside my own head) I don't know what I don't know. I fix this by building a structure from the basic principles all the way to the tricky nodes at the end of the graph. This can be via notes, an article, or a project.

## Building, Learning

The best way to learn a language is to build something. Ideally, something that solves a personal problem (this motivation will drive you through the quagmires to victory). The structure of Ink by Example is ~~modelled after~~ stolen from Go by Example.

I enjoy language resources that zoom in on a tiny slice of the syntax and give you clean examples. Usually, this starts with printing to console.

```ink
std := load('../vendor/std')
log := std.log

log('hello world')
```

If someone is fluent in another programming language they will want to know how to do _X_ in _Y_. They seek to translate the building blocks that they're familiar with; data structures, functions, and system interfaces.

The home page of Ink by Example presumes that you know what question you're asking. It's designed for an intermediate programmer.

![Hello World, Values, IO, Loops, Control Flow, Lists, Maps, Functions, Files, HTTP, Random, Sorting, Execing Processes](list.png)

When building and learning at the same time I like a resource that _shows how something works_. The 'how' — not the 'why'. A section of code annotated with enough information to get you started. A section of code that you can copy, change two lines, and ship!

![The Random example page that explains how rand() and urand() work](example.png)

The build tool chain for the project is powered by Ink and the [repository](https://github.com/healeycodes/inkbyexample) builds and deploys to Netlify on commits to the main branch. 

I set it up to be fairly hackable. There are two HTML templates (bases for index and example) that are imported as strings and formatted with Ink's `std.format`. The order that the examples are shown is controlled by `examples.ink`. The program files are structured like a table with documentation and code in parallel cells.

The program files are turned into executable code and evaluated when the test or build commands are ran. This was useful during development because it gave me full certainty that these code examples actually worked. (Unit tests would have been better!)

The templates are compiled and written to `/public` as HTML files, along with a few static files like CSS and an `og:image`.

For syntax highlighting, I read through another Ink project called [September](https://github.com/thesephist/september) and saw that it provided a print command that sent Ink source code to the terminal with syntax highlighting via ANSI escape codes. I imported the files required for highlighting and altered the escape code functions to instead wrap the lines in `` elements with different class names.

```ink
` before: if comment, apply ansi.Gray function `
(Tok.Comment) -> Gray

` after: if comment, wrap in span to target via class in HTML `
(Tok.Comment) -> s => '' + s + ''
```

The annotated examples programs are designed to print out a lot of data. This is rendered under the source code as if the file has been 'ran' in a terminal to create a natural feel for an intermediate programmer and to show the shape of the data we're dealing with.

![The section of output under the annotated program as if it has been ran via terminal](output.png)

Since everything builds to a folder called `/public`, the Netlify configuration is just two lines long. The build time is 17 seconds long.

```toml
[build]
 publish = "public/"
 command = "make build-linux"
```

## Why Learn Ink At All?

Sometimes I am too career-driven in the languages and technologies that I pick up. So I wanted to make sure that I was still learning to explore and be creative — unencumbered by StackOverflow surveys that detail what technologies make you most employable. And what is more esoteric than a language that only two people actively code with (to my knowledge: myself and Linus).

I find Ink enjoyable to write code with. It's terse, functional, and for small solutions it's extremely clear to read. Programs are easy to share and deploy; a binary and a script. After reading some of Linus's passionate [technical articles](https://dotink.co/posts/) about Ink I felt an unexplainable yearning to try it out. So I did.

The future of Ink sounds exciting. I caught up with Linus a few days ago and he hinted at an experimental implementation written in Rust. He suggested some language problems that might be fixed too. He also pointed me towards resources on interpreters and compilers which I've been devouring. Who knows — maybe I'll be writing about my own programming language one day soon.

Picking up Ink and giving back to the community.

Learning the Ink Programming Language

I love code puzzles. Always have. My deskmate told me about a puzzle that no one in the office had been able to solve when they shared it around. I was intrigued because of the challenge but also because it was a JavaScript puzzle.

I'd understand if it were a Project Euler problem (they can be mathy) or perhaps if no one had found the optimal solution to a LeetCode 'Hard' (I've seen some problems that once upon a time were research papers).

__The puzzle took me two weeks to solve__. I became stuck almost instantly and then it hung around in the back of my mind until the solution came to me. First, let's take a look at the easier version of the problem which helped me unlock the harder version.

Don't scroll too fast unless you want spoilers.

### [Codewars: Multi Line Task++: Hello World](https://www.codewars.com/kata/5935558a32fb828aad001213)

- Write a function `f` that returns `Hello, world!`.
- Every line must have at most 2 characters, and the total number of lines must be less than 40.

Without the line restriction. The solution is:

```javascript
function f () { return 'Hello, world!'; }
// or
const f = _ => 'Hello, world!';
```

I started splitting up the code and shortened the variable declaration. We can throw away the `const` and allow the function to exist in the global scope. We can also use template strings to break up the string into multiple lines.

Errors incoming.

```javascript
f
=_
=> // Uncaught SyntaxError: Unexpected token '=>'
`H
el
l,
 w
or
ld
!` // This string has newline characters in it!
```

My next idea was to define the function inside an object and then retrieve the function out of the object.

```javascript
f=
{g
()
{
return 'Hello, world!'; // Too long!
}}
[`
g
`[
1]
]

// 'Beautified'
f = {
 g() {
 return 'Hello, world!';
 }
 }
 [`
g
` [
 1
 ]]
```

No errors, I was declaring a function but now I couldn't figure out how to return from the _inner_ function without using the `return` keyword. It felt like I was close but I wasn't. I was still stuck on defining the string without newline characters as well.

### Finding inspiration: [JSFuck](http://www.jsfuck.com/)

> JSFuck is an esoteric and educational programming style based on the atomic parts of JavaScript. It uses only six different characters to write and execute code.

Reading through this project's [source code](https://github.com/aemkei/jsfuck/blob/master/jsfuck.js) really opened my mind to some parts of JavaScript that never really come up unless you're doing something like writing a library or code golfing.

Once I figured out how to remove the newline characters from the `Hello, world!` message (escaping with a backslash `\`) everything else fell into place. I could now use square brackets `[]` on objects to run pretty much anything. However, one of the requirements was to keep the total line count under 40 (one of the reasons why using JSFuck encoding was out of the question).

My idea was to create a new function by calling [Function.prototype.bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) on a [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) method. I used [String.prototype.trim](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim) because it had the shortest name (and conveniently got rid of any trailing newlines too).

```javascript
f=
''
[
'\
t\
r\
i\
m'
][
'\ // Get a new function where `this` is "Hello, world!"
b\
i\
n\
d'
]` // Tagged template, see below
H\
e\
l\
l\
o\
,\
 \
w\
o\
r\
l\
d\
!`
```

I also used tagged templates to pass `Hello, world!` as an argument to bind.

> Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values.

Let's take it up a level to the harder version that started this journey!

### Codewars: [Multi Line Task∞: Hello World](https://www.codewars.com/kata/59a421985eb5d4bb41000031)

- Write a function `f` that returns `Hello, world!`.
- Every line must have __at most 1 character__, and the total number of lines must be less than 145.

Without having first solved the two-characters-per-line version I don't think I would have come close to answering this version.

The solution I went for is the same, we use `bind` on `trim` and pass the message as an argument (without template tags this time). To access the String object we use `[]+[]` which evaluates to `""`.

Since we can no longer escape the newline character from within a template string we have to use a workaround. The property names (`trim`, `bind`) and the message (`Hello, world!`) have to be built with concatenated variables.

We use [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) on a template string and use empty slots in the first array to 'skip' assigning the newline character to anything. Like this:

```javascript
[,a,,b,,c] = 'xHxix!' // avoid the "x"s
a + b + c // Evaluates to: "Hi!"
```

I didn't optimize the solution any further once it passed the requirements. It's been left verbose to better explain what's going on (for example, we only need one "l" in the template string).

```javascript
[ // With destructuring assignment, start declaring variables
,
t
,
,
r
,
,
i
,
,
m
,
,
b
,
,
i
,
,
n
,
,
d
,
,
H
,
,
e
,
,
l
,
,
l
,
,
o
,
,
c // Comma
,
,
s
,
,
w
,
,
o
,
,
r
,
,
l
,
,
d
,
,
x // Exclamation mark
]
=
`
t
r
i
m
b
i
n
d
H
e
l
l
o
,
 
w
o
r
l
d
!
`
f // Start declaring our function
=
( // This evaluates to "" or, the String object
[
]
+
[
]
)
[ // `trim`
t
+
r
+
i
+
m
]
[ // `bind`
b
+
i
+
n
+
d
]
( // Can use parentheses or template tag syntax to call `bind`
H
+
e
+
l
+
l
+
o
+
c
+
s
+
w
+
o
+
r
+
l
+
d
+
x
)
```

 

I'm definitely taking a break from language-specific coding puzzles — give me logic over syntax! However, I'm glad I scratched this itch.

Writing JavaScript with a one character width restriction.

Hardest JavaScript Puzzle I've Ever Solved

When all other resources fail me, technical blogs come to the rescue. They provide insight into my problem, clues about the design of a potential solution, and sometimes humor or even an emotional connection. I collect new tech blogs. I devour them.

I write to provide that same benefit, (I try) to help other engineers and to promote free and open software (FLOSS — [Free/Libre and Open Source Software](https://www.gnu.org/philosophy/floss-and-foss.en.html)). I go back and correct errors, add asides, links, and errata. I work on new content but improve the old stuff too.

Aside from the innumerable benefits, open-source software is vital for a long-lasting website. Closed software will always come to an end. The EOL date for Adobe Flash is 2020 — software that was used on [28.5% of all websites in 2011](https://opensource.com/alternatives/flash-media-player). Its demise has been met by cheers but people are grappling with the prospect of [lost content](https://github.com/open-source-flash/open-source-flash).

Let's say I plan to revamp my [personal website](https://healeycodes.com/) into a brief footprint on the sands of time. What can I do to extend the shelf-life of the second iteration of its production system? What web standards are sure to be kicking as the century turns over and [The Clock of the Long Now](https://en.wikipedia.org/wiki/Clock_of_the_Long_Now) ticks again.

## Static vs dynamic

To define, I'll say that a [Jekyll](https://jekyllrb.com/) website is static and a Node.js/Express program with database calls is an example of dynamic. A static site generator takes some files, usually text-based, and builds a website into a folder which can be dispersed by any web server. These generators are smart, they build interactive nav bars, minify all of your files, some even make API calls to get up-to-date information.

[Gatsby](https://www.gatsbyjs.org/) is a static site generator that takes advantage of modern browser features. It uses progressive/responsive image loading, offline access, and [provides](https://www.gatsbyjs.org/features/) a React-based design system with a bustling eco-system surrounding it. But if I have some content that I want to provide to the world for a century, Gatsby seems like overcomplicating the problem. It adds many dependencies and is working on [accessibility](https://www.gatsbyjs.org/blog/2019-04-18-gatsby-commitment-to-accessibility/) where other generators are accessible by default because they're flat sites.

At the very worst, a static site generator will generate HTML files which can simply be read by the human eye. They can be archived and left. Content management systems like Blogspot or SquareSpace generate a pile of JavaScript which pulls your files from a propriety location, likely without a published spec.

## Markdown

Markdown sounds like the tool for the job (but only if a spec is included). Since its [invention](https://daringfireball.net/projects/markdown/) Markdown has empowered READMEs, blogs, forums, and more. I use it to drive a number of things including this article. However, it exists under a kind of living tree doctrine. Services add their own features and interpretations (which is a good thing) but for our century-long plan, we'll need a document that explains how the markings should be interpreted to display the content in its originally planned manner.

> I think of the oak beams in the ceiling of College Hall at New College, Oxford. Last century, when the beams needed replacing, carpenters used oak trees that had been planted in 1386 when the dining hall was first built. The 14th-century builder had planted the trees in anticipation of the time, hundreds of years in the future, when the beams would need replacing. Did the carpenters plant new trees to replace the beams again a few hundred years from now?
 — WIRED SCENARIOS: THE MILLENNIUM CLOCK DANNY HILLIS

## Maintenance

An ideal software stack might have one dependency, a run-time from a too-big-to-fail programming language. Perhaps a static site generator written in [pure Python](https://github.com/lepture/mistune). Maybe even that is overcomplicating it. Some blogs that I enjoy are created via [Makefile](https://github.com/mitsuhiko/lucumr)! The [Lindy effect](https://en.wikipedia.org/wiki/Lindy_effect) is a theory that means _the life expectancy of technology is proportional to its current age_. I would like to avoid revamping every five years ⁠— or sixteen times in this coming century. Maybe the ideal technology is in fact from a decade ago and is not present in my lexicon.

Dead links are a problem but a link crawler can be run on a cron job. I use a similar method and go back to correct links to resources that have moved — or I use an alternative resource. If a source disappears entirely, I'll write a footnote. I know some writers back up all of their sources to create a self-contained web — which is a noble, librarian-like goal.

Continuous improvement of the lightweight design _and_ the content will be necessary. Or we could just write as professors do, take Peter Norvig's article on [solving sudoku with Python](https://norvig.com/sudoku.html). It's written like an RFC spec and apart from the two graphs is replicable by a century-old typewriter.

## Content that mellows

Through repetitive practice, my writing has and will improve over time. I don't want to leave my old articles to rot. Posts about specific technologies can be locked (with minor trimming) but there are others which aim to be timeless. I wonder about a schedule where content is re-edited and parts re-written every X months. Performing a quick readthrough of many of my old articles leads to me dropping a resource here and an extra example there. Evergreen.

It's at this point that proper version control becomes important as changing an article can change the meaning, which can invalidate an offsite citation. Providing access to different versions of articles sounds non-trivial for a static site generator. It sounds like Wikipedia's [system](https://en.wikipedia.org/wiki/Help:Page_history)!

If you are interested in solving any of these problems with me you should [contact me](mailto:healeycodes@gmail.com)!

## Tech blog recommendations

- [Julia Evans](https://jvns.ca/)
- [Peter Norvig](https://norvig.com/)
- [Drew DeVault](https://drewdevault.com/)
- [Alice Goldfuss](https://blog.alicegoldfuss.com/)
- [Tristan Hume](http://thume.ca/archive.html)

What If I Want My Website to Last for 100 Years?

Usually, code golf means one of two things:

- The act of shortening a section of code.
- A wonderfully obscure community on the internet who compete to write _very_ short code. To some, they are seen as a group that 'takes the joke too far' but to me they are **artisans**.

Code golf challenges are not always about writing the shortest code though. Some competitions score on [creativeness](https://codegolf.stackexchange.com/questions/21835/most-creative-way-to-display-42). Some questions are even just asking _is this possible?_ — and the results are beautiful. Later on, we'll see a RegEx that only matches itself.

The most common measure for a code golf competition is the amount of bytes the answer requires, generally this can be understood as the number of UTF-8 characters. `print('Hello, World!')` would be a 22 byte answer. Like golf, the lowest score wins.

For 'Print every ASCII character your program doesn't have', [Umbrella](https://codegolf.stackexchange.com/a/15497/78322) is the current leader for JavaScript with 84 bytes — which is relatively long.

```javascript
// Alerts 'bcdfghijkmnpquvxyz6840'
"!#$%&*+,-13:<=>?@[\]^_`{|}~AERTOWS";alert('BCDFGHIJKMNPQUVXYZ'.toLowerCase()+95*72)
```

Let's see an extreme example, the [GolfScript](https://codegolf.stackexchange.com/a/12376/78322) entry. Language reference [here](http://www.golfscript.com/golfscript/quickref.html).

```golfscript
# Outputs the remaining ASCII characters
{`),32>^.}.~
```

GolfScript is _quite_ hard to follow. Most of the time, we write code for humans — not machines. In code golf one writes to score points. The standard programming languages, while often used, can be restrictive. For example, I have never seen a C# or Java answer come top in a shortest-answer-wins challenge.

#### Esoteric languages

An esoteric language:

- experiments with [weird ideas](https://esolangs.org/wiki/Hexagony).
- might be hard to [program in](https://esolangs.org/wiki/Unreadable).
- might even be designed as a [joke](https://esolangs.org/wiki/Brainfuck).
- is likely [not practical](https://esolangs.org/wiki/JSFuck).

Much like mainstream programming languages have evolved over time, so have code golfing languages. These languages are designed with different goals. Some want to be able to write the [smallest programs](https://esolangs.org/wiki/Pyth). Some are written [just because](http://esolangs.org/wiki/Shakespeare).

[Hexagony](https://github.com/m-ender/hexagony) is a two-dimensional programming language. Let's take a look at a program that prints 'Hello, World!'. You can run this online at [tio.run](https://tio.run/##y0itSEzPz6v8/19BQcFDwVohVcGaS0EhB8hKAWItLiBRBMT5QBzOBRKGsLUUTLgUjIHQWsFBQU/BDqjHWsEIyLdRiAGyFUzAavT//wcA) a.k.a. Try It Online — an open source playground of **636** languages.

```hexgony
 H ; e ;
 l ; d ; *
 ; r ; o ; W
l ; ; o ; * 4
 3 3 ; @ . >
 ; 2 3 < \
 4 ; * /
```

Intrigued? One of my favorite pieces of code golf writing is the language creator's [description](https://codegolf.stackexchange.com/a/57706/78322) of his primality testing program. Reading about these solutions, and experimenting with my own, exercises my problem-solving muscle. It helps me to learn the edges of my languages.

#### Community

Similar to the open source community, code golf is often a collaborative effort. Languages are developed in the open, and questions will find helpful answers. Competition 'entries' will also receive polite assistance. I remember my first attempt at code golf, I received welcome messages and suggestions for shaving off bytes.

The [Programming Puzzles & Code Golf](https://codegolf.stackexchange.com/) section of StackExchange is the most active code golf community on the internet and this is where you can find many of these languages in use. [Esolangs](https://esolangs.org/wiki/Main_Page) is a community wiki where the most esoteric languages are covered in-depth. The #codegolf tag on Twitter is slow but welcoming.

#### RegEx that only matches itself

As promised, [this](https://codegolf.stackexchange.com/questions/28821/regex-that-only-matches-itself) post is a fun one. The poster begins by stating that _this may well be impossible_ before elaborating on the challenge. Fortunately, [jimmy23013](https://codegolf.stackexchange.com/users/25180/jimmy23013) shows us that not only is this challenge possible but is solvable quite tersely indeed.

```bash
# RegEx that only matches itself
# in (PCRE) Perl Compatible Regular Expressions
<^<()(?R){2}>\z|\1\Q^<()(?R){2}>\z|\1\Q>

# A more widely compatible version:
/^\/()(?R){2}\/\z|\1\Q^\/()(?R){2}\/\z|\1\Q/
```

#### Is this number prime?

Let's start with a Python [answer](https://codegolf.stackexchange.com/a/57650/78322) (59 bytes). It's as naive as prime-checking gets but is creatively short. It demonstrates a typical code golf answer: _solve the problem the long way round then apply syntax tricks_. (Comments my own).

```python
# take a number via stdin
n=int(input())
# build an array of this number's factors from 1 to n
# if there is only one factor (the number one) then it is prime!
print([i for i in range(1,n)if n%i==0]==[1])
```

The leading JavaScript answer is a little harder to pick apart.

```javascript
// Alert true or false given an input number
alert(!/^(?!(..+)\1+$)../.test(prompt()))
```

The [poster](https://codegolf.stackexchange.com/a/57692/78322) tells us that it uses a 'cool unary regex to determine primality'. Further research found [this](https://iluxonchik.github.io/regular-expression-check-if-number-is-prime/) ~5000 word article which explains said RegEx expression. As you've probably started to realize, code golf is like programming in that it's a rabbit hole that doesn't end. But it does get more rewarding the further you dive in.

#### Elsewhere on the web

[JS1k](https://js1k.com/) is a JavaScript demo competitive for 'fancy pancy JavaScript demos' that come in under 1024 bytes. They are very visually impressive.

There's also the [The International Obfuscated C Code Contest](https://www.ioccc.org/) which began in 1984. It's closer to treasure hunting than golf though! Here's a maze generator entry from 1995, by Carlos Duarte ([source](https://www.ioccc.org/years.html#1995_cdua)):

![1995/cdua](c-maze.png)

Honorary shoutouts to two of my favorite esolangs [05AB1E](https://github.com/Adriandmen/05AB1E) and [Jelly](https://github.com/DennisMitchell/jellylanguage). They both place well in challenges and are usually accompanied by well-written explanations which are a great entry point for learning them.

Answered: What the Heck is Code Golf?

_Dust off your ternary expressions, we're going in._

One-liners are tricky to maintain (and sometimes even hard to understand) but that doesn't stop them from being cool as hell. There's a certain satisfaction that comes after writing a terse solution.

This is a collection of some of my recent favorites. They will all run in your dev console so pop it open and try them out. I hope you'll share some of your own favorites in the comments!


#### Calendar Hacking

Ali Spittel [tweeted](https://twitter.com/ASpittel/status/1110548407800815617) this out recently. It solves a problem I've faced multiple times. If you swap the minus for a plus, it gives you the next seven days.

```javascript
// Create an array of the past seven days, inclusive
[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));
```


#### Random ID generation

This is my go-to function for creating UUIDs when prototyping. I've even seen people using it in production in the past. It's not secure but ... there are worse random generation functions out there.

```javascript
// Generate a random alphanumerical string of length 11
Math.random().toString(36).substring(2);
```


#### Quines

A [quine](https://en.wikipedia.org/wiki/Quine_(computing)) is a program that outputs its own source code. Quines have always fascinated me. I've got pretty close to completing my own quines a couple of times in different languages but details are the name of the game.

I've picked some winners for you. Credit to [Mama Fun Roll](https://codegolf.stackexchange.com/a/60148/78322), [PleaseStand](https://codegolf.stackexchange.com/a/270/78322), and [Peter Olson](https://codegolf.stackexchange.com/a/3173/78322) respectively for these three.

```javascript
// $=_=>`$=${$};$()`;$()
$=_=>`$=${$};$()`;$()

// eval(I="'eval(I='+JSON.stringify(I)+')'")
eval(I="'eval(I='+JSON.stringify(I)+')'")

// For those who like their quines via alert
// (function a(){alert("("+a+")()")})()
(function a(){alert("("+a+")()")})()
```


#### Scrape query parameters

Talk about non-maintainable code. This converts the page's query parameters to an object in 78 bytes! Thanks to Alex Lohr for code golfing it.

`?foo=bar&baz=bing` becomes `{foo: bar, baz: bing}`

```javascript
// Set the current page's query parameters to `q`
q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;
```

I'd like to see a minifier work that hard. 


#### Working clock

With a sprinkle of HTML, you can create a working clock with source code you could read out in one breath. I wrote this after a challenge from a co-worker. It ticks every second, updating the page with the current time.

```html
<body onload="setInterval(()=>document.body.innerHTML=new Date().toGMTString().slice(17,25))"></body>
```


#### Shuffle an array

Until Pythonistas show up with their `import random`, `random.shuffle(array)` solution, we're going to enjoy what we have. This has the bonus of having an infinitesimal chance of being an infinite loop (implementation depending). [Don't use in production](https://www.robweir.com/blog/2010/02/microsoft-random-browser-ballot.html).

```javascript
// Return a shuffled copy of an Array-like
(arr) => arr.slice().sort(() => Math.random() - 0.5)
```


#### Generate random hex code

ES7's [padEnd](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd) is a blessing. Along with `padStart`, they've made number to string conversions that much easier. Writing hex values right into JavaScript code is always pretty neat too.

```javascript
// Generate a random hex code such as `#c618b2`
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');
```


#### Pass the interview in style

The [infamous](https://blog.codinghorror.com/why-cant-programmers-program/) interview question answer but codegolfed. I researched and I don't think it can get any shorter than this.

```javascript
for(i=0;++i<101;console.log(i%5?f||i:f+'Buzz'))f=i%3?'':'Fizz'
```


#### Remove duplicates

This only works with primitives but it's still nifty. [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) takes any iterable object, like an array `[1,2,3,3]`, and removes duplicates. The spread operator makes that set `[1,2,3]`.

```javascript
// Remove duplicates from the iterable `arr`
[...new Set(arr)]
```


#### A keyboard so real you can taste it

Okay, I don't really count this as a one-liner but it's too good not to include. A masterful codegolf solution by [edc65](https://codegolf.stackexchange.com/a/103226/78322). It's terse to a fault and codegolfed within an inch of its life but we should bask in its glory.

```javascript
// Return a ***3D*** ASCII keyboard as string
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()
```

It prints:
![Keyboard made out of ASCII text](ascii-keyboard.png)

Amazing.

Dust off your ternary expressions, we're going in.

Fun posts