I’ve been working on a redesign of hanafuda and hwatu cards to make them more approachable for beginners. Here’s what a recent iteration looks like.
There’s two main goals with the redesign. First is to make the cards more vibrant and interpretable than the traditional black-heavy artwork. Second is to give some guidance on how the cards should be used by adding a caption with the plant species, month, and value each card represents.
This is a work-in-progress. I’ve improved on the captions since this version. As always, I welcome your feedback.
MotivationHanafuda and hwatu cards are gorgeous pieces of tiny art. These playing cards from Japan and Korea respectively entice adults and children alike, prompting them to ask, “how do you play?” That’s when you take a deep breath.
Credit: Roy Levien
In broad strokes, hanafuda and hwatu cards have a scheme similar to poker cards. Poker has 4 suits — hearts, diamonds, clubs, spades — and each suit has 13 face values: Ace, 2, 3,… Jack, Queen, King.
Hanafuda and hwatu cards are transposed. They have 12 months of the year, and each month has 4 cards of different value, ranging from bright (20 points), animal (10), ribbon (5), to chaff (1).
The months are represented as plants: March is cherry blossom, October is maple, November is willow, and so on. Much of the symbolism of the plants, as well as the animals and other objects found on these cards can be lost to Westerners, myself included. It doesn’t help that leaves and grass are traditionally painted as black, making the art all the more inscrutable. And that all 48 cards have unique artwork. But part of the fun is learning about them.
The trouble comes with the inconsistency in their values. You’d think easy peasy: each month gets 1 bright, 1 animal, 1 ribbon, and 1 chaff card. But not so fast. Each month is made up differently to spice up gameplay. For example, January has 1 bright, 1 ribbon, and 2 chaffs. February has 1 animal, 1 ribbon, and 2 chaffs. December has 1 bright and 3 chaffs.
Simply refer to the drawings on the cards, you say. But then you learn an animal is not an animal — sometimes it’s a bright, as in the case of the crane. And objects like the wooden bridge and drinking cup are animals.
And don’t get me started on the convoluted scoring system for Go-Stop, the predominate way that Hwatu is played in Korea.
In Go-Stop, the cup and bridge cards can be played as either animal or double junk.
Needless to say, keeping straight the months, and more importantly for gameplay, point values poses a barrier. This redesign is my attempt to address that.
There have been plenty of alternative designs, like this Nintendo deck with Mario characters. While fun, they don’t clarify the meaning or value of the cards for newcomers.
CreditsThe artwork is designed by Louie Mantia, who’s also the talented designer behind the gorgeous Junior Hanafuda decks.
The printed the initial runs through Make Playing Cards. Traditional hwatu cards measure about 35mm x 54mm and are made of thick rigid plastic that makes a satisfying sound when slapped down on each other. Mine are made of thinner flexible plastic and are slightly larger at 44mm x 89mm.
For the 2024 Reddit Games and Puzzles Hackathon, I submitted 575, a daily word game where you compose a haiku using the words of the day.
How to Play 575Each day, a new set of words is posted. Players can add any words from this bank to their poem. Your poem is limited, however, to three lines with 5, 7, and 7 syllables in the traditional haiku format. The challenge is to pen something beautiful or witty within these constraints.
After you’ve finalized your poem, you can give it a title and post it as a comment in the thread. Other Redditors can view and upvote your creation.
Try 575 out for yourself on the r/575game subreddit.
Play 575Or watch the video trailer:
InspirationsThe unique design challenges of a Reddit game are that it needs to be social, short and sweet, but replayable.
One of my inspirations were magnetic poetry tiles you combine to create unique messages. Using these, you can express yourself and be creative by simply selecting and arranging individual words on your fridge.
I settled on the 5-7-5 format of Japanese haikus to provide additional constraints, which makes it a more game-like experience. It also puts a ceiling on the playtime required.
The idea of having the word bank that changes daily came from popular word games like Wordle and Spelling Bee which give players a reason to keep coming back.
Implementing on DevvitUntil this hackathon, I didn’t realize the rich support for interactive posts that Reddit’s Developer Platform (playfully called Devvit) provides.
The Devvit boilerplate gets you up and running with a basic app, and supports block posts and a newer webview option. I opted for the latter.
There were a few technical issues I ran into that were unique to developing for Reddit.
First is that the space you have to work with is limited. Not only can the viewport be small, as in the case of mobile, but you have to account for the additional “chrome” of Reddit’s own interface. Not easy to squeeze 100 words in the remaining space.
For now, interactions on Devvit are limited to clicks — more advanced gestures like dragging aren’t well-supported. Fortunately, the click-only approach turned out to mesh with 575 just fine.
In webview, I found no way to detect whether the user was in light and dark mode. This meant a single set of styles had to look decent in both. Something for the API to support down the line.
Future Plans575 could be improved by refining the pool of words the daily word bank draws from to strike a balance in terms of fun and usable words.
The word bank could run with themes, for example holiday words this time of year, or silly or provocative or timely themes for other occasions.
Lastly, there’s potential to add 575 to an established subreddit like r/Poetry as a weekly challenge.
Hackathon ResultsBack to the hackathon, I’m pleased to say 575 was recognized with the UGC Award for best use of user-generated content (i.e. Reddit posts or comments) in a game.
The hackathon attracted nearly 2000 entrants, with many, many impressive entries. My favorites were Emoji Charades, Pixel Together, and Laddergram.
Way back when, vertically centering an element was a tall task. Setting consistent gaps between elements took some thinking and several lines of code. Then came flexbox and grid. Both were new and, at the time, magical features of CSS. Those were the times in which I released Flexbox Froggy and Grid Garden.
Well now we have a new CSS layout module on the horizon: anchor positioning.
And with it comes the release of my new coding game, Anchoreum! Play it for free today.
AnchoreumLike its predecessors, Anchoreum is free to play with no registration required at anchoreum.com. Take a quick dive or refresher whenever you feel motivated.
You can also play Anchoreum for free on Codepip. This is my platform of 19 coding games that touch on topics like CSS selectors, JavaScript array methods, regular expressions, and SQL. Register a free account there to save your progress and get access to 10 bonus levels.
In Anchoreum, you use CSS anchor positioning to help a museum set up its new exhibit by affixing labels to each anchor display. It’s inspired in part by this nifty anchor tool from Una Kravets.
To get a taste of the game, here’s the video trailer.
What Exactly is Anchor Positioning?The best way to answer to this is to play Anchoreum. But in a nutshell, CSS anchor positioning is a new layout module that let’s you position and size one element relative to another. There are also options to set fallback behaviors when the element is scrolled off the page. You can tether one element to another, useful for building components like tooltips, dialogs, and dropdown menus.
It introduces new CSS properties like position-area, position-anchor, anchor-name, position-visibility, and position-try, functions like anchor() and anchor-size(), and the anchor-center value. Take a deep dive on MDN.
How’s Support?Anchoreum can be played on Google Chrome or Microsoft edge as of today, and on other browsers as they implement CSS anchor thanks to feature detection.
CSS anchor is a bleeding-edge feature. Support is far from 100% — at the time of this writing, it sits at 49%. And as far as I can tell, no suitable polyfill exists. Here’s hoping Firefox and Safari get on board soon.
My son’s current obsession is the New York Times word game Spelling Bee. Every day, he looks up the letters (he says it’s gonna be a good one if the puzzle has e & d, or i & n & g). Then it’s time to work our way up the ranks to “genius”.
Our routine is to put the daily puzzle on our whiteboard. We keep the honeycomb grid drawn on, and fill in the letters every morning. The problem with this is the hexagons frequently get smudged, and become crookeder and crookeder each time they’re redrawn.
To address this, I 3D printed the honeycomb grid. The model is a simple one I made in Tinkercad. An arrangement of hexagons, the Spelling Bee mascot on top, and insets on the back for neodymium magnets that can be attached to our magnetic whiteboard.
I uploaded this model to Craftcloud and ordered it in yellow PLA.
When the print arrived, I inserted in the magnets. Unfortunately, the magnetic force of my whiteboard is weak due to its glass surface layer, and the 4mm magnets I used weren’t quite strong enough. That’ll have to be worked out in v2. I ended up reinforcing the bond with reusable double-sided tape. Here’s the result.
On a side note, if you’re a developer, check out my code-themed homage to another NYT word game, Connections. Be warned, it’s a challenge.
Skeuomorphism taken to the extreme rarely works. But it can be fun. Like a turntable interface for playing YouTube music or a rotary telephone dial for number inputs.
For buttons, skeuomorphic design usually takes form of a physical switch or push button. But what about one that takes the form, and even the behavior, of that other button — the sartorial kind?
Enter Buttonhole, the UI button you can unbutton.
DemoDrag the button below and observe the change in value:
DetailsButtonhole is implemented as a custom element. Include buttonhole.js on your page and start using the HTML element <button-hole>:
<button-hole buttoned="false"></button-hole>
Besides dragging the button, you can set the buttoned attribute to true to button the button, and false to unbutton it and return to its initial position.
The element can be customized by setting the following CSS variables:
--buttonhole-bg-color-left: rgba(0, 0, 0, 1);--buttonhole-bg-color-right: rgba(0, 0, 0, 0.7);--buttonhole-button-color: yellow;--buttonhole-button-size: 2.5rem;--buttonhole-hole-size: 3rem;
Go on and ditch that dull checkbox!
Can you play videos natively through CarPlay? That is, without jailbreaking your phone or buying expensive hardware. The short answer is, no.
The longer answer is, poorly.
Poorly as in, slice up a video’s audio track, treat each slice’s album art as a video frame, and play it back as a gapless album. How well can this simulate video? What follows is my experimentation with this hack.
Note: Apple restricts video from CarPlay for a reason. Keep your eyes on the road while driving.
From Music Videos to SlideshowsFor my first test subject, I used the music video for A-Ha’s 1985 classic Take On Me. For my scalpel, I grabbed FFmpeg, the ultimate open source tool for manipulating audio and video.
I started ambitious, splitting the song’s audio track into 100-millisecond segments. This netted 2,271 MP3s and a theoretical frame rate of 10fps. Each MP3’s cover art was a still generated from its video segment. The MP3s were then loaded onto an Apple Music playlist and synced to CarPlay.
Predictably, this playlist stalled. The Music app had trouble playing a single MP3.
I bumped up the segments to 1 second. Lo and behold, Apple Music was able to start this playlist. Both the song and music video were recognizable now.
Yet, it struggled. The biggest hiccups were in the transition from one MP3 to the next. Tracks would start too soon, leaving a tiny but perceptible gap of silence, or too late, skipping a beat. Sometimes the player would freeze.
Next I tried 10 seconds. Much improved, but by now the experience was less a video and more a slideshow. And the transitions between tracks still wasn’t perfectly smooth. Some tracks also suffered from pops and squelches at their start. This was the case on CarPlay, on iPhone, and on Mac.
Switching from a lossy format like MP3 to a lossless one — ALAC (Apple Lossless Audio Codec), fixed most of this. But it introduced even worse staticky noise at the end of a few tracks.
Trying to diagnose all this — was it the encoder or the player? — I played the same MP3 and ALAC files through mpv. The MP3s were better, and the ALACs were flawless!
Apple Music, not the encoding process, appears to be the root of the problem. The part I have no control over.
My fears were confirmed when I tested Abbey Road, a gapless album purchased and downloaded from the iTunes Store. During the side 2 medley, I heard those same gaps.
This was about as a good as I was gonna get.
Generating Lyrics from SubtitlesWith full-motion video out of reach, I pivoted from music videos to lyrics. This is actually a feature I’ve wanted in CarPlay. Who doesn’t want to host their own carpool karaoke?
As a quick test, I sliced up one of those lyric videos with a cheesy Hawaiian sunset background from YouTube. The text was a tad small, but the results were promising.
I took it a step further and generated my own images, keeping the stills from the music videos, overlaid with lyrics plucked from the associated SRT (SubRip subtitle file). SRTs contain timestamps for each line of the lyrics, which I used to mark the segments.
Success. But judge for yourself. Here are videos of it in action.
Judy Garland’s Somewhere Over the Rainbow:
And Encanto’s We Don’t Talk About Bruno:
Flexing FFmpegNone of this would have been possible without FFmpeg. Using only FFmpeg, I was able to:
Here’s the full shell script if you want to try it out. To all the FFmpeg pros out there, please suggest any improvements to the code.
```
``` Next ChapterTwo other avenues worth exploring are audiobooks and podcasts with chapter artwork. Wonder how far they could be pushed.
My latest experiment is Needledrop, a turntable interface for playing music from YouTube. Enjoy chill vibes as you spin a virtual vinyl of your favorite album from YouTube. You can try it for yourself here: … Read more
The Obsession My family gets competitive with card games. Our latest obsession is Dutch Blitz, a fast-paced game that seems somewhat regional due to the Pennsylvania Dutch influence. To give you an idea of just … Read more
Chess is a continuously evolving game. Technically. There have been many rule changes, but each one has taken centuries to be introduced and widely adopted. That might all change though with the latest work from … Read more
If you’re into tools — think hammers and drills — you’re probably familiar with the extremes people go to protect their prized possessions. The most popular system right now, based on my hours watching carpenter and electrician … Read more
After 65 years at Mad Magazine, comic artist Al Jaffee announced his retirement. Jaffee was best known for his Mad Fold-Ins, where folding the page would reveal a hidden message in the artwork. Plenty of … Read more
I’ve made a Chrome browser extension called No Scary Parts. It automatically skips the scary scenes in family movies on Disney+, for the sake of your sensitive kids from age 1 to 100. Install it … Read more
So you want a different language keyboard for your MacBook Pro. And it’s too late to pick that option at checkout. Apple Support won’t be much help here. They won’t change your keyboard language after … Read more
At the Overwatch League Grand Finals in Philadelphia, attendees received white wristbands that blink different colors in sync with each other during the event. When the San Francisco Shock won a round, they flashed orange … Read more
In the course of developing Campus Arrival, a WordPress site that provides school-specific packing lists, we added a feature to suggest nearby universities. When viewing a school’s checklist, this feature displays other, nearby colleges. When … Read more
Recently I’ve been working on The Beautube, a site that integrates video tutorials with details about the products being mentioned in the videos, specifically in the realm of cosmetics. This project has presented numerous challenges … Read more
With the era of the humble unstyled and unscripted input field behind us, there’s increasing variety in how monetary inputs work on the web. And this inconsistency can lead to big mistakes. Take two cases … Read more
I just finished binging the latest release of Terrace House, a reality TV show from Japan. If you’re not familiar, Terrace House is hands down the slowest and quietest reality television you’ll find, although not … Read more
Welcome to another installment of the collective nouns survey. This time we focus on Overwatch, following surveys for Team Fortress 2 and Starcraft. In Overwatch, there are 27 playable heroes so far, each with unique … Read more
I recently got a new phone that supports wireless charging, allowing me to switch out my rather hefty clock radio dock for a teeny wireless charging pad, continuing the minimalist march in my living room. … Read more
The Problem The clutter. While I admit this setup is cleaner than most, there’s still the white power strip peeking out and the Nintendo Switch obscuring a corner of the TV. Then there’s the random … Read more
I’m pleased to announce Grid Garden, a sequel to Flexbox Froggy. This time, you’ll learn about CSS grid, the hot new layout module, and cultivate a carrot or two in the process. Grid is cutting … Read more
Last week, a fun article titled fitteR happieR crowned the most depressing Radiohead song as True Love Waits. This was determined by a “gloom index” calculated with Spotify’s valence metric — which measures the musical … Read more
From deep in the vaults, here’s an app called QuickLine that I made and then promptly forgot about in 2014. It’s a Mac utility for quickly saving and launching terminal commands. QuickLine is made with … Read more
It goes without saying that Stack Overflow is an invaluable resource for any coder seeking help. This is in large part because they enforce stringent guidelines such as sticking to factual questions and answers. As … Read more
So here’s a fun but useless trick: mimicking Pokemon Go’s battery saver mode on the web. For the few who missed the craze, Pokemon Go dims your phone’s screen when you turn it upside-down. With … Read more
Footnotes An xkcd tribute inspired by what has become a meme. Also inspired by all things recursive like We Become What We Behold and xkcd itself. Made with the official xkcd font. Can you guess … Read more
Fidgeting is a natural impulse that seems to relieve our anxiety and aid us in contemplation. It often involves mindlessly interacting with everyday objects like stones, pen and paper, bubble wrap, and more. Of course … Read more
Since Steve Job’s return in 1997, Apple has been bold about dropping legacy I/O standards, on a knife edge between marching the state-of-the-art forward and convincing the world to follow suit. It’s been the same … Read more
A bad web form sparked a series of increasingly absurd designs for inputting phone numbers, including an incrementer, slider, random number generator, and very large table. Here’s a good rundown of the solutions developers came … Read more
I’ve created a game for learning CSS flexbox called Flexbox Froggy. The goal of the game is to help the frogs get to their lilypads by writing CSS code. See if you can beat all … Read more
Even if you’ve never watched an episode of The Joy of Painting, there’s a good chance you’re familiar with artist Bob Ross, with his trademark afro and “happy little trees”. But if you’ve seen his … Read more
As of this month, 25 percent of all websites are using WordPress, according to W3Techs survey. This ubiquity was one of the leading factors in choosing WordPress as the platform for Snowball. Of course Snowball’s … Read more
I just returned from another great Mozilla Festival. For most of the attendees, Mozfest seems to be a chance to kick back and celebrate the daily work they do with their teams. For me, it … Read more
As web developers, the deal is that we try to support our users on all the different platforms they might use to view our site. Generally speaking, that spans everything from the latest mobile devices … Read more
Like most web developers, Google Fonts is an indispensable resource for me. What would otherwise be a choice between sticking to a small handful of web safe fonts or wrangling WOFFs, OTFs, and TTFs is … Read more