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

Over the last few weeks, people all across the internet have found joy in playing Wordle, the simple-but-addicting word game made by Josh Wardle. Wordle's gameplay is basically guessing letters until you've deduced the word of the day, similar to the classic game Mastermind. And no small part of the appeal is that you can only play the game once a day, and after you win, you're immediately prompted to share your win, either on social media or as a message to friends. The signature block of green emojis was mysterious enough to pique the interest of many, and helped Wordle spread like wildfire.

But, as the New York Times documented, Wordle is just as interesting for the context in which it was made. Josh made it as a gift for his puzzle-loving partner, Palak Shah, and the Times rightly described it as "an act of love". Being a community of people who make the web, our perspective at Glitch also found a lot of romance in the idea that this is a fast, simple, well-implemented web app. Wordle is a PWA that can install instantly on any device, doesn't have a ton of extraneous junk loading on the page, and it's really speedy (a Lighthouse performance score of 95!).

No surprise, then, that Wordle has inspired a host of other creators in the Glitch community and elsewhere to make their own riffs on the idea, all of which bring fun and interesting innovations to the game:

Lynn made "hello wordl" (love that name!), which describes itself as a simple Wordle clone, but it lets you play as often as you want and you can also try to guess longer words. You can check out the source on GitHub.

Potch made Worble here on Glitch, which straightforwardly mimics the original game, but set the stage for some fun and interesting remixes.

Stuart Houghton remixed Potch's Worble into Sweardle — the four-letter-word version of the game. Obviously, that one might be a little bit NSFW, but it shows the power of making it easy to remix, because a half-joking version like this probably wouldn't be worth making from scratch, but if it's just a matter of modifying an existing game to have it focus on curse words, then it's all fun, no drudgery!

And then Jordan Bouvier took the idea to its logical conclusion, creating Queerdle. Jordan warns that some of the words in this one are definitely NSFW, but there's undoubtedly a delight in creating a fully-yassified version of the game. It's an act of love in its way, too!

We expect there will be many more riffs on the theme in the days to come, as Wordle-mania reaches its peak. But in the meantime, we've gathered some of the examples above into a playlist you can check out for yourself. (Be sure to suggest any variations we've missed!)

There are big lessons from the attention and enthusiasm around Wordle that feel important to emphasize as we start a new year:

It's absolutely possible to make something that's wildly popular and beloved solely by making a regular web app.

A lot of the best things on the web are made as acts of love or kindness for someone in one's life, or for a community that means something.

People are especially enthusiastic about things they can share without having to go through an App Store, or without being bogged down by having lots of their data captured during the experience.

Users appreciate when you respect their time and attention and don't just try to capture all of it. Earning a few minutes a day in someone's routine is a wonderful thing.

When you make something great using the web, others will be inspired to make their own versions of it, for fun or for learning, and it gives even more people a chance to connect and have fun.

You don't necessarily need creepy "growth hacks" or weird incentives to reach your audience if they're genuinely enthusiastic about what you've made.

It's fun and funny to make immature jokes about curse words, sometimes!

In all, we're thrilled to start a new year by celebrating an undeniable example of how vibrant and rewarding the independent creative web can be. Thanks to Josh, and to all those who've remixed the Wordle idea to make it their own.

Wordle Mania and the Remixable Web

New for 2022, it's the biggest update ever to Glitch's editor. It's faster, it's easier to use, and it will take you to all new dimensions with 3D asset handling. Our editor is the heart of the Glitch experience: it’s where coders spend the most time, and it’s essential to your creative success. We’ve been working hard to make your everyday experience of creating on Glitch more fun and expressive. The creation experience on Glitch is smarter and swifter than ever, in large part thanks to your suggestions. Check out what we’ve got for you:

The first thing you’ll notice: Everything is just faster. A lot faster. Editing files, navigating through your project, changing your settings, and accessing advanced features are all lightning-quick.

The new editor sports a complete visual overhaul. You spend so much time looking at it, we wanted it to shine for you. Typography is clearer, iconography is cleaner, and a new footer bar gives you instant access to your favorite features, while giving you instant access to your project status.  It’ll turn your 🤔 into a 😃 in no time!

