Category Archives: Programming

No comments

Symphony of Gulp and Bower for Front-end Web Development

Gulp and Bower. For some a nightmare and for some their best friends, but for all a must have in the modern web development. In this post I'm not going to talk about how to use one or the other. There is a gazillion (± 100) of other tutorials out there covering that. Take a look at this for Bower or this for Gulp. Instead, I'm going to talk about how they can ease your life and work together perfectly.


What is Bower and why should you use it?

Bower is a package manager for simple installation of front-end libraries. Libraries like, AngularJS, ReactJS, Bootstrap, Materialize and thousand more. It was created by two twitter employees back in 2012.

Installing and updating scripts is as easy as writing bower install angularjs --save in your command line or a terminal. It means you don't need to go to your browser, search and download Bootstrap (for example) and finally extract and copy required files into your project. Now imagine updating every single package in your project and there are 20 of them. An hour of pure boredom that will haunt you for days. Instead, you can use Bower, type bower update and do whatever you want while the magic is happening.

The downsides

If it's too good to be true, you probably have a fan boy talking. There are indeed a couple of downsides.

First of all, any tinkering with the source code of the packages is futile. The next update will override everything. So no more throwing components out of Bootstrap to reduce size because you just don't need them.

Second, the package you're searching might not exists. You don't really have a lot of options in that case. You can either revert back to the good old find, download, extract and copy way, beg someone to write that json file for a package or do it yourself. You can also download entire git repository with Bower, which leads us to other two problems.

Sometimes, git repository is exactly what you get. A folder with a bunch of files, when you almost always want only one or two. Or the other option when you get five versions of the same JavaScript library, one is probably bundled file, one is minimized version of it and a couple of more are there with no reason. Things like this really make you problems to automate everything, which is what we are going to (try) and solve.



Gulp is a task/build runner for development. Usually it handles most, ideally all, of the task related to the development workflow. There are a lot of packages to do simple tasks such as build sass to css, TypeScript to JavaScript, minimize and bundle things, I wouldn't be even surprised if there is a package that makes you coffee (and I don't have CoffeeScript in mind).

After first hour of toying with Gulp, frustrations and how nothing works, it's expected to search who is the author, search for his entire wider family and putting them on your kill list. But when it finally works and you realize how powerful it is, it'll always be your first weapon of front end web development. Just bear in mind that your disk might collapse into a black hole due to insanely large amount of files that come with NodeJS packages.

The problem of Gulp and Bower

Bower (package directory structure)

        // More JavaScript files
        // another 109 JavaScript files


