Games can be a great way to learn new concepts, spend time with friends, or just unwind at the end of a long day. And wouldn't you know it — games are actually a big part of Glitch's DNA!

For our first episode, we talk with Glitch user and software engineer Joe Gaffey about his history with game design, hear from our engineering lead Keith Kurson about fun games to play and remix on Glitch, and we have a roundtable conversation with CEO Anil Dash and other Glitch team members where they talk about our history with games, and mention some of their favorite games of all time.

Looking for bonus content? Our app collection for this episode is where it's at, including links to all the Glitch apps and other games mentioned in this episode and much more!

Executive Producers: Maurice Cherry, Keisha "TK" Dutes
Editor: Brittani Brown
Engineer: Keisha "TK" Dutes

Game On!

Hosanna Tolman:
My top number one video game of all time is Link’s Awakening, Legend of Zelda.

Steph Monette:
So, my favorite game right now is backgammon.

Zainab Shah:
So, my favorite game is called Ludo.

Osmose Kelly:
So, my favorite video game is Castlevania: Symphony of the Night.

Tasha Hewett:
My favorite game is this pinball machine that’s called Total Nuclear Annihilation.

Jenn Schiffer:
One of my favorite games is Katamari Damacy. The designer, Keita Takahashi, ended up working on the game Glitch that then became the company Slack…and now we’re Glitch.

Maurice Cherry:
This is Shift Shift Forward, a new podcast from Glitch that showcases everything that makes Glitch the best place to create on the web. I’m Maurice. I work on the marketing team here and as you can probably guess, this episode is all about games: the ones we love to play, the ones that inspire our creativity and the ones that make us want to create our own.

Maurice Cherry:
You’ll meet Joe Gaffey, a software engineer by day and a die-hard game creator in his spare time. Later, our engineering lead, Keith, clues us in on game apps on Glitch that anyone can play or remix. But first, let’s eavesdrop on a conversation about how hard we game at Glitch with some of our fellow team members. Software developers, Tim and Greg, our head of legal, Nkasi, and our CEO, Anil. Our producer, TK, kicks things off. Here we go.

Keisha “TK” Dutes:
I had no idea people at Glitch were such extensive gamers. What are all your favorite games?

Nkasi Okafor Wilken:
Oh my goodness. Okay. This is sort of for nostalgic purposes, but also because it’s one of the franchises that manages to keep bringing it. So, the first time I got really into video games was my sister’s eighth birthday when my dad, which he doesn’t like video games at all, surprised her with a Nintendo. Right? And the game that he bought was the Legend of Zelda in the, if anyone remembers, the gold cartridge. It was such an amazing game. And still Nintendo is putting out the hits with Legend of Zelda, like the last one on the Switch, oh my God, what was the name of it?

Nkasi Okafor Wilken:
Breath of the Wild. So, funny story, I refused to start working at Glitch until I finished that game because it is such a gigantic time suck.

Anil Dash:
The truth comes out now. You were like, “I have some meetings. I can’t start right now.”

Nkasi Okafor Wilken:
Oh, yeah. Legend of Zelda. All of them. I even played it on the Game Cube, and it was Wind Waker on the Game Cube. So yeah, I would say that’s one of my favorite games, if not my favorite game game. Yeah.

Keisha “TK” Dutes:
What about you, Tim?

Tim Kington:
Go’s a strategy game from Japan. It’s, I guess, originally China… It was brought to the US from Japan, but it’s like 4,000 years old. And it’s a one on one game like chess where you have a board, black and white pieces, and it’s a zero sum game. So, somebody win’s, somebody loses. The rules are extremely simple, and it’s really deep

Anil Dash:
And Go’s also how they test a lot of coding and testing AIs and things too. Right? Is it sort of like a common coding challenge as well?

Nkasi Okafor Wilken:
Is that the game in Avatar: The Last Airbender?

Tim Kington:
Oh, Avatar. No, it’s not. It has the same flavor kind of, yes. Something Lotus, I think it is.

Nkasi Okafor Wilken:
Yeah. Yeah. For like the Lotus tile?

Tim Kington:
Yeah. It feels like that kind of, but it’s not the same game.

Tim Kington:
Yeah. Go’s used as an AI challenge, and for a long time it was considered sort of the pinnacle of AI challenge. Chess had been knocked out 20 or 30 years ago, and Go was the next big thing. I thought computers won’t be able to beat professional humans at Go. So, I gave a Friday talk here about Go and AI and why it’s so hard, and talked about how it’s at least 10 years away. And then, I gave another talk about six months later saying a computer just beat a pro.

Nkasi Okafor Wilken:
Greg and Anil, what are your favorite games?

Greg Weil:
Halo 3 because that had this whole custom game system, which was pretty new at the time, where you could to lay out stuff, make your own map, and then they had a separate game type system. And it was just a ton of fun playing like weird modes that people came up with where all of a sudden it’s like, “Oh, everyone moves 10 times faster because there’s no friction and you’re at the bottom of a big slope and there are cars sliding at you really fast that the other team is in, and you just need dodge the cars because if they hit you, they win. But if they miss, they’ll fall off the bottom of the ramp and into the ocean.” Just really weird ideas like that, which were just a ton of fun to play.

Anil Dash:
A couple of quick ones. Back in the ’90s, Lucasfilm, George Lucas’s… like the Star Wars company, they had a company called Lucas Arts, and they would make games. And they were mostly like a star Wars version of whatever games were popular. And then, they did one game called Grim Fandango, that was themed around the Day of the Dead in Mexico, and it was like a a murder mystery, Noir thriller, adventure game with really heavy candy skull art. it was just beautiful and great world building, and I’d never seen anything like it. And I think that really changed my perception of what games were. I think in a similar vein, the first Portal game just blew me away.

