cladley

$video-total-margin: 96px;
$overlay-bg-color: #000;
$close-button-bg-color: #333;

.video-overlay {
  background-color: $overlay-bg-color;
  display: flex;
  height: 100%;
  left: 0;
  opacity: 0;

cladley

// Some event attached to a parent element
this.parent.addEventListener('click', this.handleItemsClick.bind(this), false);


function handleItemsClick(e) {
   // e.currentTarget is the element that the event was attached to. this.parent here
   
    for (var target = e.target; target && target !== e.currentTarget; target = target = target.parentNode) {
      if (target.matches('.child-selector')) {
        // Do whatever

cladley

to install eslint run

npm install eslint

create eslint.rc file with contents
{
  "parserOptions": {
    "ecmaVersion": "2018"
  },
  "extends": ["eslint:recommended"],

cladley

// To mock a function
// utils has a function called getWinner that takes two strings
// as arguments and return one of them as the winner. It 
// is used internally by thumbWar. Problem here is that the original
// function gets clobbered by our mock, so we have to manually 
// reassign the original back after the test has run.
// This is called monkey patching and only works with commonjs modules
const utils = require('./utils');
const thumbWar = require('./thumb-war');

cladley

// Its like $('<h1>hello</h1>') in jquery

var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

cladley

const fs = require('fs');
const path = require('path');
const crypto = require('crypto');

const findIdsRegex = /id="(.+?)"?/ig;
const fileName = process.argv[2];
const fileAbsoluteDirectory = path.dirname(path.resolve(fileName));
let buffer = '';

if (path.extname(fileName) !== '.svg') {

cladley

import { createStore, applyMiddleware } from "redux";
import ReduxThunk from "redux-thunk";
import rootReducer from "./reducers";

export const middlewares = [ReduxThunk];
const createStoreWidthMiddleware = applyMiddleware(...middlewares)(createStore);

export default createStoreWidthMiddleware(rootReducer);

/////////////////////////////////////////////////////////////////////////////////////////////

cladley

import { storeFactory } from "../test/testUtils";
import { guessWord } from "./actions";

describe("guessWord action dispatcher", () => {
  const secretWord = "party";
  const unsuccessfulGuess = "train";

  describe("no guessed words", () => {
    let store;
    const initialState = { secretWord };

cladley

import React, {forwardRef, useRef, useImperativeHandle, useState, useCallback, useMemo} from 'react';

const Accordion = (props) => {
  let items = useRef(new Map()).current;

  const handleOnToggle = (id) => {
    items.forEach((value, key) => {
      if (key != id) {
        value.close();
      }

cladley

import React, {useState, useImperativeHandle, useRef, useEffect, useMemo, useCallback} from 'react';

const AccordionContext = React.createContext();

function AccordionProvider(props) {
  const accordionItems = new Map();

  const registerAccordionItem = (id, item) => {
    accordionItems.set(id, item);
  };