Skip to content

Instantly share code, notes, and snippets.

@adamhenson
adamhenson / my-workflow.yml
Created November 9, 2019 19:07
Basic example GitHub Action workflow using Lighthouse Check Action
name: Lighthouse Check
on: [pull_request]
jobs:
lighthouse-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- run: mkdir /tmp/artifacts
- name: Run Lighthouse
@adamhenson
adamhenson / Emojis.jsx
Last active September 9, 2019 19:08
Example useMemo Usage
import React, { useMemo } from 'react';
import EmojiImages from './EmojiImages';
import emojiList from './emojis.json';
import styles from './Emojis.module.css';
// all de-duped emojis
const getAllEmojis = emojis => ({
id: Date.now(),
emojis: Array.from(new Set(Object.values(emojis)))
});
@adamhenson
adamhenson / EmojiImages.jsx
Last active September 9, 2019 23:47
Example Implementation of React.memo to Display a Set of Emojis
import React, { memo } from 'react';
const EmojiImages = ({ list }) => {
return (
<>
{list.emojis.map(current => (
<img alt="emoji" src={current} key={current} />
))}
</>
);
@adamhenson
adamhenson / App.jsx
Last active September 9, 2019 23:42
Example Debounce Function with useRef and useEffect
import React, { useEffect, useRef, useState } from 'react';
import { debounce } from 'throttle-debounce';
const DEBOUNCE_MS = 200;
export default () => {
const [value, setValue] = useState('');
const [finalValue, setFinalValue] = useState('');
// we use `useRef` so that we don't redefine the function on every update
@adamhenson
adamhenson / config.yml
Last active July 4, 2020 17:16
circleci Configuration Snippet to Utilize Foo's Public API
post-deploy:
docker:
- image: circleci/buildpack-deps:jessie-curl
steps:
- run:
name: Run a performance audit
command: |
curl -X POST "https://www.foo.software/v1/queue/items" --insecure \
-H "accept: application/json" -H "Content-Type: application/json" \
-d "{ \"pages\": \"$FOO_PAGE_TOKENS\", \"tag\": \"Build %23$CIRCLE_BUILD_NUM\" }"
@adamhenson
adamhenson / render.js
Last active February 22, 2019 12:36
An example server side render with Loadable Components
/* global LOADABLE_STATS: true */
import React from 'react';
import { renderToString } from 'react-dom/server';
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
import { Provider } from './somewhere/out/there/Provider';
import App from './somewhere/out/there/App';
const extractor = new ChunkExtractor({
statsFile: LOADABLE_STATS,
});
@adamhenson
adamhenson / client.js
Created February 21, 2019 21:18
Client side render entry in a React web app with Loadable Ready
import React from 'react';
import { render } from 'react-dom';
import { loadableReady } from '@loadable/component';
import App from './somewhere/out/there/App';
loadableReady(() => render(
<App />,
document.getElementById('root'),
));
@adamhenson
adamhenson / webpack.config.js
Last active February 27, 2019 14:10
Webpack config with Loadable Component
import webpack from 'webpack';
import path from 'path';
const common = {
// imagine your configuration here
};
const plugins = [
// imagine your Babel plugins here
];
@adamhenson
adamhenson / Page.js
Created February 21, 2019 20:51
A page level component defined with Loadable Components and dynamic import
import loadable from '@loadable/component';
export default loadable(() => import(
/* webpackChunkName: "Page" */
'./Page'
));
@adamhenson
adamhenson / index.js
Created February 14, 2019 15:06
An example chart using dynamic imports with Loadable Component.
import loadable from '@loadable/component';
export default loadable(() => import(
/* webpackChunkName: "ApiVisualizationChart" */
'./ApiVisualizationChart'
), { ssr: false });