Twitterの最初の10行を私に説明してください

過去数週間、私はレンタル家具会社であるPabioでシニアフルスタックJavaScriptエンジニアのために雇ってきました。私たちはリモートチームであるため、Zoomでインタビューを行っています。一部の開発者は、仕事が得意であっても、ライブコーディングやホワイトボードのインタビューには優れていないことを観察しました。そのため、1時間の技術的な議論があり、Webバイタル、アクセシビリティ、ブラウザ戦争、その他のWebに関する同様のトピックについて質問します。私がいつも尋ねたい質問の1つは、 「Twitterソースコードの最初の10行かそこらを私に説明してください。」です。

それは、彼らが持っている基本的なフロントエンドの知識の深さについて多くのことを教えてくれる簡単なテストだと思います、そして、この記事は最良の答えをリストします。

コンテキストについては、画面を共有し、twitter.comを開き、 [ソースを表示]をクリックします。それから私は彼らに、HTMLを理解するのを助けるためにラインバイラインに行くように頼みます。彼らは好きなだけ言うことができます。また、テキストをより読みやすくするためにズームインしているので、フルラインが表示されませんが、アイデアが得られます。これがどのように見えるかです：

私たちの技術的な議論は会話なので、注意してください。私は誰にも完璧な答えを期待していません。正しいキーワードを聞いたら、候補者が概念を知っていることを知っており、それらを正しい方向に押し込もうとします。

1行目：

すべてのドキュメントのソースコードの最初の行は、このインタビューに最適です。なぜなら、候補者がDoctype宣言についてどれだけ知っているかが、彼らが何年の経験を持っているかに非常に似ているからです。 2009年の彼の記事「The Common Doctypes」にリストされているChrisのような、長いXHTML DoctypeラインでのDreamWeaverの日を今でも覚えています。

完璧な答え：これは、HTMLファイルの最初の行として常に配置するドキュメントタイプ（doc-type）宣言です。ブラウザは、応答のMIMEタイプがテキスト/HTMLであることをブラウザがすでに知っているため、この情報は冗長だと思うかもしれません。しかし、Netscape/Internet Explorerの時代には、ブラウザは、複数の競合バージョンからページをレンダリングするために使用するHTML標準を把握するという難しい作業を持っていました。

各標準が異なるレイアウトを生成したため、このタグを採用してブラウザを簡単にするために、これは特に迷惑でした。以前は、Doctypeタグは長く、仕様リンク（SVGSが今日持っているような種類）も含まれていましたが、幸運なことに、単純なはHTML5に標準化されており、今でも生き続けています。

また、受け入れられます：これは、これがHTML5ページであり、そのようにレンダリングする必要があることをブラウザに知らせるためのDoctypeタグです。

行2：

ソースコードのこの行は、候補者がアクセシビリティとローカリゼーションについて知っているかどうかを教えてくれます。驚いたことに、私のインタビューでdir属性について知っていたのは数人しかいませんでしたが、それはスクリーンリーダーについての議論への素晴らしいセグエです。ほとんどすべての人が、以前に使用したことがなかったとしても、Lang = "en"属性を把握することができました。

完璧な答え：これはHTMLドキュメントのルート要素であり、他のすべての要素はこれの内側にあります。ここには、方向と言語の2つの属性があります。方向属性には、コンテンツがどの方向にあるかをユーザーエージェントに伝えるための左から右の値があります。他の値は、アラビア語のような言語の場合、または単にブラウザに残して把握するために左に左になります。

言語属性は、このタグ内のすべてのコンテンツが英語であることを示しています。たとえば、EN-USとEN-GBを区別するために、この値を任意の言語タグに設定できます。これは、スクリーンリーダーが発表する言語を知るのにも役立ちます。

行3：

完璧な答え：ソースコードのメタタグは、このドキュメントに関するメタデータを提供するためのものです。文字セット（Char-Set）属性は、使用する文字エンコードをブラウザに伝え、Twitterは標準のUTF-8エンコードを使用します。 UTF-8は、多くの文字ポイントがあるため、ソースコードであらゆる種類のシンボルと絵文字を使用できます。このタグをコードの先頭に置くことが重要です。そうすれば、ブラウザがこの行に出くわしたときにあまりテキストを解析し始めていません。ルールは、ドキュメントの最初のキロバイトにそれを置くことだと思いますが、ベストプラクティスは

