something newer<\/a>) and start from there.<\/p>\n\n\nMore lines!<\/h3>\n\n\n
I always enjoy playing with the browser Inspector tool to see how sites are made, which is how I came up with this idea. Even though I consider myself sort of an expert on semantic HTML, I learn something new every time I do this exercise.<\/p>\n\n\n\n
Since Twitter is mostly a client-side React app, there\u2019s only a few dozen lines in the source code. Even with that, there\u2019s so much to learn! There are a few more interesting lines in the Twitter source code that I leave as an exercise for you, the reader. How many of them could you explain in an interview?<\/p>\n\n\n\n
<link rel=\"search\" type=\"application\/opensearchdescription+xml\" href=\"\/opensearch.xml\" title=\"Twitter\"><\/code><\/pre>\n\n\n\n\u2026tells browsers that users can add Twitter as a search engine.<\/p>\n\n\n\n
<link rel=\"preload\" as=\"script\" crossorigin=\"anonymous\" href=\"https:\/\/abs.twimg.com\/responsive-web\/client-web\/polyfills.cad508b5.js\" nonce=\"MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1\" \/><\/code><\/pre>\n\n\n\n\u2026has many interesting attributes that can be discussed, especially nonce<\/code>.<\/p>\n\n\n\n<link rel=\"alternate\" hreflang=\"x-default\" href=\"https:\/\/twitter.com\/\" \/><\/code><\/pre>\n\n\n\n\u2026for international landing pages.<\/p>\n\n\n\n
:focus:not([data-focusvisible-polyfill]){outline: none;}<\/code><\/pre>\n\n\n\n\u2026for removing the focus outline when not using keyboard navigation (the CSS :focus-visible<\/code> selector is polyfilled here).<\/p>\n","protected":false},"excerpt":{"rendered":"For the past few weeks, I\u2019ve been hiring for a senior full-stack JavaScript engineer at my rental furniture company, Pabio. Since we\u2019re a remote team, we conduct our interviews on Zoom, and I\u2019ve observed that some developers are not great at live-coding or whiteboard interviews, even if they\u2019re good at the job. So, instead, we […]<\/p>\n","protected":false},"author":288642,"featured_media":363559,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"A neat little front-end interview challenge from @AnandChowdhary.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[18620],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/twitter-source-code.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":367045,"url":"https:\/\/css-tricks.com\/why-and-how-i-write-code-with-pencil-and-paper\/","url_meta":{"origin":363553,"position":0},"title":"Why (and How) I Write Code With Pencil and Paper","date":"August 17, 2022","format":false,"excerpt":"If the thought of handwriting code seems silly, it might surprise you to know that it's inevitable. If you're unsure, think about the last job interview you did, and remember how there was no computer around in the interview room \u2014 just your interviewers, a blank sheet of paper, and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/preethi-notes-2-scaled.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":159020,"url":"https:\/\/css-tricks.com\/interviewing-front-end-engineer-san-francisco\/","url_meta":{"origin":363553,"position":1},"title":"Interviewing as a Front-End Engineer in San Francisco","date":"December 23, 2013","format":false,"excerpt":"The following is a guest post by Philip Walton (@philwalton). Philip recently went through a slew of interviews for front-end jobs at tech companies in the Bay Area and found them to be not what he expected. A few months ago I started casually looking for front-end gigs in the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":286607,"url":"https:\/\/css-tricks.com\/interviewing-for-a-technical-position-doesnt-have-to-be-scary\/","url_meta":{"origin":363553,"position":2},"title":"Interviewing for a Technical Position Doesn’t Have to Be Scary","date":"April 26, 2019","format":false,"excerpt":"Jacob Schatz (@jakecodes) is a staff engineer over at GitLab and was kind enough to share how he conducts job interviews for technical positions and his thinking process for them. Technical interviews are talked about often and can be a touchy subject for some, so it\u2019s worth noting that this\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/bubbles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2271,"url":"https:\/\/css-tricks.com\/how-to-ask-a-good-question-in-the-forums\/","url_meta":{"origin":363553,"position":3},"title":"How To Ask a Good Question in the Forums","date":"February 27, 2009","format":false,"excerpt":"So we have Forums here on CSS-Tricks which are a lovely place to get and give help about web design. Now that I've posted almost 500 posts there, I think I have a pretty good feel for what kind of questions make for a good thread and are the most\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":341720,"url":"https:\/\/css-tricks.com\/code-blocks-but-better\/","url_meta":{"origin":363553,"position":4},"title":"Code blocks, but better","date":"June 1, 2021","format":false,"excerpt":"Pedro Duarte made a wishlist for styled code blocks in blog posts and documentation, then hand-rolls a perfect solution for that wishlist. For example, a feature to be able to highlight certain lines or words within the code block. The line highlighter is unique in that it only syntax highlights\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-31-at-9.58.54-AM.png?fit=1200%2C521&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":156753,"url":"https:\/\/css-tricks.com\/introducing-scut-new-sass-utility-library\/","url_meta":{"origin":363553,"position":5},"title":"Introducing Scut, a new Sass utility library","date":"November 21, 2013","format":false,"excerpt":"The following is a guest post by David Clark. I think David's new Sass library \"Scut\" is pretty interesting. It's like a design utility library, which is distinct from a design pattern library in that it enforces no particular structure or particular visual design. I've always found this kind of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/twitter-source-code.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363553"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288642"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=363553"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363553\/revisions"}],"predecessor-version":[{"id":364216,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363553\/revisions\/364216"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/363559"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=363553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=363553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=363553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}