Skip to content

Instantly share code, notes, and snippets.

@sindresorhus
sindresorhus / esm-package.md
Last active November 16, 2024 22:43
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.
import React from "react";
export type ColorScheme = "light" | "dark";
export default function useColorSchemePreference(
defaultColorScheme: ColorScheme = "light"
) {
let darkQuery = "(prefers-color-scheme: dark)";
let [colorScheme, setColorScheme] = React.useState<ColorScheme>(
typeof window === "object" && window.matchMedia
import { useEffect, useState } from "react";
/**
* @example
* const matches = useMatchMedia("screen and (min-width: 560px)");
*
* @param raw
*/
export function useMatchMedia(raw: string): boolean {
const [matches, setMatches] = useState(false);

html を 画像化する https://github.com/gripeless/pico の、コアっぽい部分を抜き出した

手順

  • html を svg の foreignObject (任意HTMLの埋め込み要素) に描画
  • svg を XMLSerializer で data-uri 化
  • new Image して img.src に data-uri を流し込む
  • canvas に svg を読み込んだ img を renderImage する
  • canvas.toDataURL("image/png") で任意のフォーマットで吐き出し
@WebReflection
WebReflection / dom-libraries.md
Last active October 29, 2024 07:54
A recap of my FE / DOM related libraries

My FE/DOM Libraries

a gist to recap the current status, also available as library picker!

Minimalistic Libraries

do one thing only and do it well

  • µhtml (HTML/SVG auto-keyed and manual keyed render)
  • augmentor (hooks for anything)
  • wickedElements (custom elements without custom elements ... wait, what?)
@mizchi
mizchi / README.md
Last active April 30, 2020 06:22
minilink

Minilink

comlink から proxy やらなんやら抜いたもの。 気が向いたら npm に投げる

使い方

// worker thread
import {expose} from './minilink'
@laggardkernel
laggardkernel / startup-time-of-zsh.md
Last active October 27, 2024 08:23
Comparison of ZSH frameworks and plugin managers

Comparison of ZSH frameworks and plugin managers

Changelog

  • update 1: add a FAQ section
  • update 2: benchmark chart and feature comparison table
  • update 3:
    • improve the table with missing features for antigen
    • new zplg times result

TLDR

@mizchi
mizchi / predict-frontend.md
Last active May 12, 2023 03:43
React のユーザーから見た今後のフロントエンドの予想

この記事は議論のたたき台で、ポジショントークや、偏見にまみれています。

今のフロントエンドの分類

  • 古典的なサーバーサイド WAF への +α の味付け
  • 大規模なクライアントアプリケーション管理のための SPA
  • SEO / SSR を考慮した Node ヘヴィーな環境

他、提唱されてるパターン

@Restuta
Restuta / framework-sizes.md
Last active September 19, 2024 15:32
Sizes of JS frameworks, just minified + minified and gzipped, (React, Angular 2, Vue, Ember)

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js