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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

~arithmos by @Kiritchell is a number guessing game

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

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

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

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

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

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

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

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

Last month on Glitch, the July 2022 edition

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Other things that happened in June ☀️

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Last month on Glitch, the June 2022 edition

All of our Glitch Node.js starter projects use the efficient and flexible server framework Fastify. The Fastify team recently released a major update–version 4 includes a number of improvements, but you will need to make a few changes to any existing remixes you created on Glitch before we updated the starters to use it. Read on to learn more!

You can read all about the changes in Fastify 4 in the announcement blog post–here are a few highlights:

Callback and promise confusion has been reduced by requiring calls to reply to be part of a return statement.

Error handling is now encapsulated to improve consistency.

Type providers are now included, allowing your apps to infer types from JSON Schema.

The listen signature has been simplified, with a view to improved contributor maintenance experience.

The minimum Node version now supported is 14.

Kudos to the Fastify maintainers and community for consistently developing a framework that affords Glitch Node.js apps such great performance!

When you edit a Node.js app in Glitch, you can manage your npm dependencies in the package.json file using the dropdown list that shows you any packages that have updates available. If you have a remix of Hello Node, Hello SQLite, or the blank / minimal versions of either of these starter projects, you’ll see the Fastify 4 update in the dropdown list–but you’ll need to make a few additional changes to get your app working with the new version.

Fastify 4 requires at least Node version 14, and there are some packages the starters use that have been deprecated and replaced–there are also a couple of minor server syntax changes.

In your project, open the Logs so that you see the progress unfold. Don’t worry when you see the little sweary face in your app Status at the bottom of the Glitch editor as you carry out the updates–it’s all part of the fun and they’ll turn happy again by the time you’re done!

Check out the help doc for detailed steps, here’s the TLDR; on what you’ll need to change:

Update the node version in your package JSON to 14

Remove any of the deprecated packages: fastify-static, fastify-formbody, point-of-view

Add any of these that you still plan on using with their replacements: @fastify/static, @fastify/view, @fastify/formbody

Update references to these in your server JS code

Update your server JS code listen function to pass the host and port values inside an object, like this: fastify.listen({port:process.env.PORT, host:'0.0.0.0'}...

Include calls to reply in a return statement

Give Glitch a little time to update and rebuild your project between steps and hopefully it’ll work the way you expect! If you have any issues take a look in the Logs, and turn on detailed logging in your server JS file if necessary. 

Check out the updated starters to see the new syntax in action:

Are you building anything new with the updated Fastify capabilities? Share it on the community forum!

Those two beautiful cheetah photographs at the top of the post were taken and shared with the commons by William Warby and James Temple 🐆

Smarter starters and better error handling, thanks to Fastify 4!

For our latest newsletter, I interviewed head of product, Jesse von Doom, who not only made this beautiful collection of colors in text happen, but he also created this well-commented demo on Glitch that walks you step by step through making a gradient header with different colored links. 

I asked him a few questions about the process, but we couldn’t fit it all into the newsletter, so please enjoy our newest series on the blog: This Was Too Big to Fit in Our Newsletter.

Color is a great tool for communicating a lot of nuance in any design. If pictures are worth a thousand words color has to be worth a few hundred at least. At Glitch we work with a wide, bright palette. We’re really intentional about the meaning behind it. We want the first impression of Glitch to be welcoming, optimistic, and lightweight. 

If you look at the Glitch homepage you’ll notice colors chosen for the header are the two main colors in the Glitch logo. On the page the logo itself is tiny, so the header is a call-back while the colors chosen for the links themselves are some of the brightest in our palette. So the idea was to be big and bold in how we invite people to build with Glitch, but to use color to reinforce that our community is inclusive, friendly, playful, and helpful.

(All of this is really valid, but also I just really love rainbows.)

How did you make having two headers shown as one accessible?

This part was super important — we’re technically using two headers to make the effect work. One with the main gradient text, and another mostly-invisible header for the links. It’d be a really bad experience for people using screen readers if the header were read twice, so we hide the header without links from screen readers using the `aria-hidden` attribute. 

What was the most challenging part of making it all work?

Getting two slightly different bits of text to wrap identically at all responsive screen sizes is a lot of attention to detail. So it meant explicitly setting a lot more CSS properties than usual, and adding a few extra spans to make sure each header matches the other’s footprint exactly. And with a header it’s also worth paying attention to a few other typographic bits like wrapping commas with links, etc. 

Shouts out to Jesse for making that magic happen. And because his demo is on Glitch, you can poke around the code and remix it for yourself! If you make a project with rainbows, text or otherwise, let us know by tweeting @glitch or send us an email at community@glitch.com. 🌈

This Was Too Big to Fit in Our Newsletter: How We Got Rainbows on the Homepage

What gives something the quality of being dreamy? Maybe you picture being in a through the looking glass type of pastel and foggy environment similar to somewhere real, but not quite right. Maybe you’re flying through space and time with superhuman abilities. Or maybe, you’re somewhere relaxing, with no one calling, texting, or asking you to be anything to anyone at all. That’s the thing about dreams — they’re different for everyone. Yet, somehow the Glitch community managed to make May a very dreamy month with both new and existing projects that made us stop to take some much needed time away from our collective realities. 

While you were dreaming, here are some very real and cool things that happened with Glitch. First, we joined Fastly! It’s a very exciting opportunity for both the product and the Glitch community and we can’t wait to tell you more about the road ahead. We also changed up the login process for those of you who joined Glitch with a Facebook account. No worries! Your account won’t change, you just have to update it. Read the full announcement, after you’ve seen all the very rad things created in May. 😏 

~draw-your-world by @enauman is a really inspiring project where p5.js is used to draw different elements from photos of the real world!

~strangely comes across the feed occasionally as @rowan-m updates it. Very satisfying :)

