Have you sent in your nominations for Last Year on Glitch yet? The deadline is end of day Monday, January 6th! No matter how you’ve been spending the final few days of December, I hope you’ve had time (or will soon) to rest, be inspired, and hopefully get curious about some things! And if not, here are some jumping off points from stuff that folks have been building with Glitch:
MASIL, or Minder AI Structured Interactive Language, conducts a technological orchestra with AI as the virtuoso performer. The opera unfolds as AI, web technologies, and user interfaces play their parts in perfect harmony, creating a predictable and beautiful digital composition.
If you’re interested in creating your own regional survey tool, you can clone MapsMania’s Where is polygon app, to draw your own neighborhood!
Finally, if you’re a Twitter user, try out @tiago’s viral app, Tweetalyzer, which looks at your profile and “roasts” you courtesy of super-smart AI.
What have you created (on or off Glitch) lately that might spark curiosity in others?
I spent the most of last month trying to come up with a way to remove colors in images in Figma. It’d be annoying to download stock images from Google but then have a white background, or get JPEGs and have to go through the whole fiasco of converting to a PNG, and so I took it on myself to find a way to get it done on Figma. What resulted was a plugin that could remove and replace colors in images, which I ended up blogging about!
So, I created the tenth version (technically the ninth but I accidentally shared it as the tenth. ¯_(ツ)_/¯) of my personal website and I used GSAP. Learning GSAP is sooo fun.
woa congrats on making it up the webpack complexity cliff
a script for transferring a file over the network using netcat, which didn’t work right. but that spiraled in a weirdly extensive piece of software archaeology that spanned decades of people implementing the same thing over and over again wrongly. and I ended up learning the oklch color model in order to build a big enough palette to color-code all the problems I found
extra info: part of this I did on glitch, mostly having a place to save and edit a great big python script that I used for testing. but for the actual testing, I used google cloud shell, because being able to run a docker container made it easier to access a lot of the programs I wanted to test
I forget to tell but I enjoy your blog and your writing so much! Thanks for sharing this post, I’m more of a words girl than code girl, but the way you describe your journeys through coding are so illustrative and very enjoyable. Keep up the great work!
I’ve also heard quite a lot of Motion.dev (formerly Framer Motion). It’s smaller and faster. It’s free too (with a paid plan to get early access to new features), unlike gsap which is NOT free for commercial websites (you need to get their business $199 / year plan).
also gsap is owned by Webflow now? lol. i wonder who that idea came from (framer is a webflow alternative)
GSAP is an incredible animation library. But, you can achieve most of the same effects with Motion, with hardware accelerated performance, often for a far smaller bundlesize.
Unlike GSAP, Motion doesn’t need a costly yearly license to run on commercial websites, as its supported by corporate sponsors and optional Motion+ memberships.
…
Motion is built on modern browser APIs like Web Animations API (WAAPI) and Scroll Timeline, which is what enables it to offer hardware acceleration for common animations like transform, filter and opacity.
There are other optimisations, like using the Intersection Observer API for scroll-triggered animations rather than measuring the scroll position every frame (which can trigger style recalculations).
Likewise, when you start an animation with the animate function and it needs to read initial styles from the DOM, that process is batched and optimised, reducing layout thrashing and style recalculations.
Motion’s APIs are generally smaller than GSAP too, with our scroll function is just 75% the size of its GSAP equivalent, and the mini animate function 90% smaller. Even the hybrid animate function, which offers timeline sequencing, independent transform animations, and more, is 18kb, smaller than the GSAP animation functions.
Finally, because Motion is built with ES modules, it is tree-shakable. Which means if you only import the scroll function, then only this code will end up being delivered to your users. This is an immediate SEO benefit of a few Lighthouse performance points.
Thank you! I try my best to be interesting because even if you code, who wants to sit through pure technical nonsense? My mom tells me I’m a bit too dramatic but I think that makes my writing way better.
The best things that I made were because I’d get really into Bluesky and Letterboxd:
“Letterboxd besties” hooks into Letterboxd and shows who has the same fave films as you. Was posted on Twitter by some big accounts and got some big traffic for a couple of days
Live follower count shows you followers in real time for any account
Have also got a bunch of Bluesky bots that post songs played on the radio (BBC 6music, Radio 3, Radio 1) and film scripts (Die Hard, Robocop, Ghostbusters, and more), which I already had Twitter versions for on Glitch so were easy to port over
MASIL, or Minder AI Structured Interactive Language, conducts a technological orchestra with AI as the virtuoso performer. The opera unfolds as AI, web technologies, and user interfaces play their parts in perfect harmony, creating a predictable and beautiful digital composition.
If you’re interested in creating your own regional survey tool, you can clone MapsMania’s Where is polygon app, to draw your own neighborhood!
Finally, if you’re a Twitter user, try out @tiago’s viral app, Tweetalyzer, which looks at your profile and “roasts” you courtesy of super-smart AI.
) but I think I learned more from building