whoisryosuke

import * as THREE from 'three'
import { useFrame, extend } from '@react-three/fiber'
import { useRef, useState } from 'react'
import useStore from '@/helpers/store'
import { shaderMaterial } from '@react-three/drei'
import { Mesh } from "three"

import vertex from './glsl/shader.vert'
import fragment from './glsl/shader.frag'

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

zaripych

import {
	Project,
	Type,
	Symbol,
	SymbolFlags,
	Signature,
	Node,
	TypeFormatFlags,
} from 'ts-morph';

giuseppeg

• Common setup for engineers with
  • laptop with encrypted hard drive
  • automatic updates (possibly forced, disabling delay)
  • password manager
  • 2FA everywhere
  • dedicated browser for development without extensions except for the ones approved by devsec ops
  • VPN to access internal properties
  • work (dedicate) GitHub account
  • rotate passwords and tokens / keys
• remote dev machines on premise that can be kept secure and up to date by IT - might reduce chances to compromise engineer machine (accessible only via vpn)

tomaszgil

import React, { useRef, useState, useLayoutEffect, useCallback } from "react";

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS

steveruizok

// Run this code on tldraw.com
// By @steveruizok
// Based on an awesome image by @cacheflowe: https://twitter.com/cacheflowe/status/1408902719130288130

new NumberControl({
  label: 'radius',
  value: 200,
  min: 50,
  max: 500,
})

notwaldorf

Minimal p5 polyfill

This is a very minimal bit of polyfill code for when you want to use some basic p5.js code you wrote, but not pay the performance cost associated with importing the whole kitchen sink.

It basically implements some of the sintactic sugar I use the most from p5.js but using the Canvas api, so that I have the p5 api but without all the magic I'm probably not using in this particular sketch.

sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

crabmusket

Headless THREE

Created with

• Node 14.15
• THREE.js r124
• headless-gl 4.9.0

Make sure you install headless-gl's dependencies, then run with XVFB like so:

tannerlinsley

export default function createCrudHooks({
  baseKey,
  indexFn,
  singleFn,
  createFn,
  updateFn,
  deleteFn,
}) {
  const useIndex = (config) => useQuery([baseKey], indexFn, config)
  const useSingle = (id, config) =>