Journal Entries By Tag: #js

Assorted journal entries with the tag #js.


My first WebToy - the BPS (Bill Paxton Soundboard)

TL;DR — I've written a small HTML5 Soundboard themed around the late actor, Bill Paxton.

👓 3 minutes

Ever since the early days of JavaScript (remember document.layers?), Iā€™ve been interested in building web applications, from the complex to the trivial. In that time, Iā€™ve built more signature generators, magic 8-balls, and die rollers than I care to mention. But, apart from the tools at Planar Vagabond, most of these #WebToys are lost to time (or sitting on some 3/4 full hard drive waiting to be rediscovered).

Until now!

Iā€™ve decided to start archiving them here, in my lightly-tended digital garden, under the heading of WebToys (a moniker chosen based on their dubious utility). And the first #WebToy is a project Iā€™ve had in mind for over 25 years, but that Iā€™ve just finally put the 4-ish hours in to complete: .

The BPS (Bill Paxton Soundboard)

Back when I was in college (circa 1997), a friend of mine and I would often discuss ideas for ā€œfunā€ (and typically useless) computer programs. One night, one of us suggested a virtual See-and-Say themed around quotes from the great character actor, the late Bill Paxton. Of course, writing such a program wasnā€™t worth the effort (especially circa 1997), so we just kind of chuckled and forgot about it.

Fast-forward to 2024: the company I work for has a ā€œUI Developers Guildā€ (for those interested in bettering their development skills), and they recently started running coding challenges, both to drive engagement with the guild and to give the coders a chance to do something non-work related. This particular challenge had 3 simple rules (copied verbatim below):

  1. Play some kind of music / sound
  2. Be viewable
  3. Donā€™t work over 4hrs!!!

After briefly contemplating what to offer as my entry for the challenge, the idea from college bubbled back to the front of my brain, and I thought, ā€œthis is my chance!ā€

The rest, as they say, is history.

Work Breakdown

  • One hour thinking through the concept and writing the rough draft player.js and main.js modules;
  • One hour to turn draft into MVP, addressing layout and audio issues;
  • One hour to add images and expand the audio selection; and
  • One final hour[1] to add mobile support and some light documentation.

Now, this is obviously not the first Bill Paxton soundboard on the #interwebs, nor is it the most comprehensive. But, unlike the ones in the App or Play stores, mine doesnā€™t require any scary permissions, and wonā€™t track you relentlessly. And, unlike other web-based soundboards, mine has no advertising, andā€¦ wonā€™t track you relentlessly. So maybe mine is better, at least in some ways. šŸ˜„

Plus, releasing it here doubles as my entry into the aforementioned coding challenge, so win-win!

With a few more hours work, Iā€™d probably turn it into a PWA and add full offline support (caching the sounds and images in localstorage), or maybe disable the buttons until the previous sound is done, butā€¦ thatā€™s for another day.

I suspect Iā€™ll wind up creating (or finding) other similar small #WebToys in the future, and when I do, Iā€™ll add them here. In the meantime, Iā€™m open to suggestions: what other tiny, useless programs does the world need more of?


  1. Of course, it took an additional couple of hours to move it to my website and actually get it out on the web, but those steps were technically outside the scope of the original project, which only required a codepen, so I donā€™t count that. ā†©ļøŽ


Now Playing: "Camp Happy Island Massacre" for DOS

TL;DR — I wrote a simple computer game in 1997 called Camp Happy Island Massacre which I now have running online here.

👓 3 minutes

