Skip to content

Instantly share code, notes, and snippets.

@wolfpilot
wolfpilot / findOverflowParents.js
Created June 15, 2023 10:43 — forked from brandonjp/findOverflowParents.js
find overflow:hidden ancestors
// when you're trying to use `position:sticky` on an element
// you'll have trouble if any parent/ancestor element has
// overflow set to anything other than "visible" (such as: auto,hidden,overlay,scroll)
// & turns out if a parent is `display:flex` it might need some love
// (to remedy this you can set the `align-self` of your sticky element)
// see here for how the display & align-self properties affect: http://bit.ly/2ZaRu4o
// so, to find those troublesome parents...
// copy & paste this into Chrome Inspector/Dev Tools console
// (and be sure to change the #stickyElement below, if needed)
#FFD552,#FFFFFF,#3E403B,#F2F2F2,#ECEEF2,#30322A,#17B5DA,#17B5DA,#FFFFFF,#30322A
@wolfpilot
wolfpilot / useScroll.ts
Last active December 11, 2020 11:34
Use Scroll Hook (offset & direction)
import { useState, useEffect } from 'react'
export enum DirectionEnum {
Up = 'up',
Down = 'down',
Left = 'left',
Right = 'right',
}
export interface IScrollOffset {
@wolfpilot
wolfpilot / get_prismicio_schema.js
Created November 25, 2020 11:09 — forked from nanorepublica/get_prismicio_schema.js
Quick script to get a GraphQL schema file for Content Models from Prismic.io graphql endpoint.
const { buildClientSchema, printSchema } = require("graphql");
const fs = require("fs");
const { PrismicLink } = require('apollo-link-prismic');
const { gql, ApolloClient, InMemoryCache } = require("apollo-boost");
const prismicReposistory = "<prismic.io repository name>"
const accessToken = "<access token from the repo API settings page"
const ouputFile = "./prismic.graphql"
@wolfpilot
wolfpilot / request.js
Created July 19, 2019 13:36
How to safely make an empty POST request
/**
* Empty POST requests are sometimes required for triggering server-side actions.
*
* Since we're not supplying a request body, it's safer setting the
* content length to 0 to avoid issues with proxies.
*
* For more info, see: https://stackoverflow.com/a/4198969
*/
const url = "#"
const options = {
@wolfpilot
wolfpilot / Store.js
Created March 28, 2019 07:25
Store example (non-singleton based)
// Setup
const initialState = {
// Add your state here
};
export class Store {
constructor() {
if (Store.instance) {
throw new Error('Store is a singleton!');
}
@wolfpilot
wolfpilot / pr.md
Created March 1, 2019 16:17 — forked from piscisaureus/pr.md
Checkout github pull requests locally

Locate the section for your github remote in the .git/config file. It looks like this:

[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
	url = [email protected]:joyent/node.git

Now add the line fetch = +refs/pull/*/head:refs/remotes/origin/pr/* to this section. Obviously, change the github url to match your project's URL. It ends up looking like this:

@wolfpilot
wolfpilot / urlHelpers.js
Created September 11, 2018 22:50
Get the URL params
decodeURI(window.location.search)
.substr(1)
.split('&')
.map(param => param.split('='))
.reduce((values, [ key, value ]) => {
values[ key ] = value
return values
}, {})
@wolfpilot
wolfpilot / PubSub.js
Last active March 28, 2019 13:33
PubSub singleton (ES6)
/**
* Pub / sub (Observer) decoupling function
*
* Based on Addy Osmani's Publish/Subscribe example
* https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript
*/
class PubSub {
/**
* Constructor
*/