この週報は各地の内容のまとめです
技術#
単なるブラウザではない：JavaScript 標準の長期的未来#
JavaScript は最も人気のあるプログラミング言語として、ブラウザの枠を超えて拡張され、現在はサーバーサイドや組み込み JavaScript ランタイムで使用されています。JavaScript の ECMAScript 標準は主にブラウザのニーズによって推進されていますが、サーバーサイド JavaScript の台頭に伴い、異なるランタイム間での協力と互換性が求められています。W3C の WinterCG コミュニティグループは、ブラウザと非ブラウザランタイム間のクロスランタイム相互運用性を解決することを目指しています。彼らは特定のニーズに応じてカスタマイズ可能な JavaScript ランタイムの標準仕様を作成したいと考えています。この標準化により、開発者は一度コードを書けば、異なるサーバーサイドランタイムで実行できるようになります。WinterCG はまた、各ランタイムで Web API の一貫性を確保するために、最小限の共通 Web プラットフォーム API リストを策定しています。さらに、TC39 の提案では、サーバーサイド環境でのコードトレースを簡素化するための async context という方法が導入されました。目標は、クライアントとサーバーサイドの両方で同時に使用できる汎用 JavaScript を作成することです。
- JavaScript はブラウザの枠を超えて拡張され、Node や Deno のようなサーバーサイドランタイムがその進化において重要な役割を果たしています。
- WinterCG コミュニティグループは、クロスランタイム相互運用性を促進し、サーバーサイド JavaScript 環境の共通 API の開発を調整することを目指しています。
- サーバーサイド JavaScript のための標準基盤と統一された API 表面を採用することで、開発者、ランタイム作成者、これらのランタイムに依存する企業が利益を得ることができます。
Next.js 13 におけるプリフェッチのビジュアルガイド#
この記事では、Next.js 13 におけるプリフェッチの概念について説明しています。これは、バックグラウンドでコンテンツを事前に読み込むことでウェブページの読み込み速度を向上させる技術です。プリフェッチはユーザーの行動に基づいて予測し、期待されるページやウェブサイトの部分を積極的に読み込むことで、ユーザーがコンテンツをリクエストした際にほぼ即座に表示されます。開発中、Next.js はアプリケーションのナビゲーションに基づいて自動的にルートをプリフェッチし、シームレスな体験を提供します。プロダクションビルドでは、ルートがビューポート内で可視化されるとプリフェッチが行われ、ページ間の即時切り替えが保証されます。記事では、特定のリンクに対してプリフェッチを無効にする方法や、プログラム的にルートをプリフェッチする方法についても言及されています。全体として、Next.js 13 のプリフェッチはウェブページの読み込み速度を最適化し、スムーズなナビゲーション体験を創出します。
- Next.js 13 のプリフェッチ技術は、期待されるページやウェブサイトの部分を積極的に読み込む技術で、ほぼ即座にコンテンツを表示し、明らかな遅延を排除します。
- 開発中、Next.js はユーザーのインタラクションに基づいて次のページのコンテンツを自動的に取得し、キャッシュし、シームレスなパフォーマンスプレビューを提供します。
- プロダクションビルドでは、Next.js はビューポート内で可視化されるとルートをプリフェッチし、ユーザーがリンクをクリックした際にページ間の迅速な切り替えを保証します。
輝き、視点、回転：画像のためのファンシー CSS 3D 効果#
この記事では、CSS のテクニックを使用して画像に驚くべき 3D 効果を作成する方法について探求しています。著者は、CSS 3D フラッシュ効果、CSS 3D 視差効果、CSS 3D 回転効果の 3 つの異なる効果を示しています。CSS 3D フラッシュ効果は、ホバー時に画像にフラッシュアニメーションと軽い回転を追加します。CSS 3D 視差効果は、ホバー時に画像をわずかにスライドさせ、視点を変えることで深さを生み出します。CSS 3D 回転効果は、y 軸に沿って画像を回転させ、3D 効果を作成します。著者は、各効果の詳細な説明とコード例を提供しています。
- CSS は、ホバー時にフラッシュアニメーションや回転を追加することで、画像に驚くべき 3D 効果を作成するために使用できます。
- CSS マスクやグラデーションを使用することで、追加のマークアップなしで画像に偽のフラッシュ効果を作成できます。
- 回転、平行移動、クリッピングパス属性を組み合わせることで、CSS 3D 視差効果を実現し、深さと動きの錯覚を生み出すことができます。
Postgres と MySQL の全方位比較（2023 年版）#
2023 年の Stack Overflow 調査によると、Postgres は MySQL を超えて最も尊敬され、望まれるデータベースとなりました。この記事では、Postgres と MySQL のライセンス、パフォーマンス、機能、スケーラビリティ、使いやすさ、接続モデル、エコシステム、運用性などの側面を比較しています。全体的に、Postgres はより多くの機能と繁栄したコミュニティとエコシステムを持っており、MySQL は学びやすく、大規模なユーザー群を持っています。組織内で Postgres と MySQL が共存することも一般的です。
gRPC と RPC を理解し、優雅にデバッグ方法をマスターする#
gRPC は Google が開発した現代的なオープンソースの高性能 RPC フレームワークで、複数の開発環境で動作します。HTTP API インターフェースと比較して、gRPC は先進的な HTTP/2 基盤アーキテクチャ設計を底層の通信プロトコルとして採用しており、大規模データ転送やマイクロサービスアーキテクチャのシナリオに適しています。軽量な Protobuf シリアライズプロトコルを使用してデータ交換を行い、データ処理速度を向上させ、データ量を削減し、ネットワーク帯域幅を節約します。RPC プロトコルは、ネットワーク通信を介して異なるサーバー間でプロセスを呼び出すための実装方法です。gRPC は内部通信の複雑さを隠し、開発者に安定した統一インターフェースを提供し、マイクロサービスの分散システムに適しています。
ツール#
bruno#
Bruno は API を探索しテストするためのオープンソース IDE です。API リクエストの情報を保存するために純粋なテキストマークアップ言語 Bru を使用し、git や他のバージョン管理ツールを使用してコラボレーションをサポートします。複数のプラットフォームで動作し、ウェブサイト、ドキュメント、サポートを提供します。
article-extractor#
ウェブページの記事内容を抽出します。
更新#
Prettier 3.0：こんにちは、ECMAScript モジュール！#
この記事では、Prettier コードフォーマッティングツールの新しいバージョンのリリースを発表しています。更新には、ECMAScript モジュールへの移行、Markdown 形式の重大な変更、プラグインインターフェースの大幅な改善、さまざまなバグ修正が含まれています。Markdown 形式の変更には、中国語または日本語の文字と西洋の文字の間のスペースの削除が含まれています。プラグインインターフェースは現在、非同期パーサーをサポートしています。リリースには、中国語、日本語、韓国語のスペース処理の改善や、trailingComma のデフォルト値の変更も含まれています。この記事では、Babel パーサーから Flow 構文サポートを削除し、Flow コメントのサポートを削除したことにも言及しています。最後に、純粋な CSS パーサーを紹介し、フォーマット変更の例を提供しています。
- Prettier の新バージョンは、すべてのソースコードを ECMAScript モジュールに移行し、いくつかのフォーマット改善とバグ修正を導入することで、開発体験を向上させました。
- Prettier の Markdown 形式は変更され、中国語または日本語と西洋の文字の間にスペースを挿入しなくなり、公式ガイドに従っています。
- プラグイン開発者は、新バージョンに更新する際に注意が必要です。プラグインインターフェースは大幅に変更され、非同期パーサーと ECMAScript モジュールをサポートしています。
Prisma 5：デフォルトで高速#
Prisma は人気のあるデータベース ORM ツールで、起動性能において顕著な改善を遂げました。最新バージョンの Prisma 4.8.0 は、サーバーレス環境における Prisma の性能を強化することに焦点を当てています。改善には、より効率的な JSON ベースの転送プロトコルが含まれ、CPU とメモリのオーバーヘッドが削減され、内部構造が最適化された小型の JavaScript ランタイムが提供されます。これらの変更により、Prisma の起動性能が大幅に向上しました。最新バージョンの Prisma 5.0.0 がリリースされ、ユーザーにアップグレードを促しています。アップグレードにはいくつかの破壊的な変更が含まれる可能性がありますが、影響は最小限に抑えられると予想されています。Prisma はさらなる性能向上に努め、今後も更新を続ける予定です。
- Prisma 4.8.0 は、特にサーバーレス環境において起動性能を向上させ、Prisma の性能を大幅に改善しました。
- より効率的な JSON ベースの転送プロトコルと最適化された内部構造が導入され、Prisma Client の起動時間が短縮され、メモリ使用量が削減されました。
- Prisma 5.0.0 がリリースされ、これらの性能向上機能を提供し、ユーザーにアップグレードを促していますが、破壊的な変更に注意が必要です。
typescript-eslint v6 の発表#
TypeScript-eslint v6 は、ESLint や Prettier などの JavaScript ツールが TypeScript コードをサポートできるようにするツールです。新バージョンでは、いくつかの重大な変更と機能が追加されました。ユーザーは最新バージョンに更新し、以前のパッケージを置き換える必要があります。設定名は再設計され、機能とスタイルルールの設定が個別に行えるようになりました。プリセット設定の有効化ルールにも変更があります。一部のルールは変更または削除されました。ツール面でもいくつかの重大な変更があり、Node v12 および v14 のサポートが終了しました。現在の最低サポート TypeScript バージョンは 4.2.4 です。このバージョンには、開発者向けの改善も含まれており、TypeScript 構文を使用した ESLint プラグインでの型チェックラッパー API が提供されています。
- typescript-eslint v6 は、機能とスタイルルール用の再設計された設定名と推奨設定を導入し、TypeScript プロジェクトでの linting を容易にします。
- プリセット設定は更新され、有効化ルールとオプションに変更があり、ユーザーはそれに応じて ESLint 設定を更新する必要があります。
- このバージョンでは、一部のルールやツールに重大な変更があり、開発者向けの改善も提供されています。
デザイン#
Elstob：中世のための可変フォント#
この記事では、Elstob フォントについて説明しています。このフォントはオックスフォード大学出版局が使用していた 17 世紀のフォントに基づいています。このフォントには、字重、光学サイズ、グレード、イタリック体など、いくつかの可変軸があります。各軸は調整可能で、フォントの異なるバリエーションを作成できます。記事では、各軸とその値の範囲についての詳細情報が提供されています。また、このフォントは古英語の言語と文学のために設計されていることにも言及されています。
- Elstob フォントは、オックスフォード大学出版局が委託した歴史的フォントのデジタル版であり、異なるサイズとバリエーションが字重、光学サイズ、グレード、イタリック体に使用されます。
- フォントの可変軸は、字重、光学サイズ、グレード、間隔、イタリック体を動的に調整でき、ウェブデザイナーやユーザーに柔軟性を提供します。
- Elstob フォントのデザインと特徴は歴史的なサンプルと活字に基づいており、元のフォントを再現する際の真実性と正確性が確保されています。
平価版体験度量実践の方法 - 経験 / 見解 - UICN ユーザーエクスペリエンスデザインプラットフォーム#
この記事では、平価版体験度量実践の方法について説明しています。これには、層別比較や交差比較マトリックスなどの方法が含まれ、実践側の前提条件と後の検証を通じて、仮説と検証の形式でデータ分析の方向を収束させ、分析リソースの投入を節約します。最後に、具体的な実践ケースを通じて、ビジネス目標を体験目標に分解し、体験目標の中から具体的に注目すべきコアパスを見つけ出し、問題の掘り下げとビジネスの実際の製品およびデザイン戦略の提案を行う方法を示しています。
インタラクションデザインの見えない詳細#
この記事では、インタラクションデザインの背後にある科学的原理について議論し、メタファー、動力学、スワイプジェスチャー、レスポンシブジェスチャー、空間的一貫性が優れたユーザー体験を創出する上での重要性を探求しています。著者は、デザインにおける形式と機能の間で良好なバランスを保つ必要性を強調し、直感や本能的な行動がインタラクションデザインにおいて果たす役割を強調しています。
- インタラクションデザインは、ヒューマンインテントを理解し、現実世界のメタファーを使用してシームレスな体験を創出することを目的としたアート形式です。
- 優れたインタラクションデザインは、ジェスチャーや物理学を利用して直感的で応答性の高いユーザーインターフェースを作成します。
- インタラクションデザインにおいて、空間的一貫性は重要であり、異なる要素間の関係を構築し、ユーザーに明確さを提供します。
AI#
Cody#
Cody は、あなたのコードベース全体を読み込むことでコードの質問に答え、コードを書く手助けをします。
ChatGPT 探求：コードインタープリタの高度なガイド#
- コードインタープリタは、一度にすべての問題を解決し、満足のいく結果を返すわけではありません。実行中に自己修正を行うこともありますが、失敗した場合は適切なガイダンスを提供する必要があります。
- 環境が制限されているために特定の操作を実行できないと表示された場合は、代替案や手順を提供してガイドすることができます（ある程度の Python プログラミングの基礎が必要です）。
- コードインタープリタのファイルアップロード機能と画像表示は、ChatGPT の元々の対話能力と組み合わさり、GPT-4 の能力をさらに拡大しました。たとえば、データ分析、ファイル形式変換、仮説検証などです。
- コードインタープリタのセッションは時間制限があり、開かれた一時メモリはタイムアウト後に破棄されます。そのため、出力されたダウンロードリソースリンクは事前にローカルにダウンロードしてバックアップを取ることをお勧めします。
- Python インタープリタが開く一時メモリ空間は限られており、複雑で時間のかかるタスクを実行すると失敗する可能性が高いです。データ処理やデータ分析、ファイル形式変換のようなタスクには適していますが、元のファイルが大きすぎるとメモリが爆発してタスクが失敗することがあります。
その他#
3 つの原則が効果的なノートを取るのに役立ちます。
（1）ノートはあなたの思考方法に合っている必要があります。
ノートを取る際は、自分の思考方法に従って行うべきであり、教師（または本）の説明方法をそのままコピーしてはいけません。そうすることで、書くのが楽になるだけでなく、将来ノートを見返すときにも自分の考えを理解しやすくなります。
（2）ノートはあなたの知識を表す必要があります。
ノートは他人の言葉を単にコピー / ペーストするのではなく、自分の言葉で表現するべきです。理解している部分とまだ理解していない部分、疑問がある部分を明確にマークすることをお勧めします。
（3）ノートは簡単に検索できる必要があります。
自分のノートを最大限に活用するためには（実際には自分の時間を節約するために）、簡単に検索できる必要があります。各部分にタイトルを付け、定期的に目次を整理することが重要です。
皆が思っているのとは違って、プログラミングには深い思考をマスターする必要はなく、ある程度文書を記憶し、特定の用語を使って明確に考えを表現することが求められます。
-- 《プログラミングには知識の幅が必要》
一晩中苦労した AutoBangumi の設定がようやく動き出しました。
https://zhuanlan.zhihu.com/p/641701649
創造的なリーダーの役割は、フォロワーではなく、より多くのリーダーを育成することです。この考え方がより一般的になることを願っています。
誰かがあなたの意見に反対する場合、自分を弁護しないでください。代わりに、彼らの意見を聞いてください。彼らに説明を求め、彼らの懸念を確認し、さらに彼らの意見を拡張し、肯定してください。そうすることで、他の人はあなたが言うことを聞く意欲を持つでしょう。私の青春時代に誰かがこのことを教えてくれたらよかったのにと思います。