Introducing TypeScript – Microsoft’s new open source JS language

TypeScript is a language for application-scale JavaScript development.TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

Starts from JavaScript, Ends with JavaScript

TypeScript starts from the syntax and semantics that millions of JavaScript developers know today. With TypeScript, you can use existing JavaScript code, incorporate popular JavaScript libraries, and be called from other JavaScript code. TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any other ES3-compatible environment.


Read the specification in doc or pdf

Discuss and provide feedback on the language.

Play with the bits and file bugs.

Join the #typescript Twitter discussion and follow the CodePlex project.


Tutorial – Best way to get up to speed on TypeScript.

Forums – Great place to get help with using TypeScript.

View Source Chart for IE

Thought i’d share that there’s an IE port of a valuable plugin i’ve used in Firefox for a while, View Source Chart:

Steps to get beautiful, visually sensible HTML source viewing in IE9:
1. Copy the script below and paste it into a new browser bookmark.
2. Click the bookmark from any page to view its source chart.

For other browsers, check the first code block on this page.

About View Source Chart

Cross-browser bookmarklet now available at

Eyesight is the most efficient way for the human brain to process information. By placing visual boundaries where they already exist invisibly, Source Charting enables you to take in DOM structure and hierarchy as fast as your brain possibly can.

When mentally building tag boundaries by reading a tag name, then using manual actions like clicking, finding and scrolling, we experience forced breaks in cognitive processing. As the DOM becomes more complex, more productivity is lost. It doesn’t take long before mentally navigating the DOM becomes impossible.

Source Charting eliminates the need for processing any other way but the fastest: visually. It provides an instant and complete visualization of hierarchical nesting of any tag in the view port.

Source Charting…
* Defines HTML Tag Boundaries (so you don’t have to)
* Defines DOM Structure and Hierarchy (so you don’t have to)

Case In Point: The Misapplication of Flowchart-style UI for DOM Inspectors
DOM inspectors and Folder Viewers have historically (and mistakenly) used flowchart-style GUIs to help users navigate hierarchies. The problem is that this type of GUI is intended to convey sequential movement or flow, not structure.

