Skip to content

Instantly share code, notes, and snippets.

View trusktr's full-sized avatar
📜
writing code

Joe Pea trusktr

📜
writing code
View GitHub Profile
@trusktr
trusktr / childElements.ts
Created September 7, 2024 04:12
DOM signals
import {createMemo} from 'solid-js'
import {elementMutations} from './elementMutations.js'
import {createArrayMemo} from './createArrayMemo.js'
export function childElements(element: Element | (() => Element | undefined | null)) {
const records = elementMutations(element, {childList: true})
const elMemo = createMemo(() => (typeof element === 'function' ? element() : element))
const elements = createArrayMemo(() => {
const el = elMemo()
@trusktr
trusktr / samples.js
Last active September 7, 2024 04:59
signals and effects for animation
// this example is app-specific, in an app I'm making, so it expects certain types of elements
function fadeCardsOut(cards: FlexItem[]) {
const staggerTime = 500
const stagger = staggerTime / cards.length
const dones: (() => boolean)[] = []
for (const [i, card] of cards.entries()) {
const el = card.children[0] as TiltCard
if (el.tagName !== 'LUME-TILT-CARD') continue
const rect = el.shadowRoot?.querySelector('lume-rounded-rectangle') as RoundedRectangle
@trusktr
trusktr / model.tsx
Last active February 2, 2024 17:46
Solid.js directives
import {createEffect, untrack} from 'solid-js';
type GetterSetter = [() => string, (v: string) => void];
type ObjectAndKey = [Record<string, unknown>, string]; // TODO better type
/**
* Use this to make a two-way binding from an input to a signal or a reactive
* object such as a store or mutable. F.e.
*
* ```js
@trusktr
trusktr / nike-on-tap-ads.md
Last active January 20, 2022 08:55
Nike SB's On Tap ad campaign with transparent plexiglass ramps and flourescent lighting.

Back in 2004 Nike SB produced an ad campaign using clear transparent skate ramps and obstacles illuminated with florescent lights in dark settings. The skaters did tricks over these obstacles while not having the best visibility of the obstacles they were skating. The difficulty of skating these obstacles added to the already awesome visual effect to create a unique and artful series of skate photos like no other. Enjoy!

272232960_1056320618556323_2896897531427220381_n

272074343_296045375908147_8032150437580007298_n

272112947_4773275592740446_3433927735527001096_n

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
type ImplementationKeys = 'static' | 'private' | 'protected'
type FunctionToConstructor<T, TReturn> = T extends (...a: infer A) => void ? new (...a: A) => TReturn : never
// Note, void also works the same in place of unknown
type ReplaceCtorReturn<T, TReturn> = T extends new (...a: infer A) => unknown ? new (...a: A) => TReturn : never
type ConstructorOrDefault<T> = T extends {constructor: infer TCtor} ? TCtor : (() => void)
import * as THREE from 'three'
export function isRenderItem(obj: THREE.Object3D): obj is THREE.RenderItem & THREE.Object3D {
return 'geometry' in obj && 'material' in obj
}
export function disposeMaterial(obj: THREE.Object3D): void {
if (!isRenderItem(obj)) return
// because obj.material can be a material or an array of materials
@trusktr
trusktr / obliterate.js
Created February 20, 2019 00:15
Obliterate an object
// recursively deletes all properties within an `object` or `function`
// TODO option to also handle non-enumerable but configurable descriptors
function obliterate(obj: object) {
const visited = new WeakSet
_obliterate(obj)
async function _obliterate(obj) {
if (!obj || !(typeof obj === 'object' || typeof obj === 'function')) return
@trusktr
trusktr / example.js
Last active November 18, 2018 09:29
Access Modifiers 1
class Foo {
foo = 1
protected bar = 2
private baz = 3
public test() {
// call all three of the log methods, one from each access space.
console.log('---- public log 2')
this.log()
console.log('---- protected log 2')
@trusktr
trusktr / next.config.js
Created September 20, 2018 23:56
withTranspileModules example
const path = require("path");
const withTypescript = require("@zeit/next-typescript");
const withCSS = require("@zeit/next-css");
const withSourceMaps = require("@zeit/next-source-maps");
const r = require("regexr");
const cssConfig = {
cssModules: false
};
@trusktr
trusktr / es5-extend-array.js
Last active September 3, 2018 18:50
Extending Array with ES5-style class constructors
// With some ES2015+ language features:**
{
function MyArray(...args) {
const self = new Array(...args)
self.__proto__ = MyArray.__proto__
return self
}
MyArray.prototype = {
__proto__: Array.prototype,