の一番上に置くことだと思います。

サイドノートとして、Twitterはパフォーマンス上の理由（ロードするコードが少ない）で

タグを省略しているように見えますが、すべてのメタデータ、スタイルなどの明確な家であるため、私はそれを明示的にするのが好きです。

行4：

完璧な答え：ソースコードのこのメタタグは、スマートフォンのような小さな画面上のWebページを適切にサイジングするためのものです。元のiPhoneの基調講演を覚えている場合、Steve Jobsは、その小さな4.5インチの画面にニューヨークタイムズ全体のウェブサイト全体を示しました。当時は、実際に読むことができるようにズームするためにピンチしなければならなかった驚くべき機能でした。

Webサイトが設計によって応答された今、width = device-widthはブラウザにデバイスの幅の100％をビューポートとして使用するように指示します。標準的なベストプラクティスは、初期スケールを1に設定し、幅をデバイス幅に設定して、必要に応じて人々が引き続きズームすることができるようにすることです。

ソースコードのスクリーンショットはこれらの値を表示しませんが、知っておくと良いことです。Twitterは、ユーザースケーラブル= 0を適用します。これは、名前が示すように、ズームする能力を無効にします。これはアクセシビリティには適していませんが、Webページをネイティブアプリのように感じさせます。また、同じ理由で最大スケール= 1を設定します（これらの値間のズームアブリティをクランプするには、最小スケールと最大スケールを使用できます）。一般に、全幅と初期スケールを設定するだけで十分です。

5行目：

すべての候補者の約50％がオープングラフタグについて知っていましたが、この質問に対する良い答えは、彼らがSEOについて知っていることを示しています。

完璧な回答：このタグは、サイト名、Twitterのオープングラフ（OG）メタタグです。オープングラフプロトコルは、Facebookによって作成され、リンクを広げてプレビューを素敵なカードレイアウトで表示しやすくしました。開発者は、あらゆる種類の著者の詳細を追加し、派手な共有のために画像をカバーできます。実際、最近では、操り人形師のようなものを使用して、開いたグラフ画像を自動生成することさえ一般的です。 （CSS-Tricksは、それを行うWordPressプラグインを使用しています。）

もう1つの興味深いサイドノートは、メタタグには通常名前属性があることですが、OGは非標準プロパティ属性を使用します。 FacebookだけがFacebookだと思いますか？タイトル、URL、および説明オープングラフタグは、これらの通常のメタタグをすでに持っているため、ちょっと冗長ですが、人々はそれらを安全に追加します。最近のほとんどのサイトでは、オープングラフと他のメタタグとページ上のコンテンツの組み合わせを使用して、リッチなプレビューを生成しています。

6行目：

ほとんどの候補者はこれについて知りませんでしたが、経験豊富な開発者は、Apple-Touch-IconsやSafariピン留めタブSVGなど、Appleデバイス用のWebサイトを最適化する方法について話すことができます。

完璧な答え： iPhoneのホーム画面にWebサイトをピン留めして、ネイティブアプリのように感じることができます。 SafariはプログレッシブWebアプリをサポートしておらず、iOSで他のブラウザエンジンを実際に使用することはできないため、もちろんTwitterが気に入っているネイティブのようなエクスペリエンスが必要な場合、他のオプションはありません。したがって、彼らはこれを追加して、このアプリのタイトルがTwitterであることをSafariに伝えます。次の行は似ており、アプリが起動したときにステータスバーがどのように見えるかを制御します。

8行目：

完璧な答え：これは、Apple Status Bar Color Metaタグに相当する適切なWeb標準であることです。ブラウザに周囲のUIをテーマにするように指示します。 AndroidのChromeとDesktopのBraveは、それでかなり良い仕事をしています。任意のCSS色をコンテンツに配置することもでき、メディア属性を使用して、たとえば、暗いテーマをサポートするために特定のメディアクエリにこの色のみを表示することもできます。 Webアプリのマニフェストでこれと追加のプロパティを定義することもできます。

9行目：

私がインタビューした人は誰もこれについて知りませんでした。標準のトラックで起こっているすべての新しいことについて詳細な知識がある場合にのみ、これを知っていると思います。

