向我解释Twitter源代码的前10行

在过去的几周中，我一直在我的租赁家具公司Pabio招聘高级全栈JavaScript工程师。由于我们是一支遥远的团队，因此我们在Zoom上进行采访，并且我观察到有些开发人员在现场编码或白板采访方面并不擅长，即使他们擅长工作。因此，相反，我们进行了一个一个小时的技术讨论，我向他们询问有关网络生命力，可访问性，浏览器战争以及有关网络的其他类似主题的问题。我一直想问的问题之一是： “向我解释Twitter源代码的前十行。”

我认为这是一个简单的测试，可以告诉我很多关于他们拥有的基本前端知识深度的信息，本文列出了最佳答案。

对于上下文，我共享屏幕，打开Twitter.com，然后单击“查看源” 。然后，我要求他们逐条排队，以帮助我理解HTML，他们可以说他们喜欢的话。我还放大了文本更清晰的文字，因此您看不到完整的行，但您会想到一个主意。这就是它的样子：

请注意，由于我们的技术讨论是对话。我不希望任何人得到完美的答案。如果我听到一些正确的关键字，我知道候选人知道这个概念，并且我试图将它们推向正确的方向。

第1行：

每个文档的源代码的第一行非常适合这次采访，因为候选人对Doctype声明的了解非常类似于他们拥有的经验。我仍然记得我在XHTML长期Doctype系列中的Dreamweaver时代，就像Chris在2009年的文章“ Common Doctypes”中所列出的那样。

完美答案：这是我们始终将其作为HTML文件中的第一行的文档类型（DOC-TYPE）声明。您可能会认为此信息是多余的，因为浏览器已经知道响应的MIME类型是文本/HTML。但是，在Netscape/Internet Explorer Days中，浏览器的艰巨任务是弄清楚使用哪种HTML标准来从多个竞争版本中呈现页面。

这尤其令人讨厌，因为每个标准都会产生不同的布局，因此采用此标签以使浏览器变得容易。以前，Doctype标签很长，甚至包括规格链接（如今像SVG一样），但是幸运的是，简单的在HTML5中标准化了，并且仍然存在。

也接受：这是Doctype标签，让浏览器知道这是一个HTML5页面，应该这样呈现。

第2行：

源代码中的这一行告诉我候选人是否知道可访问性和本地化。令人惊讶的是，只有少数人知道我的采访中的DIR属性，但这是一个关于屏幕读者的讨论的好问题。即使以前从未使用过它，几乎每个人都可以弄清楚lang =“ en”属性。

完美的答案：这是HTML文档的根元素，并且所有其他元素都在此中。在这里，它具有两个属性，方向和语言。方向属性具有从左到右的值来告诉用户代理内容所在的方向；对于阿拉伯语等语言，其他值是左转权，或者只是自动将其留在浏览器上以找出。

语言属性告诉我们，此标签中的所有内容均以英语为单位。例如，您可以将此值设置为任何语言标签，甚至可以区分EN-US和EN-GB。这对于屏幕阅读器知道要宣布哪种语言也很有用。

第3行：

完美答案：源代码中的元标记是为了提供有关此文档的元数据。字符集（char-set）属性告诉浏览器要使用的字符编码，Twitter使用标准的UTF-8编码。 UTF-8很棒，因为它具有许多字符点，因此您可以在源代码中使用各种符号和表情符号。重要的是要将此标签放在代码开头附近，以便浏览器遇到这一行时尚未开始解析过多的文本。我认为规则是将其放在文档的第一个千字节中，但我想说最好的做法是将其放在

的顶部。

附带说明，出于性能原因（减少加载代码），Twitter省略了Twitter，但我仍然喜欢明确，因为它是所有元数据，样式等的清晰住所。

第4行：

完美的答案：源代码中的此元标记是为了在小屏幕上（例如智能手机）上适当地尺寸。如果您还记得原始的iPhone主题演讲，史蒂夫·乔布斯（Steve Jobs）在那个小的4.5英寸屏幕上展示了整个《纽约时报》网站；那时，这是一个了不起的功能，您必须捏住才能真正阅读。

现在，网站可以通过设计响应，width =设备宽度告诉浏览器将设备宽度的100％用作视口，因此没有水平滚动，但您甚至可以为宽度指定特定的像素值。标准的最佳实践是将初始比例设置为1，将宽度设置为设备宽度，以便人们仍然可以放大。

源代码的屏幕截图并未显示这些值，但很高兴知道：Twitter还应用了用户量表= 0，该= 0，顾名思义，它可以禁用缩放功能。这对可访问性不利，但使网页感觉更像是本机应用程序。它还出于相同的原因还设置了最大尺度= 1（您可以使用最小和最大比例来限制这些值之间的缩放度）。通常，设置完整的宽度和初始规模就足够了。

第5行：

所有候选人中约有50％知道开放的图形标签，并且对这个问题的一个很好的答案表明，他们对SEO了解。

完美答案：此标签是网站名称Twitter的开放图（OG）元标记。 Facebook制作了打开的图形协议，以使其更容易解开链接并在不错的卡片布局中显示其预览；开发人员可以添加各种作者资格详细信息，并涵盖用于花式共享的图像。实际上，如今，使用像木偶器之类的东西自动生成开放式图像也很常见。 （CSS-Tricks使用可以执行此操作的WordPress插件。）

