Skip to content

Instantly share code, notes, and snippets.

View jahredhope's full-sized avatar

Jahred Hope jahredhope

32 followers · 4 following
View GitHub Profile
@jahredhope
jahredhope / cartesian-product.ts
Last active October 2, 2022 09:34
Create the caresian product of TypeScript arrays
function product<K extends string, T>(arrays: Record<K, T[]>): Record<K, T>[] {
return Object.entries(arrays).reduce(
// @ts-expect-error Object.entries is resolving K to string
(acc, [field, arr]: [K, T[]]): Record<K, T>[] =>
arr.flatMap((value) =>
acc.map((existing) => ({ ...existing, [field]: value })),
),
[{}] as Record<K, T>[],
) as Record<K, T>[];
}
@jahredhope
jahredhope / multi-line-wave-animation.html
Last active July 17, 2021 07:00
Multi-line sine wave animation (no JS)
<html>
<head>
<style>
body {
background-color: hsl(220deg, 13%, 19%);
color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
display: flex;
@jahredhope
jahredhope / conditional-types.ts
Last active August 12, 2020 00:00
Example: Conditionally require minimum data for calls based on first parameter
/**
* Conditionally require additional data for function calls based on first parameter
* Allows a union of possible interfaces that describe a minimum amount of data required
* Values not named may still be used and have no minimum amount of data
*
* Extending on the work by David Sheldrick in https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/
*/
interface BaseShape {
name: string;
@jahredhope
jahredhope / duodecimal.md
Last active July 17, 2020 01:13
Duodecimal is better than Decimal

Duodecimal (base 12) is better than Decimal (base 10)

Even though as a society the shift is likely too expensive and hard to make happen, that doesn't make it less true.

Multiplication becomes easier

10 is divisible by 2 and 5

Remember how easy it was to learn your 2 and 5 times tables? Just a nice repeating pattern.

@jahredhope
jahredhope / typescript-example-generic-items-render.ts
Last active November 14, 2019 11:05
Typescript Example - Generic items & render
/**
* A TypeScript example of a generic type used
* by a function where the type passed
* into the function allows TypeScript to infer the
* type of another value passed in.
*/
interface Params<I> {
items: I[];
render: (item: I) => void;
@jahredhope
jahredhope / example.ts
Last active August 7, 2019 13:44
Example Redux Reducer file with TypeScript types
/**
* An example redux reducer file
* To be imported into a centralized file, typically using combineReducers.
*
* This pattern focuses on type safety with minimal re-declaring of types.
*
* Format of a file:
* - Actions Types
* - Actions
* - State
@jahredhope
jahredhope / index.js
Last active December 27, 2018 12:20
Webpack v5 toJson namedChunkGroups
/**
* Demonstrates the different between Webpack v4 and Webpack v5 toJson behaviour
**/
const webpack = require("webpack");
const compiler = webpack({});
compiler.run((err, res) => {
if (err) {
@jahredhope
jahredhope / React-Pattern-AsyncLoadComponent.js
Last active March 14, 2018 00:12
class A extends Component {
constructor(props) {
super(props);
this.state = {
B: undefined
};
import('./B').then(bModule => {
this.setState({ B: bModule.default });
});
}
@jahredhope
jahredhope / index.html
Created February 7, 2018 12:34
Gamepad API muckaround
<style>
body {
padding: 0;
margin: 0;
background-color: hsl(0, 0%, 5%);
color: hsl(0, 0%, 95%);
}
</style>
<h1>Game on</h1>
<div id="players"></div>
@jahredhope
jahredhope / Get Eslint Count by Error
Created September 18, 2017 11:00
Takes an eslint json file and pulls out the count of each error
// eslint -f json . > output.json
const data = require('./output.json');
const result = {};
const files = new Set();
data
.filter(({ warningCount, errorCount }) => warningCount > 0 || errorCount > 0)
.forEach(fileProps => {
const { messages, filePath } = fileProps;