Skip to content

Instantly share code, notes, and snippets.

Avatar
🧁

Alex Holachek aholachek

🧁
View GitHub Profile
@aholachek
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
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
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": "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 Jan 29, 2020
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 May 31, 2020
High impact, low-effort ways to protect yourself on the web
View protect-yourself-on-the-web.md

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.) You can try LastPass (free basic version) or OnePassword (not free but probably worth it).

Why

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 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
aholachek / jsconfig.json
Created Jan 21, 2018
VSCode config to allow for "Go To Definition" with Webpack aliases
View jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*",
"components/*",
"portal/*",
"platform/*"
]
You can’t perform that action at this time.