We just launched generated static sites! 🎉 This has been an in-flight feature for a long time, and something I’m really excited to finally see out in the world. There are a lot of moving pieces, but the most important thing to take away is this: generated static sites allow you to run a development process and, when you’re done editing, Glitch will run your `npm run build` script and upload that optimized build to the glitch.me domain every project gets free.

The new starter projects were created for remixing. This bumps up our two templates (hello-express and hello-webpage) to four (website, node, react, eleventy) with opinionated and minimal versions of each. Thinking through the technology choices for each starter and choosing the packages that we were endorsing was an exciting challenge, and we were able to build on the incredible work the open-source community has been doing since we last created new starters. Let’s walk through the new starters and what powers them to give you a better idea of how they’ll help you get started building your idea in seconds.

Our previous Node.js starter, hello-express, was in daily use but starting to fall behind modern Node best practices. Looking at the landscape of Node web servers, there was a clear choice: Fastify. The speed gives us the ability to serve more pages, faster, from the glitch containers. It’s also great how easily extensible Fastify is. Having validation built-in didn’t hurt. We are really excited about what Fastify will allow us to build going forward and how to leverage it for Glitch users; plus, we can build Glitch-specific plugins to interface with our asset management, fully-powered terminal, etc., in the future. There isn’t a lot of boilerplate needed to instantly create an API, so we were able to keep both the opinionated and minimal versions of the Node.js starter fairly straightforward.

We’ve had trouble in the past getting the React development process to be performant on Glitch servers, so solving the speed problem was the #1 priority. Fortunately, our team didn’t have to do much of the work here and instead could rely on Vite to do the heavy lifting. It starts immediately, supports TypeScript and JSX, and has hot module reload enabled by default. That significantly reduced the surface area we needed to build ourselves to support a lightning-fast React workflow.

One way Vite achieves these incredible speeds is by bundling all of your dependencies (in ~glitch-hello-react they are: React, Wouter and react-helmet-async) with ESBuild. ESBuild is an extremely fast JavaScript bundler written in Go. Most likely you aren’t changing your dependencies nearly as much as your code, so it can do that once and only build again when you add a new dependency or upgrade the version.

When you close the editor and stop working on your site, it runs the Vite build process in the background which creates an optimized bundle with Rollup. That means you can take advantage of the wild world of Rollup plugins. We serve this fast production bundle at your free glitch.me domain until you start working in the editor again.

Static site generators are all the rage today, and for good reason. Eleventy cares about speed, ease of use, and—most importantly—the experience of someone browsing your site. When you run the Eleventy build script, it takes all of your files and creates a bundle that can be loaded by those still using AOL dialup. (Please let us know if you are still using AOL dialup!)

The Eleventy starters list is a scoreboard with Lighthouse scores, pushing Eleventy builders to make a performant site that anyone on any connection can view. As website bundles get more and more bloated, Eleventy pushes for as little JavaScript as possible, and uses it only where you need it.

Our  ~glitch-hello-eleventy starter has support for blog posts in Markdown, beautiful styling, and instructions for adding more complexity if you need it. The minimal template was built by the Eleventy team.

Along with support for Eleventy, we’re supporting all of the Eleventy projects that others have built. Want a high-performance blog with image optimizations and analytics? Check out eleventy-high-performance-blog. Something a little more designed, that uses Tailwind CSS and a JS framework (Alpine.js)? Try 11ta.

These are just our starters using the new generated static site functionality. You can apply the same concepts to a Vue site, or Svelte! Any code you can run in the build script that outputs to a build folder can take advantage of this new functionality. Just add this configuration to your package.json:

"glitch": {
  "projectType": "generated_static"
},

That will tell Glitch to treat your project as a generated static site so you have a development environment when you want it, and a production site on your glitch.me domain when you’re done.

So, why not remix one of these starters and create a new project right now? 

Glitch engineer, Keith Kurson, discusses the tech stack and opinions behind our new lineup of Glitch starter apps