完璧な回答： Originの試行当社のサイトで新しい実験機能を使用してください。フィードバックはユーザーエージェントによって追跡され、ユーザーが機能フラグにオプトインすることなくWeb標準コミュニティに報告されます。たとえば、Edgeには、デュアルスクリーンと折りたたみ可能なデバイスプリミティブのオリジントライアルがあります。これは、折りたたみ式の電話が開閉するか閉じているかに基づいて興味深いレイアウトを作成できるため、かなりクールです。

また受け入れられました：私はこれについて知りません。

10行目：html {-ms-text-size-adjust：100％; - webkit-text ...

これについてもほとんど知りませんでした。 CSSエッジのケースと最適化について知っている場合にのみ、この行を把握できるようになります。

完璧な答え：モバイルレスポンシブサイトがなく、小さな画面でそれを開くと想像してみてください。そのため、ブラウザはテキストをサイズ変更して、読みやすくするためにテキストを大きくする可能性があります。 CSS Text-Size-Adjustプロパティは、この機能を値なしで無効にするか、ブラウザがテキストを大きくすることが許可されている割合を指定できます。

この場合、Twitterによると、最大値は100％であるため、テキストは実際のサイズよりも大きくないはずです。彼らのサイトはすでに応答性があり、ブラウザがより大きなフォントサイズでレイアウトを破るリスクを冒したくないので、彼らはそれをします。これは、ルートHTMLタグに適用されるため、内部のすべてに適用されます。これは実験的なCSSプロパティであるため、ベンダーのプレフィックスが必要です。また、このCSSの前には

また、受け入れられます：私はこのプロパティについて具体的には知りませんが、-msと-webkit-は、それぞれ標準のプロパティでは、それぞれインターネットエクスプローラーとWebKitベースのブラウザが必要とするベンダープレフィックスです。以前は、CSS3が発売されたときにこれらのプレフィックスを必要としていましたが、プロパティが実験的から安定性に移行するか、標準トラックに採用されると、これらのプレフィックスは標準化されたプロパティを支持して消えます。

ボーナス - 11行目：ボディ{マージン：0;}

Twitterのソースコードからのこの行は、Webページのリセットと正規化の違いに関する質問をフォローアップできるため、特に楽しいです。ほとんどの人が正しい答えのバージョンを知っていました。

完璧な答え：異なるブラウザには異なるデフォルトスタイル（ユーザーエージェントスタイルシート）があるため、プロパティをリセットして、デバイス間でサイトが同じように見えるようにプロパティをリセットして上書きします。この場合、TwitterはブラウザにBody Tagのデフォルトマージンを削除するように指示しています。これは、ブラウザの不一致を減らすためだけですが、スタイルをリセットするのではなく、スタイルを正規化すること、つまり、ブラウザを完全に削除するのではなく、同じデフォルトを適用することを好みます。人々は * {マージン：0}を使用していましたが、これは完全に過剰であり、パフォーマンスには優れていませんが、今ではremormize.cssまたはreset.css（または新しいもの）などをインポートしてそこから開始することも一般的です。

もっとライン！

私は常にブラウザインスペクターツールで遊ぶことを楽しんでおり、サイトの作成方法を確認します。これがこのアイデアを思いついた方法です。私は自分自身がセマンティックHTMLの専門家だと考えていますが、この演習を行うたびに何か新しいことを学びます。

Twitterは主にクライアント側のReactアプリであるため、ソースコードには数十行しかありません。それでも、学ぶべきことがたくさんあります！ Twitterソースコードには、私があなたのために練習として残している読者として、さらに興味深い行がいくつかあります。それらのうち何人がインタビューで説明できますか？

 <link rel="search" type="application/opensearchdescription xml" href="/opensearch.xml" title="twitter">

…ユーザーがTwitterを検索エンジンとして追加できることをブラウザに伝えます。

 <link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="mguyztiyn2itmdmdm1zc00mze5lwe2mtg2mdu

…議論できる多くの興味深い属性、特にNonceがあります。

 <link rel="代替" hreflang="x-default" href="https://twitter.com/">

…国際的なランディングページの場合。

 ：focus：not（[data-focusvisible-lyfill]）{outline：none;}

…キーボードナビゲーションを使用しないときにフォーカスアウトラインを削除するため（CSS：Focus-Visibleセレクターはここではポリフィージーされています）。

以上がTwitterの最初の10行を私に説明してくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。