And Glitch is for sharing, so things are getting faster for your project’s visitors, too. All your assets are now cached by Fastly — automatically. It’s a huge FREE upgrade for every app you make on Glitch. Fastly’s got a massively powerful content delivery network, which means all of your assets and images will  load faster than ever for your users thanks to automatic optimization and smart delivery. Best of all, it’s easier than ever to take advantage of Glitch’s smart assets. Uploading assets is zippier than ever, and  now you can just reference them by a short name, instead of tracking down a full URL.

Our number one job at Glitch is to keep you in your creative flow, so we simplify the maintenance of the key files that keep your project’s working happily. (You’ve seen the first version of this before if you’ve ever tweaked your package.json or .env files.) Now we’re extending this capability further with what we’re calling “magic files”, a task-specific UI to help speed you through your edits. Of course, you’re still in control: the files themselves are just standard plain text under the hood, ready for you to edit the old-fashioned way if you want.

There are lots of small conveniences in the new editor that add up to a more pleasant experience overall. Here are some highlights:

✅ Inline error reporting: Glitch has your back when things go awry—we’ll show you errors right on the line that causes them, so you can get things back on track without bouncing between your code and the console.

🎨  Smart color picker: Everyone knows Glitch is all about making the web more colorful! So now, our editor offers you a clever new inline color picker. Stay in focus, and get exactly the values you’re looking for.

🥽 3D Asset support: Working with 3D assets? We’ve got you covered there, too, with full 3D previews right in our asset manager. We’re thrilled that Glitch is one of the most popular ways for creating the metaverse, and we want to make that easier than ever.

✨ Improved Prettier formatting: We’ve made our support for Prettier cleaner and more automatic than ever. And as always, you can fully customize your Prettier config to match your particular preferences.

↔️ Easier import, export and domains: We’ve made it simpler to import and export your code to GitHub (there’s never any code lock-in on Glitch!) and made it so adding a domain to your project is just a click away.

Sharing code is foundational to the last two decades of the web. But it’s often a clunky and cumbersome process, involving arcane invocations of command line utilities and version control tools. Glitch makes sharing easy: just type in the email address or Glitch username of your collaborator and we’ll get them into the mix. Riffing together on Glitch is special: it’s fast and easy for your counterpart to dive in, make a tweak, see immediate changes, and get your feedback.

We’ve been amazed over the years by the scale of your creative ambition, and we’re working behind the scenes with third party services to ensure Glitch can continue to serve your project even as it grows. This new editor lays the foundation for future integrations with some exciting new partners.

Better for everyone, and terrific for the Metaverse

So many exciting creations are happening on Glitch around the Metaverse and WebXR. We hope these improvements, like interactive 3D object previews, make it even more fun to build these experiences on Glitch. We can't wait to see what you build.

We built these changes for you. If something is missing, broken, or just makes one of your regular workflows more difficult, we want to know! Hit us up @glitch on Twitter or reach out via email: support@glitch.com.

UI Refinements

	Overall rework of pixel-level detail
	New bottom menu bar:
		Status
		Logs
		Terminal
	Tools menu
	Settings now accessible via explicit Settings button
	More obvious help menu in right corner
	Piano menu to access keyboard shortcuts listing

Asset manager

	Support for 3D assets, including 3D preview
	Automatic Fastly CDN support for all new projects

Code Editor

	Inline error reporting
	Inline color picker
	Improved code formatting, with Prettier handling more kinds of files

Enhanced magic files

	New state-aware buttons and UI interactions

More help taking first steps

	Remixing a starter gets you a header with extra instructions

Under the hood

	Completely rewritten using Vite for speed of delivery


Behold: An all new Glitch editor!

The WebXR community has been building all sorts of amazing immersive experiences on Glitch, as well as fun, low-barrier learning projects you can use to start trying these techniques out yourself. In this tutorial, we’re going to walk you through creating a virtual festive greetings card you can share with your friends! It’s totally free, and all you need is the regular web browser you already have. You’ll be using A-Frame, a framework for building VR apps for the web–the team and community have built a ton of handy apps you can remix and edit surprisingly easily. 

Remixing will create your own copy of the project–it’ll open in the editor and you’ll see the preview of the app on the right.

