Ben Crowder

Blog: #javascript

15 posts :: tag feed :: about the blog :: archive

Links #46

#astro #canvas #coding #javascript #links #spa #travel #web

Google’s Well-Tempered Traveler. Love this. Baghdad in July, though — whew.

Matthew MacDonald on whether Canvas rendering might replace the DOM. I like Canvas a lot, but I hope this potential future is far from the timeline we’re living in.

Astro is an intriguing newish static site builder.

Tom MacWright on alternatives to SPAs, also in a similar vein. I need to look more into the projects he links to.

Tim Daub on how he builds JavaScript apps in 2021, which I suppose is also in a similar vein. Sensing a theme here. (And much of this resonated with me. The more minimal the build process, for example, the happier I am.)


Reply via email or via office hours

#arc #blogging #codex #coding #css #django #fastapi #html #javascript #leaf #meta #tools #vinci #web

I seem to have forgotten how to blog. (Actual blogging, as opposed to merely linking to new art.) In an attempt to get back on the saddle again:

Outside of art, my project time lately has primarily been swallowed up by some internal tooling changes. I alluded to this back in June, though the plan changed along the way. Rather than merging all those apps into one behemoth conglomerate, I decided it would be better (along at least a few axes) to follow the Unix philosophy and stick with smaller tools that do one thing well. Which conveniently lines up with the set of tools I’ve already built. Fancy that.

Arc is (was) my notes app, written using FastAPI. I wanted an app that felt more a wiki, and I wanted to move it to Django (easier to maintain, considering most of my other tools are also in Django). And I didn’t really like the name anymore. Thus Codex was born. Heretically, I built it using hardly any JavaScript — just a bit for keyboard shortcuts and another bit for the autosuggest when linking to another page. Everything else uses plain old HTML forms.

In fact, it was so liberating and fun that I plowed onward and decided to ditch Vinci (my internal blog/notebook app) and build a new app, Leaf, using the same technique; the only JS it uses is for keyboard shortcuts. It’s simpler, easier to maintain (I think? it’s still early on), and in a way it feels more in line with the grain of the web.

One other thing I did differently with both apps was to wait to write any CSS until after the functionality was all in place. It was disconcerting and delightful, building something with bare browser styles, and it certainly helped me focus on functionality first rather than getting distracted by layout.

Conclusion: while I doubt I would ever build apps at work this way, this old-school mode was invigorating and absolutely worth it for these personal projects.


Reply via email or via office hours

Introducing Cirque

#circle-packing #cirque #coding #generative-art #javascript #rust #svg #web #webassembly

As schoolwork starts to wind down, I’m finally starting to make progress on the creativity tools and HCI explorations I talked about back in September. This week I’ve also realized that graphical tools for art and design are what I want to focus most on. (I do still intend to explore textual interfaces, but they’re on the backburner for now.)

In the spirit of working in public, then, Cirque is a small WIP web app I’m building for making patterns via circle packing:

cirque-01.png
cirque-02.png
cirque-03.png
cirque-04.png

This is very much a rough initial MVP. You can tweak some settings, generate new patterns using a simple circle-packing algorithm, and export SVG (with the turbulence/displacement filters enabled by default), but that’s it. Some of the features I’m planning to build next:

  • Replace the settings text box with, you know, good UI (I’m also excited to explore color picker design here)
  • Add the ability to manually place both circles and anticircles (so artists are able to create intentional negative space)
  • Add a way to programmatically set the circle colors (probably via something like shaders, so you could say all circles smaller than a certain size get one color and the rest get another, or circle color is dependent on position or something else)

I’ve also thought about moving the circle packing code from JavaScript to Rust, to be able to play around with WebAssembly, but it seems overkill, at least at this point. (Instead I think I’ll plan to Rust and WebAssembly on the graphical type design tool I want to build.)


Reply via email or via office hours

Links #17

#coding #humor #internet #javascript #links #music #react #web #web-components #working-in-public


Reply via email or via office hours

Links #6

#coding #games #javascript #links #sound #structure #writing


Reply via email or via office hours

Alphabet app

#coding #education #javascript #web

Our toddler loves looking at letters and saying their names. A while ago we printed the alphabet out onto cardstock and have been using that with her, which is great, but I’ve also wanted to write a small web app that does the same thing — mostly for when we’re in another room, but also to make the randomization a little better. And because I can’t seem to stop writing little apps.

So this morning I threw together Alphabet:

Super simple. Click, tap, or hit a key to move to the next letter. It works on phones and tablets as well.


Reply via email or via office hours

Botswana 2.0

#botswana #coding #games #javascript

Two years ago my friend Chad and I released Botswana, a browser-based arena game with programmable bots written in JavaScript.

But the original was kind of boring. So we tweaked the game mechanics a bit and made a number of other modifications (multiple bots per team, extensible rulesets, etc.). And now we present Botswana 2.0, a culmination of rampant nerdiness.

The thing that interests me most about the game now is the customizable rulesets. For example, it took all of ten minutes to change the game so it’s played on a series of conveyor belts that move the bots up and down:

It likewise took less than half an hour to make the bots orbit the Death Star instead:

Since the drawing code is part of the ruleset, it’s fairly easy to get a radically different look:

Switching between the rulesets is just a matter of changing the URL in the ruleset box and starting a new tournament.

Anyway, as before, the release is on GitHub, with a README that explains how to write bots and customize rulesets and stuff.


Reply via email or via office hours

Javascript name box

#design #genealogy #javascript #web

In genealogy web apps, I kind of like consolidating name fields into a single textbox. Simpler is better. But then you run into the problem of distinguishing the surname from the rest of the name — because of surnames like “Gutierrez Sanchez,” you can’t just assume the surname is the last word in the string.

I’ve been thinking for a while about a clean way to deal with this (as well as giving a nice visual indication of the surname instead of just slashes), and here’s what I’ve got so far, which I’m dubbing (rather unimaginatively) the Javascript name box:

When you click on the name, it becomes editable:

How it works

Basically, you give it an input.namebox element and it creates a corresponding div tag for displaying the highlighted surname. It then flips back and forth between the input and the div, parsing the name field and changing the highlight appropriately.

Live demo

Javascript name box


Reply via email or via office hours

Erasure

#coding #education #javascript #memorization

When I was a kid, my mom used to have us memorize poems. She’d write the poem out on a whiteboard and we’d recite it a few times, then she’d start erasing a few words, have us recite it again, erase a few more, and so on. And it worked.

Turns out it’s super easy to do the same kind of thing in a web app. Here’s Erasure:

If you click on an erased word, it’ll briefly become visible again. (But of course you only want to do that if you’re really stuck.)

As usual, the code is on Github.


Reply via email or via office hours

Botswana

#botswana #coding #games #javascript

As previewed a little while ago, I’d like to introduce Botswana:

A couple weeks ago at work I was talking with two of my coworkers and Core War came up somehow. I got excited about the idea of writing AI bots to compete with each other. Conferring with my friend Chad, we decided to make it web-based and use Javascript as the scripting language for both the bots and the game engine. A couple days later, we had a working engine, and we’ve been fine-tuning it since then.

Each turn, the engine sends the current state of the world to each bot. The bot can then give the engine its command — to move forward, move backward, turn left, turn right, or fire. Last bot standing wins. We’ve gone with an intentionally simple rule system for now, but we’ve got some fun plans for future improvements.

The code’s open source and is on Github.


Reply via email or via office hours