Happy April! As the saying goes, March went in like a lion and out like a lamb for many of us at Glitch. One thing that hasn't changed is that our community is still building really awesome apps that surprise and inspire. Let's dive into the tools, games, and art you have been building over the past month!

Code is a powerful instrument for building solutions to all sorts of problems, big and small!

~blockasaurus is an app by @joesondow that lets you mass-block twitter accounts. Check out our creator interview with Joe where we talk about his work and the NFT movement!

If you are working at home and miss the chaotic background noise of a busy office or coffee shop, just keep ~hatnote-coffitivity by @elvedin open in a tab. Make sure to leave it open during meetings too!

The twitter bot, AltTxtReminder, was created by @ckolbeck to help remind folks via direct message if they've posted an image without alt text. You can view the source and remix to set up your own at ~alt-reminder-bot.

~cake-icer lets you create messages in the form of cake icing, created by @stegriff. Use it to send a message to your coworkers apologizing for any weird artificial coffeehouse noises that disrupted your stand-up this morning.

~emojraw by @shannonlin and @bwasti1 is like a pixel art editor but with emoji. Take a break and have some chill time with these apps, too:

~dans-online-snake is a simple multi-user snake game by @dantechguy. It's single-player too and I would be lying if I said that I didn't once have this game open in a window for 20 minutes while I was on hold with a utility company the other day.

~evergiven-everywhere, by @garrettdashnelson, lets you get the Evergiven Everywhere ship stuck...everywhere. We've got an interview with Garrett coming soon here, so stay tuned and not stuck in a canal if you can.

~squarez is one of many really cool canvas apps that @bengarvey's been creating and sharing. Check out his profile - clicking virtually any app will lead to a brief escape from any mundane moment!

Whether you're practicing advanced improv or riding the unicycle that your dad once gave to you 8 years ago for reasons still unknown, there's a ~practice-guide for that, thanks to @thricedotted.  Here are some other apps that you need to check out!

March 14th every year is Pi Day. Celebrate belatedly by throwing slices of pizza in a circle with ~pizza-pi by @potch. In This House, We Eat Pizza and Learn Math!

~wikipedia-around, by @tomayac, shows you Wikipedia articles from around wherever you're located. Bookmarking this one for when I can start traveling again!

~landmarks by @chelsea.l.thompto is a powerful, interactive artwork that "explores facial recognition and the politics of technologies of visualization," bringing awareness to the danger from such technologies to trans people. 

Closing out this round-up, I want to give a special shouts out to @aboutDavid for building ~this-month, which lists apps that are shared in our Support Forum's "The Gallery" category so anyone can clearly see what folks there are sharing. If you have Glitch projects you built or love and want us to feature, share them on the forum, tweet them to us @glitch or email community@glitch.com - You may just end up in our next roundup! ✨

The project featured in this post's header image is ~march-lions-lambs by @bplmaps 🐑

Happy April! As the saying goes, March went in like a lion and out like a lamb for many of us at Glitch. One thing that hasn't changed is that our community's still building really awesome apps. Let's dive into the tools, games, and art you have been building over the past month!

Last Month on Glitch: the March 2021 edition

One of the most empowering things about programming is being able to code your own solutions to problems that are important but maybe a bit small or different from what existing software is made for. Being able to remix and create apps on Glitch is perfect in such cases; you can go from identifying a problem to building and sharing your solution in minutes with a friendly community doing the same! One such example is Ada Rose Cannon sharing her simple YouTube annotation app, ~yt-annotator. 

Ada, a developer advocate for the Android Web Browser Samsung Internet, is no stranger to building great apps on Glitch, but ~yt-annotator was a bit of a detour from the WebXR work she often does [she is one of the co-chairs for the W3C Immersive Web Groups, the groups working on the Web Standards for the WebXR APIs that let websites use Augmented Reality and Virtual Reality technology]. 

I recently asked Ada some questions about this app, and her thoughts on rapid prototyping in general.

Jenn: What is ~yt-annotator and what is the tech behind it? 

Ada: ~yt-annotator is a very simple little website for leaving time-stamped notes on  YouTube videos so you can quickly jump back and forth and re-watch bits.  The tech is very simple, it's just the YouTube API, some vanilla  JavaScript and a smidge of HTML & CSS. It uses the localstorage API  to save your annotations locally in the browser so you can come back to  them later. The links which change the current time in the player also  work as normal YouTube links with timestamps so you can open them in a  new window or share them.

There is some RegEx to parse the YouTube URLs to get the video ID. 

It loads the video into the page with the YouTube API.

When  the user adds an annotation it adds a new row to a simple HTML table  with a timestamp link and the second cell is contenteditable so the user  can type into it. 

When the user makes any changes to the text  it serialises all of the data into JSON and stores it as a string in localstorage. It's not the most efficient method but for a simple use  case like this it works well. If it was expecting very large amounts of  text I would've done it slightly differently by using IndexedDB to store  individual annotations but this works well enough.

If the user reloads the page it decodes that big chunk of JSON and reconstructs the table.

when the user clicks on the timestamp links it updates the iframe with the YouTube video

When I reached out to you about talking about ~yt-annotator, you  mentioned that you “only spent like an hour building it” which speaks to  your “get something out there…it doesn’t have to be perfect” ethos that  you’ve expressed in the past. What drove you to build ~yt-annotator and  get it “out there?”   

