DEV Community

Cover image for Glitching in a Material World
Potch for Glitch

Posted on

10 6

Glitching in a Material World

Last fall, I was fortunate to be able to attend the Chrome Developer Summit in San Francisco. In addition to all the sessions, there was a demo and exhibition floor showing off all sorts of web tech. The Material Design team was there, showing off a booth where attendees could snap a photo of themselves and use the colors from the image to customize their own version of the Material Design theme. It was a great example of a live demo that draws people in and leaves them with a digital souvenir that they'll want to tinker with later. Of course, I was also excited to see that it was powered by Glitch!

I'm consistently impressed with how the Material Design team has embraced and pushed the capabilities of Glitch on their team page, so I was thrilled to help them figure out how to make one small aspect of their theme generator work.

The challenge was this—let a booth visitor tweak the settings to see what the design system can do, and then "save" their changes to their own copy so they can get back to it later and keep playing! We could save a user's changes to the project filesystem, but then multiple users would be overwriting each other at the booth. The solution takes advantage of the ability to send custom environment variables to a project remix when it's created.

For example, if you wanted to remix hello-express and set the environment variable SECRET when making a remix, you can go to the following URL:

https://glitch.com/edit/#!/remix/hello-express?SECRET=message
Enter fullscreen mode Exit fullscreen mode

Once the remix is finished, you'll have your own copy of hello-express. In it will be a secrets file called .env, and in that will be a line SECRET=message. Variables in that file are available as environment variables, so you can access them from the server's code, e.g. process.env.SECRET in Node.js.

The material design team wanted to send a larger payload, with all the customized component styles. It's not a great idea to put a large amount of data in a URL as browsers will handle it differently, and many will cut it off after a certain size. The solution was to instead temporarily store the customized styles in the server of the app, and then let the remix fetch them when it first loads.

So when the user hits "Remix to Save Theme", it sends the custom styles to the app's server, and is given a unique ID number. We pass the unique ID to the remix, and when the remix first starts up it messages our app "hey, do you have any data for me?" and we can send back the larger data. Once the remix has the data, we can delete it.

The whole flow looks something like this (in glorious ascii):

An ASCII-art diagram depicting the data transfer flow described above

If you'd like to experiment with the flow yourself, you can try out this simplified demo:

Please check out the Material Design Team on Glitch and leave a comment if you build anything using their fantastic resources!

Give your Glitch apps superpowers - keep them awake, lift rate limits, and get more memory and disk space.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (2)

Collapse
 
rohansawant profile image
Rohan Sawant

What a great read!

I also liked the iFrame stuff for previews!

Collapse
 
angelostavrow profile image
Angelo Stavrow

Ahh, how clever! 😍

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay