Skip to content

Instantly share code, notes, and snippets.

View josephdburdick's full-sized avatar
😇
Mentally present

Joe josephdburdick

😇
Mentally present
View GitHub Profile
@josephdburdick
josephdburdick / ConfettiComponent.tsx
Created July 22, 2024 17:09
Fun canvas confetti component
import React, { useEffect, useRef } from "react";
interface ConfettiParticle {
x: number;
y: number;
r: number;
d: number;
color: string;
tilt: number;
tiltAngleIncremental: number;
@josephdburdick
josephdburdick / generateSlug.ts
Created September 16, 2023 21:00
Generate slug from string
function generateSlug(str: string): string {
return str
.trim() // Remove leading/trailing whitespace
.toLowerCase() // Convert to lowercase
.replace(/[^a-zA-Z0-9\s]/g, "") // Remove non-alphanumeric characters
.replace(/\s+/g, "-") // Replace spaces with hyphens
.replace(/-+/g, "-") // Replace consecutive hyphens with a single hyphen
}
@josephdburdick
josephdburdick / useGeolocation.ts
Created September 16, 2023 19:04
Geolocation React Hook
import { useState, useEffect } from "react"
interface Coordinates {
latitude: number
longitude: number
}
interface GeoLocationError extends Error {
name: string
}
@josephdburdick
josephdburdick / pool-table-seed.json
Last active July 17, 2023 01:10
Pool Tables with Google Place Id
{
"data": [
{
"name": "Ship Ahoy Tavern",
"address": "2889 SE Gladstone St, Portland, OR 97202, United States",
"phoneNumber": "(503) 239-0868",
"type": "Bar",
"latitude": "45.4935217",
"longitude": "-122.6357506",
"placeId": "ChIJqbtFh4EKlVQRTW9LYiGvVfA"
@josephdburdick
josephdburdick / FileInputField.jsx
Created June 17, 2021 17:41
Field Input Field example
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormGroup, Label, FormFeedback } from 'reactstrap';
import { RequiredMark } from './';
import { constants, log } from '@src/lib';
class FileInputField extends Component {
constructor(props) {
@josephdburdick
josephdburdick / NestedPortals.js
Created May 19, 2020 20:03
Nested Portals + SSR
import React from "react";
import ReactDOM from "react-dom";
const PortalContext = React.createContext(
typeof document !== "undefined" ? document.body : null
);
export function Portal({ children }) {
// if it's a nested portal, context is the parent portal
// otherwise it's document.body
// lightweight version of jQuery to select DOM elements
let $ = document.querySelector.bind(document)
let $$ = document.querySelectorAll.bind(document)
// render products into the products container - we have to call this whenever the state changes
$('.products').innerHTML = products.map(getProductHTML).join(' ')
@josephdburdick
josephdburdick / gist:e0f522b6187abf7bce554f6b81fc4d48
Created August 15, 2018 13:14
Print lazy loaded images before printing
const LoadLazyImagesAndPrint = () => {
// Loop through every lazy loaded element
const imageDivs = [...document.querySelectorAll('.image')]
.map(imageDiv => {
let image = imageDiv.querySelector('img');
// Determine if the image is unloaded
if (!image.src) {
// Load the image element string from the accompanying <noscript> element
const unloadedImageString = imageDiv.querySelector('noscript').innerText;
// Replace the unloaded image
@josephdburdick
josephdburdick / margin-padding-utilities.scss
Last active May 14, 2018 18:41
Margin/Padding spacer utility partial
/*
Margin & Padding spacers
usage: mt-4 -> margin-top: 4rem;
*/
$spacer: 1rem;
$sizes: 0, 1, 2, 3, 4, 5, 6;
$directions: top, left, bottom, right;
@each $direction in $directions{
@each $size in $sizes{
@josephdburdick
josephdburdick / smsMiddleware.js
Last active January 4, 2018 00:49
SMS Middleware
import 'isomorphic-fetch';
import gql from 'graphql-tag';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import url from 'url';
import { normalizeRequest } from './sms-middleware.util';
import log from '../../../common/log';
/**