Anil Dash:
It was like you felt your brain bending, it was thing teaching you as you went. That was actually in the first notes of when we were prototyping Glitch and stuff. The first thing I thought of was Portal was this idea of what’s possible changes as you use it? And you want something where playing it teaches you what you could do. I just thought that was masterful game design.

Anil Dash:
My all time favorite game is Mario Kart. Obviously, there’s the trash talking part and whatever, but the serious part was like, it was something where there was both immediately accessible to a normal person who could walk in and just button mash and do all right. And then, there was this infinitely deep finesse where the more you want to practice and you wanted to have your preferences… I like this character and this car and whatever. And I just really, really loved the blue shell, which was this idea… Everybody hates the blue shell, and what I loved about it was there was an intention to the game design, which was like, if you’re running away with it, and it’s not fair and it’s not going to be fun for everybody, the game is going to empower somebody to be like, “All right, let’s keep it close. Let’s keep this thing fun.”

Anil Dash:
So, there’s a whatever, a kid that’s playing for the first time, and somebody like me who’s been playing for 30 years or whatever can play together and still have fun. And I see that now all the time where I got a kid, I got an eight year old son, and he’s good. I don’t have to spot him. He’s doing all right. But even before he was, you could play something together and share this thing, and it’s the nostalgia aspect of like, “I grew up playing this and you grow up playing this.” But also, that intentionality, I think about all the time. Somebody made this technology, and you think about all the math behind it to get all these shapes up on the screen, and they’re like, “We’re going to design a system where people can sit together and have a good time together.” And that shows up in the work. And I just thought, “man, those people were doing good with their lives.”

Anil Dash:
Literally from day one, it was always gamers, but it was a lot of… Well, board games was a big part, so it wasn’t always video games. So, the DNA, the gaming DNA, of the company is deep.

Keisha “TK” Dutes:
I heard there was a bridge game. Is that true?

Tim Kington:
It’s true. Yeah. That one got started because our former president, Rich Armstrong, was really into bridge, and I think I mentioned that I played bridge when I was here my first week or something, so he wanted to get a bridge game together. And we drafted a couple of people and made them learn bridge.

Anil Dash:
I came in, and I’d heard about the bridge game. It predated me. And I joined the company, I was like, “This sounds like…” I pictured like a dark room and everybody’s got those accountants visors on, and you’re just about to get… Like they’re going to run the table [inaudible 00:00:08:27]. They’re just going to [inaudible 00:08:28] you because they’re like the bridge experts. There’s Tim’s, who’s like the mathematical mind, and they’re like, “Oh, I’ll just teach you how to play.” Really, you’re just outmatched.

Keisha “TK” Dutes:
I heard from a little birdie that also we had a connection to the folks at Slack or a connection to playing games on Slack?

Anil Dash:
Back in the day, they had started a game called Game Neverending. God, this was probably 20 years ago at this point. And it was beautiful and this great art, and a core base and die hard users, but then everybody else is sort of like, “This is like intense. I don’t know…” You wouldn’t casually go up to Game Neverending and start playing it., And then they built another game, and it was called Glitch, and it was the same as Game Neverending. It was like wild art, massively multiplayer game. Everybody’s in the RPG core base of die hard users, not a whole lot of people playing, and they had built a tool that helped them make the game, and that that tool was called Slack.

Anil Dash:
And then, again, they did the same thing. They were just like, “Nobody wants our games but we’re going to build the tool.” And then, they became Slack, and they’re now multibillion dollar company and I think all of those people have private islands or whatever. But I guarantee you when they’re going to retire, they’re going to be like, “Let’s build a game, and it’s only going to have a couple of users, but it’s going to be really cool looking.”

Keisha “TK” Dutes:
And then, you said we got our name was similar way?

Anil Dash:
Well, what happened was the team had built a prototype of what became Glitch, and we were like, “We need a new name for it,” or whatever. And I think just independently… Tim, you tell me if I’m wrong. My recollection is we came up with the name Glitch independently at one of the early meetings where we’re like, “That’d be a cool name.” But it was like, “Oh, but it’s taken.” And I was like, “Well, I bet they would do a solid.” So, because I knew them, I was just like, “Look, it’s not going to be bad. It’s going to be cool like your game.” And then, they were like, “All right, let’s do a deal and let’s get you the name.” And so, Glitch, for like the first, I don’t know, six months that Glitch was running, our site, our tools of Glitch were running, but one of the top search terms that would come in was Glitch the game because people were still looking for that old game in the [inaudible 00:10:26].

Keisha “TK” Dutes:
Well, we have a programmer that makes games here. Greg, you were telling me over beverages, I don’t want to say what kind of beverages, because you’re here, you’re a web developer at Glitch, but on your off time you make games. Can you talk about that a little bit?

Greg Weil:
I like making games a lot because whenever you’re making one, you end up touching a whole range of different skills, I guess, where you start out where it’s just, “I’m going to code up some movement. I’m going to focus a lot on just making it feel responsive and fun to play.” But then all of a sudden it’s, “I need some sprites for the character moving around, and they need to look good. And also, they need to still fit the gameplay and all the other different kinds of things.” And all of a sudden you need sound effects, and then all of a sudden you need the ability for multiple people to play together. And all of a sudden, it feels like you’re doing like 20 different skill sets but just a little taste of all of, which is a lot of fun to work on.

Keisha “TK” Dutes:
For you guys that make the things that we love so much, what are my game options on Glitch?

Greg Weil:
There are a couple games on Glitch that are kind of surprising and a little tricky to find sometimes. I saw one on the forum just like a week ago that was pretty neat. It looked like an online World War II bomber kind of thing where different players are… It’s massively multiplayer, everyone goes into a single world, and you’re flying around planes in the top down perspective.

Tim Kington:
There’s a Snake game out there that’s a clone of the old Apple II, Snake Byte, the grandfather of the Snake game on your phone.

