Skip to content

Instantly share code, notes, and snippets.

View fi3ework's full-sized avatar

Wei fi3ework

View GitHub Profile
@swyxio
swyxio / Gatsby-bootstrap-lifecycle.md
Last active April 1, 2022 11:19
Gatsby bootstrap lifecycle

Sequence of Gatsby's bootstrap lifecycle with links to source code as of v2.0.0

  1. open and validate gatsby-config (get-config-file.js) 1.5 load themes (swyx added this note July 2019)
  2. load plugins (load-plugins/index.js) from the list given in gatsby-config.js
  3. onPreBootstrap: runs onPreBootstrap if it is implemented in any plugins, for example gatsby-plugin-typography. Receives handy [apiCallArgs](https://github.com/gatsbyjs/gatsby/blob/ffd8b2d691c9
@somebody32
somebody32 / README.md
Last active April 25, 2022 18:24
Tailwind purging + external components library

Prerequisites

  1. The app that uses tailwind + external component library (CL) (but not 3rdparty, your company internal one, for example)
  2. The component library also uses tailwind

The goal

To be able to purge safely unused tailwind classes from the build (https://tailwindcss.com/docs/controlling-file-size)

Solution

The idea here is simple: we're going to purge css on the app side + whitelist classes that component library is using.

@cekstam
cekstam / gist:a7758b8f315835d479f379715eebd0c3
Last active October 4, 2024 16:46
create valid JSON from git log using python and ast.literal_string
git log -n 10\
--pretty=format:'{"commit": "%H", "author": "%aN <%aE>", "date": "%ai", "message": """%B""", "notes": """%N""" },' \
$@ | awk 'BEGIN { print("[") } { print($0) } END { print("]") }' | python -u -c \
'import ast,json,sys; print(json.dumps(ast.literal_eval(sys.stdin.read())))'
@jeremyben
jeremyben / ts-build-api.ts
Last active May 20, 2024 10:36
Typescript programmatic build with tsconfig.json (run with `ts-node -T`)
import * as path from 'path'
import ts from 'typescript'
function build(
override: {
compilerOptions?: ts.CompilerOptions
include?: string[]
exclude?: string[]
files?: string[]
extends?: string
@sandren
sandren / tailwind.md
Last active February 28, 2025 13:05
Tailwind CSS best practices

Tailwind CSS best practices

Utility classes

  1. When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!

  2. Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.

  3. Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

@aleclarson
aleclarson / rollup-typescript.md
Last active February 28, 2025 16:13
The best Rollup config for TypeScript libraries

It's 2024. You should use tsup instead of this.


Features

🔥 Blazing fast builds
😇 CommonJS bundle
🌲 .mjs bundle
.d.ts bundle + type-checking

@sindresorhus
sindresorhus / esm-package.md
Last active May 4, 2025 07:03
Pure ESM package

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.
@okikio
okikio / resolve-imports.js
Last active April 15, 2022 16:43
A fork of resolve.exports but for the imports field of package.json
/** resolve.exports but for imports */
/**
* @param {object} imports
* @param {Set<string>} keys
*/
function loop(imports, keys) {
if (typeof imports === 'string') {
return imports;
}
@ngxson
ngxson / FAQ.md
Last active April 28, 2025 17:01
convert ARM NEON to WASM SIMD prompt

Why did you do this?

Relax, I only have one Sunday to work on idea, literally my weekend project. So I tried Deepseek to see if it can help. Surprisingly, it works and it saves me another weekend...

What is your setup?

Just chat.deepseek.com (cost = free) with prompts adapted from this gist.

Does it work in one-shot or I have to prompt it multiple times?