Skip to content

Instantly share code, notes, and snippets.

View yerffejytnac's full-sized avatar

Jeffrey yerffejytnac

32 followers · 281 following
View GitHub Profile
@JacobWeisenburger
JacobWeisenburger / zustandCustomPersistStorageTemplate.ts
Created March 31, 2023 16:16
Zustand custom persist storage template
import { createStore } from 'zustand'
import { persist, StorageValue } from 'zustand/middleware'
const store = createStore(
persist(
() => ( {} ),
{
name: 'store-state',
storage: {
async getItem ( name: string ): StorageValue<unknown> {
@samselikoff
samselikoff / range.code-snippets
Last active May 29, 2023 16:28
VSCode snippet for creating a loop of n numbers in JSX! https://twitter.com/samselikoff/status/1611406980639244301
{
"Range of numbers": {
"scope": "javascriptreact,typescriptreact",
"prefix": "range",
"body": [
"{[...Array($1).keys()].map((i) => (",
" <$2 key={i}>",
" $3",
" </$2>",
"))}",
@samselikoff
samselikoff / chart-with-d3.jsx
Last active May 2, 2024 06:02
Diff from "Building an Animated Line Chart with d3, React and Framer Motion" https://www.youtube.com/watch?v=kPbRDn5Fg0Y
import * as d3 from "d3";
import {
eachMonthOfInterval,
endOfMonth,
format,
isSameMonth,
parseISO,
startOfMonth,
} from "date-fns";
import useMeasure from "react-use-measure";
@samselikoff
samselikoff / Modal.js
Created March 14, 2022 00:02
import { isTest } from "@/lib/constants";
import { Dialog } from "@headlessui/react";
import { motion } from "framer-motion";
const TRANSITIONS = {
DURATION: !isTest ? 0.5 : 0,
EASE: [0.32, 0.72, 0, 1],
};
function Modal({ onClose = () => {}, initialFocusRef, children }) {
@samselikoff
samselikoff / authed-swr-provider.js
Created July 19, 2021 04:32
Example useAuth hook using Zustand, SWR and Suspense
import firebase from "firebase/app";
import "firebase/auth";
import { gql, GraphQLClient } from "graphql-request";
import { SWRConfig } from "swr";
import create from "zustand";
import { computed } from "zustand-middleware-computed-state";
const firebaseConfig = {
//
};
@oaluna
oaluna / index.html
Created December 8, 2020 18:43
Stripe Website Gradient Animation
<html>
<head>
<title>Stripe Gradient</title>
</head>
<body>
<canvas id="gradient-canvas" data-js-darken-top data-transition-in>
<!--
Remove data-js-darken-top to keep the same brightness in the upper part of the canvas
-->
</canvas>
@zachleat
zachleat / smoothscroll.css
Created August 18, 2020 14:57
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@lvngd
lvngd / d3_multi_foci_cluster_chart.html
Last active August 18, 2023 03:49
Blog post: https://lvngd.com/blog/d3-multi-foci-force-layout-bubble-chart/
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
body {font-family: helvetica;}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="chart"></div>
@ElfSundae
ElfSundae / git-checkout-all-branches.sh
Last active September 19, 2023 23:10
Git checkout all remote branches
#!/bin/bash
remote=origin ; for brname in `git branch -r | grep $remote | grep -v /master | grep -v /HEAD | awk '{gsub(/^[^\/]+\//,"",$1); print $1}'`; do git branch --track $brname $remote/$brname || true; done 2>/dev/null
@MichaelSolati
MichaelSolati / index.ts
Created January 31, 2019 23:19
Using GeoFirestore with Firebase Functions
import * as admin from 'firebase-admin';
import * as functions from 'firebase-functions';
import { GeoFirestore } from 'geofirestore';
import '@google-cloud/firestore/types/firestore';
admin.initializeApp();
// A simple cloud function that will take any doc created in the geocollection collection and convert it to a geofirestore doc
const onCreate = functions.firestore
.document('geocollection/{uid}')