Tim Kington:
Yeah. And that one has clones of all the levels. So, there were like 20 levels in that game, I think, and it has different walls in different places and gets harder as you go along. I kind of enjoy that one.

Keisha “TK” Dutes:
That’s classic. I’m going to jump over to Nkasi because I don’t think people think that the office’s legal counsel is going to be out here organizing a whole Mario Kart tournament. Can you talk about that?

Nkasi Okafor Wilken:
During my interview, and Neil, I don’t even know how it came up, but he’s talking about Mario Kart and how he was awesome at it. And I was like, “Oh man, I need to confirm all the boasting that was going on in this interview.” So, our onsite came along, and I was like, “Do you know what? This is the perfect opportunity. This is the perfect opportunity.” And so, actually, I got together with Greg and another engineer here, Victoria, and we created the Mario Kart tournament. It was actually really easy. Maybe we accidentally indexed for it, but a lot of people really know how to play Mario Kart, like serious, serious know-how. Like brought their own controllers, like, “No, I want to use this specific controller because then I can actually fly it into things.” So, yeah.

Keisha “TK” Dutes:
Playing games at Glitch sounds like inviting singers to karaoke.

Nkasi Okafor Wilken:
I mean, I guess. That is definitely true. I did come to [inaudible 00:00:14:00], but I didn’t think about it. I was just like, “Oh, maybe there’ll be three or four people that would be interested in that.”

Greg Weil:
Yeah, yeah. All the quiet folks all of a sudden got real loud. It was good.

Keisha “TK” Dutes:
So, with that being said, all of y’all, and especially Nkasi, any plans firstly for another Mario Kart tournament or any plans for any other game nights at Glitch?

Nkasi Okafor Wilken:
What I would really love to do, and whether it’s a game… I think you could consider it a game, but I love Rock Band. Love it. Love it. Love it.

Anil Dash:
Now that I hear that, that’s the most surprising thing I’ve ever learned about you. I’m like, “Yes, that fits.”

Nkasi Okafor Wilken:
I don’t know what you mean by that. We’ll have a discussion later.

Nkasi Okafor Wilken:
Offline. But that’s something I’ve been floating around in my head because, then, you can have people at the same time singing some amazing tunes. And I’ve learned a lot of different rock songs through Rock Band, that I had never heard of, and now are there on my iPhone playing it all day. So, that’s what I’m kicking around in my head for the next onsite.

Maurice Cherry:
Next up, meet Joe Gaffey, a telecoms enterprise software architect by day and a gamer and creative coder by night.

Joe Gaffey:
Yeah, I was into games and coding from quite a young age, actually. I remember seeing arcade machines probably in the early ’80s in local fast food restaurants and such places and thinking these were the best things ever. So colorful and loud and so different from anything else that was around at the time. And these were actually the first computers that I interacted with. Later on, we had an Atari 2600 in the house, and that got lots of use too. Then when I was a little older, I found some coding books in the public library, and I used to read the program listings before I even had access to a real computer. I got my first computer, then, from my parents for Christmas around the age of 10 or so. It was an eight bit era. Commodore 64, one of those ones with the cassette player for loading software. Took about 10 minutes to load 64 [inaudible 00:16:13].

Joe Gaffey:
So, I started coding basic games like Pong and brick breaking games and so forth, and Commodore PET BASIC. Then whenever I was playing commercial games on a C 64, I was always really trying to understand the game mechanics and looking for glitches and insights into how the game worked under the hood. Then once I discovered all of the mechanics of the game, I usually got bored and moved onto the next one or maybe try to recreate something from it in my own code.

Maurice Cherry:
With his love of old school games, some programming knowledge under his belt, and a desire to code, Joe got competitive.

Joe Gaffey:
Yeah. Get Up game off competition turned up with retro gaming team. I taught it. It was really a good opportunity to bring together some of my different interests. I was originally thinking of of Asteroids, a clone of Asteroids, perhaps with a mix of like Lunar Lander mechanics thrown in. But then I thought about those old, colorful, and loud Galaxian and Galaga machines. I thought it would be a great example of a retro gaming game to show my kids and hopefully get them into interested in coding as well. To make it a little more interesting for modern audiences, I added some original mechanics like the [up 00:17:24] red pills, the destruct orb, smart bomb, and the wingman assist, and of course the end game boss battle. If you use one of the destruct orbs just at the right time, you can take out an entire wave in one shot, so there’s a little tip. A [inaudible 00:17:39] in the game off that year, which I was very pleased with.

Maurice Cherry:
Here, Joe weighs in on how he used Glitch to make Galaxeroids.

Joe Gaffey:
Well, I really key benefit for me was portability. I did not much free time when he’s working on Galaxeroids, so I was taking every opportunity to get some coding done using whatever device I had to hand. And having the web based editor made this really easy of course. I actually coded it the whole thing and produced all of the art assets such as they are in the browser as an experiment to see if it all could be done that way. Gethub integration was also a great help, so I could easily create snapshots and forks as needed. Example, for releasing into different app stores. I actually published Galaxeroids into the Microsoft store and the [inaudible 00:18:22] game store as a progressive web app. T. Then making Galaxeroids a PWA on Glitch, I was able to test on any mobile device I can put my hand on, and I was able to send beta links to friends, to family to test some their devices and then make changes on the fly so I could test the fixes immediately.

Maurice Cherry:
It’s no secret. Joe loves retro gaming, but he’s really got his eye on the future.

Joe Gaffey:
I like to play simple games with my kids like platformers, like Mario Bros. and Tetris, but I’ll give most genres a go. So, I’ve done some other experiments with games. In another experiment on Glitch, I built a Guitar Hero/Rock Band clone called Rockstar, which uses the web MIDI and web Gamepad APIs. [inaudible 00:19:07] playing along with MIDI tunes using the actual Rock Band instruments, guitars and drums. It actually worked pretty well in the end. Needs a little bit of UX tidying now, of course. More recently, I’ve gotten into driving simulators in VR, and that’s a whole different experience. And my latest splits experiment, which I called WD-40 for some reason, comes from that interest, and so my first real attempt at 3D programming on the web.

Joe Gaffey:
It’s a physics-based driving simulator based on three.js with ammo.js physics. And it’s pretty basic right now, just extends one of the ammo.js code examples. But my idea is to use it to experiment with upcoming web standards like the upcoming USB web hitch ID, human interface device API, so I want to see if it’s possible to build a full driving simulator where USB-based steering wheel and pedal controls, including full force feedback, just using web standards and technologies running in the browser. I eventually, I’d like to experiment with WebXR, as well, and mixed reality. Maybe driving an RC car remotely on the web over WebRTC, that sort of stuff. Like somebody [inaudible 00:20:24] experiments, I try to push the boundaries of what’s considered feasible to do with web standards technologies in the browser and keeping the source code as open and accessible as possible at the same time, and Glitch is really perfect for that.

Joe Gaffey:
I’m quite passionate about the open web and the idea that anybody can look under the hood of a website and see how it works just by clicking on the view source option. Unfortunately, that’s not so easy to do these days with modern web frameworks, but you want to be able to take advantage of JavaScript and create this rich experience that offers, especially for games and demos, but ideally to do it in a way that supports open and accessible coding. I think in this way, platforms like Glitch shows there’s a real opportunity to realize the vision of the social rewrite web as originally described by Tim Berners-Lee in the early days of the web.

Maurice Cherry:
Now, let’s talk to a member of the team to get the lowdown on some glitch apps that anyone can code, use, or remix for themselves.

Multiple Speakers:
Welcome to the App Review.

Keith Kurson:
Hi, I’m Keith Kurson. I’m an engineering lead at Glitch. I run what is now called the Dotcom team. So, we make everything on Glitch that isn’t part of the editor, so the front page, collections, user profiles, all of that.

Keith Kurson:
One of my favorite is called Figma Pacman, and I use this tool called Figma which is what our designers [inaudible 00:22:01] use and a lot of other designers to build layouts. It’s sort of the design tool at the moment. But we’ve seen some really interesting uses of Figma and other tools that aren’t traditionally used for this on Glitch. And so, Figma Pacman is an example of an app where you, in Figma, draw a little maze like what Pacman runs through, and then Glitch users can plug in that URL and then play Pacman on that maze. And so, it’s a really cool combination of two different tools. And people who aren’t that technical… So, it was made by a designer who uses Figma all day and doesn’t get a lot of time to do programming, and so anyone can jump in and make their own maze without really needing to know how to program. And I think that’s really cool and shows off what Glitch games can look like.

Keith Kurson:
And then, the second one that I really, really love, that I’ve played a bunch of times, is called PowerSlides, and you’ve probably seen some version of this in the city that you live in performed live. But basically, it takes a bunch of random slideshows from all over the internet, so government slideshows, weird marketing slides, things like that, and combines them into one huge database. And when you start the game, it chooses 10 of them randomly and you have five minutes to give a South by Southwest style presentation with these totally random slides that could just have a picture of a dolphin and say, “Think of the dolphins,” or a text line that just says, “iPhones for dogs,” and you have to give a presentation like you’re trying to sell this thing. And that is really fun to watch people do.

Maurice Cherry:
Want more gamer goodies? We made a collection filled with bonus content where you can play the Glitch apps mentioned in this episode, see a list of the team’s favorite games, and check out a game related articles and more on Glimmer. You’ll find a link to the collection in the show notes. That’s it for the first episode of Shift Shift Forward, a show about everything that makes Glitch the best place to create on the web. Our website is glitch.com/SSF, and our Twitter handle is @Glitch. Let us know what you think about this episode on social media by using the hashtag #shiftshiftforward. And if you really liked the show, then subscribe to us on Apple Podcasts, Spotify, Google Podcasts, or wherever you find your favorite shows.

Maurice Cherry:
Here’s what’s coming up on Shift Shift Forward. A lot of us are sheltered in place and adjusting to the reality of living and working from home for the foreseeable future, and technology is a big part of that. So, who is considered to be in tech these days? 

Maurice Cherry:
Shift Shift Forward is produced by Maurice Cherry and Keisha TK Dutes, with editing by Brittany Brown and sound design and mixing by Keisha TK Dutes. Special thanks to the entire team at Glitch.

He also serves on the boards of the Electronic Frontier Foundation 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

Open World is a fiction anthology podcast about how science and technology serve as a backdrop for imagining a better future, helping us envision the positive influence that science and tech can play in a real future. 

Open World is produced by Keisha "TK" Dutes and hosted by critically-acclaimed podcaster Rose Eveleth, for Glitch. By speaking to the pressing concerns of our times through love, friendship, community, compassion, and sustainability, the host will help listeners imagine new ways forward into a future that is less scary and more positive, and something we can start working on constructively.  

Open World launches weekly episodes in Spring 2020. Want to contact the show? Email youropenworld@glitch.com.

Open World

Shift Shift Forward is a podcast that showcases everything that makes Glitch the best place to create on the web. We’ll talk to some of our top creators, explore cool apps, and even hear from the people who work at Glitch!

Shift Shift Forward

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

Welcome to the Glitch Blog ✨

— Glitch Blog

If we had to pick one word to describe July 2022 for the Glitch community it would be movement. Regardless of whatever else is going on in the world, the creators keep pushing forward, building apps for loved ones to keep moving through the world, personal economics calculators to keep those numbers flowing, even an app that just bounces around to the delight of everyone who sees it. So take a quick break with us, as we review the new and fascinating contributors from the Glitch community over the past month. 

