Skip to content

Instantly share code, notes, and snippets.

Avatar
🤖

Seth Davis sethdavis512

🤖
View GitHub Profile
@cjavilla-stripe
cjavilla-stripe / value-based-saas-pricing-seed.json
Last active January 28, 2023 14:46
Stripe CLI fixture for creating value based pricing Stripe test data
View value-based-saas-pricing-seed.json
{
"_meta": {
"template_version": 0
},
"fixtures": [
{
"name": "startup_product",
"path": "/v1/products",
"method": "post",
"params": {
@BjornDCode
BjornDCode / gist:5cb836a6b23638d6d02f5cb6ed59a04a
Created February 3, 2020 11:58
Tailwind - Fixed sidebar, scrollable content
View gist:5cb836a6b23638d6d02f5cb6ed59a04a
// Source: https://twitter.com/calebporzio/status/1151876736931549185
<div class="flex">
<aside class="h-screen sticky top-0">
// Fixed Sidebar
</aside>
<main>
// Content
</main>
View foo.js
function RadioGroup({ onChange, name, children }) {
const [state, inputProps] = useRadioGroup(name)
return (
<Context.Provider value={inputProps}>
{children}
</Context.Provider>
)
}
function RadioInput(props) {
View use-key-press-example.jsx
import { useState, useEffect } from 'react';
// Usage
function App() {
// Call our hook for each key that we'd like to monitor
const happyPress = useKeyPress('h');
const sadPress = useKeyPress('s');
const robotPress = useKeyPress('r');
const foxPress = useKeyPress('f');
@myrfy001
myrfy001 / Highlight DOM elements (include sub DOM) when mouse hover over it in Chrome or Firefox using devTools.md
Created May 14, 2018 02:59
Highlight DOM elements (include sub DOM) when mouse hover over it in Chrome or Firefox using DevTools
View Highlight DOM elements (include sub DOM) when mouse hover over it in Chrome or Firefox using devTools.md

Paste the following code into the console panel of the DevTools window of Chrome or Firefox.

The style sheet came from (Web Scraper)[http://webscraper.io/] plugin for Chrome

It is useful for analyse a page layout and you can extend it to select preferred dom elements.

function addStyleString(str) {
    var node = document.createElement('style');
@mritzco
mritzco / plopfile.js
Created March 8, 2018 08:09
Custom action for plop. Appends data to JSON files
View plopfile.js
const fs = require('fs-extra');
const methods = {}, priv = {};
// Private methods to do string replacement. Not optimized and cummulative trying to keep it simple.
// far better options here: https://stackoverflow.com/questions/5069464/replace-multiple-strings-at-once
priv.replaceObj = function(value, vars) {
let obj = value;
Object.keys(obj).forEach(function(item) {
obj[item] = priv.replaceStr(obj[item], vars);
});
return obj;
@fokusferit
fokusferit / enzyme_render_diffs.md
Last active December 8, 2022 14:51
Difference between Shallow, Mount and render of Enzyme
View enzyme_render_diffs.md

Shallow

Real unit test (isolation, no children render)

Simple shallow

Calls:

  • constructor
  • render
View foo.js
// prop callback
class Compoennt {
render() {
return (
<div>
<Thing onChange={(val) => {
this.setState({ val1: val })
}}/>
<Thing onChange={(val) => {
this.setState({ val2: val })
@wesbos
wesbos / async-await.js
Created February 22, 2017 14:02
Simple Async/Await Example
View async-await.js
// 🔥 Node 7.6 has async/await! Here is a quick run down on how async/await works
const axios = require('axios'); // promised based requests - like fetch()
function getCoffee() {
return new Promise(resolve => {
setTimeout(() => resolve('☕'), 2000); // it takes 2 seconds to make coffee
});
}
@bcherny
bcherny / react-rollup-typescript.md
Last active February 6, 2023 06:35
react + rollup + typescript boilerplate
View react-rollup-typescript.md

terminal:

npm i --save-dev rollup rollup-watch rollup-plugin-typescript typescript typings
npm i -S react react-dom
./node_modules/.bin/typings install react react-dom --save
mkdir src dist
touch src/index.tsx