Skip to content

Instantly share code, notes, and snippets.

View mjackson's full-sized avatar
💿

Michael Jackson mjackson

💿
7.2k followers · 36 following
View GitHub Profile
@mjackson
mjackson / toggle-desktop-icons.sh
Last active February 18, 2024 21:15
Quickly show/hide desktop icons on macos
#!/bin/bash
# To install: just copy this script to your machine and name it whatever you want.
# Let's say you named it toggle-desktop-icons.sh, then all you need to do is make
# the script executable, like this:
#
# chmod +x toggle-desktop-icons.sh
#
# Now you can execute the script directly in the terminal any time you want to
# show/hide the desktop icons, like this:
@mjackson
mjackson / useMediaQuery.js
Created July 25, 2019 01:05
A React hook for listening to the state of a CSS media query
import { useEffect, useState } from 'react';
export default function useMediaQuery(query, defaultValue) {
const [matches, setMatches] = useState(defaultValue);
useEffect(() => {
const mql = window.matchMedia(query);
setMatches(mql.matches);
@mjackson
mjackson / useUndo.js
Last active October 16, 2021 11:05
import { useRef, useState } from 'react'
function useUndo([state, setState]) {
const history = useRef([state])
const [index, setIndex] = useState(0)
function undo() {
setIndex(Math.max(index - 1, 0))
}
function redo() {
@mjackson
mjackson / useStateWithHistory.js
Created May 22, 2019 16:26
function useStateWithHistory(defaultValue) {
const history = useRef([defaultValue])
const [index, setIndex] = useState(0)
function undo() {
setIndex(index > 0 ? index - 1 : index)
}
function redo() {
setIndex(index < history.current.length - 1 ? index + 1 : index)
}
@mjackson
mjackson / render-props-v-hooks.js
Created May 22, 2019 16:21
// We want to subscribe to some data. Here are 2 ways to do the SAME thing.
// 1. setup some state
// 2. subscribing to a uid, set posts when they come in
// 3. unsubscribing when the component unmounts
// 4. when the uid changes:
// - unsubscribing from prev uid
// - re-subscribing to the new uid
// Here's a render prop:
@mjackson
mjackson / useStorage.js
Last active November 4, 2021 06:36
A React hook for persisting state between page refreshes (also SSR compatible)
import { useEffect, useRef } from 'react';
function getItem(storage, key) {
const value = storage.getItem(key);
if (!value) return null;
try {
return JSON.parse(value);
} catch (error) {
@mjackson
mjackson / usePromise.js
Last active January 21, 2024 00:02
import { useState, useEffect, useCallback } from 'react'
function usePromise(createPromise) {
const [error, setError] = useState()
const [value, setValue] = useState()
useEffect(() => {
let current = true
createPromise().then(
@mjackson
mjackson / travis.yml
Last active May 25, 2022 13:56
Travis CI + google-cloud-sdk + updated kubectl + Docker
# The Google Cloud SDK on Travis is pretty old (2014). So if
# you want to use an up-to-date version, you have to install
# your own. This config is the bare minimum you'll need to
# get an updated version of the SDK + kubectl.
cache:
directories:
# We cache the SDK so we don't have to download it again on subsequent builds.
- $HOME/google-cloud-sdk
services:
# Include the docker service so you can roll your own images.
@mjackson
mjackson / HOC-w-Render-Prop.js
Created May 10, 2018 21:13
import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
document.body.style.background = `
linear-gradient(135deg,
#1e5799 0%,
#2989d8 50%,
#207cca 51%,
#7db9e8 100%
@mjackson
mjackson / react-15-6-2.html
Last active May 10, 2018 05:49
React TestUtils Simulate regression between 15.6.2 and 16.3.2
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/babel.js"></script>
</head>
<body>
<div id="root"></div>