gulp.task('scripts', function() {
    return gulp.src('./lib/*.js')

As mentioned Bower gives you a bunch of files, that are if you're lucky only triplicated. On the other side, you have Gulp that should get only one file. That is jquery.js.

The Solution

One option is to manually update a json of files which are relevant to you. I honestly hope that at least someone sees this as a bad idea, waste of time and is too lazy to do it.

Instead of manually tracking which files we want, we're going to automate it. Automate everything! The first and the only problem is probably how to find relevant files for us? After an inspection of Bower files, you can see that in every bower.json there is a main property, which tells us what are the relevant files.

  "name": "jquery",
  "main": "dist/jquery.js",
  "license": "MIT",
  "ignore": [

Now we have everything. To get those main files to Gulp, there is a package called main-bower-files.

var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');

gulp.task('scripts', function() {
    return gulp.src(mainBowerFiles('/**/*.js'))

I have Visual Studio and NuGet!

Visual Studio is awesome. NuGet also, as long as front-end web development isn't involved. Packages are usually a couple of months old. Everybody that had fifteen minutes of spare time created its own package even if it already exists (now figure which one the best among the worst) and you have even less control than with Bower. So do yourself a favor and forget that NuGet exists for front-end web development.


Sit back and enjoy, how everything is installing and being updated for you, with a click of a button :).


Disclaimer: Problems mentioned exist purely trough my perspective. If your experience is different and you can convince me about it, please do so!


ASP.NET 5 and SignalR 3

SignalR is a great library from Microsoft for working with WebSockets. It's really fast and supports various fallbacks even for people that use browsers from stone age itself (IE6 for example, but let just hope nobody uses it anymore).

Of course not everything is that nice... When it comes to implementing it in ASP.NET 5 with absolutely NO documentation the entire process of setting this two frameworks/libraries together can be very, very painful.

First thing, to be able to download latest version of SignalR 3 for ASP.NET 5 MyGet repository needs to be referenced. I Added Nuget.config with the following content, but you can also add an URL to global NuGet configuration:

<?xml version="1.0" encoding="utf-8"?>
    <add key="enabled" value="True" /> <!-- Allow NuGet to download missing packages -->
    <add key="automatic" value="True" /> <!-- Automatically check for missing packages during build in Visual Studio -->
    <add key="aspnetmaster" value="https://www.myget.org/F/aspnetmaster/api/v3/index.json" />

After that is set up, go to project.json and add the following line to dependencies:

"Microsoft.AspNet.SignalR.Server": "3.0.0-*"

The last thing needed to be done is to add SignalR to the application. To do that go to Startup.cs and make sure that you have the following line somewhere in Configure method.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    // ...
    // ...

At this step everything is ready to go. You can follow any SignalR tutorial, like this chat room for example. At this point there are no updated client side JavaScript libraries, version 2.2.0 works just fine but on the bad side you're still stuck with jQuery...

Some unfortunate souls like myself may stumble upon the following exception:

InvalidOperationException: No service for type 'Microsoft.AspNet.SignalR.Hubs.IJavaScriptProxyGenerator' has been registered.

At this point there are two choices. First one is to manually generate JavaScript files for all Hubs in the project, more about this you can read here, or the second option that I prefer is to register the default provider and all of the JavaScript code is automatically generated. To do this, simply go back to your Startup.cs into ConfigureServices method, and make sure that you have the following line inside:

public void ConfigureServices(IServiceCollection services)
    // ...
    // ...

That's it! SignalR 3 should now successfully work together with ASP.NET 5 with automatic code generation.

No comments

Slides and Demos from AngularJS 1.x Presentation

A couple of days ago I had a presentation about AngularJS 1.x. If anyone is interested below are slides and link to demo project.

No comments

AngularJS hide fields until initialized

A pesky thing about AngularJS is that all of the code in HTML that is mustache {{ is visible. To avoid this everything related to AngularJS can be hidden until website is finished loading up using:

.x-ng-cloak {
    display: none !important;


1 comment

C# and AngularJS - Receive Post data

AngularJS is awesome, C# also. But AngularJS has slightly unstandardized way of sending data over networks. Data is packet body instead of header, which may cause quite some problems  if you're unaware of this.

MVC Framework will automatically deserialize data into object when it receives, you only need to tell it that it should look for data in body instead of header.

public int method([FromBody]Model m)
        // ...


No comments

ASP.NET 5 Change Default Views Directory

Testing out new asp.net 5 MVC project template and integrating it into an existing project, predefined project structure didn't really suite my needs. Most of the things work if you move them into a subdirectory, Views directory isn't one of those. You need to create IViewLocationExpander and add it to appropriate service. Example bellow remaps everything into Server subdirectory.

public class ViewsLocationRemapper : IViewLocationExpander
    public void PopulateValues(ViewLocationExpanderContext context)
        // Do nothing

    public IEnumerable<string> ExpandViewLocations(ViewLocationExpanderContext context, IEnumerable<string> viewLocations)
        return viewLocations.Select(loc => "Server" + loc);

And then in Startup.cs, ConfigureServices. method, simply call:

services.Configure<RazorViewEngineOptions>(o =>
    o.ViewLocationExpanders.Add(new ViewsLocationRemapper());

Of course it can be used for simple tasks like prefixing Shader directory with _ (underscore), so that it can be easily found in Solution Explorer.

No comments

Styling HTML checkboxes only with CSS

These days' web designs are usually more important than functionality or content itself and It's a real nightmare for every developer to realize dreams of designers. Those usually involve some super fancy styling over checkboxes, radio buttons or other input types which style can't be overridden because it's locked by browser.

Fortunately to keep functionality of one, they don't need to be styled, they can be easily faked with some HTML and CSS.

Continue reading

No comments

Taming Bootstrap 3 - Columns Same Height

During my recent work on a web design layout with bootstrap, I came across a layout that required all bootstrap columns to be the same height. After some experimenting with various positions such as absolute inside relative etc. and none of them working as they should, I ended up using display: flex and wrapped it in a snippet as bellow.

@media (min-width: 992px) {
    .row-eq-height, .row-eq-height > div[class*='col-'] {
        display: -webkit-flex;
        display: flex;
        flex:1 1 auto;

Usage example and demo are shown here:

<div class="container">
    <div class="row row-eq-height">
        <div class="col-sm-4 col-1" style="background: red">
            Some Text
        <div class="col-sm-4 col2" style="background: green"></div>
        <div class="col-sm-4 col3" style="background: blue"></div>
No comments

Measuring Decibels from Microphone

This year was my third year as a mentor at a summer computer camp. We all had lots of fun, the only problem was that the participants - mostly teenage kids at the beginning of the high school - were quite talkative. Loud. To solve this problem a colleague and I came up with a nice solution for the next year.

Continue reading

No comments

Playing Video from WebCam with OpenCV and C++

Cross platform video grabbing can sometimes be really painful. Another great thing about OpenCV is that it solves such problems for you with a couple of clean lines of code.

#include <iostream>
#include "opencv2/highgui/highgui.hpp"

using namespace std;
using namespace cv;

int main()
    VideoCapture cam(0);

    if (!cam.isOpened())
        return -1;

    cv::Mat frame;

    while (true)
        imshow("Cam:", frame);

    return 0;