Web開発リーディングリスト＃142：コンテキストID、フォームヒント、およびApplePay.js

公開: 2022-03-10

簡単な要約↬今日は、今後数週間に何が起こるかに関係なく、歴史の1日となります。英国の大多数の人々はEUを去ることに投票しました、そしてこれは私たちの社会の多くの人々が現在の状況がもはや受け入れられないと思っていることをもう一度明らかにしました。残念ながら、私たちはそれらの人々を非難することが解決策だと思いますが、私たちが見るように、そうではありません。代わりに、問題の根本的な原因について人々に教えることに焦点を当てるべきであり、すべてをすぐに投稿しないようにする必要があります。他のニュースでは、私はあなたに読むべき新しい記事を持ってくるために休暇から戻ってきました。そして私は一つのことに気づきました。登山には本当のリスクと危険がありますが、ウェブサイトでの作業はほとんどそうではありません。もちろん、私たちのWebサイトのセキュリティを最優先する必要がありますが、失敗した場合でも、Webサイトが数分間ダウンした場合、一部のデバイスのレイアウトを台無しにした場合、あなたは死ぬことはありません。間違いを犯して修正することで、仕事を改善する機会があります。

今日は、次の週に何が起こるかに関係なく、歴史の1日になるでしょう。英国の大多数の人々はEUを去ることに投票しました、そしてこれは私たちの社会の多くの人々が現在の状況がもはや受け入れられないと思っていることをもう一度明らかにしました。残念ながら、私たちはそれらの人々を非難することが解決策だと思いますが、私たちが見るように、そうではありません。代わりに、問題の根本的な原因について人々に教えることに焦点を当てるべきであり、すべてをすぐに投稿することは控えるべきです。

他のニュースでは、私はあなたに読むべき新しい記事を持ってくるために休暇から戻ってきました。そして私は一つのことに気づきました。登山には本当のリスクと危険がありますが、ウェブサイトでの作業はほとんどそうではありません。もちろん、私たちのWebサイトのセキュリティを最優先する必要がありますが、失敗した場合でも、Webサイトが数分間ダウンした場合、一部のデバイスのレイアウトを台無しにした場合、あなたは死ぬことはありません。間違いを犯して修正することで、仕事を改善する機会があります。

SmashingMagの詳細：

ウェブサイトのパフォーマンス：知っておくべきこととできること
実世界でのデータ駆動型設計
A / Bテストの専門家になるためのロードマップ
多変量テスト101：設計を最適化する科学的方法

ニュース

Safari 10はWWDCで発表され、いくつかの優れた新機能があります：IndexedDBサポート、 CSP 2.0 、Shadow DOM 1、完全なES6 / ES2015サポート、ES国際化APIサポート、iOSでのインラインおよび自動ビデオ再生、OSでのPicture in Picture X、WOFF2のサポート、およびフォントの読み込みのサポート（イェーイ！）。 CSSでは、すでに利用可能なobject-fitプロパティのobject-positionと、SVGパスを使用したクリッピングがあります。最後になりましたが、これからは、ビューポートルールとしてuser-scalable=noが設定されていても、ユーザーはピンチアンドズームできるようになります。

コンセプトデザイン

Mozillaは、ブラウザのライフコンテキストを区別するための新しい方法を導入しました。たとえば、それぞれ独自のコンテキストで作成された「仕事」または「銀行」タブを開いて、1つのブラウザウィンドウでさまざまなTwitterアカウントにログインできるようになりました。これは興味深い概念です。特に、ワークフローはすでにかなりよく考えられており、ブラウザーのエクスペリエンスが大幅に向上しているためです。

ジャンプした後もっと！以下を読み続けてください↓

FirefoxNightlyのコンテキストID — Firefox NightlyのコンテキストIDを使用すると、ユーザーはさまざまなコンテキスト（個人、仕事、銀行、ショッピング）でタブを開くことができ、サイトデータを分離してプライバシーとセキュリティを向上させることができます。（画像クレジット：Mozilla）

ツールとワークフロー

今週、アドビはコードエディタDreamweaverの新しいベータ版を発表しました。私はそれを見て、彼らが流れを変えて、プロのコーダーにとって魅力的でモダンなエディターにしたことにかなり感銘を受けました。オープンフィードバックが将来最終製品に何をもたらすのか興味があります。

安全

CIA長官のジョン・ブレナンはかなり自信のある人です。彼は最近、米国の上院議員に、成功している米国以外の製品がないという理由だけで、米国のビジネスを傷つける必須の暗号化バックドアについて心配しないように言いました。残念ながら、彼は正しいです。米国を拠点としない製品は多くありません。とにかくFacebook、Google、Microsoft、Apple、Yahooからのほとんどのトラフィックを利用するのに十分なので、CIAが望んでいるのはそれだけです。

プライバシー

