Category Archives: Web Apps

Posts about web apps I’ve created or am working on.

AOL, General News, Web Apps

Five Miscellaneous Updates

2 Comments

I’ve done a handful of updates the past few months and I realized I should probably document them somewhere, as people interested in this site aren’t going to periodically comb through the whole thing to see what’s new. So without further ado, here’s what’s new.

Text to ASCII Art Generator

For TAAG, I had a user request the ability to copy TheDraw output as bash commands so that the text could be used in bash scripts. I thought that was a great idea and added it to the app.

I also made some UX adjustments for mobile, as previously the app wasn’t very usable on mobile.

Arial ASCII Art Gallery

The Arial ASCII Art Gallery now has 1,500 different pieces. The sheer quantity of what’s in there is starting to rival some of the normal ASCII art archives out there, and I would say the quality of what’s in the Arial ASCII Art Gallery is pretty high. The biggest problem now is discover-ability.

A handful of pieces from the gallery

However, I’m not completely done populating the gallery, I’ve been holding off on talking about this until I’m done, but essentially I used Claude to help me create a script to analyze 1000’s of old AOL progs to extract out what might be ASCII art. Most of what was extracted was random characters, but there’s a lot of cool art that got pulled out too.

So I’ve been going through files and if the extracted data is in fact a piece of ASCII art, I add it to the gallery and note the artist’s name. The process has been slower than I expected, but I don’t think a lot of this stuff has seen the light of day in decades.

Anyway, I still need to finish going through the output, then I want to redesign the app, and then I want to improve discover-ability. Once I’m done all of that I’ll do a full write-up here. In the meantime you can check out the app to see the current progress. I periodically update it, and you can tell when this happens because the count at the top will update.

Snake

I’ve updated my Snake game to use TuiCss for its dialog boxes. TuiCss is a UI library for creating MS-DOS-like interfaces. I’ve been meaning to do this for a while, but at the same time I’ve been really hesitant, since the game has had the same look and feel for 18 years. However, this game is mostly here to remind me of my high school days when I would goof off. It’s just a fun little nostalgia trip, so I figured the update made sense. Earlier this year I also updated it to work on mobile.

Image Glitcher

I’ve made some quality of life updates to Image Glitcher. You can now load any type of file into the hex editor, and a number of other small updates have been made. I want to re-visit this app later to support other file types, but I’ll circle back to that later.

Monster Eyes / Main Page

Back in 2022 I made a silly Halloween themed react library, full of Halloween decorations for websites. One of the components was a set of eyes that watched the cursor as it moved around the screen. I thought it would be fun to dust those off and place them around the main site. I’ve set it up so that if you’re in dark mode, as you scroll down the page all of these eyes will open and start watching you.

It amuses me, though I have no idea what actual visitors think.

Web Apps

Adding Custom Filters to Old School Gaming Filters

Leave a comment

I’ve updated my Old School Gaming Filters app to allow you to create your own filter. You simply select a reference image, a dithering algorithm, a number of colors, a resolution, and voila, a retro looking image:

If you follow this site closely, you may know that this is actually exactly how the Palette Swap app I made a decade ago works. And somewhat amusingly, the Old School Gaming Filters app is built on-top of that old app. It’s just using presets instead of letting you pick your own inputs.

So why wasn’t this feature in the original app? Well, according to my original write-up on the app, I felt it would be too complicated and that premade filters would be easier to understand. I mentioned the Palette Swap app in passing at the bottom of the post and then promptly forgot about it. And when I say forgot about it, I genuinely forgot it existed.

When I did the UI update to the Old School Game Filters app last year I simply renamed the old folder and uploaded a new one, one that didn’t include Palette Swap. To my surprise, a week after I did this I got an email from someone asking me to please restore the Palette Swap app. I was confused, and it wasn’t until I checked the old folder that I found it and realized what they were talking about. I hadn’t thought about that app since I’d posted the original blog entry.

I restored Palette Swap, but I made a note to myself that I wanted to add its features to the main app. If someone had bookmarked it a decade ago and was still using it, maybe there was something to this custom filter idea that I’d just causally discarded.

