About two and a half years ago, I lived in Colorado, and had to fly out to Columbus Ohio pretty regularly. On one such flight, I wanted to test out some CSS and HTML. But I didn’t have any Wifi on the plane. When you don’t have internet, and you want to do a quick code-and-preview, it can be annoying when you have to fire up a local server and set up your files. I figured that there should be a code editor that could work regardless of whether you had an internet connection.
So I made one.
For the rest of that plane ride, I decided to work on an editor that I would want to use. It had four requirements:
- It should work without an internet connection
- It should never depend on external files or libraries in order to work
- It should work as a single file
It should be a code sandbox — completely self-contained and not reliant on anything other than a functioning web browser.
I was running short on creativity in the name department. “Sandy” because it’s a sandbox, “Mc” because it sounds cool.
McSandy has all of the things that I wanted out of an editor, so in addition to its four fundamental requirements, there’s some other features, too:
- You can drop an image into the HTML or CSS fields – and that image could be anything, including SVG
- Every “sandbox” that you make gets a URL – so you can book mark it for later
Under the Hood
McSandy is all HTML5, all the time. Don’t bother expecting it to work in anything less than IE10. I developed it for Chrome, and it should work in FireFox, Safari, and Opera, too. McSandy uses a few “HTML5” features:
- The layout uses CSS’ Flex box module — that’s one of the many reasons it won’t work in IE9
- Animations: There’s some subtle stuff in there, some transparencies, but nothing too radical
- A preprocessor: I used Stylus and NIB to make things work together. A really neat thing is that the color palette is generated entirely on one color; so if you want to change the entire experience, you can
- I use Eli Grey‘s filesaver.js for the download feature
- NavigatorOnline for knowing if you have an internet connection
- The actual preview is an iframe whose
srcis set to the url of a Blob
- localStorage for saving your projects — which is also why you won’t get your projects if you use McSandy in a different browser
- Drag and Drop for… you know… dragging and dropping
Bugs and Things
McSandy is officially in Beta. That means that I’m sharing it with the world, asking you all to try it out, and tell me what you think. The project is up on Github. For right now, it is not open-sourced. Once McSandy is out of beta, I will probably make the offline version of it open-sourced (that’s a hint of things to come).
I made a thing. It lets you write code, and preview it. It doesn’t even need internet to work. It’s 351 kb and just under 3000 lines of code.
You can go to McSandy.com and start playing around. If you want to download it, then save the web page. Click on it, and it’ll work. It’s kinda cool like that.
If you think this tool would be even remotely useful, maybe consider buying me a cup of coffee? Click on the i in the upper right corner to find out how.