It started with this conversation about learning from YouTube videos and how videos are are  still useful for code tutorials even though a more accessible format,  like a blog post, would in theory be better. For things like graphics  programming, like this SDF Raymarching  tutorial with a lot of graphical elements, videos are a great format.  Unfortunately I am a purely visual learner and I usually prefer watching  these videos on mute or with minimal audio, skipping back and forth to  the relevant parts. I really don't like hearing people talk whilst I am  trying to learn things. 

I then remembered  YouTube's ability for deep-linking into timestamped videos and thought  about how one could create a website where you annotate a video with  timestamped annotations and could deep link them via the URL targeted  to the iframe. I was hoping there would be some kind of postmessage-based API to YouTube iframes to obtain the timestamp from the videos and  fortunately there was. Even better, YouTube had made an API library for  loading & controlling videos in an iframe, so I used that.

The  code is simple enough (less than 100 lines of JavaScript) that there is  not a lot of space for bugs, and it works cross-platform well. At first  there was a weird race condition in Chrome due to the non-standard way I  was loading the YouTube library, but that was a quick fix.  Once I was satisfied it  was working well enough I shared it back to twitter.

It may be tempting to spend the first few hours of coding setting up a fancy development environment...Unfortunately, this process usually ends up constraining your solution space to work within the paradigms of the framework you choose. 

I  have many years experience of rapid-prototyping websites where getting  an MVP in a very tight time frame is an important goal. It's a skill  that gets better with practise. Don't be afraid to kill-your-darlings.  If you've spent some hours on solving a problem but don't seem to be  making progress, it's okay to set that code aside and try a different  path. There are often many different ways to solve a problem with code.  Try stepping away from the keyboard and having a shower, or go for a walk, and often the solution will come to you. When I make something in a few  hours like this, people often see the occasional success story, not the  dozens of projects which just aren't turning out how I'd like and I have  set aside. Knowing when to try a new solution is a really useful skill.  

The other thing that really helps with  rapid-prototyping is keeping things simple. It may be tempting to spend  the first few hours of coding setting up a fancy development  environment, with complex build processes and large frameworks. At first  this may seem like you are putting in a little time now to save time  later. Unfortunately, this process usually ends up constraining your  solution space to work within the paradigms of the framework you choose.  By working with a minimal set up and getting used to using everything  the web platform offers, it will give  you benefits no matter what web frameworks and toolkits you work with  in the future. In addition, when you return to the project in the future,  you will have elements you can reuse in other projects, fewer  dependencies to update and you won't have to relearn the particular  tools that project was built with. 

What made Glitch the place you chose to build and share this and your other projects?  

I like Glitch because it's a really fun place to mess around and share  something. If a project becomes more serious I can export it to GitHub or move it to a new hosting provider but for just trying out a quick idea to see how it works, Glitch is great. Spending an hour or two to see if an idea works is a great way to try out something new, if it doesn't work I often end up learning just as much if not more as when a project works the first time. When a project is good enough to share  after a quick prototype it's a really nice feeling and if someone wants  to take it and run with it they are welcome to remix it.

Can you share what YouTube videos you’ve been annotating, or at least  what kind of videos you think an app like yt-annotator would enhance the  experience for viewers?  

The SDF Raymarching video (mentioned earlier) is the video which mostly made me want  to have a tool like this. Since I was writing the raymarching code for the web rather than unity I was rewriting the code in a different  language which meant I was jumping back and forth in the video to see  how the code compares with the techniques that were demonstrated. 

The surprising place I found yt-annotator really useful were recipe videos.  I love cooking and following YouTube tutorials. A Chinese YouTuber called Gao does amazing videos, her techniques and instructions turn out perfectly as long as you follow them exactly, she often goes into detailed explanations of how things work. Since it often involves techniques unfamiliar to me I end up replaying bits again and again as I am working in the kitchen so having the time-stamped shortcuts is really handy to be able to quickly replay a particular section. 


I  have some fun ideas for more Virtual Reality demos, but they are a secret right now. so you will have to stay tuned. You can follow the  Samsung Internet team on twitter @SamsungInternet.

Many thanks to Ada for building yt-annotator and all of her other awesome contributions to the Glitch community! And if *you* build or see an app on Glitch that you want us to feature, tell us about it by emailing community@glitch.com or tweeting @glitch!

One of the most empowering things about programming is being able to code your own solutions to problems that are important but maybe a bit small or different from what existing software is made for. Being able to remix and create apps on Glitch is perfect in this instance; you can go from identifying a problem to building and sharing your solution in minutes with a friendly community doing the same! One such example is when I saw Ada Rose Cannon sharing her simple YouTube annotation app, ~yt-annotator.

Rapid prototyping for rapid annotation, a Q+A with Ada Rose Cannon 

Earlier this month, the third most expensive artwork sale by a living artist happened on the blockchain in the form of an NFT, or non-fungible token. The excitement of innovation around selling fine digital art for fine analog art prices has flooded social media and offline conversations ever since. Now, truly anything can be minted and sold: images, text, and even moments in time! Of course, such excitement often arrives hand-in-hand with the valid fears of being taken advantage of, and that's for sure happening with NFTs; not only can anything be sold, but it seems like anyone can sell it, and that has left artists feeling vulnerable of theft that they already deal with in the conventional fiat market. 

This lead to Joe Sondow creating Blockasaurus, a Glitch app that has allowed artists on Twitter to quickly block all of the bots that have been taking advantage of this NFT movement by minting their tweets and artwork.  I talked to Joe about Blockasaurus, the why and how behind it, and the problem with the NFT movement that this project is helping to mitigate.

Jenn: What is Blockasaurus, and why did you create it?

