この週報は各地の内容のまとめです
技術#
React Server Components の理解#
React Server Components (RSCs) は、React フレームワークにデータ取得とリモートクライアントとサーバー間の通信機能を追加したコンポーネントです。RSCs は、従来のクライアントとサーバー間の密接な関係の問題を解決し、サーバー上でのレンダリングを通じてパフォーマンスを向上させます。RSCs は、クライアントの JavaScript パッケージのサイズを減少させ、ページの読み込み速度を向上させることができます。RSCs は、クライアントコンポーネントとサーバーコンポーネントが同じ React ツリー内で相互作用することができます。しかし、RSCs にはライフサイクルフックや状態を使用できないなどの制限もあります。Next.js では、App Router を通じて RSCs を使用でき、コンポーネントをクライアントコンポーネントとして設定することも選択できます。
- React Server Components（RSCs）は、React の基本機能をデータ取得とリモートクライアント - サーバー通信の範囲に拡張します。
- RSCs は、従来の React におけるサーバーレンダリングと Suspense に関するいくつかの問題を解決し、より良いパフォーマンスとユーザー体験を提供します。
- RSCs は、クライアントの JavaScript パッケージのサイズを減少させ、ページの読み込み速度を向上させ、クライアントコンポーネントと Suspense とシームレスに統合できます。
なぜ DNS はまだ学ぶのが難しいのか？#
この記事では、DNS の問題を学ぶことやデバッグすることがなぜ難しいのかについて議論しています。著者は、システムの隠れた性質、隠れたシステムを扱う方法、DNS サーバーが提供する拡張デバッグ情報など、いくつかの理由を指摘しています。また、DNS に関連するツールや、負のキャッシュ、getaddrinfo の実装の違いなどの奇妙な問題についても言及しています。最後に、ツールや出力形式の改善に関するいくつかの提案が示されています。
- DNS は広く使用されている技術ですが、学ぶことやデバッグすることが難しいのは、多くのシステムが隠れているためです。
- DNS の隠れたシステムには、コンピュータ上の DNS ライブラリ、リゾルバのキャッシュ、およびリゾルバと権威 DNS サーバー間の対話が含まれ、これらは直接観察したり理解したりするのが難しいです。
- 人々にこれらの隠れたシステムを理解させ、ツールの出力の可読性を改善し、デバッグ情報を増やすことで、DNS の問題を学ぶことやデバッグすることが容易になります。
TypeScript で Extract を使用する 6 つの方法#
この記事では、TypeScript における非常に便利なツール型 Extract の多様な使用法を紹介しています。これには、識別子を区別してユニオン型のメンバーを抽出すること、メンバーの形状を通じてユニオン型のメンバーを抽出すること、ユニオン型内のすべての文字列、ブール値、数字を抽出すること、ユニオン型内のすべての関数を抽出すること、ユニオン型から null と undefined を除外すること、2 つのユニオン型の共通メンバーを見つけることが含まれます。
- TypeScript の Extract は、ユニオン型から特定のメンバーを抽出するための非常に便利なツールです。
- Extract は、ユニオン型の識別属性や形状に基づいて特定のメンバーを抽出できます。
- Extract は、ユニオン型から特定の型のメンバー（文字列、ブール値、関数など）を抽出するためにも使用できます。
プロトタイプの価値は、コードではなく、洞察にある。#
この文章は、プロトタイプ開発の価値と重要性について述べています。プロトタイプは、アイデアを迅速に検証し、フィードバックを得て、意思決定を行うのに役立ちます。プロトタイプは、問題を理解し、解決策を見つけ、有益な洞察を提供するのに役立ちます。プロトタイプは単なるコードの産物ではなく、製品やエンジニアリングチームが重要なビジネス決定を下すのを助ける学習ツールです。文中では、さまざまなタイプのプロトタイプと、プロトタイプ設計の方法とステップについても紹介されています。最後に、プロトタイプから得られる知識がプロジェクトの成功や将来の類似プロジェクトにとって重要であることが強調されています。
- プロトタイプ設計は、アイデアを検証し、フィードバックを得て、データを収集するための重要なツールであり、製品やエンジニアリングチームが重要なビジネス決定を下すのを助けます。
- プロトタイプの価値は、洞察を提供することであり、単に書かれたコードではありません。プロトタイプは、迅速に失敗し、意思決定に必要なデータを収集し、安全に試行錯誤を行うのを助けます。
- プロトタイプ設計は学習ツールであり、利害関係者との対話を通じて、ニーズを発見し、問題を解決し、製品を改善し、最終製品の成功に決定的な役割を果たします。
Resend を使用して React でメールを送信する方法#
この記事では、React Email と Resend を使用してメールを送信する方法を紹介し、Next.js を使用して典型的なポートフォリオの連絡フォームを構築しています。Resend API を使用することで、メールを送信し、React Email を使用してメールコンポーネントを作成できます。記事では、Next.js アプリケーションの設定、Resend API キーの取得、メールコンポーネントの作成、Resend を使用してメールを送信する手順について詳しく説明しています。最後に、React Email と Resend を使用することで、メールの作成と送信のプロセスが簡素化され、関連するドキュメントやサンプルコードのリンクが提供されています。
- 最近、React を使用して電子メールを作成し送信することが非常に困難になりましたが、React Email と Resend の登場がこの問題を解決しました。
- Next.js を使用してアプリケーションを構築し、Resend を設定した後、電子メールを送信するための典型的なポートフォリオの連絡フォームを作成できます。
- React Email と Resend を使用することで、電子メールを簡単に作成し送信でき、優れた開発者体験を提供します。
Web コンポーネントが素晴らしいなら、なぜ使わないのか？#
Web コンポーネントが過去 10 年間に広く採用されなかった理由は主に以下の点です：1. Web コンポーネントはあまりにも低レベルで、主にフレームワークの作者を対象としており、大部分のフレームワークはすでに彼らの問題を解決しています。2. 初期の Web コンポーネントと Polymer（Google の UI フレームワーク）との間に混乱があり、Google のいくつかの宣伝方法が不適切であったため、Web コンポーネントの普及が妨げられました。3. 成功事例や有名な製品のサポートが不足しており、使用することが難しいです。4. 最近まで広くサポートされておらず、以前は実験的な技術でした。5. Web コンポーネントにはいくつかのパフォーマンスの問題があります。再度行うことができれば、ターゲットユーザーを WordPress ユーザーに設定し、Google の影響を減らし、スタイルの問題を簡素化し、行動規範を確立すべきです。
- 市場の普及に関する問題があり、包括的なマーケティング戦略が不足しています。
- あまりにも低レベルで、設計の初期の目的はフレームワーク開発者のためでしたが、すでに大部分の問題を解決したフレームワーク開発者にはあまり魅力がありません。
- 初期の普及において過度の宣伝の問題があり、Google の UI フレームワーク Polymer との混乱が生じ、普及効果が悪化しました。
仮想キーボード API#
この記事では、モバイルデバイスで固定要素が仮想キーボードによって隠される問題を紹介し、仮想キーボード API を使用してこの問題を解決する方法を説明しています。著者は問題の原因を詳しく説明し、仮想キーボード API の使用例や用途を提供しています。仮想キーボード API は現在、Android 版 Chrome ブラウザでのみサポートされています。著者は、特定の状況で他の問題を引き起こす可能性があるため、仮想キーボード API の使用には注意が必要であると提案しています。
- モバイルデバイスで固定要素が仮想キーボードの起動時に隠され、ユーザー体験に影響を与える可能性があります。
- 仮想キーボード API を使用することで、キーボードの位置とサイズを検出してレイアウトを調整することでこの問題を解決できます。
- 仮想キーボード API は現在、Android 用 Chrome ブラウザでのみサポートされており、使用するには JavaScript を有効にするか、meta タグまたは CSS プロパティを使用する必要があります。
Nginx で量子安全暗号アルゴリズムを使用する#
この記事では、量子コンピュータの脅威と、量子安全暗号アルゴリズムを使用してウェブサイトデータの安全を保護する方法について説明しています。Open Quantum Safe プロジェクトは、量子コンピュータ攻撃に耐えることができる暗号アルゴリズムをいくつか提供し、nginx、Chromium などのソフトウェアのコンパイルおよび統合プロセスのドキュメントを提供しています。この記事では、OQS-OpenSSL のコンパイルと Nginx のコンパイルの具体的な手順も提供されています。
コンテナオーケストレーターの自己紹介#
この記事では、コンテナオーケストレーターの発展の歴史を紹介し、コンテナオーケストレーターの自己紹介、Swarm と Kubernetes の紹介を行っています。Swarm は Docker Compose のアップグレード版で、サービス発見、負荷分散、ローリングアップデートなどの機能をサポートしていますが、コンテナの高可用性を実現することはできません。Kubernetes は現在最も人気のあるコンテナオーケストレーターであり、数千のノードを持つクラスターでリソースを管理および配分する強力な機能と性能を持ち、民主化の変革をサポートしますが、設定は比較的複雑です。
ツール#
ora#
エレガントなターミナルスピナー
size-limit#
JS アプリケーションまたはライブラリの実際のコストを計算し、良好なパフォーマンスを維持します。コストが制限を超えた場合、プルリクエストでエラーを表示します。
a11y-dialog#
非常に軽量で柔軟なアクセシブルモーダルダイアログスクリプト
更新#
Sharp - WASM#
デザイン#
鏡の中：高レベルデザイン#
この文章は、問題解決におけるデザインの重要性と、デザイナーが持つべき能力と責任について述べています。記事は、デザインが意識的に結果に影響を与える行為であり、私たちの運命をコントロールする手段であり、革新の魔法の粉であることを強調しています。同時に、他者の知識やスキルを評価し、重要な目標を決定する際に存在する偏見や困難についても指摘しています。最後に、デザインの本質を正しく理解し、目標やそれに応じた知識とスキルに基づいて最も適切な人を選んで解決策をデザインすることを呼びかけています。
- デザインは意識的に結果に影響を与える行為であり、私たちの運命をコントロールする手段であり、好ましくない現状を拒否する方法です。
- デザインは私たちの存在の黎明期から始まっており、混乱に対する武器であり、革新の妙案であり、幸福を追求する基盤です。
- 技術エコシステムにおいて、エンジニアとデザイナーのデザインスキルは異なるかもしれませんが、役割が誰が最良の解決策を提案できるかを決定すべきではなく、知識とスキルに基づいて最適なデザイナーを決定すべきです。
その他#
AI モデルはユーザーに問題を明確に説明する必要がありますが、現代社会では半数の人々が表現力が不足しており、（現在の）AI モデルから理想的な結果を得ることができません。
-- 《AI：60 年ぶりの新しい UI パラダイム》
物事はほとんど常に、ある人が当時は無意味に見えることをすることから始まります。
-- ジェームズ・バーク、イギリスの科学史家
長期的に学んだことを吸収したいなら、あなた自身が関与し、実際に手を動かす必要があります。
しかし、スマートフォンが普及した社会では、真の参加が以前よりも難しくなっています。人々は他人の作品を受動的に閲覧することに慣れてしまい、共有、いいね、リツイートが自分の参加に取って代わっています。
-- 《デジタル時代における学び方の改善》