~bigboxgas by @FlantasticDan is a search engine for “big box” gas prices that looks way nicer than Costco’s app for this.

~real-coal-neon by @camclay helps you calculate what remote work saves you (and the Earth)!

~dekadeka by @noty2008 is a simple page with a contenteditable area so you can click and edit the text. Tip: nice to use if you want to hold your iPad up with a note to a loved one when you’re picking them up from the airport!

~simple-period-tracker is a period tracker that @rahatarmanahmed made for his wife with privacy in mind. It’s a progressive web app and saves the data to local storage instead of the cloud.

~basic-rough-notation by @pshihn is a demo of this really cool library, RoughJS, that lets you add visual notations to your webpage! Check out their playlist for more RoughJS examples.

~cola-calculator by @dphiffer is a cost of living adjustment calculator

~essentia by @EricEisaman is a series of demos of Essentia.js, an “Open-source C++ library for audio analysis and audio-based music information retrieval.”

~lsdsng-to-html by @aga68k converts lsdj to other formats. It got a nice shoutout from someone who made a cool visualizer with it!

~relative-fiction by @filipnest uses the Foursquare and OpenWeatherMap APIs to let you create dynamic stories relative to where your reader is, which is really fascinating!

~trail-talented-angelfish by @AKST is an app that renders sheet music, a great starter for your future music apps!

~hushed-airy-dragonfly by @aidelojejoshua counts how many vowels are in a string. May or may not be related, but the Bee Movie script has 14438 vowels.

~srcsnap by @LingDong- connects screenshots with a particular project revision, a tool for and by generative artists.

~discover-music by @tomthecollins is a music discovery tool made through research at University of York.

~momentous-dusty-alloy by @hitode909 was a widely shared page that let viewers watch the different stages of the Fuji Rock Festival in parallel.

The first Glitch app to ever go viral, ~f1-start by @jakearchibald, had another wave of shares on Twitter as people there tried to see who has the best reflexes.

~caninclude by @CyberLight has been around for awhile but it’s worth sharing again for newer folks. It’s a widely cited tool for seeing if you can put a given HTML element inside another one. Use it next time you even think of putting a div in a button!

~stellenbosch-heritage-tree-storymap by @wihan is a storytelling map of “exceptional” trees in Stellenbosch.

Some clocks: ~qr-clock by @pi43r is a QR code, and ~css-binary-clock by @christianp is a great starter for a binary clock or timer!

~marbled-paper by @nonphoto is a simulator we never knew we needed but have definitely been missing: marbling paper virtually!

~days-since-last-uk-politician-resigned by @leighghunt was widely shared as UK politicians were resigning in droves recently.

~3dep by @giswqs is a map that compares the tiles available in the USGS 3DEP LidarExplorer versus Google’s Earth Engine.

~uk-nutrition-label by @acme is an app that generates simplified nutritional information about packaged food in the United Kingdom.

~spring-tricolor-shop by @aidelojejoshua is a character counter—very useful for prototyping tweets or other strings with a character max! They also made this anime quote generator, ~shell-golden-operation.

~polarized-faint-asparagus by @higashi.kota used Flubber for a smooth as butter animation.

~resonance-choir by @tomthecollins and @jemily was an installation at Web Audio Conf that happened last week. It uses the Resonance Audio SDK to let listeners immerse themself as if they were in the venue!

~arithmos by @Kiritchell is a number guessing game

~nothcom by @jooooooon is a puzzle game inspired by the iconic riddle, notpron.

~motley-intelligent-author is a cute and satisfying little app made by @cora+glitch. Remix to edit the table content and flip all the things in your life that need a good flipping!

~faint-infrequent-breeze by @caesiumtea is an incremental game

~netronics-mapmaker by @Osmose is a prototype tilemap editor for people building custom BBS servers in the game Last Call BBS

~bitter-snowy-catboat is an interactive fiction app and @tenderblackfeelings’s first HTML game! Great work! 

In case you missed it, we also profiled design researcher and creator Elvia Vasconcelos on the Glitch blog this month, so please check out our discussion with her on the politics of participation, and honestly like a hundred other intriguing things! As always, if you have Glitch projects or playlists you built or love and want us to feature, either share them on the forum, tweet them to us @glitch or email community@glitch.com—we’d love to see your work in our next roundup!

The project featured in this post’s header image is ~500-breezy-cursors, another new classic by @adarosecannon. 

If we had to pick one word to describe July 2022 for the Glitch community it would be movement.

Last month on Glitch, the July 2022 edition

Have you ever been scrolling along the web and you see something that not only jumps out at you, but makes you realize you have to spend more time investigating this new discovery? That’s how we felt when we discovered Elvia Vasconcelos’ work on Glitch. She has created individual worlds of discovery through taking non-digital objects like sketchnote drawings, pottery, embroidery, and collage and sharing them with Glitch apps, in a way that combines the feelings of being in an art gallery or studio, or having a deep conversation with a trusted friend. It’s hard to articulate the richness of her work, so we reached out to Elvia and she agreed to an interview with Director of Community, Jenn Schiffer. 

Jenn: So I think to get started, I just want to know who you are and what is your daily discipline or job? What’s your story? 

Elvia: I’m always super interested in hearing about the work that I do, how does it land with people? How does it resonate, and also what connections people make. And I’m particularly interested in your experience because if you have this overview of the things that people are experimenting with in Glitch, I’m sure that you will see patterns or trends emerging, like how people are using this platform to work through their practices. That’s my personal curiosity. But I’ll tell you a little bit about who I am.