A closer look at the new Glitch starter apps

We can’t think of a better way to start off a recap of last month than to say that it’s never been easier to get started with Glitch since the recent introduction of our starter apps, including React and Eleventy. We’re already seeing some fantastic new sites, remixes, and suggestions for even more starters!

And finally, after all those winter months, April brought a spring bounty of creativity, art, tools, and a healthy dose of internet magic/nostalgia/silliness to the Glitch community. Here is what you created, curated, incubated, and disseminated during last month. 

For anybody who wants to get started with Webpack on Glitch, @KumuPaul  created a very minimalist Webpack app with support for hot module reloading. Try out ~hello-webpack-typescript and see the new TypeScript syntax highlighting in action!

Finally, someone brave enough to speak out about JavaScript, @tesseralis, has created this handy ~js-psa.

Preview your markdown rendering in a multitude of themes with ~multimark by @javaarchive.

We love these collections of demos created by @matdesl. ~p5-demos shows you p5.js examples of generative art, motion graphics, and interactive design, and ~tone-demos gives you examples using Tone.js for interactive and procedural sound. Try them out!

~state-of-nyc is a map app by @jordanderson that with each refresh moves the population of a handful of cities across the map so you can get the scope of the differences in population around the country. 

~wikidata-explorer is a remix of ~evergiven-everywhere by @ramiroaznar that visualizes wikidata queries. It’s awesome to see EE used as a remixable starter for other map apps!

Bill Gates Land Ownership is an app by @doniecasey that lets you see the scale of how much land the Gates owned.

@eojthebrave scraped the #DrupalCon attendance once a minute from Hopin to visualize the flow of the conference and you can check it out here.

~tubatutorials by @lanek85502, will teach you how to play the tuba in less steps than you would think!

Glitch often comes up in this incremental_games subreddit. It's just folks being wholesome, creating and sharing games that have incremental mechanisms. Try out ~1stgame, by @Dravitar, or  ~sushibeans by @corbancg to start, but only if you can stand to lose focus/attention for hours.

We love this 2048 clone, ~2048-1070835 by sabrina15hallie using characters instead of numbers. 

Here is your new obsession: with this Gigapet-inspired cat sim by @dpalencia you can remix it to create one for your own cats...we have.

Remix ~away-message by @jdan to create your own nostalgic AIM away message profile, and it was written with one of our faves, 98.css, also created by @jdan.

It’s still a little chilly at night, here’s a ~quilt-generator to keep you warm, made by @csb324.

“Tis tea time” according to @jrwren, who made ~tis-tea-time so you can keep track of what kinds are in your pantry, using localstorage.

If you like making patterns, ~pattern-preview by @ellell is a neat little that shows you what the pattern is as you draw the tile.

~veg-calc is a very cute and remixable tax calculator by @kvcarido.

Since April has come and gone that means it has officially been one year of ~multiuser-sketchpad by @mrdoob, one of the most viral Glitch apps ever! Take a stroll down memory lane back to the beginnings of quarantine, and watch the time lapse of everyone drawing together. If you have Glitch projects you built or love and want us to feature, share them on the forum, tweet them to us @glitch or email community@glitch.com - You may just end up in our next roundup! ✨

The project featured in this post’s header image is ~bison-namer, created by @laurenbiron and steph. The Fermi National Accelerator Laboratory has bison babies to name, so they created this fun tool. 🦬

Last month on Glitch, the April 2021 edition

We’re excited to announce some new updates that will have you building even faster with new starter apps, support for generated static sites, and a clean new look that makes the Glitch experience faster and fresher than ever.  

Get from idea to “Hello World” in seconds with our new lineup of starter apps, along with new and improved support for generated static sites

We’ve created new, fresh and fast starter apps to get you building websites and Node apps in seconds. In addition to a refresh of our static website and full-stack Node app starters, we’re improving our FREE static sites to support generated static sites, too! This was something our community has been asking for, so we’re excited to give you the benefits of fast and free static sites with the power to configure how your sites are built. 

