create a hint-component

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "workshop-web-components-booster-2022",
+  "name": "workshop-on-web-components",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

src/components/some-hints.mjs

@@ -0,0 +1,20 @@
+import { cr } from '/html-builder.mjs'
+
+const css = `
+  div {
+    margin: 5rem 0;
+    padding: 2rem;
+    background-color: #ffff8e;
+    max-width: 300px;
+  }
+`
+
+export class SomeHints extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+    this.shadowRoot.appendChild(
+      cr('div', cr('h2', 'Some hints'), cr('style', css), cr('slot'))
+    )
+  }
+}

src/index.html

@@ -33,18 +33,20 @@
         <h1>Weaving web components in a bundler-free world 🏄</h1>
 
         <p>
+          You have stumbled upon a story-driven workshop on web components. Good
+          luck, have fun!
           <a
             href="https://2022.boosterconf.no/talk/155-weaving-web-components-in-a-bundler-free-world/"
             >Link to workshop description</a
           >.
         </p>
 
-        <p>Web components in short:</p>
+        <h2>Key takeaways</h2>
 
         <ol>
           <li>Web components let's us create custom, reusable HTML tags.</li>
-          <li>It comes by default in all major browsers.</li>
-          <li>Can be used without a framework</li>
+          <li>It's a browser built-in, meaning it's available in all major browsers.</li>
+          <li>This knowledge will is appliable within, across and even without web frameworks.</li>
         </ol>
       </main>
       <site-footer></site-footer>

src/index.mjs

@@ -1,7 +1,9 @@
 import { SiteMenu } from '/components/site-menu.mjs'
 import { SiteFooter } from '/components/site-footer.mjs'
 import { HideUntilLoaded } from '/components/hide-until-loaded.mjs'
+import { SomeHints } from '/components/some-hints.mjs'
 
 customElements.define('site-menu', SiteMenu)
 customElements.define('site-footer', SiteFooter)
 customElements.define('hide-until-loaded', HideUntilLoaded)
+customElements.define('some-hints', SomeHints)

src/part-2.html

@@ -115,6 +115,29 @@
           </ul>
         </li>
       </ul>
+      <some-hints>
+        <ul>
+          <li>
+            <a
+              href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow"
+              >this.attachShadow({mode: "closed"})</a
+            >
+            returns a shadowRoot that can't be reached by other JavaScript code.
+          </li>
+          <li>
+            <a href="https://requestbin.net/">https://requestbin.net/</a> is
+            useful for when you need to be able to post data somewhere.
+          </li>
+          <li>
+            Calling Requestbin from the browser will throw a
+            <a
+              href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors"
+              >CORS error</a
+            >. Thus, recommend using a browser plugin for temporarily disabling
+            CORS.
+          </li>
+        </ul>
+      </some-hints>
     </main>
     <site-footer></site-footer>
   </body>

src/part-3.html

@@ -25,10 +25,9 @@
     <main>
       <h1>Part Three: The boss's phone</h1>
       <p>
-        It's friday afternoon and peace and quiet seems to have finally arrived
-        in the dungeon that's your office with your name place on it. Through
-        dusty cellar windows up close to the ceiling you can see the daylight
-        outside taunting you.
+        It's Friday afternoon and some peace and quiet seem to have finally
+        arrived in the dungeon that's your office. Through the dusty cellar
+        windows close to the ceiling you see the daylight outside.
       </p>
       <figure class="figure figure--float-right">
         <img src="/blackberry-phone.jpg" alt="a blackberry cell phone" />
@@ -92,8 +91,24 @@
       </p>
       <p>
         I cannot believe it. The boss will be furious if we don't deploy this
-        right now and do some testing.
+        site right now and do some testing.
       </p>
+      <p>So, what I need you to do is this:</p>
+      <ol>
+        <li>Deploy this site on the web.</li>
+        <li>
+          Benchmark this site so that we can get some intel on how bad the
+          situation is. I'm not going to lose my job over this I tell you!
+        </li>
+      </ol>
+
+      <some-hints>
+        <ul>
+          <li>You can create a free account on <a href="https://www.netlify.com/">Netlify</a> to deploy the site.</li>
+          <li>For a basic benchmarking you can use <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> which comes built into Chrome.</li>
+        </ul>
+      </some-hints>
+
     </main>
     <site-footer></site-footer>
   </body>