Skip to content

Instantly share code, notes, and snippets.

View callumlocke's full-sized avatar

Callum Locke callumlocke

View GitHub Profile
@callumlocke
callumlocke / material-design-shadows.css
Created March 25, 2021 14:10 — forked from serg0x/material-design-shadows.css
Google material design elevation system shadows as css. Based on https://material.io/design/environment/elevation.html#default-elevations Exported with Sketchapp from the Google material design theme editor plugin "Baseline" theme.
/* Shadow 0dp */
box-shadow: none;
/* Shadow 1dp */
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
/* Shadow 2dp */
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
/* Shadow 3dp */
@callumlocke
callumlocke / README.md
Last active February 23, 2021 13:02
How to run TypeScript CLI tasks in a Next.js app

Assuming you've got a Next.js app that's already using TypeScript to render pages/components or handle API routes, but you also want to be able to run ad hoc build tasks written in TypeScript (perhaps pulling in type files used by the app)...

  1. Add these deps: npm install -D @babel/core @babel/node
  2. Make sure your Next app has an explicit .babelrc file:
// Default Next.js .babelrc (it's OK if you also have extra stuff in it)
{
  "presets": ["next/babel"],
 "plugins": []
@callumlocke
callumlocke / machine.js
Last active March 9, 2020 18:23
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@callumlocke
callumlocke / .zshrc
Last active March 24, 2024 08:12
ZSH function to auto-switch to correct Node version
####
# ZSH function to auto-switch to correct Node version
# https://gist.github.com/callumlocke/30990e247e52ab6ac1aa98e5f0e5bbf5
#
# - Searches up your directory tree for the closest .nvmrc, just like `nvm use` does.
#
# - If you are already on the right Node version, IT DOES NOTHING, AND PRINTS NOTHING.
#
# - Works correctly if your .nvmrc file contains something relaxed/generic,
# like "4" or "v12.0" or "stable".
@callumlocke
callumlocke / index.html
Created November 9, 2019 21:02
Electron Fiddle Gist
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
@callumlocke
callumlocke / postcode.js
Created June 5, 2017 16:26
Functions for validating and normalising postcodes
const postcodeRegex = /^[a-z]{1,2}\d[a-z\d]?\s*\d[a-z]{2}$/i;
const incodeRegex = /\d[a-z]{2}$/i;
const isValidPostcode = (p) => postcodeRegex.test(p.replace(/\s/g, ''));
const normalisePostcode = (p) => {
if (!isValidPostcode(p)) throw new Error('Invalid postcode');
const spaceless = p.replace(/\s/g, '');
@callumlocke
callumlocke / README.md
Created October 26, 2015 14:38
Importing individual lodash-es functions
import chunk from 'lodash-es/array/chunk';
import zipObject from 'lodash-es/array/zipObject';

console.log(zipObject(chunk(['a', 'b', 'c', 'd'], 2)));
$ rollup -f=iife demo.js > output.js
@callumlocke
callumlocke / README.md
Last active October 26, 2015 14:50
Importing lodash functions from lodash-es categories
import {chunk, zipObject} from 'lodash-es/array';

console.log(zipObject(chunk(['a', 'b', 'c', 'd'], 2)));
$ rollup -f=iife demo.js > output.js
@callumlocke
callumlocke / README.md
Created October 26, 2015 14:33
Importing lodash functions from lodash-es
import {chunk, zipObject} from 'lodash-es';

console.log(zipObject(chunk(['a', 'b', 'c', 'd'], 2)));
$ rollup -f=iife demo.js > output.js