React Router v6 で登場した <Outlet /> を活用すると、良い感じに共通レイアウトを組み込めて、さらに <React.Suspense> や React.lazy() を組み合わせると体験が良くなるのを見つけました。おそらく React Router v6 を利用する上での頻出イディオムになると思うので、自分用のメモとして残しておきます。 最終的なサ…
Improving INP with React 18 and Suspense – Vercel
Interaction to Next Paint (INP) measures your site’s responsiveness to user interactions on the page. The faster your page responds to user input – the better. INP is an experimental metric to develop a better way of measuring responsiveness than First Input Delay (FID). This post will help you u…
Reactでコンポート構築する際に意識してる４つのこと
この記事で話すこと 宣言的UIの構築をシンプルなプロセスを経て理解することで、react入門・初心者が状態管理に怯えて手が動かなくなる状態を脱却することを目的にしています。 まず複雑な状態管理を考え出す前に、そもそも宣言的UIの構築プロセスを頭の中に置いて状態を整理する☺️ 宣言的UIの構築をフォームコンポーネン…
GitHub – sofn-xyz/mailing: Build, test, send emails with React
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Mailing
Free · Open Source · Free · Open Source · Free · Open Source · Free · Open Source · Free · Open Source · Free · Open Source · Free · Open Source · Free · Open Source · Free · Open Source · Free · Open Source · Free · Open Source · Free · Open Source …
TypeScriptでコードを書く時に意識していること
なんだかんだでTypeScriptを業務でも個人開発でも使うようになって3年くらいが経過しました。 TypeScriptは便利ですよね☕️ 世の中的にも、もはやTypeScript以外でフロントエンドの開発を行うことが珍しいくらいの雰囲気になってきたのではないかという感じがします。 最近というかTypeScriptを書き始めてしばらくした今…
【React/Vue.js】コンポーネント指向と好相性なCSS Modulesを用いたCSS設計について｜Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、CSS Modules を用いたコンポーネントの CSS 設計について紹介します。 コンポーネントを作成する際に、どのような CSS 設計にすればいいのか悩んだ方も多いのではないでしょうか。（筆…
React code conventions and best practices
Use linting and automatic formatterAll the major tools for React provide linting rules. If you like, feel free to edit them to fit your style, but always use some and automate the process of linting and formatting. Preferred tools are eslint and prettier. Import orderAdd some import order rules t…
Announcing Docusaurus 2.0 | Docusaurus
Today we are extremely happy to finally announce Docusaurus 2.0! 🥳️ At Meta Open Source, we believe Docusaurus will help you build the best documentation websites with minimal effort, letting you focus on what really matters: writing the content. After 4 years of work, 75 alphas and 22 betas, the…
今さら聞けないビジュアルリグレッションテストをChromaticで始める – Sansan Tech Blog
Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケーション開発で定石とされたテスト手法を適用しづらいケースが増…