JS13k Mode - display total size of minified/zipped source code

TLDR Features:

  • On the back end, use rollup/roadrunner to minify and compress JS source, note file size
  • Display this size out of 13KB in the editor

I participate in a game jam every year called JS13k, and part of the process is setting up rollup/roadrunner/etc to keep your source code under 13KB.

Glitch has some nice features that make building and serving a small game to people easy.

What would be nice is if Glitch had a special type of editor view that keeps an eye on the total size of your source code and displayed it, possibly as a progress bar. A more advanced version would do rollup and zip encoding to determine the total size that way. There’s a “server” category that allows a simple websocket connection for multiplayer games, and that would fit into a Glitch project neatly. All of the js13k rules could be validated on Glitch’s side.

I do see that Glitch shows a “disk space” bar which is close. JS13k allows minified/zipped code, so the fully expanded code size isn’t exactly what we need.

Currently many people use a template to handle the logistics of building/deploying their game, but it could be easier.

Optionally, Ignore “free” libraries used for WebXR category when determining the size

Would also be useful to count server and client code as two separate sizes for Server category, so you can host both on one project.

Good idea! Here’s a poll for people that don’t have votes left:

  • Vote

0 voters

I have used Glitch for a few weeks now, but I’m still learning how it all works.

Is it correct to say that Glitch is set up to run “npm start” on any file modification? If so, a lot of this could be implemented with a package.json line like

"scripts:{
  "start": "npm build && node report.js && node server.js"
}

Where it builds the repo, report.js prints the size of the repo, and then server.js can serve either the built folder or the original code

I think there are some filters to make the server not restart when you’re only editing static files. check /opt/watcher/app-types/node/watch.json

1 Like