badsyntax

/**
 * Example usage:
 *
 * // default depth of 3: (fastest)
 * type keys = Paths<SomeNestedObject> // returns "property" | "nested.property" | "nested.nested.property"
 *
 * // depth of 10: (can be slow)
 * type keys = Paths<SomeNestedObject, 10>
 *
 * // depth of 10 with keys of type string and number: (slowest)

diegohaz

type AnyFunction = (...args: any[]) => any

function useEvent<T extends AnyFunction>(callback?: T) {
  const ref = useRef<AnyFunction | undefined>(() => {
    throw new Error("Cannot call an event handler while rendering.")
  })
  // Or useInsertionEffect if it's React 18
  useLayoutEffect(() => {
    ref.current = callback
  })

reidev275

//
//  Prelude

//  A zero dependency, one file drop in for faster Typescript development with fewer bugs
//  through type safe, functional programming. Comments are inline with links to blog posts motiviating the use.

// alias for a function with airity 1
export type Fn<A, B> = (a: A) => B;

// alias for a function with airity 2

hihayk

:root {
  --lineHeightFixedAmount: 0.25rem;
  --lineHeightRelativeAmount: 1em;
  --sizesIncrement: 1.4;

  --fontSize-0: 1rem; 
  --fontSize-1: calc(var(--fontSize-0) * var(--sizesIncrement)); 
  --fontSize-2: calc(var(--fontSize-1) * var(--sizesIncrement));

  --globalLineHeight: calc(var(--lineHeightFixedAmount) + var(--lineHeightRelativeAmount));

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

kripod

import React from 'react';

// Source: https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/helper.d.ts
type PropsOf<
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  E extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
> = JSX.LibraryManagedAttributes<E, React.ComponentPropsWithRef<E>>;

export interface BoxOwnProps<E extends React.ElementType = React.ElementType> {
  as?: E;

kmelve

.root {
  display: block;
  position: relative;
}

.lqip {
  image-rendering: pixelated;
  width: 100%;
  opacity: 1;
  transition: opacity 50ms 100ms ease-out;

una

CSS Color Functions

Web developers and design systems developers often use functions to design components. With the increasing usage of design systems that support multiple platforms, and increased capability of Dark Mode in UI, this becomes even more useful to not need to manually set color, and to instead have a single source from which layouts are calculated. Currently Sass, calc() on HSL values, or PostCSS is used to do this.

Examples:

• Components with color variations based on calculations from a parent. (i.e. Button with outline that uses the primary button color to adjust the size)
• Theming - Palletes based on a color or set of colors for themes. Especially when a single base system is used with multiple themes
• Uniformity among transformations between components with different primary colors

Proposal

developit

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

msankhala

// Managing States in JavaScript via Prototypal Inheritance
// https://pusher.com/sessions/meetup/viennajs/managing-states-in-javascript-via-prototypal-inheritance

function State(newState) {
  Object.assign(this, newState);
}
// If you want to make every state to immutable.
// Be careful with this because if state object has property
// which itself is an object then you have to call it recursively.
// function State(newState) {