この週報は各地の内容のまとめです
技術#
CSS step 関数の jump-* キーワードを理解するには？#
この記事では、CSS アニメーションにおける steps 関数とそのパラメータについて説明します。jump-start、jump-end、jump-both、jump-none を含みます。これらのパラメータを使用してスムーズなアニメーションを作成し、フレームの飛びを避ける方法を示します。また、以前のアニメーション例における小さなバグを解決するためのソリューションも提供します。jump-* パラメータ間の違いをまとめ、さまざまなブラウザとの互換性についても紹介します。
- CSS の "steps" 関数には、アニメーションの最初または最後のフレームをスキップするために使用できる "start" と "end" の 2 つのパラメータがあります。
- "steps" 関数の "jump-" キーワード（例: "jump-both" や "jump-none"）は、アニメーション中にスキップされるフレームを制御し、すべてのフレームを表示することを保証します。
- "jump-none" キーワードを使用することで、Ant Design ロゴアニメーションの例に示されるように、アニメーション中にフレームが欠落する問題を解決できます。
React におけるテレポーテーション：位置決め、スタッキングコンテキスト、ポータル#
この記事では、CSS の位置決め、スタッキングコンテキスト、そして CSS を使用してコンテンツの切り取りを回避する方法について説明します。また、React で Portal を使用する必要性とその仕組みについても解説します。絶対位置決めが画面に対して位置決めされるべき UI 要素には適していないことを強調します。スタッキングコンテキストの問題や、z-index CSS プロパティが常に機能しない理由についても議論します。最後に、React Portal がこれらの問題をどのように解決するかとその仕組みについて説明します。
- CSS の絶対位置決めは通常の文書フローから外れることができますが、その相対的な性質とスタッキングコンテキストのルールにより、常に最適な選択とは限りません。
- スタッキングコンテキストは、要素が画面上に表示される際の重なり順序を決定し、z-index CSS プロパティを使用して操作できます。
- 特定の状況では、overflowから逃れるためや、現在の DOM 階層の外で要素をレンダリングするために React Portal を使用する必要があります。
重要なことを測定していますか？ Time To First Byte の新たな視点#
この記事では、Time to First Byte (TTFB) がウェブページの読み込み速度を評価するための正確な指標ではないと主張しています。TTFB は接続確立時間、サーバー応答時間、ネットワーク遅延を良好に示すことができますが、ウェブページの読み込みプロセスや最初のバイト受信後の操作を捉えることはできません。著者は、サーバーやコンテンツ配信ネットワークのエンドユーザーに対するパフォーマンスをより正確に測定するために、コアウェブ指標のようなより意味のある指標を使用することを提案しています。ただし、CDN やサーバーから単一ファイルをダウンロードする時間を測定する場合など、TTFB は依然として有用な指標です。
- Time to First Byte (TTFB) は、ウェブページの読み込み速度を評価するための良い指標ではありません。なぜなら、TTFB は応答の最初のバイトを受信するのにかかる時間のみを測定し、ウェブページが実際に利用可能になる時間を測定しないからです。
- TTFB は接続確立時間、サーバー応答時間、ネットワーク遅延を測定するための有用な指標ですが、コアウェブ指標（Core Web Vitals）のようなより良い指標があり、サーバーやコンテンツ配信ネットワークのエンドユーザーに対するパフォーマンスをより正確に反映します。
- ブラウザでウェブページを読み込むことは、フォント、スタイルシート、JavaScript、画像、その他のリソースを読み込み、HTML、CSS、JavaScript を解析し、ウェブページの内容とそのスタイルを表すデータ構造を構築するという複雑なプロセスであり、これらは TTFB の報告後に発生します。
Storybook 用の Figma プラグイン#
Storybook Connect for Figma は、Storybook のストーリーと Figma デザインを接続する新しいプラグインで、デザイナーがプロダクション環境と同期を保つのを容易にします。このプラグインは、実装とデザイン仕様を比較することで、引き継ぎと UI レビューの速度を向上させます。ストーリーを対応するバリアントに接続し、再利用可能なコンポーネントを特定し、デザインの引き継ぎプロセスを簡素化します。ユーザーは、Storybook プラグインを使用してデザイナーと共に UI 実装をレビューし、レンダリングされた UI がデザインと一致しているかを確認できます。このプラグインは、Jono Kolnik、Michael Arestad、Gert Hengeveld、Zoltan Olah、Dominic Nguyen によって開発されました。
- Storybook Connect for Figma は、Storybook のストーリーと Figma デザインを接続するプラグインで、チームが実装とデザイン仕様を比較し、引き継ぎと UI レビューの速度を向上させます。
- このプラグインは、デザイナーがコンポーネントを使用する前にその機能を確認し、デザインの引き継ぎプロセスで実装されたデザインコンポーネントを特定し、Storybook プラグインを通じてデザイナーがレンダリングされた UI がデザインと一致しているかを確認するのを助けます。
- このプラグインは、デザインと開発コンポーネントの間に持続的なリンクを確立することで、Storybook や Figma などのコンポーネントベースのツールをシームレスなワークフローに統合することを目的としています。
Vue KeepAlive が iframe をキャッシュできない理由#
Vue コンポーネントにおける KeepAlive の使用と、KeepAlive が iframe をキャッシュできない理由について説明します。
ツール#
ai-jsx#
JavaScript の AI アプリケーションフレームワーク
hyper-fetch#
BetterTyped/hyper-fetch は、キャッシュ、重複データ削除、認証、進捗追跡、再試行などの機能を通じて取得能力を強化する取得フレームワークで、リアルタイムデータ交換をサポートします。型安全な設計とユーザーフレンドリーなインターフェースを持ち、ブラウザやサーバーにシームレスに統合できます。
unlighthouse#
Google Lighthouse を使用して、平均 2 分でウェブサイト全体をスキャンします。オープンソースで、完全に構成可能で、最小限の設定で使用できます。
sniffnet#
インターネットトラフィックを簡単に監視するためのアプリケーション 🕵️♂️
veaury#
Vue3 で React を使用し、React で Vue3 を使用し、可能な限り完璧に！
auto-animate#
あなたのウェブアプリケーションにスムーズな遷移を追加するためのゼロ設定の埋め込みアニメーションユーティリティ。React、Vue、または他の JavaScript アプリケーションと一緒に使用できます。
selecto#
Selecto.js は、マウスまたはタッチを使用してドラッグ領域内の要素を選択できるコンポーネントです。
更新#
svelte4#
Svelte 4 がリリースされ、パフォーマンス、開発者体験、ウェブサイトが改善されました。このバージョンでは、Svelte のパッケージサイズが約 75％削減され、依存関係の数が減少し、Svelte の作成者体験が改善されました。公式の svelte.dev サイトも全面的に改善され、Svelte 5 が進行中で、これは Svelte コンパイラとランタイムの書き直しになります。Svelte 3 と互換性のあるほとんどのアプリケーションやライブラリは Svelte 4 と互換性があり、移行ガイドが提供されています。このリリースは、多くの Svelte のメンテナーや貢献者、そしてコミュニティの寄付によるものです。
- Svelte 4 がリリースされ、更新が行われ、パッケージサイズが縮小され、パフォーマンスが向上し、開発者体験が強化されました。
- Svelte 5 が進行中で、コンパイラとランタイムの大規模な書き直しが行われ、さらなる新機能とパフォーマンスの改善が期待されています。
- Svelte エコシステムには、これらの更新と改善に貢献する強力なメンテナーと貢献者のコミュニティがあります。
Nuxt 3.6#
Nuxt.js 3.6 がリリースされ、いくつかの新機能と改善が追加されました。更新には、SPA 読み込みインジケーター、パフォーマンスの向上、完全静的なサーバーコンポーネント、より良いスタイルのインライン化、アニメーション制御、自動 “static” プリセット検出、増加した型安全性、内蔵の Nitro 2.5 が含まれています。このフレームワークを使用しているユーザーには、アップグレードが推奨されます。
- Nuxt 3.6 は、内蔵の SPA 読み込みインジケーター、パフォーマンスの改善、完全静的なサーバーコンポーネントを導入しました。
- 更新には、より良いスタイルのインライン化、アニメーション制御、静的プロバイダーの自動 “static” プリセット検出が含まれています。
- Nuxt 3.6 は、増加した型安全性と Nitro 2.5 へのアップグレード機能も備えています。
TypeScript 5.2 の新しいキーワード: 'using'#
TypeScript 5.2 は、"using" という新しいキーワードを導入し、開発者がスコープを離れる際に Symbol.dispose 関数を持つリソースを処理できるようにします。"using" キーワードは、最近 Stage 3 に達した TC39 提案に基づいており、JavaScript に追加される予定です。ファイルハンドルやデータベース接続などのリソースを管理するのに非常に便利です。この記事では、"using" を使用してファイルハンドルやデータベース接続を処理するコード例を提供し、どのようにコードを簡素化するかを示します。
- TypeScript 5.2 は、スコープを離れる際に Symbol.dispose 関数を持つリソースを処理するための新しいキーワード "using" を導入します。
- これは、ファイルハンドルやデータベース接続などのリソースを管理するのに非常に便利です。
- "using" キーワードは、Symbol.asyncDispose と組み合わせて使用することもでき、データベース接続のような非同期処理が必要なリソースを処理します。
[email protected]#
✋ vite@4.4.0-beta.1 がリリースされました！
ベータドキュメントは https://main.vitejs.dev にあります。
- ⚡️ Lightning CSS の実験的サポート
- 🔼 esbuild 0.18
- 💜 その他の機能と修正
デザイン#
2023 年ロゴトレンドレポート#
この記事では、30,000 以上の提出されたロゴを分析した最新の 2023 年ロゴデザインのトレンドについて説明します。これらのトレンドには、円形の形状、文字ロゴ、サイケデリックおよびレトロフォント、緑と青の使用が含まれます。著者は、文脈を理解し、AI やインフレなどのツールを慎重に使用することの重要性を強調しています。トレンドは方向性を提供することができますが、ファッションとは異なり、デザイナーは流行に流されるのではなく、独自性を追求すべきであると著者は指摘しています。この記事は、デザイナーがインスピレーションを得てトレンドレポートを探求するためのリソースとして LogoLounge を推進しています。
- ロゴデザインのトレンドを分析することで、LogoLounge はブランドに新たな方向性の洞察を提供します。
- AI や 3D ツールのロゴデザインへの応用はますます一般的になっていますが、思考と文脈の中で慎重に使用すべきです。
- 2023 年のロゴトレンドレポートは、円形の形状、文字ロゴ、さまざまなフォントスタイル、色、シンボルを強調しています。
フロステッドガラス: CSS における深度ベースのぼかし#
AI#
ChatGPT と LangChain のエージェントとツールを使用して（ほぼ）自律的な HR アシスタントを作成する#
この記事では、企業アプリケーションにおける大規模言語モデル（LLM）の使用、特に人事分野での応用について説明します。著者は、最近の 2 つの論文に焦点を当て、LLM が思考連鎖プロセスを使用して回答を導き出す方法を提案しています。LangChain フレームワークがこの能力を活用する方法として導入され、そのエージェントとツールモジュールにより、LLM 駆動の人事チャットボットがタスクを分解し、さまざまなツールを利用して回答を導き出すことができるようになります。この記事では、LLM が不完全な入力からユーザーの意図を推測し、思考連鎖プロセスを使用して複雑なタスクを解決する能力を示すチャットボットの例を提供します。
- 大規模言語モデル（LLM）は、意思決定プロセスで思考連鎖を活用することで問題解決能力を向上させ、幻覚の発生を減少させることができます。
- LangChain のエージェントとツールモジュールは、LLM のこの新たな能力を活用し、人事チャットボットなどの企業アプリケーションを構築するために使用できます。
- プロンプトは LLM の「防護柵」として機能し、焦点を維持させ、LangChain の人事チャットボットは、最終的な回答を導き出すために中間ステップを生成する LLM 駆動のアプリケーションの能力を示しています。
GitHub Copilot を 1 ヶ月使用した感想と来月使用しない理由#
この記事では、著者が Microsoft が開発したリアルタイムコード提案ツールである GitHub Copilot を使用した経験について説明します。著者は最初はその印象に感銘を受け、生産性が向上したと感じましたが、後にツールが生成する混乱や非標準のコードに気づきました。著者は、自分が完全に理解していないコードを書くことや、プロダクション環境でエラーを発見することに対する懸念も表明しています。彼らは、これがプログラミングの未来である可能性があるか、そしてこの方法でプログラミングを行うことに対して自分がどれだけの意欲を持っているかを疑問視しています。
- GitHub Copilot はリアルタイムでコード提案を生成できますが、生成されたコードが常に標準的なデザインパターンに従っているわけではなく、ユーザーが生成されたコードを完全に理解していない可能性があるため、注意が必要です。
- このツールは生産性を向上させることができますが、生成されたコードが正しいことを確認するために、ユーザーはより多くの自動化テストを作成する必要があるかもしれません。
- 著者は、生成されたコードを完全に理解していなかったためにプロダクション環境でエラーが発生した経験を強調し、すべての提案を実施する前に慎重にレビューし理解することの重要性を強調しています。
あなたの目を通して世界を見る#
この記事では、画像から人間の目の外観を再構築する方法について説明します。角膜のピクセルサイズを計算し、近似的な眼球の幾何学を使用します。眼の反射を通じて放射場を訓練し、虹彩を除去するために 2D テクスチャマッピングを使用します。また、結果を改善するために眼球の姿勢最適化も行われます。
- 画像中の角膜のピクセルサイズを計算することで、健康な成人における眼球の幾何学は一貫しており、正確な眼球追跡が可能です。
- 再構築プロセスで虹彩を除去するためにテクスチャ分解を使用し、虹彩テクスチャを学習するために 2D テクスチャマッピングを訓練します。
- 眼球の姿勢最適化は、ノイズを処理し、再構築プロセスのパフォーマンスを改善するために行われます。
その他#
2023 年開発者調査#
