Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionExplain the First 10 Strains of Twitter’s Supply Code to Me | CSS-Methods

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionExplain the First 10 Strains of Twitter’s Supply Code to Me | CSS-Methods

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Resolution

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 will not be nice at live-coding or whiteboard interviews, even when they’re good on the job. So, as a substitute, we’ve an hour-long technical dialogue the place I ask them questions on net vitals, accessibility, the browser wars, and different comparable subjects concerning the net. One of many questions I all the time 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 so much concerning the depth of basic front-end data they’ve, and this text lists one of the best solutions.

For context, I share my display, open Twitter.com and click on View supply. Then I ask them to go line-by-line to assist me perceive the HTML, they usually 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 total line however you get an concept. Right here’s what it appears to be like like:

Screenshot of source code from Twitter.

Notice that since our technical dialogue is a dialog. I don’t anticipate 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 precise path.

Line 1: <!DOCTYPE html>

The primary line of each doc’s supply code is ideal for this interview as a result of how a lot a candidate is aware of concerning the DOCTYPE declaration intently 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 Widespread DOCTYPES” from 2009.

Excellent reply: That is the doc kind (doc-type) declaration that we all the time put as the primary line in HTML recordsdata. You would possibly 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 activity 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 unique structure so this tag was adopted to make it straightforward for browsers. Beforehand, DOCTYPE tags had been lengthy and even included the specification hyperlink (kinda like SVGs have right now), however fortunately the easy <!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 must 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 individuals knew concerning the dir attribute in my interviews, however it’s a fantastic segue right into a dialogue about display readers. Nearly everybody was in a position to determine the lang="en" attribute, even when they hadn’t used it earlier than.

Excellent reply: That is the foundation component of an HTML doc and all different components 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 each one content material inside this tag is in English; you possibly can set this worth to any language tag, even to distinguish en-us and en-gb, for instance. That is additionally helpful for display readers to know which language to announce in.

Line 3: <meta charset="utf-8">

Excellent 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 types of symbols and emoji in your supply code. It’s essential 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 one of the best observe is to place it proper on the prime of <head>.

As a facet be aware, 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 express because it’s a transparent dwelling for all metadata, kinds, and so forth.

Line 4: <meta title="viewport" content material="width=device-...

Excellent reply: This meta tag within the supply code is for correctly sizing the webpage on small screens, like smartphones. Should you keep in mind the unique iPhone keynote, Steve Jobs confirmed your entire New York Occasions web site on that tiny 4.5-inch display; again then it was a tremendous function that you simply needed to pinch to zoom to really have the ability to 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 possibly can even specify particular pixel values for width. The usual greatest observe is to set the preliminary scale to 1 and the width to device-width so individuals can nonetheless zoom round if they want.

The screenshot of the supply code doesn’t present these values however it’s good to know: Twitter additionally applies user-scalable=0 which, because the title suggests, disables the power 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 motive (you should utilize minimal and most scale to clamp the zoom-ablity between these values). Typically, setting the total 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 reply to this query exhibits that they find out about website positioning.

Excellent 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 types of authorship particulars and canopy pictures for fancy sharing. Actually, nowadays it’s even frequent 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 facet be aware is that meta tags normally 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 individuals add them simply to be secure. Most websites nowadays use a mixture 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 tips on how to optimize an internet site for Apple units, like apple-touch-icons and Safari pinned tab SVGs.

Excellent reply: You possibly can pin an internet site on an iPhone’s homescreen to make it really feel like a local app. Safari doesn’t help progressive net 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, after all, likes. In order that they add this to inform Safari that the title of this app is Twitter. The following line is analogous and controls how the standing bar ought to appear to be when the app has launched.

Line 8: <meta title="theme-color" content material="#ffffff"...

Excellent reply: That is the correct net 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 possibly can 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 help a darkish theme. You may also outline this and extra properties within the net app manifest.

Line 9: <meta http-equiv="origin-trial" content material="...

No person I interviewed knew about this one. I’d assume that you simply’d know this solely when you’ve got in-depth data about all the brand new issues which are occurring on the requirements monitor.

Excellent 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 online requirements neighborhood with out customers having to opt-in to a function 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 based mostly 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...

Nearly no one knew about this one too; provided that about CSS edge instances and optimizations, you’d have the ability to determine this line out.

Excellent reply: Think about that you simply don’t have a cell responsive website and also you open it on a small display, so the browser would possibly resize the textual content to make it greater so it’s simpler to learn. The CSS text-size-adjust property can both disable this function with the worth none or specify a proportion 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 must be no greater than the precise dimension; they only try this as a result of their website is already responsive they usually don’t wish to threat a browser breaking the structure with a bigger font dimension. That is utilized to the foundation HTML tag so it applies to every part inside it. Since that is an experimental CSS property, vendor prefixes are required. Additionally, there’s a lacking <model> 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 secure or are adopted to a requirements monitor, 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 possibly can follow-up with a query concerning the distinction between resetting and normalizing a webpage. Nearly everybody knew a model of the precise reply.

Excellent reply: As a result of totally different browsers have totally different default kinds (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 kinds as a substitute of resetting them, i.e., making use of the identical defaults throughout browsers moderately than eradicating them altogether. Folks even used to make use of * { margin: 0 } which is completely overkill and never nice for efficiency, however now it’s frequent to import one thing like normalize.css or reset.css (and even one thing newer) and begin from there.

Extra traces!

I all the time get pleasure from enjoying with the browser Inspector device to see how websites are made, which is how I got here up with this concept. Though I take into account myself type of an skilled on semantic HTML, I be taught one thing new each time I do that train.

Since Twitter is usually 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 number of extra attention-grabbing traces within the Twitter supply code that I depart 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="https://css-tricks.com/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).

Supply hyperlink

Leave a Reply