My understanding of the first 10 lines of source code for Twitter

Author | Anand Chowdhary

Translated by | Hirakawa

Planning | Chu Xingjuan

This article was originally published on the CSS-Tricks blog and translated and shared by InfoQ Chinese.

For the past few weeks, I've been hiring a senior full-stack JavaScript engineer for my furniture rental company, Pabio. Because it's a remote team, the interview is conducted on Zoom. From my observations, some developers aren't good at live coding or whiteboard interviews, even if they're good at the job. So instead, we'll have a one-hour technical discussion, and I'll ask them questions about Web Vitals, accessibility, browser wars, and other similar Web topics. One question I like to ask is, "Explain the first dozen lines of Twitter's source code."

I think it's a very simple test to get an idea of how well a candidate has mastered the basics of the front end. This article lists the best answers to this question.

Note that since our technical discussion is a kind of conversation, I don't expect anyone to give a perfect answer. As soon as I hear some of the right keywords, I know that candidates understand the concept and I try to steer them in the right direction.

1

Line 1:

The first line of each source code document is a good fit for this interview, as the candidate's knowledge of the DOCTYPE statement is closely related to their years of service. I still remember that in the Dreamweaver era, XHTML DOCTYPE lines were long, as Chris wrote in his 2009 article "Common DOCTYPEs."

Best Answer: This is the doc-type declaration, which we always put on the first line of an HTML file. You might think this information is redundant because browsers already know that the MIME type of response is text/html; but in the Netscape/Internet Explorer era, it was a difficult task for browsers to figure out which HTML standard to use to render a page from multiple competing versions.

This is especially annoying because each standard produces a different layout, so this tab was used to make it easier for browsers to judge. Previously, the DOCTYPE tag was long, even including canonical links (a bit like SVG today), but fortunately, it was standardized in HTML5 and continued.

Also acceptable: the DOCTYPE tag tells the browser that this is an HTML5 page and should be rendered like this.

2

Line 2:

This line of code tells me if the candidate understands accessibility and localization issues. Surprisingly, in my interviews, only a handful of people knew about the DIR attribute, but that's a great entry point to discuss screen readers. Almost everyone can say the lang="en" attribute clearly, even if they haven't used it before.

Best Answer: This is the root element of the HTML document, and all other elements are wrapped in this element. It has two properties: direction and language. The value of the direction property is left-to-right, which tells the browser the direction of the proxy content; another value is right-to-left, for languages like Arabic, or auto, leaving the browser to decide for itself.

The language attribute tells us that everything in this tag is in English; you can set this value to any language, and even distinguish between en-us and en-gb. This is also useful for screen readers to know in which language to broadcast.

3

Line 3:

Best Answer: The meta tags in the source code are used to provide metadata about the file. The char-set property tells the browser which character encoding to use, while Twitter uses the standard UTF-8 encoding. UTF-8 is great because it has a lot of character code points, so you can use various symbols and emoticons in the source code. It's important to put this label near the beginning of the code so that the browser doesn't parse too much text before it hits that line; I think it's possible to set a rule that is to put it in the first 1,000 bytes of the document, but I think the best thing to do is to put it just above it.

By the way, Twitter seems to have omitted tags for performance reasons (less code loaded), but I like to be well defined because it's home to all the metadata, styles, etc.

4

Line 4: meta name="viewport"

content="width=device-...

Best Answer: This meta tag in the source code is designed to size the web page appropriately on a small screen (such as a smartphone). If you remember the earliest iPhone keynote, Steve Jobs showed the entire New York Times website on that small 4.5-inch screen; at the time, it was an amazing feature that you had to pinch to zoom in to read.

Now, the design of the website is responsive, width=device-width tells the browser to use the entire width of the device as a viewport, so there are no horizontal scroll bars, but you can even specify the width using specific pixel values. In general, it's best practice to set the initial scale to 1 and the width to device-width, which allows people to still scale according to their needs.

There are also some values that are not shown in screenshots of the source code, but you'd better know: Twitter also applies user-scalable=, which, as the name suggests, disables the zoom function. This doesn't do much for accessibility, but makes the web page feel more like a native app. For the same reason, it also sets maxim-scale=1 (you can use minimum and maximum zoom factors, and limit the zoom capability with values in between). In general, setting the full width and initial zoom is sufficient.

5

Line 5:

content="Twitt...

About 50% of candidates know about the Open Graph tag, and if they answer this question well, it shows that they understand SEO.

