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
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):
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!
Top comments (2)
What a great read!
I also liked the iFrame stuff for previews!
Ahh, how clever! 😍