Skip to content

Instantly share code, notes, and snippets.

View valtism's full-sized avatar
🇦🇺

Dan Wood valtism

🇦🇺
View GitHub Profile
@valtism
valtism / PerformantSplitLinePath.tsx
Created April 8, 2024 03:48
A more performant version of Visx's `<SplitLinePath>`. See https://github.com/airbnb/visx/issues/1591
import { LinePath, line } from "@visx/shape";
import { SplitLinePathProps } from "@visx/shape/lib/shapes/SplitLinePath";
import { Fragment } from "react";
type PerformantSplitLinePathRenderer = (renderProps: {
index: number;
path: string;
styles?: Omit<React.SVGProps<SVGPathElement>, "x" | "y" | "children">;
}) => React.ReactNode;
@valtism
valtism / App.tsx
Created July 14, 2023 00:39
Uniq Benchmark
import { useState } from "react";
import { uniq } from "lodash";
import "./App.css";
function uniqSet(arr: unknown[]) {
return Array.from(new Set(arr));
}
function getRandomInt(min: number, max: number) {
min = Math.ceil(min);
import type { LinePathConfig } from "@visx/shape";
import { line } from "@visx/shape";
import clsx from "clsx";
import { getClosest } from "migrated/shared/helpers/getClosest";
import * as React from "react";
type PrySplitLinePathRenderer = (renderProps: {
index: number;
path: string;
styles: Omit<React.SVGProps<SVGPathElement>, "x" | "y" | "children">;
import React, { useMemo } from "react";
import { GetLineSegmentsConfig } from "../util/getSplitLineSegments";
import { line } from "../util/D3ShapeFactories";
import { LinePathConfig } from "../types";
export type SplitLinePathRenderer = (renderProps: {
index: number;
segment: { x: number; y: number }[];
styles?: Omit<React.SVGProps<SVGPathElement>, "x" | "y" | "children">;
}) => React.ReactNode;
import React, { createContext, forwardRef, useContext, useEffect, useMemo } from "react"
import { createPortal } from "react-dom"
import { mergeRefs } from "app/helpers/mergeRefs"
import {
Placement,
Strategy,
offset as offsetModifier,
shift as shiftModifier,
size as sizeModifier,
flip as flipModifier,
@valtism
valtism / recs.md
Last active December 11, 2022 05:56
JS Recommendations

Learning Javascript recommendations

The best way to learn is to pick a project and build it.

There are lots of technologies to use, so my recommendation to just start building would be to use ViteJS, with React, and ESLint and Prettier. I might also recommend throwing TailwindCSS in there if it's not too much of a learning curve.

Theo recommends something a bit different that could also work: https://init.tips and https://init.tips/other

Apart from coding, I'd also recommend browsing sites like hacker news, twitter, and reddit. That, along with listening to podcasts or watching videos is a great way to get a better understanding of the frontend world.

@valtism
valtism / Comparison.tsx
Last active May 3, 2022 01:57
Comparing EmotionCSS to TailwindCSS
// Emotion
const Label = styled.div<Pick<BreadcrumbProps, "isActive">>(
({ theme, isActive }) => [
{
...theme.typography.DetailLargeM,
...theme.typography.noWrap,
color: theme.colors.contentTertiary,
},
isActive && {
color: theme.colors.contentPrimary,
import {
Fragment,
ReactNode,
forwardRef,
createContext,
useContext,
useReducer,
useEffect,
Children,
} from "react"
@valtism
valtism / Example.jsx
Created March 3, 2022 09:04
React children example
// The bottom component we need to pass `value` to
function NestedComponent({ value }) {
return <div>The value is: {value}</div>;
}
// Example with prop drilling
function Example1() {
const [value, setValue] = useState("");
return <MiddleComponent1 value={value} />;
}
diff --git a/node_modules/@small-tech/vite-plugin-sri/index.js b/node_modules/@small-tech/vite-plugin-sri/index.js
index 841f438..e85b205 100644
--- a/node_modules/@small-tech/vite-plugin-sri/index.js
+++ b/node_modules/@small-tech/vite-plugin-sri/index.js
@@ -18,51 +18,56 @@
// License: ISC.
//
////////////////////////////////////////////////////////////////////////////////
+'use strict';