Joe: Blockasaurus  is a web app that lets any Twitter user quickly block a list of  accounts that they paste into a form. I made it because the existing Twitter mass blocking tools didn't seem up to the task of quickly and easily blocking the growing list of hundreds of accounts that have  started using automated services to mint NFTs of other people's intellectual property on Twitter. Blockasaurus accepts any text format that contains Twitter screen names with or  without punctuation, and blocks as many of them as it can.

Blockasaurus has been one of the most widely shared Glitch apps on  Twitter over the past week or so because of the explosion of crypto art  and NFTs. What does blocking Twitter accounts even have to do with NFTs?

There  are some new unethical Twitter bots that claim to automatically do the  work of minting NFTs of the contents of any tweet. They then grant  ownership of that NFT to any random person who first requests ownership,  even if the requester is not the owner or publisher of the content. By  making this type of art theft trivially convenient and free via Twitter, these bots enable an order of magnitude increase in the  number of people who are trying to steal art profits. To mitigate this  problem, a lot of artists and other creators are making their Twitter  accounts private, deleting high quality old tweets, or swearing off  using Twitter to promote their work. All of those solutions mean less  success for creators and a weaker artistic culture for all of us.  Blocking one NFT minting bot account is no guarantee that other bot  accounts aren't working in a similar way, so people are sharing lists of  the users of those NFT minting bot accounts, so creators can try to  mass block the thieves themselves. But there are a lot of them. Artists  have been tweeting about spending hours each day manually blocking each  of the accounts on those lists. The purpose of Blockasaurus is to make  it easy to block all the accounts on medium-sized block lists.

Can you talk a bit about the tech behind Blockasaurus (what it’s written in, any APIs you use, etc)?

It's written in Node with Express, because that's what  https://poop-blocker.glitch.me/  used, and I wanted to build the new app as fast as possible to help  artists facing an emergency. It uses the Twitter API to authenticate and  block accounts.