Best Answer: This tag is the Open Graph (OG) meta tag for the site name Twitter. The Open Graph protocol was developed by Facebook to make links easier to open and display previews in a beautiful card layout; developers can add various copyright details and cover images for fancy sharing. In fact, it's now common to use things like Puppeteer to automatically generate Open Graph images. (CSS-Tricks uses a WordPress plugin to do this.) ）

Another interesting point to mention is that meta tags usually have a name attribute, but OGs use non-standard property attributes. I guess that's just a feature of Facebook. Titles, URLs, and descriptions of Open Graph tags are a bit redundant because we already have these regular meta tags, and people add them just for safety. Most websites today use Open Graph with other meta tags and content on the page to generate colorful previews.

6

Line 6:

account...

Most candidates don't know this, but experienced developers can talk about how to optimize the site for Apple devices, such as Apple-touch-icon and Safari fixed-tab SVG.

Best Answer: You can pin your website to your iPhone Home screen to make it feel like a native app. Safari doesn't support progressive web apps, and you can't use other browser engines on iOS, so if you want an experience similar to native, there's really no other option, and of course Twitter loves it. So they added this, telling Safari that the app's title was Twitter. The next line is similar to how the status bar appears after the application starts.

8

Line 8:

content="#ffffff"...

Best Answer: This is a web-compliant label equivalent to the Apple Status Bar color meta tag. It tells the browser what accent color to use in the surrounding UI. Chrome on Android and Brave on Desktop both do a great job of this. You can put any CSS color in your content, or even use media properties to display that color only for specific media queries, such as supporting dark themes. You can also define this and other properties in the web app manifest.

9

Line 9:

content="...

None of the people I've interviewed know this. I think you'll only know this if you have a deep understanding of all the new things that happen during the standardization phase.

Best Answer: Origin Experimentation allows us to use experimental new features on our website, track user agent feedback, and report it to the Web Standards Community without requiring users to opt in to a feature ID. For example, Edge has a origin experiment for dual-screen and foldable device primitives, which is pretty cool because you can set up interesting layouts based on whether the foldable phone is on or off.

Acceptable: I don't know about this.

10

第 10 行：html{-ms-text-size-adjust:100%;-webkit-text...

Almost no one knows this line; it can only be understood if you understand the edges and optimizations of CSS.

Best Answer: Imagine if there isn't a mobile responsive site, and when you open on a small screen, the browser might turn up the font to make it easier to read. CSS's text-size-adjust property can be disabled with a none value, or you can specify a percentage that allows the browser to make the font larger.

In this case, the maximum percentage set by Twitter is 100%, so the text won't be larger than the actual size; they do it because their site is already responsive, and they don't want to risk ruining the layout by making the browser turn up the font. It acts on the root HTML tag, so it acts on everything in the root tag. Because this is an experimental CSS property, a vendor prefix is required. Also, this line of CSS code was missing before, but I guess it was removed on the previous line, so we didn't see it.

Acceptable: I don't know much about this property, but -ms and -webkit- are vendor prefixes for non-standard properties, for Internet Explorer and WebKit-based browsers, respectively. When CSS3 first introduced, we needed these prefixes, but when the properties went from experimental to stable or adopted into the standard, the prefixes disappeared and people switched to standardized properties.

11

Windfall – Line 11: body

This line in the Twitter source code is particularly interesting because you can follow up on the question of what is the difference between a web page reset and normalization. Almost everyone has a version of the correct answer.

Best Answer: Different browsers have different default styles (user-agent style sheets), and you want to override them by resetting attributes so that your website looks the same on different devices. In this case, Twitter tells the browser to remove the default margin of the body tag. This is just to reduce browser inconsistencies, but I prefer to normalize styles rather than reset them, that is, apply the same default values on different browsers rather than remove them altogether. People used to even use *{margin:}, which was completely overkill and not good for performance, but now, the common way is to import something like normalize.css or reset.css (or even something newer) and design on top of that.

12

More interesting code

I've always loved playing with browser checker tools to see how websites are made, and that's why I came up with this interview method. Although I consider myself an expert on semantic HTML, I learn something new every time I do.

Because Twitter is primarily a client-side React application, the source code is only a few dozen lines long. Even then there's a lot to learn! In Twitter's source code, there are some more interesting lines that I leave for the reader to practice. How many of them can you explain in an interview?

... Tell browser users to add Twitter as a search engine.

... There are many interesting properties to discuss, especially nonce.

... For international landing pages.

... Removes the focus outline when not navigating with the keyboard (here: the focus-visible selector is a CSS enhancement plugin).

https://css-tricks.com/explain-the-first-10-lines-of-twitter-source-code/?