另一个有趣的旁注是，元标记通常具有名称属性，但是OG使用了非标准属性属性。我想那只是Facebook是Facebook吗？标题，URL和描述打开的图形标签有点冗余，因为我们已经有常规的元标记，但是人们添加了它们是为了安全的。如今，大多数站点都使用开放图和其他元数据以及页面上的内容来生成丰富的预览。

第6行：

大多数候选人对此一无所知，但是经验丰富的开发人员可以谈论如何优化Apple设备的网站，例如Apple-Touch-Icons和Safari固定的Tab SVGS。

完美的答案：您可以将网站固定在iPhone的HomeScreen上，以使其感觉像是本地应用程序。 Safari不支持渐进式网络应用程序，也不能真正使用iOS上的其他浏览器引擎，因此，如果您想要那种类似母语的经验，当然，您真的没有其他选择。因此，他们补充说，告诉Safari这个应用程序的标题是Twitter。下一行是相似的，并且控制了应用程序启动时的状态栏的外观。

第8行：

完美答案：这是适当的网络标准式等效的苹果状态棒彩色元标签。它告诉浏览器主题为周围的UI。 Chrome on Android上的Chrome and Brave on Desktop都做得很好。您可以将任何CSS颜色都放在内容中，甚至可以使用媒体属性仅显示此颜色的特定媒体查询，例如支持黑暗主题。您还可以在Web应用程序清单中定义此和其他属性。

第9行：

我采访的人没有人知道这一点。我认为，只有在您对标准轨道上发生的所有新事物有深入的了解时，您才知道这一点。

完美的答案：原始试验让我们在我们的网站上使用新的和实验性的功能，并且反馈由用户代理跟踪，并向Web标准社区报告，而无需用户选择输入功能标志。例如，Edge对双屏和可折叠设备原语的原始试验非常酷，因为您可以根据打开或关闭可折叠手机来制作有趣的布局。

也接受：我不知道这个。

第10行：html {-ms-text-size-udjust：100％; - webkit-text ...

几乎没有人也知道这一点。只有您了解CSS边缘案例和优化，您才能弄清楚这一行。

完美的答案：想象您没有移动响应网站，并且在小屏幕上打开它，因此浏览器可能会调整文本大小以使其更大，从而易于阅读。 CSS文本大小调整属性可以使用无值禁用此功能，也可以指定允许浏览器使文本更大的百分比。

在这种情况下，Twitter表示最大值为100％，因此文本不应大于实际尺寸。他们之所以这样做，是因为他们的网站已经响应迅速，他们不想冒险打破较大字体大小的布局。它应用于根HTML标签，因此它适用于其中的所有内容。由于这是实验性CSS属性，因此需要前缀。另外，在此CSS之前，还有一个缺少的

也接受：我不知道该属性的特定内容，但是-ms和-webkit-分别是Internet Explorer和基于WebKit的浏览器所需的供应商前缀，分别是非标准属性的。 CSS3出来时，我们曾经需要这些前缀，但是由于属性从实验到稳定或被采用到标准轨道时，这些前缀就消失了，而有利于标准化的属性。

奖励 - 第11行：身体{Margin：0;}

Twitter源代码的这一行特别有趣，因为您可以跟进有关重置和标准化网页之间差异的问题。几乎每个人都知道正确答案的版本。

完美的答案：由于不同的浏览器具有不同的默认样式（用户代理样式表），因此您想通过重置属性来覆盖它们，以使您的网站在设备之间看起来相同。在这种情况下，Twitter告诉浏览器删除车身标签的默认边距。这只是为了减少浏览器的不一致，但是我更喜欢将样式归一化而不是重置它们，即，在浏览器上应用相同的默认值，而不是完全删除它们。人们甚至曾经使用 * {margin：0}，这完全是过分的且不适合性能，但是现在导入andary.css或reset.css.css（甚至更新的东西）之类的东西是常见的，然后从那里开始。

更多行！

我总是喜欢使用浏览器检查员工具来查看网站的制作方式，这就是我想出这个想法的方式。即使我认为自己是语义HTML的专家，但每次进行此练习时，我都会学到一些新东西。

由于Twitter主要是客户端的React应用程序，因此源代码中只有几十行。即使这样，也有很多东西要学习！ Twitter源代码中还有一些有趣的行，我将作为读者为您提供练习。您可以在采访中解释一下他们中的多少人？

 <link rel="“" search type="“应用程序/openSearchDescription" xml href="%E2%80%9C/opensearch.xml%E2%80%9D" title="“" twitter>

…告诉浏览器，用户可以将Twitter添加为搜索引擎。

 <link rel="“" preload as="“" script crossorigin="“匿名”" href="%E2%80%9C" https:>

…有许多有趣的属性可以讨论，尤其是Nonce。

 <link rel="“替代”" hreflang="“" x-default href="%E2%80%9C" https:>

…用于国际着陆页。

 ：focus：不（[数据 - 可访问性polyfill]））{uterline：none;}

…在不使用键盘导航时删除焦点轮廓（CSS：焦点可见选择器在此处进行多填充）。

以上是向我解释Twitter源代码的前10行的详细内容。更多信息请关注PHP中文网其他相关文章！