{"id":320854,"date":"2020-09-10T13:39:53","date_gmt":"2020-09-10T20:39:53","guid":{"rendered":"https:\/\/css-tricks.com\/?p=320854"},"modified":"2020-09-10T13:39:54","modified_gmt":"2020-09-10T20:39:54","slug":"defining-view-source","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/defining-view-source\/","title":{"rendered":"Defining “View Source”"},"content":{"rendered":"\n

Last time there was a little flurry of activity<\/a> around the concept of “View Source,” I did get the sense that not everyone was on the same page about what that even means. Jim Nielsen<\/a>: <\/p>\n\n\n\n

First, when we talk about \u201cView Source\u201d what precisely are we talking about? I think this is an important point to clarify, as it sometimes goes unsaid and therefore a lot of assumptions sneak into the conversation and we might realize we\u2019re not all talking about the same thing.<\/p><\/blockquote>\n\n\n\n\n\n\n\n

There are three things that people might be talking about:<\/p>\n\n\n\n

  1. View source code (the code that generates the HTML delivered over the network)<\/li>
  2. View page source (the HTML delivered over the network)<\/li>
  3. View runtime source (the living HTML, a.k.a the DOM)<\/li><\/ol>\n\n\n\n

    I’ll assign what I think are the values of each are, as slices of a pie chart:<\/p>\n\n\n\n

    1. 10%<\/li>
    2. 5%<\/li>
    3. 85%<\/li><\/ol>\n\n\n\n

      Every major browser ships with built-in DevTools where you can easily peak at the “runtime source.” That’s where the vast bulk of value is to me. If browsers ever talked about removing that, I’m sure we’d all be up in arms. Even for non-developers, the existence of this tool might be the spark that grows baby web developers. <\/p>\n\n\n\n

      DevTools also provides a way to view the HTML delivered over the network, hence my hardline stance from before:<\/p>\n\n\n\n

      I literally don\u2019t care at all about View Source and wouldn\u2019t miss it if it was removed from browsers. I live in DevTools, and I\u2019ll bet you do too. It entirely supersedes View Source, as you can quite literally view source inside it if you\u2019d like.<\/p><\/blockquote>\n\n\n\n

      Jim’s post<\/a> explains the difference between all three types of “viewing source” in great detail. For sites that are built entirely from client-side JavaScript, viewing the HTML over the wire is nearly useless. But if you could see the whole codebase (say if it was open-source on GitHub), there is certainly value there. <\/p>\n","protected":false},"excerpt":{"rendered":"

      Last time there was a little flurry of activity around the concept of “View Source,” I did get the sense that not everyone was on the same page about what that even means. Jim Nielsen: First, when we talk about \u201cView Source\u201d what precisely are we talking about? I think this is an important point […]<\/p>\n","protected":false},"author":3,"featured_media":302318,"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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[477,18620],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/complex-code.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":363553,"url":"https:\/\/css-tricks.com\/explain-the-first-10-lines-of-twitter-source-code\/","url_meta":{"origin":320854,"position":0},"title":"Explain the First 10 Lines of Twitter’s Source Code to Me","date":"February 24, 2022","format":false,"excerpt":"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\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/twitter-source-code.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":360607,"url":"https:\/\/css-tricks.com\/open-source-sustainability\/","url_meta":{"origin":320854,"position":1},"title":"Open Source & Sustainability","date":"January 12, 2022","format":false,"excerpt":"It's a god-damned miracle to me that open source is as robust as it is in tech. Consider the options. You could have a job (or be entrepreneurial) with your coding skills and likely be paid quite well. Or, you could write code for free and have strangers yell at\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/github-commit-activity.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350186,"url":"https:\/\/css-tricks.com\/disambiguating-tailwind\/","url_meta":{"origin":320854,"position":2},"title":"“Disambiguating Tailwind”","date":"August 20, 2021","format":false,"excerpt":"I appreciated this bit of nuance from a post on Viget's blog: There could be a whole article written about the many flavours of Tailwind, but broadly speaking those flavours are:1. Stock tailwind, ie. no changes to the configuration,2. Tailwind that heavily relies on\u00a0@apply\u00a0in CSS files but still follows BEM\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/viget-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375278,"url":"https:\/\/css-tricks.com\/using-the-new-constrained-layout-in-wordpress-block-themes\/","url_meta":{"origin":320854,"position":3},"title":"Using The New Constrained Layout In WordPress Block Themes","date":"November 30, 2022","format":false,"excerpt":"One of the main goals of the WordPress Site Editor (and, yes, that is now the \u201cofficial\u201d name) is to move basic block styling from CSS to structured JSON. JSON files are machine-readable, which makes it consumable by the JavaScript-based Site Editor for configuring a theme\u2019s global styles directly in\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-constrained-layout-clamp.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":364908,"url":"https:\/\/css-tricks.com\/making-mermaid-diagrams-in-markdown\/","url_meta":{"origin":320854,"position":4},"title":"Making Mermaid Diagrams in Markdown","date":"April 18, 2022","format":false,"excerpt":"Mermaid diagrams and flowcharts have been gaining traction, especially with GitHub\u2019s announcement that they are natively supported in Markdown. Let\u2019s take a look at what they are, how to use them, and just as importantly: why. Just like you might want to embed your CodePen demo directly in your documentation\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/markdown-mermaid.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352627,"url":"https:\/\/css-tricks.com\/front-end-dev-shortcuts-in-ios-15\/","url_meta":{"origin":320854,"position":5},"title":"Front-End Dev Shortcuts in iOS 15","date":"September 29, 2021","format":false,"excerpt":"I was pretty stoked when Chris shared a way to \"View Source\" on mobile. Sure, it's not the same as a built-in feature but it allows iOS users like myself a way to peek at a site's code the same way folks on Android can by prepending view-source: to a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/ios-shortcuts.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/320854"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=320854"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/320854\/revisions"}],"predecessor-version":[{"id":320932,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/320854\/revisions\/320932"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/302318"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=320854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=320854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=320854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}