Skip to content

Instantly share code, notes, and snippets.

Avatar

Alex Holachek aholachek

View GitHub Profile
@aholachek
aholachek / testUtils.ts
Last active April 7, 2020 18:29
mockFetch function for jest
View testUtils.ts
export type FetchConfig = RequestInit & {
postman?: boolean;
method?: keyof typeof HTTPMethods;
body?: any;
root: string;
path?: string;
params?: Record<string, any>;
};
export interface Global {
@aholachek
aholachek / useDeepEqualCallback.ts
Last active March 29, 2020 23:47
For the rare times when you need to do a deep object comparison in React's useCallback
View useDeepEqualCallback.ts
import { useRef } from "react";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isequal";
const useDeepEqualCallback = (callback: any, deps: any[]) => {
const callbackRef = useRef(callback);
const cachedDeps = useRef(cloneDeep(deps));
if (!isEqual(deps, cachedDeps.current)) {
callbackRef.current = callback;
cachedDeps.current = cloneDeep(deps);
@aholachek
aholachek / coverage.json
Created February 3, 2020 17:28
Reddit coverage.json
View coverage.json
This file has been truncated, but you can view the full file.
[
{
"url": "https://www.reddit.com/",
"ranges": [
{ "start": 0, "end": 99 },
{ "start": 447, "end": 629 },
{ "start": 655, "end": 1210 },
{ "start": 1221, "end": 1494 },
{ "start": 1505, "end": 1507 }
],
@aholachek
aholachek / instructions.md
Last active January 29, 2020 15:43
Source-map-explorer workflow: View all bundles loaded in a certain entrypoint
View instructions.md

1. Download Coverage Report

Create a coverage report to see which code was downloaded, and which code was actually used for a given entry point of your app. Download the report and put it in the top level directory of your project. Make sure it's named coverage.json.

2. Prepare script

Create this file in the top level directory of your project:

build-bundles.js

@aholachek
aholachek / protect-yourself-on-the-web.md
Last active June 4, 2021 15:05
High impact, low-effort ways to protect yourself on the web
View protect-yourself-on-the-web.md
View flip.md

Here's a rough draft proposal for an extension to the animated component that can handle both simple and advanced FLIP use cases.

Example usage

1. Simplest example

Initiate a FLIP animation on a component by updating the flipKey prop.

Demo

Code

@aholachek
aholachek / index.js
Last active September 29, 2018 03:11
React Flip Toolkit Tutorial
View index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Flipper, Flipped } from "react-flip-toolkit";
import "./styles.css";
const listData = [0, 1, 2, 3, 4, 5, 6, 7];
const colors = ["#6da5ff", "#7971ea", "#5900d8"];
// we'll iterate over this array to create groups of 3 components
const baseArray = [...Array(3).keys()];
@aholachek
aholachek / simple_proxy.js
Last active February 5, 2018 18:12
Simple JS Proxy
View simple_proxy.js
// a handler object specifies which methods to proxy
// this one will simply override JavaScript’s default object get method
const loggingHandler = {
get(target, property) {
const val = target[property]
console.log(`Property "${property}" returned "${JSON.stringify(val)}"!`)
return val
}
}
@aholachek
aholachek / jsconfig.json
Created January 21, 2018 04:07
VSCode config to allow for "Go To Definition" with Webpack aliases
View jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*",
"components/*",
"portal/*",
"platform/*"
]