| import { keyframes } from '@emotion/react' | |
| import styled from '../../constants/theme' | |
| interface AtomProps { | |
| size: number | |
| } | |
| const Atom: React.FC<Partial<AtomProps>> = ({ size = 50 }) => { | |
| return ( |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #fff; | |
| } | |
| .container { | |
| align-items: center; |
| { | |
| "MRData": { | |
| "xmlns": "http:\/\/ergast.com\/mrd\/1.4", | |
| "series": "f1", | |
| "url": "http://ergast.com/api/f1/2018/circuits.json", | |
| "limit": "30", | |
| "offset": "0", | |
| "total": "21", | |
| "CircuitTable": { | |
| "season": "2018", |
| require('dotenv').config({ path: './.env' }) | |
| const { execSync } = require('child_process') | |
| const fs = require('fs') | |
| const readline = require('readline') | |
| // this should always be relative to this file | |
| const packageFile = require('../package.json') | |
| // get args passed to node | |
| const args = process.argv | |
| // passing the `--cleanup` arg will bail from creating the pull request and |
| // Based on [stats.js](https://github.com/mrdoob/stats.js) | |
| // frames per second (higher is better) | |
| export let fps = 0 | |
| // ms to render one frame (lower is better) | |
| export let mspf = 0 | |
| // average fps over last minute | |
| export let fpsAvg1Min: number | undefined | |
| // average fps over last 5 minutes |
| // Data Sets: | |
| // There are two data sets below: An object of humans with names as keys, | |
| // and an array of Jurassic Park films. | |
| | |
| // Goal: Create an array of objects that contain ONLY the humans who are | |
| // NOT cast in any jurassic park films. The array of objects should have | |
| // this structure: | |
| | |
| // [ | |
| // { |
| import debounce from 'lodash.debounce' | |
| export const handleFavNotification = debounce((showDot: boolean) => { | |
| const canvas = document.createElement('canvas') | |
| canvas.width = 32 | |
| canvas.height = 32 | |
| const ctx = canvas.getContext('2d') | |
| const favicon: HTMLLinkElement | null = document.querySelector( | |
| 'link[rel="icon"]', | |
| ) |
| // Based on the [postcss-pxtorem plugin](https://github.com/cuth/postcss-pxtorem) | |
| const minPixelValue = 4 | |
| export const ROOT_VALUE = 16 | |
| const unitPrecision = 5 | |
| // See https://github.com/cuth/postcss-pxtorem/blob/master/lib/pixel-unit-regex.js | |
| const pxRegExp = /"[^"]+"|'[^']+'|url\([^)]+\)|(\d*\.?\d+)px/gi | |
| // Not an exhaustive list but should cover most use cases: |
| export const fullHex = (hex: string): string => { | |
| let h: string = hex.replace(/[^a-f\d]/gi, '') | |
| if (h.length < 6) { | |
| h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2] | |
| } | |
| return h | |
| } | |
| export const updateHexLuminance = (hex: string, lum: number = 0): string => { | |
| const h: string = fullHex(hex) |
alpha.2, but scheduled for release ~Q1 2019 React roadmap