Side note: Joe is extremely prolific on Twitter and uses it a lot for his art and tech: he writes interactive fiction stories using Twitter polls (see: #ChaosRaccoon and #StarshipWonder) and has made a lot of novelty Twitter accounts, both automated and manual (see: @PicardTips, @RikerGoogling, @StarTrekHour, @WorfEmail, @EmojiTetra, @EmojiSnakeGame, @EmojiAquarium, @EmojiMeadow, @EmojiPrincesses, @TinyPettingZoo, @TrumpsVitals,  @InaugCountdown, @realRealDukat.) 


What made you choose Glitch as the platform to create and host Blockasaurus?

The short answer is that  https://poop-blocker.glitch.me/ already existed and I knew I just needed to clone it and change a few things to make Blockasaurus quickly. The time between my first code change on Glitch and my launch tweet was 6 hours, including breaks for taking care of my sick cat. But the longer answer is more interesting.

I  have more expertise in Java than JavaScript server-side development, but Glitch is unparalleled for facilitating getting a simple but useful  free web app running quickly with a decent URL, without much research or boilerplate to go through. I've used Glitch before, to make a web app called Superblock, which is only usable by me. Superblock is for when someone is bothering me on Twitter enough that I want to quickly block  them on all of my accounts at once so they won't try to harass me  through my novelty accounts. I wrote the first working version of  Superblock using just my phone when I was away from home and didn't have  my computer. Not a development experience I recommend, but it is  possible to do. That experience is connected to how I started writing  Twitter interactive fiction ("Poll-Playing Games") to help myself get  through my father's last few months of life, and how little patience I  had for strangers online telling me not to retweet my own work during  that time. So, Glitch genuinely helped me get through a very difficult  period in my life.

@Rumpelcita's Poop-blocker, one of the apps that inspired Blockasaurus, is another popular Glitch app that's helped users improve their Twitter experience.

I was actually introduced to your work via your EmojiAquarium twitter bot! How is creating art with code different or the same as creating  utilities like Blockasaurus with the same tools (ie. code, Twitter  APIs)? Do you prefer creating one over the other?

What  an interesting question. I think for me, creating art, games, or  utilities with code are all connected to a desire to delight other  people. Making art like EmojiAquarium is similar to making utilities  like Blockasaurus in that they're both things I wanted to see in the  world, but that didn't exist yet, so I made them. But there is a  difference in making art that isn't to solve a known problem so much as  just to add something good into the world that helps people feel a  little better sometimes. I guess I prefer creating art and games, since I  have a huge backlog of ideas still to implement. But when the situation  calls for a utility that I know a lot of people need, it's gratifying  to be able to provide it.

Usually I use AWS  Lambda with Java to automate Twitter tasks on a timer for things like  Twitter bots and certain custom retweet automation. The interface for  Blockasaurus needed to be a web app, so Glitch worked perfectly for  that. The Twitter API is a royal pain but I've gotten to know its ins  and outs pretty well over the years. My stumbling block now tends to be  that I'm a novice at Node.js.


Since your app is being widely shared and discussed on social media, I could imagine  you’ve seen a lot of discourse about NFTs and other reasons users have taken to using Blockasaurus. Have your opinions on crypto art changed in  any way since you tweeted the app?

Were there any surprises for you after you launched Blockasaurus (ex. The response, the kinds of communities using it, etc)?

I'm pleased that a few other types of Blockasaurus uses have come up for some people, but I haven't seen people sharing public lists of accounts  to block for any uses besides NFT art theft so far. One community that  just found out about Blockasaurus yesterday is the BTS fan base, so for a  while the profile pictures in my notifications were all hot South Korean guys.

So far I've been pleasantly  surprised not to get any backlash against the existence of the tool itself, although some of the block lists that were going around have been questioned and deleted because they weren't made carefully enough so they included some artists that people didn't want to block.


A bunch of things...I'm working on a new version of Blockasaurus that will work better with Twitter's rate limit API to succeed in blocking more of the accounts a  user requests in a larger batch. It will visually communicate better  which block attempts succeeded and which failed, and it will retry  failed attempts when Twitter allows them again, as long as the page  stays open in the browser. I've started working on ongoing automation of collecting and sharing all the accounts that are  attempting to mint NFTs for other people's work.

I'm aiming to do some of my coding in livestreams on Twitch like I used to, although I'm a bit out of practice in streaming. I'll also be live streaming some digital board game playthroughs with some of my Twitch streamer friends this month. And  when I'm not too exhausted from pandemic life I plan to get back to  making more Twitter games. One of the next ones might be about crossword puzzles. 

Those are all unannounced things but they'll be on my Twitter as they go public.

Thanks to Joe for talking to us about Blockasaurus, as well as the controversy behind the NFT minting bots that inspired it. If you build or see an app on Glitch that you want us to feature, we want to know! Tell us about it by emailing community@glitch.com or tweeting @glitch!

Earlier this month, the third most expensive artwork sale by a living artist happened on the blockchain in the form of an NFT, or non-fungible token. The excitement of innovation around selling fine digital art for fine analog art prices has flooded social media and offline conversations ever since. Now, truly anything can be minted and sold: images, text, and even moments in time! Of course, such excitement often arrives hand-in-hand with the valid fears of being taken advantage of, and that's for sure happening with NFTs; not only can anything be sold, but it seems like anyone can sell it, and that has left artists feeling vulnerable of theft that they already deal with in the conventional fiat market. 

This lead to Joe Sondow creating Blockasaurus, a Glitch app that has allowed artists on Twitter to quickly block all of the bots that have been taking advantage of this NFT movement by minting their tweets and artwork.  I talked to Joe about Blockasaurus, the why and how behind it, and the problem with the NFT movement that this project is helping to mitigate.

Artists building tools to help other artists: a Q+A with Blockasaurus creator Joe Sondow

February may be the shortest month, but it has the most personality (biased Aquarius here!). That personality has definitely shone through the apps you all were creating and sharing over the month.

Our community not only loves collaborating and creating with each other, but it loves to build tools to facilitate collaboration and creation.

~coolzone is a multi-user drawing/writing tool by @crafah where anyone connected can communicate. Remix it and make one for your next virtual hangout!

If you prefer communicating through sound, then fresh from The Gallery is ~one-hand-band, which is like ~coolzone but for making music. @hatandbread built it so you can create your own room or join an existing one, and it's a progressive web app!

@high_byte created ~digital-pottery so you can make pottery without the mess *and* be able to share your models with others.

Many of you were building and sharing apps to celebrate Black History Month and the landing of Perseverance on Mars. By the way, please don't send me to Mars. I can enjoy Perseverence from here thanks to @AngelFQC, thanks.

@jeffrey.rivera created ~knowledge-of-space as a 3D educational...space to float around while you learn.

A class made this informative site, ~bhm-website, to add to as they learned throughout Black History Month, including interviews and useful resources.

Mariame Kaba's ~blackphotobooth (design by @netanoir) is a beautiful zine of found photo booth portraits of Black people. 

Here's a terminal to make it look like you're working

I'm excited to see how this fake terminal by @louh evolves! Here are some other apps that are inspiring me away from my work :)

~spline-isometric-room is a demo of a Spline export hosted on Glitch. Read more on the support forum about how @khalby786 made it!

~birdfolder is a landing page for a new project by @hootalex that I can only best describe as "sweet" and "🕊".

All the way to outer space and back in a single blog post, look at us! If you have Glitch projects you built or love and want us to feature, tweet them to us @glitch or email community@glitch.com - You may just end up in our next roundup! ✨

The project featured in this post's header image is A Very Long Walk, which is currently about halfway on it's journey from Russia to Portugal 🚶‍♂️

Last Month on Glitch, the February 2021 edition

January was as long a month as 2020 was a year, but we've finally reached the end. Before we fully dive into this perfectly rectangular February, why not take a look at some of the apps our community created last month?

For a bunch of us, the new year means coming back after a break and having to re-learn how to code, type, speak, etc. Here are some neat utilities that helped me get back in the working groove.

Adrienne made ~betternotes so we all can create…better notes!

Clive shared this really neat take on the pomodoro timer he built. It's become a regular part of my own productivity workflow.

~color-gd is a tool by Alex that not only lets you create color schemes, but share them easily as well.

For my fellow devs out there, check out some of the resources and demos our peers have been building on Glitch!

Our pals at Postlight Labs built ~divsarentbtns to let us all of us to know that divs aren’t buttons. I’m sure no one is more devastated to be on their Hall of Shame, frankly, than…Nathan’s Hot Dogs. All kidding aside, the page includes resources for “a more accessible web” which everyone should be striving for – not just our favorite fast food eateries.

While we're talking about accessibility, I really love this ~toy-screen-reader. The creator, Cameron, tweeted that he initially wrote it all on Glitch using an iPad!

John wrote about his work in visualizing Covid cases in Congress and shared this demo on Glitch of the final results.

Oh boy, Potch has got me dithering again, and so can you with a webcam and ~dither-cam! Here are a couple of other really rad projects that turn your presence into art.

Kalidoface turns you into a virtual character, alone or with friends! We talked to its creator, Rich, about how he made it, so check that out!

Google AI's Magenta team hosted an experimental series merging music and machine learning, and one of the coolest projects out of it is ~dance-project. The creator, Aparna, explores turning motion into sound, taking inspiration from Bharatanatyam -"one of the oldest forms of classical Indian dance."

As I stare out my window at over a foot (and counting!) of snow accumulating, I wish I was seeing the above scene, by Niko the Neko, instead. Here are some other works of art and expression our immensely talented community created.

Emma's, ~blackoutpoetry, a really nifty tool for creating blackout poetry in the browser, has been around for awhile but has been picking up a lot of traction with teachers and students coming back to school after the holiday break. 

Literally every app on John's Sunday Sites page is incredible. Sunday Sites is a cool sort of web ring and hackathon group who primarily have been using Glitch! One of their other members, Seán, made this joyful app that displays the four seasons in splendid ASCII.

Artist Christina Sadovnikov hosts her art portfolio on Glitch and it's really beautiful. I especially love Divisional Tide and holy crow do I miss going to art galleries!


Click the app below for cats (followed by other miscellany)

You can count Rowan, creator of ~overly-particular above, among my fantasy roster of Glitch superstars. The following are other miscellaneous superstar apps that inspired me, thrilled me, or made me not hungry anymore.

Shouts out to one of my former home towns, East Brunswick, New Jersey, where a teen started a New Jersey chapter of Balance Boxes – a youth-led non-profit that distributes all kinds of items to children in low-income communities.

An r/incremental_games redditor was inspired by the community to create ~incresite, an incremental game where you’re in charge of a social media site. If only this were all a game!

~aimless is a Spotify recommendation app that got some heavy traction in the r/csMajors subreddit!

Aaron's specialty foods generator, ~uk-food [content warning, some fresh language] both delighted and broke many, particularly those who did not know that London Broil is an American dish. 

This was a fun journey of apps for me to revisit, and I hope you had fun too. You can even be a part of it in future months – just remix and create the app of your dreams, and then let us know about it! If you have Glitch projects you built or love and want us to feature, tweet them to us @glitch or email community@glitch.com! ✨

The project featured in this post's header image is ~bananaland by @potatowizardtwo 🍌

January was as long a month as 2020 was a year, but we've finally reached the end. Before we fully dive into this perfectly rectangular February, though, why not take a look at some of the apps our community created last month?

Last Month on Glitch, the January 2021 edition

The coming of a new year is a great time to imagine what cutting edge, interactive technology we’ll see trending in web app creation. One trend that I hope to see grow ever more popular on Glitch is the use of body and face motion capture. So, it was a real delight to see Rich Yee launch Kalidoface on Glitch. Rich, a full-time visual designer and free-time creative technologist, has been prolific in the Glitch community, collaborating on Whirly Birdie and creating one of my personal favorites, THEREMIX. I reached out to him to talk more about virtual character technology and how he used Glitch to bring it into the browser.

Jenn: For those who are not familiar, can you explain what virtual characters or VTubers are? And why do you think they are such a compelling technology these days? 

Rich: Vtubers, also known as Virtual Youtubers, are part of a rapidly growing genre on platforms like Youtube or Twitch where creators will base their identities around a digital avatar. While the early days of "Vtubing" (mid 2010s) involved a more expensive full body motion capture setup, the genre has slowly shifted towards face tracking connected to Live2D model, a setup better suited towards streaming. Live2D is a popular character animation format found in mobile games. Kalidoface currently uses official Live2D demo models and also allows users to upload their own Live2D models.

This technology has been a super fun way of merging fiction with reality. While there is backstory and lore behind each VTuber, the creator's voices and subtly animated expressions allow for their personalities to shine through, becoming a mix of fantasy and a genuinely human connection. I definitely couldn't have experienced this much character development by just watching seasonal anime.

Kalidoface is cute, but it’s also really powerful - not only letting users create a virtual character, but also communicate with others. What inspired you to create this app? 

Kalidoface aims to bring native-app-like face capture to the browser. Without needing to install anything, I wanted to create an easy way to animate your own avatars and introduce the concept of “Vtubers” to more people. 

In the early days of development, I surprised some coworkers in Zoom calls using Kalidoface + OBS. However, it wasn't until I added one-on-one voice calling that I felt truly immersed in the world I was trying to make. There was just something special about seeing my long time friend as a talking dog while I was a talking cat that made the moment magical. In fact, I've been able to reconnect with old friends who were more willing to chat using Kalidoface over a regular video call. 

How long was the process from getting the idea to sharing it with the world? 

I started playing around with the idea around early October, trying to get a sense of how feasibility and if the web platform was ready. I think I tried over 4 different face detection methods before finally discovering an official Tensorflow solution. From there, it was a grueling process of figuring out the vector math needed to transform a cloud of points into usable values for character rigging. 

The design and UI of the app took up the other half. I wanted a jellymorphic visual design as I was already thinking that I wanted the mascot for the app to be something cute and squishy. I also wanted to be conscious of safe zone for use in streaming. My talented type designer friend helped make the cute logo, icons and custom illustrations while I was in the weeds trying to assemble it all together. It definitely was a tight deadline, but I wanted to be one of the first creators to release a "Vtuber" app for browsers. 

What made Glitch the place you chose to build and share this project?  

Glitch has always been my preferred platform to prototype web experiments. Being able to work from any computer (and sometimes tablet) is super convenient and powerful. Combined with the fact that I'm running a dev server that doesn't take 1-2 minutes to recompile code has made this my go-to setup. I'm currently using Svelte + Snowpack for that sweet Hot Module Refresh life. 

Glitch as a community has been super welcoming and creators on it are always releasing inspiring web experiments. My last 2 projects have also seen successes on Glitch and I saw no reason not to release Kalidoface on it as well. What can I say, I am a Glitch fan!

I imagine building something like this for (and in) the browser wasn’t possible several years ago - what libraries and APIs available today did you use to build Kalidoface? Were there any pain points you hit in the process? 

Definitely! At the core of this project is Tensorflow's Face Landmarks Detection (formerly Facemesh by Google Mediapipe). Their impressive machine learning model tracks 486 facial points + iris detection. Unlike other models, it tracks well even with glasses on. 

Getting Live2D models to render in the browser was also a challenge. The official SDK is super hard to use and mostly in untranslated Japanese. Luckily, a single developer in China is currently working on a plugin that lets developers use the popular graphics library, PIXI.js with the Live2D format. Him and I went through alot of bug reports and feature requests throughout the development of Kalidoface, and even now, the app uses a beta version of Pixi-Live2D-Display. 

The app is currently in beta, so what can we expect next for Kalidoface? 

1) A mascot! I’d love to commission or learn to draw an original character for Kalidoface. I’m thinking something squishy and bouncy. A time-traveling inter-dimensional jellyfish? Maybe that’s too crazy.