And then, because I have a really short attention span, I kept forgetting to do the update – until today! And I think the app with this feature is waaaay better. This is really how it should have been released. It’s much more fun to create your own filters from reference images and dithering algorithms than it is to use a preset.

The outputs don’t always make sense, but they have a wonderful retro charm to them.

Anyway, if you have a moment check out the app and let me know what you think!

Web Apps

Updated Typing Speed Test

6 Comments

I’ve updated one of the oldest apps on this site: Pat or JK’s Typing Speed Test

Believe it or not, the old version was from 2008. At that time there weren’t any good free online typing tests. It’s biggest claim to fame was being mentioned in passing in a VSauce video, which was really cool. Over the years way better typing tests have been created, and I’ve debated retiring the app, but I felt with some adjustments it could be worth saving.

The new version does away with the draconian strictness of the old test, where you had to correctly type a word before moving on. There are also a number of UX improvements, including splitting the configuration between the opening title card and the results screen. Previously all of the configuration was on an easy-to-miss tab.

All of the end stats are the same, though now you get a “ranking”. This can be 1 of 16 different (mildly) humorous titles. They’re a handful of 80’s references and other silly things. I also updated the heat-map. I was originally going to use the famous heatmap.js library, but that hasn’t been updated in over 10 years. I wound up turning to Claude, which created me a modern version of the library.

It worked like a charm, though it makes me wonder if there will even be coding libraries in the future. This time last year I made a video poking fun at how AI couldn’t understand ASCII art, but today it can easily parse and understand text art. Some of my coworkers are convinced us software devs are “cooked”, but I think the job is just going to change.

Anyway, I’m getting way off track. I just wanted to make a post saying I’d made an update.

AOL, Web Apps

New UI for Chain Letter Archive

1 Comment

I’ve revamped the UI for my Chain Letter Archive.

It’s modeled after an old AOL 4.0 inbox. I used AOL 4.0 with NINA for reference when making it, as well as the 98.css project. Icons are courtesy of svgrepo.com.

Each chain letter is an email inside of the inbox, and clicking them opens up the chain letter in an email message.

The sender list is mostly just inside jokes. I debated adding more inside jokes in, like making the “Reply” and “Reply All” buttons actually do stuff, but I decided to hold back for now.

I actually really like how this turned out. When I did the original revamp last year I kept second guessing myself. You can see the old design below.

In that case I was going for a Geocities-like feel, but I think I missed the mark. The site was ugly and it wasn’t clear that it was done on purpose. Doing bad design right is actually kind of hard.

Anyway, for the new site I actually found an 2 additional chain letters that I had saved on my old geocities website that I hadn’t posted in the archive. So the archive now contains 7 letters. That’s not a lot, but I think one gets the gist for what a chain letter was after reading through a few of these. My original collection was around 10 letters, but over time the ones I didn’t post online got lost.

When I was originally collecting these I was only trying to save the good ones, which were few and far between. And then once the 2000’s hit, it seemed like these kind of letters completely disappeared.

At the time these kind of letters mostly annoyed me, but I found myself getting oddly nostalgic for them when I was putting this together. Anyway, I hope the site can provide some amusement.

AOL, General News, Web Apps

Adding TheDraw Fonts to TAAG

10 Comments

TAAG now has full support for TheDraw font files, color and all.

A little over 12 years ago, someone sent me a zip of old ANSI art fonts. I converted a handful of them to FIGlet fonts (basically the ones that didn’t use color), and added them into TAAG. I have always wanted to revisit the format though, as there were so many fonts created for it, and earlier this year I decided to go back and properly add support for it. 

TheDraw?

TheDraw was a 1980s DOS app for creating ANSI art. You can think of ANSI art as ASCII art’s more handsome sibling: an extended 256-character set instead of ASCII’s 128, along with 16 colors. Though nowadays ASCII art is made with unicode and text can be colored however you want, so these benefits are moot. But back in the days these benefits distinguished it from ASCII art. Artists made ANSI art fonts in the 80’s in the same way they would later make ASCII art fonts for FIGlet in the 90’s and on into today.

TheDraw’s font format had the advantage of color and more characters, but it was less sophisticated, and it lacked features such as kerning. It also had hard limits in certain areas. For example, fonts couldn’t be larger than 12 characters high. I would argue FIGlet’s format is better, but I do really like the color and art style of TheDraw’s fonts.

