DEV Community: Potch

Glitching in a Material World

Potch — Mon, 11 May 2020 16:32:51 +0000

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!

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

Getting started with Node + Express on Glitch

Potch — Wed, 01 Apr 2020 15:10:03 +0000

Glitch has a cornucopia of projects you can remix, customize, and make your own. But sometimes you just need a quick mostly-blank slate. That's why we provide three "hello world" apps that are designed to be but mere vessels for your great idea or simple experiment. We want to make sure these projects are up-to-date and reflect the latest best practices, so we periodically give them a fresh coat of paint. Recently I wrote about the changes made to our simple database starter hello-sqlite. Next up was hello-express, which provides a simple Node.js and express app!

We want the hello- apps to strike a balance between simple and instructive- there should be minimal functionality that's easy to build on top of or replace, but enough there that creators newer to the technologies can get a baseline understanding of how they work. As with hello-sqlite, it was again decided to add a little more functionality to hello-express to make it a more "complete" app.

Previously, the app did little more than use Node and Express to serve a static site that was functionally the same as hello-webpage (a basic webpage starter). That didn't really show why one would use a server for the task at all! The sample client-side JS now loads information from the server, demonstrating both how to send JSON from the server as well as the basics of using fetch on the client side to get the data.

The big structural change aside, we also did some other tidying and upkeep:

📦 updated Node to latest Long Term Support release, version 12, as well as updated all dependencies
⚖️ file naming consistency between hello-express and hello-sqlite
✨ shiny modern ES6+ features on both frontend and backend
📝 rewriting the README to explain the new project structure
💆‍♀️ some gentle style massage

So with that, enjoy the new hello-express:

Merry remixing!

Hello to the new hello-sqlite!

Potch — Mon, 27 Jan 2020 19:13:02 +0000

Glitch is full of all sorts awesome projects people can remix to make their own, but if you’re looking for a quick start or a blank slate, we offer three minimal “hello” projects, where each builds one layer of complexity on the next:

hello-webpage is a simple static webpage with a CSS and JavaScript file
hello-express extends hello-webpage with a Node.js server, using express to handle requests and serve pages/data
hello-sqlite adds a database to hello-express to store information between page sessions.

hello-sqlite is the third-most popular of the starters, and lots of people have used it to explore a new idea. However, the project had a bit of a quirk to it…

It didn’t really use the database!

Why??

When a user views a project on Glitch, they all view the same running instance of that project. When you visit hello-sqlite.glitch.me, you’re talking to the same database that I see when I go there. If the app was to take user input and store it in the database, I'd see the data you put there and vice-versa. For something like a blog's comment section that’s exactly what we want but for a code demo it didn't really make sense. We also didn’t want to risk someone coming along and putting something not-so-friendly in there for all other users to see!

Of course people don't use hello-sqlite directly—they remix it and make it into something else. We found ourselves with a puzzle: how do you make a project behave differently after it's been remixed?

When you remix a project on Glitch, you get a copy of the project's files at the point at which you remixed it, with a few exceptions. We don't copy anything in a special folder called .data, which is meant to hold data specific to that single project. For hello-sqlite, this is where we keep the SQLite database file. We also give special handling to a file called .env. This file is intended to hold secrets you need for your project to work, i.e. API keys, or project-specific variables. The file is a series of variable definitions like this:

# here are my secrets!
API_KEY=b33fcabbage
MY_GREATEST_FEAR=notenoughpudding

When a project is remixed, we remove all the values, but leave the variable names so the person remixing can fill them with their own:

# here are my secrets!
API_KEY=
MY_GREATEST_FEAR=

Thinking about this, the lightbulb went off! We added a variable to hello-sqlite's .env:

DISALLOW_WRITE=TRUE

We then added code to the project that let users add items to the database, but with a check to see if that variable was set:

// DISALLOW_WRITE is an ENV variable that gets reset for new projects so you can write to the database
if (!process.env.DISALLOW_WRITE) {
  // write to the database!
}

This means the sample database writing code is ready to be customized without having to even un-comment it- once you click remix you're set! If a user is also building a demo, they can set DISALLOW_WRITE to true as well to get the same benefit.

Conclusion

Is it a bit of a "hack"? Maybe! I think the solution provides the right balance of being somewhat-clever without relying on giving an app special treatment just because it's made by staff.

Additionally, while adding the new logic we also updated the JS to use widely-supported ES6 syntax and tidy up the documentation.

Try it out!

Thanks to everyone who did code review and helped brainstorm on how to make it all work, as well as all the users who have battle-tested the new starter. If you're looking to build a simple app that stores data to the server, try remixing hello-sqlite and let us know what you think.

Happy Apping!