Chris’ Corner: Creative Coding

Jake thinks developers should embrace creative coding again, which, ya know, it’s hard to disagree with from my desk at what often feels like creative coding headquarters. Why tho? From Jake’s perspective it’s about exposure.

While many designers and developers have been working within familiar constraints, browsers have undergone a quiet revolution. The web now supports features like container queries, advanced scoping and inheritance, and responsiveness to user preference. It’s gotten much more sophisticated in terms of color, typography, dynamic units, layouts, and animation. Yet so many young designers and developers I talk to as a Developer Advocate at Figma aren’t aware of these possibilities

Creative coding can be coding under whatever constraints you feel like applying, not what your job requires, which might just broaden your horizons. And with a twist of irony make you better at that job.

If you think of creative coding as whirls, swirls, bleeps, bloops, and monkeys in sunglasses and none of that does anything for you, you might need a horizon widening to get started. I think Dave’s recent journey of poking at his code editor to make this less annoying absolutely qualifies as creative (group) coding. It went as far as turning the five characters “this.” into a glyph in a programming font to reduce the size, since it was so incredibly repetitive in the world of Web Components.

How about some other creative ideas that aren’t necessarily making art, but are flexing the creative mind anyway.

What if you wanted every “A” character automatically 2✕ the size of every other character wherever it shows up? That would be weird. I can’t think of an amazing use case off the top of my head, but the web is big place and you never know. Terence Eden actually played with this though, not with the “A” character, but “Any Emoji”. It’s a nice little trick, incorporating a custom @font-face font that only matches a subset of characters (the emojis) via a unicode-range property, then uses size-adjust to boost them up. Just include the font in the used stack and it works! I think this qualifies as creative coding as much as anything else does.

Adam covered a bit of a classic CSS trick the other day, when when you hover over an element, all the elements fade out except the one you’re on. The usage of @media (hover) is funky looking to me, but it’s a nice touch, ensuring the effect only happens on devices that actually have “normal” hover states as it were. Again that’s the kind of creative coding that leads fairly directly into everyday useful concepts.

OK last one. Maybe channel some creative coding into making your RSS feed look cool? Here’s a tool to see what it could look like. It uses the absolutely strange <?xml-stylesheet type="text/xsl" href="/rss.xsl" ?> line that you plop into the XML and it loads up like a stylesheet, which is totally a thing.