input[type=number] には空文字とかも入力できるので、string 型で状態管理をしないと意図しない動きをすることがある

Alge's Escapade - HTML5, JavaScript, GameJs arcade game where you control an Algae. Play it now! Alien Invasion - Demo Game for Mobile HTML5 Game Development. Play it now! Arashi - Arashi is a clone of the Arcade game Tempest. Play it now! Asteroids - Pure JavaScript asteroids. Play it now! Avabranch - GitHub Game Off 2012 entry. Play it now! Ball And Wall - Pure JavaScript arkanoid style game. Pl

Rustのエラーハンドリング関連の主要メソッドが一目でわかる、チートシートを作成しました。 Rustは型システムが複雑なので、やりたいことに適切なメソッドがあるかどうか、ドキュメントを探しまくることが多いです。エラーハンドリングもその類の1つであり、ドキュメント探索の手間を削減するために、チートシートを作成してみました。 ご活用ください。 1. チートシート 2. 関連リンク bool - doc.rust-lang.org Option - doc.rust-lang.org Result - doc.rust-lang.org

はじめに 自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっています。 今回は、現場で経験したReactアプリのパフォーマンス最適化についてまとめていきます。 この記事の対象者 Reactの初心者から中級者 Reactのパフォーマンス最適化について学びたい人 この記事の目標 Reactのレンダリングの仕組みを理解する Reactのパフォーマンス最適化の方法を知る React.memo, useCallback, useMemoについて理解する おことわり React.memo, useCallback, useMemoを使うコストについての詳しい解説 パフォーマンスの数値的な計測は行いません 上記の2点に関しては参考記事を該当箇所で貼ります。 Reac

以前は余白のための空タグはナシだったのですが最近は容認派に変わってきました。何故そのような変節を経たのか書きます。 余白用の空タグ容認派になった理由 以前は「余白用のためだけの空タグなんて！」と否定派ではあったのですが、最近は心境に変化がありました。1つはコンポーネントの限界という設計とCSSの仕様上の問題、1つはデザインの意図と実装のズレの差を埋めたいという思い、そして、余白に限らずなんだかんだで装飾用の空タグは使っている現実、この3つがあって空タグ容認派になりました。 余白とCSS設計 BEMを始めとするCSS設計においては、コンポーネント志向的アプローチで要素を分け、CSSの影響をコンポーネント内に閉じるようにし、再利用性を上げることを是としています。CSS設計がないと同じスタイリングがいくつも出てきたり、他のスタイルに依存した書き方が出てきたりとカオスになりがちなので、CSS設計は

Security is paramount for our users, and we at mercari strive to provide a snappy and safe platform. We recently introduced an additional layer of defence by adding Web Workers to secure the access token. It now protects the users from various kinds of attacks, including token theft from Cross Site Scripting (XSS), Cross Site Request Forgery (CSRF), prototype pollution, zero-day npm package vulner

GoのゲームエンジンであるEbitengine(旧称Ebiten) を使ってゲームを作るにあたり、画面描画周辺の動作についてもいい感じにテストしたかったため検討したメモです✍ なお、私はUbuntu22.04にて開発しているため、WindowsやMacOSなどの他の環境では別のハマりどころがあるかもしれません あしからず🦵 調べたこと ビジュアルリグレッションテストとは、コードの変更前の出力結果（WebアプリであればDOM構造、帳票出力であればPDFなど）をリポジトリに保存しておき、変更後の実装から出力したものと比較して差分がないことを確認する自動テストの一種です テスト実現にあたって、Ebitengineにおいて画像や表示する画面を表現する ebiten.Image からPNG画像を生成する必要がありますが、 普通に単体テストケースから処理を実行するだけだと、Image内のピクセル列へ

techfeed 経由で下記のスレッドを見かけたのですが、タイトルだけでも既に面白そうです。 また、ちょっと前から Notion のデータベースを各種コンテンツへ変換するツールを作っていまして、これを組み合わせるといろいろ楽できそうな予感がします。 そのようなわけで、スレッドで紹介されていた columnq-cli についての記事です。 columnq-cli とは？ README を読むと「各種データをテーブルとして SELECT できるようにする CLI ツール」で、テーブルソースには JSON などの他に ROAPI でサポートされているものを扱えるとのこと。 (SELECT のみで更新はできない) ここで ROAPI とはなんぞやとなりますが、こちらは「ローカルのファイルシステムや各種サービスのデータを統合的に扱える(SELECT できる)サーバー」を構築できるそうです。 図 1-

GraphQL Code Generator v3 以降で標準となった Client preset では設定が大きく異なります。 この記事は Client preset を使わない前提の内容になっているため、注意が必要です。 Client preset 用の設定は別記事で紹介します。 全体 生成物をフォーマッタにかける graphql-codegen には Lifecycle Hooks という仕組みがあり、いくつかの用意された hook ポイントで任意のコマンドを実行できる。 これを使って生成されたコードを Prettier 等のフォーマッタに通しておくのがおすすめ。 基本 DO NOT EDIT とはいえ、コードジャンプしてきて生成された型を読みたいケースはよくある。 そういうときのために、人間が見やすいように改行しておいてもらうといい。 typescript plugin, type

マイクロタスクは、それを作成した関数やプログラムが終了した後、 JavaScript 実行スタックが空の場合にのみ実行され、ユーザーエージェントがスクリプトの実行環境を動かすために使用しているイベントループにコントロールを返す前に実行される短い関数です。 このイベントループは、ブラウザーのメインイベントループか、ウェブワーカーを駆動するイベントループのどちらかです。これにより、他のスクリプトの実行を妨げるリスクなしに与えられた関数を実行することができ、同時に、ユーザーエージェントがマイクロタスクによって行われるアクションに反応する機会を得る前に、マイクロタスクが確実に実行されるようにします。 JavaScript のプロミスと変更監視 API は、どちらもコールバック実行にマイクロタスクキューを使用しますが、他にも、現在のイベントループのパスが終了するまで作業を延期する機能が役に立つ時があ