Try it out by remixing our brand new React and Eleventy starters or updating your app’s package.json file. 

We picked a powerful set of tools to help you create full-featured apps on Glitch. 

There’s so much anxiety about which JS framework or build tool to pick, so we made some really good default choices for you. Our new Node starter now uses Fastify to give you a faster, extendable developer experience when writing Node. We chose React and Eleventy for their versatility, documentation and the wealth of developer content created by their communities. And we harness the powers of Vite to further improve the development and build experience in our React starter. 

You get all of the benefits of these tools without having to do any setup. But if you do want to configure your app or use other tools, go for it! Glitch won’t lock you into the platform or abstract away the code that is powering your idea. Don’t forget the rewind feature is always there if you need to backtrack—mistakes are welcome and encouraged!

Build a web app in less than a minute on Glitch.com

Syntax highlighting support for more file types

With this new update we’ve added support for syntax highlighting to make your code as clear and concise as possible. Open your Glitch editor to see syntax highlighting in action for the following file types:

These updates can help you go from idea to app in seconds, or serve as an introduction to a whole new world of frameworks. Don’t see your favorite framework listed right now? Our community is already collaborating to make the next wave of super-easy starters for Glitch. Join them and let us know what you want to see next.

Our newly updated “Create Project” page is available for everyone now, featuring our new official starters as well as Github import. Watch this space for more useful starter apps, as well as projects curated from and by our community!

There’s always something new to inspire you at Glitch

Whether you’re just beginning to experiment with Glitch or a remixer extraordinaire, we are excited to introduce—or reintroduce—what Glitch is all about to everyone. Yes, you can use Glitch to go from idea to site in seconds, but not just any site: a reliable, performant, accessible site (or app!), backed by some of the most powerful tools on the web. These updates and features are the result of a lot of careful consideration for our amazing community of explorers, dreamers, and builders, resulting in a Glitch that is faster and fresher than ever. 

If you have any fun or interesting projects you’re building using our new starters, feel free to tag us on Twitter, share in our support forum gallery, or email community@glitch.com so we can share with the community! In the meantime we’ll be hard at work making the Glitch experience the most reliable, intuitive, and friendly place to build the web. ✨

Take your apps to the next level with a Pro account

Glitch is the fastest way to go from code to deploy. You can build anything from small static websites to complex full-stack apps for free! All Glitch users get our powerful and collaborative in-browser editor, with Github import/export and Prettier support. Static sites come with free always-on hosting; full-stack apps sleep to save resources but wake on demand. Upgrade to a Pro account to get all of that and more: access controls, private projects, and the ability to Boost 5 full-stack apps for more disk space, memory, and always-on status. Check out our pricing page to learn more and subscribe!

Get a React or Eleventy app up and running in under a minute with the fastest, most powerful upgrade to Glitch ever. Now, it’s quicker to build a real website on Glitch than with a no-code tool.

Remix a whole new Glitch

There are at least a million ways you can use Glitch, and here are 30 ways we’ve seen your favorite companies, communities, and organizations build with Glitch. 

When we set out to create a way to enable people to get their cool idea spun into internet reality in a matter of seconds, there was no way to predict how folks would take Glitch and make it their own. While we try to keep the Glitch community updated on all of the amazing apps we come across, we also want to share a broader glimpse into who is embracing Glitch and how.

Some apps you’ll recognize, others might surprise you

The team behind everyone’s favorite workplace communication hub, Slack has been using Glitch for quite a while. From a place to spin up quick demos, to a portal for multiple workshop materials, to sample starters for their framework Bolt, the Slack team has embraced the many uses of Glitch. They aren’t alone—in fact, another popular communication application you might have heard of ~~Twitter~~ famously built a demo of their API late last year on Glitch. One of their UI engineers liked Glitch so much that they used it to build an Eleventy site. 

Speaking of visualization, John Keefe of the New York Times wrote about his work in visualizing COVID-19 cases in Congress and shared the above demo on Glitch of the final results. 

Teams from Postman, Microsoft, and Vonage also used Glitch to host internal resources like this self-service learning platform Postman launched using Glitch as the backends of their API training workspace, which is a self-serve learning platform they just launched! Tomomi Imura at Microsoft created a tutorial series on developing for Microsoft Teams using Glitch throughout for the coding exercises. 

Dwane Hemmings from the Communications API folks at Vonage posted a tutorial on using Web Components in a React app on Glitch, as part of a series and Garann Means has been posting cool videos showing how to get set up on Glitch to build with the Vonage API.  

Using a browser to read this? Count their teams as fans, too

By giving developers the tools to easily set up a demo, Glitch has enabled the teams behind some of your favorite browsers to make them even better! Google Chrome used Glitch to show a demo of the web serial API during the Chrome 89 release, and shared many similar apps during 2020’s Google Chrome Dev Summit. In Mozilla’s MDN Web Docs, they point to Glitch as a way to test out the  Element.requestFullscreen()function—or remix it! 

You too can use Glitch to try out or test new browser capabilities, just like the teams behind the browsers themselves do.

As recently as earlier this month Microsoft pointed users to try out the new CORS error reports with ~cors-errors in their latest doc on what's new in Edge DevTools. When it comes to standards work, we joined DuckDuckGo and many other major industry leaders in the call for a Global Privacy Control standard and implemented it in their suite of privacy browsers, which you can test at ~global-privacy-control.

You too can use Glitch to try out or test new browser capabilities, just like the teams behind the browsers themselves do. 

Empowering developers with tutorials, tools, and documentation

Browser teams are not the only ones who have caught on to the powerful set of tools Glitch provides software teams. Three use cases we frequently see hosted on Glitch are hands-on tutorials, developer tooling, and approachable documentation. 

As we recently shared, the AMP team used Glitch over the pandemic to create and share their series of online workshops with beginners. Speaking of beginners, we created Glitch with them in mind, not only to help folks get a site started in seconds but by introducing the rewind feature to help beginners and professionals alike, take a step back when they need to. Evelyn from Canada Learning Code wrote this great post about her journey of learning how to code and building her first site on Glitch. Here’s a Twitter thread we love of Corin Faife of Witness.org talking about using Glitch to teach his coworkers an intro to HTML workshop and how they now have their own personal sites!

Tammy Butow of Gremlin created this cool coding workshop using Glitch for GirlGeekAcademy’s She Hacks hackathon. This web.dev tutorial on making custom bullet points using CSS from Google is a fantastic example of how Glitch can transform the average tutorial into a hands-on experience.

~pouchdb-bug-helper makes it easier for developers to create reproducible bug reports for PouchDB.

One of the most popular uses of Glitch we see out in the wild has to be for demos and dev tools. The PouchDB team created ~pouchdb-bug-helper to enhance the bug reporting experience for their users by making it easier for them to submit reproducible test cases. It’s linked directly in their repo README and is one of several ways maintainers can get great use out of Glitch! Team STEP is an indie collective of game developers, musicians, 3d artists, and illustrators, and one of its members built this CLI tool for pushing local files to Glitch. Their README is pretty thorough and they wrote their reasoning behind it on the forum.

Jenny Brennan of the Ada Lovelace Institute built this tool ~hashflag for testing out hashflags (those emoji in Twitter hashtags) to use when they were designing the #AdaLovelaceDay hashflag. Read more about the tool and the cool process on Jenny’s blog. The Tableau team also put together this demo showcasing how to create a Web Data Connector from start to finish. Keisha, the dev in the video, won Tableau’s internal hackathon using Glitch earlier this year!

