Skip to content

Instantly share code, notes, and snippets.

View anuraghazra's full-sized avatar
:electron:
Learning

Anurag Hazra anuraghazra

:electron:
Learning
View GitHub Profile

Variables

const shade = 100;
type Shade = 100;

Functions

@anuraghazra
anuraghazra / readme.md
Last active March 21, 2023 21:06
TypeScript TokenizeTheme type performance

In these two files if you change getToken{slow,fast}'s passed value (just add a random letter anywhere) you'll see that the fast version is getting type checked about 3x to 5x faster than the slow one.

I'm not sure why using key remapping and using keyof {} is about 3x to 5x faster when doing type checking.

My guess is that in the slow version is using index access with the {}[keyof Theme] which is generally slower?

{
"button": {
"base": "",
"variant": {
"ghost": "lib:text-red-800",
"secondary": "lib:bg-gray-100 lib:text-gray-800",
"outline": "lib:border lib:border-gray-300 lib:text-gray-800",
"primary": "lib:bg-red-800 lib:text-red-200"
},
"size": {
// TypeSafe classnames package
type IsNever<T> = [T] extends [never] ? true : false;
type TruthyKind = Record<string, boolean>;
type StringOrTruthy = string | TruthyKind | unknown;
/**
* Filter tuple by type (ignore never type)
*
* - Filter<["bg", never], string> -> ["bg"]
*/

Network Requests

There are a few ways to get info from an API


What is await?

'''ts const response = await fetch("mysite.com/api/dogs")

{
"Experiments": [
["https://github.com/anuraghazra/AnuReact", "AnuReact (minimal react clone)"],
["https://codesandbox.io/s/css-in-graphql-5h2xw", "CSS-in-GraphQL"],
["https://github.com/anuraghazra/react-folder-tree", "React Folder Tree Component"],
["https://codesandbox.io/s/react-custom-canvas-renderer-kmxw9", "React Custom Canvas Renderer"],
["https://codesandbox.io/s/fade-component-5mpbj", "Minimal react fade component"],
["https://codesandbox.io/s/verlyjs-react-w5kfr", "Verly.js React Integration"],
["https://codesandbox.io/s/react-pubsub-gdf7l", "React PubSub"],
["https://codesandbox.io/s/react-notification-component-customevents-rcd3o", "React toast component experiment"],
@anuraghazra
anuraghazra / minimal-templating-engine.ts
Last active August 2, 2024 09:48
Minimal Templating Engine In Javascript
// magic!
function dom<Props extends Record<string, unknown>>(
str: TemplateStringsArray,
...args: string[] | ((props: Props) => string)[]
) {
const interleaved = args.flatMap((arg, index) => {
return [arg, str[index + 1]];
});
return (props?: Props) =>
@anuraghazra
anuraghazra / index.html
Created November 5, 2019 07:18
Testing Gist API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gist</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>