Upload changed display templates to SharePoint using Gulp

Here is a quick tip which might be helpful when working with display templates. A typical SharePoint solution can have a large number of display templates but while working with them, you might me modifying/customizing only one at a time. Here is a quick gulp task I have put together which watches for changes in the HTML file of the display template and uploads only the changed display templates to the Master Page gallery.

Then I just start the watch task and change/save a display template:

Whenever I save an HTML file of my display template, it gets uploaded and checked-in in the Master Page Gallery. That causes a corresponding JS file to get generated automatically so I don't have to worry about managing it. 

If you are maintaining your Display Template JS files in source control, you will have to remember to copy the generated JS file back into your solution. 

Hope this helps you speed up your Display Template development. I have uploaded this project on GitHub here: https://github.com/vman/Gulp.DisplayTemplates

Thanks for reading!

Web Development Tools & Reference

Just a list of tools and reference material which I think is really useful for Web Development:

JavaScript:

1) jslint : http://www.jslint.com/

JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool. JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.

2) jsperf : http://jsperf.com/

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

3) jsfiddle: http://jsfiddle.net/

Test and share JavaScript, CSS, HTML or CoffeeScript online.

4) JavaScript Garden : http://bonsaiden.github.com/JavaScript-Garden/

JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.

Tools

1) Postman REST Client: https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

2) REST Client for Firefox: https://addons.mozilla.org/en-US/firefox/addon/restclient/

3) Firebug: https://getfirebug.com/

4) JSON Pretty Print: http://jsonprettyprint.com/

Reference:

1) Mozilla Developer Network : https://developer.mozilla.org/en-US/

Performance:

1) Browser Diet : http://browserdiet.com/

2) Yahoo Best Practices for Speeding up your WebSite: https://developer.yahoo.com/performance/rules.html

3) Google Web Development Best Practices: https://developers.google.com/speed/docs/best-practices/rules_intro?hl=sv

4) Why you should always host jQuery on the Google CDN: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

Use pure html pages (instead of .aspx) in SharePoint 2010

So I was working on one of my unit testing projects which displayed the results in a plain old .html page. When integrating it with SharePoint 2010,  I realized that I could not navigate to .html pages. When I entered the URL of a html page, the browser asked me whether I wanted to download the html file instead of displaying it in the browser.

After some digging around I came across this very informative post:
http://social.technet.microsoft.com/wiki/contents/articles/8073.sharepoint-2010-browser-file-handling-deep-dive.aspx

So basically there are two modes for file handling in SharePoint 2010. "Strict" and "Permissive". Strict mode entails that only the trusted filetypes in the web application are opened in the browser. For all the rest of the filetypes the response will include a "X-Download-Options: noopen" header. This header will basically instruct the browser not to open the file inline.
When the mode is Permissive, no such restriction will be placed on the files. If a file lives inside SharePoint, then it will be displayed inline by the browser.

You can create a hybrid approach by keeping the Browser file handling mode as "Strict" and using the
SPWebApplication.AllowedInlineDownloadedMimeTypes property of the web application to specify which file types are trusted in your web application.

By default the Browser File Handling property of the Web Application is set to "Strict". To change it to permissive, follow these steps:

Go to Central Administration > Manage Web Applications > [Highlight a web application] > click General Settings in the Ribbon > Scroll down in the General Settings window to see Browser File Handling. Set as desired. Save settings.

Note: The recommended option from Microsoft regarding Browser File Handling is "Strict"

(Quick and Dirty hack: You can keep the extension of a file as .aspx and include pure html inside it and SharePoint will run it even if the Browser File Handling is set to "Strict")