Skip to content

Commit

Permalink
prettify and slack/spectrum links
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinchang
chinchang committed Apr 10, 2018
1 parent bd1ef4b commit 0282154
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 26 deletions.
22 changes: 13 additions & 9 deletions docs/README.md
View file
@@ -1,7 +1,7 @@

# Getting started

## 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!

![Screenshot](../ss1.png)
Expand Down Expand Up @@ -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.

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
<h1>My first HTML</h1>
Expand Down Expand Up @@ -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

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

Expand Down Expand Up @@ -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>

## Adding external libraries

Coming soon...

## Layouts

Coming soon...

## Keyboard shortcuts
Expand Down Expand Up @@ -163,6 +165,7 @@ Coming soon...
`Ctrl/⌘ + /` Single line comment

## Settings

Coming soon...

## Frequently Asked Questions
Expand All @@ -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.

- 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/
* 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/

Make sure to read them if you like to get more behind the scenes of my journey with Web Maker.

Expand All @@ -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:

- Twitter  — [ @webmakerApp](https://twitter.com/webmakerapp)
- [Gitter  chat]( http://gitter.im/web-maker-app/Lobby)
- [Github repository]( https://github.com/chinchang/web-maker/issues)
* Twitter  — [ @webmakerApp](https://twitter.com/webmakerapp)
* [Chat](https://web-maker.slack.com)
* [Community forum](https://spectrum.chat/web-maker)
* [Github repository](https://github.com/chinchang/web-maker/issues)
68 changes: 51 additions & 17 deletions src/partials/help-modal.html
View file
Expand Up @@ -4,34 +4,68 @@
</svg>
</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>
<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>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>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>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>
<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="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://gitter.im/web-maker-app/Lobby" 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>
<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="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>
<h3>Awesome libraries used</h3>
<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><a target="_blank" href="https://nathancahill.github.io/Split.js/">Split.js</a> - Nathan Cahill</li>
<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>
<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>
<a target="_blank" href="https://nathancahill.github.io/Split.js/">Split.js</a> - Nathan Cahill</li>
<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>
</p>

<p>
<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>
</div>
</div>

0 comments on commit 0282154

Please sign in to comment.