Curious. Sometimes people do that sort of thing to avoid copy/pasting, but I wonder if in this case it's a poor man's way of getting syntax highlighting on the web: just screenshot an IDE instead of dealing with a syntax-highlighting-in-HTML tool.
You are probably right. I've found the MSDN pretty inconsistent. There are a number of C#/VB.net examples that don't have any syntax highlighting at all.
Microsoft's web presence in general varies widely. The philosophy appears to highly favor providing access to knowledge/content over standardization of form/presentation.
The scale of Microsoft's web properties is vast and they do not waste resources trying to get a herd of cats to goosestep.
More specifically, it's the only way to easily guarantee syntax highlighting in feed readers, e-mails, etc. The alternative is to hard code styles into the HTML everywhere but that's a nightmare to rig up.
Based on the formatting, it looks like a screen capture from Visual Studio. Ugly.
Probably just some poor soul trying to meet some arbitrary deadline, and the screen shot and crop method was the easiest solution. Or, maybe they were the first person in a workflow, and they had no idea that it'd be translated into web content.
Not defending it, but just saying - I've been there, and I'm sure you have, whether we like it or not.
Developers love to complain about other people's minor bugs, and yet hate it when testers open them against their own code. "Who even cares about this?"
When the code was adjusted to fit on the website they lost a lot of the formatting, and severely hurt the readability of the code. It appears that the lines of code were rather long, but were word-wrapped to fit within the size of that image, creating linebreaks at unexpected places. The first and last lines of the block open and close curly braces, but the rest of the code is not indented.
Readability is something you need to be aware of, but don't worry about learning bad practice. You'll become opinionated pretty quickly on your own.
I'm not the most savvy javascript developer, but I'll take a stab at it.
Variable declarations and assignments happen on multiple lines in the 2nd snippet instead of all being defined at once.
var currentLanguage = "en";
var spanish = "es";
var german = "de";
var english = "en";
vs
var currentLanguage = "en", spanish = "es", german = "de", english = "en";
Additionally, "en" is assigned twice. If you're going to take the time to assign the "en" abbreviation into the "english" variable, then you should use it when assigning to "currentLanguage", in my opinion, if only to avoid typos and redundancy.
var spanish = "es", german = "de", english = "en", currentLanguage = english;
The "disclaimer" element is accessed using the documentGetElementById DOM call twice. javascript is getting faster, but forcing multiple DOM calls when it's not necessary is bad practice. Ideally, you'd access it once and save it into a reference.
document.getElementById("disclaimer").firstChild.nodeValue = response;
var text = encodeURIComponent(document.getElementById("disclaimer").firstChild.nodeValue);
vs
var disclaimer = document.getElementById("disclaimer"), text = disclaimer.firstChild.nodeValue;
disclaimer.firstChild.nodeValue = response;
The code formatting is poor and inconsistent, notice an incorrect space after "encodeURIComponent (", but no spaces after "getElementById(" and "getElementsByTagName(". Also notice no indentation anywhere, or line-breaks after the function signatures and opening brackets "{";
The code is polluting the global namespace by not being enclosed in its own namespace or perhaps an immediately executed anonymous function.
I'm sure more seasoned JS devs can list some more things wrong with the code, but those are the ones that stood out to me.
A lot of developers don't like declaring more than one variable on one line, that's a style choice.
There's nothing wrong with it, especially in JS where accidentally deleting a variable declaration can suddenly turn your variable global.
The problem with the code is more that the code stinks, even after you remove the formatting problems, it looks more like .Net code and it doesn't make any sense.
I don't see a bunch of variable definitions on one line as an improvement, just reads less easily and only feels justified in the case of some low numbers like
var x = 0, y = 1, z = 0;
// Some looping or similar here
I do agree with your using of `english` variable to assign `currentLanguage`.
Personally, I like doing all the declarations on their own line as well. But anytime I've used JSLint in the past, I seem to recall it complaining about that. Perhaps I'm mistaken?
That feels like a situation that could easily end up (copy pasting something, someone adding another var, ...) in an unexpected global variable declaration.
var foo = 4,
bar = 5,
baz = 6,
sprinkles = 'wee';
qux = 'quux';
The formatting is non-existant. That makes me angry. Because I have OCD. Most programmers do.
There's a lot of direct use of DOM traversing, which makes the code rather brittle. (Use a css selector for binding to the DOM - jQuery is the de-facto standard tool here).
Variables are not encoded in the URL. And when it is, it happens on a separate line from where it's used. That's just bad style.
Oh, and what's the point of those declared-but-unused variables (`spanish, german, english`).
Keep in mind that most of the MSDN has copy-pasteable links (at least last time I checked, i.e. this morning), e.g. the entire set of .NET BCL reference docs. But, they don't use a syntax highlighter on those, boo to them.
I would like to see how long it stays that way ... people make mistakes, but if you are on the front page of HN for a wrong reason, you leave everything aside and fix it.
The site has something to do with javascript on the web, which is very close to html/css, and it does not ever use formatting as seen on many other sites (code coloring).
(Okay, I'm total html/css/js noob, never done a web page in my life, but I think it's wrong).
And in the past examples were showing just right in MSDN, along with way to switch between C#/C++/VB/etc.
How else can you guarantee how it will look in a feed reader (many of which strip styles or ignore stylesheets)? The Web is one thing, the places that ignore your styling.. quite another ;-)
Since the page is all about translation, could it be to avoid online translators (like Google Translate) to attempt to read that code and translate it since you expect many of the visitors to the page coming from a locale different than English?
Or, does Google Translate etc. handle this and not attempt to 'translate' code?
I suspect that letting people do their own thing when it comes to placing content on the web is based on two historical features of Microsoft.
The first is that because many Microsoft employees were strongly engaged with computers, there were many early adopters of the internet and more importantly the web (Microsoft.com registered in 1991). I suspect that the anything goes culture of the wild west days of the web persists to some degree within the organization.
The second historical factor is that there were a lot of employees with fuck you money during the early days of Microsoft's web presence and Microsoft management didn't waste resources forcing developers to heel to the sacred ideas of branding experts.
If you dig around Microsoft, you will find lots of standard tools - e.g. MSDN has a fairly consistent graphic presentation when it comes to technical documentation - it just looks nothing like Channel9. However, these differences, while not ideal for consumers, are pretty much irrelevant when it comes to supporting developers.
Yes the bitmap code snippets are embarrassing but not in a Facebook security hole kind of way. Any developer doing .NET programming isn't going to be greatly slowed down by typing in the code rather than copying and pasting from the MSDN page.
