trusktr

Here's a conversation I had with https://claude.ai on "Web Components" vs "Custom Elements" for Web Components a.k.a. Custom Elements (or Custom Elements a.k.a. Web Components). I thought it was interesting that Claude agreed on simplifying the naming:

-= Me =-

What’s the difference between Custom Elements and Web Components?

-= Claude.ai =-

Custom Elements and Web Components are related web technologies, but they're not exactly the same thing. Let me break down the key differences:

trusktr

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

// 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

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

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!

trusktr

Assets in comments.

trusktr

    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)

trusktr

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

// 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

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')