Skip to content

Instantly share code, notes, and snippets.

View pfdgithub's full-sized avatar

pfdgithub

1 follower · 7 following
View GitHub Profile
@jerrylususu
jerrylususu / demo.html
Created December 18, 2021 16:53
Simple Dark Mode with CSS Filter `invert`
<!DOCTYPE html>
<html lang="cmn-Hans">
<head>
<meta charset="utf-8">
<title>Hello!</title>
<style id="dark-mode-theme" disabled>
html {
background-color: #ebebeb !important;
}
@mjackson
mjackson / composing-route-in-react-router-v6.md
Last active March 12, 2024 08:39
Notes on route composition in React Router v6, along with a suggested improvement you can make today to start upgrading

Composing <Route> in React Router v6

Composition of <Route> elements in React Router is changing in v6 from how it worked in v4/5 and in Reach Router. React Router v6 is the successor of both React Router v5 and Reach Router.

This document explains our rationale for making the change as well as a pattern you will want to avoid in v6 and a note on how you can start preparing your v5 app for v6 today.

Background

In React Router v5, we had an example of how you could create a element](https://github.com/remix-run/react-router/blob/320be7afe44249d5c025659bc00c3276a19f0af9/packages/react-router-dom/examples/Auth.js#L50-L52) to restrict access to certain routes on the page. This element was a simple [wrapper around an actual element that made a simple decision: is the user authenticated or not? If so, ren

@sindresorhus
sindresorhus / esm-package.md
Last active May 3, 2024 10:19
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.
@victor-homyakov
victor-homyakov / hash-speed.js
Last active June 3, 2023 15:34
/*
Setup:
npm i benchmark
npm i string-hash
Results on Node 8.6.0:
md5-hex x 411,933 ops/sec ±0.94% (84 runs sampled)
md5-base64 x 409,007 ops/sec ±2.13% (82 runs sampled)
sha1-hex x 426,509 ops/sec ±2.62% (83 runs sampled)
sha1-base64 x 426,735 ops/sec ±3.52% (80 runs sampled)
@thedreamwork
thedreamwork / unwxapkg.py
Last active March 4, 2022 07:22
unpack wxapkg
#!/usr/bin/python
# usage python unwxapkg.py filename
import sys,os
import struct
class WxapkgFile:
nameLen = 0
name = ""
@samthor
samthor / safari-nomodule.js
Last active February 14, 2024 02:54
Safari 10.1 `nomodule` support
// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
// does not support `nomodule` is probably not being used anywhere. The code below is left
// for posterity.
/**
* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
* load <script nomodule> anyway. This snippet solve this problem, but only for script
* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
*
* Again: this will **not** prevent inline script, e.g.:
@lgarron
lgarron / copyToClipboard.html
Last active December 20, 2023 12:53
Simple `navigator.clipboard.writeText()` polyfill.
<script>
// A minimal polyfill for copying text to clipboard that works most of the time in most capable browsers.
// Note that:
// - You may not need this. `navigator.clipboard.writeText()` works directly in all modern browsers as of 2020.
// - In Edge, this may call `resolve()` even if copying failed.
// - In Safari, this may fail if there is nothing selected on the page.
// See https://github.com/lgarron/clipboard-polyfill for a more robust solution.
//
// License for this Gist: public domain / Unlicense
function writeText(str) {
@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
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