Frontend Weekly 2024-02-02
Figma Dev mode GA
Figma の Dev モードが正式リリースされました。無料のベータ版は 2024 年 1 月 31 日に終了したため、Dev モードの利用には課金が必須になります。
https://www.figma.com/ja/blog/dev-mode-ga/
合わせて、いくつか機能が紹介されています。
アノテーション機能
アノテーションを利用すれば、簡単にプロパティやデザインの詳細を追加できます。
表示するプロパティは選択でき、変更があれば自動的に反映されます。またアノテーションは、レイヤーに紐づき、デフォルトで表示されているため、コメントより気づきやすくなっています。
メジャー機能
要素間などの大きさを視覚化した上で、位置の調整が出来ます。この値も変更が自動的に反映されます。
変更の比較
2 つのフレームを選択した上で compare changes を押すと、コードとビジュアルで比較することが出来ます。
VSCode for Figma
VSCode を Figma 上で見ることの出来る VSCode for Figma が再設計されました。以前は大きなキャンバスをそのまま表示していましたが、個々のフレームにフォーカスして表示できるようになりました。
https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension
Learn Testing
フロントエンドのテスト手法について包括的に学べるコンテンツが web.dev から公開されました。
https://web.dev/learn/testing/welcome?hl=ja
現在公開されているものは基礎的なものが多いですが、実際のコードや図などを用いて説明しており分かりやすいように思います。また近日中に”自動テストの実践”や”テスト可能なコードの記述**”**コンテンツの追加が予定されているようです。
Next.js App Router Caching: Explained
“Next.js App Router Caching: Explained!”という動画が Vercel から公開されました。主に App Router でのキャッシュの挙動について網羅的に実際のコードや図を用いて解説しています。
Tappy
LINE ヤフー株式会社は、スマートフォンのタップ操作成功率を可視化するツール Tappy を公開しました。URL を入力するだけで、そのページに含まれるボタンやリンクなどタップ可能な要素のタップ操作成功率を推定できる。
成功率の推定方法について、技術ブログで紹介している。