mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-12 12:40:53 +02:00
prettify and slack/spectrum links
This commit is contained in:
Kushagra Gour
@ -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!
|
||||||
|
|
||||||
|
|
||||||
@ -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)
|
||||||
|
|||||||
@ -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>
|
||||||
Reference in New Issue
Block a user