Konstantin Tarkus's Tech Blog

AngularJS, Backbone, Durandal, CanJS: The Recent Activity on...

Sat, 04 Jan 2014 23:29:50 +0400

AngularJS, Backbone, Durandal, CanJS: The Recent Activity on GitHub

How to Customize Twitter Bootstrap with Git and NuGet in Visual Studio

Thu, 19 Dec 2013 18:43:00 +0400

The following workflow can be used for advanced customization of any 3rd party library containing source code and is available on NuGet package gallery. Like, for example, Twiter.Bootstrap.Less NuGet package.

Assuming you have a Visual Studio solution with a web application project in it. This solution is already under Git source control.

Before installing a new NuGet package, you create a special branch for it.

Install Twiter.Bootstrap.Less NuGet package, commit these changes to the ‘bootstrap’ branch, and merge it with the 'master’ branch.

From there on you can make any customization you want to Bootstrap files (*.less) in your 'master’ branch - move them around to suite your preferred project structure, change file contents, add or remove files etc. And whenever a new version of Bootstrap library released, you update it in your project via NuGet on a separate 'bootstrap’ branch, then merge it with the 'master’.

Finally, for automatic compilation of .less files in your project you may want to use Node.js and RECESS (recommended by Bootstrap team).

Windows Azure VMs Remote Management

Tue, 22 Oct 2013 12:45:00 +0400

The regular way to manage Windows Server machines is to setup and use Remote Desktop. However, sometimes that’s not the most convenient way of managing your servers. Let me show you how to manage Windows Azure VMs from a local machine using Server Manager and PowerShell Remoting.

Step 1. Download and install Remote Server Administration Tools for Windows 8.1 aka Server Manager (assuming your local machine is Windows 8.1; or choose an appropriate version of this tool)

Step 2. On each VM go to Server Manager > Local Server > Properties and enable Remote management (assuming you have Windows Server 2012 R2 installed on your Windows Azure VM roles):

Then open Windows Firewall with Advanced Security > Inbound Rules > Windows Remote Management (HTTP-In) (Public Profile) > Properties:

Add your public IP (from which you’ll be connecting to your Azure VMs) to the scope:

Step 3. For each Azure VM add WinRM (TCP 5985) endpoint via Windows Azure Management Portal:

Step 4. Add your Azure VMs to the trusted hosts list by running the following PowerShell script:

Set-Item WSMan:\localhost\Client\TrustedHosts SERVERNAME.cloudapp.net -Concatenate -Force

Step 5. Open Server Manager on your local workstation and add remote VM servers to the list (by DNS name):

Right-click on a newly added server in the list > Manage as… and enter your VMs administrator credentials:

That’s it! Now you can manage your Azure VMs from a single place.

If you need a command line access just right-click on a server > Windows PowerShell, which will start up a PowerShell Remoting session:

Lean Startup / Business Model Canvas

Thu, 12 Sep 2013 19:47:00 +0400

For those of you exploring the nice world of entrepreneurship and startups I want to share a Word document template of a business model canvas optimized for Lean Startups. For more info read the «Running Lean» book by Ash Maurya and «The Lean Startup» by Eric Ries.

Download: Business Model Canvas.dotx (Microsoft Word template)

Visual Studio 2013 Preview with AngularJS Support

Sat, 29 Jun 2013 16:33:00 +0400

Good news, guys! Visual Studio 2013 Preview has now IntelliSense for AngularJS in its brand new HTML editor.

Also a more friendly HTML validation, automatic brace completion and type-through, IntelliSense item grouping, smart ident and formatting, better Razor experience…

AngularJS, ASP.NET MVC and SEO

Mon, 24 Sep 2012 22:31:00 +0400

What if you want your single-page app to behave like a regular multi-page website when the client’s browser doesn’t support JavaScript? Here is an example of how to implement it with AngularJS and ASP.NET MVC:

Demo: http://angularjs-seo.tarkus.me/

Create a new ASP.NET MVC 4 project. Extract HTML from within the <body> tag of the /Views/_Layout.cshtml file into a separate layout (_BodyLayout.cshtml).

At the top of _BodyLayout.cshtml, specify the parent layout and make sure it will be set to null if the request is made with the “X-Requested-With: XMLHttpRequest” header by using Request.IsAjaxRequest()