So my name is Elvia. I am a design researcher, which can mean nothing, but currently I’m doing a PhD at the Eindhoven University of Technology in the Department of Industrial Design. And my research is about collaborative methods in design research. Practically I’m interested in how people do things together. Before I started my PhD, I worked for eleven years in the UK as a user researcher, and I specialized in digital government services. My role was essentially to work with the teams that were creating digital services, like a website where you could fill in your taxes or apply for a passport, renew your things. And my role was to bring civil society into these processes. I acted as a bridge. So my research is about how you bring people into structures, processes, and I’m specifically interested in the politics involved. So—who gets to participate in what way, and what kind of power/configurations exist in these places? 

The sketchnotes come in…and specifically, I think through Glitch. The way I’ve been using Glitch is to work through my research questions. I really struggle with writing and articulating myself with text or words, and language in general..and so it’s much easier to kind of draw things out and be like,“ Okay, I’m interested in this, this and that. And the connections are this.” I find it easier to have, almost like maps. 

A visual essay created by Elvia incorporating illustrations, handwriting, markdown, embroidery, and ceramics to explore behaviors around food.

And Glitch, for me, has allowed me to create…I’ve been calling them online essays, but it’s these complex maps of things that combine the sketches with text and links and stuff. It’s been really great to really use it as a surface to unpack things and see what comes out. 

That’s really cool. I think the thing that caught my eye, the one I saw originally was where you were recreating your sketchnotes with embroidery and ceramic. The first thing I saw was a ceramic. I was like, “Oh, this is really cool.” But that’s further ahead of the process. So I want to think back to sketchnotes in general, what brought you into that world? You talked a bit about what purpose sketchnotes have served in your work. Have you been creating them awhile, or is this something in your recent PhD work that you’re exploring?

Essentially they are visual notes that combine simple drawings with text and they are different from drawing or illustration because they are mostly about doing something live and they’re very much working processes. I started doing sketchnoting in 2011, I think—so eleven years ago. And because sketchnoting has a kind of root in the UX industry, so you can see lots of people doing graphic recording in conferences. And so the reason I started sketchnoting was because at the time I had finished a master’s degree in Digital Arts and I was trying to get a job as a user researcher. In London there’s associations and conferences and events every single day. And one of the events that I started going to was the User Experience Professional Association, it’s a volunteer-run association and they do these monthly events. Everyone can come and there’s always someone sharing their skills. And after going to a few of those sessions, I thought, I really want to get involved. But I didn’t feel confident to have a voice, for example, on Twitter. I just felt I wanted to do something, but I felt really shy. So I reached out to the volunteer person and I was like, “Okay, here’s my portfolio. How can I help?” And they were like, “Well, you can sketch the event.” I was like, “Sure, I’ll do that”. And I walked out of the meeting and I had to Google what sketchnoting was because I had no clue. 

Then I just started. Every month I went to their events and I started doing the sketches. At first it took me a long time, and then I started going to all the events I could find and sketchnoting everything: podcasts, lectures, online, and for, I would say, a good three years, I sketchnoted like every week. Then I started doing live conferences and becoming more confident, like sharing it on Twitter and stuff. Then I started slowly doing it a bit more professionally and doing it at work. So sketchnoting the meetings that I was in, and then I started using it as a tool with the teams that I was working with. Then I started doing it live on big walls and it built up more in a kind of commercial sense.

Okay, I’m going to stay up all night. I’m going to create ten pages. This is amazing. Why has nobody told me about this?

I created some courses, so I trained people as well. But then at some point, and this was at the same time as my own practice, I was feeling quite dissatisfied with the commercial world of user experience and of design in general. So I started looking at critical design, social design, and trying to figure out how I could create the practice or another model of a practice for me. The sketchnotes kind of became a tool for me to articulate my work and figure out where the edges of things were and how to communicate.

And now in my PhD, in my research, I’m actually part of what I’m doing. So together with looking at collaborative methods and co-design and the politics of participation, I am also doing that through sketching. And so proposing sketching or sketches is a visual research tool and specifically I’m looking at establishing it as a surface for exchange. A conversation interface in long term processes. 

You mentioned that you’re interested in the politics of participation, like who gets to be involved in what way and who doesn’t. And it’s interesting how your story of sketchnotes starts with you seeking a way to participate and that working out well. That kind of interaction and permission to create and collaborate really resonates with me, personally—AND I think the Glitch team and Fastly overall, when we think about designing and building products that enable creation on the web. So it’s really serendipitous and really cool that your work has ended up on Glitch and so my question is, how did you find out about Glitch?

A few months ago, I was part of this course called Digital Love Languages, organized by the School for Poetic Computation. The course was amazing. And I signed up because it’s quite interesting that you point out that in the beginning, my journey was about wanting to participate and wanting to have a voice. And actually a lot of the stuff or one specific thing that I’m investigating about sketchnoting is this question of voice. Who holds the pen? And what kind of our configurations are obscured in the sketches, like the places where these things were taking place anyway?

But the School for Poetic Computation, it’s related because the premise of the course was like “What would our digital tools look like if they were designed by the people that love us?” So if my mom was creating the tools for us. The whole course was  ten weeks about subverting all these notions around digital languages, and that included the tools. They talked us through basic programming languages. But a lot of tools were introduced to us, and one of them was Glitch.

I don’t know if it was halfway through the course, but I remember when I started using it that I was like, “Okay, I’m going to stay up all night. I’m going to create ten pages. This is amazing. Why has nobody told me about this? And I live here.” I was so excited because it’s like, so easy. And I’ve tried. My portfolio website is on Cargo Collective. My blog is on WordPress. Then I have Are.na pages. I have stuff all over the place, but none of the platforms ever seem to stick. And with Glitch—I’m still struggling to stop—I have ten online essays now, and I’m still like, “Okay, I’m going to create the next one, next one.” But then I’m like, “Okay, wait, how are you going to connect all of these things?” But yeah, that’s kind of how I got into Glitch. As soon as I started, it opened a lot of paths for me. So it was amazing.

