We Need To Reboot the Culture of View Source (wired.com)

theodp writes: Back in ye olde days of the information superhighway," begins Clive Thompson in It's Time to Make Code More Tinker-Friendly, "curious newbies had an easy way to see how websites worked: View Source." But no more. "Websites have evolved into complex, full-featured apps," laments Thompson. "Click View Source on Google.com and behold the slurry of incomprehensible Javascript. This increasingly worries old-guard coders. If the web no longer has a simple on-ramp, it could easily discourage curious amateurs." What the world needs now, Thompson argues, are "new tools that let everyone see, understand, and remix today's web. We need, in other words, to reboot the culture of View Source." Thompson cites Fog Creek Software's Glitch, Chris Coyier's CodePen, and Google's TensorFlow Playground as examples of efforts that embrace the spirit of View Source and help people recombine code in useful ways. Any other suggestions?

Comments

The JavaScript on most sites..

[intellitech]

..is intentionally incomprehensible. Whether indirectly through minification or directly via obfuscation.

I know it's hard for some people to accept, but there is a serious amount of interest (and, rightfully so) in preventing the reverse engineering of website code, or at least, hindering efforts to do so.

Re:The JavaScript on most sites..

[digitalchinky]

If you kill off Javascript, you also kill off medial image imaging (my line of work) or a thousand other things you depend on but don't realize. Be careful what you wish for. The web is much bigger than the sea of annoying cookie notices, calls to action, and responsive design. Javascript, like or not, gets crap done :-) It's not perfect, but it's not so terrible either.

Open source not view source

[James Carnley]

View source is a relic of how the internet used to be. It's not coming back and I would argue should be hidden by default in browsers. It's akin to decompiling the source of an .exe file to look at the code (which some people do) and learn how it does things. Not a good method.

What you really want for learning and teaching techniques is to view the real source code. The source code with comments, with context, and with reproducibility in full. This is what open source projects and those demo websites do. They intentionally format the code in a readable way for the purposes of learning.

Someone learning to code on the web should not be looking at production code in a scalable web app, they should be following tutorials and using demo projects like you do in every single other language. The web isn't special it just had the quirk of the View Source button that was neat at the time but is now out of date and a relic of a bygone era.

Re:Open source not view source

[Anonymous Coward]

View source is a relic of how the internet used to be. It's not coming back and I would argue should be hidden by default in browsers. It's akin to decompiling the source of an .exe file to look at the code (which some people do) and learn how it does things. Not a good method.

It's a great method if one wants to look at the output of a compiler. It's also useful to look at the internals of a web page as far as just how much it's generated on the fly in javascript vs baked in by a server-side script/app.

What you really want for learning and teaching techniques is to view the real source code. The source code with comments, with context, and with reproducibility in full. This is what open source projects and those demo websites do. They intentionally format the code in a readable way for the purposes of learning.

Which goes to show you how the big complaint I had about the way the web was going came true. Sure, we bypassed having Flash hell. But we've replaced it with HTML5 and javascript hell. The fact that you don't think it's actually possible for a web site to have comments with context and such and that one can only get that in demo websites is precisely the problem. If I want to make a web site like Amazon, what better framework is there than to literally see how they do it?

Someone learning to code on the web should not be looking at production code in a scalable web app,

Actually they should, in part, to understand exactly what their framework is outputting to get an idea of just how scaleable said web app really is in production. More generally, developers of web pages need to look at the code to have an idea of why stuff isn't working right.

they should be following tutorials and using demo projects like you do in every single other language.

Another major part of learning another language is seeing actual production code, not just demo projects. And debugging programs, possibly even without the source code. It's actually a necessary step to get into the mindset of "what could possible be causing this problem".

The web isn't special it just had the quirk of the View Source button that was neat at the time but is now out of date and a relic of a bygone era.

No, it was special. For a long time, a web page really was something that could be intelligible in "view source" because html was merely a markup language. Page generators could simplify the boilerplate production, but even then the output was still readily human readable. Honestly, the move to CSS didn't kill this. Javascript itself didn't kill this either. What mostly killed this was that Google (and others) intentionally obfuscated their code precisely to make it so people COULDN'T learn from it. Any claims about code size? That's what gzip (and other) in-line compression is for.

Oh, and, btw, you should really look up the history of LISP machines to get some perspective on just how consumer interests turn an open platform into a shithole.

It still works exactly as before

[somenickname]

The "View Source" functionality still works exactly as before. Except better. In Firefox, when I mistakenly hit Ctrl-Shift-C (which I do often), it brings me into an interactive "View Source" like functionality that is essentially a debugger. It's not [completely] the fault of webpage makers that the stuff under the hood is effectively gobbly-gook: That's just how the web looks now.

I'm not really sure what this summary is implying. That we should roll back the web to hand written HTML with blink tags so that kids can understand it? Fuck that. Get your kid a Raspberry Pi and as many $5 peripherals as they want. That's WAY more interesting than web programming and leads to understanding how things work instead of copy/pasting shitty HTML.

View Source for circa-1999 Google.com

[theodp]

Google.com Apr 22, 1999
<center>
<img src="/web/19990422191353im_/http://www.google.com/google.jpg" alt="Google! (Beta version)">

<table border="0">
<tr>
<td>
<form name="f" method="GET" action="/web/19990422191353/http://www.google.com/search">
<center>Search the web using Google<br></center>
<center><input type="text" name="q" value="" size="40" framewidth="4"><br></center>
<center><input type="submit" value="Google Search">
<input type="submit" name="sa" value="I'm feeling lucky"><br></center>
</form>
</td>
</tr>
</table>

<a href="more.html">More Google!</a><br>

<p><font size="-1">Copyright ©1999 Google Inc.</font>
</center>

Re:View Source for circa-1999 Google.com

[gustygolf]

Three <center> tags when a single one would do.

Google was as bloated as ever back then too, I see.

We need to go back to simplicity.

[green1]

If you want "view source" to be useful, you need to go back to coding with simplicity in mind.

The original post talks about viewing the source of the google homepage and getting an incomprehensible slurry. But why? What does that actually accomplish? The page is one text entry box, and 2 buttons, plus a graphic above it. There is ZERO excuse for it being over 47,000 characters (not counting all the other stuff it pulls in). But this isn't at all rare on today's web. This is also why so many pages are so horrendously slow to load, it's all scripts and links to other files and domains, even the simplest websites use absolutely incredible amounts of bandwidth, and yet do no more than could be done in 1/100th the size or less, and be human readable.

99.99999% of these sites aren't huge for any good reason, they're just horribly inefficient.

Re:We need to go back to simplicity.

[green1]

We're not talking assembly here, we're talking HTML. HTML is far easier to understand than the garbage most "developers" use these days, while keeping the page TINY by comparison. Assembler on the other hand is much harder to understand and program in.

If you're writing a few lines of static content, there's no excuse to take as much as a few megabytes of code to do it.

This is actually the opposite of your example, all the extra code makes it more difficult to write, not easier, and it has the added issue of providing ZERO benefit, and often major drawbacks. For instance, if you just put raw HTML text on a page, it will format to every browser ever made, it will nicely fill the window, regardless of the size. But instead, developers put in all sorts of extraneous code to format it to specific window sizes, and the end result tends to be that it looks horrible on all of them (don't you just love the pages that only allow you to use 1/4 of the width of your screen for content with the other 3/4 being vast empty space, and yet you have to scroll for days to find the bottom?)

Most HTML source is simple

[PPH]

<html>
<script type="text/javascript" src="actual_page_content.js">
<body>
<h1>Please turn on Javascript to view this page.</h1>
</body>
</html>