hrdtbs

Connect to github with ED25519

2017/08/09 MacOS

Check SSH key

$ ls -al ~/.ssh

hrdtbs

なぜreact-hooks/exhaustive-depsはただcomponentDidMountのように使いたいだけなのに依存関係を入れてくるのか

export const Example = ({ loadOnlyOnce }) => {
    useEffect(() => {
      loadOnlyOnce()
    }, [loadOnlyOnce]) // ← WHY？
}

hrdtbs

JSDocで型安全にJavaScriptを扱う

TypeScript や Flow ではなく JSDoc を用いた JavaScript のプロジェクトは多くありますが、特別なことをしない限り、 悲しいことに JSDoc を書いても、何も言ってくれません。

/** @type {Array} foo */
let foo = [];

foo = "foo"; // 何も言ってくれない...

hrdtbs

img要素のリソース読込関係の属性について

画像のデコーディングは通常HTMLのパース処理に含まれているため、大きな画像はメインスレッドをブロックする原因になる。

これを改善するためにdecoding=asyncやloading=lazyが存在する。

decoding=async

HTMLのパース処理 → 「バックグラウンドプロセスで画像のダウンロード開始」 → CSSのパース処理 →　スタイルの再計算　→ レイアウト処理

hrdtbs

// source: https://ssl.wf.jobcan.jp/static/wf/scripts/controllers/create_request/expense_specifics_transport_controllers.js?ci-build-64159.444028469786320462
(function() {
    'use strict';
    angular
        .module('WfApp.create_request_controllers')
        .controller('ExpenseSpecificsTransportController', ExpenseSpecificsTransportController);


    ExpenseSpecificsTransportController.$inject = [
        '$http',

hrdtbs

type AsProp<C extends React.ElementType> = {
    as?: C
}

export type AsComponentProp<C extends React.ElementType, Props = {}, PropsWithAs = Props & AsProp<C>> = PropsWithAs &
    Omit<React.ComponentPropsWithoutRef<C>, keyof PropsWithAs>

export type AsRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>["ref"]

hrdtbs

export const fireReactChangeEvent = (
  element: HTMLInputElement | HTMLTextAreaElement,
  value: string | number
) => {
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
    element.tagName.toLowerCase() === "input"
      ? HTMLInputElement.prototype
      : HTMLTextAreaElement.prototype,
    "value"
  )?.set;

hrdtbs

overwrite: true
schema: 'https://docs.github.com/public/schema.docs.graphql'
documents: 'src/**/*.graphql'
generates:
  src/__generated__/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-query
    config:

hrdtbs

  const mediaStream = await navigator.mediaDevices.getDisplayMedia({
    preferCurrentTab: true,
  });
  const track = mediaStream.getVideoTracks()[0];
  const imageCapture = new ImageCapture(track);
  const imageBitmap = await imageCapture.grabFrame();
  const settings = track.getSettings();
  track.stop();
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("bitmaprenderer");

hrdtbs

const WHITESPACE = [" ", "\t", "\b", "\n", "\r"];
const NUMERICAL_CHARACTERS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
const EXP_CHARACTERS = ["e", "E"];

//@see https://www.json.org/json-en.html
export const parse = (value: string) => {
  let index = 0;
  const skip = () => {
    index++;
  };