It’s great to hear. And I think seeing work like yours on Glitch kind of unlocks ideas in our head. We’re always constantly surprised in a good way of what people are bringing to the platform because we have developers who are building stuff for work and stuff like your work is really surprising and joyful. That’s what we really like. And also the aesthetic of your sketchnote apps on Glitch are really cool looking. So that’s also another kind of surprising thing, the way that you lay out everything, it’s almost like poetry in the process, which is really neat. Another thing I saw you mentioned: your work explores sketchnotes as a conversation in one of your projects. And I’m wondering if there are other situations that you found through your work where sketchnotes are a great tool that maybe the rest of us who aren’t necessarily in the user research space could use. Where would sketchnotes be useful? 

Sketchnotes or sketching can be useful in a number of different ways. So there’s a lot of people using it, or I’ve seen it being used, and I’ve used it in my own workshop as a kind of a reflective tool. Something for yourself, something that you can use to articulate your thoughts in a different way.

And the reason why people tell me that this works for them is because you are not forced, when you sit down and you have a piece of paper and you’re trying to first just put the stuff on the table, and then you’re like, “Okay, what came out? And what do these things say together?“ The way that you are articulating your thoughts is different than if you were speaking or writing about it. So things come up that you look at and you’re like, “Ah this is interesting.” Or in group settings, sometimes you try to explain something to someone. But if you grab a pen and paper and then you put it on paper, then suddenly the other person is like, “Ah, I see what you mean.” It gives something that you can point at, and because it makes things tangible and concrete, they can also be manipulated. Because you can point at it, you can challenge it, you can add something to it, you can add layers, and you can also see how something has evolved. If you do several iterations of something, you have almost like these snapshots, a set that shows, “Okay, first I brought this, then I added that thing…” And there are different ways of doing that.

🌝 Cake is layered. 🌚 Life is layered: An online essay created by Elvia dissecting ideas around questioning, citations, and layers. 

So I think this is not only applicable if you work in the digital industry or as a UX researcher. It’s really about figuring out if using a visual tool, in this case, you know, pen and paper would help you in working through whatever it is that you’re working through. And I don’t know if that’s applicable to the work that you do, but yeah, I find it really interesting as well, this crossover between fields. That’s how I started doing stuff in fabric and in ceramics. But also it’s the same thing when I start working in digital. So working with Glitch for me, was like using digital material and how that intersects with the sketchnotes. I really like the in between things. 

Yeah, because it continues the process, and I think I enjoy the process, more so than the output sometimes, of the art and even work that I’m creating. And I think—I wonder beyond Embroidery and Ceramic, your using Glitch to document your sketchnotes work at this really unique and fascinating meta level where your Glitch profile and even your individual projects are like sketchnotes of your sketchnotes about sketchnotes! Beyond all that stuff and different mediums, what else are you exploring with regards to creating or using sketchnotes? What’s next?

The articulations in Glitch are actually bringing to life what I’m exploring because I’m looking at annotations within sketchnoting and layering. So the mechanism of layering things. For example, if you use transparent paper, like architect paper, you can add layers of things. Or, if you use two types of pens specifically around authorship. If I’m drawing now with blue, I can say “Blue is my voice and then red is Jenn’s voice.” And then I can go back to it at another time and add a green, which is thoughts that I had afterwards or connections that I saw. So I’m looking at layering, annotations and authorship, really kind of issues around agency and voice. And with Glitch, I’ve done a few experiments with hiding layers of information that are hidden.

What would our digital tools look like if they were designed by the people that love us?

One of the examples and a person I follow a lot is Mindy Seu. They have these websites and one of them was around images, and the content was inside the HTML markup. So I did a few experiments where I was using alt text and I thought, “What would a website look like if it was designed, instead of being designed for people that can read text, if it was designed for people that use screen readers first and not second?” And so if you don’t use the screen reader, you only see the images, but the real content is in the alt text, so it can only be accessible through a screen reader. And so I guess, together with authorship and layering and annotations, I’m thinking of how you think through making switched modes and roles so that you kind of challenge the way things are being constructed…through making it clear that things are being constructed prioritizing certain ways of working, certain bodies, certain types of knowledge. And I’m always looking for what’s absent or what’s excluded. Again, going back to voice, it’s like who’s present, but most importantly, who’s absent or whose voice is suppressed?

Yeah, you call out specifically paying attention to authorship and absence, voice and agency, inclusion, exclusion. So you’re researching a lot but basically focusing on systems and process, not necessarily just the output. I think that’s really important, especially, as a software creator, we’re all kind of living in this world where we have to deal with the fact that a lot of people were not thinking about voice, agency, inclusion, authorship, absence. And now we have this output and we’re like, how did we get here? And through your work, I’m wondering what are some ways, or some advice you might have for software creators, including those of us at Glitch, where we can actively pay attention to those themes? Have you seen prior art that’s good, or is it just all examples of what not to do?

An example that came straight to mind is the work of a scholar called Flavia Dzodan. I watched one of their talks, and it was about the genealogy of big data. And I sketched it out as well because there was so much I needed to get my head around. Essentially, what they did was draw a line from the first ever census in the 17th century all the way to the data sets that are being used in big data. And the argument that they created is that the way that humans have been classified as the categories that were created in the beginning have unfolded in time in these structures to categorize people and create hierarchy between them. And they have been used by governments to structure the way that we work. So they’re the backbone of the technologies that we use. For me, as a creator, but also as a consumer, in terms of the digital technologies that I use and the platforms that I use, I appreciate very much this effort of making these things visible. So the implications of the tools that we use in the sense of everything that is in the background that supports me being able to create a Glitch page just like that. But there are consequences for people and for the planet. And so this is all quite abstract, but I’m not looking for answers and solutions. I think there’s a lot of work that can be done about making these things more visible and explicit, even if they’re problematic.

