As Generative AI has become a thing, I've been experimenting with vibe coding to learn how I could use this tool (and have something to show to others on my experimentations).
These are small, home-cooked single-purpose tools that I've built over the past few years. Some, I think they'd be fun to develop into more public tools. Others, they're just for me.
Each provides some sort of value that I looking for across the internet but wasn't able to find through my searches (and I tend to be quite good about searching on the internet for things). These fill those gaps of what I was looking for, and are little tools I use somewhat regularly (or want to continue expploring & building out).
- /play/pasta: A simple pasta portion calculator using European portion sizes, pasta shapes, use types, etc. to help cook more appropriate sizes of pasta.
- /play/flywheel: something I wanted to build for the longest time, but a flywheel generator to help build flywheels to generate conversation points with others, as we work through business challenges & foci. Big thing from Booking.com Era.
- /play/leading: a "drop the font in" tool to help define the best line-heights for that specific font at specific sizes and measures.
- /play/palette/dist: a palette generator that outputs accessible palette gradients with my
--lighestto--midto--darkestsemantic gradient, as well as.csv's of the accessible color pairings,.svg's for copying/pasting into design programs, and color-mixing with the "white" and "black" of choice for more refined & personalized palettes. - /play/contrast-checker: inspired by Eight Shapes' contrast grid tool, except, it allows the colors to be tweaked & refined to get the most amount of accessible color contrast ratios across the palette.
- /play/riso: trying to replicate theh riso effect that, one day, I'd like to develop into an actual library and resource for others to use. I really like the patina of more physical printing mediums, and want to try and make that more accessible on the web.
- /play/scale: this is a simple calculator with two modes—multiplication and scale. Specifically made as a tandem to James Gilyead's & Trys Mudford's utopia.fyi, but for seeing numbers that are a part of the scale but not in the +/-10 range that that tool's limited to. I try to keep sizes related to the typographic scale when designing, so having larger sizes for spacing rather than just typography is the goal.
- /play/share-palette: this is a tool to give more details & data into an
.svgimage, having all of the color data forhexa,rgba,hsla,oklcha, andlaba, as well as their name's, alpha's, categories—all for identity system uses. Also includes exports of accessible contrast pairings across all the colors. - /play/moses-harris: a color mixing tool to see how three colors mix together, using Moses Harris' 18th century color wheel, applied to web color.
- /play/color-mixer: to test how different colors mix in different color spaces via hex-code.
- /play/color-converter: a simple way to inpput a color and see the value in all the other web color spaces