The TAAG update

I silently made the first update for this several months ago, adding the new fonts to the drop-down list but not to the Test All page. Then in May I added them to the Test All page. I haven’t heard a peep from people who use the app, but hopefully these new fonts provide some enjoyment.

I know it seems really late for me to do a write-up on this, and I’d meant to post a blog or make a video sooner, but life has been crazy (though then again, when is life not crazy?). Additionally, videos kind of need a story, and I couldn’t figure out how to frame this one.

Also updated

The AOL macro fonts in TAAG are fixed. You can now see them again in their full ’90s glory. That’s a longer story for another day though.

Also, the Arial ASCII Art Gallery has gotten some major updates and will be getting more in the near future, but again, a story for another time.

Web Apps, YouTube

Chromostereopsis

4 Comments

Chromostereopsis is an optical illusion most people experience where red appears closer than blue. Most of the time your brain corrects for it, but you can trigger the effect with certain types of images. I made a game of Lights Out around the illusion, which is a game where you try and turn off all of the squares by clicking them. To me it looks like the squares get pushed back, it’s kind of trippy. Though the effect is stronger for people with glasses that correct for myopia, which I wear.

The idea to experiment with the effect came to me back in December, when Loic Cressot (author of a few FIGlet fonts) emailed me with the idea to add a chromostereopsis filter to TAAG. I did so and I think it makes for a neat output, though in practice I’m not sure how useful this will be.

I also thought it could make for a fun youtube video topic. At the time I was working on the Image Glitcher stuff, but figured I would circle back to it. You can check out the video below.

The video isn’t really computer science related and I was worried it might flop with my audience. I was also a little worried about how it would do since it seems like around 30% of people don’t experience this illusion.

It seems to have done fine though. However, the most popular aspect seems to be the game of Lights Out that I created using the effect. I kind of wish I’d lead with that. When constructing the script, I had no idea where to place that part, so I just stuck it at the end.

Anyway, if you like it please give it a like or a hype! It definitely helps with the algorithm.

Web Apps, YouTube

Image Glitcher: An online glitch art editor

1 Comment

I’ve created a new app for this site that allows you to easily create glitch art: Image Glitcher

It’s a simple tool that combines an image preview with a hex editor that has segment highlighting for jpeg images. In the future I hope to support highlighting for other formats too. The idea is that you can more intelligently make glitches in an image file when you know what you’re editing.

I created a short video about the tool framed around the idea of what happens when you edit a jpeg in a text editor. You can watch the video below.

This video was a lot of fun to research. Weirdly the research phase has consistently been the most fun part of the video making process. Originally I was going to cover all of the main image formats in this video (jpeg, png, bmp, gif), but jpegs wound up being much more complex than I anticipated.

There’s also a lot of weirdness with the file type that I opted not to cover in the video (I wanted to keep things focused). For example, you’ll often hear that jpeg’s use the YCbCr color model (basically luminance + color), but that’s not mandated by the spec. It’s actually color space agnostic. You can actually create a jpeg where it internally stores the data as RGB values (though jpegs usually store the data in YCbCr).

You’ll also often read that the two most popular formats of jpeg – JFIF and EXIF – are incompatible with each other. This seemed really confusing to me until I saw the color coded segments in the editor. JFIF is determined by a JFIF APP segment following the SOI marker, and EXIF is determined by an EXIF APP segment following the SOI marker. Jpeg parsers should have little issue differentiating them. Though possibly even stranger, you don’t even need this segment in a jpeg. Wikipedia often strips it out.

Anyway, there’s a lot of random info I left on the cutting room floor. Maybe one day I’ll work it into something else.

JavaScript, TypeScript, Web Apps, Web Development

Text to ASCII Art Generator: Version 3.0

3 Comments

Last month I silently released a new version of my Text to ASCII Art Generator (TAAG) app, along with a new TypeScript version of its underlying library. For those of you who are unfamiliar, TAAG is an app that takes in text and turns it into ASCII art. For this latest update I decided to go with a silent release because I wasn’t sure when I’d be done re-writing the app. In fact, I still have several updates I want to do to it, but I feel like it’s in a complete enough state to blog about.

