Erklären Sie mir die ersten 10 Zeilen von Twitters Quellcode

In den letzten Wochen habe ich bei meinem Mietmöbelunternehmen Pabio für einen hochrangigen JavaScript-Ingenieur in meinem Rental Furniture Company eingestellt. Da wir ein abgelegenes Team sind, führen wir unsere Interviews zu Zoom durch und ich habe festgestellt, dass einige Entwickler nicht großartig in Live-Coding- oder Whiteboard-Interviews sind, auch wenn sie gut im Job sind. Stattdessen führen wir eine einstündige technische Diskussion, in der ich ihnen Fragen zu Web-Vitals, Barrierefreiheit, den Browserkriegen und anderen ähnlichen Themen zum Web stelle. Eine der Fragen, die ich immer gerne stelle, ist: „Erklären Sie mir die ersten zehn Zeilen des Twitter -Quellcode.“

Ich denke, es ist ein einfacher Test, der mir viel über die Tiefe des grundlegenden Front-End-Wissens erzählt, das sie haben, und in diesem Artikel sind die besten Antworten aufgeführt.

Für den Kontext teile ich meinen Bildschirm, öffne Twitter.com und klicke auf Quelle anzeigen . Dann bitte ich sie, Linie für Linie zu gehen, um mir das HTML zu verstehen, und sie können so viel oder so wenig sagen, wie sie möchten. Ich zoomen auch, um den Text lesbarer zu machen, sodass Sie nicht die gesamte Zeile sehen, aber Sie erhalten eine Idee. So sieht es aus:

Beachten Sie, dass seit unserer technischen Diskussion ein Gespräch ist. Ich erwarte von niemandem eine perfekte Antwort. Wenn ich einige richtige Schlüsselwörter höre, weiß ich, dass der Kandidat das Konzept kennt, und ich versuche, sie in die richtige Richtung zu drücken.

Zeile 1:

Die erste Zeile des Quellcode des Dokuments ist perfekt für dieses Interview, da ein Kandidat über die DocType -Erklärung weiß, wie viele Jahre Erfahrung er hat. Ich erinnere mich noch an meine Dreamweaver -Tage mit der langen XHTML -DOCTYPE -Linie, wie Chris in seinem Artikel „The Common DocTypes“ aus dem Jahr 2009 aufgeführt.

Perfekte Antwort: Dies ist die Erklärung des Dokumenttyps (DOC-Typ), die wir immer als erste Zeile in HTML-Dateien eingeben. Sie könnten denken, dass diese Informationen überflüssig sind, da der Browser bereits weiß, dass der MIME -Typ der Antwort Text/HTML ist. In den Tagen von NetScape/Internet Explorer hatten Browser jedoch die schwierige Aufgabe, herauszufinden, welchen HTML -Standard die Seite von mehreren konkurrierenden Versionen rendern soll.

Dies war besonders ärgerlich, da jeder Standard ein anderes Layout erzeugte, sodass dieses Tag angewendet wurde, um den Browsern leicht zu machen. Zuvor waren DocType -Tags lang und sogar den Spezifikations -Link (ein bisschen wie SVGs heute), aber zum Glück war das einfache in HTML5 standardisiert und lebt immer noch weiter.

Ebenfalls akzeptiert: Dies ist das DocType -Tag, mit dem der Browser informiert wird, dass dies eine HTML5 -Seite ist und als solche gerendert werden sollte.

Zeile 2:

Diese Zeile im Quellcode sagt mir, ob der Kandidat über Barrierefreiheit und Lokalisierung kennt. Überraschenderweise wussten nur wenige Leute in meinen Interviews über das Dir -Attribut, aber es ist ein großartiger Überblick über eine Diskussion über Screen -Leser. Fast jeder konnte das Attribut von Lang = "en" herausfinden, auch wenn sie es vorher nicht benutzt hatten.

Perfekte Antwort: Dies ist das Root -Element eines HTML -Dokuments und alle anderen Elemente befinden sich in diesem. Hier hat es zwei Attribute, Richtung und Sprache. Das Richtungsattribut hat den Wert von links nach rechts, um den Benutzeragenten mitzuteilen, in welcher Richtung sich der Inhalt befindet. Andere Werte sind für Sprachen wie Arabisch oder nur ein Auto, was es dem Browser überlässt, um herauszufinden.

