Coding + Storytelling
Everything here is at least 95% written by a human.
At least, I'm pretty sure I'm not an AI. I'm not... right?
I want to probe how creative AI can be, so I tried coaxing it into inventing novel puzzles as a way to qualitatively measure this. In the end, I was impressed with the puzzle Claude Code was able to make.
I document the dev work and algorithm I used to write a live captioning app. This has some good info on how to use python to stream audio, buffer it, and transcribe it with AI.
I have a lot of experience building websites. So, I put AI to the test: how much of what I do can it now do? Here, I break down some concrete lessons I learned about Vibe Coding.
I liked the game, and to become better at interactive storytelling, I decided to analyze what I liked about it and what could improve, creating lessons for the city I'm personally building as a long-term project.
After having hard-specced into engineering development for so long, I am branching some of my skills into art. Of course, much of this is answering what it means to treat development as art.
I delicately and deliberately prove, beyond any shadow of a doubt, that the prolog programming language boosts productivity by over 5σ.
Just bought a custom domain for your github pages site? Be careful! Data in the old domain does not automatically transfer. How do you migrate local storage data from one domain to another?
Instead of saying "dang", Xenoblade's characters say "Queen's spleen" or "Queen's paninis". There's quite a long list of these... what are they all, and how do we find them in the game's script?
Sensescapes aren't in the dictionary. So what are they, and how can they help with writing?
When you code, accounting for the different kinds of errors that can happen will save a lot of future time debugging, as stabilize your program significantly, and result in fewer unhappy end users when things don't go as planned.
You might have seen 3D card flips on websites before, but have you seen one that's anatomically correct? Let's see how we can spice up the original card flip animation to be more realistic and satisfying.
So there are different shades of red and different shades of blue. But which color has more shades? What even is a "shade" to begin with? By quantifying color in a way that accounts for how we perceive color, we can finally get to the bottom of this age-old question.
On a personal project, I attempted to use a concept called a "presentational primitive", which is basically a configurable CSS class, rather than all components and props. It turns out to be a nice way to codify readable, reusable, and discoverable styles.
The aria-label attribute is useful for assigning an accessible name to something, but it's also easy to overuse. Let's look at three ways NOT use aria-label to improve website accessibility.
Many design systems use t-shirt sizing (sm, md, lg) to name size-related concepts. But what if instead we embraced science and used planets, atoms, and clouds to name css variables instead?
Using CSS to style a label when its input has focus is tricky! Thankfully, Stackazon has rated and reviewed five different solutions for browser compatibility, accessibility, and complexity to see which serves the most use cases.
On a recent project of mine, I was trying to create a component with some randomized parameters in SvelteKit. To my dismay, SvelteKit's server-side rendering was causing a problem! Let's talk about what the problem was and how to render random numbers with SSR.
People find their soulmates through dreams they have of each other, but all I get are nightmares of darkness and screaming.
Ever got a text from someone and couldn't tell if they were being sarcastic or not? Kinda sucks that we can't convey facial language or tone through text... or can we? Let's see how we can use text (and sometimes code) to make text sarcastic!
The toggle switch is sure a common thing on websites. It'd be super nice if it were its own HTML element... Well, with web components, we can actually do this! Let's build a toggle switch element while at the same time... piece together a light bulb from scratch?!
A few weeks ago, some devs started an unspoken contest to see who can make the best typewriter animation. I decided to join in with two entries: one using no web technologies, and one using all of them.
Accessibility is very broad, but recently Inclusivity Hub wrote an article summarizing 101 valuable tips which can be quick wins for anyone getting started. I was able to personally improve this website in five different ways because of it!
On a webpage, pixelart can be scaled up using a CSS property called image-rendering. However, if you look at its browser support, you find a paradox, that browsers support seemingly opposite values. So if you want to upscale pixelart, how do you get around that paradox?
Recently, I learned that I had been writing the wrong alt text for my images. So what makes for good alt text, and why is this important for accessibility? Thankfully, the HTML Spec has had the answer all along.
In a game I recently made for a game jam, a balloon bounces on rubber bands. That bouncing mechanic is perhaps the most important part of the game, so I spent a good deal of time perfecting it. Here, I walk through the process of creating the bounce of Rubber Juggle with a domain-driven approach!
I very recently added an Art section to this website. I'm not really an artist, but as encouragement to improve and embrace this side of me wanted to openly share stuff I've drawn (and will draw) over the years.
Kotlin handles concurrent programming using a paradigm called structured concurrency and a mechanism called coroutines. To me, these things felt very different from other languages, so I want to talk about how understanding structured concurrency helped me know how to write Kotlin coroutines.
If you've worked with event-driven architectures, you might have heard of this thing called Kafka. Let's explore how Kafka uses topics, partitions, and consumer groups to facilitate events between producers and consumers, through the narrative of Pat, Carol, and Kirk!
Testing in React can sometimes feel non-trivial. On the one hand, we want our tests to be comprehensive and accurate. On the other, we don't want to accidentally make our components immune to change. React devs have honed the art of testing components through the years, and I think we can boil down our collective experience into a single, terse principle.
Dystopias are common in fiction and commonly involve corrupt governments, societal unrest, looming danger, and so forth. Using Maslow's Hierarchy of Needs, we can actually see what's at the heart of a dystopia and build numerous possible worlds.
Receiving feedback from others is the principle way we can professionally grow, but these conversations can be occasionally sensitive. I tend to find feedback framed as either positive or negative, but I think we can improve our approach to feedback by thinking of it in three types instead: Affirming, Adjusting, and Advancing feedback.
Using cryptography, you can scramble your message so that nobody except the recipient can read it. Nice and secure! But what if we made it so that nobody except the recipient even knew the message existed in the first place? That's steganography! See how you can steganographically embed secret messages into images by reading on.
It is not always clear what in React components should be tested or where those tests should go. I find that thinking of two types of tests, render tests and behavior tests, helps in figuring out what should be tested and how. Furthermore, having these two testing types encourages proper separation of presentation and state.
Though people generally desire becoming more creative, it's hard to know where to start. After all, "creativity" can be a bit of a nebulous topic. However, I've found that one small trick, deferring judgement, can get you a long way there.
The 9-Dots is simple: connect all 9 dots with 4 connected lines. But in spite of its simplicity, it is very hard to solve. Let's find out why the 9-Dots puzzle is so hard to solve and see how we can use it to improve our creative problem solving abilities!
A React component can be made of different files, and it can be tempting to organize these files into individual folders based on their type (CSS, state, presentation). However, this approach has some drawbacks that can be avoided if we "folderize" the entire React component instead.
"The enemy knows the system." These famous words uttered by mathematician Claude Shannon serve as a guiding principle for cryptography. It turns out the same principle applies to steganography as well.
The Traveling Salesman is a notorious computer algorithm problem. Instead of using the popular Greedy Method to get an approximate solution, I attempt an alternative algorithm of my own contrivance.
The Traveling Salesman is a notorious computer algorithm problem. Instead of using the popular Greedy Method to get an approximate solution, I attempt an alternative algorithm of my own contrivance.
Derek Muller of Veritasium published a video describing the role of teachers in an age of ready-access information. If all teachers do is transmit information, then yeah, the Internet makes them obsolete. But in fact, their role is far more important.
Unlike AS3, Haxe has a feature called type inference that allows you to forgo specifying the types of variables or functions. After having used the language for a month, I've come to realize that type inference can really simply your code without losing any information.
Haxe shares many similarities with the Actionscript 3 (AS3) language, and therefore AS3 developers like myself can pick it up rather easily. There are, of course, some immediate differences that should be noted if wanting to write Haxe code.
Flash is dying. The rise of HTML5 has made the old technology obsolete, meaning that Flash programmers like myself must adapt and find alternatives. Thankfully, I've discovered Haxe and OpenFL!