feat(launch): Launch | 011 - Fix social embed information & readme (#2)

Author: poly-glot

README.MD

@@ -4,61 +4,51 @@
 [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/poly-glot/tensorflowjs-remove-background)
 [![Cypress.io Dashboard](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg)](https://dashboard.cypress.io/projects/jp2thc/runs)
 [![DeepScan grade](https://deepscan.io/api/teams/8408/projects/10623/branches/149386/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=8408&pid=10623&bid=149386)
+[![Maintainability](https://api.codeclimate.com/v1/badges/e9ab18c4667689e347de/maintainability)](https://codeclimate.com/github/poly-glot/tensorflowjs-remove-background/maintainability)
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/poly-glot/tensorflowjs-remove-background)
 
-Remove Background from picture using WebAssembly & TensorFlow.js
+Remove Background from the picture using WebAssembly & TensorFlow.js
 
 # Getting Started
 ```
 npm install
 npm start
 ```
 
-## Manual Review Guidelines
+# How it is pieced together
+<img src="https://removebg.junaid.eu/assets/diagram.svg" alt="Flow diagram" />
+
+## Demonstration
 <table width="100%">
     <tr>
-        <td width="100">CSS</td>
-        <td>Use BEM naming convention </td>
+        <td width="100">Canvas</td>
+        <td>How to manipulate <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData" target="_blank">ImageData</a> to build a new image.</td>
     </tr>
     <tr>
-        <td width="100">JS</td>
-        <td>Prefix DOM Element class name or ID with "js-" to indicate element is linked to Javascript</td>
+        <td width="100">Canvas</td>
+        <td><a href="https://github.com/poly-glot/tensorflowjs-remove-background/blob/00b6333c660ea1ecf7d1562dae56b68eea137041/src/component/output/events.js#L42" target="_blank">Save Canvas image.</a></td>
     </tr>    
     <tr>
-        <td width="100">JS</td>
-        <td>Use Async/Await over promises</td>
+        <td width="100">SEO</td>
+        <td><a href="https://support.google.com/gsa/answer/6329153?hl=en#82542">Excluding Unwanted Text from the Google Index</a> <code>&lt;!--googleoff: index--&gt;</code></td>
     </tr>        
     <tr>
-        <td width="100">JS</td>
-        <td>Keep Code branching to one level and reduce nested if/else statements</td>
+        <td width="100">HTML</td>
+        <td>Use <code>referrerpolicy="no-referrer"</code> to disable hotlink protection.</td>
     </tr>
+    <tr>
+        <td width="100">HTML</td>
+        <td>Use accept attribute e.g. <code>accept=".jpg,.png,.jpeg"</code> to allow users to select required file type.</td>
+    </tr>  
     <tr>
         <td width="100">JS</td>
-        <td>Leverage Modern Browser API's instead of bloated libraries or framework e.g. use fetch instead of axios</td>
-    </tr>                            
+        <td>Handle events using <a href="https://javascript.info/bubbling-and-capturing">Event Bubbling</a>.</td>
+    </tr>                                
+    <tr>
+        <td width="100">Accessibility</td>
+        <td>A small &amp; Accessible Collapse implementation.</td>
+    </tr>                                    
 </table>
 
-# Local Development
-
-### Running Github Action
-```
-# https://github.com/nektos/act
-curl https://raw.githubusercontent.com/nektos/act/master/install.sh | sudo bash
-act pull_request
-act --job ci
-```
-
-### Running Sonar
-```
-docker run -d --name sonarqube -p 9000:9000 -p 9092:9092 sonarqube
-docker run -ti -v $(pwd)/src:/root/src --link sonarqube newtmitch/sonar-scanner
-```
-
-### Docker
-```
-docker build -t tensorflowjs-remove-background .
-docker run -it --rm -p 5000:5000 tensorflowjs-remove-background
-```
-
 # Browser Support
 2 most recent versions of Chrome, Firefox, Safari & MS Edge.

docs/control-flow.drawio

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2020-04-07T03:51:43.486Z" agent="5.0 (Macintosh)" etag="AtO8hbI7gnz9pmPdEX8B" version="12.9.8" type="device"><diagram name="Page-1" id="74e2e168-ea6b-b213-b513-2b3c1d86103e">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</diagram></mxfile>

public/assets/diagram.svg

@@ -3,31 +3,28 @@
 <head>
     <meta charset="UTF-8">
 
-    <title>Usual title</title>
-    <meta name="description" content="Usual description">
+    <title>Remove Background from the picture using WebAssembly &amp; TensorFlow.js</title>
+    <meta name="description" content="Open source vanilla js project demonstrating TDD and power of Tensorflow in the browser.">
 
     <!-- Facebook Meta Tags
     ================================================== -->
-    <meta property="og:title"           content="Usual title">
-    <meta property="og:url"             content="">
-    <meta property="og:image"           content="">
+    <meta property="og:title"           content="Remove Background from the picture using WebAssembly&amp; TensorFlow.js">
+    <meta property="og:url"             content="https://removebg.junaid.eu/">
+    <meta property="og:image"           content="https://removebg.junaid.eu/assets/social.jpg">
     <meta property="og:image:type"      content="image/jpg">
     <meta property="og:image:width"     content="1200">
     <meta property="og:image:height"    content="630">
-    <meta property="og:description"     content="Usual description">
-    <meta property="og:site_name"       content="Usual title">
+    <meta property="og:description"     content="Open source vanilla js project demonstrating TDD and power of Tensorflow in the browser.">
     <meta property="og:locale"          content="en_GB">
     <meta property="og:type"            content="website">
 
     <!-- Twitter Cards
     ================================================== -->
     <meta name="twitter:card"           content="summary_large_image">
-    <meta name="twitter:site"           content="">
-    <meta name="twitter:creator"        content="">
-    <meta name="twitter:url"            content="">
-    <meta name="twitter:title"          content="Usual title">
-    <meta name="twitter:description"    content="Usual description">
-    <meta name="twitter:image"          content="">
+    <meta name="twitter:url"            content="https://removebg.junaid.eu/">
+    <meta name="twitter:title"          content="Remove Background from the picture using WebAssembly&amp; TensorFlow.js">
+    <meta name="twitter:description"    content="Open source vanilla js project demonstrating TDD and power of Tensorflow in the browser.">
+    <meta name="twitter:image"          content="https://removebg.junaid.eu/assets/social.jpg">
 
 
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
@@ -37,7 +34,8 @@
 </head>
 <body class="site">
     <header class="site__header" aria-label="Main Header">
-        <p>Usual header notice</p>
+        <p>Remove Background</p>
+        <a href="https://github.com/poly-glot/tensorflowjs-remove-background" target="_blank" rel="noopener">Github</a>
     </header>
 
     <main class="site__body" aria-label="Main View">

public/assets/social.jpg

@@ -1,5 +1,7 @@
 .site__header {
   border-bottom: 1px solid var(--borderColor);
+  display: flex;
+  justify-content: space-between;
   padding: 15px;
 }