Running Gulp Tasks from Visual Studio Code

I recently started running my gulp tasks directly from Visual Studio Code instead of command line, I am going to explain how to do that.

Step1: Make sure your project has Gulpfile.js or gulpfile.babel.js

Step2: In Visual Studio Code once you open the project, press CMD + SHIFT + P (CTRL + SHIFT + P in Windows), this open the Command Pallet.

command palette

Step3: In Command Pallet type Configure Task Runner or CTR then select Configure Task Runner.

command palette tasks

Step4: Above step will show the list of task runners supported by Visual Studio Code, select Gulp form list.

gulp task

Step5: Above step will create a tasks.json file under .vscode folder in your project.

tasks json

Step6: Now launch Command Pallet once again by by pressing CMD + SHIFT + P (CTRL + SHIFT + P in Windows), type Run Task and select it.

command palette run task

Step7: Above step will display the list of task in your Gulp file.

gulp tasks

Step8: You can select any task from the list. I am select the default task from gulp tasks, you can see the default task running below.

gulp default task

If you want stop any currently running task in Visual Studio Code, go to command pallet then select Terminate Running Task. We follow the same process to run the tools like Ant, Gulp, Make, Maven, MSBuild, NPM, Jake or any tool we can run from command line in Visual Studio Code.

Set Custom Github Icon to Folder in OS X

There are so many blog post explains the complex process of setting a custom icon for a folder in OS X. Neither I don’t want to run complex scripts nor go through some complex process.

GitHub Folder Icon

I found a simplest solution on the Github by Gregory Zuckerman. I cloned his Github icons repository to my github account. You can find the repository at the following location.

To set custom github icon to a folder in OS X, first clone or download the above repository to your mac. Then run the following command in the cloned or downloaded repository folder using your favourite terminal.

./setfileicon icns/icon.icns /path/to/your/github-folder


Using similar process you can set any custom icon to any folder in OS X.

Storing JSON Objects in HTML5 Local Storage

In one my recent application (HTML 5 static mobile app) I have a requirement to persist couple of JSON objects across the application. Earlier, this was done with cookies.

With HTML5, web pages can store data locally within the user’s browser using Web Storage. Web Storage is more secure and faster compare to cookies. The data is not included with every server request, but used only when asked for. It is also possible to store large amounts of data, without affecting the website’s performance. Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.


Difference between Html.RenderAction and Html.Action

Html.RenderAction() and Html.Action()  methods   are available in ChildActionExtensions (System.Web.Mvc.Html) class in ASP.NET MVC. Generally both methods are used for calling action methods or child action methods  and rendering the result of action method in view.

@Html.Action() – Invokes the specified child action method and returns the result as an HTML string.

@{ Html.RenderAction(); } – Invokes the specified child action method and renders the result inline in the parent view. This method is more efficient if the action returns a large amount of HTML.


Improvements in Razor in ASP.NET MVC 4

First version of razor is shipped with ASP.NET MVC 3. ASP.NET MVC 4 come with Razor V2.0. Razor V2.0 includes some tiny & happy features.

URL Resolution Enhancements:

We use the relative URL for any resources (images, scripts, css) in code , for example :

<script src="~/Scripts/jquery-1.8.2.js"></script>

But in runtime we should resolve the full path of the resource (absolute URL), to do this in ASP.NET MVC 3 we use Content() method of UrlHelper class.