この週報は各地の内容のまとめです
技術#
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 は接続確立時間、サーバー応答時間、ネットワーク遅延を測定するための有用な指標ですが、コアウェブバイタルのようなより良い指標があり、サーバーやコンテンツ配信ネットワークのエンドユーザーに対するパフォーマンスをより正確に反映できます。
- ブラウザでウェブページを読み込むことは、フォント、スタイルシート、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 ヶ月過ごした感想と来月使わない理由#
この記事では、著者が GitHub Copilot を使用した経験について説明します。GitHub Copilot は、Microsoft が開発したリアルタイムのコード提案を提供するツールです。著者は最初は印象的で生産性が向上したと感じましたが、後にツールが生成する混乱や非標準のコードに気づきました。また、著者は自分が完全に理解していないコードを書くことや、プロダクション環境でエラーを発見することに懸念を示しました。彼らは、これがプログラミングの未来である可能性があるかどうか、そしてこのようにプログラミングを行うことに対して自分がどれだけの意欲を持っているかを疑問視しました。
- GitHub Copilot はリアルタイムでコード提案を生成できますが、ユーザーは生成されたコードが常に標準のデザインパターンに従っているわけではないため、慎重に使用する必要があります。
- このツールは生産性を向上させることができますが、ユーザーは生成されたコードが正しいことを確認するためにより多くの自動化テストを作成する必要があるかもしれません。
- 著者は、生成されたコードを完全に理解していなかったためにプロダクション環境でエラーが発生したことを強調し、すべての提案を実施する前に注意深くレビューし理解することの重要性を強調しています。
あなたの目を通して世界を見る#
この記事では、画像から人間の目の外観を再構築する方法について説明します。角膜のピクセルサイズを計算し、近似的な眼球の幾何学を使用します。眼の反射を通じて放射場を訓練し、虹彩を除去するために 2 次元テクスチャマッピングを使用します。また、結果を改善するために眼球の姿勢最適化も行います。
- 画像中の角膜のピクセルサイズを計算することで、健康な成人において眼球の幾何学が一貫しているため、正確な眼球追跡が可能です。
- 再構築プロセスでは、虹彩を除去するためにテクスチャ分解を使用し、虹彩のテクスチャを学習するために 2 次元テクスチャマッピングを訓練します。
- 眼球の姿勢最適化は、ノイズを処理し、再構築プロセスのパフォーマンスを改善するために行われます。
その他#
2023 年開発者調査#
