Skip to content

Instantly share code, notes, and snippets.

jaredpalmer / Video.js
Created Jul 8, 2020
Better <video> with intersection observer.
View Video.js
import { useRef, useCallback, useEffect } from 'react'
import { useInView } from 'react-intersection-observer'
import 'intersection-observer'
export default ({ src, caption, ratio }) => {
const [inViewRef, inView] = useInView({
threshold: 1,
const videoRef = useRef()
jaredpalmer / react-scripts+3.4.1.patch
Created May 26, 2020
Speed up Create React App with TypeScript in development
View react-scripts+3.4.1.patch
diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index 25840d9..25c3c41 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -172,7 +172,7 @@ module.exports = function(webpackEnv) {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
- pathinfo: isEnvDevelopment,
+ pathinfo: false,
View gist:534f11e860152864a850b498c42ab3bc
1) Create a branch with the tag
git branch {tagname}-branch {tagname}
git checkout {tagname}-branch
2) Include the fix manually if it's just a change ....
git add .
git ci -m "Fix included"
or cherry-pick the commit, whatever is easier
git cherry-pick {num_commit}
jaredpalmer / .zshrc
Last active Mar 26, 2020
some zsh utils
View .zshrc
# Take a screenshot every n seconds
# Fun for making timelapse gifs later
# run `creep 20` for every 20 seconds
function creep() {
while :; do; echo "📸" $(date +%H:%M:%S); screencapture -x ~/Screenshots/wes/$(date +%s).png; sleep $1; done
alias db="cd ~/Dropbox/"
alias zs="source ~/.zshrc"
alias gum="git pull upstream master"
View forwardRefWithAs.tsx
import * as React from 'react';
* React.Ref uses the readonly type `React.RefObject` instead of
* `React.MutableRefObject`, We pretty much always assume ref objects are
* mutable (at least when we create them), so this type is a workaround so some
* of the weird mechanics of using refs with TS.
export type AssignableRef<ValueType> =
| {

Stevey's Google Platforms Rant

I was at Amazon for about six and a half years, and now I've been at Google for that long. One thing that struck me immediately about the two companies -- an impression that has been reinforced almost daily -- is that Amazon does everything wrong, and Google does everything right. Sure, it's a sweeping generalization, but a surprisingly accurate one. It's pretty crazy. There are probably a hundred or even two hundred different ways you can compare the two companies, and Google is superior in all but three of them, if I recall correctly. I actually did a spreadsheet at one point but Legal wouldn't let me show it to anyone, even though recruiting loved it.

I mean, just to give you a very brief taste: Amazon's recruiting process is fundamentally flawed by having teams hire for themselves, so their hiring bar is incredibly inconsistent across teams, despite various efforts they've made to level it out. And their operations are a mess; they don't real

View banned.txt
2 girls 1 cup
jaredpalmer / useQuery.ts
Created May 14, 2019
Suspense-ready useQuery
View useQuery.ts
import { ApolloError } from 'apollo-boost';
import { print } from 'graphql/language/printer';
import React from 'react';
const queries = new Map();
const getCacheKey = ({ query, ...opts }) =>
const invalidateCachedQuery = options =>
jaredpalmer / easing.css
Created Apr 20, 2019 — forked from bendc/easing.css
Easing CSS variables
View easing.css
:root {
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
jaredpalmer /
Last active Apr 3, 2019
Swagger Codegen TypeScript Axios
# Required: mvn, java, prettier
# Assume you have your API running on port 8080 and swagger is available at http://localhost:8080/swagger.json
# Assume this script file is in a folder called web that is a sibling to swagger codegen
if [[ ! -d ../swagger-codegen/modules/swagger-codegen-cli/target ]]; then
cd ../swagger-codegen # path to codegen
mvn clean package -DskipTests
cd ../web # path to your app
You can’t perform that action at this time.