There are so many intriguing and innovative Glitch sites and apps that inspire surprise and delight that listing them all in one place would take away from the time you could spend exploring and tinkering with them. But don’t take our word for it, check out the gallery where the Glitch community shares their works of art! Or, better yet, try Glitch for yourself.  And if you're working with a larger team, or need custom billing or priority support, we've got you. Contact us for pricing.

Top 30 ways companies are using Glitch

It’s an all-too-familiar scenario for most of us. One day you’re looking at a calendar chock full of upcoming events and plans, and then BAM! A global pandemic hits, canceling everything in sight for the foreseeable future. But what to do if you’re an online educator and devrel professional trying to bring new devs to the web in various locales? This was the exact plight Ben Morss, Developer Advocate for Google faced last year when COVID-19 struck. We chatted with him about how he was able to face this situation head-on, how Glitch helped take his team global, and some of the challenges of being an online educator. 

Can you provide an overview of the coding workshops you’ve run, or are running? Who do you work with on your team to make them happen and who participates?

In 2019, Rob Ocel at ThisDot and I created a set of three free courses on AMP. We designed them not just to help experienced web developers get started with AMP, but also to help aspiring web developers get started. After all, AMP lets people create interactive websites without writing JavaScript (though you can), and we felt this made it a nice entry point for newcomers.

Running live web coding classes over the years, I learned that starting up a web server presents a significant obstacle. Also, for these courses, we wanted to give students starter code, mostly so they wouldn’t need to write their own CSS. Thus, we decided to incorporate an online coding environment into the courses. Other Googlers were already using Glitch for web.dev. Glitch was cute, simple to get started with, and it made it quick and easy for people to copy a starter project. Rob and I decided it would be perfect for the AMP courses!

We published the courses on amp.dev. We also created decks and videos and made the training materials available to anyone. But we also wanted to make them available to meetups. So we compressed the first course into a two-hour workshop. And we encouraged training programs and boot camps, Google Developer Groups, Developer Student Clubs, and everyone else to run this workshop.

Meanwhile, I was organizing and running a series of AMP mini-conferences around the world. In 2020, I planned to focus exclusively on developing markets. Local contacts helped me set up a three-city trip to Pakistan, an event in Sri Lanka, and another in Bangladesh, all in March and April. I couldn’t wait to get started!

Then, COVID-19 happened. We had to cancel all of our events. How could we reach developers now?

After a period of mourning and confusion, I set up a couple of virtual workshops. We were pleasantly surprised to discover that these could be quite effective. Glitch was a key element here. Not only could students easily find our starter code and start working without having to start up a web server—but everyone’s projects were public by default as well. As people completed exercises, I’d ask them to share their Glitch URLs with me. I could then load those up on my computer and show them to the group. This provided a much-needed social element. And when people had trouble, they could still share their Glitch URL, and I could help them debug.

In 2020, we ran about twenty of these virtual workshops.

~nice-consonant is an app that represents most of the work done in the AMP courses Morss facilitates.

How does an international coding workshop differ from a program that’s just confined to the US? 

Our events centered in the US and our events centered elsewhere were very similar. One wonderful thing about the developer community is that it’s so international. A web developer in Australia often works with similar tools and similar problems as a web developer in Colombia. As long as everyone can understand the same language, they can use the same content. Of course, there are differences and exceptions, but to me, the remarkable thing is how much programmers around the world have in common.

I noticed early on that a workshop put on by a group in one country would attract people from other places as well. I remember that a workshop put on by GDG Nuremberg also brought in students from places like India and Brazil. Which was spectacular.

We’d love to know how you structure the actual workshop. Can you share any of the materials or apps that you built?

For each of our three courses, we made one Glitch with the starter code and another Glitch with what the student should have at the end. Each course contained a series of exercises, each of which built on the previous work, so we also made Glitches for each intermediate step.