Update the default layout name in /Views/_ViewStart.cshtml.

Add a reference to angular.js and your custom app.js files in the parent layout (_Layout.cshtml). Add <ng-view>@RenderBody()<ng-view> into _Layout.cshtml.

Add the ng-app=“App” attribute to the <html> tag and insert the following code into your app.js file with routing information:

var app = angular.module('App', []);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', { templateUrl: '/home/index' })
        .when('/home/about', { templateUrl: '/home/about' })
        .when('/home/contact', { templateUrl: '/home/contact' });
    $locationProvider.html5Mode(true);
}]);

That’s it!

Sample project - AngularJS SPA Template for Visual Studio

"Controlling complexity is the essence of computer programming."

Mon, 24 Sep 2012 01:42:10 +0400

“Controlling complexity is the essence of computer programming.”

- Brian Kernighan

AngularJS + ASP.NET MVC: Q and A

Sun, 23 Sep 2012 18:07:00 +0400

In this blog will I try to answer a few questions you may have if you’re starting single-page web application (SPA) development with AngularJS and ASP.NET stack of technologies (ASP.NET MVC, ASP.NET Web Pages, ASP.NET Web Api, SignalR, Entity Framework, TypeScript…)

Q: Will I have any issues if I choose ASP.NET on a back-end for my single-page app? What are the alternatives?

Many folks are happy using Node.js + Express on a back-end. But if you’re already familiar with .NET you may take an advantage of using Visual Studio IDE + Visual Studio Online (formerly TFS), which gives you almost all the required tools out of the box like - great code editor and debugger, Git source control, agile/scrum planning, unit / load / UI testing, continuous integration, automated deployment, Windows Azure dev tools (see what’s new in Visual Studio 2013).

Also with ASP.NET you have a choice of using most of the required libraries and components required for building single-page apps from a single vendor, built on a common architectural ground (see OWIN). In overall I don’t think you’ll have any issues if you go ASP.NET route.

Q: Which project template to choose for an AngularJS web app?

Starting with an “Empty” project template is good I think, it will keep your project clean and free of some artifacts you may never use (for example, are you sure you need ASP.NET MVC-based help pages for your RESTful service if you choose “Web Api” template?)

Q: Should I use ASP.NET MVC, ASP.NET Web Pages or just plain HTML pages for my AngularJS views (templates)?

If you choose ASP.NET MVC, you may end up implementing two MVC code bases - one for server-side and another for client-side. I lean towards keeping things simple and avoid using ASP.NET MVC on the server side unless you’re really need one; use ASP.NET Web Pages intstead. ASP.NET Web Pages (.cshtml) also give you more flexibility in comparison to plain HTML-based templates (.html) - Razor HTML helpers, an ability to have nested templates, layouts, easier to optimize website for search engines (SEO).

Q: OK. How do I add ASP.NET Web Pages support to my project?

Right-click on the project in Solution Explorer > Manage NuGet Packages:

Other than installing “Microsoft ASP.NET Web Pages”, you need to include an appropriate sections to your Web.config file:

Here you may want to add some other namespaces you want to make available by default inside Razor pages.

Q: OK. I’m using ASP.NET Web Pages instead of MVC. Where are the @Model and other HTML helpers?

ASP.NET Web Pages has a different set of HTML helpers, for example, instead of @Model you can use @PageData etc.

For more info, visit this: http://www.asp.net/web-pages

Q: How to set page titles with AngularJS?

The easiest way is to store page titles alone with your route information (in case you’re using ngRoute ur UI Router). Then you can attach a handler on ’$routeChangeSuccess’ event and update the title of a page whenever URL path is set or updated.

If your page titles are not static (you don’t know them upfront, but generate based on a response from a server) then a good place to set them would be - inside controllers. For example:

And you would need to add ng-bind attribute to the <title> element in a layout template:

Finally, for SEO reasons, you may also want to set page titles in partial views as well:

…

I’m currently updating this post. Please, come back later.

For code samples visit: AngularJS SPA Template for Visual Studio

As you probably know, there is currently no way to add...

Wed, 19 Sep 2012 14:56:00 +0400

As you probably know, there is currently no way to add descriptions to SQL Azure db objects. So, how do you comment db schema assets in your database projects?