Skip to content

Instantly share code, notes, and snippets.

@sindresorhus
sindresorhus / esm-package.md
Last active December 5, 2025 20:00
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.
@davidgilbertson
davidgilbertson / http2.js
Last active February 22, 2025 22:22
HTTP2 server with compression and caching
const http2 = require('http2');
const fs = require('fs');
const path = require('path');
const zlib = require('zlib');
const brotli = require('brotli'); // npm package
const PORT = 3032;
const BROTLI_QUALITY = 11; // slow, but we're caching so who cares
const STATIC_DIRECTORY = path.resolve(__dirname, '../dist/');
const cache = {};
@DaveHudson
DaveHudson / apple-touch-startup-image.html
Last active January 19, 2021 08:50
PWA apple-touch-startup-image iOS
<link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<lin
export enum constants {
SET = 'feature/SET',
}
export type actions = {
set: {
type: constants.SET;
};
}
@DaveHudson
DaveHudson / pwa-splash-screen-images.html
Created February 14, 2018 16:33
PWA iOS Splash Screen Images
// 1. Media Queries based on data from https://css-tricks.com/snippets/css/media-queries-for-standard-devices
// 2. Images must be exact sizes e.g 640x1136
// 3. All images are portrait
<link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-
@ebidel
ebidel / sw_caching_size.js
Last active November 16, 2022 11:31
Print service worker cache sizes and overall bytes cached.
/**
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
*/
// Prints the bytes cached by service worker. Breaks out each cache
// overall in-memory bytes used by the Cache Storage API for the site.
async function getCacheStoragesAssetTotalSize() {
// Note: opaque (i.e. cross-domain, without CORS) responses in the cache will return a size of 0.
@tomasevich
tomasevich / nginx_nodejs.md
Last active May 28, 2025 08:20
Сервер в связке Nginx + NodeJs

Сервер в связке Nginx + NodeJs

Данная пошаговая инструкция поможет освоить основы на простом примере

Для справки

Сервер поднимался на Debian 8 c характеристиками:

CPU - 1 ядро x 500 МГц

@zcaceres
zcaceres / Nested-Routers-Express.md
Last active August 14, 2025 13:53
Child Routers in Express

Nested Routers in Express.js

Express makes it easy to nest routes in your routers. But I always had trouble accessing the request object's .params when you had a long URI with multiple parameters and nested routes.

Let's say you're building routes for a website www.music.com. Music is organized into albums with multiple tracks. Users can click to see a track list. Then they can select a single track and see a sub-page about that specific track.

At our application level, we could first have a Router to handle any requests to our albums.

const express = require('express');
@Rich-Harris
Rich-Harris / service-workers.md
Last active December 3, 2025 11:09
Stuff I wish I'd known sooner about service workers

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

@paulirish
paulirish / what-forces-layout.md
Last active December 8, 2025 09:19
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent