Johannes Ewald jhnns

## app.js
import person form "./person.css";

element.innerHTML = `<h1 class="${person.name}">Name</h1>`;

## person.css
.name {
    background: hotpink;
}

## gulpfile.js
return tsResult.js
  .pipe(
    sourcemaps.mapSources(function(sourcePath, file) {
      return "../../" + sourcePath; // rewrite sourcePath to point to the correct TypeScript file paths
    })
  )
  .pipe(sourcemaps.write("./"))
  .pipe(gulp.dest("./dist/src"));

## launch.json5
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Server in Docker",
      "port": 9222,
      "timeout": 10000,
      "stopOnEntry": true,

## launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Docker: Attach to Node",
      "port": 9229,
      "address": "localhost",
      "localRoot": "${workspaceFolder}",

## Dockerfile
FROM node:10.8.0-alpine
WORKDIR /server
COPY package.json package-lock.json ./
RUN npm ci
COPY . /server
CMD [ "npm", "run", "start" ]

## shadow-dom-example.js
customElements.define("my-bubble", class extends HTMLElement {
    constructor() {
        super();
        const template = document.getElementById("my-element-template").content;
        const shadowRoot = this.attachShadow({mode: "open"});

        shadowRoot.appendChild(template.cloneNode(true));
    }
});

## custom-element-example.js
customElements.define("my-bubble", class extends HTMLElement {
    constructor() {
        super();
        const template = document.getElementById("my-element-template").content;
        const color = this.getAttribute("background") || "white";

        template.querySelector(".bubble").style.background = color;
    }
});

## template-example.html
...
<template id="my-element-template">
    <style>
        .bubble {
            border: .4rem solid black;
            border-radius: 2rem;
            margin: 1rem;
            padding: 1rem .5rem;
            cursor: pointer;
            font-size: 20px;

## index.json
[
    {
        "name": "web-framework",
        "description": "Transforms a given application state into an HTML or DOM representation. Additionally, it is also often concerned with request routing, data fetching and persistence, change propagation, input validation, user session management and build optimizations."
    },
    {
        "name": "testing-framework",
        "description": "Provides a CLI and an API to run software tests and report results."
    },
    {