Take a quick look at what’s in the project–there’s not much there! We’re mainly going to be working in index.html, so open the file for editing.

Hit the Format This File button at the top of the editor to format your code–this is going to make it easier to read and work with!

Near the top of the HTML you’ll see the A-Frame script being imported–this is all you need to start working with the framework. Now look at the page body, where you’ll find the markup representing the A-Frame entities and components. Take a minute to compare the elements in the markup with what you see displayed in the preview.

The initial scene includes a box, sphere, cylinder, plane, and sky. We’re going to edit these to make them festive and add a little animated interactivity. You don’t need a VR headset for any of what we do in this tutorial, but it is fun to view in one if you have it (even a cardboard viewer on your phone)!

We’ll include images you can use in your project below but feel free to use your own–if you make a nice version you want to show off please let us know! You'll also find all of the pics in the final ~festive-aframe demo project embedded near the end of the tutorial.

Let’s start by adding a night sky background for our festive scene. Save this image:

In your Glitch project, upload it into assets. Once uploaded, select it and copy its URL.

In your HTML, find the sky element, remove the color="#ECECEC" attribute and replace it with a src attribute using your uploaded image URL as the value, so it’ll look something like this:

<a-sky src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/nightsky.png?v=1639737437152"></a-sky>

Let’s also make the plane under the shapes look wintery. Save this snowy pic and upload it into assets:

Replace the plane element color attribute with a src attribute using the URL for your uploaded snow pic (make sure you remove the color attribute or it will tint the image):

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/snow.jpg?v=1639740045726"

Let’s turn the box into a parcel. Take a look at the a-box element, which is a primitive shape. The attributes specify the box position, rotation, and color (this is just a hex value like you’ll see in HTML and CSS): 

The position is represented by x, y, and z values–the z can be tricky to get accustomed to when you start learning to work in 3D so you might like to play around with the values later to get a sense of how they work.

The rotation is represented as around the x, y, and z axes (known as pitch, yaw, and roll)–again, messing around with these in your own project is the best way to get to grips with them.

You’ll notice that the shapes have light and shade added automatically–this is due to the default lighting, but you can change it.

Instead of a block color, let’s give the box a pattern asset to make it look like a parcel. Save this image:

Upload it into your assets also and copy the URL.

Back in index.html, remove the color attribute and instead add one for the image source, with the asset URL as it’s value–it should something look like this:

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/wrapping.png?v=1639738100571"

Keep hitting the Format This File button as you edit the file to make it easy to see your changes.

Your preview should update with the new pattern!

Let’s turn the cylinder into a tree. Make it a cone shape by changing the opening and closing tags from a-cylinder to a-cone. Tweak the size–the cone accepts an attribute to set the bottom radius, so change radius to radius-bottom, leaving the value at 0.5.

<a-cone
    position="1 0.75 -3"
    radius-bottom="0.5"
    height="1.5"
    color="#FFC65D"
    ></a-cone>

OK so far so good, but it doesn’t really look like a tree yet–we’ll use another image asset for that, so save it:

Upload it in your assets like before, copying the URL. Back in the HTML remove the color attribute and replace it with a src attribute that looks like this:

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/tree-pattern.png?v=1639737942800"

