Skip to content

Instantly share code, notes, and snippets.

Avatar
🍄

Joel Hooks joelhooks

🍄
View GitHub Profile
@joelhooks
joelhooks / pagespeed_optimize_images.sh
Created Feb 25, 2022 — forked from julianxhokaxhiu/pagespeed_optimize_images.sh
Recursively optimize all PNG and JPG files wherever they are from the script position and inner ( based on OPTING, PNGCRUSH, ADVANCECOMP and JPEGOPTIM )
View pagespeed_optimize_images.sh
#!/bin/bash
# https://gist.github.com/julianxhokaxhiu/c0a8e813eabf9d6d9873
# Improved as per feedback from @pascal - https://gist.github.com/julianxhokaxhiu/c0a8e813eabf9d6d9873#gistcomment-3086462
# brew install optipng pngcrush jpegoptim
find . -type f -iname "*.png" -exec optipng -nb -nc {} \;
find . -type f -iname "*.png" -exec pngcrush -rem gAMA -rem alla -rem cHRM -rem iCCP -rem sRGB -rem time -ow {} \;
find . -type f \( -iname "*.jpg" -o -iname "*.jpeg" \) -exec jpegoptim -f --strip-all {} \;
@notwaldorf
notwaldorf / README.md
Last active Mar 23, 2022
A very minimal p5.js polyfill for when you want to write basic p5.js code but not import the whole kitchen sink.
View README.md

Minimal p5 polyfill

This is a very minimal bit of polyfill code for when you want to use some basic p5.js code you wrote, but not pay the performance cost associated with importing the whole kitchen sink.

It basically implements some of the sintactic sugar I use the most from p5.js but using the Canvas api, so that I have the p5 api but without all the magic I'm probably not using in this particular sketch.

@souporserious
souporserious / [slug].ts
Created May 11, 2021
NextJS implementation for docs
View [slug].ts
export const getStaticPaths: GetStaticPaths = async () => {
const filePaths = await getComponentMDXPaths();
const paths = filePaths.map((filePath) => {
const extension = path.extname(filePath);
const name = path.basename(filePath, extension);
const slug = name.toLowerCase().replace(/\s/g, '-');
return { params: { slug } };
});
return {
paths,
@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")({
@jaredpalmer
jaredpalmer / MarkdownPage.tsx
Created Feb 17, 2021
Get headers from MDX in Next.js
View MarkdownPage.tsx
import {MDXProvider} from '@mdx-js/react';
import {MDXComponents} from 'components/MDX/MDXComponents';
import {Toc} from 'components/Toc/Toc';
import * as React from 'react';
export interface MarkdownProps<Frontmatter> {
meta: Frontmatter;
children?: React.ReactNode;
}
View NatualScrollingInWindows.ps1
# View registry settings
Get-ItemProperty HKLM:\SYSTEM\CurrentControlSet\Enum\HID\*\*\Device` Parameters FlipFlopWheel -EA 0
# Change registry settings
# Reverse mouse wheel scroll FlipFlopWheel = 1
# Normal mouse wheel scroll FlipFlopWheel = 0
Get-ItemProperty HKLM:\SYSTEM\CurrentControlSet\Enum\HID\*\*\Device` Parameters FlipFlopWheel -EA 0 | ForEach-Object { Set-ItemProperty $_.PSPath FlipFlopWheel 1 }
# Restore default scroll direction
# Get-ItemProperty HKLM:\SYSTEM\CurrentControlSet\Enum\HID\*\*\Device` Parameters FlipFlopWheel -EA 1 | ForEach-Object { Set-ItemProperty $_.PSPath FlipFlopWheel 0 }
@tannerlinsley
tannerlinsley / README.md
Last active May 13, 2022
Replacing Create React App with the Next.js CLI
View README.md

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why

@LindseyB
LindseyB / JackboxGames.md
Created Jun 25, 2020
Markdown Listing of Jackbox Games because I keep forgetting which packs they are in and how many players they allow
View JackboxGames.md
Game Party Pack Min Players Max Players
Dictionarium Jackbox Party Pack 6 3 8
Drawful 2 Drawful 2 3 8
Fibbage 2 Jackbox Party Pack 4 2 8
Guesspionage Jackbox Party Pack 3 2 8
Joke Boat Jackbox Party Pack 6 3 8
Mad Verse City Jackbox Party Pack 5 3 8
Patently Stupid Jackbox Party Pack 5 3 8
Quiplash 2 Jackbox Party Pack 3 3 8
@staltz
staltz / example.js
Created Mar 18, 2019
Build your own RxJS
View example.js
function createObservable(subscribe) {
return {
subscribe,
pipe: function(operator) {
return operator(this);
},
};
}
const numberObservable = createObservable(function(observer) {
View subdcircle.pde
// by Etienne JACOB
// motion blur template by beesandbombs
// needs opensimplexnoise code in another tab
// --> code here : https://gist.github.com/Bleuje/fce86ef35b66c4a2b6a469b27163591e
int[][] result;
float t, c;
float ease(float p) {