~lilcode-3dspace by @cafeinternet is a cool, chaotic 3D environment

~windowpane by @leannefthuang is an “examination of the self through art historical cultural ties, to better understand myself and myself as part of the Asian American diaspora.”

~conwaygameoflife-twitter-embed by @johuber is the iconic zero-player game, made to be embedded in a tweet!

~dream-geography by @niall84571 is a dreamy record of the places they’ve visited in their dreams.

thatkatharine.glitch.me - They learned how to do rounded corners in CSS for this, so that’s pretty awesome. 

m4g3.glitch.me is a Glitch in Bio with a cool, spacey goth theme.

~betterbandpod by @brandenpalomo is a Glitch in Bio for a Pearl Jam podcast!

~ridiculous-silly-header is @jessevondoom’s step-by-step process demo of the rainbow text on the Glitch homepage!

~heropetz by @jojo080889 is a 90s style Petz fan site. It looks so good!

~a11y-bingo by @ollicle and @alex.day is an accessibility (a11y) bingo card

We’ve shared this before, but it’s making the rounds again: ~phd-template by @aandreev0 is a really great template for generating welcome letters to (PhD) students and setting lab expectations.

~birds-eye-cards is another great project from the folks at @bplmaps that presents a visual pattern system of aerial images.

We love this lil character, ~invisibleq by @luarnmama

~carfig by @JacobWaites is an adorable, vibrant scene for a car color chooser made in Spline! Spline even gave it some praise!

And for the bike riders, the folks at Needle created ~needle-bike to demonstrate realtime exploration of 3D models and mock-ups – built in Unity and published on Glitch!

~like-like by @elankiderman is a really amazing tool for wandering through Twitter. Our friend Tom calls it “a beautiful meditation.”

~citibikes by @LouisMinsky helps you find Citibike locations with ebikes. Follow @citibikestats on Twitter if you’re an NYC local and want to know the latest.

~scoreboard-ultimate by @philiprenich is a minimal, sweet scoreboard tracker

~yellow-somber-bobolink by @catherineomega was built to help someone who has lost their voice save themselves some words.

~yunai-movenet by @NadiaPiet is a Master thesis project using machine learning to detect yoga poses!

~riverriverriver by @mipmckeever is a no-code version of their tool for storing, searching and displaying news wires.

~pathway-generator by @carolynlimadeo is a very sweet learning pathway generator, and you can remix it to add your own tools for more personal speculative futures!

Looks like ~spicy-snowy-starfish was the winner of the #100devs coding competition! (Credits are in app) 🍕

~goodbye-monster by @beckett is a browser-based pet sim made as a class project so it may not be openly accessible but you can see screenshots in this tweet.

~your-first-tech-job by @aTylerRobertson is a “persistently online multiplayer game of Espionage.”

We love this: ~choose-budget-dinner by @snotskie is an app that helps you and others you meal plan with decide on dinners together.

From soothing stories about dreams, to seeing big cities from a bird's eye view, or dreaming about not having to decide what’s for dinner, we’re a big fan of what you all imagine and create with Glitch!  As always, if you have Glitch projects or playlists you built or love and want us to feature, either share them on the forum, tweet them to us @glitch or email community@glitch.com—we’d love to see your work in our next roundup!

The project featured in this post’s header image is ~of-touch by @melaniehoff and @amyfang123 and we highly recommend you click and drag around this beautiful interactive poem!

What gives something the quality of being dreamy? Maybe you picture being in a through the looking glass type of pastel and foggy environment similar to somewhere real, but not quite right.

Last month on Glitch, the May 2022 edition

The Glitch community will no longer be able to use a Facebook account to log in to Glitch. If you created your Glitch account with Facebook, don’t fret, you will still be able to log in with the email address associated with your Facebook account. And if you don’t use Facebook, you don’t have to do anything!

Even better, you can use the handy Magic Link feature to update your Account Settings and change your password. 

The Glitch community has shown an overwhelming preference for other login services. This change helps us simplify the Glitch experience and more importantly, matches what our community has shared about their expectations for the platforms they trust. Creating and maintaining an inclusive environment where creators feel empowered to experiment and share is a responsibility we take seriously. 

Your trust is essential to us so we wanted to be clear about this change, and make sure you know you’ll always have access to your projects no matter how you log in.

Have features you’d like to see in Glitch? Let us know by sharing on the community forum.

The Glitch community will no longer be able to use a Facebook account to log in to Glitch.

