Skip to content

Instantly share code, notes, and snippets.

View smhutch's full-sized avatar

Scott Hutcheson smhutch

View GitHub Profile
@smhutch
smhutch / plotter.md
Created September 5, 2021 19:01
Optimizing SVGs for pen plotters

Pen plotters can't handle fills, so we sometimes need to use the occult plugin to rewrite rects etc as lines.

vpype read INPUT.svg occult -i write --color-mode none --landscape OUTPUT.svg

Reference

@smhutch
smhutch / restricted-as-prop.tsx
Created May 27, 2021 20:24
Restricting the `as` prop with Stitches
import type * as Polymorphic from "@radix-ui/react-polymorphic";
import type { ComponentProps } from "react";
import React, { forwardRef } from "react";
import { styled } from "../../theme";
const DEFAULT_TAG = "p";
const StyledText = styled(DEFAULT_TAG, {
// your styles
});
@smhutch
smhutch / notes.md
Created August 10, 2020 18:54
React tips

React

  1. Avoid state duplication. Instead, derive from props by transforming the state and ownProps in mapStateToProps. Example:
// This example assumes the same data structure as suggested below:
function mapStateToProps(reduxState, ownProps) {
  // ownProps = props passed to this component (some come from React router.)
	const { id } = ownProps.match.params
 const { lists } = state;
@smhutch
smhutch / personal-raf-boilerplate.js
Created September 2, 2017 17:32 — forked from bendc/personal-raf-boilerplate.js
requestAnimationFrame boilerplate code
"use strict";
// animation utils
// ===============
const trackTime = timing => {
const now = performance.now();
if (!timing.startTime) timing.startTime = now;
const elapsed = now - timing.startTime;
@smhutch
smhutch / bg.js
Created August 25, 2017 20:09
Animated Background Effect
// React Component to render animated background on https://www.smhutch.co.uk
import React from 'react'
import Chance from 'chance'
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
showCanvas: true,