This article was originally published on the CSS-Tricks blog, 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 . Due to being a remote team, interviews were conducted on Zoom. From what I have observed, some developers are not good at live coding or whiteboard interviews, even if they are good at the job. So instead, we’ll have an hour-long technical discussion and I’ll ask them questions about Web vitals, accessibility, browser wars, and other similar Web topics. One of my favorite questions is: ” Explain the first dozen lines of Twitter’s source code “.
I think it’s a simple test to see how well the candidate knows the basics of the front end. This article lists the best answers to this question.
I open up Twitter.com, click view source and share my screen, then ask them to explain line by line, as much as they want. I’ve zoomed in on the text to make it clearer, so you can’t see the entire line, but you can get an idea, like this:
Note that since our technical discussion is a conversation, I don’t expect perfect answers from anyone. As soon as I hear some of the right keywords, I know the candidate understands the concept and I try to steer them in the right direction.
Line 1: <!DOCTYPE html>
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 employment. I still remember that in the Dreamweaver days, XHTML DOCTYPE lines were long, as Chris wrote in his article ” Common DOCTYPEs ” back in 2009.
Best answer: This is the doc-type declaration, and we always put it on the first line of an HTML file. You might think this information is redundant, since the browser already knows that the MIME type of the response is text/html ; but in the days of Netscape/Internet Explorer , the browser had to figure out which HTML standard to use from multiple competing versions Rendering the page, which is a difficult task.
This is especially annoying because each standard produces a different layout, so this tag is adopted to make it easier for browsers to judge. Previously, DOCTYPE tags were long and even included canonical links (sort of like SVG today), but luckily, <!doctype html> was standardized in HTML5 and carried over.
Also acceptable: The DOCTYPE tag tells the browser that this is an HTML5 page and should be rendered as such.
Line 2: <html dir="ltr" lang="en">
This line of code tells me if the candidate understands accessibility and localization issues. Surprisingly, in my interviews, only a few people knew about the dir attribute, but it was a good entry point for discussing screen readers. Almost everyone can articulate lang="en" attribute, even if they haven’t used it before.
Best answer: This is the root element of the HTML document, and all other elements are enclosed within this element. It has two properties: orientation and language. The value of the orientation attribute is left-to-right, which tells the browser to proxy the content direction; another value is right-to-left, for languages like Arabic, or auto , which lets the browser decide for itself.
The language attribute tells us that everything in this tag is in English; you can set this value to any language, even distinguishing between en-us and en-gb . It’s also useful for screen readers to know which language to broadcast in.
Line 3: <meta charset="utf-8">
Best answer: Meta tags in the source code are used to provide metadata about the file. The char-set attribute tells the browser which character encoding to use, and Twitter uses the standard UTF-8 encoding. UTF-8 is nice because it has a lot of character code points, so you can use all kinds of symbols and emojis in your source code. It’s important to put this tag near the beginning of the code so that the browser doesn’t parse too much text before it encounters this line; I think a rule like this would be to put it in the first 1000 of the document bytes, but I think it’s best to put it right above the <head> .
By the way, Twitter seems to omit the <head> tag for performance reasons (less code to load), but I still like to be clearly defined since it’s home to all the metadata, styles, etc.
Line 4: <meta name="viewport" content="width=device-...
Best answer: This meta tag in the source code is for proper resizing of web pages on small screens (like smartphones). If you remember the earliest iPhone keynote, Steve Jobs showed off the entire New York Times website on that tiny 4.5-inch screen; back then, it was a terrific feature that you had to pinch to zoom in read.
Now that the site is designed to be responsive, width=device-width tells the browser to use the full width of the device as the viewport, so there is no horizontal scrollbar, but you can even specify the width in specific pixels. In general, the best practice is to set the initial scale to 1 and the width to device-width , which allows people to still scale to their needs.
There are also some values that aren’t shown in the source code screenshots, but you’d better know: Twitter also applies user-scalable=0 , which, as the name suggests, disables zooming. 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 maximum-scale=1 (you can use a minimum and maximum scaling, and use a value in between to limit the scaling ability). In general, setting the full width and initial scaling is sufficient.
Line 5: <meta property="og:site_name" content="Twitt...
About 50% of candidates know the Open Graph tag, and if they answer this question well, they know SEO.
Best answer: This tag is the Open Graph (OG) meta tag for the website 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. And in fact, it’s pretty common now to use something 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 OG uses a non-standard property attribute. I guess it’s just a Facebook feature. The title, URL and description Open Graph tags are a bit redundant since we already have these regular meta tags and people add them just to be safe. Most websites today use Open Graph with other meta tags and content on the page to generate colorful previews.
Line 6: <meta name="apple-mobile-web-app-title" cont...
Most candidates don’t know this, but experienced developers can talk about optimizing websites for Apple devices, such as apple-touch-icon and Safari fixed-tab SVG.
Best answer: You can pin a 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 a native-like experience, there’s really no other option, which Twitter loves, of course. So they added this to tell Safari that the title of the app is Twitter. The next line is similar and controls how the status bar is displayed after the application starts.
Line 8: <meta name="theme-color" content="#ffffff"...
Best answer: This is a web-standards equivalent of the Apple status bar color meta tag. It tells the browser what theme color to use around the UI . Chrome on Android and Brave on Desktop both do this well. You can put any CSS color in the content, and even use the media attribute to display that color only for specific media queries, such as dark theme support. You can also define this and other properties in the web application manifest.
Line 9: <meta http-equiv="origin-trial" content="...
No one I interviewed knew about this. I guess this is only known if you have a solid understanding of all the new things that happen in the standardization phase.
Best answer: Origin trials allow us to use experimental new features on our website, track user agent feedback, and report back to the web standards community without requiring users to opt in to a feature flag. Edge, for example, has an origin experiment for dual-screen and foldable device primitives, which is pretty cool because you can have interesting layouts based on whether the foldable phone is open or closed.
Also acceptable: this I don’t know.
Line 10: html{-ms-text-size-adjust:100%;-webkit-text...
Few people know this line; it’s only understandable when one understands CSS edge cases and optimizations.
Best answer: Imagine if you didn’t have a mobile responsive site, then when you open it on a small screen, the browser might make the font bigger to make it easier to read. The CSS text-size-adjust property can be disabled with a value of none , or a percentage can be specified to allow the browser to adjust the font size.
In this case, Twitter sets a max scale of 100% so the text doesn’t get bigger than it actually is; they do this because their site is already responsive and they don’t want to risk breaking the layout by making the browser bigger risk. It acts on the root HTML tag, so it acts on everything in the root tag. Since this is an experimental CSS property, the vendor prefix is required. Also, the <style> is missing before this line of CSS, but I guess it was removed on the previous line, so we don’t see it.
Also acceptable: I’m not particularly aware of this attribute, but -ms and -webkit- are vendor prefixes for non-standard attributes, targeting Internet Explorer and WebKit-based browsers, respectively. We needed these prefixes when CSS3 was first introduced, but when properties went from experimental to stable or adopted into the standard, these prefixes disappeared and people moved to standardized properties.
Bonus – line 11: body{margin:0;}
This line in the Twitter source code is especially interesting because you can follow up with a question about what’s the difference between a page reset and canonicalization. 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 properties so that the site looks the same on different devices. In this case, Twitter tells the browser to remove the default margins of the body tag. This is just to reduce browser inconsistency, but I prefer to normalize styles rather than reset them, i.e. apply the same defaults on different browsers, rather than remove them entirely. People even used to use * { margin: 0 } , which was totally overkill and not good for performance, but now, the common way is to import something like normalize.css or reset.css ( even an updated one ) and have it in Design on this basis.
more interesting code
I’ve always enjoyed playing with the browser’s inspector tool and seeing how websites are made, and that’s why I came up with this interview method. Although I consider myself an expert in semantic HTML, I learn something new every time I do this.
Because Twitter is primarily a client-side React application, the source code is only a few dozen lines. Even so, there is still a lot to learn! There are a few more interesting lines in Twitter’s source code, which I leave as an exercise for the reader. How many of these can you explain in an interview?
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter">
…tells browser users that they can add Twitter as a search engine.
<link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1" / >
…there are many interesting properties to discuss, especially nonce .
<link rel="alternate" hreflang="x-default" href="https://twitter.com/" />
…for international landing pages.
:focus:not([data-focusvisible-polyfill]){outline: none;}
…remove the focus outline when not navigating with the keyboard (the :focus-visible selector here is a CSS enhancement).
Original link:
Explain the First 10 Lines of Twitter’s Source Code to Me
The text and pictures in this article are from InfoQ
This article is reprinted from https://www.techug.com/post/my-understanding-of-the-first-10-lines-of-twitter-source-code.html
This site is for inclusion only, and the copyright belongs to the original author.