Friday, January 8th, 2010

View Source; How important was it, is it, and will it be?

Category: Editorial

<>p>Alex Russell has pontificated on the notion that View Source is not only good and important, but that it may be under attack.

Do you feel that view source added to the popularity of the Web? or that it was just a nice to have that is neither here nor there? Other technologies have tried to bolt it on (e.g. in Flex you can opt-in to view source) but opt-in to a developer flips a bit of “hmm no I will keep this to myself” for various reasons.

I personally feel like the ability to view source fit in perfectly with the culture of the Web, and was especially important early on. I am willing to bet that we have all learned from the notion of view source.

However, it is also true that in some ways our front ends are getting a lot more complex and by the time you run a compressor through, or a tool like GWT/Cappuccino/insert others there isn’t much to learn. Of course, on the back end all the code is hidden and we have found ways to learn there (big thanks to open source and communities that have sprung up).

The notion of view source is under attack. How hard to we try to fight it? How do we fight it?

Keep reading Alex’s post which has some good stuff such as:

To understand the importance of view-source, consider how people learn. Some evidence exists that even trained software engineers chose to work with copy-and-pasted example code. Participants in the linked study even expressed guilt over it the copy-paste-tweak method of learning, but guilt didn’t change the dynamic: a blank slate and abstract documentation doesn’t facilitate learning nearly as well as poking at an example and feeling out the edges and possibilities by doing. View-source provides a powerful catalyst to creating a culture of shared learning and learning-by-doing, which in turn helps formulate a mental model of the relationship between input and output faster. Web developers get started by taking some code, pasting it into a file, loading it in a browser and switching between editor and browser between even the most minor changes. This is a stark contrast with other types of development, notably those that impose a compilation step on development, in which the process of seeing what what done requires an intermediate action. In other words, immediacy of output helps build an understanding of how the system will behave, and ctrl-r becomes a seductive and productive way for developers to accelerate their learning in the copy-paste-tweak loop. The only required equipment is a text editor and a web browser, tools that are completely free.

Related Content:

Posted by Dion Almaer at 6:25 am
23 Comments

++---
2.9 rating from 25 votes

23 Comments »

Comments feed TrackBack URI

Capitalization, grammar and spelling errors. You should write this in a document editor before posting.

Comment by sixtyseconds — January 8, 2010

Where are we gonna get new programmers? Taking someone else’s code and modifying it slightly to see what it does is the single-best way to learn. And everyone’s equal – you can take microsoft’s site, save as, and start tweaking it. It’s amazing!

I’ll be permanently unhappy if View Source goes away.

Comment by pachunka — January 8, 2010

I would bet a survey asking current developers whether their first passions about web development were sparked by View Source and the behavior pachunka describes above would result in nearly 100% YES votes…

It is how we do things, and I believe integral to how the web developed so quickly, for better or worse… It allowed anyone interested to look under the hood, see how others did it, copy, experiment, and PLAY! It also meant anyone, with no formal education or training (read: “no knowledge of or care for standards”) could become a developer, leading to some real crap code out there… But I would still argue it was incredibly important!

Additionally, View Source still remains a critical component to troubleshooting…

Would hate to see a day when we couldn’t check-out each others’ code, either to see how someone did something, or make sure they did it right… :-)

Atg

Comment by aarontgrogg — January 8, 2010

I believe that View Source does not go far enough. View Source only gives you the originally shipped HTML. I’d love to see a View Generated Source option more readily available to users. Right now the Web Developer Toolbar by Chris Pederick is the only tool that I know of that does so.
And before people ask, I am aware that Firebug and every other DOM tool has their own tool to display the generated HTML. We are merely talking about a single display along the lines of View Source.

Comment by blepore — January 8, 2010

While I, like many, would mourn the loss of View Source, the fact is it simply isn’t as important to the web these days as it was in 1995. Those were the days before blogs–before Ajaxian, Nettuts, and other great sites that spread the same information that we used to glean only from View Source. Now, along with the source examples, we get their context which is great for those just getting started.

My point is, there’s a lot more readily available information on how to develop for the web out there than there was when View Source was perhaps at the height of its importance. Not that it’s not important anymore, but I’d say less-so than it once did.

Comment by BCrescimanno — January 8, 2010

