Skip to content

Instantly share code, notes, and snippets.

View khalidx's full-sized avatar
💭
Engineering for the ☁️

Khalid Zoabi khalidx

💭
Engineering for the ☁️
View GitHub Profile
@khalidx
khalidx / notion-sprints.md
Last active August 28, 2023 11:52
A Notion formula for calculating sprints.

Given a date field and a sprint size (10 days), this formula calculates the number of sprints remaining (integer) until the end of the year.

This formula can be used in a Notion formula field.

floor(max((dateBetween(dateAdd(dateAdd(start(prop("Date")), 11 - month(start(prop("Date"))), "months"), 31 - date(start(prop("Date"))), "days"), start(prop("Date")), "days") - dateBetween(end(prop("Date")), start(prop("Date")), "days")), 0) / 10)

Here's an explanation of what is going on:

@khalidx
khalidx / esbuild.md
Created June 5, 2023 22:21
Build a TypeScript project with esbuild.
esbuild src/cli.ts --bundle --platform=node --target=node18 --outfile=dist/bundle.js
@khalidx
khalidx / swc.md
Last active June 2, 2023 02:36
Programmatically compile with @swc/core.

Utility function

import { transform, Options } from '@swc/core'

export async function compile (params: { source: string, options?: Options }) {
  const { code, map } = await transform(params.source, params.options)
  return { code, map }
}
@khalidx
khalidx / ls.ts
Last active November 22, 2023 19:55
List or list and import all files in a directory without any node libraries.
import { join, basename, extname } from 'path'
import { readdir } from 'fs-extra'
/**
* Lists all files in the specified `directory`, without any external libraries.
*
* If `directory` is not specified, `process.cwd()` is used.
*
* Set `includeDirectories` to `true` to also include directory names in the output.
*
@khalidx
khalidx / typescript-monorepo.md
Last active December 2, 2023 04:45
A simple setup for a TypeScript monorepo.

There are countless guides online for setting up a TypeScript monorepo.

Most rely on external tools like Lerna, Yarn, Turborepo, Yalc, or something else.

Here's a simple, zero-opinion way to get a TypeScript monorepo going.

First, make a structure like this:

root/
@khalidx
khalidx / vscode-devcontainers.md
Created December 2, 2022 09:45
A VSCode DevContainers configuration for dockerized development.

VSCode DevContainers are way better than installing tools locally and coding on your machine; it prevents tool clutter, and ensures your project is portable across your team.

For Node.js / JavaScript / TypeScript development, just create a .devcontainer/devcontainer.json file at the top-level in your workspace with the following contents:

{
  "name": "Node.js & TypeScript",
 "image": "mcr.microsoft.com/devcontainers/typescript-node:18-bullseye"
@khalidx
khalidx / vscode-debug-typescript.md
Last active December 2, 2023 04:47
A VSCode launch config for debugging a TypeScript project.

This is a simple VSCode launch configuration for debugging TypeScript code that will work with most TypeScript projects.

It allows you to easily debug your project using the awesome debugging experience in VSCode.

It works perfectly for library and CLI projects that are written in TypeScript and are targeting CommonJS.

Usage

  1. Create a .vscode/ folder in your workspace at the top-level, if you don't have that folder already.
@khalidx
khalidx / restart-mac-audio.md
Created October 7, 2022 14:00
Restart the audio process, for MacBook.

There's a bug on the MacBook Air (M1, 2020) where the audio process crashes or something, and no videos or audio will play.

Here's how to restart the audio process when that happens:

sudo pkill coreaudiod

# or, if the audio process is not responding at all
sudo pkill -9 coreaudiod
@khalidx
khalidx / hash-ring.md
Last active August 3, 2022 00:14
An implementation of a "hash ring" for partitioning with consistent hashes.

Usage

const hashRing = createHashRing({
  clients: [
    { address: 'localhost:5001' },
    { address: 'localhost:5002' },
    { address: 'localhost:5003' }
  ]
})
@khalidx
khalidx / required-form-input.md
Last active April 23, 2023 09:28
A simple way to visually indicate that a form input is required using plain HTML and CSS.

Following this guide will get you the red asterisks* beside form inputs, that you are used to seeing on forms across the internet.

Include the following CSS:

<style>
  label.required:after {
    content: " *";
 color: red;