joshbuchea

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

fnky

ANSI Escape Sequences

Standard escape codes are prefixed with Escape:

• Ctrl-Key: ^[
• Octal: \033
• Unicode: \u001b
• Hexadecimal: \x1B
• Decimal: 27

paulirish

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

SMUsamaShah

JavaScript GUI libraries

These libraries can be used to quickly create a GUI for configureable parameters using sliders, checkboxes, colors pickers etc

1. Tweakpane https://github.com/cocopon/tweakpane Demo: https://cocopon.github.io/tweakpane/
2. control-panel https://github.com/freeman-lab/control-panel
3. ControlKit https://github.com/automat/controlkit.js
4. guify https://github.com/colejd/guify Main site is down, here is the demo https://jons.website/projects/guify/index
5. oui https://github.com/wearekuva/oui
6. Palette.js https://github.com/lehni/palette.js

branneman

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

wilsonpage

export const CACHE_STALE_AT_HEADER = 'x-edge-cache-stale-at';
export const CACHE_STATUS_HEADER = 'x-edge-cache-status';
export const CACHE_CONTROL_HEADER = 'Cache-Control';
export const CLIENT_CACHE_CONTROL_HEADER = 'x-client-cache-control';
export const ORIGIN_CACHE_CONTROL_HEADER = 'x-edge-origin-cache-control';

enum CacheStatus {
  HIT = 'HIT',
  MISS = 'MISS',
  REVALIDATING = 'REVALIDATING',

Explosion-Scratch

function compress(string, encoding) {
  const byteArray = new TextEncoder().encode(string);
  const cs = new CompressionStream(encoding);
  const writer = cs.writable.getWriter();
  writer.write(byteArray);
  writer.close();
  return new Response(cs.readable).arrayBuffer();
}

function decompress(byteArray, encoding) {

cdaringe

/**
 * @description
 * Support patch-package in pnpm projects.
 *
 * `pnpm` can be tricky to use with patch-package. To minimize friction creating patches,
 * this script helps automate patching by using npm and a temp workspace to generate
 * patch files.
 *
 * @usage
 *  0. ensure the dependencies of interest are top level dependencies/devDependencies (no patching transitive deps)

cjoudrey

// This example shows how to render pages that perform AJAX calls
// upon page load.
//
// Instead of waiting a fixed amount of time before doing the render,
// we are keeping track of every resource that is loaded.
//
// Once all resources are loaded, we wait a small amount of time
// (resourceWait) in case these resources load other resources.
//
// The page is rendered after a maximum amount of time (maxRenderTime)

DavidWells

/* Using a JavaScript proxy for a super low code REST client */
// via https://dev.to/dipsaus9/javascript-lets-create-aproxy-19hg
// also see https://towardsdatascience.com/why-to-use-javascript-proxy-5cdc69d943e3
// also see https://github.com/fastify/manifetch
// also see https://github.com/flash-oss/allserver
// and https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb

const createApi = (url) => {
  return new Proxy({}, {
    get(target, key) {