For the workshop, I included 5 discrete tasks. Each involves adding features to a simple webpage, and as the student completes them they build the page. They start with something very simple—modifying an image so that it uses <amp-img> instead of the standard HTML <img>. Then, they add an attribute to make that image responsive. Soon they’re adding an image carousel, social sharing links, and a menu. Within ninety minutes, they’ve learned how to use AMP components to create a basic interactive webpage! It can be quite empowering.

As long as everyone can understand the same language, they can use the same content.

How do these workshops help you achieve your team’s goals? How do you measure success? 

Even though our international mini-conferences were thrilling, the workshops have been much more efficient. Our live events included a workshop portion, but it was hard to keep it going in a large room full of potentially restless people, not all of whom were developers or who’d brought along a laptop. Sometimes we didn’t have enough power strips or reliable WiFi. And, of course, to run an event in the physical world, we had to find a venue, secure catering, reach out to developers to come spend a day with us, and convince a set of volunteers to fly across the world. Live events were a wonderful adventure, but they also involved substantial time and expense. For the virtual events, I simply reached out to developers who ran an existing meetup. When the time came to do the workshop, I’d just walk up to my office and fire up my computer.

Of course, I really miss the communities we discovered through live events. But some groups have successfully built community through virtual workshops. Last May, eight different groups from across North America, from Memphis to Winnipeg and Houston, all collaborated on a workshop. It became quite the social occasion!

We ran live events for a few reasons, but quite possibly the two most important were exposing developers to AMP and getting their feedback. These virtual workshops help us continue to accomplish the first goal: participants get to make their first AMP site. Interestingly we tend to reach a lot more beginners and less experienced developers, so they become more of an educational event, a chance for newbies to get their feet wet.

To help measure success (or failure), I usually ask participants to fill out a survey at the end. To incentivize people to take the trouble to fill it out, when possible we raffle off a small prize. Taken together, the survey results are about as high as I’ve ever seen for any event I’ve ever been involved with. Go Glitch!

Has anything in your workflow changed as a result of COVID-19? What’s different and how have you adjusted? 

For a Developer Advocate, well, yes, pretty much everything changed. :) One week I was planning events in five cities, scheduling my own trip to Pakistan, and working on a talk for Google I/O. The next week, my main projects vanished. I had to start again.

A year later, I’m accustomed to the new life that many of us are living—working from home, cooking and cleaning more, taking care of kids, and learning new skills, like how to snake out a clogged shower drain. I still feel highly privileged and incredibly fortunate. I still have a job, no one in my immediate family has caught COVID, and we are fortunate enough to be able to stay home. (This would have been much harder if I’d stayed in my previous career, as a musician.) We’re also fortunate that the extended family time has brought us closer together. But as I thrive on social interactions and the novelty of moving from place to place, I do still find this new life difficult. On the other hand, I’ve also had time to start coding more. Recently I even re-learned C in order to add support for AVIF to libgd.

For educators and dev rel professionals thinking about using Glitch to reach learners, what are some of your pro tips or lessons learned the hard way? 

I really believe in workshops instead of talks, especially for online events. They help involve everyone. Start off with something easy. Make it fun, encourage people to chat, encourage them to stay involved.

When doing this workshop, I always compress the part where I just talk to people. I’m pretty sure that after five minutes of me talking, most people watching me on their computer screens will have tuned out. I try to replace this talking time with discussion and with coding. Let people be active. Give them the space to learn!

Thanks to Ben for sharing his experience and wisdom in guiding international workshops and how Glitch was able to empower web devs in the making. 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!

It’s an all-too-familiar scenario for most of us. One day you’re looking at a calendar chock full of upcoming events and plans, and then BAM! A global pandemic hits, canceling everything in sight for the foreseeable future. But what to do if you’re an online educator and devrel professional trying to bring new devs to the web in various locales? This was the exact plight Ben Morss, Developer Advocate for Google faced last year when COVID-19 struck. We chatted with him about how he was able to face this situation head-on, how Glitch helped take his team global, and some of the challenges of being an online educator.