While I think that view source was an important way of growing the web, and getting many people contributing to it, I think it is not so important anymore. There is such a huge wealth of books, tools, online help, and tutorials that I have my doubts that view source has the same place that it once did. Those who know nothing about html etc. and just want to make a page have tools to do that. Those who want to learn have a greater wealth of tools, libraries, etc than ever before, and view source is less important. Finally, for those who want to actually look at the code and play with it, there is plenty of high quality open source code out there. Open source is the new view source, and I think it is a much much better replacement. No, you can’t look at everything, but I think thats fine. I don’t think there is any responsibility for production code to be as readable as possible.
.
As for view source itself – I think that will be around for as long as browser still take source code and not bytecode or native code. It just might not be pretty. And on that matter I completely agree with others, that source level compatibility is important and should not go away.

Comment by genericallyloud — January 8, 2010

View source has been invaluable to me for learning new tricks and I still use it a lot. Sometimes the tool I use is Firebug, sometimes is Web Developer Toolbars, sometimes it’s just control U.

View source did a lot to spread HTML, JavaScript and CSS. Without it the web would have been just another hypertext system and probably we’d not here writing about it now.

Comment by pmontrasio — January 8, 2010

I’ve only glossed over Alex’s post, but other than flash/silverlight-like systems, the only evidence he puts about the “attack on view source” is JS generated code. On top of that, there’s of course the minified js/css code, which make it difficult (and in case of obfuscated js code), nearly impossible to simply look at the code and understand it. However, what’s the solution? Should we stop optimizing and minifying (minimizing?) our code for the sake of better preserving “View Source”?

I think that his hypothesis is somewhat off the mark, which, if I’m reading him correctly, states that view-source was instrumental to the proliferation of HTML and web development. I would instead argue that it was the simple nature of HTML that led to its proliferation, and view-source is just a nice, nay great, side effect of this simplicity.

Consider that HTML is at once simpler and more powerful (at least on the immediate gratification scale) than scripting languages. Not only does it not require any compiling, but it doesn’t even need any “manual output” (i.e. things like “print”, “echo”, etc.). You write the tags, you load the file in browser, you see the “tags” (i.e. their content). It’s almost like a formatted text file, which is of course why view-source works so well.

If you compare this to PHP for a second, a code like “echo $yada . ‘-’ . $bla;” may produce text such as “view-source” but the mapping is not direct since when looking at the source PHP code you need to find the declarations/assignments of the $yada and $bla variables, which may be a line above, or 100 lines above, or constructed inside a function in a different file by means of a complex algorithm.
HTML doesn’t have that – the contents of tags is exactly what you see on the page and the only “variable” is their styling and position.

Of course, the more complex websites become, the more complex code they require. JS introduces a more traditional scripting code, and to optimize user experience we minify and obfuscate it, essentially removing that almost 1 to 1 mapping of source code to the page in a browser. But I think that’s just the nature of the beast – you can’t have complex interactive experience while maintaining simple readable code (unless you have an extra abstraction layer on top of it).

That’s not to say that there aren’t those that try to specifically prevent others from peaking inside their code, but I believe such developers are in the minority. We just have to make sure that the open source nature of the web remains as such.

Comment by iliad — January 8, 2010

View Source is a crutch, and the source of a lot of the copy and paste plague that perpetuates the buggy, non-standards compliant, badly formatted, dead code ridden, and often copyright infringing mess that is the web today. Lowering the barrier for entry is not always a good thing.

Comment by JonathanLeech — January 8, 2010

@iliad Even minified JS is very easy to read with a tool like http://www.jsbeautifier.org

Comment by chuckles1313 — January 8, 2010

“View source” is still relevant and important, no question. I learned a lot from viewing others’ “open” code in the 90s and still do, though it’s augmented somewhat by the convenience of Firebug et al these days. It’s also still one of the best ways to read/parse a document at a lower level, see how a page is constructed and also gives an idea of how search engines may process it vs. the user’s GUI-based view.
 
The “view-source” menu in browsers arguably reinforces the idea that front-end code is an open format, intentionally made available for people to see and tinker with. It encourages experimentation. This is a great thing!
 
On a side note, I like that Firefox (after 3.0?) started highlighting links in the view source window; you can click and subsequently view their source in the same window, “delete” takes you back in history, and CTRL-R refreshes the source from the server etc.
 

Comment by Schill — January 8, 2010

I think View/Source is the #1 driver of education and spreading good ideas for client-side web developers. I wish jsbeautifier were built in to modern browsers.

What better way to learn, than to see something cool, and then open up the hood to see how it’s done.

Comment by mckoss — January 8, 2010

