For the previous few weeks, I’ve been hiring for a senior full-stack JavaScript engineer at my rental furnishings firm, Pabio. Since we’re a distant workforce, we conduct our interviews on Zoom, and I’ve noticed that some builders are usually not nice at live-coding or whiteboard interviews, even when they’re good on the job. So, as an alternative, we’ve got an hour-long technical dialogue the place I ask them questions on internet vitals, accessibility, the browser wars, and different related subjects in regards to the internet. One of many questions I at all times prefer to ask is: “Clarify the primary ten or so traces of the Twitter supply code to me.”
I feel it’s a easy take a look at that tells me loads in regards to the depth of basic front-end information they’ve, and this text lists the most effective solutions.
For context, I share my display screen, open Twitter.com and click on View supply. Then I ask them to go line-by-line to assist me perceive the HTML, and so they can say as a lot or as little as they like. I additionally zoom in to make the textual content extra legible, so that you don’t see the complete line however you get an thought. Right here’s what it appears to be like like:
Word that since our technical dialogue is a dialog. I don’t count on an ideal reply from anybody. If I hear some proper key phrases, I do know that the candidate is aware of the idea, and I attempt to push them in the best path.
Line 1: <!DOCTYPE html>
The primary line of each doc’s supply code is the proper for this interview as a result of how a lot a candidate is aware of in regards to the DOCTYPE declaration carefully resembles what number of years of expertise they’ve. I nonetheless keep in mind my Dreamweaver days with the lengthy XHTML DOCTYPE line, like Chris listed in his article “The Frequent DOCTYPES” from 2009.
Good reply: That is the doc kind (doc-type) declaration that we at all times put as the primary line in HTML information. You may assume that this info is redundant as a result of the browser already is aware of that the MIME kind of the response is textual content/html; however within the Netscape/Web Explorer days, browsers had the tough process of determining which HTML normal to make use of to render the web page from a number of competing variations.
This was particularly annoying as a result of every normal generated a distinct structure so this tag was adopted to make it straightforward for browsers. Beforehand, DOCTYPE tags have been lengthy and even included the specification hyperlink (kinda like SVGs have right now), however fortunately the straightforward <!doctype html> was standardized in HTML5 and nonetheless lives on.
Additionally accepted: That is the DOCTYPE tag to let the browser know that that is an HTML5 web page and ought to be rendered as such.
Line 2: <html dir=”ltr” lang=”en”>
This line within the supply code tells me if the candidate is aware of about accessibility and localization. Surprisingly, only some folks knew in regards to the dir attribute in my interviews, but it surely’s an awesome segue right into a dialogue about display screen readers. Virtually everybody was in a position to determine the lang=”en” attribute, even when they haven’t used it earlier than.
Good reply: That is the foundation ingredient of an HTML doc and all different parts are inside this one. Right here, it has two attributes, path and language. The path attribute has the worth left-to-right to inform consumer brokers which path the content material is in; different values are right-to-left for languages like Arabic, or simply auto which leaves it to the browser to determine.
The language attribute tells us that every one content material inside this tag is in English; you’ll be able to set this worth to any language tag, even to distinguish en-us and en-gb, for instance. That is additionally helpful for display screen readers to know which language to announce in.
Line 3: <meta charset=”utf-8″>
Good reply: The meta tag within the supply code is for supplying metadata about this doc. The character set (char-set) attribute tells the browser which character encoding to make use of, and Twitter makes use of the usual UTF-8 encoding. UTF-8 is nice as a result of it has many character factors so you should utilize all kinds of symbols and emoji in your supply code. It’s necessary to place this tag close to the start of your code so the browser hasn’t already began parsing an excessive amount of textual content when it comes throughout this line; I feel the rule is to place it within the first kilobyte of the doc, however I’d say the most effective apply is to place it proper on the high of <head>.
As a aspect observe, it appears to be like like Twitter omits the <head> tag for efficiency causes (much less code to load), however I nonetheless prefer to make it specific because it’s a transparent dwelling for all metadata, types, and many others.
Line 4: <meta title=”viewport” content material=”width=device-…
Good reply: This meta tag within the supply code is for correctly sizing the webpage on small screens, like smartphones. If you happen to keep in mind the unique iPhone keynote, Steve Jobs confirmed your complete New York Instances web site on that tiny 4.5-inch display screen; again then it was a tremendous characteristic that you simply needed to pinch to zoom to truly be capable of learn.
Now that web sites are responsive by design, width=device-width tells the browser to make use of 100% of the machine’s width because the viewport so there’s no horizontal scrolling, however you’ll be able to even specify particular pixel values for width. The usual finest apply is to set the preliminary scale to 1 and the width to device-width so folks can nonetheless zoom round if they want.
The screenshot of the supply code doesn’t present these values but it surely’s good to know: Twitter additionally applies user-scalable=0 which, because the title suggests, disables the flexibility to zoom. This isn’t good for accessibility however makes the webpage really feel extra like a local app. It additionally units maximum-scale=1 for a similar cause (you should utilize minimal and most scale to clamp the zoom-ablity between these values). Usually, setting the complete width and preliminary scale is sufficient.
Line 5: <meta property=”og:site_name” content material=”Twitt…
About 50% of all candidates knew about Open Graph tags, and an excellent reply to this query exhibits that they find out about website positioning.
Good reply: This tag is an Open Graph (OG) meta tag for the location title, Twitter. The Open Graph protocol was made by Fb to make it simpler to unfurl hyperlinks and present their previews in a pleasant card structure; builders can add all kinds of authorship particulars and canopy photos for fancy sharing. In reality, nowadays it’s even widespread to auto-generate the open graph picture utilizing one thing like Puppeteer. (CSS-Methods makes use of a WordPress plugin that does it.)
One other attention-grabbing aspect observe is that meta tags often have the title attribute, however OG makes use of the non-standard property attribute. I assume that’s simply Fb being Fb? The title, URL, and outline Open Graph tags are kinda redundant as a result of we have already got common meta tags for these, however folks add them simply to be protected. Most websites nowadays use a mix of Open Graph and different metatags and the content material on a web page to generate wealthy previews.
Line 6: <meta title=”apple-mobile-web-app-title” cont…
Most candidates didn’t find out about this one, however skilled builders can discuss methods to optimize a web site for Apple units, like apple-touch-icons and Safari pinned tab SVGs.
Good reply: You may pin a web site on an iPhone’s homescreen to make it really feel like a local app. Safari doesn’t assist progressive internet apps and you may’t actually use different browser engines on iOS, so that you don’t actually produce other choices if you need that native-like expertise, which Twitter, in fact, likes. So that they add this to inform Safari that the title of this app is Twitter. The subsequent line is analogous and controls how the standing bar ought to appear like when the app has launched.
Line 8: <meta title=”theme-color” content material=”#ffffff”…
Good reply: That is the correct internet standards-esque equal of the Apple standing bar shade meta tag. It tells the browser to theme the encompassing UI. Chrome on Android and Courageous on desktop each do a fairly good job with that. You may put any CSS shade within the content material, and may even use the media attribute to solely present this shade for a selected media question like, for instance, to assist a darkish theme. You can even outline this and extra properties within the internet app manifest.
Line 9: <meta http-equiv=”origin-trial” content material=”…
No one I interviewed knew about this one. I’d assume that you simply’d know this solely when you have in-depth information about all the brand new issues which can be occurring on the requirements observe.
Good reply: Origin trials allow us to use new and experimental options on our website and the suggestions is tracked by the consumer agent and reported to the net requirements group with out customers having to opt-in to a characteristic flag. For instance, Edge has an origin trial for dual-screen and foldable machine primitives, which is fairly cool as you may make attention-grabbing layouts primarily based on whether or not a foldable cellphone is opened or closed.
Additionally accepted: I don’t find out about this one.
Line 10: html{-ms-text-size-adjust:100%;-webkit-text…
Virtually no person knew about this one too; provided that you realize about CSS edge instances and optimizations, you’d be capable of determine this line out.
Good reply: Think about that you simply don’t have a cell responsive website and also you open it on a small display screen, so the browser may resize the textual content to make it greater so it’s simpler to learn. The CSS text-size-adjust property can both disable this characteristic with the worth none or specify a share as much as which the browser is allowed to make the textual content greater.
On this case, Twitter says the utmost is 100%, so the textual content ought to be no greater than the precise measurement; they only do this as a result of their website is already responsive and so they don’t wish to danger a browser breaking the structure with a bigger font measurement. That is utilized to the foundation HTML tag so it applies to all the pieces inside it. Since that is an experimental CSS property, vendor prefixes are required. Additionally, there’s a lacking <fashion> earlier than this CSS, however I’m guessing that’s minified within the earlier line and we don’t see it.
Additionally accepted: I don’t find out about this property in particular however the -ms and -webkit- are vendor prefixes wanted by Web Explorer and WebKit-based browsers, respectively, for non-standard properties. We used to require these prefixes when CSS3 got here out, however as properties go from experimental to steady or are adopted to a requirements observe, these prefixes go away in favor of a standardized property.
Bonus — Line 11: physique{margin:0;}
This line from Twitter’s supply code is especially enjoyable as a result of you’ll be able to follow-up with a query in regards to the distinction between resetting and normalizing a webpage. Virtually everybody knew a model of the best reply.
Good reply: As a result of completely different browsers have completely different default types (consumer agent stylesheet), you wish to overwrite them by resetting properties so your website appears to be like the identical throughout units. On this case, Twitter is telling the browser to take away the physique tag’s default margin. That is simply to scale back browser inconsistencies, however I want normalizing the types as an alternative of resetting them, i.e., making use of the identical defaults throughout browsers moderately than eradicating them altogether. Individuals even used to make use of * { margin: 0 } which is completely overkill and never nice for efficiency, however now it’s widespread to import one thing like normalize.css or reset.css (and even one thing newer) and begin from there.
Extra traces!
I at all times get pleasure from taking part in with the browser Inspector instrument to see how websites are made, which is how I got here up with this concept. Though I take into account myself kind of an professional on semantic HTML, I be taught one thing new each time I do that train.
Since Twitter is generally a client-side React app, there’s only some dozen traces within the supply code. Even with that, there’s a lot to be taught! There are a couple of extra attention-grabbing traces within the Twitter supply code that I go away as an train for you, the reader. What number of of them may you clarify in an interview?
<hyperlink rel=”search” kind=”software/opensearchdescription+xml” href=”/opensearch.xml” title=”Twitter”>
…tells browsers that customers can add Twitter as a search engine.
<hyperlink rel=”preload” as=”script” crossorigin=”nameless” href=”https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js” nonce=”MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1″ />
…has many attention-grabbing attributes that may be mentioned, particularly nonce.
<hyperlink rel=”alternate” hreflang=”x-default” href=”https://twitter.com/” />
…for worldwide touchdown pages.
:focus:not([data-focusvisible-polyfill]){define: none;}
…for eradicating the main focus define when not utilizing keyboard navigation (the CSS :focus-visible selector is polyfilled right here).
Clarify the First 10 Strains of Twitter’s Supply Code to Me initially printed on CSS-Methods. You must get the publication.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!