Skip to content

Instantly share code, notes, and snippets.

View aholachek's full-sized avatar

Alex Holachek aholachek

View GitHub Profile
@aholachek
aholachek / testUtils.ts
Last active April 7, 2020 18:29
mockFetch function for jest
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
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
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

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

A Basic Guide to Protecting Yourself On the Web

Step One: Secure your passwords

How

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).

Why

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 / challenges.md
Last active May 2, 2019 16:58
CSS Grid Challenges
@aholachek
aholachek / index.js
Last active September 29, 2018 03:11
React Flip Toolkit Tutorial
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
// 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
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*",
"components/*",
"portal/*",
"platform/*"
]