1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-06-10 19:50:51 +02:00

prettify and slack/spectrum links

This commit is contained in:
Kushagra Gour
2018-04-10 23:57:40 +05:30
parent bd1ef4b4eb
commit 0282154220
2 changed files with 64 additions and 26 deletions

View File

@ -1,7 +1,7 @@
# Getting started # Getting started
## What is Web Maker ## What is Web Maker
**Web-Maker** is a blazing fast & offline frontend playground for your web experiments. Its available as a Chrome extension and a web app as well. Both are offline usable! **Web-Maker** is a blazing fast & offline frontend playground for your web experiments. Its available as a Chrome extension and a web app as well. Both are offline usable!
![Screenshot](../ss1.png) ![Screenshot](../ss1.png)
@ -50,7 +50,7 @@ Once the Chrome extension is installed, you'll see a Web Maker icon in the right
Okay, so now you might be wondering what do I do with Web Maker open in front of me? Wait no more! Simply put, Web Maker lets you write HTML, CSS & JavaScript code and see instant preview. So lets write some code. Okay, so now you might be wondering what do I do with Web Maker open in front of me? Wait no more! Simply put, Web Maker lets you write HTML, CSS & JavaScript code and see instant preview. So lets write some code.
You should be seeing 3 code panes with the headings: **HTML**, **CSS** and *JS*. Each code pane is dedicated place to write code in the respective languages. Go ahead and click inside the **HTML** code pane to focus it and then paste the following HTML code: You should be seeing 3 code panes with the headings: **HTML**, **CSS** and _JS_. Each code pane is dedicated place to write code in the respective languages. Go ahead and click inside the **HTML** code pane to focus it and then paste the following HTML code:
```html ```html
<h1>My first HTML</h1> <h1>My first HTML</h1>
@ -80,9 +80,9 @@ On the top-left side you can see the title of your creation. Click on it to edit
### Create New, Save or Open a creation ### Create New, Save or Open a creation
On the top-right side, you have the 3 buttons to create a new creation or save an open one. Also you can access all your saved creations from the *Saved Creations Pane* by clicking the *Open* button. On the top-right side, you have the 3 buttons to create a new creation or save an open one. Also you can access all your saved creations from the _Saved Creations Pane_ by clicking the _Open_ button.
From the *Saved Creations Pane* you can also export or import all your creations at once. Exporting generates a JSON file which you can backup in your Google Drive, Dropbox etc. From the _Saved Creations Pane_ you can also export or import all your creations at once. Exporting generates a JSON file which you can backup in your Google Drive, Dropbox etc.
### Settings ### Settings
@ -125,9 +125,11 @@ Web Maker supports bunch of pre-processors in for HTML, CSS & JavaScript each. Y
<video src="./images/switching-preprocessor.mp4" loop autoplay></video> <video src="./images/switching-preprocessor.mp4" loop autoplay></video>
## Adding external libraries ## Adding external libraries
Coming soon... Coming soon...
## Layouts ## Layouts
Coming soon... Coming soon...
## Keyboard shortcuts ## Keyboard shortcuts
@ -163,6 +165,7 @@ Coming soon...
`Ctrl/⌘ + /` Single line comment `Ctrl/⌘ + /` Single line comment
## Settings ## Settings
Coming soon... Coming soon...
## Frequently Asked Questions ## Frequently Asked Questions
@ -173,8 +176,8 @@ Coming soon...
Hi! I am [Kushagra Gour](https://twitter.com/chinchang457), a frontend developer from India. I created Web Maker as a side project from myself because I wanted a frontend playground that was fast and didn't have to rely on network latency to generate realtime preview. Also something which I could use whenever and wherever I wanted, even wihtout Internet! I have written articles about why and how I created Web Maker and how you can benefit from it as a developer. Hi! I am [Kushagra Gour](https://twitter.com/chinchang457), a frontend developer from India. I created Web Maker as a side project from myself because I wanted a frontend playground that was fast and didn't have to rely on network latency to generate realtime preview. Also something which I could use whenever and wherever I wanted, even wihtout Internet! I have written articles about why and how I created Web Maker and how you can benefit from it as a developer.
- FreeCodeCamp: https://medium.freecodecamp.org/web-maker-how-i-built-a-fast-offline-front-end-playground-9fe3629bc86f * FreeCodeCamp: https://medium.freecodecamp.org/web-maker-how-i-built-a-fast-offline-front-end-playground-9fe3629bc86f
- Sitepoint: https://www.sitepoint.com/web-maker-an-offline-browser-based-codepen-alternative/ * Sitepoint: https://www.sitepoint.com/web-maker-an-offline-browser-based-codepen-alternative/
Make sure to read them if you like to get more behind the scenes of my journey with Web Maker. Make sure to read them if you like to get more behind the scenes of my journey with Web Maker.
@ -184,6 +187,7 @@ Oh yes, I am [running a Patreon campaign](https://www.patreon.com/kushagra) to s
Want to send in some suggestions, comments, feature requests or just have a question? Here are your options: Want to send in some suggestions, comments, feature requests or just have a question? Here are your options:
- Twitter  — [@webmakerApp](https://twitter.com/webmakerapp) * Twitter  — [@webmakerApp](https://twitter.com/webmakerapp)
- [Gitter chat](http://gitter.im/web-maker-app/Lobby) * [Chat](https://web-maker.slack.com)
- [Github repository](https://github.com/chinchang/web-maker/issues) * [Community forum](https://spectrum.chat/web-maker)
* [Github repository](https://github.com/chinchang/web-maker/issues)

View File

@ -4,34 +4,68 @@
</svg> </svg>
</a> </a>
<h1><div class="web-maker-with-tag">Web Maker</div><small style="font-size:14px;"> v3.0.3</small></h1> <h1>
<div class="web-maker-with-tag">Web Maker</div>
<small style="font-size:14px;"> v3.0.3</small>
</h1>
<div> <div>
<p>Made with <span style="margin-right: 8px;">💖</span> & <span style="margin-right: 8px;">🙌</span> by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p> <p>Made with
<p>Tweet out your feature requests, comments & suggestions to <a target="_blank" href="https://twitter.com/webmakerApp">@webmakerApp</a>.</p> <span style="margin-right: 8px;">💖</span> &
<p>Like this extension? Please <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank">rate it here</a>.</p> <span style="margin-right: 8px;">🙌</span> by
<a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a>
</p>
<p>Tweet out your feature requests, comments & suggestions to
<a target="_blank" href="https://twitter.com/webmakerApp">@webmakerApp</a>.</p>
<p>Like this extension? Please
<a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
target="_blank">rate it here</a>.</p>
<p> <p>
<a aria-label="Support the developer" d-click="openSupportDeveloperModal" data-event-action="supportDeveloperHelpBtnClick" class="btn btn-icon"><svg><use xlink:href="#gift-icon"></use></svg>Support the developer</a> <a aria-label="Support the developer" d-click="openSupportDeveloperModal" data-event-action="supportDeveloperHelpBtnClick"
<a aria-label="Rate Web Maker" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn btn-icon"><svg><use xlink:href="#heart-icon"></use></svg>Share Web Maker</a> class="btn btn-icon">
<a aria-label="Chat" href="https://gitter.im/web-maker-app/Lobby" target="_blank" class="btn btn-icon"><svg><use xlink:href="#chat-icon"></use></svg>Chat</a> <svg>
<a aria-label="Report a Bug" href="https://github.com/chinchang/web-maker/issues" target="_blank" class="btn btn-icon"><svg><use xlink:href="#bug-icon"></use></svg>Report a bug</a> <use xlink:href="#gift-icon"></use>
</svg>Support the developer</a>
<a aria-label="Rate Web Maker" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
target="_blank" class="btn btn-icon">
<svg>
<use xlink:href="#heart-icon"></use>
</svg>Share Web Maker</a>
<a aria-label="Chat" href="https://web-maker.slack.com" target="_blank" class="btn btn-icon">
<svg>
<use xlink:href="#chat-icon"></use>
</svg>Chat</a>
<a aria-label="Report a Bug" href="https://github.com/chinchang/web-maker/issues" target="_blank" class="btn btn-icon">
<svg>
<use xlink:href="#bug-icon"></use>
</svg>Report a bug</a>
</p> </p>
<p> <p>
<h3>Awesome libraries used</h3> <h3>Awesome libraries used</h3>
<ul> <ul>
<li><a target="_blank" href="https://kushagragour.in/lab/hint/">Hint.css</a> & <a target="_blank" href="https://github.com/chinchang/screenlog.js">Screenlog.js</a> - By me :)</li> <li>
<li><a target="_blank" href="https://nathancahill.github.io/Split.js/">Split.js</a> - Nathan Cahill</li> <a target="_blank" href="https://kushagragour.in/lab/hint/">Hint.css</a> &
<li><a target="_blank" href="https://codemirror.net/">Codemirror</a> - Marijn Haverbeke</li> <a target="_blank" href="https://github.com/chinchang/screenlog.js">Screenlog.js</a> - By me :)</li>
<li><a target="_blank" href="https://emmet.io/">Emmet</a> - Sergey Chikuyonok</li> <li>
<li><a target="_blank" href="http://esprima.org/">Esprima</a> - Ariya Hidayat</li> <a target="_blank" href="https://nathancahill.github.io/Split.js/">Split.js</a> - Nathan Cahill</li>
<li><a target="_blank" href="https://github.com/enjalot/Inlet">Inlet</a> - Ian Johnson</li> <li>
<li><a target="_blank" href="https://webmakerapp.com/">Web Maker!</a> - whhat!</li> <a target="_blank" href="https://codemirror.net/">Codemirror</a> - Marijn Haverbeke</li>
<li>
<a target="_blank" href="https://emmet.io/">Emmet</a> - Sergey Chikuyonok</li>
<li>
<a target="_blank" href="http://esprima.org/">Esprima</a> - Ariya Hidayat</li>
<li>
<a target="_blank" href="https://github.com/enjalot/Inlet">Inlet</a> - Ian Johnson</li>
<li>
<a target="_blank" href="https://webmakerapp.com/">Web Maker!</a> - whhat!</li>
</ul> </ul>
</p> </p>
<p> <p>
<h3>License</h3> <h3>License</h3>
"Web Maker" is <a target="_blank" href="https://github.com/chinchang/web-maker">open-source</a> under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>. "Web Maker" is
<a target="_blank" href="https://github.com/chinchang/web-maker">open-source</a> under the
<a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>.
</p> </p>
</div> </div>