TAAG was originally written back in 2007, when I was re-learning JavaScript. For the most part, the original app did what it needed to do, and prior to this latest rewrite, it hadn’t undergone any major changes since 2012.

So… if the old app was fine, why rewrite it? Well, there were two underlying reasons:

  • I wanted to modernize the code base to make it more maintainable.
  • There were a handful of minor features I wanted to add that weren’t really possible with the app’s ancient code base (ex: better Test All page, searchable selects, dark theme). 

However, I didn’t want to make any drastic changes. I wanted to maintain the same feel as the old version. For the most part I think I was successful, though I did receive one email bemoaning the changes since they really liked the retro feel of the old version. However, I think the more polished version will be better for the site in the long term. 

Modernization: TypeScript?

I don’t think I’ve discussed my thoughts on JavaScript vs TypeScript publicly before, but I used to be hugely pro-JavaScript. I loved the freedom it gave you, I loved how I could quickly create prototypes, and I loved how versatile it was. However, over the past few years I’ve had a change of heart. Navigating gigantic JavaScript code bases (100k+ lines) can make you lose your mind. I have a pretty high pain tolerance when it comes to crazy JavaScript code, but in recent years even I have reached my limits. 

After giving TypeScript another try (I used it years ago and it caused me more problems than it solved), I’ve found it to be hugely beneficial. It helps catch mistakes that would have gone unnoticed and it makes code easier to understand. I’ve slowly introduced it at my work, and it’s now starting to make its way into some of my personal projects. 

In Conclusion

There’s something satisfying about taking an 18-year-old app and giving it new life. Hopefully it works the same and feels familiar while being more solid under the hood. I have plans for additional features and improvements, but I wanted to get something out there because I get distracted easily.  I hope you like the updated app. If you have any suggestions just let me know in the comments.

Development Thoughts, Web Apps

Fake Like Buttons

Leave a comment

This past weekend I updated my photography website to use MUI v5. The upgrade was mostly painless and while I was poking around I did a few other minor updates – the most fun being the ability to toggle Baltimore’s power grid on and off. I think I want to do more interactive stuff like this in the future. It’s only been up for a few days, but that light toggle is by far the most clicked thing on that site.

While I was mucking around in the code I also removed the faux like button that had previously accompanied each photo. The like button hadn’t been connected to anything other than my analytics, but it would shoot out confetti when clicked and fill-in to indicate that a like had been left. Why did I have fake like buttons on the site? Good question…

Back at the start of the year I had the following shower thoughts (those “profound” thoughts that only come to you while you’re in the shower):

  • Have like buttons become the dominant language of the internet? Do people click them to indicate they like something? Or is the clicking of a like button dependent on factors like the platform it’s attached to?
  • How often do people unlike things? And what would happen if a website became defensive and started arguing with you about taking away a like?

I found the second thought especially amusing and after laughing about it to myself I decided I would put something into my new photography website to test these ideas out. And just to be up-front – and before I get too far into this story – I’ll say that the results of this “experiment” weren’t very profound (as are most shower thoughts), but maybe it offers a few nuggets of wisdom somewhere.

Anyway, I launched the new photography site this past February and over a 7 month period 3,333 unique people visited it. On average they spent 1 minute and 13 seconds looking around and in total left 236 likes. This indicates to me that people don’t click like buttons to communicate they like something (my photos aren’t that bad, right? right??). The decision to click seems to be more nuanced. It could also be that people were suspicious of a like button that didn’t have an obvious association.

In retrospect this seems pretty obvious. When I click the thumbs up button on a YouTube video, I do it knowing I’m helping the creator and/or helping the algorithm so it can provide me with personalized recommendations. If I saw a random like button on a website I don’t think I would click it unless I knew what the side effects were.

The second part of the experiment produced another non-shocking conclusion: unliking is pretty rare. I had set things up so that if someone attempted to unlike a photo, the site would popup with a notification letting them know they must have made a mistake and not to worry, the photo was still liked. If the user continued to press the like button, the site would become increasingly frustrated in its notifications to the user until finally calling them a filthy bastard and letting them unlike the photo. 

