Web Maker, an Offline, Browser-based CodePen Alternative
In this article, Kushagra Gaur introduces Web Maker, a browser extension he created for front-end developers who want a blazing-fast, offline web playground.
If you’re a front-end developer like me, you’ve probably tried one or more of the code playgrounds out there like CodePen, JSBin, JSFiddle etc. They’re all great and do the job perfectly. I’ve mostly used them to figure out issues I’m facing, or to discuss code snippets with colleagues. But I’ve always felt a slight friction in them having to work over the internet — with an inherent delay between starting them up and being able to use them.
I also wanted a quick way to hack stuff while traveling or waiting at the airport, where you’re mostly offline. Of course, you can use an editor and see the results in the browser — but in this fast-paced world, that’s slow to set up!
I tried looking for something that could give me what I wanted, but couldn’t find any. In fact, I found many people looking for the same thing:
Wish @CodePen had an offline mode. No idea how it would work like, but still.
— Chris Armstrong (@Armstrong) February 16, 2015
So I decided to make something myself, and created Web Maker. Now I use it to do all my web experiments — and even to develop Web Maker itself!
What is Web Maker?
Super fast and works offline
You also have the option to save and load your creations for later editing. They’re saved in your browser’s localStorage.
Web Maker is also recommended by Chris Coyier on CodePen blog, if an offline web playground is what you need:
We get asked fairly often about an offline version of CodePen. While we think that would be cool, in all honesty, we aren’t particularly close to that. If you’re looking for a CodePen-like offline editor, and use Chrome, check out Web-Maker by Kushagra Gour.
For more on the story behind CodePen, check out the Versioning Show episode with Chris Coyier…
Multiple layouts to choose from
In addition to having multiple editor layout options, each of your saved creations remembers the layout it last used, along with the code pane sizes. So, basically, whenever you load back any creation, you get the exact same editor configuration that you last saved the creation in.
Also, you get a full screen layout to see your work in actual browser window size.
Preview screenshot capture
Chrome extension APIs give Web Maker immense power to do stuff that normal web apps can’t. One example is screenshot capture. Just click the Take Screenshot button anytime to take an instant screenshot of your preview.
Save as HTML or open in CodePen
Or say you want to share your creation with the world: the Open on CodePen button opens your creation inside CodePen.
Open source everywhere!
I have made Web Maker open source on GitHub. I think it connects me more with the users, who can suggest features they want or log issues they face, all in one place.
There are many interesting logic pieces that go into making such a web playground. All those are open to see and learn from. I personally loved working on prevention of infinite loops using Esprima.
Web Maker heavily uses some awesome, open-source projects out there like CodeMirror, Esprima, Split.js, Escodegen, Inlet.js, Emmet etc. A big shout out to them! And as I mentioned, Web Maker also uses Web Maker. 😉
Continue reading %Web Maker, an Offline, Browser-based CodePen Alternative%
LEAVE A REPLY
You must be logged in to post a comment.