Image may be NSFW.
Clik here to view.
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:
https://twitter.com/armstrong/status/567403700713717763
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?
Web Maker is a Chrome extension that converts your new tab (optional) into a web playground where you can write HTML, CSS and JavaScript and instantly see a preview right there. It has thousands of users and is available on the Chrome Web Store.
Image may be NSFW.
Clik here to view.
Features
Super fast and works offline
Being a chrome extension, Web Maker lives completely in your browser. There's no network involved (unless you're using a third-party JavaScript/CSS library). So it opens instantly. Not just initial startup, but every change you make in the code produces an instant refresh in the preview. And if there's just a CSS change, it doesn't even require a refresh --- it just shows up.
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…
Preprocessors
Preprocessors are an integral part of almost every developer's toolchain. Web Maker provides you with all the most-used preprocessors out there for HTML, CSS and JavaScript --- be it Markdown, Jade, SCSS, Less, JSX or TypeScript.
Adding libraries
If you need to use an external JavaScript or CSS library (like jQuery or Bootstrap) in your creation, you can simply hit the Add Library button, choose one of the popular libraries from the available list, or start typing the name of any library and select it from shown auto-suggestions.
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
When you've done your work inside Web Maker, you don't need to copy/paste it to some file to use somewhere else. You get a Save as HTML file option that embeds your HTML, CSS and JavaScript code inside an HTML file.
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. ;-)
The post Web Maker, an Offline, Browser-based CodePen Alternative appeared first on SitePoint.