jhnns

import person form "./person.css";

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

jhnns

.name {
    background: hotpink;
}

jhnns

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"));

jhnns

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

jhnns

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

jhnns

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

jhnns

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));
    }
});

jhnns

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;
    }
});

jhnns

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

jhnns

[
    {
        "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."
    },
    {