Way back in 1997, I released my first (and, so far, only) computer game, Camp Happy Island Massacre (hereafter referred to as #CHIM), a comedy-horror text game for the DOS operating system. Originally written while I was still in college, the game is about a cursed summer camp and the 3 surviving counselors who try to stop a horrific force before it claims them. I put it out for free (more-or-less) on the internet of 1997, and though it was never a huge success, Iā€™ve always been proud of it.

Fast forward to 2018: although Iā€™ve known about the Internet Archiveā€™s MS-DOS Software Library for some time, Iā€™d never really thought about the specifics of how it works until I read an article which talked about the Em-DOSBox project. Em-DOSBox is a port of DOSBox emulator which runs in the browser via the Emscripten JavaScript library. As I was reading the article, a thought struck me: could I get CHIM running in the browser?

I decided it was at least worth a shot, so I began with step 1, building Emscripten from source. That went off without an issue, so I moved on to the next step, building the DOSBox JS files, and thatā€™s where I ran into my first snag: the only way I was able to get it to build was by disabling the ā€œemterpreter syncā€ function (emconfigure --disable-sync ./configure). It complained about the lack of empterpreter sync, but it built, and that lead me to the next step, packaging the dosbox.js file for use in a browser via the ./packager.py command. Even though this seemed to work great, there was obviously something wrong with my resulting files, as the JavaScript engine in my browser kept throwing an error (ā€œmissing function in Moduleā€). After toying around with it for a while, I found that, if I used ./repackager.py (the Emscripten-less version of the packager) to package my files, I could get an empty DOSBox window to come up, but it still wouldnā€™t load the actual EXE.

By this point, I was flummoxed, and was about to give up. And thatā€™s when I found the answer: js-dos!

After 30 minutes with this tutorial (and some source viewing on a couple of js-dos game pages), I was able to get CHIM working.

But my work wasnā€™t finished yet. Even though Iā€™d kept nearly all of the files for CHIM for the last 21 years (with the exception of the gameā€™s original C++ source files, which were lost in a hard drive crash shortly after it was released), I hadnā€™t really messed with them much in the last decade, so there was some cleaning up to be done. I updated some of the questions (and answers) in the FAQ, replaced the license, and generally tried to clean up the supporting text files. And thatā€™s when I ran into one last unexpected issue: text encoding.

You see, I had forgotten that, when I first wrote the game and the supporting files, I had used some primitive ANSI graphic characters in an attempt to enhance the look of it. And now, when I tried to view those files on my Linux laptop, those graphics came outā€¦ weird.

The fix was to convert the files from the ā€œIBM-862ā€ format to the modern UTF-8 format:

> iconv -f IBM862 -t UTF8 INTRO.TXT -o INTRO.UTF.TXT

This allowed me to edit the files in Mousepad (and serve them up with Nginx), while still keeping the graphics intact. Finally, I added the Unicode Byte Order Mark, which makes it display correctly in the browser, even when served from a file:// URL (you can add the BOM via Mousepad, under ā€œDocument -> Write Unicode BOMā€).

So, if youā€™d like to try the game out, check it out here, and good luck - youā€™re gonna need it!


Fatigue and Mastery

👓 less than 1 minute

Tero Parviainen has a nice piece about Overcoming Javascript Framework Fatigue, but donā€™t let the title fool you - much of the advice can be applied those who work (and live) in most any rapidly-evolving field. Plus, it contains one of the best quotes from Rich Hickey (the creator of Clojure) about what skills a developer really needs to have (and those skills have nothing to do with preferred language or framework):

Programming mastery has little to do with languages, paradigms, platforms, building blocks, open source, conferences etc. These things change all the time and are not fundamental. Knowledge acquisition skills allow you to grok them as needed. Iā€™d take a developer (or even non-developer!) with deep knowledge acquisition and problem solving skills over a programmer with a smorgasbord of shallow experiences any day.

Via JavaScript Weekly


RSS & Atom Making a Comeback?

👓 less than 1 minute

Baldur Bjarnason thinks he knows why RSS and Atom have come back into vogue, powering both Apple News and Facebook Instant Articles after years of disuse:

Thereā€™s one thing thatā€™s very different this time around for RSS and Atom and itā€™s the reason why this time it might be different. Back then ā€˜just the HTML, no CSS, JS, or Flashā€™ meant nothing more than rich text with images.

Now, ā€˜just the HTMLā€™ means rich text, video, audio, SVG, and more. While at the same time ā€˜HTML with CSS and JSā€™ has come to mean slow loading websites full of annoying ads and broken functionality (i.e. scroll-jacking).

Itā€™s that last point (again) thatā€™s the most important, IMHO, but itā€™s also the one that seems to be falling on deaf ears.


Developing the Web

TL;DR — A "Web Developer" should "develop the web" by building their projects in accordance with their own vision of how the web should be. For me, that means using open source software to build standards-compliant, accessible, and secure sites and apps.

👓 2 minutes

The great Remy Sharp (@rem) wrote a piece about what it means to be a web developer, as opposed to an engineer, and the difference a title does (or doesnā€™t) make. In the end, he settles on the title of ā€œweb developerā€:

I donā€™t know why I thought it was uncool to be a ā€œweb developerā€. Perhaps because itā€™s utterly vague.

What ā€œweb developerā€ does mean to me though, is this:

Someone who writes code for browsers. Likely from the school of view source, is comfortable with drop-in libraries, understands standards and best practice techniques. But mostly, a tinkerer.

I like his definition (especially the part about tinkering), but I think that itā€™s incomplete, being merely functional.

I suggest that the term ā€œweb developerā€, by its definition, carries a philosophical imperative: to develop the web. That is to say, a web developer should visualize how they would like the web to be (as a whole), and build their own projects in a way that reflects that vision.

This is something Iā€™ve tried to do myself, both in my professional and personal projects (albeit with varying degrees of success). To me, being a web developer means that I should use responsive design principles, ensure accessibility, and follow the standards wherever possible. It also means using only open source software, be it in the server stack, the service layer, or even as a client browser.

As a web developer, I want to participate in a decentralized web, and would rather use a self-hosted, fully-open social media platform than a corporate data silo. Likewise, I support the use of standards-based communication protocols (IRC, e-mail, etc.) over proprietary solutions. Finally, as a web developer, I believe in a more secure web, and support initiatives like HTTPS everywhere.

All in all, I think this definition adds an air of legitimacy to the ā€œweb developerā€ title. As I noted in a comment: based on this criteria, one could say that Sir Tim Berners-Lee is the definitive Web Developer (a title he himself uses, as Remy pointed out), and thatā€™s not bad company to be in. In fact, I think Iā€™m going to go get some business cards with ā€œWeb Developerā€ on them.