Twitter に投稿したツイートを Mastodon に転送するようにした - mizdra's blog

2023/04/08 170 users Twitter mizdra Fediverse 一連 騒動

去年の 11 月から続く一連の騒動を受けて、id:mizdra のフォロワーの中でも Twitter から Fediverse に移行してきている人が増えてきた。僕自身は移行するつもりはないけれど、移行したフォロワーが僕のツイートを Fediverse から見れるように、ツイートを Mastodon へと転送するようにしてみた。せっかくなので、そのや... 続きを読む

試行錯誤を邪魔しない開発環境 - mizdra's blog

2023/01/30 134 users 試行錯誤 開発環境

ある機能を実装する際、完成形のコードになるまでには、プログラムとして不正確な状態や、プロダクト品質ではない状態を経る 静的型検査や lint rule に違反したコードが途中に挟まる 型エラーや lint エラーは望ましくないので、できるだけ早くこうした情報を開発者に伝え、気付けるようにすると良い CI でこうしたエラ... 続きを読む

Web フロントエンドにおけるコロケーション (co-location) という考え方について - mizdra's blog

2022/12/11 75 users コロケーション ディレクトリ クエ 文献 フロントエンド

Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエ... 続きを読む

Prisma で本物のDBMSを使って自動テストを書く - mizdra's blog

2022/11/24 126 users Prisma mock DBMS ロジック 下位

DBMS に依存するロジックのテストを書く時、主に2つの手法があると思います。 Repository 層などを mock する Service 層のテストをする時は、その下位の Repository 層を mock して、DBMS に依存しない形にしてからテストする レイヤードなアプリケーションで適用できる手法 テスト実行時も DBMS を裏で動かして、それ... 続きを読む

コードジャンプ可能な CSS Modules を実現する happy-css-modules の紹介 - mizdra's blog

2022/11/14 84 users React CSS Modules CSS デモ 手法

弊社では React で CSS を書くための手法として CSS Modules を全面的に採用しています。そこで CSS Modules を使った開発をより快適にするために、「happy-css-modules」というツールを作りました。 happy-css-modules のデモ。 この記事ではこのツールが必要になった背景、導入方法、そしてツールの技術的な仕組みにつ... 続きを読む

qwik の発明、及びマイクロフロントエンドへの活用について - mizdra's blog

2022/10/27 156 users React Qwik ライブラリ 発明 Vue.js

最近調べた qwik というライブラリが結構面白かったので、実際どういうものなのかとか紹介してみます。 qwik とは qwik は Web 向けの View ライブラリです (React や Vue.js の仲間)。パフォーマンスオタクがパフォーマンスの最適化 (Web Vitals の改善) にこだわって作ったライブラリです *1。 すでにいくつも良い紹介... 続きを読む

リリースノート自動生成テクニック - mizdra's blog

2022/07/08 160 users

普段からいくつか趣味で作ったツールやライブラリを npm パッケージとして publish しています。ちょっと工夫していることとして、「できるだけ簡単に npm publish できるようにしておく」というものがあります。npm publish が心理的に、手順的に難しいと、すでに main ブランチに新機能や修正が入っているのに、npm pu... 続きを読む

見つけた GitHub の Issue を片っ端から subscribe している - mizdra's blog

2022/04/29 108 users Notifications github.com 通知 理由

あるライブラリを使っていてバグっぽい挙動に遭遇した時、ほぼ必ず当該ライブラリの Issue を検索するようにしている。加えて、見つけた Issue の subscribe ボタンを押して、https://github.com/notifications に通知がいくようにしている。バグ遭遇時以外にも、何らかの理由で Issue に到達した時にその Issue を subs... 続きを読む

npm-scripts を書く時の手癖 - mizdra's blog

2022/03/24 186 users 手癖 npm-scripts MIZ 長年 ノウハウ

かれこれ 5 年くらい趣味開発で npm-scripts を書き続けている。長年書き続けているとノウハウが蓄積されてきて、「こう書くとスッキリする」「迷いがなくなる」「後から拡張したくなった時に、簡単に拡張できる」みたいな書き方が身についてきた。自分の型、あるいは手癖のようなものだと思う。 せっかくなので、id:miz... 続きを読む

個人的 Web フロントエンドスキルの獲得方法 - mizdra's blog

2021/12/30 616 users フロントエンド プロダクト 体制 web フロントエンド会

ここ2年くらいの話なのですが、仕事で「フロントエンド会」というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったので、残った人で面倒を見ていける体制を作りましょう、というモ... 続きを読む

JavaScript で print デバッグ時に変数名を出力する - mizdra's blog

2021/05/02 206 users 変数名 JavaScript

数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7,... 続きを読む

ブラウザにおけるメモリリークを解決するために読んでおけると良い資料 - mizdra's blog

2021/02/08 396 users メモリリーク 知見 アプリケーション 冒頭 過程

最近趣味や仕事の Web アプリケーションでメモリリークに遭遇して、頑張ってメモリリークの原因を突き止めて修正する、ということがあった。その過程でメモリリークについて色々調べて知見が溜まったので、学習資料の紹介という形でアウトプットしてみる *1。 前提 紹介する記事がかなり偏っていることに注意 冒頭で触れ... 続きを読む

画像による Layout Shift が無くなる Web がやって来る - mizdra's blog

2020/05/31 306 users web fetch 画像 img 古来

はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (La... 続きを読む

WebAssembly 開発環境構築の本を公開しました - mizdra's blog

2018/05/07 100 users rust WebAssembly コンパイル プログラミング

2018 - 05 - 07 WebAssembly 開発環境構築の本を公開しました JavaScript WebAssembly Rust プログラミング はじめに Rust を用いて WebAssembly の開発環境を構築する手法を紹介する 電子書籍 を執筆・公開しました. WebAssembly への コンパイル が可能な言語である Rust を用いて, WebAssembly の開発環境... 続きを読む