Going global with Glitch: a Q+A with AMP educator Ben Morss

It's a tale as old as time: one of the largest container ships in the world gets stuck in the Suez Canal and captures the attention of the entire world. It also captures our imagination, leading us to consider the possibility of something both disruptive and absurd happening close to our own homes. Then, suddenly, there's an app for that. It's called Evergiven Everywhere and it was created by Garrett Dash Nelson (@garrettdashnelson), the Curator of Maps & Director of Geographic Scholarship at the Leventhal Map & Education Center at the Boston Public Library. Like the news of the actual Evergiven ship, ~evergiven-everywhere captured the imaginations of people all over the world, from a mall in Mayalsia to the opinion pages of the NY Times. We talked to Garrett about how and why he created this app, and why maps are such an important and interesting medium for storytelling.

Jenn: Tell us a bit about the work you do!

Garrett: I’m a historical geographer, and my research focuses on how people’s ideas about community, politics, and place have changed over time in response to spatial transformations like industrialization and urbanization. At the Leventhal Center, I oversee the library’s quarter-million geographic objects; we run exhibitions and public programs on history and geography themes, and also build digital tools to help people explore maps in new ways. 

What is ~evergiven-everywhere, and why did you create it? 

If I’m being honest, there were three main reasons why I created this thing. First, I had been wanting to try Glitch to see how quickly I  could use it to wrangle a project together. I’ve seen a lot of people whose work I admire using Glitch, and I was particularly intrigued by the open, collaborative concept since we’re always trying to get people interested in digital humanities  methods in a friendly, welcoming manner. Second, I had a writing project that I was stuck on, and I’ll oftentimes do a  little bit of coding when I’m procrastinating on writing. It was Sunday morning, and I told myself I’d try to do this before my second cup of coffee, and then move on to writing. Third, I just thought it would be funny to see the familiar picture of the Evergiven transposed onto other places! 

How does the app work technically?
 It’s pretty simple, actually: there’s a map of the world, and on top of it there’s a picture of a boat! I used the Leaflet library to create the map, pulling it in via a CDN. When we do more complicated mapping projects, I usually use the more complicated library OpenLayers and a build tool, as well as frameworks like Vue or Svelte, but in this case, I wanted to keep it super simple. With Leaflet I can make a simple map in about two minutes. I sourced the base map tiles from ESRI’s World Imagery layer. Beyond that, it’s just some vanilla JS to manipulate the DOM. 

In the first version, the one I did in about 20 minutes, there was no option to keep the ship true-to-scale. As it started getting popular, lots of people were tweeting at me saying they wanted this feature. Though I’d sworn I wouldn’t spend any more of my writing day working on this project, I figured that scaling the ship would make it a little bit more of a plausible educational tool rather than just a silly meme generator. Most web maps use the Web Mercator projection, in which scale is a function of both the zoom level and the latitude of the center point. (Mercator has considerable size distortion along the y axis.) So I used a calculation that figures out the pixel-to-meters ratio at the map’s center point,  and then implements a CSS transform to keep the Evergiven image true to that ratio.

What made you choose Glitch as the platform to create and host evergiven-everywhere?

I’ve been intrigued for a while with the Glitch platform’s emphasis on remixing and sharing code. I also liked the challenge of seeing how quickly I could push out a project like this, without having to set up space on our web server, create a  GitHub repository, and so on. We’ve been thinking about using Glitch for some of our adult education programs on web mapping, and I wanted to give it a try.

Maps oftentimes become interesting to people because they mix the familiar and the unfamiliar. 

Your app is one of (if not *the*) most shared apps all around social media and the news. Why do you think this reached the virality it did, and was that something you were expecting or hoping for while you were building it?