Let’s turn the sphere into a snowglobe–first we’ll need to make it look like glass. Save this opaque PNG (it's there, honest, right-click or control+click below):

Upload it into your project assets as before. This time we’re going to use it as a texture, so we’ll add a new section to the A-Frame scene to store assets–near the top of the code inside the a-scene:

<a-assets>
    <img
      id="glass"
      src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe.png?v=1639738756848"
    />
</a-assets>

Now we can use the id to specify this image as a texture. In the opening tag of your sphere element, remove the color attribute and instead add a material attribute:

material="transparent: true; src: #glass"

Let’s rotate the image a little so that the gradient hits a nice spot within the view–add a rotation property to the sphere element:

Let’s put a photo inside it–we’ll use a cylinder, so add a new shape after the sphere:

<a-cylinder
    radius="1.23"
    position="0 1.25 -5"
    rotation="0 90 90"
    width="4"
    height="0.1"
    geometry="segmentsRadial:64"
    ></a-cylinder>

We set the positioning to make the cylinder appear inside the sphere, and the radius is slightly smaller than the globe so that the glass is visible around it.

You can use your own photo if you’d like to personalize the snowglobe, but feel free to use any of these cute twemoji pics:

Upload your picture into assets and copy the URL again. You can include the twemoji pics using these URLs if you like instead:

Santa https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-santa.png?v=1639740868189

Sloth https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-sloth.png?v=1639740872078

Heart https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-heart.png?v=1639740879770

Smiley https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-smile.png?v=1639740883742

Chick https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-chick.png?v=1639740887359

Fish https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-fish.png?v=1639740891328

Add your pic URL to the cylinder as src attribute:

Let’s give the snowglobe a base too–add another cylinder shape after the one you added for the photo:

<a-cylinder
    radius="1"
    position="0 0.15 -5"
    width="4"
    height="0.2"
    color="#cdcdcd"
    geometry="segmentsRadial:64"
    ></a-cylinder>

Now let’s add a message you can customize. 3D text is tricky in VR, so we’ll keep it simple and just use 2D–this time we’ll use an entity, which is a core A-Frame technique you’ll see much more of if you continue learning. The attributes represent A-Frame components, specifying the entity detail.

<a-entity
    text="color:white; value: HAPPY HOLIDAYS!"
    position="3.2 4 -4"
    scale="10 10 1"
    ></a-entity>

Change the text to read whatever you like! You may need to tweak the position to make it stay in the center of the display–experiment with the values!

OK so we have a nice looking scene, but it isn’t interactive yet. Let’s add some animated effects on the shapes when the user looks at them.

First we need a camera, add it near the top inside the scene markup:

<a-entity camera look-controls position="0 1.7 0">
    <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1">
    </a-entity>
</a-entity>


The camera defines the user perspective on the scene, with look controls and a fuse cursor that will allow us to detect when the user is looking directly at a shape. 

Let’s make the tree rotate when the user looks at it, by adding an animation attribute to the cone element:

animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 5000; easing: easeOutCubic; loop: false; startEvents: fusing;"

We specify the property to animate, which is the rotation. Then we state the positions to rotate from and to, which is a change of 360 around the y axis. We set duration and easing properties, and set the animation not to repeat. We use the startEvents property to trigger the animation when the user looks at the shape.

You can simulate moving around the scene in the preview by clicking and dragging it, so drag the view so that the tree is in the center of the page (or look if you’re using a headset!)

Let’s do something similar with the parcel but we’ll make it expand a little. Add a slightly different animation to the box element:

animation="property: scale; from: 1 1 1; to: 1.1 1 1.1; dur: 1000; dir: alternate; easing: easeInElastic; loop: 2; dir:alternate; startEvents: fusing;"

We use the scale property and loop the animation twice, with alternate direction so that it returns to its original size each time. We also use elastic easing for a bouncy effect.

Let’s also give the snowglobe pic a little animation. Add it to the cylinder that has your uploaded photo displayed in it:

animation="property: rotation; dir: alternate; from: 0 50 90; to: 0 130 90; dur: 5000; loop: true; easing: linear;"

This is similar to the tree but it doesn’t rotate all the way around, just back and forth slightly to give a sense of the globe being a 3D shape.

As a final effect let’s animate the sky, making it continually rotate slowly:

animation="property: rotation; to: -360 0 0; dur: 100000; easing: linear; loop: true;"

Your scene should be looking pretty festive by now–share it with your friends!

Make sure you try it on a VR headset if you have one–just enter the URL for your Glitch app in the browser, e.g. https://festive-aframe.glitch.me

If you want to keep learning, try tweaking the different entities and property values in your project!

The WebXR community has been building all sorts of amazing immersive experiences on Glitch, as well as fun, low-barrier learning projects you can use to start trying these techniques out yourself. In this tutorial, we’re going to walk you through creating a virtual festive greetings card you can share with your friends! It’s totally free, and all you need is the regular web browser you already have. You’ll be using A-Frame, a framework for building VR apps for the web, and the team and community have built a ton of handy apps you can remix and edit surprisingly easily.