2) Stickers and layers! While you could just open up Kalidoface in OBS and customize your streaming scene to have png images/text layered on top, I do want to offer a simple way to add floating stickers (maybe even animated gifs!) to your canvas. There might even be some Kalidoface exclusive stickers!

And of course, bug fixes. If anyone has any more suggestions, feel free to tweet me @yeemachine. I definitely have a long list and exciting list ahead of me.

Shouts out to Rich for teaching us more about vTubers and the tech behind it, and make sure to try out Kalidoface for yourself! If you build or see an app on Glitch that you want us to feature, tell us about it by emailing community@glitch.com.

New year, new *virtual* you: a conversation with Kalidoface creator Rich Yee

To get everyone in the holiday spirits, we asked Nicolas Grenié, a Developer Advocate at Typeform, to write about the really cool puzzle he put together using different technologies to surprise his wife for the holiday. We hope you enjoy the tale as much as we did ☺️

As we are entering the Holiday season, and everything around us is starting to adorn itself with red, white, and green, I want to take a moment to tell you a modern Christmas tale. But first, call dibs on grandma’s rocking chair, place it near the fireplace, tuck yourself in your favorite plaid, and pour yourself some hot cocoa. You can even drop some tiny marshmallows in it. It will be our little secret.

To be honest, this is not exactly a Christmas tale, but more a cuento de Reyes like people call it in Spain, where my wife is originally from. In Spain, people celebrate more the Epiphany or Three Kings Day (Dia de Los Reyes) than Christmas. It’s very similar and respects a traditional end-of-year holiday triptych: a family gathering, too much food, and presents for all. Every year I join my wife and her family to celebrate this special day together.

