@ Module listing for overall order.
>includes
>lib
>router
>main
>main.projects
>main.pages
>main.resume
>main.startup
>main.shutdown
>includes
@ We need a couple modules to get this server up and running
const http = require('node:http');
const fs = require('fs');
>main.startup
>main.startup.createserver
@ We need to instantiate the server
const server = http.createServer(route);
>main.startup.listen
@ Listen on a port
console.log('Starting on ' + (new Date()).toLocaleString());
server.listen({ port: 5000, });
>main.shutdown
@ And catch ^C to shutdown right. If we had a database we'd close it here.
process.on('SIGINT', () => {
console.log('Done at ' + (new Date()).toLocaleString());
server.close();
setTimeout(() => { process.exit(); }, 100);
});
>router
@ Our router needs to process URLS and variables between /.*/s, but nothing else right now.
const handlers = [];
function url(url, handler, permissive = false) {
handlers.push({ url: url.split('/'), handler, permissive, });
}
function getHandler(url) {
let s = url.split('/');
for (let h of handlers) {
let skip = false;
if (h.permissive || (s.length === h.url.length)) {
let params = {};
for (let i = 0; i < h.url.length; i++) {
if (h.url[i].charAt(0) === ':') { params[h.url[i].slice(1)] = s[i]; }
else if (h.url[i] !== s[i]) { skip = true; break; }
}
if (skip) { continue; }
if (h.permissive) {
params[h.url.slice(-1)[0].slice(1)] = s.slice(h.url.length - 1).join('/');
}
return { handle: h.handler, params, };
}
}
return { handle: () => '404 Not found.', params: {}, };
}
@ We didn't need to do it, but the following is an example of code reordering.
@ router.static is inserted below, before the route function is defined.
>reserve.router.static
async function route(req, res) {
let {handle, params} = getHandler(req.url);
console.log(new Date().toLocaleString(), req.connection.remoteAddress || 'unknown', req.method, req.url);
res.setHeader('Content-Type', 'text/html');
res.end(await handle(req, params, res));
}
>router.static
@ You'll need a space separated list of extensions and respective mime types to use this.
const mimes = fs.readFileSync('data/mimes', 'utf8').split('\n');
function mimetype(filename) {
try {
let ext = filename.substr(filename.lastIndexOf('.'));
for (let l of mimes) {
let [e, mime] = l.split(' ');
if (e === ext) { return mime; }
}
} catch (e) { return 'text/plain'; }
return 'text/plain';
}
@ Preload and cache every static file, and only serve those. No big files allowed on my blog!
const staticfiles = new Map();
for (let f of fs.readdirSync('static', { recursive: true, })) {
if (!fs.statSync(`static/${f}`).isDirectory()) {
staticfiles.set(f, { data: fs.readFileSync(`static/${f}`), mime: mimetype(f), });
}
}
url('/pub/:filename', (r, p, res) => {
let filename = decodeURIComponent(r.url.substr(5));
if (staticfiles.has(filename)) {
let { data, mime } = staticfiles.get(filename);
res.setHeader('Content-Type', mime);
return data;
} else {
res.statusCode = 404;
return '';
}
}, true);
>lib.html
@ Our HTML namespace, used with `with` to enable a simple M-Exp like DSL for HTML.
let html = { _: '', elts: {}, };
>lib.html.elements
@ Although we could metaprogram JS with an extension to literati.js, we won't.
@ In Lisp, Nim, or any language with macros, I'd try and optimize the HTML generation, instead we define normal functions here.
function defelt(n) {
html[n] = (as, ...b) => `<${n} ${as}>${b.join('')}</${n}>`;
}
function defeltchildless(n) {
html[n] = (as) => `<${n} ${as}/>`;
}
for (let e of ['canvas', 'form', 'input', 'iframe', 'pre', 'a', 'div', 'head', 'textarea', 'body', 'html', 'span', 'script', 'style', 'img', 'video', 'source']) { defelt(e); }
for (let e of ['link', 'meta']) { defeltchildless(e); }
>lib.html.definitions
@ Our first element definition, we need a navbar at the top of the screen.
function navbar() {
const { div, elts, _ } = html;
return div(`class="navbar row inverted"`,
elts.link(div(_, `i'm peter.`), '/'),
);
}
>lib.html.wrap
@ Our basic way of wrapping our UI around a page we serve.
function wrap(...b) {
const { link, externalscript, script, head, meta, style, div, elts, _, } = html;
let { options, body } = getoptions(b);
let content = !options.unpadded ? div(`style="padding: 1ch;"`, ...body) : div(``, ...body);
@ I'd like to be able to have content width limited to some value
if (options.pagesize) { content = div(`style="width: 100%; max-width: ${options.pagesize};"`, content); }
@ And have that content centered horizontally
if (options.centered) { content = elts.hcentered(content); }
return '<!doctype html>' + html.html(_,
head(_,
meta(`charset="utf8"`),
meta(`name="viewport" content="width=device-width"`),
link(`rel="stylesheet" href="/pub/style.css"`),
style(_, options.extrastyle || ''),
options.externalscript ? script(`src="${options.externalscript}"`) : '',
options.script ? script(_, options.script) : '',
!options.noannotato ? `<script type="text/javascript" src="https://annotato.org/lib.js/:NzUxNjMwODE5MzI3NDYyOTYxMTExNjM5ODg4MzAwOTQ3ODg4Nzg0NjgyODU1MTM3NjM5ODMwNDM3"></script>` : '',
),
html.body(options.unpadded ? `style="margin: 0;"` : ``,
div(`class="cnt bg"`,
!options.unpadded ? navbar() : '',
content,
),
),
);
}
>lib.html.definitions
@ We need to be able to pull an option object out of quite a few user-defined elements.
function getoptions(b) {
let options = {};
if (typeof(b[0]) === 'object') {
options = b[0]; b = b.slice(1);
}
return { options, body: b, };
}
>lib.html.definitions
@ We need to have a standard looking link.
html.elts.link = (label, to) => html.div(html._,
html.a(`href="${to}" class="link"`, label),
);
@ Links in text need to be inline
html.elts.ilink = (label, to) => html.a(`href="${to}" class="link"`, label);
@ And be able to format big blocks of text.
function formatText(...ls) {
return ls.map(l => html.div(html._, l)).join(' ');
}
>main.pages.homepage
url('/', () => {
const { div, _, elts, } = html;
const ideabox = (label, link) => div(`class="idea"`, elts.link(div(`style="padding: 5px;"`, label), link));
return wrap(div(_,
div(_, `Hey there, I'm Peter Herniman, and you've reached my personal site.`),
div(_, `It's running on the default Node.js http server, with a custom router I created.`),
div(_, `My software design philosophy is fluid, but this specific site is the synthesis of:`),
div(`class="bordered row" style="border-width: 50px; width: initial; flex-wrap: wrap; justify-content: space-evenly; margin: 1ch;"`,
...[['Lisp metaprogramming', 'https://gigamonkeys.com/book/macros-defining-your-own.html'],
['REPL driven development', 'https://duckduckgo.com/?t=ffab&q=repl+driven+development&ia=web'],
['Smaller Code, Better Code', 'https://www.sacrideo.us/smaller-code-better-code/'],
['Literate Programming', 'http://www.literateprogramming.com/'],
[`Peter Naur's ideas about programming as theory building.`, 'https://pages.cs.wisc.edu/~remzi/Naur.pdf'],
[`JOSS: One of the earliest real revolutions in programming.`, 'https://en.wikipedia.org/wiki/JOSS'],
[`Programming as language construction.`, 'https://racket-lang.org/'],
[`G. K. Chesterton's Fence`, `https://en.wikipedia.org/wiki/G._K._Chesterton#Chesterton's_fence`],
[`Smalltalk and Squeak`, 'https://squeak.org/'],
[`And more recently: Parts of the philosophy of Plain English`, `http://osmosian.com`],
].map(([label, link]) => ideabox(label, link)),
),
div(_, `You can see this whole server's source code at: ${elts.ilink(`<b>Show me the source, Peter!</b>`, '/viewsource')}`),
div(_, `You can read a little about me at: ${elts.ilink(`<b>About Peter</b>`, '/aboutme')}.`),
div(_, `My CV/Resume is here: ${elts.ilink(`<b>Resume</b>`, '/resume')}.`),
div(_, `I have a blog, but you won't find it here. This is mainly just a portfolio site.`),
div(_, `Here are a few of my favorite papers: ${elts.ilink(`<b>Papers I like</b>`, '/papers-i-like')}.`),
div(_, `These are a select few other things I've been working on over the past while.`),
div(`style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;"`,
...Array.from(projects.entries()).map(([k, p]) => project.locallink(p))
),
));
});
>lib.html.definitions
@ Now we need the ability to center things.
html.elts.centered = (...body) => html.div(
`style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;"`,
...body,
);
@ And horizontally
html.elts.hcentered = (...body) => html.div(
`style="width: 100%; display: flex; justify-content: center;"`,
...body,
);
@ And have nice images with alt tags.
html.elts.image = (s, a, { wide, extrastyle }) => (wide || false) ?
html.img(`src="${s}" alt="${a}" style="max-height: 100%; max-width: 100%; object-fit: fill; width: 100%; image-rendering: crisp-edges; image-rendering: pixelated;${extrastyle || ''}"`) :
html.img(`src="${s}" alt="${a}" style="max-height: 100%; max-width: 100%; object-fit: fill; height: 100%; image-rendering: crisp-edges; image-rendering: pixelated;${extrastyle || ''}"`);
>main.projects
const project = {
locallink(p) {
@ We can also use explicit tags from html instead of using the whole namespace.
const { div, elts, } = html;
return elts.link(
div(`class="picon bordered" style="position: relative;${p.extrastyle}" title="${p.sdesc}"`,
elts.centered(elts.image(p.image, p.alt, p.imagestyle)),
div(`style="position: absolute; bottom: 3px; left: 3px; font-weight: bold;"`, p.name),
), `/view/${p.name}`);
},
link(p) { return html.elts.link(p.name, p.link); },
};
const projects = new Map();
function addProject(name, image, alt, link, sdesc, ldesc, frame = false, extrastyle = '', imagestyle = {}) {
projects.set(name, { name, image, alt: alt, link, sdesc, ldesc, frame, extrastyle, imagestyle, });
}
url('/view/:project', (r, p) => {
with (html) {
let name = decodeURI(p.project);
let prj = projects.get(name);
return wrap(
projects.has(name) ?
div(_,
div(`class="picon bordered" style="height: 10vw; width: 10vw;${prj.extrastyle}"`,
elts.centered(elts.image(prj.image, prj.alt, prj.imagestyle)),
),
prj.frame ?
elts.hcentered(
iframe(`src="${prj.link}" width="100%" height="600" class="bordered"`, // style="border-image: url(/pub/border2.svg) 100 round; border-width: 30px;"`,
`Your adblocker probably doesn't like this iframe.`)
) : '',
prj.link ? div(`style="margin: 3px 0;"`,
elts.link(`View the project fullscreen: ${prj.link}`, prj.link),
) : '',
div(`style="margin: 3px 0;"`, prj.ldesc),
) : div(_, `That project doesn't exist.`)
);
}
});
@ This determines the order of the icons on the homepage
>reserve.main.projects.annotato
>reserve.main.projects.aquarium
>reserve.main.projects.superoxide
>reserve.main.projects.runeshell
>reserve.main.projects.trexpedition
>reserve.main.projects.brouhaha
>reserve.main.projects.music
>reserve.main.projects.hackathons
>reserve.main.projects.languages
>reserve.main.projects.presenter
>reserve.main.projects.games
>reserve.main.projects.literati
>reserve.main.projects.tools
@ Maybe we want to browse the source WEB style like knuth says, maybe JOSS the files and use em?
>main.pages.viewsource
url('/viewsource', () => {
const {div, elts, pre, _} = html;
let files =
elts.tabbed('files', 0, false,
...(Array.from(staticfiles.entries()).filter(([k, v]) => k.includes('source/')).map(([k, v]) => ({
title: k.substr('source/'.length),
body: pre(`style="margin: 1ch; overflow-x: scroll; width: 100%;"`,
formatSource(v.data))
}))
),
);
let source =
elts.tabbed('sourceviewer', 1, false,
{ title: 'by file', body: files.body, },
{ title: 'story',
body: pre(`style="margin: 1ch; overflow-x: scroll; width: 100%;"`,
formatSource(staticfiles.get('story.js').data)), },
{ title: 'bundled',
body: pre(`style="margin: 1ch; overflow-x: scroll; width: 100%;"`,
formatSource(staticfiles.get('bundle.js').data)), },
);
return wrap(div(_,
files.script,
source.script,
div(_,
`This is the entire bundled source of my server. The file that's serving this site itself, to you. That's not a quine, but it's something similar, just like us.`),
div(_, `The literate programming approach I took making this site is inspired by JOSS.`),
div(_,
elts.para(
`Essentially, the conversational approach to JOSS at Rand gave rise to an interesting way of segmenting programs.`,
`You'd separate code into numbered sections and lines within those sections, and in a given session, could rewrite code within those sections on the fly.`,
`A JOSS session existed as a conversation in real time, so you needed to be able to revise routines that might be broken, and rewrite them as you went on.`,
`What the essence of JOSS, and all the ideas mentioned elsewhere have become, in this experiment, is the exploration of what programming could be, if program development was approached as a medium of storytelling, where a program could be read in some form that would elicit an understanding of why and when features were developed, how they interconnect, and how errors begin to propagate through code.`,
`This is just an exploratory project for me, one person. I don't anticipate that it'll replace version control, or eradicate tech debt, but it has been a fun way to write a simple system.`,
),
),
elts.link('This project is licensed under the FIRE license, conveniently.', 'https://strict-evaluation.org/blog/:software-license'),
div(_, `Although, if you want to copy it, I'd recommend changing all the content and keeping the server.`),
elts.para(
`It should run fine with plain Node.js, as long as you have the right directories set up under the server.`,
`Currently, that looks like:`,
elts.list(
div(_, `one file, 'data/mimes', with a space seperated list of extensions (with the dot) and the mime type afterwards`),
div(_, `another directory, 'static/' with any files you want the server to serve from the '/pub/...' path.`),
),
),
source.body,
));
});
>lib.html.definitions
@ It'd be pretty cool to have a few different ways to view our source code, maybe a tabbed layout would be nice.
html.elts.tabbed = (id, current, inner, ...tabs) => {
const {script, div, elts, _} = html;
return {
body: div(`id="${id}"`,
div(`class="row" style="flex-wrap: wrap;"`,
...tabs.map((t, i) => div(`style="margin: 3px;"`, elts.button(t.title, `swap_${id}(${i});`, i === current))),
),
div(_, tabs[current].body),
),
script: inner ? '' : script(_,
`let tabs_${id} = JSON.parse(decodeURI("${encodeURI(JSON.stringify(tabs.map((t, i) => html.elts.tabbed(id, i, true, ...tabs).body)))}"));`,
`function swap_${id} (i) { document.getElementById('${id}').outerHTML = tabs_${id}[i]; }`,
),
};
};
@ We'll need buttons for our tabbed layout as well
html.elts.button = (label, onclick, disabled = false) => {
return html.input(`type="button" onclick="${onclick}" value="${label}" style="cursor: pointer;"${disabled ? ' disabled' : ''}`);
};
@ Nested tabs need to be escaped.
html.escape = (s) => {
return s.replace(/&/g, "&").replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''').replace(/"/g, '"');
};
@ It'd be nice if we had a little bit of source highlighting,
@ let's make comments bold, and sections underlined.
function formatSource(s) {
return html.escape(s.toString())
.replace(/(\n| |^)@([^\n]+)/g, '$1<b>@$2</b>')
.replace(/(\n| |^)>([^\n]+)/g, '$1<u>>$2</u>');
}
>lib.html.definitions
@ We should really have a way to separate paragraphs of text from one another.
html.elts.para = (...b) => (
html.div(`class="para"`, formatText(...b))
);
@ We also have a lot of lists in the about page, they need some delineation from normal text.
html.elts.list = (...b) => {
let { options, body } = getoptions(b);
let style = `style="` + (!options.nomargin ? `margin: 0.5ch 0 0.5ch 0;` : ``) +
(!options.noborder ? `border-left: 0.5ch solid rgba(0, 0, 0, 0.5);` : ``) +
`padding-left: 0.5ch;"`;
return html.div(style, ...body);
};
>main.pages.aboutme
url('/aboutme', () => {
const {div, elts, _} = html;
return wrap({ centered: true, pagesize: '12in', },
formatText(
`Hey again, I'm Peter Herniman, one of those unfortunate souls who came down with 'The Knack' at a young age.`,
`I've been programming, exploring, and tinkering since a little bit before my early teens, and I haven't managed to kick the habit yet.`,
`<br>`,
`I've played around with a good lot of programming languages, nowhere near all of them, but a good few, in roughly chronological order of fascination:`,
elts.list(
`C, C++, Scratch, Common Lisp, Racket, Python, Ruby, Lua, Erlang, Perl, Javascript, Processing, Bash, Forth, Ocaml, Haskell, Prolog, SQL, TCL, Awk, Factor, J, K, Apl, A whole bunch of Schemes, Smalltalk, Clojure, D, Hy, Rust, Elixir, Julia, Raku, COBOL, quite a few more little ones, esolangs, the few languages I've written.`,
),
`<br>`,
`Of those, the ones that really captured my fancy (not that I'd necessarily say that I'm productive in all of them) are, off the top of my head, and in no real order:`,
elts.list(
`COBOL, Lisp, Racket, Ruby, Lua, Erlang, Javascript, Perl, Bash, Forth, SQL, TCL, Hy, Julia, Python, Raku, Rebol, and of course, C.`,
),
`<br>`,
`I feel a strong aversion to using Java and Go. I could elaborate on the design decisions I don't like, but I'd rather do that in person.`,
`I'm not a fan of typing a lot, despite what impression this site might give you.`,
`I appreciate implementation simplicity, expressiveness, and something indescribable in the languages I like.`,
`I believe that an individual, given room to expand and be independent, will be more productive than one forced to be a fungible unit.`,
`<br>`,
`I've experimented quite a bit with writing Domain Specific Languages for various things.`,
`For Superoxide, I wrote a macro that converted a subset of Julia code into html or alternately html generating Javascript, kinda like a version of JSX, using M-expressions, so it didn't suck as much.`,
`For this site, I suppose my HTML generating functions are something similar, but their scope and novelty is very limited.`,
`For Annotato, my most scope restricted site, I wrote a Nim macro that does largely the same, but with no Javascript generation capabilities.`,
`Overall, I think it's best to write less code, and make the computer do the heavy lifting for you.`,
`Not to mention, and contrary to most opinions (outside of LispLand), I think a well placed macro makes code vastly more legible.`,
`<br>`,
`My sense of right and wrong isn't set in stone, but it's very developed.`,
`I'm very flexible, but I absolutely will not violate my moral principles.`,
`What those principles actually are, is something that wouldn't be difficult to put into words, but would be better done in person.`,
`Various essays exist espousing my opinions, by large, I value autonomy, productivity, intellectual curiosity, and purpose.`,
`I respect and strive to have a good memory, resilience, forward momentum, and the ability to forgive.`,
`I especially struggle with the latter.`,
`I agree strongly with Pavlov and Anokhin's ideas about the essential aspects of life, particularly that exploration, and the 'orienting reflex', are intrinsic in all but the smallest units of an organism.`,
`<br>`,
`I'm a bit of a Luddite. I don't use social media, I don't watch videos (other than old movies, frequently, and talks, occasionally), and I don't use my phone for anything other than writing code and texting.`,
`I enjoy lively conversation about almost anything, but I don't think best that way.`,
`I prefer to get my information by reading, with slow reflection afterwards.`,
`<br>`,
`I've been an avid mushroom hunter for the past 8 years or so. I developed the hobby when I lived in Santa Cruz, which has long rainy seasons, a fantastic variety of mushrooms, and an equally various set of mushroomers.`,
`Since moving to the desert, I have been surprised by the quantity and variety of mushrooms that I've found in the most unassuming places!`,
`Tangentially, I'm interested in mushroom cultivation, having grown oysters, and attempted blewits, chantrelles, and a few other varieties of edible mushrooms.`,
`I'm not as good a cultivator as I am a hunter, though.`,
`<br>`,
`I also enjoy woodworking and pit-fired pottery. Recently I have developed a peculiar fascination (I'm not remotely musical) with making bizarre instruments.`,
`<br>`,
`I have a minor obsession with physiology, medicine, nutrition, and drugs. I could happily talk for hours about the intricacies of aspirin, the histories of different vitamins, and other trivia.`,
`I'm very interested in the way that biological systems organize around producing robust / approximate function in the face of faults.`,
`With that in mind, one of my longest standing obsessions is with distributed systems / organization / delegation in general.`,
`If you haven't read ${elts.ilink('The Ironies of Automation, by Lisanne Bainbridge', 'https://ckrybus.com/static/papers/Bainbridge_1983_Automatica.pdf')}, you should.`,
`And if you're interested in reading a few papers I like, go to ${elts.ilink(`<b>Papers I like</b>`, '/papers-i-like')}.`,
`<br>`,
`If you still want to get in touch with me, message me at ${elts.ilink('peter@impeter.org', 'mailto:peter@impeter.org')}, and I'll reply as soon as I see your message.`,
),
);
});
>main.projects.aquarium
url('/aquarium', (r, p) => {
let { canvas, script, div, _, } = html;
return wrap({ noannotato: true, unpadded: true, },
div(_,
script(_,
`
>reserve.main.projects.aquarium.script
`
),
div(`style=""`, // border: 1px solid black; margin: 5px; padding: 2px;"`,
canvas(`id="screen" style="width: 100%; height: 100%;"`),
),
),
);
});
>main.projects.aquarium.script
const dims = (e) => e.getBoundingClientRect();
const lib = {
rotate3d(r1, r2, x, y, z) {
const sr1 = Math.sin(r1), cr1 = Math.cos(r1),
sr2 = Math.sin(r2), cr2 = Math.cos(r2),
rx = (x * cr1 - z * sr1), b = (x * sr1 + z * cr1),
rz = (b * cr2 - y * sr2), ry = (b * sr2 + y * cr2);
return [rx, ry, rz];
},
rotate(p, r1, r2) {
let [x, y, z] = this.rotate3d(r1, r2, p.x, p.y, p.z);
return { x, y, z, };
},
offset(divisions, i) {
return { x: Math.cos(2 * Math.PI * i / divisions), y: Math.sin(2 * Math.PI * i / divisions), };
},
angles(divisions, f) {
let o = [];
for (let i = 0; i <= divisions; i++) {
o.push(f(this.offset(divisions, i), i));
}
return o;
},
};
const rnd = {
unit() { return (Math.random() * 2) - 1; },
int(max) { return Math.floor(Math.random() * max); },
num(max) { return Math.random() * max; },
angle() { return (Math.random() * 6.28); },
};
const vect = {
zeros(n) {
let o = []; for (let i = 0; i < n; i++) { o.push(0); } return o;
},
dist(a, b) {
let o = 0; for (let i = 0; i < a.length; i++) { o += (b[i] - a[i]) ** 2; }
return Math.sqrt(o);
},
mag(a) {
let o = 0; for (let i = 0; i < a.length; i++) { o += a[i] ** 2; }
return Math.sqrt(o);
},
sub(a, b) {
const o = new Array(a.length);
for (let i = 0; i < a.length; i++) { o[i] = (a[i] - b[i]); }
return o;
},
add(a, b) {
const o = new Array(a.length);
for (let i = 0; i < a.length; i++) { o[i] = (a[i] + b[i]); }
return o;
},
mult(a, s) {
const o = new Array(a.length);
for (let i = 0; i < a.length; i++) { o[i] = a[i] * s; }
return o;
},
multadd(a, b, s) {
const o = new Array(a.length);
for (let i = 0; i < a.length; i++) { o[i] = (a[i] + (b[i] * s)); }
return o;
},
dot(a, b) {
let o = 0;
for (let i = 0; i < a.length; i++) { o += a[i] * b[i]; }
return o;
},
norm(v) {
let m = vmag(v);
return vsmult(v, 1/m);
},
};
class Point {
constructor(x, y, z) {
this.y = y; this.x = x; this.z = z;
}
get l() { return [this.x, this.y, this.z]; }
set l(v) { this.move(...v); }
move(x, y, z) { this.x = x; this.y = y; this.z = z; }
pan(x, y, z) { this.x += x; this.y += y; this.z += z; }
}
class Pointer extends Point {
r1 = 0;
r2 = 0;
rotateTo(r1, r2) { this.r1 = r1 % (2 * Math.PI); this.r2 = r2 % (2 * Math.PI); }
rotate(r1, r2) { this.rotateTo(this.r1 + r1, this.r2 + r2); }
angleto(x, y, z) {
return [Math.atan2(x - this.x, z - this.z),
-Math.atan2(y - this.y, Math.sqrt(((x - this.l[0]) ** 2) + ((z - this.l[2]) ** 2)))];
}
lookat(x, y, z) {
this.rotateTo(Math.atan2(x - this.x, z - this.z),
-Math.atan2(y - this.y, Math.sqrt(((x - this.l[0]) ** 2) + ((z - this.l[2]) ** 2))));
}
}
class Camera extends Pointer {
constructor({ canvas, }) {
super(0, 0, 0);
this.canvas = canvas;
this.r1 = 0; this.r2 = 0;
let d = dims(this.canvas);
this.canvas.width = Math.floor(d.width);
this.canvas.height = Math.floor(d.height);
this.c = this.ctx;
}
get ctx() { return this.canvas.getContext('2d'); }
get w() { return this.canvas.width; }
get h() { return this.canvas.height; }
atc(x, y, z) {
const [x1, y1, z1] = lib.rotate3d(this.r1, this.r2, x - this.x, y - this.y, z - this.z);
return [x1 + this.x, y1 + this.y, z1 + this.z];
}
los(x, y, z) {
const [px, py, pz] = this.atc(x, y, z), dz = pz - this.z;
if (dz > 0) {
return { x: Math.round(((px - this.x) / (dz / this.w)) + (this.w / 2)),
y: Math.round(((this.y - py) / (dz / this.w)) + (this.h / 2)), };
} else { return null; }
}
clear() {
this.ctx.clearRect(0, 0, this.w, this.h);
this.ctx.fillStyle = 'black';
this.ctx.fillRect(0, 0, this.w, this.h);
}
render() {
}
coordinate(x, y, z) {
return this.los(x, y, z);
}
line(x, y, z, i, j, k) {
this.moveTo(x, y, z);
let c = this.coordinate(i, j, k);
if (!c) { return; }
this.c.lineTo(c.x, c.y);
}
moveTo(x, y, z) {
let c = this.coordinate(x, y, z);
if (!c) { return; }
this.c.moveTo(c.x, c.y);
}
lineTo(x, y, z) {
let c = this.coordinate(x, y, z);
if (!c) { return; }
this.c.lineTo(c.x, c.y);
this.c.moveTo(c.x, c.y);
}
poly(o, p) {
if (p.length === 0) { return; }
this.c.beginPath();
this.c.strokeStyle = 'white';
this.c.lineWidth = 1;
let f = o.point(0);
this.moveTo(f.x, f.y, f.z);
for (let i = 1; i < p.length; i++) {
let c = o.point(i);
if (c.jmp) { this.moveTo(c.x, c.y, c.z); }
else { this.lineTo(c.x, c.y, c.z); }
}
this.lineTo(f.x, f.y, f.z);
this.ctx.stroke();
}
circleAround(x, y, z, rad, r1, r2) {
let cdx = r1 % 6.28,
cdy = (r2 - 3.14) % 6.28;
this.x = x + (Math.cos(cdx) * rad); // + (Math.cos(cdy) * rad);
this.z = z + (Math.sin(cdx) * rad); // + (Math.cos(cdy) * rad);
this.y = y + (Math.tanh(cdy) * rad); // (Math.sin(cdy) * rad);
// let [xp, yp, zp] = lib.rotate3d(r1, r2, rad, rad, rad);
// this.x = x + xp;
// this.y = y + yp;
// this.z = z + zp;
this.lookat(x, y, z);
}
}
class Entity extends Pointer {
constructor({ w, x, y, z, r1, r2, pts, }) {
super(x, y, z);
this.w = w;
this.pts = pts || [];
this.r1 = r1 || 0;
this.r2 = r2 || 0;
}
render({ t, dt, }) {
this.w.camera.poly(this, this.pts);
}
point(i) {
let rt = lib.rotate3d(this.r1, this.r2, this.pts[i].x, this.pts[i].y, this.pts[i].z);
return {
x: this.x + rt[0],
y: this.y + rt[1],
z: this.z + rt[2],
jmp: this.pts[i].jmp,
};
}
tick({ t, dt, }) { return true; }
}
class World {
constructor({ canvas, }) {
this.camera = new Camera({ canvas, });
this.dt = 0;
this.entities = [];
}
render({ t, dt, }) {
this.camera.clear();
for (const e of this.entities) {
e.render({ t, dt, });
}
this.camera.render();
}
tick(t = Date.now()) {
let toremove = new Set();
let dt = ((t - this.lt) || 0) / 1000;
this.lt = t;
this.dt = dt;
for (const e of this.entities) {
if (!e.tick({ t, dt, })) {
toremove.add(e);
}
}
this.render({ t, dt, });
if (toremove.size > 0) {
this.entities = this.entities.filter(e => !toremove.has(e));
}
}
add(e) {
this.entities.push(e);
}
}
class Fish extends Entity {
mutationRate = 0.1;
constructor(o, ...as) {
super(...as);
this.body = o.body || Fish.random(15, 'body');
this.mind = o.mind || Fish.random(30, 'mind');
this.memory = o.memory || [];
this.energy = 0;
this.life = 10;
this.pts = Fish.createBody(this.body);
}
closest() {
let o = null;
for (let e of this.w.entities) {
if (e !== this) {
if (!o || vect.dist(e.l, this.l) < vect.dist(o.l, this.l)) {
o = e;
}
}
}
return o;
}
tick({ t, dt, }) {
this.life -= dt;
this.energy += dt;
let c = this.closest();
this.think(dt, c);
if (c && (vect.dist(this.l, c.l) < 10) && this.energy > 3) {
this.energy = 0;
this.w.add(Fish.merge(this, c));
}
return (this.pts.length > 0) && (this.life > 0);
}
maxthought = 5;
initialthought = 0;
static randomThought() { return rnd.int(15); }
think(dt, closest = null) {
for (let i = 0; i < this.maxthought; i++) {
let cur = (i + this.initialthought) % this.mind.length;
switch (this.mind[cur]) {
case 0: this.initialthought = cur + 1; return; break; // halt thought
case 1: if (closest) {
this.memory.push(...this.angleto(closest.x, closest.y, closest.z));
}
break; // get the heading of the closest fish
case 2: this.rotateTo(this.memory.pop() || 0, this.memory.pop() || 0); break; // look at the heading on the stack
// case 3: this.pan(this.r1, this.r2, 0, 0, dt); break; // move forward
case 3: this.pan(...lib.rotate3d(this.r1, this.r2, 10 * dt, 0, 0)); break; // move forward
case 4: this.rotate((this.memory.pop() || 0) * dt, (this.memory.pop() || 0) * dt); break; // rotate by the top of stack
case 5: if (closest && (this.energy > 3) && vect.dist(this.l, closest.l) < 5) {
closest.life -= 3; this.life += 2;
} break; // bite
case 6: this.memory.push(0); break // push 0
case 7: this.memory.push(rnd.unit()); break // push rand
case 8: this.memory.push(rnd.unit() * (10 ** (this.memory.pop() || 1))); break // push rand big
case 9: this.memory.push(this.memory.at(-1) || 0); break // dup || 0
case 10: this.memory.push((this.memory.pop() || 0) + (this.memory.pop() || 0)); break; // add
case 11: this.memory.push((this.memory.pop() || 0) - (this.memory.pop() || 0)); break; // add
case 12: this.memory.push((this.memory.pop() || 0) * (this.memory.pop() || 0)); break; // add
case 13: this.memory.push((this.memory.pop() || 0) / (this.memory.pop() || 1)); break; // add
}
}
this.initialthought = (this.initialthought + this.maxthought + 1) % this.mind.length;
}
static merge(a, b) {
return new Fish({
body: Fish.mergePrograms(a, b, 'body'),
mind: Fish.mergePrograms(a, b, 'mind'),
}, {
w: a.w,
x: a.x + (rnd.unit() * 10),
y: a.y + (rnd.unit() * 10),
z: a.z + (rnd.unit() * 10),
});
}
static mergePrograms(a, b, key) {
let o = [];
for (let i = 0; i < a[key].length && i < b[key].length; i++) {
o.push(Math.random() < 0.5 ? a[key][i] : b[key][i]);
}
for (let i = 0; i < Math.max(a[key].length * a.mutationRate, b[key].length * b.mutationRate); i++) {
o.splice(rnd.int(o.length + 1), 0, key == 'body' ? Fish.randomInstruction() : Fish.randomThought());
}
return o;
}
static randomInstruction() { return rnd.int(5); }
static createBody(p, o = 0) {
let pts = [];
let here = { x: 0, y: 0, z: 0, };
for (let i = o; i < p.length; i++) {
let e = p[i];
switch (e) {
case 0: pts.push({ ...here, }); break; // add cursor
case 1: if (pts.length > 0) { pts.push({ ...pts.at(-1), }); } break; // dup
case 2: if (pts.length > 0) {
pts.at(-1).x += rnd.unit(); pts.at(-1).y += rnd.unit(); pts.at(-1).z += rnd.unit();
} break; // veer
case 3: if (pts.length > 0) {
pts = [...pts, ...Fish.createBody(p, i+1).map(p => lib.rotate(p, rnd.angle(), rnd.angle())), pts.at(-1)];
} break; // split
case 4: if (pts.length > 0) {
here = { ...pts.pop(), };
} break;
}
}
return pts;
}
static random(n, key) {
let a = new Array(n);
for (let i = 0; i < a.length; i++) {
a[i] = key == 'body' ? Fish.randomInstruction() : Fish.randomThought();
}
return a;
}
}
window.addEventListener('load', () => {
setTimeout(() => {
let w = new World({
canvas: document.getElementById('screen'),
});
w.add(new Fish({
// body: [0, 1, 0, 1, 0, 3, 3, 3, 3],
}, {
w, x: 0, y: 0, z: 9,
}));
w.add(new Fish({}, { w, x: rnd.int(20) - 10, y: rnd.int(20) - 10, z: rnd.int(20) - 10, }));
w.add(new Fish({}, { w, x: rnd.int(20) - 10, y: rnd.int(20) - 10, z: rnd.int(20) - 10, }));
w.add(new Fish({
body: [0, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2], // [0, 1, 2, 1, 2, 3, 2, 0, 2, 3],
mind: [1, 2, 3, 0],
}, {
w, x: 0.5, y: 0, z: 9,
}));
const cr = 18;
w.add(new Entity({
w, x: 0, y: 0, z: 0,
pts: [
{ x: lib.offset(cr, 0).x * 50, z: lib.offset(cr, 0).y * 50, y: 0, },
...lib.angles(cr, (c, i) => ({ x: c.x * 50, y: c.y * 50, z: 0, })),
{ x: lib.offset(cr, 0).x * 50, z: lib.offset(cr, 0).y * 50, y: 0, },
...lib.angles(cr, (c, i) => ({ x: c.x * 50, z: c.y * 50, y: 0, })),
{ y: lib.offset(cr, 0).x * 50, z: lib.offset(cr, 0).y * 50, x: 0, jmp: true, },
...lib.angles(cr, (c, i) => ({ y: c.x * 50, z: c.y * 50, x: 0, })),
{ x: lib.offset(cr, 0).x * 50, z: lib.offset(cr, 0).y * 50, y: 0, jmp: true, },
],
}));
let ticker;
let r1 = 0.0, r2 = 3.24;
ticker = setInterval(() => {
r1 += 0.09;
// r2 += 0.09;
w.camera.circleAround(0, 0, 0, 300, r1, r2);
w.tick();
if (w.entities.length === 0) {
clearInterval(ticker);
}
}, 75);
}, 20);
});
>main.projects.aquarium
// addProject('Aquarium', '/pub/aquarium.svg', 'A picture of a fish.', '/aquarium',
// 'A design feedback (and error reporting) service using user annotations.',
// formatText(
// html.elts.para(
// `An evolving aquarium, watch plants and fish grow, evolve, and eat each other.`,
// ),
// ),
// true,
// // ' --fg: white; --bg: rgb(93, 152, 93);'
// );
>main.projects.annotato
addProject('Annotato', '/pub/annotato.png', 'A picture of a stupid looking potato.', 'https://annotato.org',
'A design feedback (and error reporting) service using user annotations.',
formatText(
html.elts.para(
`Probably the most useful thing I've made so far, at least for other people.`,
`If you look in the bottom right hand corner of this very site (impeter.org), you'll see a little potato.`,
`If you click that potato, you'll be able to draw on any page of this site you desire, and send me a picture of the page you drew on.`,
`I won't care about your design feedback, but I'll enjoy looking at your pictures.`,
),
html.elts.para(
`I wrote this in Nim, using a version of their default http server that I fixed (it had issues catching timeout exceptions).`,
`Other than persistently crashing from connection timeouts, the Nim http server is reasonably well written, and concise.`,
),
html.elts.para(
`With a little more polishing and testing, Annotato would be a very viable product.`,
`As it is, it works well, but definitely has a couple style edge cases that need fixing, as well as probably having a couple bugs in its functionality.`,
`If you're seeing this, shoot me a message (using the Annotato popup in the bottom right), if you want a free trial.`,
),
),
false,
' --fg: white; --bg: rgb(93, 152, 93);'
);
>main.projects.brouhaha
@ HN reader
addProject('Brouhaha', '/pub/brouhaha.svg', `A picture of the word 'Brouhaha' on a Hackernews style background.`,
'https://github.com/Strict-Evaluation/Brouhaha', 'A Hacker News reader, that reads to you.', formatText(
html.elts.list(`Brouhaha (noun): Une tempête d'exclamations. | A storm of words, usually unwanted.`),
`An audible HN reader that should provide some entertainment.`,
`Written in a day, purely for the enjoyment of using awk and bash.`,
`It'll pull a comment thread off HN for you, and read each user's comment in a different 'Apple say' voice.`,
`It's quite funny, and perhaps useful on a long drive, with nothing else to do.`,
),
false,
`--fg: white;`,
);
>main.projects.games
@ Cellular automata strategy
addProject('Game of lives', '/pub/cell-game.svg', `A screenshot of some Conway's Game of Life style cells.`, '/pub/cellular-game.html',
`A strategy game based on modifying rules for cellular automata`, formatText(
`A strategy game based on modifying rules that cells in a 2d matrix develop by.`,
`Differs from Conway's game in that there are separate life/movement rules, and rules can examine a cell's age.`,
`Additionally, a few different types of cell exist, obstacles, turbos (which allow you to make an extra move in "slow mode"), and rule change squares.`,
`Careful selection of rules, and in slow mode, decisions about where to expand, and when to use turbos, is necessary to win.`,
`This was made in a day as a demo for the ` + html.elts.ilink('LODP', 'https://lodp.club') + `, my local programming society.`,
),
true,
`--fg: transparent;`,
{ wide: true, },
);
@ Jousteroids
addProject('Jousteroids', '/pub/jousteroids/asteroid.png', `A picture of an asteroid.`, '/pub/jousteroids/joust.html',
'A knight themed version of asteroids.',
formatText(
`Really just a foolish spinoff of ${html.elts.ilink('Joust', '/view/Joust')}, it's a fun game to play for a few minutes before you nail the strategy.`,
`It can be very hard for a little bit.`,
`There was (clearly) 0 work done on the UI.`,
html.elts.list(`a=rotate counterclockwise, d=rotate clockwise, s=reverse, w=move forward, h=shoot`),
),
false,
`--bg: black; --fg: white;`,
{ extrastyle: ' height: 50%;' },
);
@ Joust
addProject('Joust', '/pub/joust/knight.png', `A picture of two knights at the tilt.`, '/pub/joust/joust.html',
`A little jousting simulator, the game that spawned the legendary Jousteroids.`,
formatText(
`I made this a few years back, but it's fun enough to play for a little while.`,
`The left knight is controlled as so:`,
html.elts.list(`a=block, s=jump, d=thrust, q=shoot`),
`The right knight is controlled as so:`,
html.elts.list(`l=block, k=jump, j=thrust, o=shoot`),
`I made it before most of those modern JS features rolled out, so it's a funny little game.`,
`One day, it'd probably be fun to make PVP over WebRTC, but the latency would probably be a big issue.`,
),
true,
`--fg: black;`,
{ wide: true, },
);
>main.projects.gopher
@ Gopher proxy, Server, and client.
addProject('Tooth Less One', '/pub/gopher.svg', `A picture of a deformed gopher.`,
'/gpinterface', 'A gopher proxy, server, and client.', formatText(
`A simple user interface and proxy to the gopher network.`,
`Source can be found at ${html.elts.ilink('gopher.js', '/pub/gopher.js')}.`,
`A gopher server will soon be operating at this domain, and it'll serve its own source.`,
`This was made for personal use, as an experiment in making a slightly nicer user interface than my command-line gopher client's.`,
),
true,
`--fg: white;`,
);
url('/gpinterface', (r, p, res) => {
const { div, input, script, elts, textarea, pre, style, _, } = html;
return wrap({ unpadded: true, noannotato: true, script: `
>reserve.main.projects.gopher.script
`},
div(_,
style(_, `pre { margin: 0; }`),
div(`style="box-sizing: border-box; padding: 5px;"`,
div(`style="position: sticky; top: 5px; padding: 5px; border-radius: 5px; background-color: black; color: white; ` +
`display: flex; justify-content: space-between;"`,
input(`style="width: 100%;" type="text" id="url" placeholder="gopher://sdf.org:70/" value="gopher://sdf.org:70/"`),
elts.button('Back', 'goback();'),
elts.button('Gopher it!', 'gopherit();'),
),
div(`id="content"`),
),
),
);
});
let { Gopher, } = require('./static/gopher.js');
url('/gproxy/:type/:host/:port/:req', async (r, {type, host, port, req}, res) => {
try {
if (port !== '70') {
// For now, let's just block anything that doesn't go to a gopher instance.
return `[{ "type": "error", "text": "Non-Gopher connections aren't allowed." }]`;
}
if (!/localhost|127\.0\.0\.01/.test(host)) {
let res = await Gopher.grab(host, req, Number(port));
if (type === 'gopher') {
return JSON.stringify(Gopher.parse(res));
} else {
return res;
}
} else {
return `[{ "type": "error", "text": "Localhost connections aren't allowed." }]`;
}
} catch (e) {
console.error(`Proxy Error: ${e.message}.`);
return JSON.stringify([
{ type: "error", text: "Some network error occurred." },
{ type: "gopher", text: "Reload", host: host, port: port, resource: req, },
]);
}
}, true);
>main.projects.gopher.script
let gohistory = [];
function render(page) {
let o = [];
for (let l of page) {
switch (l.type) {
case 'info':
o.push('<pre>' + l.text + '</pre>'); break;
case 'html':
o.push('<a href="' + l.resource.replace(/URL:/, '') + '>'); break;
case 'gopher': case 'text':
o.push(\`<div title="\${l.host}:\${l.port} \${l.resource}" style="cursor: pointer; text-decoration: underline;">
<a onclick="navigopher('\${l.type}://\${l.host}:\${l.port}/\${l.resource}');">\${l.text}</a>
</div>\`);
break;
case 'gopher-search':
o.push(\`<div>\${l.text}: <input type="text"/><input type="button" value="GO!" onclick="navigopher('gopher://\${l.host}:\${l.port}/\${l.resource}\\t' + event.target.parentNode.children[0].value);"/></div>\`);
break;
case 'error':
o.push(\`<div style="color: white; background-color: crimson; margin: 2ch; padding: 4ch; border-radius: 10px;">\${l.text}</div>\`);
break;
default: console.log('skipped', l); break;
}
}
return o.join('\\n');
}
function parseURL(url) {
let m = url.match(/(?<protocol>[^:]+):\\/\\/(?<host>[^\\/:]+)(?<port>(:[^\\/]+)|)\\/(?<resource>.*)$/);
if (!m) { throw new Error(\`Couldn't parse \${url}.\`); }
return { ...m.groups, };
}
let currentPage = {};
function show(type, content) {
if (type === 'gopher') {
document.getElementById('content').innerHTML = content;
} else {
document.getElementById('content').innerText = content;
}
}
async function navigopher(url, history = false) {
console.log('navigating to', url);
if (!history) {
gohistory.push({ ...currentPage, });
}
document.getElementById('url').value = url;
let { protocol, host, port, resource, } = parseURL(url);
let res = await (await window.fetch(\`/gproxy/\${protocol}/\${host}/\${port.slice(1)}/\${resource}\`)).text();
let content = (
protocol === 'gopher' ?
render(JSON.parse(res)) :
res
);
show(protocol, content);
currentPage = { url, content, };
location.href = location.href.split('#')[0] + '#' + url;
}
function gopherit() {
navigopher(
document.getElementById('url').value,
);
}
function goback() {
if (gohistory.length < 1) { return; }
let { url, content, } = gohistory.pop();
navigopher(url, true);
}
window.onload = () => {
if (location.href.includes('#')) {
navigopher(location.href.split('#').slice(1).join('#'));
}
};
>main.projects.hackathons
@ Sarcasm detector
addProject('Sassmaster 2018', '/pub/sassmaster.svg', ``, 'https://github.com/Strict-Evaluation/sassmaster2018',
`A sarcasm detector for anything you'd like, made before they were cool.`,
html.elts.para(
`A sarcasm detector a couple of my buddies and I made for a hackathon in 2018, taking 3rd out of 60 teams.`,
`We used a combination approach, a character RNN + a naive bayesian classifier to determine if a sentence was sarcastic or not.`,
`Honestly, it worked surprisingly well.`,
html.elts.para(
`We tried it first with just the RNN, and while it worked reasonably well, it had some odd edge cases.`,
`We didn't have enough time to train it again, or generate a better dataset, so I cooked up a simple naive bayesian classifier in Lua, saw that it had comparable success, and averaged the results.`,
`That approach worked excellently.`,
),
),
false,
`--fg: transparent;`,
);
@ FBSecure
addProject('FBSecure', '/pub/fbsecure.svg', `A lock with the words 'FB Secure' inside it.`, 'https://github.com/Hack-UCSC-2016/FBSecure',
`A browser extension that passively encrypts facebook messages to your friends.`,
html.elts.para(
`I made this project for a hackathon with two of my buddies in 2016, taking 2nd out of 98 teams.`,
`Back when I begrudgingly used facebook to chat to some friends, I came up with the idea of end to end encrypting facebook messages to those friends.`,
`We wrote a basically transparent browser extension that let you encrypt facebook messages with RSA.`,
`Facebook made it clear they didn't like what we were doing, and in the week after we won (and got a little news attention), started changing their html to make our kind of extension a lot harder.`,
`Our extension worked great, but none of us used facebook enough to make it worth maintaining, and now you allegedly have facebook chats "end to end" encrypted by facebook itself.`,
`There's surely no way that facebook could circumvent their own safeguards, right?`,
),
false,
`--fg: transparent;`,
);
>main.projects.languages
@ newJOSS
let josslib = (() => {
let jl = staticfiles.get('JOSS.js').data.toString(),
start = jl.indexOf('stdlib = `');
return jl.substring(start + 'stdlib = `'.length,
jl.indexOf('`.trim();', start)).trim();
})();
addProject('newJOSS', '/pub/newjoss.svg', `A picture representing the _New_Wave_ of programming.`, '/newjossexample',
`An unusable programming language that's fun to write.`, html.elts.para(
`newJOSS is a programming language roughly inspired by ${html.elts.ilink('JOSS', 'https://en.wikipedia.org/wiki/JOSS')}.`,
`I don't think the name is going to stick around forever, but until it's semi-usable, it'll stay.`,
`<br>`,
`JOSS itself has three main features that I think are impressive.`,
html.elts.list(
html.div(html._, `0. A section/line numbering system that allows writing code out of order, and is easy to implement.`),
html.div(html._, `1. A syntax resembling English, that doesn't allow deeply nested expressions.`),
html.div(html._, `2. An entirely REPL driven interactive experience.`),
),
`<br>`,
`Literati, the literate programming framework, fulfills the first point.`,
`This language represents the second point, but will eventually encompass them all.`,
`More work needs to be done, expanding this interpreter to have more sensible scoping, nicer syntax, and a bytecode target.`,
`As it stands, newJOSS took a day to write, and is thoroughly inadequate for use.`,
`Its main design consideration was the ease with which you can write an interpreter for it, which it definitely satisfied.`,
`<br>`,
`A copy of the source (in Javascript) can be found at ${html.elts.ilink('/pub/JOSS.js', '/pub/JOSS.js')}.`,
`<br>`,
`Below is an example standard library, providing easy looping and if statements.`,
html.pre(`class="bordered" style="padding: 3px; overflow: scroll; box-sizing: border-box;"`, josslib),
),
true, `--fg: transparent;`,
);
@ Just a simple editor / evaluation environment to see what newJOSS looks like.
url('/newjossexample', (r, p, res) => {
const { div, script, elts, textarea, pre, _, } = html;
return wrap({ unpadded: true, noannotato: true, },
script(_, staticfiles.get('JOSS.js').data),
script(_, `
window.onload = () => {
p.logger = (s) => {
document.getElementById('program-output').innerText += s + '\\n';
document.getElementById('program-output').scrollBy(0, 10000);
};
document.getElementById('program-content').value = exampleProgram;
};
`),
div(_,
div(`style="margin: 1ch;"`, elts.button('Run', `p.load(document.getElementById('program-content').value); p.run();`)),
textarea(`id="program-content" style="box-sizing: border-box; width: 100%; width: -moz-available; width: -webkit-fill-available; width: stretch; height: 60vh; margin: 1ch; overflow: scroll;"`),
pre(`id="program-output" style="box-sizing: border-box; padding: 1ch; max-height: 20vh; overflow: scroll;"`),
),
);
});
>main.projects.literati
addProject('Literati', '/pub/literati.svg', `A picture of some JOSS looking code.`,
'/pub/literati.js', 'A minimalist literate programming compiler.', formatText(
`An exploration of ${html.elts.ilink(`JOSS`, 'https://en.wikipedia.org/wiki/JOSS')} style recursive section numbering for the modern world.`,
html.pre(`style="overflow-wrap: anywhere; white-space: pre-wrap; margin: 1ch; --bg: rgba(1,1,1,0.1);"`, [
`@ Programs are written in sections, where relevant edits to various pieces of code are kept close.`,
`@ Imagine we need to add a search bar to some UI`,
`>library.uielements.searchbar`,
`function searchbar() { /* create the searchbar here */ }`,
``,
`@ In this section we might add the searchbar to the page.`,
`>interface.user.somepage.render`,
`page.topbar.addElement(searchbar());`,
``,
`@ Depending on how our code functions, it might involve completely rewriting the rendering function, or sticking a new code insertion point into a bit of it we want to be variable.`,
`@ Either way is possible with Literati, perhaps 'Illiterati' to its detractors.`,
`@ When code is incrementally refined, it makes more sense to associate development temporally, or by feature, than it does to associate it with the gestalt.`,
].join('\n')),
`And perhaps, ${html.elts.ilink('Literate Programming', 'http://www.literateprogramming.com/')} for a long-gone world where minimizing implementation difficulty means more than making a fine product.`,
`Essentially, this whole site is written using ${html.elts.ilink('Literati.js', '/pub/literati.js')} to compile many out of order sections, approximating a story about why I did what I did, making this website one executable file that's easy to deploy.`,
`As a personal aesthetic decision, I wrote Literati.js reasonably concisely, as I prefer to read short code.`,
`One day, perhaps, I'll write a version of Literati.js in its own literate style.`,
),
true,
`--fg: white;`,
);
>main.projects.lodp
addProject('LODP', '/pub/lodp.png', 'The letters LODP arranged in a 2x2 block.', 'https://lodp.club/',
`A programming club.`,
formatText(
`While I didn't make its website (that was ${html.elts.ilink('Karen', 'https://imthekaren.com')}), the LODP has been a successful programming social club in Colorado's Grand Valley for more than a year now.`,
`Highly nontraditional, there has been no attempt to grow it (as of yet, other than hackathons, talks, and educational outreach), and as such, it has grown into a very tight knit group of hackers, professors, suits working for the man, and down-and-out desert hillbillies, all at the forefront of tech development.`,
`As a result of the club:`,
`I've been kicked by a donkey.`,
`I've learned quite a lot about ${html.elts.ilink('Grace Hopper', 'https://en.wikipedia.org/wiki/Grace_hopper')}, from someone very close to her.`,
`I've given a few presentations, and attended quite a few more.`,
`And have learned more about a thousand little subjects than I'd have dared on my own.`,
`Suffice it to say, it has been a very good experience!`,
),
true,
`--fg: transparent;`,
);
>main.projects.music
addProject('music', '/pub/musicalexample.svg', `A square wave under the words: It's music.`, '/musical-example',
`An unusable music programming language that's fun to write.`, html.elts.para(
`Just follow the link and try it out!`,
`A copy of the source (in Javascript) can be found at ${html.elts.ilink('/pub/singer.js', '/pub/singer.js')}.`,
),
true, `--fg: transparent;`,
);
url('/musical-example', (r, p, res) => {
const { div, script, elts, textarea, pre, _, } = html;
return wrap({ unpadded: true, noannotato: true, },
script(`src="/pub/singer.js"`),
script(_, `
function runthemusic() {
try {
let ctx = new (window.AudioContext || window.webkitAudioContext)();
let s = new Singer(document.getElementById('program-content').value);
s.playSong(ctx);
} catch (e) {
alert(e.message);
alert(e.stack);
}
}
`),
div(`style="height: 100%;"`,
div(`style="margin: 1ch;"`, elts.button('Run', `runthemusic();`)),
textarea(`id="program-content" style="box-sizing: border-box; width: 100%; width: -moz-available; width: -webkit-fill-available; width: stretch; height: 90vh; margin: 1ch; overflow: scroll;"`, `
>reserve.main.projects.music.tutorial
`
),
pre(`id="program-output" style="max-height: 7em; overflow: scroll;"`),
),
);
});
>main.projects.music.tutorial
# A # sign followed by a space, is a comment.
# Unindented words are section names
defs
# Indented text belongs to its containing section
# Assignment is global with '=' and local with ':='
# Arithmetic available in assignment and function definitions is
# + - / * and ** (exponent)
# Note volume can be assigned to as a global or local variable
# This may require adjustment depending on your audio output settings
volume = 0.05
# And frequency can be computed based on a base value
base = 61
a = 0
b = 1
c = 2
d = 3
e = 4
f = 5
# one-liner functions can be defined as so (this one's local, with '; ' separated substatements)
computeit := fn x := start + 4; y := x; y
# and called as so
g = call computeit with start := 3
score
# Each note in this score will be a quarter second long.
length := 1 / 4
# Bare variables in sections are played as notes, by default relative to the base note.
a b c d a a b e e f g g d
# Plain frequencies can be played as well
convertnotes := 0
relative := 0
440
playmelater
a a b a a b a a e a a a a
main
# scores can be played immediately
play defs
# Multiple times
play score 3 times
# Or scheduled for the future (in 10 seconds, offset from now)
play playmelater in 10
# Or based on an absolute offset
play playmelater 3 times at 20
# and finally, you can insert delays into scores with
wait 10
>main.projects.presenter
addProject('presently', '/pub/presently.svg', `A picture of the word: Presently on a white background.`, '/presently',
`A very barebones JS presentation tool. Following in Takahashi's footsteps.`, html.elts.para(
`My version of a ${html.elts.ilink("Takahashi Method", "https://en.wikipedia.org/wiki/Takahashi_method")} presentation tool for the web.`,
`I've used my equivalent tool in Bash (using figlet for font rendering) with great success in a couple presentations.`,
`I figured it'd be more flexible if it was web accessible. Keep in mind, this is completely untested.`,
`Save ${html.elts.ilink("/presently", "/presently")} as an html file and load it in your browser if you want to mess with it.`,
),
true, `--fg: transparent;`,
);
url('/presently', (r, p, res) => {
const { div, script, elts, textarea, pre, style, _, } = html;
return wrap({ unpadded: true, noannotato: true, },
style(_, `
#presentation * { background-color: white; color: black; font-size: 32px; padding: 1ch; }
#presentation h1 { font-size: 4em; }
`),
script(_, `
>reserve.main.projects.presenter.script
`),
div(`id="presentation" tabindex="0" style="display: flex; justify-content: center; align-items: center; background-color: white; color: black;"`),
div(`style="height: 100%;"`,
div(`style="margin: 1ch;"`,
elts.button('PRESENT', `present(document.getElementById('content').value, document.getElementById('presentation'), true);`)
),
textarea(`id="content" style="box-sizing: border-box; width: 100%; width: -moz-available; width: -webkit-fill-available; width: stretch; height: 70vh; margin: 1ch; overflow: scroll;"`, `
# Comments begin with #s
@ @ Headings are led by @s
~ ~ Quotes start with ~s
% % Longquotes are preceded by %s
And everything else is "default text"
Line///Breaks can be mandated with/// / / / Three unseparated slashes.
That's it.///Hit present to present.///Use "h" or the left arrow to go back a slide.///Click, tap, or hit any other key to advance.
Paste in a presentation you've written,///and show it off on the big screen.
`),
),
);
});
>main.projects.presenter.script
async function present(s, display, fullscreen = false) {
if (fullscreen) {
display.requestFullscreen();
}
display.writePage = (l, font) => {
let lp = l.replace(/\\/\\/\\//g, '<br>').trimLeft();
display.innerHTML = (
font === 'normal' ? '<div>' + lp + '</div>' :
font === 'quote' ? '<i>' + lp + '</i>' :
font === 'longquote' ? '<i>' + lp + '</i>' :
font === 'heading' ? '<h1>' + lp + '</h1>' :
'<div>' + lp + '</div>'
);
};
display.readkey = () => {
return new Promise((r) => {
display.onkeydown = (evt) => {
evt.preventDefault(); evt.stopPropagation();
return r(evt.key);
};
display.onclick = (evt) => {
evt.preventDefault(); evt.stopPropagation();
return r('');
};
display.focus();
});
};
return new Promise(async (r) => {
let lines = s.split('\\n').filter(l => !(l === '' || l.startsWith('#')));
let i = 0;
while (i < lines.length) {
i = Math.max(0, i);
let line = lines[i++];
if (line.startsWith('~')) { display.writePage(line.slice(1), 'quote'); }
else if (line.startsWith('%')) { display.writePage(line.slice(1), 'longquote'); }
else if (line.startsWith('@')) { display.writePage(line.slice(1), 'heading'); }
else { display.writePage(line, 'normal'); }
switch (await display.readkey()) {
case 'h': case 'ArrowLeft': i -= 2; break;
case 'q': return r(); break;
}
}
if (fullscreen) { document.exitFullscreen(); }
delete display.onkeydown;
delete display.onclick;
return r();
});
}
>main.projects.browser
@ Ruby Browser
addProject('RubyBrowser', '/pub/rubrowser.svg', `A picture of nodes in a graph.`,
'/pub/browser.rb', 'A browser based on finding pages based on local keyword search.', formatText(
`Download and run this for an enjoyable browsing experience.`,
`Basically, you hit an initial web page, then type in keywords which linking pages are scored by.`,
`You then browse to the page that has the most of those keywords.`,
),
true,
`--fg: white;`,
);
>main.projects.runeshell
@ Rune shell
addProject('RSH', '/pub/runeshell.svg', `RUNE-SHELL written in Elder Futhark.`, '/pub/rsh.sh',
`A Hy program (and a rewrite in python) designed to return your shell to the early days of programming.`, html.elts.para(
`An executable shell script can be found above, or at ${html.elts.ilink('rsh.sh', '/pub/rsh.sh')}.`,
`Whereas a much more readable python script that converts text to Elder Futhark, ignoring escape sequences, can be found at ${html.elts.ilink('rsh.py', '/pub/rsh.py')}.`,
`A version written in Hy (and slightly less compatible with non-vt100 terminals), can be found at ${html.elts.ilink('github', 'https://github.com/Strict-Evaluation/rsh/')}.`,
`The top few lines of a Vim session follow (you can see the source in latin script at ${html.elts.ilink('superoxide.svg', '/pub/superoxide.svg')}).`,
html.elts.list(html.pre(`style="overflow: scroll;"`, html.escape(`
+ [ᚾᚩ ᚾᚨᛗᛖ] | ᛋ/ᛋᚢᛈᛖᚱᚩᛉᛁᛞᛖ.ᛋᚹᚷ ______________________________________________________________________________________ᛉ
1 <ᛋᚹᚷ ᚹᛁᛖᚹᛒᚩᛉ="0 0 100 100" ᛉᛗᛚᚾᛋ="ᚻᛏᛏᛈ://ᚹᚹᚹ.ᚹ3.ᚩᚱᚷ/2000/ᛋᚹᚷ" ᛋᛏᚣᛚᛖ="ᚹᛁᛞᚦ: 100%; ᚻᛖᛁᚷᚻᛏ: 100%; ᛒᚨᚳᛣᚷᚱᚩᚢᚾᛞ-ᚳᚩᛚᚩᚱ: ᛒ
2 <ᛋᛏᚣᛚᛖ>
3 .ᛏᛁᛏᛚᛖ { ᚠᚩᚾᛏ: ᛒᚩᛚᛞ 45ᛈᛉ ᚻᛖᛚᚹᛖᛏᛁᚳᚨ; }
4 </ᛋᛏᚣᛚᛖ>
5 <ᛏᛖᛉᛏ ᛉ="50" ᚣ="50" ᚠᛁᛚᛚ="ᚹᚻᛁᛏᛖ" ᛏᛖᛉᛏ-ᚨᚾᚳᚩᚱ="ᛗᛁᛞᛞᛚᛖ" ᛞᚩᛗᛁᚾᚨᚾᛏ-ᛒᚨᛋᛖᛚᛁᚾᛖ="ᛗᛁᛞᛞᛚᛖ" ᚳᛚᚨᛋᛋ="ᛏᛁᛏᛚᛖ">ᚩ₂ ⁻</ᛏᛖᛉᛏ>
6 </ᛋᚹᚷ>
~
~`
))),
),
false, `--fg: white;`,
);
>main.projects.tools
@ Reps
addProject('Reps', '/pub/reps.svg', `The word REPS, over and over and over.`, 'https://github.com/Strict-Evaluation/Reps',
`A simple Spaced Repetition vocab trainer for the command line.`, html.elts.para(
`When I commuted to work a lot, I'd use Termux (a terminal emulator for android) to write code, and practice vocab on the way to work.`,
`I used this program to my great satisfaction. It has a simple interface and provides exactly the experience I wanted from a spaced repetition app.`,
`I wrote it in Hy, which proved to be a really nice way to write Python, but requires a "pip install hy3" before you can use it. Not an issue for most users.`,
),
false, `--fg: transparent;`,
);
@ BashSec
addProject('BashSec', '/pub/bashsec.svg', `A protective leaf sprouting from a desert island.`, 'https://github.com/Strict-Evaluation/bashsec',
`A minimal and extremely hacky webcam recording service mainly written in bash.`, html.elts.para(
`At some point, I wanted to be able to have my laptop record video segments after it detected motion.`,
`I couldn't seem to get any video recording library for Ruby or C working, so I hacked together a ridiculous solution using Mplayer/FFmpeg, PPM conversion, and a little bash glue.`,
`It ended up working really well, but I can't say I'd do it again, given how easy it'd be to make using JavaScript or Python nowadays.`,
),
false, `--fg: transparent;`,
);
>main.projects.trexpedition
@ Trexpedition
addProject('Trexpedition', '/pub/trexpedition.png', 'A pixel art representation of a trail map.', 'https://trexpedition.org/',
`An education in the matierial sciences, through hiking.`,
formatText(
`A project I made with ` + html.elts.ilink('Karen', 'https://imthekaren.com') + ` for GoCodeColorado, a failed experiment in government run hackathons.`,
`Essentially, it's an educational app that (currently only in Colorado), examines hiking trails, and offers them to you, based on special needs (dogs, atv, biking, etc...), and various flora and fauna you might be searching for.`,
`Along the trail, you can look at USGS geological observations nearby, and iNaturalist observations that've been taken along the way.`,
`With reasonably liberal cacheing, you can take a trail map with you, even without cell service, and use it to identify the plants and animals all day long.`,
),
true,
`--fg: transparent;`,
);
>main.resume
const resume = {
subsection(...body) {
return html.div(`style="padding: 0.5em 1ch 0.5em 1ch; page-break-inside: avoid;"`,
formatText(...body));
},
section(...b) {
let { options, body } = getoptions(b);
let style = `style="${!options.inverted ? `` : ` --bg: black; --fg: white;`}"`;
return options.title ?
html.div(style,
html.div(`style="padding-top: 1ch; page-break-inside: avoid;"`,
html.div(`style="--bg: black; --fg: white; font-weight: bold; padding: 5px 0 5px 1ch; line-height: 2rem; height: 2rem;"`,
options.title)),
formatText(...body)) :
html.div(style, formatText(...body));
},
job(title, place, interval, description, keywords) {
return resume.subsection(
html.div(html._,
html.div(`class="row" style="justify-content: space-between; border-bottom: 2px solid black;"`,
html.div(html._, `<b>${title}</b>`, ' at ', `<b>${place}</b>`),
html.div(html._, `<b>${interval}</b>`),
),
formatText(description),
html.elts.list({ nomargin: true, },
html.div(`style="font-size: 14px;"`, keywords.join(', ')),
),
),
);
},
accolade(what, howGoodWasIt, where, description, keywords) {
return resume.subsection(
html.div(html._,
html.div(`class="row" style="justify-content: space-between; border-bottom: 2px solid black;"`,
html.div(html._, `<b>${what}</b>`),
html.div(html._, `<b>${howGoodWasIt}</b> at <b>${where}</b>`),
),
formatText(description),
html.elts.list({ nomargin: true, },
html.div(`style="font-size: 14px;"`, keywords.join(', ')),
),
),
);
},
};
url('/resume', (r, p) => {
const {div, elts, _} = html;
const { section, subsection, job, accolade } = resume;
return wrap({ unpadded: true, noannotato: true, extrastyle: `.link { color: inherit; text-decoration: underline; } .link:hover { color: gray; } ` },
elts.hcentered(
div(`style="width: 100%; max-width: 1024px;"`,
section({ inverted: true, },
subsection(
div(`class="row" style="justify-content: space-between;"`,
div(_, `<b>Peter Herniman.</b> ${elts.ilink('impeter.org', 'http://impeter.org')}.`),
div(_, `Resume found at: ${elts.ilink('impeter.org/resume', 'http://impeter.org/resume')}.`),
),
div(`class="row" style="justify-content: space-between;"`,
div(_, `${elts.ilink('petertheherniman@protonmail.com', 'mailto:petertheherniman@protonmail.com')}.`),
div(_, `NPM modules I maintain at ${elts.ilink('NPM', 'https://www.npmjs.com/~petertheherniman')}.`),
),
`Located in the USA.`,
),
div(`style="height: 0.5em;"`),
),
div(`style="padding: 0 1ch;"`,
section({ title: 'About me:', },
subsection(
`Programming since the early 2000s.`,
`Pick things up quickly and work well in a wide variety of roles, particularly if work can be done to automate or streamline them.`,
`Anti-churn, vocal if a process could be more efficient, is based on bad preconceptions, or runs counter to protocol.`,
`There's something to learn in any situation, why don't we find out what that is?`,
),
),
section({ title: `Tools:`, },
subsection(
div(_, `<b>Fluent in:</b>`), elts.list({ nomargin: true, },
[`Rust`, `Javascript`, `C`, `Common Lisp`, `Julia`, `Lua`, `Ruby`, `Python 2 and 3`, `Nim`, `Bash`, `Racket`, `SQL`, `Elixir`, `Lisp`].join(', '),
),
),
subsection(
div(_, `<b>Proficient in:</b>`), elts.list({ nomargin: true, },
[`Next.js`, `React`, `Redux`, `Angular`, `Vue.js`, `Svelte`, `OpenTofu`, `Terraform`, `COBOL`, `Erlang`, `C++`, `OCaml`, `Perl`,
`Raku`, `Hy`, `x86 and arm assembly`, `Forth`, `Haskell`, `Java`, `Go`, `PHP`, `Clojure`, `CouchDB`, `GraphQL`].join(', '),
),
),
subsection(
div(_, `<b>Good with:</b>`), elts.list({ nomargin: true, },
['Google Cloud', 'AWS', 'GNU/Linux', 'Git', 'Svn', 'A variety of shells', 'Cygwin', 'Valgrind', 'GDB', 'Emacs', 'JDB', 'Vim', 'Visual Studio', 'Atom'].join(', '),
),
),
),
section({ title: 'Work:', },
job('Senior Software Engineer / Team Lead', 'Oracle Beast', 'Spring 2022 - Present', formatText(
`Developed fault tolerant price prediction software for the Flare network.`,
`Wrote and interacted with EVM contracts to provide in-network prices with very high uptime.`,
`Lead one other developer, educated them on best practices, and set up a wide variety of infrastructure running Flare Network validators, observers, and oracles.`,
), ['Rust', 'Web3', 'Flare', 'Solidity', 'Javascript', 'Infrastructure', 'DevOps', 'Julia', 'ML', 'Machine Learning', 'Statistics']),
job('Full Stack Software Engineer', 'Superoxide', 'Winter 2020 - Spring 2022', formatText(
`Superoxide was an experiment in visually minimal, ungamified brain training for serious adults.`,
`Additionally, it was a foray into incredibly secure programming; the only external code it uses is Julia and GNUTLS.`,
`Developed the whole stack, from server to database, to UI framework, it was an amazing way to learn system design, and understand the web from the very bottom up.`,
), ['Julia', 'Javascript', 'Language Design', 'Pedagogy', 'Custom Deployment']),
job('Full Stack Software Engineer', 'Parabola', 'Summer 2019 - Spring 2020', formatText(
`Parabola was a visual programming tool. Did R&D for their Machine Learning, wrote a lot of frontend and backend code in Javascript, Python, and SQL.`,
`Mainly focused on backend work, and spearheaded quite a few projects, creating their recommendation engine with Torch (and then scikit) and doing other greenfield projects.`,
`Started a paper discussion club for the engineering division of the company, and ended up giving a lot of presentations on seminal papers in PL Design, Software engineering best practices, security, etc...`,
), ['Python', 'Javascript', 'Typescript', 'Redux', 'Torch', 'ML', 'Language Design', 'SQL', 'Redis', 'AWS', 'React', 'Express', 'Docker']),
job('Full Stack Software Engineer', 'Massdrop', 'Summer 2016 - Fall 2017', formatText(
`Worked as as a full stack isomorphic Javascript developer at a medium sized startup for almost 15 months, Wore multitude of hats, writing PHP, SQL, Ruby and working with AWS and Docker.`,
`Began there as an intern, but was hired as a Software Engineer after 3 months. Spearheaded features that increased user conversion by over 6%.`,
`Decided after a year post internship that finishing my Bachelor's would be a better idea.`,
), ['Node.js', 'React', 'Python', 'Javascript', 'Typescript', 'Ruby', 'Postgres', 'Docker', 'Vagrant', 'Kubernetes', 'Jenkins', 'Git', 'CI', 'PHP', 'SQL', 'Redis', 'AWS']),
job('R&D Dev Intern', 'Earthquake Protection Device', 'Summer 2015', formatText(
`Wrote embedded Python and C to coordinate a swarm of Raspberry Pis (using RF emitters).`,
`The devices were meant to deploy countermeasures in the case of seismic activity, but the countermeasures were never developed.`,
), ['C', 'Python 2', 'Embedded Development', 'Distributed Systems']),
),
section({ title: 'Accolades:', },
accolade('FBSecure', '2nd out of 98 teams', 'HackUCSC 2016', formatText(
`Wrote a browser extension with two friends that seamlessly encrypts Facebook messages with RSA.`,
`It worked exceptionally well, until Facebook altered the DOM on their messenger to make things harder. None of us actually used Facebook, so we let it break.`,
`If you want to check it out, there's a postmortem at ${elts.ilink('FBSecure', 'http://impeter.org/view/FBSecure')}.`,
), ['Firefox', 'Chrome', 'Extension']),
accolade('SassMaster', '3rd out of 60 teams', 'CruzHacks 2018', formatText(
`Again with one of the same teammates and a newcomer, we made a sarcasm detector for a hackathon in 2018.`,
`We used a combination approach, a character RNN + a naive bayesian classifier to determine if a sentence was sarcastic or not.`,
), ['ML', 'NLP', 'Ruby', 'Lua', 'Torch', 'RNN', 'Classification', 'Bayesian Learning']),
accolade('Trexpedition', '4th', 'GoCodeColorado', formatText(
`Wrote an educational website with my ${elts.ilink('girlfriend', 'https://imthekaren.com')} that trains you in the natural sciences.`,
`It assists you in finding the right trail to hike on based on the flora/fauna you might find there, along with other parameters, then shows you geological features and animal/plant sightings along the hike.`,
`It caches very aggressively, since there's no cell service on most trails in the Colorado Desert.`,
), ['Firefox', 'Chrome', 'Extension', 'Express', 'Node.js', 'PWA', 'Progressive Web Apps']),
accolade('Odyssey of the Mind', 'State Champion', 'California OOTM 2014 and 2015', formatText(
`Odyssey of the Mind (a high school engineering competition) state champion two years in a row.`,
`It taught me how to think on my feet and solve problems rapidly. It also taught me how to budget time and resources (holding up 550+ pounds with 14 grams of balsa wood).`,
), ['Engineering', 'Acting', 'Improvisation']),
),
section({ title: 'Projects:', },
subsection(
`Among many others, over the years I've written:`,
`Multiple NPM modules and counting, I'm dedicated to open source in the right context.`,
elts.ilink('A unique browser in Ruby', '/view/RubyBrowser'),
elts.ilink(`A cutting edge design feedback system`, 'https://annotato.org'),
elts.ilink(`A compiler and interpreter for a custom music notation`, '/view/music'),
`A compiler that compiles to x86_64 from a s-exp based language`,
// `A massively-multiplayer networked game in Racket`,
// `A wide variety of scrapers written in a wide variety of languages`,
// `An efficiently raycast 3d game in Common Lisp`,
// `A modern take on JOSS`,
`Fault tolerant K/V stores both in Ruby and Go`,
`An implementation or two of Paxos`,
`A programming language for distributed systems based on the idea of bounded semijoin lattices`,
elts.ilink(`A Gopher server, client, and browser`, '/view/Tooth Less One'),
`Http servers in Nim, Lisp, and Julia`,
`A low-code SMTP server and client in Javascript`,
`A DSL for talking to Mnesia in Elixir`,
`A message board with real-time updates in Javascript and Node.js`,
`A forum in Elixir`,
`The world's first (I think) cellular automata strategy game`,
`An audible Hacker News reader`,
elts.ilink(`and a shell that translates Latin Script to Elder Futhark.`, '/view/RSH'),
),
),
html.div(`style="page-break-inside: avoid;"`,
section({ title: 'Passions:', },
subsection(
`Human Organization, Government, and History`,
`Distributed Systems and Consistency`,
`Functional Programming`,
`Programming Languages`,
`Machine learning`,
`Natural Languages (French, Spanish, Russian, Mandarin, Latin)`,
`Physiology`,
`Mycology`,
`Freediving`,
`Sculpture, Woodworking, Drawing, Pottery`,
`Lively discussion about almost any topic`,
),
),
),
html.div(`style="page-break-inside: avoid;"`,
section({ title: 'Affiliations and Presentations:', },
subsection(
`Given presentations to the Santa Cruz ACM on metaprogramming, functional programming, and various languages.`,
`Been on a many university panel discussions about AI and Machine Learning.`,
`Additionally, I've given a few presentations to my local LODP chapter about the history and application of different algorithms, in depth explanations of the Transformer architecture, optimization techniques, and more.`,
),
),
),
section({ title: 'Education:', },
subsection(
`B.S. in Computer Science from UC Santa Cruz, Particular interest in Distributed Systems, Databases, and PL Design.`,
`Certified Bilingual in English and Spanish.`,
),
subsection(
`President (and co-founder) of the Maria Carrillo High School programming club for two years. My experience leading this club, recruiting new members, organizing activities and teaching others has helped me understand how to teach and how to lead.`,
),
div(`style="height: 10em;"`),
),
),
),
),
);
});
>main.pages.papersilike
let papersilike = {
listedlinks(urls) {
return html.div(`class="row"`, ...(
urls.map(([label, url]) => html.elts.ilink(label, url || label)).join(', ')
));
},
paper(urls, ...description) {
const { div, elts, _, } = html;
return div(`style="margin: 1ch 0;"`,
papersilike.listedlinks(urls),
elts.list(formatText(...description)),
);
},
};
url('/papers-i-like', () => {
const { div, elts, _, } = html;
const { paper, listedlinks, } = papersilike;
return wrap(
div(_, `Here are some papers (and now articles and essays) that I like:`),
paper([['The Ironies of Automation, by Lisanne Bainbridge', 'https://ckrybus.com/static/papers/Bainbridge_1983_Automatica.pdf']],
`A really groundbreaking paper in delegation, automation, and failure analysis.`,
`You should really read this one, as soon as possible.`,
`It's really changed the way I approach automation, relationships, and organization.`,
),
paper([[`Particle Swarm Optimization`, `http://www.cs.tufts.edu/comp/150GA/homeworks/hw3/_reading6%201995%20particle%20swarming.pdf`],
[`Wikipedia`, `https://en.wikipedia.org/wiki/Particle_swarm_optimization`]],
`This is a really cool optimization technique. It's very fast, and easy to implement.`,
`The paper itself is a really enjoyable read, trying to solve a problem, making a giant leap, then organically iterating and optimizing the solution, and ending up with a very sweet algorithm.`,
),
paper([[`The Part Time Parliament`, `https://lamport.azurewebsites.net/pubs/lamport-paxos.pdf`],
[`Made simple`, `https://www.microsoft.com/en-us/research/uploads/prod/2016/12/paxos-simple-Copy.pdf`],
[`Acolyer`, `https://blog.acolyer.org/2015/03/03/the-part-time-parliament/`],
[`Wikipedia`, `https://en.wikipedia.org/wiki/Paxos_(computer_science)`],
[`See also: Light Cone`, `https://en.wikipedia.org/wiki/Light_cone`]],
`Another really well written set of papers. Leslie Lamport presents one of "the simplest and most obvious of distributed algorithms."`,
`A little background for the motivation of this paper is needed, but understanding it (and distributed systems in general), is valuable to anyone who cares about time, the blockchain, or computers at all.`,
`For background, consider reading about:`,
elts.list(
listedlinks([[`Consensus`, `https://en.wikipedia.org/wiki/Consensus_(computer_science)`],
[`Total Ordering`, `https://en.wikipedia.org/wiki/Total_order`],
[`BFT`, `https://en.wikipedia.org/wiki/Byzantine_fault_tolerance`],
[`Lamport Clocks`, `https://en.wikipedia.org/wiki/Lamport_clock`]]),
),
),
paper([[`Programming as Theory Building`, `http://pages.cs.wisc.edu/~remzi/Naur.pdf`]],
`This paper really changed the way I approached programming, and learning in particular.`,
`I think that humans excel at keeping a large amount of changing state in our heads, and that taking advantage of that aspect of our ability to model systems is the key to good programming and system building.`,
),
paper([[`Mutual Aid`, `https://ecology.iww.org/PDF/Kropotkin/Mutual%20Aid.pdf?bot_test=1`]],
`Ok, so this one really isn't a paper, but a long collection of essays. It's worth reading, though.`,
`Perhaps I'll make a page cataloging my odd biological books and papers sometime else.`,
),
paper([[`Discourses on the Sober Life`, `/pub/Discourses on the sober life, luigi cornaro.pdf`]],
`Another odd set of essays. If longeveity advice from a playwright living in the 1500s is your thing, read this.`,
`Keen observers of modern dietary advice will see an odd trend towards Luigi's model.`,
`Much debate can be had about the difference between CR/DR in Luigi's diet, that deserves an article at a later date.`,
),
paper([[`CLODO Speaks`, `https://processedworld.com/Issues/issue10/i10clodo.htm`],
[`Processed World`, `https://processedworld.com/`]],
`While not an individual paper (other than this interview with CLODO), whether you agree with what they say or not, Processed world's perspective and history provides a useful benchmark to compare to your own values.`,
),
paper([[`Notation as a Tool of Thought`, `https://www.jsoftware.com/papers/tot.htm`]],
`Ken Iverson, along with Peter Naur, has deeply affected how I think about constructing my essays to computers.`,
`I just encourage you to read this one, even if you don't like APL.`,
`As a notation, like mathematical notation (look at Richard Feynman's alternate notation), it has been refined over a long period of time.`,
`Those refinements and ideas are worth peering into if you like language.`,
),
paper([[`Reflections on Trusting Trust`, `http://genius.cat-v.org/ken-thompson/texts/trusting-trust/`]],
`I don't think this can be overlooked by anyone.`,
`In a country where the last quarter century of elections have been tarnished by allegations of "voter fraud" (by every candidate to every other candidate), we should wonder if there's any way anyone could actually verify that fraud happened or not, even with a system like Pailler encryption.`,
`Just give it a read, and despair.`,
),
);
});