eslint fixes

.eslintrc.json

@@ -3,7 +3,7 @@
 		"browser": true
 	},
 	"parser": "babel-eslint",
-	"extends": "eslint:recommended",
+	"extends": ["eslint:recommended", "eslint-config-synacor"],
 	"rules": {
 		"accessor-pairs": "error",
 
@@ -26,7 +26,13 @@
 		"eol-last": "off",
 		"eqeqeq": "error",
 		"func-names": "off",
-		"func-style": ["error", "declaration", { "allowArrowFunctions": true }],
+		"func-style": [
+			"error",
+			"declaration",
+			{
+				"allowArrowFunctions": true
+			}
+		],
 		"generator-star-spacing": "error",
 		"global-require": "off",
 		"guard-for-in": "error",
@@ -165,7 +171,7 @@
 				"before": false
 			}
 		],
-		"sort-imports": "error",
+		"sort-imports": "off",
 		"sort-vars": "off",
 		"strict": ["error", "never"],
 		"template-curly-spacing": "error",
@@ -174,7 +180,11 @@
 		"vars-on-top": "off",
 		"wrap-regex": "error",
 		"yield-star-spacing": "error",
-		"yoda": ["error", "never"]
+		"yoda": ["error", "never"],
+		"brace-style": "off",
+		"lines-around-comment": "off",
+		"react/sort-comp": "off",
+		"react/jsx-no-bind": "off"
 	},
 	"globals": {
 		"ArrayBuffer": true,

package.json

@@ -7,7 +7,7 @@
 		"build": "preact build --template src/index.html --no-prerender",
 		"serve": "preact build && preact serve",
 		"dev": "preact watch --template src/index.html --https --no-prerender",
-		"lint": "eslint src",
+		"lint": "eslint src/components/*.jsx",
 		"test": "jest ./tests",
 		"precommit": "lint-staged"
 	},

src/components/Alerts.jsx

@@ -1,5 +1,4 @@
 import { h, Component } from 'preact';
-import { log } from '../utils';
 
 export class Alerts extends Component {
 	shouldComponentUpdate(nextProps, nextState) {

src/components/ContentWrap.jsx

@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
 import UserCodeMirror from './UserCodeMirror.jsx';
 import { computeHtml, computeCss, computeJs } from '../computes';
 import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
-import { log, writeFile, loadJS, getCompleteHtml, BASE_PATH } from '../utils';
+import { log, writeFile, loadJS, getCompleteHtml } from '../utils';
 import { SplitPane } from './SplitPane.jsx';
 import { trackEvent } from '../analytics';
 import CodeMirror from '../CodeMirror';
@@ -40,8 +40,8 @@ export default class ContentWrap extends Component {
 		return (
 			this.state.isConsoleOpen !== nextState.isConsoleOpen ||
 			this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
-			this.state.codeSplitSizes != nextState.codeSplitSizes ||
+			this.state.codeSplitSizes !== nextState.codeSplitSizes ||
-			this.state.mainSplitSizes != nextState.mainSplitSizes ||
+			this.state.mainSplitSizes !== nextState.mainSplitSizes ||
 			this.props.currentLayoutMode !== nextProps.currentLayoutMode ||
 			this.props.currentItem !== nextProps.currentItem
 		);
@@ -420,9 +420,8 @@ export default class ContentWrap extends Component {
 	getCodeSplitSizes() {
 		if (this.props.currentItem && this.props.currentItem.sizes) {
 			return this.props.currentItem.sizes;
-		} else {
-			return [33.33, 33.33, 33.33];
 		}
+		return [33.33, 33.33, 33.33];
 	}
 
 	mainSplitDragEndHandler() {

src/components/CssSettingsModal.jsx

@@ -22,7 +22,11 @@ export default class CssSettingsModal extends Component {
 				<h1>Atomic CSS Settings</h1>
 				<h3>
 					Configure Atomizer settings.{' '}
-					<a href="https://github.com/acss-io/atomizer#api" target="_blank">
+					<a
+						href="https://github.com/acss-io/atomizer#api"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
 						Read more
 					</a>{' '}
 					about available settings.

src/components/Footer.jsx

@@ -148,7 +148,11 @@ export default class Footer extends Component {
 						</svg>
 					</A>
 				</div>
-				<a href="https://webmakerapp.com/" target="_blank">
+				<a
+					href="https://webmakerapp.com/"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
 					<div class="logo" />
 				</a>
 				&copy;
@@ -189,6 +193,7 @@ export default class Footer extends Component {
 					aria-label="Tweet about 'Web Maker'"
 					href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,frontend,playground,offline"
 					target="_blank"
+					rel="noopener noreferrer"
 				>
 					<svg
 						style={{
@@ -206,6 +211,7 @@ export default class Footer extends Component {
 					class="footer__link  ml-1  hint--rounded  hint--top-right hide-on-mobile"
 					aria-label="Support the developer by pledging some amount"
 					target="_blank"
+					rel="noopener noreferrer"
 				>
 					Support the developer
 				</A>

src/components/HelpModal.jsx

@@ -1,10 +1,9 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
 import Modal from './Modal.jsx';
 
-export default class Header extends Component {
+export function HelpModal(props) {
-	render() {
 	return (
-			<Modal show={this.props.show} closeHandler={this.props.closeHandler}>
+		<Modal show={props.show} closeHandler={props.closeHandler}>
 			<h1>
 				<div class="web-maker-with-tag">Web Maker</div>
 				<small style="font-size:14px;"> v3.2.0</small>
@@ -15,18 +14,26 @@ export default class Header extends Component {
 					Made with
 					<span style="margin-right: 8px;">💖</span> &
 					<span style="margin-right: 8px;">🙌</span> by
-						<a href="https://twitter.com/chinchang457" target="_blank">
+					<a
+						href="https://twitter.com/chinchang457"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
 						Kushagra Gour
 					</a>
 				</p>
 				<p>
-						<a href="/docs" target="_blank">
+					<a href="/docs" target="_blank" rel="noopener noreferrer">
 						Read the documentation
 					</a>.
 				</p>
 				<p>
 					Tweet out your feature requests, comments & suggestions to
-						<a target="_blank" href="https://twitter.com/webmakerApp">
+					<a
+						target="_blank"
+						rel="noopener noreferrer"
+						href="https://twitter.com/webmakerApp"
+					>
 						@webmakerApp
 					</a>.
 				</p>
@@ -35,6 +42,7 @@ export default class Header extends Component {
 					<a
 						href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
 						target="_blank"
+						rel="noopener noreferrer"
 					>
 						rate it here
 					</a>.
@@ -54,6 +62,7 @@ export default class Header extends Component {
 						aria-label="Rate Web Maker"
 						href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
 						target="_blank"
+						rel="noopener noreferrer"
 						class="btn btn-icon"
 					>
 						<svg>
@@ -64,6 +73,7 @@ export default class Header extends Component {
 						aria-label="Chat"
 						href="https://web-maker.slack.com"
 						target="_blank"
+						rel="noopener noreferrer"
 						class="btn btn-icon"
 					>
 						<svg>
@@ -74,6 +84,7 @@ export default class Header extends Component {
 						aria-label="Report a Bug"
 						href="https://github.com/chinchang/web-maker/issues"
 						target="_blank"
+						rel="noopener noreferrer"
 						class="btn btn-icon"
 					>
 						<svg>
@@ -86,12 +97,17 @@ export default class Header extends Component {
 					<h3>Awesome libraries used</h3>
 					<ul>
 						<li>
-								<a target="_blank" href="https://kushagragour.in/lab/hint/">
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="https://kushagragour.in/lab/hint/"
+							>
 								Hint.css
 							</a>{' '}
 							&
 							<a
 								target="_blank"
+								rel="noopener noreferrer"
 								href="https://github.com/chinchang/screenlog.js"
 							>
 								Screenlog.js
@@ -101,6 +117,7 @@ export default class Header extends Component {
 						<li>
 							<a
 								target="_blank"
+								rel="noopener noreferrer"
 								href="https://nathancahill.github.io/Split.js/"
 							>
 								Split.js
@@ -108,31 +125,51 @@ export default class Header extends Component {
 							- Nathan Cahill
 						</li>
 						<li>
-								<a target="_blank" href="https://codemirror.net/">
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="https://codemirror.net/"
+							>
 								Codemirror
 							</a>{' '}
 							- Marijn Haverbeke
 						</li>
 						<li>
-								<a target="_blank" href="https://emmet.io/">
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="https://emmet.io/"
+							>
 								Emmet
 							</a>{' '}
 							- Sergey Chikuyonok
 						</li>
 						<li>
-								<a target="_blank" href="http://esprima.org/">
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="http://esprima.org/"
+							>
 								Esprima
 							</a>{' '}
 							- Ariya Hidayat
 						</li>
 						<li>
-								<a target="_blank" href="https://github.com/enjalot/Inlet">
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="https://github.com/enjalot/Inlet"
+							>
 								Inlet
 							</a>{' '}
 							- Ian Johnson
 						</li>
 						<li>
-								<a target="_blank" href="https://webmakerapp.com/">
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="https://webmakerapp.com/"
+							>
 								Web Maker!
 							</a>{' '}
 							- whhat!
@@ -143,16 +180,23 @@ export default class Header extends Component {
 				<p>
 					<h3>License</h3>
 					"Web Maker" is
-						<a target="_blank" href="https://github.com/chinchang/web-maker">
+					<a
+						target="_blank"
+						rel="noopener noreferrer"
+						href="https://github.com/chinchang/web-maker"
+					>
 						open-source
 					</a>{' '}
 					under the
-						<a href="https://opensource.org/licenses/MIT" target="_blank">
+					<a
+						href="https://opensource.org/licenses/MIT"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
 						MIT License
 					</a>.
 				</p>
 			</div>
 		</Modal>
 	);
-	}
 }

src/components/KeyboardShortcutsModal.jsx

@@ -1,10 +1,9 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
 import Modal from './Modal';
 
-export default class KeyboardShortcutsModal extends Component {
+export function KeyboardShortcutsModal({ show, closeHandler }) {
-	render() {
 	return (
-			<Modal show={this.props.show} closeHandler={this.props.closeHandler}>
+		<Modal show={show} closeHandler={closeHandler}>
 			<h1>Keyboard Shortcuts</h1>
 
 			<div class="flex">
@@ -75,7 +74,11 @@ export default class KeyboardShortcutsModal extends Component {
 						<span class="kbd-shortcut__keys">Tab</span>
 						<span class="kbd-shortcut__details">
 							Emmet code completion{' '}
-								<a href="https://emmet.io/" target="_blank">
+							<a
+								href="https://emmet.io/"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
 								Read more
 							</a>
 						</span>
@@ -88,5 +91,4 @@ export default class KeyboardShortcutsModal extends Component {
 			</div>
 		</Modal>
 	);
-	}
 }

src/components/Notifications.jsx

@@ -1,7 +1,6 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
 
-export default class Notifications extends Component {
+export function Notifications() {
-	render() {
 	return (
 		<div>
 			<h1>Whats new?</h1>
@@ -20,9 +19,9 @@ export default class Notifications extends Component {
 				<span class="notification__version">3.1.0</span>
 				<ul>
 					<li>
-							<strong>Mobile Support (app only).</strong>: Make the Web Maker
+						<strong>Mobile Support (app only).</strong>: Make the Web Maker app
-							app usable on mobile. This is only for web app as Chrome
+						usable on mobile. This is only for web app as Chrome extensions
-							extensions don't run on mobile.
+						don't run on mobile.
 					</li>
 				</ul>
 			</div>
@@ -35,7 +34,11 @@ export default class Notifications extends Component {
 					</li>
 					<li>
 						Add link to our new
-							<a href="https://web-maker.slack.com" target="_blank">
+						<a
+							href="https://web-maker.slack.com"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Slack channel
 						</a>{' '}
 						🤗.
@@ -47,8 +50,8 @@ export default class Notifications extends Component {
 				<span class="notification__version">3.0.3</span>
 				<ul>
 					<li>
-							<strong>Bugfix (extension)</strong>: "Save as HTML" file saves
+						<strong>Bugfix (extension)</strong>: "Save as HTML" file saves with
-							with correct extension.
+						correct extension.
 					</li>
 				</ul>
 			</div>
@@ -61,6 +64,7 @@ export default class Notifications extends Component {
 						<a
 							href="https://medium.com/web-maker/web-maker-3-0-is-here-f158a40eeaee"
 							target="_blank"
+							rel="noopener noreferrer"
 						>
 							Read the blog post about it
 						</a>.
@@ -69,31 +73,35 @@ export default class Notifications extends Component {
 						Web Maker is no more just a Chrome extension, it is also available
 						as web app that runs offline just like the extension! Checkout it
 						out ->
-							<a href="https://webmakerapp.com/app/" target="_blank">
+						<a
+							href="https://webmakerapp.com/app/"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							https://webmakerapp.com/app/
 						</a>.
 					</li>
 					<li>
-							Now use Web Maker web app on any modern browser (tested with
+						Now use Web Maker web app on any modern browser (tested with Chrome
-							Chrome and Firefox).
+						and Firefox).
 					</li>
 					<li>
 						<strong>User Accounts</strong> - The much requested user accounts
-							are here. Now maintain your account and store all your creations
+						are here. Now maintain your account and store all your creations in
-							in the cloud and access them anywhere anytime.
+						the cloud and access them anywhere anytime.
 					</li>
 					<li>
 						<strong>New layout mode</strong> - One more layout mode, that lets
 						you align all the panes vertically.
 					</li>
 					<li>
-							<strong>No more restriction on scripts (Web app only)</strong> -
+						<strong>No more restriction on scripts (Web app only)</strong> - If
-							If you are using the web app, there is no more a restriction to
+						you are using the web app, there is no more a restriction to load
-							load scripts from only specific domains. Load any script!
+						scripts from only specific domains. Load any script!
 					</li>
 					<li>
-							<strong>Inline scripts (Web app only)</strong> - The restriction
+						<strong>Inline scripts (Web app only)</strong> - The restriction of
-							of writing JavaScript only in JS pane is also removed.
+						writing JavaScript only in JS pane is also removed.
 					</li>
 				</ul>
 			</div>
@@ -102,24 +110,40 @@ export default class Notifications extends Component {
 				<span class="notification__version">2.9.7</span>
 				<ul>
 					<li>
-							<a href="https://tailwindcss.com/" target="_blank">
+						<a
+							href="https://tailwindcss.com/"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Tailwind CSS
 						</a>{' '}
 						added to popular CSS libraries list. Thanks
-							<a href="https://github.com/diomed" target="_blank">
+						<a
+							href="https://github.com/diomed"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							diomed
 						</a>.
 					</li>
 					<li>
 						Popular libraries list updated. Thanks
-							<a href="https://github.com/diomed" target="_blank">
+						<a
+							href="https://github.com/diomed"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							diomed
 						</a>.
 					</li>
 					<li>
-							<strong>Dev</strong>: Bug fixes and code refactoring to make
+						<strong>Dev</strong>: Bug fixes and code refactoring to make things
-							things simple. Thanks
+						simple. Thanks
-							<a href="https://github.com/iamandrewluca" target="_blank">
+						<a
+							href="https://github.com/iamandrewluca"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							iamandrewluca
 						</a>.
 					</li>
@@ -136,7 +160,11 @@ export default class Notifications extends Component {
 					<li>
 						<strong>Bugfix</strong>: Fix keyboard shortcut to see keyboard
 						shortcuts :) Thanks
-							<a href="https://github.com/ClassicOldSong" target="_blank">
+						<a
+							href="https://github.com/ClassicOldSong"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							ClassicOldSong
 						</a>.
 					</li>
@@ -150,6 +178,7 @@ export default class Notifications extends Component {
 						<a
 							href="https://medium.com/web-maker/release-2-9-5-add-library-search-pane-collapsing-ux-improvements-more-1085216c1301"
 							target="_blank"
+							rel="noopener noreferrer"
 						>
 							Read blog post about this release.
 						</a>
@@ -157,12 +186,11 @@ export default class Notifications extends Component {
 					<li>
 						<strong>Keyboard shortcuts panel</strong>: Add a list of all
 						keyboard shotcuts. Access with
-							<code> Ctrl/⌘ + Shift + ?</code> or click keyboard button in
+						<code> Ctrl/⌘ + Shift + ?</code> or click keyboard button in footer.
-							footer.
 					</li>
 					<li>
-							<strong>Add external library</strong>: Better UX for searching
+						<strong>Add external library</strong>: Better UX for searching third
-							third party libraries.
+						party libraries.
 					</li>
 					<li>
 						<strong>Improvement</strong>: Code panes now go fullscreen when
@@ -172,7 +200,11 @@ export default class Notifications extends Component {
 					<li>
 						<strong>Improvement</strong>: Add
 						<code>allowfullscreen</code> attribute on iframes. Thanks
-							<a href="https://github.com/ClassicOldSong" target="_blank">
+						<a
+							href="https://github.com/ClassicOldSong"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							ClassicOldSong
 						</a>.
 					</li>
@@ -182,7 +214,11 @@ export default class Notifications extends Component {
 					</li>
 					<li>
 						Popular external libraries list updated. Thanks
-							<a href="https://github.com/jlapitan" target="_blank">
+						<a
+							href="https://github.com/jlapitan"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							jlapitan
 						</a>.
 					</li>
@@ -193,14 +229,14 @@ export default class Notifications extends Component {
 				<span class="notification__version">2.9.4</span>
 				<ul>
 					<li>
-							<strong>Improvement</strong>: Atomic CSS (Atomizer) has been
+						<strong>Improvement</strong>: Atomic CSS (Atomizer) has been updated
-							updated to latest version. Now you can do things like psuedo
+						to latest version. Now you can do things like psuedo elements. Learn
-							elements. Learn More.
+						More.
 					</li>
 					<li>
-							<strong>Bugfix</strong> - Logging circular objects is now
+						<strong>Bugfix</strong> - Logging circular objects is now possible.
-							possible. It won't show in the Web Maker console, but will show
+						It won't show in the Web Maker console, but will show fine in
-							fine in browser's console.
+						browser's console.
 					</li>
 					<li>
 						<strong>Bugfix</strong> - Console's z-index issue has been fixed.
@@ -219,20 +255,27 @@ export default class Notifications extends Component {
 					<li>
 						Checkbox that showed on clicking a boolean value is now removed.
 						Thanks
-							<a href="https://github.com/gauravmuk" target="_blank">
+						<a
+							href="https://github.com/gauravmuk"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Gaurav Nanda
 						</a>.
 					</li>
 					<li>
 						<strong>Bugfix</strong> - Screenshots on retina device are now
 						correct. Thanks
-							<a href="https://github.com/AshBardhan" target="_blank">
+						<a
+							href="https://github.com/AshBardhan"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Ashish Bardhan
 						</a>.
 					</li>
 					<li>
-							<strong>Bugfix</strong> - Double console log in detached mode
+						<strong>Bugfix</strong> - Double console log in detached mode fixed.
-							fixed.
 					</li>
 					<li>
 						<strong>Bugfix</strong> - Console.clear now works in detached mode
@@ -243,14 +286,22 @@ export default class Notifications extends Component {
 					</li>
 					<li>
 						<strong>Bugfix</strong> - Typo correction in README. Thanks
-							<a href="https://github.com/AdilMah" target="_blank">
+						<a
+							href="https://github.com/AdilMah"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Adil Mahmood
 						</a>.
 					</li>
 					<li>gstatic.com is available to load external JavaScripts from.</li>
 					<li>
 						Popular libraries list updated. Thanks
-							<a href="https://github.com/diomed" target="_blank">
+						<a
+							href="https://github.com/diomed"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							diomed
 						</a>.
 					</li>
@@ -259,6 +310,7 @@ export default class Notifications extends Component {
 						<a
 							href="https://github.com/chinchang/web-maker/blob/master/CONTRIBUTING.md"
 							target="_blank"
+							rel="noopener noreferrer"
 						>
 							contribution guidelines
 						</a>{' '}
@@ -281,6 +333,7 @@ export default class Notifications extends Component {
 						<a
 							href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6"
 							target="_blank"
+							rel="noopener noreferrer"
 						>
 							Read blog post about last release.
 						</a>
@@ -299,14 +352,14 @@ export default class Notifications extends Component {
 						<a
 							href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6"
 							target="_blank"
+							rel="noopener noreferrer"
 						>
 							Read blog post about this release.
 						</a>
 					</li>
 					<li>
-							<strong>Detached Preview</strong> - Yes, you read that correct!
+						<strong>Detached Preview</strong> - Yes, you read that correct! You
-							You can now detach your preview and send it to your secondary
+						can now detach your preview and send it to your secondary monitor.
-							monitor.
 					</li>
 					<li>
 						<strong>Find & Replace</strong> - Long awaited, now its there.
@@ -315,22 +368,33 @@ export default class Notifications extends Component {
 					<li>
 						<strong>Atomic CSS (Atomizer) configurations</strong> - Add custom
 						config for Atomic CSS.
-							<a href="https://github.com/acss-io/atomizer#api" target="_blank">
+						<a
+							href="https://github.com/acss-io/atomizer#api"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Read more
 						</a>.
 					</li>
 					<li>
-							<strong>Light mode</strong> - This new setting makes Web Maker
+						<strong>Light mode</strong> - This new setting makes Web Maker drop
-							drop some heavy effects like blur etc to gain more performance.
+						some heavy effects like blur etc to gain more performance. Thanks
-							Thanks
+						<a
-							<a href="https://github.com/iamandrewluca" target="_blank">
+							href="https://github.com/iamandrewluca"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Andrew
 						</a>.
 					</li>
 					<li>
 						<strong>Preserve logs setting</strong> - Choose whether or not to
 						preserve logs across preview refreshes. Thanks
-							<a href="https://github.com/BasitAli" target="_blank">
+						<a
+							href="https://github.com/BasitAli"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Basit
 						</a>.
 					</li>
@@ -359,8 +423,7 @@ export default class Notifications extends Component {
 						list.
 					</li>
 					<li>
-							UTF-8 charset added to preview HTML to support universal
+						UTF-8 charset added to preview HTML to support universal characters.
-							characters.
 					</li>
 				</ul>
 			</div>
@@ -372,13 +435,14 @@ export default class Notifications extends Component {
 						<a
 							href="https://medium.com/web-maker/release-v2-8-is-out-f44e6ea5d9c4"
 							target="_blank"
+							rel="noopener noreferrer"
 						>
 							Read blog post about this release.
 						</a>
 					</li>
 					<li>
-							<strong>Auto Save</strong> - Your creations now auto-save after
+						<strong>Auto Save</strong> - Your creations now auto-save after your
-							your first manual save. This is configurable from settings.
+						first manual save. This is configurable from settings.
 					</li>
 					<li>
 						<strong>Base2Tone-Meadow Editor Theme</strong> - First user
@@ -396,8 +460,8 @@ export default class Notifications extends Component {
 						Auto-completion suggestion can now be switched off from settings.
 					</li>
 					<li>
-							<strong>Improvement</strong> - Stop white flicker in editor when
+						<strong>Improvement</strong> - Stop white flicker in editor when the
-							the app opens.
+						app opens.
 					</li>
 					<li>
 						<strong>Bugfix</strong> - Add Babel Polyfill to enable use of
@@ -433,7 +497,11 @@ export default class Notifications extends Component {
 					<li>
 						<strong>Framer.js support</strong> - You can now load the latest
 						framer.js library from
-							<a href="https://builds.framerjs.com/" target="_blank">
+						<a
+							href="https://builds.framerjs.com/"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							framer builds page
 						</a>{' '}
 						and start coding framer prototypes.
@@ -442,13 +510,13 @@ export default class Notifications extends Component {
 						<strong>Bugfix</strong>: Edit on CodePen is back in action.
 					</li>
 					<li>
-							<strong>Bugfix</strong>: Autocompletion menu doesn't show on cut
+						<strong>Bugfix</strong>: Autocompletion menu doesn't show on cut and
-							and paste now.
+						paste now.
 					</li>
 					<li>
 						<strong>Bugfix</strong>: Updated & fixed urls of some common
-							external libraries to latest versions. UIKit3 & Bootstrap 4α are
+						external libraries to latest versions. UIKit3 & Bootstrap 4α are now
-							now in the list.
+						in the list.
 					</li>
 					<li>Preprocessor selector are now more accessible.</li>
 				</ul>
@@ -459,10 +527,11 @@ export default class Notifications extends Component {
 				<ul>
 					<li>
 						<strong>Fork any creation!</strong>: Now you can fork any existing
-							creation of yours to start a new work based on it. One big use
+						creation of yours to start a new work based on it. One big use case
-							case of this feature is "Templates"!
+						of this feature is "Templates"!
 						<a
 							target="_blank"
+							rel="noopener noreferrer"
 							href="https://kushagragour.in/blog/2017/05/web-maker-fork-templates/?utm_source=webmakerapp&utm_medium=referral"
 						>
 							Read more about it
@@ -475,8 +544,8 @@ export default class Notifications extends Component {
 					</li>
 					<li>Updated most used external libraries to latest versions.</li>
 					<li>
-							<strong>Bugfix</strong>: Add missing Bootstrap JS file to most
+						<strong>Bugfix</strong>: Add missing Bootstrap JS file to most used
-							used external libraries list.
+						external libraries list.
 					</li>
 					<li>
 						Several other minor bugfixes and improvements to make Web Maker
@@ -494,8 +563,8 @@ export default class Notifications extends Component {
 				<span class="notification__version">2.6.1</span>
 				<ul>
 					<li>
-							<strong>Bugfix</strong>: Emojis vanishing while exporting to
+						<strong>Bugfix</strong>: Emojis vanishing while exporting to Codepen
-							Codepen has been fixed.
+						has been fixed.
 					</li>
 					<li>
 						<strong>Bugfix</strong>:
@@ -520,6 +589,7 @@ export default class Notifications extends Component {
 						<a
 							href="https://kushagragour.in/blog/2017/05/web-maker-console-is-here/?utm_source=webmakerapp&utm_medium=referral"
 							target="_blank"
+							rel="noopener noreferrer"
 						>
 							blog post about it
 						</a>.
@@ -538,29 +608,34 @@ export default class Notifications extends Component {
 					<li>
 						<strong>Atomic CSS</strong>: Use can now use Atomic CSS(ACSS) in
 						your work!
-							<a href="https://acss.io/" target="_blank">
+						<a
+							href="https://acss.io/"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Read more about it here
 						</a>.
 					</li>
 					<li>
-							<strong>Search your saved creations</strong>: Easily search
+						<strong>Search your saved creations</strong>: Easily search through
-							through all your saved creations by title.
+						all your saved creations by title.
 					</li>
 					<li>
 						<strong>Configurable Auto-preview</strong> - You can turn off the
-							auto preview in settings if you don't want the preview to update
+						auto preview in settings if you don't want the preview to update as
-							as you type.
+						you type.
 					</li>
 					<li>
-							<strong>Configurable refresh on resize</strong> - You can
+						<strong>Configurable refresh on resize</strong> - You can configure
-							configure whether you want the preview to refresh when you resize
+						whether you want the preview to refresh when you resize the preview
-							the preview panel.
+						panel.
 					</li>
 					<li>
 						<strong>Bugfix</strong> - Fix indentation
 						<a
 							href="https://github.com/chinchang/web-maker/issues/104"
 							target="_blank"
+							rel="noopener noreferrer"
 						>
 							issue
 						</a>{' '}
@@ -609,12 +684,12 @@ export default class Notifications extends Component {
 					</li>
 					<li>
 						<strong>Important</strong>: Due to security policy changes from
-							Chrome 57 onwards, Web Maker now allows loading external
+						Chrome 57 onwards, Web Maker now allows loading external JavaScript
-							JavaScript libraries only from certain whitelisted domains
+						libraries only from certain whitelisted domains (localhost,
-							(localhost, https://ajax.googleapis.com, https://code.jquery.com,
+						https://ajax.googleapis.com, https://code.jquery.com,
-							https://cdnjs.cloudflare.com, https://unpkg.com,
+						https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com,
-							https://maxcdn.com, https://cdn77.com,
+						https://cdn77.com, https://maxcdn.bootstrapcdn.com,
-							https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/)
+						https://cdn.jsdelivr.net/)
 					</li>
 					<li>Save button now highlights when you have unsaved changes.</li>
 					<li>Jade is now called Pug. Just a name change.</li>
@@ -636,8 +711,7 @@ export default class Notifications extends Component {
 						remembered by the editor.
 					</li>
 					<li>
-							Title of the creation is used for the file name when saving as
+						Title of the creation is used for the file name when saving as HTML.
-							HTML.
 					</li>
 				</ul>
 			</div>
@@ -645,9 +719,8 @@ export default class Notifications extends Component {
 				<span class="notification__version">2.3.0</span>
 				<ul>
 					<li>
-							<strong>Add Library Autocompletion</strong> - Just start typing
+						<strong>Add Library Autocompletion</strong> - Just start typing the
-							the name of library and you'll be shown matching libraries from
+						name of library and you'll be shown matching libraries from cdnjs.
-							cdnjs.
 					</li>
 					<li>
 						<strong>Preview Screenshot Capture</strong> - Want to grab a nice
@@ -658,8 +731,8 @@ export default class Notifications extends Component {
 						Shift-Tab to auto-indent it!
 					</li>
 					<li>
-							<strong>Keyboard Navigation in Saved List</strong> - Now select
+						<strong>Keyboard Navigation in Saved List</strong> - Now select your
-							your creation using arrow keys and hit ENTER to open it.
+						creation using arrow keys and hit ENTER to open it.
 					</li>
 					<li>Highlight active line in code panes.</li>
 					<li>
@@ -691,8 +764,7 @@ export default class Notifications extends Component {
 						without refresh when just CSS is changed.
 					</li>
 					<li>
-							<strong>Bugfix</strong> - Indentation fixed while going on new
+						<strong>Bugfix</strong> - Indentation fixed while going on new line.
-							line.
 					</li>
 					<li>
 						<strong>Bugfix</strong> - Works even in Chrome Canary now. Though
@@ -712,8 +784,8 @@ export default class Notifications extends Component {
 						CSS.
 					</li>
 					<li>
-							<strong>Code Folding</strong> - Collapse large code blocks for
+						<strong>Code Folding</strong> - Collapse large code blocks for easy
-							easy editing.
+						editing.
 					</li>
 					<li>
 						<strong>Bugfix</strong> - Support JSX in JavaScript.
@@ -725,8 +797,8 @@ export default class Notifications extends Component {
 				<span class="notification__version">2.0.0</span>
 				<ul>
 					<li>
-							<strong>Save and Load</strong> - Long pending and super-useful,
+						<strong>Save and Load</strong> - Long pending and super-useful, now
-							now you can save your creations and resume them anytime later.
+						you can save your creations and resume them anytime later.
 					</li>
 					<li>
 						<strong>Insert JS & CSS</strong> - Load popular JavaScript & CSS
@@ -738,12 +810,12 @@ export default class Notifications extends Component {
 						every creation!
 					</li>
 					<li>
-							<strong>Quick color & number change</strong> - Click on any color
+						<strong>Quick color & number change</strong> - Click on any color or
-							or number and experiment with quick values using a slider.
+						number and experiment with quick values using a slider.
 					</li>
 					<li>
-							<strong>Linting</strong> - See your code errors right where you
+						<strong>Linting</strong> - See your code errors right where you are
-							are coding.
+						coding.
 					</li>
 					<li>No more browser hang due to infinite loops!</li>
 				</ul>
@@ -763,9 +835,8 @@ export default class Notifications extends Component {
 				<span class="notification__version">1.6.0</span>
 				<ul>
 					<li>
-							You can now configure Web-Maker to not replace new tab page from
+						You can now configure Web-Maker to not replace new tab page from the
-							the settings. It is always accessible from the icon in the
+						settings. It is always accessible from the icon in the top-right.
-							top-right.
 					</li>
 					<li>
 						Download current code as HTML file with Ctrl/⌘ + S keyboard
@@ -779,5 +850,4 @@ export default class Notifications extends Component {
 			</div>
 		</div>
 	);
-	}
 }

src/components/Profile.jsx

@@ -1,38 +1,30 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
 
 const DEFAULT_PROFILE_IMG =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
 
-export default class Profile extends Component {
+export function Profile({ user, logoutBtnHandler }) {
-	render() {
 	return (
 		<div class="tac">
 			<img
 				height="80"
 				class="profile-modal__avatar-img"
-					src={
+				src={user ? user.photoURL || DEFAULT_PROFILE_IMG : ''}
-						this.props.user
-							? this.props.user.photoURL || DEFAULT_PROFILE_IMG
-							: ''
-					}
 				id="profileAvatarImg"
 				alt="Profile image"
 			/>
 			<h3 id="profileUserName" class="mb-2">
-					{this.props.user && this.props.user.displayName
+				{user && user.displayName ? user.displayName : 'Anonymous Creator'}
-						? this.props.user.displayName
-						: 'Anonymous Creator'}
 			</h3>
 			<p>
 				<button
 					class="btn"
 					aria-label="Logout from your account"
-						onClick={this.props.logoutBtnHandler}
+					onClick={logoutBtnHandler}
 				>
 					Logout
 				</button>
 			</p>
 		</div>
 	);
-	}
 }

src/components/SavedItemPane.jsx

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import { getHumanDate } from '../utils';
+import { log, getHumanDate } from '../utils';
 import { trackEvent } from '../analytics';
 import { itemService } from '../itemService';
 import { alertsService } from '../notifications';

src/components/SupportDeveloperModal.jsx

@@ -13,12 +13,20 @@ export default class SupportDeveloperModal extends Component {
 					<h1>Support the Developer</h1>
 					<p>
 						Hi,{' '}
-						<a href="https://kushagragour.in" target="_blank">
+						<a
+							href="https://kushagragour.in"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Kushagra
 						</a>{' '}
 						here! Web Maker is a free and open-source project. To keep myself
 						motivated for working on such open-source and free{' '}
-						<a href="https://kushagragour.in/lab/" target="_blank">
+						<a
+							href="https://kushagragour.in/lab/"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							side projects
 						</a>, I am accepting donations. Your pledge, no matter how small,
 						will act as an appreciation towards my work and keep me going
@@ -35,6 +43,7 @@ export default class SupportDeveloperModal extends Component {
 							class="onboard-selection"
 							href="https://patreon.com/kushagra"
 							target="_blank"
+							rel="noopener noreferrer"
 							aria-label="Make a monthly pledge on Patreon"
 						>
 							<img src="patreon.png" height="60" alt="Become a patron image" />
@@ -47,6 +56,7 @@ export default class SupportDeveloperModal extends Component {
 					<a
 						href="https://www.paypal.me/kushagragour"
 						target="_blank"
+						rel="noopener noreferrer"
 						aria-label="Make a one time donation on Paypal"
 					>
 						Or, make a one time donation

src/components/app.jsx

@@ -1,5 +1,4 @@
 import { h, Component } from 'preact';
-import { Router } from 'preact-router';
 
 import MainHeader from './MainHeader.jsx';
 import ContentWrap from './ContentWrap.jsx';
@@ -7,7 +6,6 @@ import Footer from './Footer.jsx';
 import SavedItemPane from './SavedItemPane.jsx';
 import AddLibrary from './AddLibrary.jsx';
 import Modal from './Modal.jsx';
-import HelpModal from './HelpModal.jsx';
 import Login from './Login.jsx';
 import {
 	log,
@@ -19,7 +17,7 @@ import {
 } from '../utils';
 import { itemService } from '../itemService';
 import '../db';
-import Notifications from './Notifications';
+import { Notifications } from './Notifications';
 import Settings from './Settings.jsx';
 import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
 import { trackEvent } from '../analytics';
@@ -27,14 +25,15 @@ import { deferred } from '../deferred';
 import { alertsService } from '../notifications';
 import firebase from 'firebase/app';
 import 'firebase/auth';
-import Profile from './Profile';
+import { Profile } from './Profile';
 import { auth } from '../auth';
 import SupportDeveloperModal from './SupportDeveloperModal';
-import KeyboardShortcutsModal from './KeyboardShortcutsModal';
+import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
 import { takeScreenshot } from '../takeScreenshot';
 import AskToImportModal from './AskToImportModal';
 import { Alerts } from './Alerts';
 import Portal from 'preact-portal';
+import { HelpModal } from './HelpModal';
 
 if (module.hot) {
 	require('preact/debug');