So in terms of the Glitch community, it’s like what are the problematic constructions behind the technology that is needed for this platform? Are there ways of working through it? I guess as a community, I think personally what draws my attention, but I also appreciate that it’s quite a difficult and tricky area to go to.

Thank you so much! This has all been really awesome and I’m really excited about your work. And I know you have a bit more of your PhD to go, so I want to know what is next? And besides Glitch, where can people find your work?

In terms of what’s next, I am continuing to create Glitch pages, and I think I’m going to continue because it’s really opened up a lot of pathways for me. I’m keen to see if there’s a way of playing more with the digital materials that Glitch offers and I guess that’s HTML markup or the elements, but also seeing if there’s a conversation that can be had with the paper sketches. And I’m not entirely sure what that means, but I’ve been thinking of inbetween technologies like scanners, not photography, but scanners. So I’m trying to see if there’s a way of exploring the materialities of things in between before it gets to Glitch and paper. So what are all of these things and seeing what comes up. 

In terms of where people can find my stuff, I’m on Instagram. I have two accounts, of course, because why not? And one of them is like, the historical Sketchnotes are awesome. I didn’t think too much of the label when I created it, and that is more my basic commercial sketchnoting. And then I created a new one, which is called Materia. I created it because I wanted an account that could make a comment about the other accounts, almost like a different layer of commentary.

Thanks to Elvia for chatting with us about how Glitch has enabled her to visualize her research in new and exciting ways. If you build or see an app on Glitch that you want us to feature, we’d love to know! Email community@glitch.com or tweet @glitch!

Have you ever been scrolling along the web and you see something that not only jumps out at you, but makes you realize you have to spend more time investigating this new discovery? That’s how we felt when we discovered Elvia Vasconcelos’ work on Glitch.

Sketchnoting, layering and making connections: A Q&A with design researcher Elvia Vasconcelos

This latest edition of the Glitch community roundup is dedicated to everyone who has tried to do a new thing and learned something cool. Experimenting is brave and sometimes frustrating work, and we think it’s important to commend everyone who tries! All this is to say that we wouldn’t even be able to put together a roundup without you visionary, mistake-making, project sharing people! Thank you for creating and giving the community new ideas to try each and every single day. 

Other things that happened in June ☀️

Fastify updated to v4 so Glitch starters got a little bit smarter too!  

We introduced a new series called This Was Too Big to Fit in Our Newsletter, learn how our homepage rainbow headers came to be!

We’re asking for your ideas that could help determine what kind of Glitch gear gets made! 

And now, onto the good stuff. In June 2022, the Glitch community created these. 

~almina-webgl-works-01 by @almina-orange is the first of their cool Three.js work on Glitch

~memory-village by @aTylerRobertson is an A-frame scene where you can leave notes around the web—metaversal geocaching!

~aframecomic5 by @emmettbaber is a mobile-friendly A-frame app that lets you navigate comics. Super inspiring, and Emmett is the creator who made their link in bio app in AR

 ~vissionss by @nappingg is a sweet song from an artist who coded this page themselves for it!

~false-aeolian-rondeletia by @higashi.kota is a neat CSS conic gradient demo. Check out their profile for other cool explorations of CSS and JS-generated art.

~pleasing-pattern-generator by @aTylerRobertson generates really beautiful patterns! He uses it to generate backgrounds of his Glitch in Bio on the fly!

~noiseless-sepia-ornament by @elvia.vasconcelos is a really awesome documentation of their process in turning their sketch notes into other media like embroidery and ceramics. Also take a look at ~hushed-wheat-chips, an intimate, visual essay challenging the process of questioning. 

~baths by @bradley lets you know who’s in charge at the iconic Russian & Turkish Baths in NYC, as in, the official site links to it lol.

~arrow-nickel-anise is a rock, paper, scissors game made from some #100devs participants!

Heardle variants are still going strong, but here’s a unique and cool clone themed around game show themes, ~gameshow-rdle by @jsach65.

~dotthing by @supermason.0209 is a mobile game where you gotta tap the dots before they disappear.

After we featured ~nails in our newsletter, @KaraAJC wrote in with this remix that adds SOUND! Click and drag inside the embed for full effect.

~fast-goblin-text by @wampastompa ˡₑᵗ'ₛ yₒᵤ ᵗyᵖₑ ᵗʰₑ wₐy ᵢ ᶠₑₑˡ ˡᵢₖₑ ᵢ ₛₒᵤⁿᵈ (“let's you type the way i feel like i sound”)

~weird-ai-prompt-generator by @samplereality is a prompt generator for when you run out of ideas to feed weird AI tools

~50in50-meetmyfurkids is the first of 50 projects in 50 days from @rogermullins.mba. The animals are adorable, and it’s a great remixable expanding card app to use for your own photos!

~terrain-generator by @ARMN88 is a really cool Minecraft terrain generator that lets you in on the drawing process. 

~dct-station by @ffd8 encrypts messages in JPEG files by exploiting its compression process.

~unity-issues by @marwie and @herbst is a public API tracking Unity issues

~copy-js by @codingjlu is a library to implement copy-to-clipboard with open web technology. Did you know we used to need Flash to do this? 

~social-branded-snippets by @mc.reidie is a really cool tool for generating nice-looking code snippet cards to post on Twitter

As always, if you have Glitch projects or playlists you built or love and want us to feature, either share them on the forum, tweet them to us @glitch or email community@glitch.com—we’d love to see your work in our next roundup!

The project featured in this post’s header image is ~softxels-walker by creator @DaniGatunes, who is always blowing our minds with their Three.js and generative 3D work. Using their library softxels.js they created ~softxels-walker and many other generative walker experiments for generating 3D worlds on the fly.