So on the 6th day of 2020, full of insouciance about the year to come, bellies packed with exquisite jamon and bubbly cava, it was finally time to gather the whole family around the tree and open presents. The younger ones were tearing shiny wrappings joyfully, unveiling many trucks and dolls. Surprisingly, a mystery box was still untouched. It had my wife’s name on it: Rebeca.

As she started opening it, all the shouting stopped, as everyone watched, young and old, in monastic silence. ‘What was in the box?’ It was nothing they had ever seen before. There was an assortment of differently shaped pieces of various colors along with a tiny post-it note.

I don’t know if you like puzzles, but my wife adores them! And it looked like the Kings’ elves played a trick on her. On the post-it, she could see scribbled drawings of a Puzzle piece, an End sign, a Camera, and a Phone. What would you understand if you saw such rebus? It was probably not as crucial as Archimedes’ discovery, but my wife shouted Eureka when she understood what the scribble meant: solve the puzzle first and then take your phone out to take a picture.

Everyone quickly made room at the dinner table. Pushed the dirty plates and flutes away, this puzzle was a serious business. After a couple of minutes, every piece of the puzzle found its place in the masterpiece.

It looks oddly familiar.
As the post-it instructed, my wife diligently took her phone out and aimed at the finished puzzle, ready to discover what’s next.

At this point in the story, I want to pause and take a moment to thank the engineers, designers, and everyone at Apple that contributed to building the iPhone, an incredible piece of hardware. Thanks to their sense of detail and craftsmanship, they gave life to this scrappy homemade puzzle and turned it into an interactive object.

The iPhone camera detected the QR code pointing, which pointed to a URL hosted on Glitch. There was still no sign of an actual present. Eventually, the URL on the Glitch app redirected to a typeform with another enigmatic message.

Looks like elves were jokesters. The whole family, five adults and three kids, were now gathered around the table, curious to discover the next part of the puzzle. The typeform asked the first riddle: If you are running in a race and pass the person in second place, what position are you in?

The group agreed on the same answer in a snap! “Of course! You become first! So easy! Next!”
And they moved on to the next question.  Excited, they responded quickly and unanimously, as I expected, and they quickly moved to the remaining riddles. The second was a popular one on Twitter at the time: Someone's mom has four sons North, East and West. What is the name of the fourth son. Can you guess the name of the fourth son?

And the final one came from a riddle site for kids:

Black inside
Black outside
So as my heart
Black wood
Who am I?

You should have seen their face when the typeform said: “Whoops, you only have 0 correct answers... Start over.” The elves were definitively the sneaky kind and didn’t make it easy. The adults sat down. They started getting out pens and papers to draw things and put their heads together, trying hard to figure out where and how they went wrong. They were at it for more than an hour, trying one possibility after another. 

