chrislaughlin

• Save image
• Add text to image
• Move text around image
• Style text to meme style
• Custom images
• Multiple text blocks

chrislaughlin

html2canvas

Download Image

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
window.location.href=image; // it will save locally

react-draggable

chrislaughlin

• https://github.com/joshwcomeau/react-retro-hit-counter
• http://localhost:8888/
• http://localhost:8888/.netlify/functions/hello
• https://joshwcomeau.com/react/serverless-hit-counter/
• https://jdan.github.io/98.css/#intro
• https://fauna.com/

const faunadb = require('faunadb');

chrislaughlin

(new TextEncoder().encode(pathData)).length

((new TextEncoder().encode(pathData)).length / 1474560).toFixed(2)

chrislaughlin

//checking the time
let startTime, endTime, seconds = 0;

function startTimer() {
    startTime = performance.now();
};

function endTimer() {
    endTime = performance.now();
    var timeDiff = endTime - startTime; //in ms 

chrislaughlin

//Letter.js
import React from 'react';
import styled, { keyframes } from "styled-components";

const grow = (fromScale, toScale, fromRotation, toRotation) => keyframes`
  from {
    transform: rotate(${fromRotation}deg) scale(${fromScale});
  }

  to {

chrislaughlin

PATTERN TILE - USE AT 50% OPACITY FITS WIDTH X4, HEIGHT X4 ON 1920X1080 SCREEN SIZE

BOUNDING BOX AROUND PICTURE & BUTTON - WHITE AT 60% OPACITY SIZE - W- 850, H - 820

BUTTON SIZE- W- 260, H -110

FONT - CHELSEA MARKET TITLE SIZE - 90px

chrislaughlin

https://caniuse.com/#search=prefers-color-scheme

css vars

• have base vars
• then update them inside the media query

In js Check if the matches result is true

• window.matchMedia('(prefers-color-scheme: dark)')
• else its in light theme

chrislaughlin

What day is it site

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
• https://extreme-ip-lookup.com/json/ - city name

chrislaughlin

let testArray = Array(1000000).fill().map((_, i) => i * i);

let testMap = new Map();
testArray.forEach(item => testMap.set(item, item));

const find = () => {
    console.time('Array find');
    testArray.find(val => val == 9604)
    console.timeEnd('Array find');
};