Robot arm ride

This was forwarded to me a little while ago, by now making the rounds through the “tubes”.  Not sure if it’s a group of factory workers with too much time on their hands (a spectacular breach of Occupational Health & Safety, surely), or an equally unsafe attraction where you actually pay for the privilege of experiencing your face being millimetres away from being ground into the pavement by a giant robot arm.  Step right up.

Printing MSDN Magazine articles from Firefox

I like to read developer articles.  Some of the best dev articles (in my opinion) for the .NET space are published in the MSDN magazine, available online for free.  Sometimes it’s convenient to print them, to read on the train, or to make notes in the margins.  But Microsoft wants to make that difficult for you.

They do this in two ways:

1. Refusal to remove a print redirection tag in the header of the articles.  The print redirection tag exists to suggest to browsers where they should go in order to get a more printer friendly version of the page. For example, say you look at this article.  If you are in IE7 or IE8, when you go to File->Print Preview, you’ll see a version of the page that’s entirely unlike what the original page looked like.  That was achieved via this directive in the header:  <link rel="alternate" media="print" href="/en-us/magazine/dd569757(printer).aspx" />.  The browser sees this, takes you to the “print version”, and prints it.  Note that Firefox seems to ignore this, and stubbornly refuses acknowledge that the creator of the page went to the effort of providing an optimised print page. 

But ignoring that… so far so good – but then the web designers did something weird.  The print version of the page (to which you can get by clicking the “Print View” button on the page) has a printing header link… back to itself.  This has the effect of cancelling any changes you performed on the page, like expanding code regions etc – the page reloads just before printing. 

Now recently, MS seems to have realized this, but their fix was nothing short of bizarre – add a script to automatically expand all the collapsed regions on load.  Why does the print view redirect to the print view at all??  Anyhow, the bizarre fix kind of works, in the past you couldn’t actually expand the collapsed regions, as they’d collapse as soon as you tried to print (because the page reloads).  Now they’re open by default.  But this doesn’t work for Firefox - when you print in Firefox, the regions are collapsed, the script for some reason doesn’t execute, and you’re off trying to expand all the regions by hand.

2.  Somebody forgot their stylesheets.  The generated page is full of class attributes, but the stylesheet definitions for a lot of them are missing:

There is no differentiation between headings and text.  The class attributes are there.

So what to do?  Greasemonkey, that’s what.  Greasemonkey is an add-on for Firefox, that allows you to execute custom scripts after the page loads.  You can do funky things like tweaking the specific HTML elements, adjust styles etc.  There is a handy online reference, that gets you started using it in no time.  So now every time I visit an MSDN print page, the styles are magically fixed.

The resulting script I present here improves on the page in more ways than the above features – I’ve changed the code font to Courier, as that’s a far more common programmer font family, and removed items that “float”, upsetting printing, as well as removing the Copy Code link.

Here is are some snapshots of the results, side by side (“before” on the left, “after” on the right):

Header and “Sidebar” entries (I’ve moved the “Sidebar” element to appear inline, for better printing):

Section headings and code snippets (no need for the grey background in my opinion, or the “Copy Code “link):

The entire script is below, enjoy (feel free to comment on any styles that I might have missed):

The obvious barrier of entry is that you have to know how to actually add a script to Greasemonkey.  An exercise left to the reader.

1. // ==UserScript== 
2. // @name           MSDN Magazine 
3. // @namespace      a 
4. // @include        http://msdn.microsoft.com/en-*/*(printer).aspx 
5. // ==/UserScript== 
6.  
7. //this function is straight from the DiveIntoGreasemonkey tutorial 
8. function addGlobalStyle(css) { 
9.     var head, style; 
10.     head = document.getElementsByTagName('head')[0]; 
11.     if (!head) { return; } 
12.     style = document.createElement('style'); 
13.     style.type = 'text/css'; 
14.     style.innerHTML = css; 
15.     head.appendChild(style); 
16. } 
17.  
18. //get rid of the copy code header 
19. addGlobalStyle(".CodeSnippetTitleBar {display: none !important;}"); 
20.  
21. //code snippets 
22. addGlobalStyle("pre.libCScode {background:#FFFFFF none repeat scroll 0 0 !important;border-top:1px solid #C8CDDE !important;border-bottom:1px solid #C8CDDE !important;border-left:1px solid #C8CDDE !important;border-right:1px solid #C8CDDE !important;display:block !important;font-family:courier,monospace !important;margin:0 0 10px !important;padding-left:5px !important;padding-right:5px !important;padding-top:5px !important;}"); 
23.  
24. addGlobalStyle(".ArticleTypeTitle {color:#008080 !important;font-family:'Segoe UI',Arial !important ;font-size:14px !important;font-style:normal !important ;font-variant:normal !important ;font-weight:bold !important;margin-top:3px !important;text-transform:none !important;}"); 
25.  
26. //article section title 
27. addGlobalStyle(".ColumnTypeTitle, .FeatureSmallHead {border-bottom:2px solid #008080 !important;color:#003399 !important;font-family:'Segoe UI',Arial !important;font-size:36px !important;font-style:normal !important;font-variant:normal !important;font-weight:normal !important;line-height:36px !important;margin-bottom:4px !important;padding-bottom:2px !important;text-decoration:none !important;text-transform:uppercase !important;}"); 
28.  
29. addGlobalStyle(".ColumnTypeSubTitle, .FeatureHeadline {color:#000000 !important;font-family:'Segoe UI',Arial !important;font-size:20px !important;font-style:normal !important;font-variant:normal !important;font-weight:normal !important;line-height:20px !important;margin-bottom:8px !important;text-decoration:none !important;}"); 
30.  
31. //author name in header 
32. addGlobalStyle(".ColumnByLine, .FeatureByLine {color:#000000 !important;font-family:'Segoe UI',Arial;font-size:16px !important;font-style:normal;font-variant:normal;font-weight:normal !important;text-decoration:none !important;}"); 
33.  
34. //sidebar header 
35. addGlobalStyle(".SidebarHeadline {color:#008080;font-family:'Segoe UI',Arial;font-size:18px;font-weight:bold;line-height:20px;}"); 
36.  
37. //recently they've started using floating divs as well this gets rid of them 
38. addGlobalStyle("div {float:none !important; height:auto !important; width:auto !important;}"); 
39.  
40. //show all hidden panels 
41. var allLinks, thisLink; 
42. allLinks = document.evaluate( 
43.     "//div[@style]", //any style, as they start off invisible 
44.     document, 
45.     null, 
46.     XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, 
47.     null); 
48. for (var i = 0; i < allLinks.snapshotLength; i++) { 
49.     thisLink = allLinks.snapshotItem(i); 
50.     thisLink.style.display='block'; 
51. }