A interactive & generative site with canvas-sketch and Tone.js.
Live Demo:
// funciona somente com v3.1.6, essa estrategia de end/continue | |
// era um backdoor para fazer recursao em types, recursao funcionava somente com interfaces | |
// antigamente pela resolucao de tipos ser lazyness e nao acabar fazendo o compiler cair | |
// potencialmente em um looping infinito na resolucao do tipo, por causa disto tem validacao | |
// no compiler agora e codigos nesse estilo sao barrados pelo compiler | |
type Init<T extends any[], TTail extends any[] = TailArray<T>> = CastArray<{ | |
[K in keyof TTail]: T[keyof T & K]; | |
}> |
// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf | |
// Remove any duplicates from an array of primitives. | |
const unique = [...new Set(arr)] | |
// Sleep in async functions. Use: await sleep(2000). | |
const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms))); | |
// or | |
const sleep = util.promisify(setTimeout); |
A interactive & generative site with canvas-sketch and Tone.js.
Live Demo:
useSubscription
and useMutableSource
1 tearing and deopt behavior.
The tree below represents a React application mounting. During mount, two components read from an external, mutable source. The first one (List
) reads version 1 of that data and the second one (Item
) reads version 2.
N/A.
Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.
Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.
// when T is any|unknown, Y is returned, otherwise N | |
type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N; | |
// when T is never, Y is returned, otherwise N | |
type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N; | |
// when T is a tuple, Y is returned, otherwise N | |
// valid tuples = [string], [string, boolean], | |
// invalid tuples = [], string[], (string | number)[] |
I was poking around trying to figure out all the packages I have access to publish and got curious. So I write this little script to determine the download stats for all the packages I have publish access to.
Feel free to try it yourself. Just change the username passed to getUserDownloadStats
.
By default, the stats are sorted by their average daily downloads (descending). That should give you an idea of the most "popular" package of a given user relative to how long that package has been around.
You can use it with npx
like so:
import { BroadcastChannel, createLeaderElection } from 'broadcast-channel' | |
import React from 'react' | |
const channels = {} | |
export function useBroadcastLeader(id = 'default') { | |
const [isBroadcastLeader, setIsBroadcastLeader] = React.useState(false) | |
React.useEffect(() => { | |
if (!channels[id]) { |
/** | |
* A function that will return whether the given user is sponsoring you. | |
* Requires a personal access token from GitHub. | |
* See https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token | |
* | |
* @param userA The sponsoring user. | |
*/ | |
async function isUserSponsoringMe(username: string) { | |
const res = await fetch('https://api.github.com/graphql', { | |
method: 'POST', |
// keybindings.json | |
// Command Pallette > Open Keyboard Shortcuts (JSON) | |
[ | |
{ | |
"key": "cmd+shift+l", | |
"command": "editor.action.insertSnippet", | |
"when": "editorTextFocus", | |
"args": { | |
"snippet": "console.log(${TM_SELECTED_TEXT}$1)$0;" |