iliad: I suggested at the end of the article that the best, most viable alternative is for browsers to start (finally) fulfilling their role in the virtuous cycle and begin adding new semantics for what’s now common practice in script and layout. As I say at the end, HTML 5 and (some of) CSS 3 are steps in that direction, but they’re only a start. So should you stop minifying out of some altruistic instinct? No. But the web should be improving fast enough that minification never provides enough value to *most* developers that it’s even on their roadmap. Anything else should be viewed as a categorical platform-wide failure to keep up.

Regards

Comment by slightlyoff — January 8, 2010

The price we pay to keep View Source clean and meaningful (i.e. not minified/compressed/optimized) is too high for most serious web projects. Tests show that compressed/optimized code and markup loads faster and performs better, which ends up in better experience for end-users, who are the only real target of all our efforts. Developers have another ways to learn from other’s code, such as non-compressed development distributions or extensive examples in documentation (think jQuery).

View Source was easily available when Web 2.0 was young, it cannot be that easy now when Web2.0 is the essential technology being used in a commercial environment.

Comment by ingdir — January 8, 2010

@chuckles1313: Ah! That beauty definitely goes into my permanent bookmark collection, gracias :)

@slightlyoff: “the web should be improving fast enough that minification never provides enough value to *most* developers that it’s even on their roadmap”
That’s unrealistic
“Anything else should be viewed as a categorical platform-wide failure to keep up.”
And that’s just drastic
But I guess to each his own.

Comment by iliad — January 8, 2010

While I don’t use View Source nearly as often for learning or figuring out how stuff works, I think it’s still important for a few reasons:

1) It’s a quick and easy way to pre-screen contractors – ask for a reference that they worked on, and check their code.

2) For server-side technologies where the source code is in ASP.NET or PHP, using view source is helpful for refining templates and checking for standards compliance.

Comment by perrycollective — January 8, 2010

iliad: I think the only difference our perspectives is a sense of urgency and how long the “long view” is. Lord knows I’ve done my bit to help edge us down the path of code-not-markup. Perhaps I’m just atoning for past mistakes ;-)

Comment by slightlyoff — January 8, 2010

View source is one of the three most important tools in my web-dev belt (the other two are a text editor and a browser).

I feel that view source is of critical importance to the web both historically and in the future.

I’ve blogged a more detailed response to your and Alex’s post:
http://thomasjbradley.ca/blog/save-view-source

And I would like to start a movement:

Save View Source!
http://saveviewsource.org

Comment by thomasjbradley — January 8, 2010

“even trained software engineers chose to work with copy-and-pasted example code”

Yes, they do and it’s a cause of disasters. “trained” monkeys more like! If you don’t know how to do something, then performing a cargo-cult ritual that you’ve seen someone else performing will not invoke the software gods!

LEARN for dog’s sake!

View Source is useless. Where’s the “View Source” for my word processor, or accounting app, or…..?

Comment by ExtAnimal — January 11, 2010

Long live “view source”!!

Comment by alexivaylov — January 11, 2010

“Tests show that compressed/optimized code and markup loads faster and performs better”

I think this is espcially true for compressed, but if you do compressed I doubt you need to remove all new lines and spacing to be efficient. If I remember correctly if you do both compression and remove comments, newlines and spacing. The first one has the biggest impact and the other doesn’t matter as much anymore.

Does anyone have any link to a recent benchmark testing this ?

Comment by SilentLennie — January 14, 2010

@ExtAnimal ‘Where’s the “View Source” for my word processor’

In wordprocessors-land this is the “Show Codes”-feature in WP5.1.

Still people to this day complain:

I wish I could do “Show Codes” like in WP5.1, because I don’t understand what is going on in this wordprocessor.

Comment by SilentLennie — January 14, 2010

@Schill: Thanks for the tip about navigating while in view source, I never knew about that before. I see it allows you to quickly bring up .css and .js files. Very handy!

I definitely made use of “View Source” in my early years. It was indispensable at the time. Yes there was a lot of hackish stuff going on, but I think that was more due to the maturity of the field rather than the use of view source itself.

Nowadays, though, there is a lot that’s not part of the initial HTML download, and the DOM is likely going to look fairly different after loading than is reflected in the initial HTML load. When people ask me for tips on learning, I tell them to use FireBug to take a look at the larger picture of how a site works. That said, for me View Source is only partly a technical feature, it’s also an attitude. With the first Web sites, anyone could do it and sharing was somewhat of an expectation. As such, even if other tools make the feature less useful, I think it should stay if for no other reason than as an invitation to explore and share.

Comment by billdcat — January 18, 2010

Leave a comment

You must be logged in to post a comment.