Skip to content

Instantly share code, notes, and snippets.

@Pagebakers
Pagebakers / create-page.tsx
Last active March 24, 2025 11:54
Next.js createPage helper with loader pattern
import { AnyZodObject, z } from 'zod'
import { Metadata, ResolvingMetadata } from 'next'
type InferParams<Params> = Params extends readonly string[]
? {
[K in Params[number]]: string
}
: Params extends AnyZodObject
? z.infer<Params>
: unknown
@hos
hos / InjectRuntimePublicEnv.ts
Last active October 8, 2024 08:56
Workaround to use runtime variables in the next.js app (App Router), so you can change them after build.
import Script from 'next/script'
// Add this file to some Server Component, in my case I use this in `app/layout.tsx`
// Next.js, will inline all the process.env.SOMETHING variables into the code at build time.
// Which will force us to build the app for each environment we want to deploy to, with the
// only different being few environment variables. Instead, what we want is to get the environment
// dynamically from the runtime, so if we change them in the env and run the app again, it must
// use the new environment variables. To do this, we will inject the environment variables into
// the window object, so we can access them in the runtime.
@khalidx
khalidx / node-typescript-esm.md
Last active July 9, 2025 15:12
A Node + TypeScript + ts-node + ESM experience that works.

The experience of using Node.JS with TypeScript, ts-node, and ESM is horrible.

There are countless guides of how to integrate them, but none of them seem to work.

Here's what worked for me.

Just add the following files and run npm run dev. You'll be good to go!

package.json

@dangovorenefekt
dangovorenefekt / blockmetatwitter.md
Last active January 14, 2025 22:25
Block Meta and Twitter (nginx)
@JacobWeisenburger
JacobWeisenburger / zustandCustomPersistStorageTemplate.ts
Created March 31, 2023 16:16
Zustand custom persist storage template
import { createStore } from 'zustand'
import { persist, StorageValue } from 'zustand/middleware'
const store = createStore(
persist(
() => ( {} ),
{
name: 'store-state',
storage: {
async getItem ( name: string ): StorageValue<unknown> {
@jordan-cutler
jordan-cutler / _summary.md
Last active August 19, 2024 18:55
VSCode Settings - Frontend Dev at Gusto by Jordan Cutler

Summary

Highlights from this set of configurations

  • Auto save
  • Auto format on save and fix all quick fix issues
  • Auto import on save
  • Format on save and paste
  • Prepopulate command palette and file search with the last searched thing
  • Limit the number of active tabs and allow them to wrap on smaller screens
  • Auto import on paste (via an extension that works part of the time)
@rain-1
rain-1 / docker node tip.txt
Last active December 24, 2021 07:04
Easily build NodeJS projects inside a docker container
Here's a quick dockerfile:
----------------8<-------------[ cut here ]------------------
FROM debian:latest
RUN apt-get update && apt-get install -y nodejs npm
----------------8<-------------[ cut here ]------------------
save that as Dockerfile and do: docker build -t node-builder .
@ld100
ld100 / kali-wsl2.md
Last active April 2, 2024 19:11
Settingh up development environment on Kali Linux (with WSL2 extras)

Installing Kali Linux for WSL2 and setting up a development environment

Preconditions

Follow official Microsoft guide called Windows Subsystem for Linux Installation Guide for Windows 10 to install WSL2.

Setting up the user

In case you are using Linux outside WSL, you'll need to create a user for yourself. Assuming you have sudo permissions already, adding user is:

@pcreux
pcreux / README.md
Last active October 10, 2020 18:44
Failsafe: degrade user experience and notify when something goes wrong.

Failsafe

When something goes wrong I want to degrade the user experience (instead of returning a 500 - Server Error) And I want to be notified about the failure

Usage

Wrap non mission critical code:

@scottmessinger
scottmessinger / route-application.js
Created June 12, 2020 14:18
Application route for delaying loading until components have finished.
export default class ApplicationRoute extends Route {
model(params, transition) {
if (this.fastboot && this.fastboot.isFastBoot) {
let promise = new Promise((resolve, reject) => {
let poll = () => {
later(() => {
if (this.finder.inFlightRequests.length === 0 && this.query.inFlightQueriesCount === 0) {
scheduleOnce("afterRender", this, resolve)