A little poke: Still using Facebook login?

We have some huge, exciting news for Glitch and the entire Glitch community: Today, Glitch is becoming part of Fastly! We’re joining forces with the Fastly team to bring the creative power of Glitch to even more people, and to help make the internet better by making it easier for everyone to create.

First, for our loyal community of Glitch users who’ve been with us for years: you’re good, we got you. Nothing changes about your apps or your Glitch account with this news, and the changes you’ll see in the future will be about making Glitch better and even more fun and rewarding to use going forward.

If you’re new to Glitch, you should know what we’re about — Glitch is a friendly community where millions of people come together to create, share and remix web apps for work, play and everything in between. 

So, why are we joining forces with Fastly? There are a couple of great reasons. It starts with having more support and resources to keep improving Glitch. We’re hiring for incredible people to come help with this work, starting today with engineering roles on the Developer Relations team, and watch for Glitch-focused support, community and engineering roles coming soon, too. And they’ll be in good company — every single member of the Glitch team is coming along to our new home at Fastly, to continue making the site and the community with the same spirit and care that they’ve shown over the last 5+ years.

Over time, we’ll be tapping into Fastly’s incredible technologies to make it easier than ever to make fast, secure, expressive apps. Today, Fastly is best known for delivering content on the web incredibly quickly (thus the name!) and securely. But we’re also super excited about their edge platform, which will let people build new kinds of apps. We’ll talk more about that once we’ve got some specific stuff to show you, but if you can imagine the cool stuff you’d build with that power, then you’ve probably got a good sense of where we’re headed.

Most fundamentally, we know that Fastly’s whole team really understands what makes Glitch special, and has believed from day one in empowering more people to make a better internet. Glitch will be one of the most prominent parts of a broader effort to give all developers, regardless of their background or level of experience, the power to build sites and apps that are second to none. A lot of the time, when a little company becomes part of a big company, we worry about losing the things that made the little company (and its not-so-little community) really work. In this case, we’re enthusiastic and optimistic about being able to tap into the resources of a much larger and more global company to help Glitch reach the full potential that we’ve always hoped it would. After teaming up with the Fastly team last year on a partnership to give Glitch users access to Fastly’s new edge platform, we realized that we were thinking in very similar ways about how to help the most people create the most cool things possible, and that set the course for the announcement that we’re excited to make today!

We’ll share more details and updates as we go along, but for now, a great way to get a taste of what’s to come is to try out this starter app and make your own.

An Exciting Leap Forward for Glitch

Sometimes it feels like time is going by so fast, but as 2022 hops on from month to month we find that taking time out to reflect on the things that happen each month helps to demonstrate just how much is accomplished by the Glitch community each and every day. Recognizing your hard work, the kindness that you put out into the world, and the sense of wonder created by your imaginative projects is a constant reminder of how much curiosity and joy exists and the potential to discover even more. 

To complement that work, we recently gave the glitch.com homepage a long look and decided to jazz things up a little. We hope you enjoy the recent update. And, in case you missed it, our director of community, Jenn Schiffer recently appeared in a webinar with friends from Fastly and EdgeMesh to discuss Democratizing the Edge where many Glitch community shoutouts happened. Let’s continue the celebration of your efforts with April’s roundup of awesome projects, playlists, and more!

True,~park by@oa495 is an oldie but came up in a discussion about accessibility and drag-and-drop implementations. It’s such a neat example, we had to share!

~speakgame by @r0 is a game where you guess which language has the most native speakers

~emojia by @LingDong- is an online multiplayer world made ~~entirely~~ of emojis.

~whack-a-paw by @NatoshiBanamoto is a cute lil whack-a-mole game

To celebrate 9000 followers on Twitter, @adarosecannon made ~scouter!

~needle-bike is a WebXR bike configuration app that @marwie built and shared in our forum

~market-forces by @OkayHughes is a very visually satisfying art project, just watch.

~digitiser-cartoon-strip-generator is an old cartoon strip generator that @doug brought back from the Wayback Machine and put onto Glitch so it can live again!

~nails by @CharStiles allows you to click and drag in the embed for an odd surprise

~a-small-memorial by @toddwords is a beautiful, interactive memorial, part of this new online journal, The HTML Review

~dapper-lofty-elk by @ladylarisa123 is an awesome looking coded poem from an SFPC student

~aromatic-paint-tire by @ariaandsam excuse generator, anyway I would’ve loved to have gone out tonight but I’m currently looking for my wallet.

~bill-split-app is a sweet bill-splitting utility by @cool-peaches, who replied to the latest Glitch newsletter to share it!

YOU WOULDN’T DOWNLOAD A CAR (by @OverlappingElvis lol)

~phone-from-dilemma by@aTylerRobertson is a fully-featured replica of Kelly Rowland's spreadsheet phone in the music video for Dilemma.

~lassoism is a Ted Lasso-ism generator by @danfishgold and @lexipedia.shir. That’s right, Betty White.

Sometimes it feels like time is going by so fast, but as 2022 hops on from month to month we find that taking time out to reflect on the things that happen each month helps to demonstrate just how much is accomplished by the Glitch community each and every day.