In this whole din, no one noticed that my 9-year old nephew, Victor, had found all the correct answers on his own. However, no one stopped to look up and hear him out. Only after they had run out of options, they turned, meekishly, to the little one. And when they realized that the typeform accepted his answers - all 3 - as correct, the tenor of excitement suddenly changed direction to him. 

Until the iPhone rang and an SMS popped on the screen. There were muffled grumblings wondering if it was another puzzle. The text message only contained a link. It opened a Wallet file. Finally the end!
Indeed! It was tickets to see KISS End of the Road World Tour at the Oracle Arena in Oakland.

Sure, I could have just printed these tickets out and handed it to my wife in an envelope—a bow and wrapping paper around for the sake of anticipation. But we would not have had this family experience, where everybody contributed and participated. This experience created lifetime memories for all the people in the room. Of course, the concert was a blast! The show was on March 6th. On March 7th, the Shelter In Place started in the Bay Area. This concert is the last anything we attended in 2020.

Technology does not need to be all serious; it can also spark joy around you and give life to the silliest ideas you may have. I hope you can explore those ideas and build more meaningful hacks!

Check out this tutorial on the Twilio blog to learn how this gift was put together! Here are the answers to the riddles: second, What, an olive.

How Technology Helped Building A Meaningful Gift Experience

We asked co creators Richard Yee and Alex Tomlinson to share the story behind their new variable font, Whirly Birdie. This fun, flexible, and retro-inspired typeface launched a few weeks ago and it’s just getting started. As one of the most whimsical sites we’ve seen built on Glitch this year, this project should delight web developers and designers alike.

What was the inspiration for this project? How did you take this from concept to launch? 

A: We wanted to make a website as fun as we think the font is. Our idea was to create a “whole world” out of a font, and I think we got pretty far! There’s a clock made out of a font, a bookshelf, and we even hijacked your cursor- so that’s a font too! And, of course, our process involved Glitch at every step! Almost every element on the page began as a separate sketch on Glitch. I guess you could say our process was creating a whole bunch of neat little sketches utilizing the font, and then seeing what made sense together.

R: Yup, we wanted to make something cool combining each of our specialities. Alex is always drawing fonts. I'm always tinkering with weird web tech. We both use Glitch day to day, so this collab was bound to happen at some point! This project was a “playground” in the truest sense of the word. While we started with a loose plan, I think our multiple tangents on Glitch have allowed us to make something super fun.

What stack did you use to make the project? Tell us about the tools, libraries, and frameworks you used. 

A: I think it was all Glitch and Svelte. Unless there is something Richard isn’t telling me about!

R: Svelte was a real gem of a find this year for me as a developer. Just its base configuration was super powerful. Didn't need a separate state manager nor an animation library. Svelte had most of them ready out of the box. It was also very versatile. I could utilize all the powers of a framework without forcing Alex to adopt it when collaborating. There's nothing wrong with vanilla javascript, and I'm glad we could keep some of that workflow with Svelte.

How do you explain what a variable font is and its benefits for web developers and designers? 

A: I think the best way to explain variable fonts to web developers is simply: they're fonts with variables! Depending on what a typographer has drawn in their font, you can use variables to output different weights, sizes, or even animations from a font. The main benefit for designers is the creative freedom. They basically get to co-pilot a font’s design. The main benefit for developers is the ease of using variable fonts. Not much has changed in the CSS, except now you only have to import a single file! You do have this new "font-variation-settings”. Maybe Richard can convince developers better than I can?

R: I definitely expect variable fonts to mature in the near future. The major draw would probably be cross-browser compatibility and stability. Chrome has seen some weird glitches, no pun intended, with how it renders variable fonts. Edge cases for sure, and I'm sure their teams are doing their best to fix all bugs coming in. We actually submitted a variable font bug we found while developing this website and they rolled out a fix last month! 

That said, by baking animations directly into variable icon fonts, it removes the need for a library like lottie.js just to create animated SVGs. It's a super powerful spec, and most importantly, it was super easy to animate! 

What are some of your predictions or favorite trends in web development and design? 

A: I predict that Whirly Birdie and Whirlybats will take over the web, and you won’t be able to read a sentence without seeing an animated airship or UFO. My favorite trend in web design is DIY web design. Anything where you can tell someone designed or coded something themselves and didn’t just defer to some Bootstrap theme or Material Design generator.

R: I definitely feel there's a trend for more bespoke gestures and performance that you would typically find in a native app. That said, I'm a big fan of progressive web apps, which are just websites that you can launch from an icon on your mobile homescreen. It frees you of the browser frame, giving you something that really does feel native. Needless to say, I have whirlybirdie.com installed on my phone. On trends in development, I'm a fan of what Svelte is doing to change up the JS landscape. Having most of the work done on the compiler and not the client is a nice shift in philosophy. 

What’s your best advice for creators looking to make something and sell it online? Any lessons learned the hard way or best practices to share? 

A: Sell it yourself! A big part of the reason I decided on creating a standalone website for this font is that so many “graphic design marketplaces” are abysmal and depressing places. “Products priced 90% lower than yours are more likely to sell!” and “We are now taking 50% of your sales, because we are so devoted to making our service the very best for you! :)” are the sad realities of selling your soul to those places. As for lessons learned the hard way: we had the purchase button in low-contrast pale blue color when the site launched and we switched it to a nice green—and I swear it has impacted our sales. 

