Skip to content

Instantly share code, notes, and snippets.

View joshcawthorne's full-sized avatar

Josh Cawthorne joshcawthorne

View GitHub Profile
@joshcawthorne
joshcawthorne / findOverflow.tsx
Last active February 22, 2024 18:02
Debugging Sticky CSS with React: Identifying Overflow Issues in Parent Elements
// This React component utilizes a useEffect hook to traverse up the DOM tree from a referenced element,
// identifying any parent elements with an overflow property that could interfere with the intended 'sticky'
// positioning of the element. It logs each parent's overflow status and highlights those that may cause issues.
// Useful in debugging layout issues related to 'sticky' positioned elements.
//
// Usage:
// Simply include this component within your React application. The referenced element is automatically checked
// on component mount. For non-React code, the logic within useEffect could be extracted and run after the DOM
// has fully loaded, using a direct DOM element reference instead of a ref.
//
@joshcawthorne
joshcawthorne / rename_files.sh
Last active October 5, 2023 13:18
Update files and folders from camelCase to PascalCase. This script is designed to recursively update the capitalization of both files and directories in the current directory. Intended to update a project from using camelCase to PascalCase.
#!/bin/bash
# --------------------------------------------------------------------------
# Script Author: @joshcawthorne
# Warning: BACKUP ALL YOUR FILES BEFORE RUNNING THIS - THIS IS A DESTRUCTIVE
# OPERATION, I AM NOT RESPONSIBLE FOR ANY LOST FILES.
# OS Compatibility: MacOS, Linux, and WSL on Windows 10/11.
# --------------------------------------------------------------------------
# Description:
# -
@joshcawthorne
joshcawthorne / parseStoryblokLink.js
Last active May 4, 2021 10:01
Util to parse Storyblok Links
@joshcawthorne
joshcawthorne / useWindowSize.js
Last active October 5, 2023 13:21
SSR-Compatible (NextJS, Gatsby etc) React hook for getting Window Size.
import { useState, useEffect } from "react";
function useWindowSize() {
const [windowSize, setWindowSize] = useState<{ width: number | undefined; height: number | undefined }>({
width: undefined,
height: undefined,
});
useEffect(() => {
function handleResize() {