Vim の縦移動をレベルアップする VSCode 拡張を作ってみた
2021-11-12初めて VSCode 拡張を作ってみました。 カーソル行の上下 5 行目をハイライトします。 5 行移動ショートカットを使うのでそのための拡張です。 Vim の弱点と 5 行移動について。 成果物 elzup/vscode-maai-cursor maai-cursor…
Vim で 5j 5k を使い縦移動をレベルアップする
2021-11-12こんにちは。Vim 8 年目にして Visual Mode を Virtual Mode と混在していたことに気づいたあのぞんです。 ここ 2 年くらい 使っていていい感じだった Vim 設定について提案します。 Vim の弱点 Vim…
CheckBox 一括でチェックするブックマークレット
2021-11-08実行するとすべてを 1 つめの checkbox と逆の状態にするブックマークレットです。 の部分は私がよく使う Tips です。 の返り値が NodeList 型でループに使いづらいので、Array に変換しています。 補足: Bookmarklet…
React Google Charts の Dual-Y でオプションが反映されないときの解決策
2021-10-262 回ハマったのでメモしておきます。 ‘react-google-charts’ で複数軸のグラフを描画するパターンです。 vAxis ではなく vAxes を使います。現状 Type エラーで回避できなさそうです。 React ではなく Google Charts…
すべてのキーの onDown, onUp イベントを取る React Hooks
2021-10-18ピアノツールを作ってたら押すたびに 1 度だけ発火するイベントハンドラが欲しくなったので作りました。 その際にキーイベントに関する他パターンのカスタムフックを作ってみました。 を拡張します。 (…
Gatsby のブログを Zenn に連携する
2021-09-18Zenn に対応する 個人ブログ(Gatsby のブログ)から Zenn にマルチポストする設定をしました。 は Zenn に向けています。 成果物リポジトリ elzup/anozon-blog 週 1 以上書くというペースを心がけて気づいたら 9…
Arrow function で generics にすると HTML タグとして認識されてしまうときの tips
2021-09-02エディタなどによってうまくハイライトされなかったときはこうする。 をにする。
Web カメラを確認できる鏡ツールを作った
2021-08-26Mitelop の 1 ツールとして追加しました。 Widget makeing tool | Mitelop https://elzup-image-storage.s3.amazonaws.com/blog/mitelop-mirror.png…
Rust で競プロ環境整えたメモ
2021-08-20のおかげで快適に参加できるようになりました。 tanakh/cargo-atcoder: Cargo subcommand for AtCoder…
iTerm2 でディレクトリによってタブの色を変える
2021-08-06ディレクトリ移動時に自動でタブの色が変わるようにします。 移動時にディレクトリによって別のコマンドを実行する方法と、iTerm のタブ色を変える方法を組み合わせて実現します。 任意のディレクトリ移動時にコマンドを実行する(zsh) | あのぞんブログ iTerm tab…
任意のディレクトリ移動時にコマンドを実行する(zsh)
2021-08-06移動時に実行するコマンドを登録する 移動後に実行する hook の登録には の を使用します。 .zshrc などで以下のように登録をしておきます。 ディレクトリによって変える関数を定義する 最初にマッチした部分だけ実行されます。 応用例として iTerm…
GitHub Copilot はいい相棒になりそう
2021-08-047 月から使い始めて 1 ヶ月目で所感を書きます。 () 主に TypeScript を書いています。 初日から結構好感です。 良い点 コメント書かなくてもよく効く 関数名だけとか, 関数の途中からでもサジェストしてくれる。 エディタの Undo 壊す問題がなさそう (vim…
組み合わせ・順列プログラミングそれぞれまとめ nPr nCr nHr nΠr
2021-07-29順列を扱うための情報をまとめました。 4 パターン表 名前 英語 記号 A,B から 2 つ 順列 Permutation nPr 重複順列 Peramutation with replacement nΠr 組合わせ Combination nCr…
MacOS Big Sur と VSCode で C# 開発メモ
2021-07-29VSCode の設定 Plugin は最低限とりあえずこれだけ入れました。 C# - Visual Studio Marketplace 型補完やフォーマットができるようになります。 Cloud Function の開発 最初の関数: .NET | Google Cloud…
Terminal の録画ができる asciinema 使ってみた
2021-07-29Terminal に特化した録画ができる asciinema 使ってみました。 asciinema - Record and share your terminal sessions, the right way…
iTerm tab-color メモ
2021-07-19コマンドを作っておく iTerm2 の tab のタイトルと色を動的にいじる - Qiita コマンドを zshrc などに追加します。 何色かメモ 設定作成とキャッシュ 末尾にコメントで色をメモっておくと補完が効いていい(zsh の例)
(プロジェクト毎に) VS Code の Window に色をつける
2021-07-18VS Code のテーマを変えました。 Cyberpunk 2077 rebuild - Visual Studio Marketplace…
React で複数の ref を 1つのコンポーネントにセットする
2021-07-09同じ div に と の両方を使いたいとがあった。 しかしどちらも ref を渡さなければいけなかったのでその方法です。 Share ref with multiple ref handlers · Issue #13029 · facebook/react…
ブラウザ javascript 側で global ip を取得する
2021-07-06CSR (Client side rendering) でユーザの public ip を取得する方法です。 ipify を使う ipify - A Simple Public IP Address API ReactHooks の例 Code: tools/global-ip…
Node.js で家のネットワークかどうかチェックする
2021-07-05家のネットワーク上でだけ実行したいスクリプトがあったので、接続しているかチェックするコードを書きました。 network (npm) を使う tomas/network: The missing network utilities in Node.js. CLI…
component から props の型を取得する
2021-07-05Storybook で props 型が必要だけど export したくなかったので。 方法 1 方法 2(古い)
fitty を React で使う useFitty hook
2021-06-14はコンテナに合わせてテキストのフォントサイズをフィットしてくれるライブラリです。 rikschennink/fitty: ✨ Makes text fit perfectly それを React で使うための hooks を書いた。 Gist fitty for react…
unix timestamp の桁数が増えるのはいつか
2021-06-02現在の桁数 現在 10 桁から 11 桁になるのは 2286 年 です。() その他 になったのは 2020 年 9 月からで、 になるのは 2023 年 11 月からです。 現上 2 桁が変わるのは 3.17 年周期です。 unix str 1000000000 200…
styled-components の keyframes で ts-styled-plugin のエラーが出る
2021-05-19css animation の や などのキーワードに対して のエラーが出たので対処しました。 で animation を扱う場合以下のように書きます。 () この や に VS Code…
単色パネル表示するだけのツール作った
2021-02-19たまにモニターの焼け付きが気になって、グレイ色の背景のウィンドウを用意して確認することがあります。 そんなときに単色のページ探すがだるいので Web ツール化しました。 真っ黒や真っ白なウィンドウも作ることができます。 ツール Mitelop…
【JavaScript】ズームしたときの座標を求める関数
2021-02-13図の外側四角 () と選択点()と拡大率から 内側の四角()を求める関数です。 コード マンデルブロ集合をズームしてくサンプル コード tools/mandelbulb.tsx at master · elzup/tools Web マンデルブロ集合
React で特定の props を固定した特化コンポーネントを定義する
2021-01-19React で特定の props を固定した特化コンポーネントを定義する方法をいくつかまとめました。 DEMO です。 react-set-props - CodeSandbox 以下の という自作コンポーネントと というライブラリのコンポーネントを例に使います。 Star…
jq コマンドで json の特定のフィールドを削る・抽出する
2021-01-15コマンドを使って json 内部特定のフィールドを操作します。 で行えます。 抽出(pick)・削除(omit) ファイル入出力 配列の各要素を操作
vim の q マクロを保存して使いまわす
2021-01-131 度作ったマクロを保存して、 vim を開き直したときも使いまわしたいときの方法。 マクロ に保存する例で説明します。 .vimrc に保存する q で macro を記録する → 操作 → で記録。 に追記する (外部クリップボードにコピーしたりしたいとき) b…
node.js で Streaming の メタデータを取得する
2021-01-12この記事では node.js で Streaming の メタデータを取得する方法について紹介します。 を使用します。 TooTallNate/node-icy: Node.js module for parsing and/or injecting ICY metadata…
Raspberry Pi に Node.js セットアップ
2021-01-07Raspberry Pi に Node.js 入れる方法のメモです。 tj/n: Node version management を使います。 .profile の設定 インストール作業
1px の画像データURLメモ
2021-01-061px 画像 の データ URL を並べておきます。 黒 白 透明 ついでジェネレーターアプリ化しておいたのでどうぞ。 1px data url generator
アロー関数とfunction それぞれの Type Guard 書き方
2021-01-04この記事では アロー関数で Type Guard について紹介します。 TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript function パターン arrow…
React で URL props が変わったら fade アニメーションで 背景を変える
2020-12-29props で指定された URL が変わったら フェードアウト し、 新しい URL 画像で フェードイン しながら表示するコンポーネントを作りました。 を使います。 デモ コード 部分の説明。 変更された際 になり Exit アニメーション(fade out…
js で先頭以外(n行目以降)をソートする
2020-12-17js で配列の 2 行目以降のみをソートする方法のメモです。 repl: https://repl.it/@anozon/sortbody#index.ts ソート対象の配列 先頭以外をソートする n 行目以降のみソートする Lodash…
java で標準出力を文字列として取得する
2020-11-20以前書いた、 java で標準出力を一旦オフにする | あのぞんブログ から発展して出力の受け取り方です。 Repl.it - StdOutToStr コード
Next.js export 実行時のタイムスタンプをコンポーネントで使う
2020-11-17を実行した時のタイムスタンプをレンダリングしたいときの方法です。 jsx 上で などとするとクライアントサイドでレンダリングされた時間が表示されてしまいます。 SSR 時のデータを React で使いたい場合は NextPage…
java で標準出力を一旦オフにする
2020-11-04java で標準出力を一時的にオフにする方法です。 Repl.it - StdOutToNull コード で “デフォルトの出力” と “何もしない OutputStream” を切り替えています。 snippet Snippet 部分のみコード。
Buffer と float、整数、他エンコードとの相互変換【Javascript】
2020-11-01JavaScript で Buffer と他の型への変換する方法をまとめました。 repl も公開しています。 Repl.it - buffer 数値 → Buffer 数値は → 型付き配列 → Buffer という順に変換する。 Buffer…
vim の visual mode で選択した範囲に paste できないとき
2020-10-30恐らく visual mode で選択した範囲がコピーされています。 clipboard に が設定されているときの挙動です。 設定
React と display grid でメモリ付き定規
2020-10-30メモリ付きの定規、ルーラーコンポーネントのサンプルです。 react-memory-component コード ruler-with-memory - CodeSandbox ミソ ブロック部分とメモリ部分を 0.…
ngrok で http リクエストの中身を全部確認する【IoTデバッグ】
2020-10-13「自前の API にリクエストは届いてるけどなにか不具合が起きている」「リクエストをダンプする環境をすぐに用意するのはダルい」とき用。 ngrok の本来の使い方とは違いますが、http パケットキャプチャができます。 ngrok とは ngrok - secure…
js で文字列の先頭のn 行を削除する
2020-10-05コード 1 を使う方法です。 コード 2 コード 1 でいいですが最初に思いついた正規表現で削る方法です。 動作が早いかわからないですが (渡される n が行数より大きいときに使えません。) 遅かったです。Repl.it - regex-vs-slice
絵文字を含めて文字数カウントするWebアプリ作った
2020-10-02アプリ 文字頻度カウント(絵文字対応) emoji-count 絵文字対応 では絵文字が 1 文字として分割できません。 を使います。 bestiejs/punycode.js: A robust Punycode converter that fully complies…
Python で TypeScript の UnionType を使う
2020-08-24TypeScript の UnionType は以下のように定義できます。 Python の type でも同じようなことができるのか調べました。 ちなみに というのがありますが別です。 typeing.Literal を使う ちなみに get_args…
JavaScript で Object の更新はどれが速いのか
2020-08-23スプレッド構文で書くのが面倒だったので検証しました。 結果 結論としてはクローンが書きやすいし速いので良さそうでした。 コスト 書きやすさ スプレッド構文 221 ms △ スプレッド構文でクローンして代入 195 ms ○ Object.assign…