jacobparis

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

jacobparis

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

jacobparis

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

jacobparis

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

jacobparis

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

jacobparis

"bracket-pair-colorizer-2.colors": [ // requires Bracket Pair Colorizer 2
    "White"
  ],
  "bracket-pair-colorizer-2.showHorizontalScopeLine": false,
  "bracket-pair-colorizer-2.scopeLineRelativePosition": true,
  "bracket-pair-colorizer-2.colorMode": "Independent",
  "bracket-pair-colorizer-2.showBracketsInGutter": true,
  "bracket-pair-colorizer-2.rulerPosition": "Full",
  "editor.fontFamily": "Comic Code Ligatures, Times New Roman",
  "editor.rulers": [ 80, 100],

jacobparis

export default class Surface {
    constructor() {

        this.canvas = <canvas id="canvas" width="300" height="480"></canvas>
        // Disable text selection on the canvas
        this.canvas.addEventListener('mousedown', (() => false));

        /*
        this.socket.on('DRAW-drawCanvas', (canvasToDraw) => {
            console.log(canvasToDraw);

jacobparis

import styled from 'styled-components';
import Theme from '../theme';

export const Button = styled.button`
    border: ${props => props.inverted ? `1px solid ${Theme.primary}33` : "none"};
    border-radius: ${props => Theme.baseRadius};
    cursor: ${props => props.disabled ? "not-allowed" : "pointer"};
    display: ${props => (props.wide ? "block" : "inline-block")};
    font-size: ${props => {
        const { baseFontSize } = Theme;

jacobparis

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const resolve = require("path").resolve;

module.exports = {
    mode: "development",
    entry: resolve(__dirname, 'app/index.js'),
    output: {
        path: resolve(__dirname, 'dist'),

jacobparis

Simply and easily with Styled components npm install styled-components

Thats all you need to do. Really! That’s why I love it! No Babel, no Webpack, no CSS pre or post processing. Only JavaScript and nothing else.

CSS in JS

“You mean CSS in JS? Man, that’s weird. I would never do that!” Don’t panic. Just let me show you few examples why this is a great idea. But let’s write some Styled component first:

import styled from 'styled-components;