Justin myyellowshoe

Autoscaling SVG's

Scaling svgs is annoying and most solutions require tradoffs I don't want. I'm suprised the ammount of solutions out there that are pretty subpar or require extra overhead.

What I don't want:

use an image tag
use wrappers
use weird padding
pass down props for width/height or viewBox props.

React Cheat Sheet

A high level overview of react components for quick reference. The react docs are awesome, but wanted to make an even more distilled version. May leave some things out for simplicity. Assumes your using react 16.8+.

Component Types

React.Component() Class
- Use this in most cases.
- Deep compare of props/state
React.PureComponent() Class

Use the follwing steps to setup and use eslint and prettier in a create react app. I've seperated out the eslint and prettier setup so you can see whats needed for both.

1. Create app

npx create-react-app purdier

2. Install eslint deps

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks


	import * as functions from "firebase-functions";
	import { ShadowFile, ShdwDrive } from "@shadow-drive/sdk";
	import { Wallet } from "@project-serum/anchor";

	import { Metaplex } from "@metaplex-foundation/js";
	import jimp from "jimp";
	import { Connection, Keypair, PublicKey } from "@solana/web3.js";

	const secretKey = Uint8Array.from(process.env.SHADOW_KEY as Iterable<number>);

	/*
	Print editions are awesome but tricky, 2 big issues:
	1. Printing in quick succession.
	Multiple people click a button to print at the same time, same edition will try and get printed multiple times.
	2. Burned nfts mess up on chain supply reference.

	We can solve for number #2, and drastically reduce #1 window for any errors.

	This is largely a port of the code here:
	https://github.com/samuelvanderwaal/metaboss/blob/b662001ee929f5b34f3660c227136aab9697de27/src/mint.rs#L366

	app.get('/', (req, res) => {

	const client = new Client();
	client.connect()
	.then(() => {
	const sticky = await client.query("SELECT * FROM product_index WHERE product_sticky::boolean = 'true'")
	.then((results) => results.rows);
	const lowstock = await client.query("SELECT * FROM product_index WHERE product_sticky::boolean = 'true'");
	.then((results) => results.rows);
	return { sticky, lowstock };

	{
	"codes": [2000, 2314, 4539, 3947, 1001, 329984]
	}