I honestly wasn’t looking for meme fame when I created it.  The Internet is so fickle; I’ve put many hours into projects that I  thought would be more popular, and they barely made a splash. Then this project, which as I’ve noted was just a kind of coffee-break distraction, went absolutely crazy. Reflecting back on it, though, I think its virality does tell us something important about the collision between geographic scales. On the one hand, we consume a  globalized media diet, and the herd effect of the Internet means that millions of people across the world are likely to have their attention turned towards a single topic at any given time. On the other hand, though, people still live their lives mostly in local geographies: we’re familiar with—and oftentimes emotionally connected to—the places that are near to us. The ability to juxtapose these scales, to see an image that’s become placeless dropped into a location that represents one’s sense of geographic “self,” is both amusing and instructive.

Some of my favorite Glitch apps use maps to do creative things,  your work included! What is it about maps that have gotten you into the work that you do, and why do you think they are such a compelling medium for app creation?

Making sense of the spatiality of the world around us is one of the foundational patterns of human consciousness. Maps are extraordinary visual devices because they reduce the geographic complexity of the real world into a simple and recognizable representation. (That means maps can also be very dangerous, as they sometimes come to seem more real than reality itself.) I’ve always been interested in the way that maps configure people’s intuitive sense of what places are important to them—and also what kinds of communities they feel that they belong to. I sometimes refer to that as the interplay between the geography of “here” and the social solidarity of “us.” 

Maps oftentimes become interesting to people because they mix the familiar and the unfamiliar. I did a project a few years back with my colleague Alasdair Rae where we redrew the map of the US into regions based on the geography of commuter patterns. The outline of the US and the locations of major cities are very familiar to most people, at least people who live in the US. But the alternative geography of urban megaregions was something people had never “seen” in this way before, even if they often intuitively understood some of these regional interactions.

Going back to your app being so widely shared, what are the weirdest or most surprising places you’ve seen someone place Ever Given? 
 Honestly, I feel like I’ve seen it placed almost everywhere in the world over the past week. I thought it was kind of interesting to see it dropped into places where it looked absolutely ordinary, like the Port of Rotterdam or Long Beach. It was also surprising to see just how huge it seemed when it was dropped onto land, even in comparison to massive buildings like stadiums. And I laughed when a few people used the app early on to wedge the boat between the Cape of Good Hope and Antarctica (not to scale, of course), blocking the channel that shipping traffic was using to re-route around the plugged Suez Canal.

Well, hopefully, the writing project I was procrastinating on won’t take me too much longer! It’s a book that looks at the history of how planners debated how to handle different types of geographic “units” like the neighborhood, urban metropolis, or ecological region. At the Leventhal Center, we’re constantly building new mapping projects, like our Atlascope tool for exploring historic atlases in the Boston area. I also hope over the next decade or so, we’ll be creating even more tools that make digital mapping more approachable and engaging. There are many people doing amazing projects with digital geography, but there’s still a formidable technical learning curve for everyone from K-12 teachers to academic historians. I can certainly imagine that some Glitch-based learning tools might be part of those efforts.

Thanks to Garrett for chatting with us about ~evergiven-everywhere and the impact Glitch has had on digital geography. 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!

It's a tale as old as time: one of the largest container ships in the world gets stuck in the Suez Canal and captures the attention of the entire world. It also captures our imagination, leading us to consider the possibility of something both disruptive and absurd happening close to our own homes. Then, suddenly, there's an app for that. It's called Evergiven Everywhere and it was created by Garrett Dash Nelson (@garrettdashnelson), the Curator of Maps & Director of Geographic Scholarship at the Leventhal Map & Education Center at the Boston Public Library. Like the news of the actual Evergiven ship, ~evergiven-everywhere captured the imaginations of people all over the world, from a mall in Mayalsia to the opinion pages of the NY Times. We talked to Garrett about how and why created this app, and why maps are such an important and interesting medium for storytelling.

The ship and app seen virtually everywhere: a Q+A with Evergiven Everywhere creator Garrett Dash Nelson

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Last Month on Glitch: the March 2021 edition

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

Recent Posts