Finding the Queen's Paninis
Anything ElseInstead 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?
Posts
Sensescapes
StorytellingSensescapes aren't in the dictionary. So what are they, and how can they help with writing?
Don't forget to design for errors
Software EngineeringWhen 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.
A (more) realistic card flip animation
Web DevYou 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.
Are there more shades of red or blue?
Web DevSo 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.
An CSS Idea: Presentational Primitives
Web DevOn 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.
How to NOT use aria-label
AccessibilityThe 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.
Using Astronomy, Chemistry, and Meteorology to Name CSS Variables
Web DevMany 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?
Styling a Focused Input's Label
software engineeringUsing 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.
Server Side Rendering a Random Number
Web DevOn 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.
Microstory: Darkness and Screaming
StorytellingPeople find their soulmates through dreams they have of each other, but all I get are nightmares of darkness and screaming.
Making Sarcastic Text, with and without Code
Web DevEver 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!
Making a Toggle Switch with Web Components
Web DevThe 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 Typewriter Battle Between Devs
ProjectsA 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.
A Resource: 101 Accessibility Tips and Tricks
AccessibilityAccessibility 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!
Pixelart and the image-rendering Paradox
Web DevOn 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?
Image Alt Text, the Way the Spec Intended It
AccessibilityRecently, 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.
The Bounce of Rubber Juggle
Game DevIn 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!
My Art Posted
ProjectsI 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.
Understanding Kotlin Coroutines with Structured Concurrency
Software EngineeringKotlin 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.
Meet Kafka
Software EngineeringIf 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!
The What, How, and Why of Nicely Testing React Components
Web DevTesting 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.
A Hierarchy of Dystopias
StorytellingDystopias 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.
Three Types of Effective Feedback
Anything ElseReceiving 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.
Steganography
Software EngineeringUsing 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.
Two Ways to Test React Components
Web DevIt 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.
Enhancing Creativity by Deferring Judgement
CreativityThough 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.
Connecting Dots and Unassuming Assumptions
CreativityThe 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!
Folderized React Components
Web DevA 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.
Shannon's Maxim and Steganography Segmentation
Software Engineering"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 Blue and Gold Dress
Anything ElseThe 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.
Solving the Traveling Salesman with Radial Segmentation
ProjectsThe 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.
Veritasium: This Will Revolutionize Education
Anything ElseDerek 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.
When to use Type Inference in Haxe
Game DevUnlike 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.
AS3 to Haxe Conversion
Game DevHaxe 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.
Time to Learn Haxe
Game DevFlash 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!