I laughed at the thought of this happening and after I launched the new site I checked my stats every few days to see if such an event had occurred. I figured that after it happened a few times word would get around and I would see a whole bunch of unlike events in my analytics. However, no such thing happened. After a month I realized that unliking something is a very rare and if I ever wanted a chance of someone seeing my gag I would need to make some alterations. To help with unlikes I decided to add a confetti explosion animation to the like button. I figured some visitors would want to see it more than once, leading them to unlike and re-like a photo.

Over the course of 7 months, 27 unlike events occurred, and only 11 of those made it to the final message (which took 6 clicks). Nearly all of these were me, so this gag was maybe too confusing and too hard to find ?.  As for the remaining 16 unlikes, I assume that most of those were people who just wanted to see the confetti animation again. These people were probably super confused by the message that popped up, and they probably thought I was some super sensitive prude or something. In hindsight, it does seem like an odd gag to put in a fine art photography website.

If there’s anything I learned from this it’s probably that unlikes are rare and that people like with intension – they aren’t going to click something if they don’t know what it’s for. What started as something that had me laughing in the shower ended with me realizing I had made something that was amusing only to me. I suppose it’s probably best to leave shower thoughts at the shower.

Web Apps

Using Dithering to Create Old School Gaming Filters

7 Comments

Recently I’ve been reading up on image dithering. It’s kind of cool. It’s a way of transforming an image into a smaller color space while still simulating as much color depth as possible. It has lots of practical uses – printing, displaying images on screens with limited colors, etc – but I realized it could also be used to inject images a heaping dose of gaming nostalgia. I couldn’t resist doing a quick proof of concept, so I’ve created a new web app that will transform an input image into what it may have looked like on an old gaming console by way of various dithering algorithms. For example, below you can see what I may have looked like on a Game Boy.

As you can probably infer from what I said previously, the app is actually pretty simple. All it’s doing is resizing the image and applying an image dithering algorithm to it.

There are various image dithering algorithms, but most work by trying to intelligently add noise to areas of an image where it doesn’t have the right colors in its reference palette. This noise can help simulate the missing colors. One place you may have seen image dithering is in gif files, which typically have small color palettes. In fact, the noise you see in many gif files is commonly due to the dithering algorithm that was applied to it. Without dithering, these files would suffer from color banding, which can be pretty ugly. In the video below you can view comparisons of what undithered vs dithered images look like given color palettes of various sizes.

As you can see, dithered images are able to look much better with far fewer colors. For the new app, I chose to use the popular Floyd-Steinberg dithering algorithm for most of the results (and used the wonderful RgbQuant.js library for this), and also used Ordered Dithering for a few other cases (I couldn’t find a good implementation of this algorithm, so I just wrote my own version based on what I read here). If you play around with the app, you’ll notice that the results with ordered dithering are much worse. I only included this option because it appears to be what the Game Boy Camera used. I’m not 100% sure on this, but the cross-hatch pattern found in many Game Boy Camera images is indicative of ordered dithering.

I should also note that while the new app can give you an idea of what an image may have looked like on an old gaming console, some of these filters wont be exactly 100% true to life. For example, the NES is capable of displaying around ~54 different colors, but for a single sprite it could only display 4 colors. So it wouldn’t really be realistic to expect an NES to display an image like this:

For it to display that image, it’d have to be composed of a bunch of tiny sprites that overlapped, and I’m not sure if there would be any limitations when doing that. So these filters are really just best guesses, and mostly just for fun.

Lastly, I’ve also put in an option to create output without dithering. In some cases this produces a more realistic gaming result, and sometimes combining dithered and non-dithered images can give a better result, like this Sonic image: (I combined the dithered and undithered versions in photoshop, masking in the areas I liked from each version).

Honestly I’m not sure what practical use this app can have other than maybe a few minutes of fun, but I hope you enjoy it. If you’re interested in learning more about dithering algorithms check out this blog post on the subject, it covers in detail how several of the more popular ones work.

  • Check the app out here: Old School Gaming Filters
  • Create your own filter here: Palette Swap (this was actually my original idea, but it takes a little more work and I found pre-made filters were a little easier to work with)