この週報は各地の内容のまとめです
技術#
React サーバーコンポーネントの理解#
React サーバーコンポーネント（RSC）は、React フレームワークにデータ取得とリモートクライアントとサーバー間の通信機能を追加したコンポーネントです。RSC は、従来のクライアントとサーバー間の密接な関係の問題を解決し、サーバー上でのレンダリングを通じてパフォーマンスを向上させます。RSC は、クライアントの JavaScript パッケージのサイズを減少させ、ページの読み込み速度を向上させることができます。RSC は、クライアントコンポーネントとサーバーコンポーネントが同じ React ツリー内で相互作用することができます。しかし、RSC にはライフサイクルフックや状態を使用できないなどの制限もあります。Next.js では、App Router を通じて RSC を使用でき、コンポーネントをクライアントコンポーネントとして設定することも選択できます。
- React サーバーコンポーネント（RSC）は、React の基本機能をデータ取得とリモートクライアント - サーバー通信の範囲に拡張します。
- RSC は、従来の React のサーバーレンダリングと Suspense に関するいくつかの問題を解決し、より良いパフォーマンスとユーザー体験を提供します。
- RSC は、クライアントの 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 パラダイム》
物事はほとんど常に、ある人が当時は無意味に思えることをすることから始まります。
-- ジェームズ・バーク、イギリスの科学史家
長期的に学んだことを吸収したいなら、あなたはその中に参加し、自ら手を動かさなければなりません。
しかし、スマートフォンが普及した社会では、本当の参加が以前よりも難しくなっています。人々は他人の作品を受動的に閲覧することに慣れてしまい、共有、いいね、リツイートが自分の参加を代替しています。
-- 《デジタル時代における学び方の改善方法》