Skip to content

Instantly share code, notes, and snippets.

Avatar

Sam Selikoff samselikoff

View GitHub Profile
@samselikoff
samselikoff / authed-swr-provider.js
Created Jul 19, 2021
Example useAuth hook using Zustand, SWR and Suspense
View authed-swr-provider.js
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 = {
//
};
@samselikoff
samselikoff / tailwind.config.js
Created Apr 16, 2021
Firefox plugin for Tailwind CSS. Add styles that target Firefox browser only.
View tailwind.config.js
const plugin = require("tailwindcss/plugin");
module.exports = {
mode: "jit",
purge: {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx,vue}"],
},
theme: { extend: {} },
variants: {},
plugins: [
@samselikoff
samselikoff / next.config.js
Last active May 6, 2021
withProse remark plugin that escapes `prose` for MDX components
View next.config.js
let { withProse } = require("./src/remark/withProse");
let { withSyntaxHighlighting } = require("./src/remark/withSyntaxHighlighting");
let { withTableOfContents } = require("./src/remark/withTableOfContents");
let { withExamples } = require("./src/remark/withExamples");
let { withLayout } = require("./src/remark/withLayout");
let { withNextLinks } = require("./src/remark/withNextLinks");
let { VueLoaderPlugin } = require("vue-loader");
let path = require("path");
const withMDX = require("@next/mdx")({
@samselikoff
samselikoff / image-cropper.js
Created Apr 27, 2021
ImageCropper from Fitness App as of 4/27/21
View image-cropper.js
import { animate, motion, useMotionValue } from "framer-motion";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { usePrevious } from "react-use";
import { useGesture } from "react-use-gesture";
export function ImageCropper({
dataURL,
aspectRatio,
crop,
onCropChange,
@samselikoff
samselikoff / GroupedBarChart.js
Last active Apr 27, 2021
Sample grouped bar chart made with d3.chart
View GroupedBarChart.js
d3.chart('BaseChart').extend('GroupedBarChart', {
initialize : function() {
var chart = this;
chart.margin = {top: 40, right: 20, bottom: 40, left: 60};
chart.xScale = d3.scale.ordinal().rangeRoundBands([0, chart.width()], 0.1);
chart.x1Scale = d3.scale.ordinal();
chart.yScale = d3.scale.linear().range([chart.height(), 0]);
chart.color = d3.scale.category10();
chart.duration = 500;
@samselikoff
samselikoff / cloudSettings
Last active Apr 8, 2021
Visual Studio Code Settings Sync Gist
View cloudSettings
{"lastUpload":"2020-05-01T19:06:41.818Z","extensionVersion":"v3.4.3"}
@samselikoff
samselikoff / mirage.config.js
Last active Feb 16, 2021
Mirage dev boilerplate
View mirage.config.js
export default function() {
window.server = this;
this.get('users/:id');
};
View mirage-graphql-example.js
import { buildSchema, graphql } from "graphql";
// Construct a schema, using GraphQL schema language
let graphqlSchema = buildSchema(`
type Query {
recipes: [Recipe]
recipes_by_pk(id: Int!): Recipe
}
type Recipe {
id: ID!
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
});
@samselikoff
samselikoff / controllers.application.js
Last active Oct 15, 2020
Ember Animated boilerplate
View controllers.application.js
import Ember from 'ember';
import fade from 'ember-animated/transitions/fade';
export default Ember.Controller.extend({
fade
});