Skip to content

Instantly share code, notes, and snippets.

View adbutterfield's full-sized avatar

Adam Butterfield adbutterfield

View GitHub Profile
@adbutterfield
adbutterfield / checkbox.css
Last active September 9, 2023 09:12
Custom Styling Checkboxes: The Modern Way (The Butterfield Way)
:root {
--checkbox-border-color: #8b8c89;
--checkbox-checked-color: #274c77;
--checkbox-hover-color: #a3cef1;
--checkbox-disabled-bg-color: #d9d9d9;
}
input[type="checkbox"] {
box-sizing: border-box;
width: 20px;
@adbutterfield
adbutterfield / radio.css
Last active February 29, 2024 19:44
Custom Styling Radio Buttons: The Modern Way (The Butterfield Way)
:root {
--radio-border-color: #8b8c89;
--radio-checked-color: #274c77;
--radio-hover-color: #a3cef1;
--radio-disabled-bg-color: #d9d9d9;
}
input[type="radio"] {
box-sizing: border-box;
width: 20px;
@adbutterfield
adbutterfield / range-slider.tsx
Created May 16, 2022 02:36
RangeSlider component
import React, { useState, useEffect, useRef } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import useOnMobile from '../../../lib/hooks/useOnMobile';
import { colors, mediaQueries as mq } from '../../../lib/styles';
const useStyles = makeStyles(() => ({
RangeSlider: {
[mq.smOnly]: {
display: 'flex',
@adbutterfield
adbutterfield / LFW212-notes.md
Last active April 2, 2022 14:53
Notes for LFW212 (Node.js Services Development)

Ch 3

Basic web server

Returning data

routes/root.js

const random = require("./data");
@adbutterfield
adbutterfield / useOnMobile.ts
Last active July 10, 2020 02:23
React hook for responsive fun
import { useState, useLayoutEffect } from 'react';
const useOnMobile = () => {
const [isMobile, setIsMobile] = useState(true);
const resizeCallback = () => {
if (window.innerWidth < 768) {
setIsMobile(true);
} else {
setIsMobile(false);
@adbutterfield
adbutterfield / useAxios.ts
Last active June 8, 2020 06:11
React hook to get/post with axios
import { useState, useEffect, useReducer, Dispatch, SetStateAction } from 'react';
import axios, { AxiosResponse, AxiosInstance } from 'axios';
type dataFetchReducerState<R = any> = {
isLoading: boolean;
hasError: boolean;
results?: R;
};
type dataFetchReducerAction = {
@adbutterfield
adbutterfield / typescriptreact.json
Last active June 3, 2020 06:47
Snippits for vscode
{
// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
@adbutterfield
adbutterfield / prettier.config.js
Last active February 21, 2024 05:17
Default prettier config with comments and links to prettier rules
module.exports = {
/**
* Print Width
* https://prettier.io/docs/en/options.html#print-width
*
* Specify the line length that the printer will wrap on.
*
* printWidth: <int>
* default: 80
*/