Skip to content

Instantly share code, notes, and snippets.


Alex Holachek aholachek

View GitHub Profile
aholachek / testUtils.ts
Last active Apr 7, 2020
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 / useDeepEqualCallback.ts
Last active Mar 29, 2020
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 / coverage.json
Created Feb 3, 2020
Reddit coverage.json
View coverage.json
This file has been truncated, but you can view the full file.
"url": "",
"ranges": [
{ "start": 0, "end": 99 },
{ "start": 447, "end": 629 },
{ "start": 655, "end": 1210 },
{ "start": 1221, "end": 1494 },
{ "start": 1505, "end": 1507 }
aholachek /
Last active Jan 29, 2020
Source-map-explorer workflow: View all bundles loaded in a certain entrypoint

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:


aholachek /
Last active Jun 4, 2021
High impact, low-effort ways to protect yourself on the web

A Basic Guide to Protecting Yourself On the Web

Step One: Secure your passwords


Use a password manager and use different, complex passwords for every site. (The password manager will make it easy to generate and save new, secure passwords.) The one I use is OnePassword (paid plan).



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.



aholachek / index.js
Last active Sep 29, 2018
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()];
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 / jsconfig.json
Created Jan 21, 2018
VSCode config to allow for "Go To Definition" with Webpack aliases
View jsconfig.json
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [