I’m making this into a tradition
Every month I’m making a roundup of all the CodePens I did that month, CodePens are little code sandboxes to test new ideas and see if it can work. Some I make in order to learn new things, some are just to challenge myself.
All are made for sake of creativity since writing code day-in and day-out can feel a bit monotonous so writing code creatively can be a nice change of pace and also bring unexpected joy and unexpected results.
And now - to the CodePens themselves:
Glass (Pure CSS)
Of course the new Liquid Glass design language is everywhere, and I’ve seen dozens of web based implementations already. The problem with all of those is that they’re (usually) pretty hard to render, and the web is for everybody - even for users with older and crappy computers.
When I did my implementation of it I made myself some ground rules. First - just pure CSS so no fancy SVG filters, no JavaScript and no external libraries needed to render a circle.
Second rule - no more elements than the ones the user sees. It means every circle is an element, both in UI and in the HTML code itself, if a user wants to replicate my effect they don’t need to ask themselves what elements to copy or get stuck with a half rendered element.
I know my implementation isn’t perfect Glass but it is pretty close and with all my restrictions it also run pretty well so I’m proud of it.
1300 Followers (on Threads)
This was a quick animation I made in a day, it had to be done quickly because my follower count flactuate quite a bit and nobody wants to see this kind of animation from a guy with only 1297 followers.
I’m super happy with how it turned out, I feel it looks very retro and has a very graffiti like aesthetic to it. In the same breathe it also looks very Threads, I can’t really explain why but if I was celebrating Twitter followers it would have looked different.
And I know you’re all asking for it - so here’s my Threads profile.
Drag and Drop “Story Game”
My daughter and I used to play this game when she was little where you make up a story using 3 cards, usually it’s some simple story like “The Cat Hugged the Dog” or something like that.
The game had a bunch of cards and you could only pick 3, I tried to boil it down to a smipler version where you have 6 cards to choose from, but the added feature I made is that you can also edit the text.
Editing the text makes it that much more versatile, and as of right now it works better on desktops and not mobile, that’s the nature of simple drag-and-drops.
To conclude - this month I made 3 CodePens, not so bad for August, which is a month my kids stay at home with no kindergarten to go to. This year I stayed with them for the majority of the month.
I’m still very happy with the results, and I’ll see you next month.