「iOS10以降、Appleは差分プライバシーテクノロジーを使用して、個人のプライバシーを損なうことなく、多数のユーザーの使用パターンを発見できるようにしています。」 Matthew Greenは、この新しいテクノロジーについてコメントし、その長所、短所、および影響を見つけようとしています。
Facebookは、その広告が実際の購入につながることを証明したいと考えています。そのため、Facebookの広告主は実際の店舗の場所を追加できるようになり、Facebookはユーザーを電話の場所で追跡し、ユーザーが店舗にアクセスしたかどうかを報告します。もちろん、Facebookはそれを行っている最初の会社ではありません。Googleの人々は、かなり長い間同じことをすでに行ってきたことを誇りに思っています。私の携帯電話にこれらのブランドのアプリがもうないのはうれしいです。
Archive.org —私たちのオンライン履歴を毎日保存するプロジェクト。もう存在しないサイトを取り戻すことができるので、みんな大好きなプロジェクトですね。さて、誰もがそれに満足しているわけではないようです。ブリュースターケールは、直面している問題について説明しています。ユーザーのプライバシーを保護しようとしている間、ユーザーは大規模なDDoS攻撃に直面し、さまざまな制限国によってブロックされています。今、彼らは、Cloudflareを介してDNSをルーティングすることができない理由と、プロジェクトを実行するために私たちの寄付に依存している理由を共有しています。

HTMLとSVG

iOS 8ですでに機能を導入したSafariに続いて、 autocomplete="new-password"を追加して、パスワードの生成時に今後のChromeバージョンを示唆できるようになります。他のヒント（たとえば、 current-passwordやusername ）を追加することもできます。
単純で古い属性であるにもかかわらず、それを間違って実行している多くのWebサイトを見つけることができます：HTMLのlang 。まったく宣言されていない場合もあれば、内容が英語ではないのに値が"en"である場合もあります。 lang属性を適切に使用する方法と、それを適用できる場所を学びます。

アクセシビリティ

Rob Dodsonが、モーダルとtabindexの無効化の例で、より優れたアクセシビリティプリミティブを構築する必要がある理由を説明します。
Googleはudacityに関する無料のウェブアクセシビリティコースをリリースしました。

eコマースサイトのモーダルウィンドウ — モーダルは通常、アクセシビリティのボトルネックです。 Rob Dodsonが、それらを改善する方法について説明します。（画像クレジット：Rob Dodson）

JavaScript

AOSは、CSS駆動のオンスクロールアニメーションライブラリであり、ユーザーがスタイルを完全に制御できるようにします。
これで、会社のApplePay JavaScriptフレームワークを使用して、WebサイトへのApplePayの実装を開始できます。グーグルとアップルの両方が彼らの支払いシステムを直接ブラウザに入れることに熱心に取り組んでいるのは興味深いことです。残念ながら、Appleにとっても通常のことですが、ここではWeb Payment APIなどのWeb標準に準拠しておらず、独自のエコシステムのみを提供しています。

CSS / Sass

彼のCodePenデモでは、Jonathan Nealが、テキストのディセンダー間を織り交ぜてテキストの色を保持するボックスシャドウを使用して装飾的なテキストに下線を引く方法を共有しています。
クライアント側のフォームの検証は難しいことは誰もが知っています。しかし、ブラウザの内部検証APIのおかげで、何が悪かったのかをユーザーに伝える非常に巧妙なメッセージを表示できます。この記事では、それを効果的に行う方法を示し、定型文も提供します。
多くの場合、フォーム検証UXにCSSの可能性を十分に活用していません。 Chris Coyierは、それを正しく行うためのCSSのトリックをいくつか共有しています。

超えて…

グーグルのようなビッグデータ企業がCETAやTPP / TTIPの反対者ではないことは驚くべきことではありません。さらに驚くべきことは、GoogleがTPPのサポートに確固たる立場を取っていることです。彼らは、血まみれの論理で、なぜそれがインターネットの一歩になるのかを論じています。「しかし、検閲、サイトのブロック、データの強制的なローカルストレージなどのインターネットの制限は、インターネットのオープンアーキテクチャを脅かしています。」これらの問題は、ローカルストレージ（EUがユーザーのプライバシーを保護するための戦いで昨年最終的に施行した機能）を除いて、TPPで解消されることはありません。代わりに、TPPは著作権保護を実施し、TPP以外のパートナーがインターネットの一部をブロックするのを防ぐことはできず、実際には、企業にもたらす可能性を与えるため、既存のプライバシー、既存の法律、および国の裁判所に多くの害を及ぼします。仲裁裁判所にとって重要なこと—腐敗した資本主義企業がより多くの権力を獲得するのを助けるという事実は、普通の市民が不利な立場にある間です。優れたNetflixシリーズ「HouseofCards」では、民間企業がすでに政治家にどれほどの影響を与えているかがわかります。
最近、NASAの「火星探検家の指名手配」のポスターにリンクしましたが、今ではダウンロードできる新しいポスターが追加されています。美しくユニークなポスターをデザインする方法については、まだ非常に良い例です。

それで、今週は締めくくります。 私が毎週書いているものが気に入ったら、寄付で私をサポートするか、このリソースを他の人と共有してください。 プロジェクトの費用について詳しくは、こちらをご覧ください。 電子メール、RSS、およびオンラインで入手できます。