Das Sprachattribut sagt uns, dass alle Inhalte in diesem Tag in englischer Sprache sind. Sie können diesen Wert auf jedes Sprach-Tag festlegen, um beispielsweise En-US und EN-GB zu unterscheiden. Dies ist auch für Bildschirmleser nützlich, um zu wissen, in welcher Sprache Sie sich ankündigen sollen.

Zeile 3:

Perfekte Antwort: Das Meta -Tag im Quellcode dient zur Lieferung von Metadaten zu diesem Dokument. Das Charakter-Set (char-set) -Merkmal teilt dem Browser mit, das die Zeichenkodierung verwendet werden soll, und Twitter verwendet die Standard-UTF-8-Codierung. UTF-8 ist großartig, da es viele Charakterpunkte hat, sodass Sie alle möglichen Symbole und Emoji in Ihrem Quellcode verwenden können. Es ist wichtig, dieses Tag in die Nähe des Beginns Ihres Codes zu setzen, damit der Browser noch nicht zu viel Text analysiert hat, wenn er auf diese Zeile stößt. Ich denke, die Regel lautet, sie in die erste Kilobyte des Dokuments zu setzen, aber ich würde sagen, dass die beste Praxis darin besteht, sie ganz oben auf

zu stellen.

Als Randnotiz sieht es so aus, als würde Twitter das -Tag aus Leistungsgründen (weniger Code zum Laden) weglassen, aber ich mag es immer noch, es explizit zu machen, da es für alle Metadaten, Stile usw. ein klares Zuhause ist.

Zeile 4:

Die meisten Kandidaten wussten nichts davon, aber erfahrene Entwickler können darüber sprechen, wie sie eine Website für Apple-Geräte wie Apple-Touch-Icons und Safari-Pastet Tab SVGs optimieren können.

Perfekte Antwort: Sie können eine Website auf dem Homescreen eines iPhone festlegen, damit es sich wie eine native App anfühlt. Safari unterstützt progressive Web-Apps nicht und Sie können andere Browser-Engines auf iOS nicht wirklich verwenden. Sie haben also keine anderen Optionen, wenn Sie diese native Erfahrung möchten, die Twitter natürlich mag. Sie fügen dies hinzu, um Safari zu sagen, dass der Titel dieser App Twitter ist. Die nächste Zeile ist ähnlich und steuert, wie die Statusleiste beim Start der App aussehen sollte.

Zeile 8:

Perfekte Antwort: Dies ist das richtige Web-Standards-Äquivalent zum Apple Status Bar Color META-Tag. Es sagt dem Browser, die umliegende Benutzeroberfläche zu thematisieren. Chrome auf Android und mutig auf dem Desktop machen beide einen ziemlich guten Job damit. Sie können jede CSS -Farbe in den Inhalt einfügen und sogar das Medienattribut verwenden, um diese Farbe nur für eine bestimmte Medienabfrage anzuzeigen, beispielsweise, um ein dunkles Thema zu unterstützen. Sie können diese und zusätzliche Eigenschaften im Web -App -Manifest auch definieren.

Zeile 9: <link rel="such" type="application/openSearchDescription xml" href="/openSearch.xml" title="Twitter"> </h3> <p> … Teilt Browsern an, dass Benutzer Twitter als Suchmaschine hinzufügen können.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="HTML" data-line=""> <link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce><p> … Hat viele interessante Attribute, die diskutiert werden können, insbesondere Nonce.</p><pre rel="HTML" data-line=""> <link rel="alternate" hreflang="xdefault" href="https://twitter.com/">

Nach dem Login kopieren

… Für internationale Landing -Seiten.

 : fokus: nicht ([datenfokussiv-polyfill]) {Umriss: Keine;}

… Zum Entfernen des Fokusrisss bei der Nichtverwendung der Tastaturnavigation (CSS: FOCUS-SISIBLE-Selektor ist hier polyfillt).

Das obige ist der detaillierte Inhalt vonErklären Sie mir die ersten 10 Zeilen von Twitters Quellcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!