Because sequence and flow is measured one step at a time, the lines connecting elements in a flowchart-like GUI span only one generation (parent-child). When used to depict complex hierarchical structures like the DOM, the user is forced to inefficiently and inaccurately measure hierarchical nesting levels using white space indentation. (See image #3 above)

It is precisely this subtle but monumental mistake that View Source Chart overcomes.

The only way to visualize structure accurately is to measure hierarchical nesting. This is done simply by pictorially delineating element boundaries, which results in a manifestation of document structure.

For a full de-bugging How-To, visit

Cross-browser bookmarklet available at

Telerik acquires Fiddler

Great news, the greatest little open source web debugger, Fiddler, has now been aquired by the great vendor of .NET controls, Telerik. Expect some nice upgrades to Fiddler soon, and yes, it will remain free.

Full story:

“We have some very exciting news to share with the Telerik community. Telerik has just acquired Fiddler! Even more exciting is that Fiddler’s brilliant creator Eric Lawrence will come over from Microsoft to join the team fulltime. For those of you who don’t know, Fiddler is a web debugging proxy which logs all HTTP(S) traffic between your computer or device and the Internet. In other words, it is an essential tool for any web, desktop or mobile developer. The popularity and sophistication of Fiddler is hugely impressive considering this has been Eric’s informal side project for more than 8 years. With Eric joining the team he will be able to deliver on his vision for Fiddler with the full financial and resource backing of Telerik.

It might be apparent why Eric would jump at an opportunity to turn his side passion project into a full time position, but what might not be readily obvious is why Telerik would need a product like Fiddler in our portfolio.

Our strategy has always been to acquire when it makes sense and to use the new technology to improve our core products for the benefit of our customers. In the case of Fiddler, this was a natural extension because Fiddler is already in use as the core technology behind Test Studio’s load and performance features. Additionally, we gain a formidable competitive edge over other tools as both Eric and Fiddler join the Test Studio product family. The collaboration for enhancing Fiddler is already underway as well as discussions to further expand our portfolio and extend support for our customers.

The Fiddler community is very important to us. We have learned from the mistakes of others who have acquired free tools only to turn the tables on the community and monetize them at a later date. We admire what Fiddler has delivered to the community and want to expand that value by investing in things like expanded platform support, user interface improvements and a first class website with extensive community and support features.

That is why, as part of our commitment to keeping Fiddler free and making further investments into the tool, we have launched a poll on the Fiddler website asking the community to vote on the first improvements we will target. Whether you are an avid or occasional Fiddler user we would love to get your opinions on what you would like to see happen first.

To give you some insight into how popular Fiddler really is here are some stats, year to date. On average Fiddler receives over 9,000 installations EVERY DAY, and when I say average that is including weekends. That number jumps to over 10,000 for weekdays. The website has received more than 5 million unique visitors this year alone with over 80% of them being first time visits. Needless to say that the Fiddler community is not just big, it’s HUGE.

So please help me in welcoming Eric and the Fiddler community into the Telerik family. Great things are ahead for Fiddler as we continue to invest in and build an even better tool and community. To see how Fiddler is already powering Test Studio’s load and performance features download a trial today.”

CSSRegistrations and ScriptRegistration in SP 2010

The CssRegistration control adds each of the style sheets to an internal collection in the SPContext and the CssLink renders each of them in alphabetical order before rendering the primary, default, and alternate CSS links. If you want one of them to appear after core.css, set the DefaultUrl property of CssLink.

CSSLink Example:

<Sharepoint:CssLink runat="server" DefaultUrl="<% $SPUrl:~SiteCollection/Style Library/en-us/Core Styles/Style.css %>"/>

CssRegistration Example:

<SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/en-us/Core Styles/Style.css %>"
After="corev4.css" runat="server" EnableCssTheming="true"/>

It’s very easy to get confused by this because the CssRegistration controls are after CssLink, but they don’t render the links, CssLink does!
One advantage that the publishing definitions have over the SharePoint default.master is the $SPUrl expression that allows dynamic creation of the URL for sites under the root web that use the root web’s master pages. Unfortunately, while CssRegistration is part of the core Microsoft.SharePoint.dll, $SPUrl requires the publishing features to be turned on.

For a JS reference, it’s important to note that ScriptLink doesn’t support the expression builders like . If the script available in top-Level site, you can use:

<SharePoint:Scriptlink runat="server" name="~SiteCollection/Style Library/en-us/Core Styles/JS/script1.js" 
language="javscript" />

If the script avaialble in the current site, we can use:

<SharePoint:Scriptlink runat="server" name="~Site/Style Library/en-us/Core Styles/JS/script1.js" 
language="javscript" />

Anchor links / tags in SharePoint 2010

Standard HTML Anchor links are a traditional and useful means to send users to specific locations in web content.

To begin with, here is an example of a HTML anchor: Jump to Bottom
As you can see, HTML page anchors allow visitors to jump to a specific place in the current webpage, or to jump to a specific place on another web page.

You usually implement HTML anchors if you want a graphic or text to link half way down another page. That way your visitor isn’t required to read all through the page to get to the part their interested in.

To create an anchor HTML link that points to another place on the same webpage, you need to create two anchors:

First you create an anchor link that the person clicks on initially. Here is the HTML code for the anchor link.

<a href=”#anyword”>Go to any place</a>

Next, you need to create a named anchor in the spot that you are going to jump to. This anchor will require the following syntax.

<a name=”anyword”>Go to this place</a>

For example, if I wanted to allow folks jump from the words “Go to Bottom” to the bottom of the page I need to create 2 anchors.
I need to place an anchor that says “Go to Bottom” that points to the bottom of the page. The syntax is:

<a href=”#bottom”>Go to Bottom</a>

I also need to create a named anchor at the bottom of the page. The syntax is:

<a name=”bottom”>You’re at the bottom!</a>

HTML anchor links across two webpages

Now for the second type of HTML anchor. The script below creates a link that points to another place on a different webpage. Again, you need to create two anchors:

Create anchor on Page A pointing to “here” on page B

<a href=”PageB.html#Here”>Go to Here on Page B</a>

Place a named anchor on PageB.html

<a name=”here”>Here</a>

HTML Anchor Links in SharePoint

Unfortunately in some areas of SharePoint 2010 like Wiki pages, users experience a side-effect of all the gadgetry involved in the system: normal HTML anchors that they may enter into the content areas are “broken” and do not respond. I did some checking and found the following behavior:

-IE 8 – goes to the Anchor Tag on the new page, then jumps to the top. From my understanding this is due to the ribbon bar or something on the page that overrides focus
-IE 7 – works
-IE 6 – works g
-FireFox 12 – page loads and never generates a focus anywhere…not even the jump you get from IE 8

Solution 1 (Basic HTML editing comfort required):
Add the target anchor link as normal, in the following example Chapter1 is the text you replace with your own anchor name & text:

<a name="#Chapter1"></a>Chapter 1

Add the following as the hyperlink to the target:

<a onclick="javascript:this.href='#Chapter1';" href="javascript:;">Chapter 1</a>

Solution 2:
Edit your publishing page and select some text. Now click “Insert/Link/From Address”. In the pop up window just type “/” for the “Address” field. Remove “/” from the URL field and add “#Chapter1” or equivalent value to “Bookmark”. Now you will be able to create an anchor to “#Chapter1”. Just select some other text in your page. Now click “Insert/Link/From Address”. In the pop up window just type “#Chapter1” for “Address”. Save and your inpage link will work.

You’re at the bottom!

Open modal dialog and refresh the parent page from custom form SharePoint 2010


You need to open a SharePoint 2010 popup (SPModalDialog) and refresh the parent page on close.

So What

End Users get griefed when they add an amazing new bit of content to SharePoint, but after submitting it’s not immediately visible on the page they just “came from” (even though geeks know the score).

Now What

Add the following code (assuming you are up to snuff on the basics of the SP Modal Dialog methods – here’s a good primer):

<script type="text/javascript">
    function openMyDialog(itemid,title) {
        var options = SP.UI.$create_DialogOptions();
        var layoutsUrlView = SP.Utilities.Utility.getLayoutsPageUrl('WebParts/MyWebPart/ViewDialog.aspx')
        options.url = layoutsUrlView + "?itemid=" + itemid + "&title=" + title;
        options.autosize = true;
        options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
    function CloseCallback(result, target) {

Now when you close the popup, the parent page is refreshed.

Firefox Friday #1 – Useful Plugins for SharePoint Development

As SharePoint developers we are bound to IE but often fallback to other browsers for various reasons such as performance, HTML standards compliance, or in my case with Firefox – the plugins available.   The official Technet on what is and is not supported on various browsers (Chrome is notably not even in there): I will follow up this post with a list of what specifically will not work with SharePoint when using Firefox (so you can’t say I didn’t warn you!)

While Google Chrome is definitely a solid choice, if you are using Firefox the following plugins will help you out:

FasterFox Plugin

Various network tweaks that deliver a zippy experience. This will also speed up your SharePoint user experience greatly too.

  • Prefetch Links
    Dynamic speed increases can be obtained with Fasterfox’s unique
    prefetching mechanism, which recycles idle bandwidth by silently
    loading and caching all of the links on the page you are browsing.
  • Tweak Network
    Fasterfox allows you to tweak many network and rendering
    settings such as simultaneous connections, pipelining, cache,
    DNS cache, and initial paint delay.
  • Page Load Timer
    A millisecond accurate page load timer tests the effectiveness
    of your settings.
  • Block Popups
    A popup blocker for popups initiated by Flash plug-ins is also

1. Remember, just because you’ve got a turbocharged browser doesn’t mean your colleagues or clients do.  This plugin is a double-edged sword because you can get lazy or indifferent about performance problems on web applications. If you are developing, testing, or QA’ing systems you should either use a different browser (COUGH IETester COUGH) or temporarily disable Fasterfox.

2. The out of the box setting in the Firefox > Add-Ons > FasterFox > Options menu is “Optimized“. Set that bad boy to “Turbo Charged” and to hell with playing nice with server resources – our time is worth more!

Windows Media Player Plugin for Firefox

Description: Lets you run Windows Media content in Firefox. In particular you will be able to stream WMV videos such as the ones we have in the newly minted it groove SharePoint center directly in your browser window.

Web Developer Toolbar

Description: Adds a toolbar with a slew of options essential for anything webby. CSS, Forms, Images, Cookies, Viewing Source – instantly get Xray vision into any web page.

iMacros for Firefox

Description: Automate Firefox. Record and replay repetitious work. If you love the
Firefox web browser, but are tired of repetitive tasks like visiting the
same sites every days, filling out forms, and remembering passwords,
then iMacros for Firefox is the solution you’ve been dreaming of!
***Whatever you do with Firefox, iMacros can automate it.***


Description: With ColorZilla you can get a color reading from any point in your
browser, quickly adjust this color and paste it into another program.
You can Zoom the page you are viewing and measure distances between any
two points on the page. The built-in palette browser allows choosing
colors from pre-defined color sets and saving the most used colors in
custom palettes.

Basic end-user usage could be grabbing the color code for the blue from a clients logo and matching it up to another design element.


Description: Firebug integrates with Firefox to put a wealth of web development tools
at your fingertips while you browse. You can edit, debug, and monitor
CSS, HTML, and JavaScript live in any web page.

Learning to use Firebug is a whole different topic but it is possible for non-developers to get working with it to quickly id and delegate issues due to Javascript or CSS issues, broken images, etc.

Firebug also is required for Yahoo YSlow and the Google Pagespeed Firefox Plugins

SharePoint 2010 Get Current Username / Logged in User

Have been exploring the SharePoint Client Object Model and in particular the Javascript Object Model

While there are methods to get the current user info, you can also simply borrow the logged in username from the top right of the screen:

<script type="text/javascript">// <![CDATA[
 var Username = document.getElementById("zz16_Menu").innerHTML ;
 var end = Username.indexOf("<");
 var nameOnly = Username.substring(8, end);

// ]]></script>

This technique is a little complex for my liking however, so here’s a snappier way to grab the current login name (using Jquery):

var Username = $("#zz16_Menu").text();

Note that the #zz16 identifier will vary based on your Master page. Use the Firefox Web Developer tools or Internet Explorer F12 tools to find out what the ID should be on your SharePoint site.

Using this type of technique is definitely more brittle than actually using a CAML query however in my mind would be more performant than actually doing a lookup in the DB. Would love to know if someone knows the scoop on that..

Update 05/12/2011

As my colleague Colin pointed out – the name that appears on the top right can really be anything and can change – for example if a user gets married and their name changes. A better approach would be to retireve the value programmatically using SPServices ($%28%29.SPServices.SPGetCurrentUser ). As of version v0.6.1, you can also request the ID of the user by specifying fieldName: “ID”.  Much more stable to use in most scenarios:

	fieldName: "ID",
	debug: false