R: Market your work and be confident about sharing! Whether it be on social media channels, aggregator sites, or even the @glitch twitter account, I think it's important to be active in seeking out specific communities that would be excited for your new product/website/project. Sharing process work is also a good way to generate interest. Alex was fairly on point promoting Whirly Birdie throughout our development cycle. 

What’s next after Whirly-Birdie? Are you working on more fonts or projects? 

A: That implies Whirly Birdie ever ends! I like to think of it as a living, breathing project. Since launch I’ve stealthily added at least 5 Whirlybat icons, and likely even more by the time someone reads this! As for future font projects, I think there is still so much to explore with variable fonts.

R: Would love more font collabs and maybe branching out even further. For now, I'm headed back to more experimental tinkering. I'm currently making a face-tracking web app for virtual live streamers. Hope to launch it early next year!

We asked co creators Richard Yee and Alex Tomlinson to share the story behind their new variable font, Whirly Birdie. This fun, flexible, and retro-inspired typeface launched a few weeks ago and it’s just getting started. As one of the most whimsical sites we’ve seen built on Glitch this year, this project should delight web developers and designers alike. 

What does it take to create and launch a font? A Q&A with the Whirly Birdie creators 

Although Glitch is a really powerful platform where you can build full-stack web apps, I also find that one of its simplest, most straightforward features has some pretty amazing potential.

You can easily create and maintain a group-edited collection of Markdown files on Glitch, almost like a Google Docs for Markdown. Once you do, there's a huge set of possibilities of what you can do with those files

If you're here, you already know what Markdown is — it's a way of formatting plain-text files so that they can consistently be parsed into rich text or HTML if you'd like. I've been using Markdown since John Gruber first created it almost 2 decades ago, and it's been amazing to see it become so ubiquitous that many more technical users just assume it's going to be available wherever they want to write.

Markdown also has a few key advantages over the ways that people commonly write together as part of teams or workgroups. In a tool like Google Docs, as good as it is, there are some pretty significant constraints:

There's no built-in formatting styles for code, or even for blockquotes.

You can't just use HTML even if you know it

Copy & paste can still be annoying in the same way that Microsoft Word is frustrating, bringing over unexpected styles or formatting

None of these by itself is a huge problem, but all of them together can be really annoying and frustrating. Meanwhile, trying to edit Markdown files alongside other people is... weirdly hard? You could use a whole complex git-based workflow, but that seems like overkill, and we're spoiled by being used to edit together in Google Docs and Figma and all our other tools that let us collaborate in realtime.

So, the answer to easily editing Markdown files while working together on them as easily as sharing a Google Doc? Glitch!

Take the piece that you're reading right now: I wrote it right on Glitch, and then I could easily share it with my coworkers so they could read over it and offer edits or suggestions if they wanted. It works just like sharing in any other app, without having to go through the complexity of git. And now if I don’t want my notes to be readable by everybody on the Internet, I can just set sharing to be private, and only the people I invited can read what I’ve written.

Now, if I want to undo changes, or go back to an earlier version, I still have git under the hood, automatically saving all my edits as I go. If I want to get really fancy, I can even hook up other tools to my Markdown files on Glitch because it's all accessible as a completely standard git repository. But I don't have to do any of that stuff unless I want to.

And best of all, any people I invite in to share this Glitch project can also create and share their own Markdown files that we all maintain together. If we want to make a knowledge base or a documentation manual together, it's easy enough for a brand new user to jump in, and advanced enough for any coder to feel fully comfortable building on top of. There are even niceties like a fancy little button that will automatically format your file and keep it looking neat and clean.

Of course, since Glitch lets you create and run full-stack apps, the sky's the limit when it comes to using the Markdown files you make on Glitch. If you want, you can build (or import from GitHub) a static site generator, and publish your Markdown files as web pages. You could use the built-in git support to synchronize the repo to another hosting platform or publishing tool. You could write scripts to process your Markdown and output it in any format you want, or to submit it to another platform's APIs. You could even build another Glitch app that uses your documents as data that it works from.

The key thing is, it's just code. You can do anything any standard coding environment lets you do, but it's just easier to get started writing and creating and previewing your Markdown files.

So, if you're looking for an easy way to create and share documents together, and Google Docs isn't a good fit because it's not designed for plain text files, keep Glitch in mind as part of your toolkit. (And let us know if you find good uses for it with your team!)

Although Glitch is a really powerful platform where you can build full-stack web apps, I also find that one of its simplest, most straightforward features has some pretty amazing potential.

You can easily create and maintain a group-edited collection of Markdown files on Glitch, almost like a Google Docs for Markdown. Once you do, there's a huge set of possibilities of what you can do with those files

If you're here, you already know what Markdown is — it's a way of formatting plain-text files so that they can consistently be parsed into rich text or HTML if you'd like. I've been using Markdown since John Gruber first created it almost 2 decades ago, and it's been amazing to see it become so ubiquitous that many more technical users just assume it's going to be available wherever they want to write.

A Google Docs for Markdown

He also serves on the boards of Stack Overflow and the Data & Society Research Institute, and was formerly a contributing editor of WIRED. He’s been blogging since 1999 and won’t stop telling people about that one time he was on the Desus and Mero late-night show.

Incidents

The Workers Who Keep the Web Safe in an Unsafe World

Animal Crossing Helped Me Get Back to Real Life

New Rules of the Classroom: Remote Teaching in the Age of Covid-19

Better Tech: Why We Need Calm Technology Now More Than Ever

Function with Anil Dash

From idea to code in seconds, build and learn alongside the most creative coders on the Web

Recent Posts