juristr.com

Blog Like a Hacker with Jekyll and Nitrous.IO

2013-05-08T00:00:00-07:00

One of the best moves I probably did about half a year ago was to move my Blog from blogger to Jekyll, hosted on GitHub. It simply reflects the kind of blogging experience you want as a dev, with Markdown support, full version control and amazing hosting on GitHub plus - not to forget - Jekyll. What I was missing so far, however, was the ability to blog from any computer or even tablet. Today I found a possible workflow: Nitrous.IO

Jekyll is awesome as a blogging engine. You get an engine that allows to dynamically generate static pages: the best of both worlds! This allows to have full control over the generated HTML code. Moreover Markdown editing is absolutely perfect for writing technical blog posts with lots of source code in it. There’s nothing really I miss, except for..well you know when you’re on another machine and you’d just like to quickly edit some post or even publish a new one, or when you’d like to use your tablet for finishing that blog post…you simply can’t. Why? Because Jekyll requires a working Ruby installation + if you have it hosted on GitHub (as I have) you need Git installed as well. On a table that doesn’t work. Or does it?

Nitrous.IO Makes It Possible

Simply speaking Nitrous.IO is a cloud IDE similar to Cloud9 but with the additional focus to give you a complete development box, with SSH access and in-browser shell. Their goal is to make a new setup as easy as possible.

Hello World in 60 Seconds. Managing development environments is a pain. Get setup lightning fast in the cloud & code from anywhere, on any machine. nitrous.io/

And it is literally set up in seconds.

Nitrous has the concept of boxes

Nitrous Boxes

When you setup a new box you’re being asked to choose your environment. Currently these are supported:

Once selected, Nitrous will setup your box and immediately afterwards you’ll be forwarded to the corresponding cloud IDE:

Note the shell window in the lower region of the IDE. This is a full SSH access to your box. You can even configure Nitrous to use Putty (Windows) or your unix shell to SSH into your cloud box. Extremely nice!!

Configuring Jekyll on Nitrous

Since Nitrous gives you full access either through SSH or directly through a shell in its web IDE and given that Ruby is one of the native development platforms available on it, setting up Jekyll is really just a matter of minutes.

Configure GitHub

Configuring GitHub is - again - easy as Nitrous is already designed to be connected to it. You can just follow the instructions provided on their help site.

Once that’s set up, just clone your blog from GitHub.

Install Jekyll

Just follow the instructions on its official homepage and execute

$ gem install jekyll

Enter your previously downloaded Jekyll blog repository and start Jekyll through the corresponding rake task.

$ rake preview

Start Blogging

Now you can open the corresponding blog markdown file in the web IDE and start writing your blog post. You can even directly run Jekyll on Nitrous and preview the resulting posts in the browser while writing it.

Thanks to Chrome on Android you can seamlessly also write your Jekyll blog post from your tablet!

Once finished, just git push it to GitHub as usual for publishing the post.

Conclusion

So do I like Nitrous? Of course, what I have seen is impressive given it is only in private beta. But actually the use case described in this post isn’t probably the intended one. Instead, to be able to get a better overview of Nitrous one would have to explore its features in terms of code editor support and so on by developing a piece of software directly on that platform, i.e. using NodeJS. So far I have played with Nitrous only for a couple of hours.

Would such workflow be possible in another Cloud IDE as well?? Sure, why not. I didn’t try any other cloud IDE like Cloud9 extensively, but as long as you have shell access and can run Ruby on it, it should work just fine.

Perfect Workflow in Sublime Text 2

2013-05-06T00:00:00-07:00

I previously wrote about my Sublime Text setup. Well, Tuts+ has published a quite nice Sublime Text tutorial showing most of Sublime’s features. Regardless of whether you’re a Sublime Text enthusiast or not, you should definitely take a look at the tutorial.

The tutorial covers all of the aspects I could think of or which I encountered in using Sublime so far, like:

Multiple Cursors
Fuzzy Search
Command Palette
Package Control
Code Snippets
Essential Plugins (like Emmet for Zen Coding, Sublime Linter, Live Reload,…)
(much more)…

The different single sessions are directly available for free at the Tuts+ site: https://tutsplus.com/course/improve-workflow-in-sublime-text-2/.

Instead, if you prefer to watch all the tutorials “all-in-one” then there’s a cut available on Youtube. Lasts about 2 1/2 hours:

Git Explained: For Beginners

2013-04-30T00:00:00-07:00

I’m working with Git now for about two years but only for my personal projects and those I have on GitHub. At work we still use TFS and SVN (as of now). Recently Paolo Perrotta came to our company to hold a course about Agile planning and since Git was quite new to most of my mates, he also quickly explained Git in the context of refactoring. I really liked his approach of explaining it and that’s why I’d like to replicate his explanation here.

Just before we start..

How is Git different from other VCS (Version Control Systems)? Probably the most obvious difference is that Git is distributed (unlike SVN or TFS for instance). This means, you’ll have a local repository which lives inside a special folder named .git and you’ll normally (but not necessarily) have a remote, central repository where different collaborators may contribute their code. Note that each of those contributors has an exact clone of the repository on their local workstation.

Git itself can be imagined as something that sits on top of your file system and manipulates files. Even better, you can imagine Git as a tree structure where each commit creates a new node in that tree. Nearly all Git commands actually serve to navigate on this tree and to manipulate it accordingly.
As such in this tutorial I’d like to take a look at how Git works by viewing a Git repository from the point of view of the tree it constructs. To do so I walk through some common use cases like

adding/modifying a new file
creating and merging a branch with and without merge conflicts
Viewing the history/changelog
Performing a rollback to a certain commit
Sharing/synching your code to a remote/central repository

Terminology

Here’s the git terminology:

master - the repository’s main branch. Depending on the work flow it is the one people work on or the one where the integration happens
clone - copies an existing git repository, normally from some remote location to your local environment.
commit - submitting files to the repository (the local one); in other VCS it is often referred to as “checkin”
fetch or pull - is like “update” or “get latest” in other VCS. The difference between fetch and pull is that pull combines both, fetching the latest code from a remote repo as well as performs the merging.
push - is used to submit the code to a remote repository
remote - these are “remote” locations of your repository, normally on some central server.
SHA - every commit or node in the Git tree is identified by a unique SHA key. You can use them in various commands in order to manipulate a specific node.
head - is a reference to the node to which our working space of the repository currently points.
branch - is just like in other VCS with the difference that a branch in Git is actually nothing more special than a particular label on a given node. It is not a physical copy of the files as in other popular VCS.

Workstation Setup

I do not want to go into the details of setting up your workstation as there are numerous tools which partly vary on the different platforms. For this post I perform all of the operations on the command line. Even if you’re not the shell-guy you should give it a try (it never hurts ;) ).

To setup command line Git access simply go to git-scm.com/downloads where you’ll find the required downloads for your OS. More detailed information can be found here as well.

After everything is set up and you have “git” in your PATH environment variable, then the first thing you have to do is to config git with your name and email:

$ git config --global user.name "Juri Strumpflohner"
$ git config --global user.email "myemail@gmail.com"

Lets get started: Create a new Git Repository

Before starting, lets create a new directory where the git repository will live and cd into it:

$ mkdir mygitrepo
$ cd mygitrepo

Now we’re ready to initialize a brand new git repository.

$ git init
Initialized empty Git repository in c:/projects/mystuff/temprepos/mygitrepo/.git/

We can check for the current status of the git repository by using

$ git status
# On branch master
#
# Initial commit
#
nothing to commit (create/copy files and use "git add" to track)

Create and commit a new file

The next step is to create a new file and add some content to it.

$ touch hallo.txt
$ echo Hello, world! > hallo.txt

Again, checking for the status now reveals the following

$ git status
# On branch master
#
# Initial commit
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       hallo.txt
nothing added to commit but untracked files present (use "git add" to track)

To “register” the file for committing we need to add it to git using

$ git add hallo.txt

Checking for the status now indicates that the file is ready to be committed:

$ git status
# On branch master
#
# Initial commit
#
# Changes to be committed:
#   (use "git rm --cached <file>..." to unstage)
#
#       new file:   hallo.txt
#

We can now commit it to the repository

$ git commit -m "Add my first file"
  1 file changed, 1 insertion(+)
  create mode 100644 hallo.txt

It is common practice to use the “presence” in commit messages. So rather than writing “added my first file” we write “add my first file”.

So if we now step back for a second and take a look at the tree we would have the following.

State of the repo tree after 1st commit

There is one node where the “label” master points to.

Add another file

Lets add another file:

$ echo "Hi, I'm another file" > anotherfile.txt
$ git add .
$ git commit -m "add another file with some other content"
  1 file changed, 1 insertion(+)
  create mode 100644 anotherfile.txt

Btw, note that this time I used git add . which adds all files in the current directory (.).

From the point of view of the tree we now have another node and master has moved on to that one.

Create a (feature)branch

Branching and merging is what makes Git so powerful and for what it has been optimized, being a distributed version control system (VCS). Indeed, feature branches are quite popular to be used with Git. Feature branches are created for every new kind of functionality you’re going to add to your system and they are normally deleted afterwards once the feature is merged back into the main integration branch (normally the master branch). The advantage is that you can experiment with new functionality in a separated, isolated “playground” and quickly switch back and forth to the original “master” branch when needed. Moreover, it can be easily discarded again (in case it is not needed) by simply dropping the feature branch.

But lets get started. First of all I create the new feature branch:

$ git branch my-feature-branch

Executing

$ git branch
* master
  my-feature-branch

we get a list of branches. The * in front of master indicates that we’re currently on that branch. Lets switch to my-feature-branch instead:

$ git checkout my-feature-branch
Switched to branch 'my-feature-branch'

Again

$ git branch
  master
* my-feature-branch

Note you can directly use the command git checkout -b my-feature-branch to create and checkout a new branch in one step.

What’s different to other VCS is that there is only one working directory. All of your branches live in the same one and there is not a separate folder for each branch you create. Instead, when you switch between branches, Git will replace the content of your working directory to reflect the one in the branch you’re switching to.

Lets modify one of our existing files

$ echo "Hi" >> hallo.txt
$ cat hallo.txt
Hello, world!
Hi

…and then commit it to our new branch

$ git commit -a -m "modify file adding hi"
2fa266a] modify file adding hi
1 file changed, 1 insertion(+)

Note, this time I used the git commit -a -m to add and commit a modification in one step. This works only on files that have already been added to the git repo before. New files won’t be added this way and need an explicit git add as seen before.

What about our tree?

So far everything seems pretty normal and we still have a straight line in the tree, but note that now master remained where it was and we moved forward with my-feature-branch.

Lets switch back to master and modify the same file there as well.

$ git checkout master
Switched to branch 'master'

As expected, hallo.txt is unmodified:

$ cat hallo.txt
Hello, world!

Lets change and commit it on master as well (this will generate a nice conflict later).

$ echo "Hi I was changed in master" >> hallo.txt
$ git commit -a -m "add line on hallo.txt"
c8616db] add line on hallo.txt
1 file changed, 1 insertion(+)

Our tree now visualizes the branch:

Merge and resolve conflicts

The next step would be to merge our feature branch back into master. This is done by using the merge command

$ git merge my-feature-branch
Auto-merging hallo.txt
CONFLICT (content): Merge conflict in hallo.txt
Automatic merge failed; fix conflicts and then commit the result.

As expected, we have a merge conflict in hallo.txt.

Hello, world!
<<<<<<< HEAD
Hi I was changed in master
=======
Hi
>>>>>>> my-feature-branch

Lets resolve it:

Hello, world!
Hi I was changed in master
Hi

..and then commit it

$ git commit -a -m "resolve merge conflicts"
[master 6834fb2] resolve merge conflicts

The tree reflects our merge.

Fig 1: Tree state after the merge

Jump to a certain commit

Lets assume we want to jump back to a given commit. We can use the git log command to get all the SHA identifiers that uniquely identify each node in the tree.

$ git log
commit 6834fb2b38d4ed12f5486ebcb6c1699fe9039e8e
Merge: c8616db 2fa266a
Author: = <juri.strumpflohner@gmail.com>
Date:   Mon Apr 22 23:19:32 2013 +0200

    resolve merge conflicts

commit c8616db8097e926c64bfcac4a09306839b008dc6
Author: Juri <juri.strumpflohner@gmail.com>
Date:   Mon Apr 22 09:39:57 2013 +0200

    add line on hallo.txt

commit 2fa266aaaa61c51bd77334516139597a727d4af1
Author: Juri <juri.strumpflohner@gmail.com>
Date:   Mon Apr 22 09:24:00 2013 +0200

    modify file adding hi

commit 03883808a04a268309b9b9f5c7ace651fc4f3f4b
Author: Juri <juri.strumpflohner@gmail.com>
Date:   Mon Apr 22 09:13:49 2013 +0200

    add another file with some other content

commit aad15dea687e46e9104db55103919d21e9be8916
Author: Juri <juri.strumpflohner@gmail.com>
Date:   Mon Apr 22 08:58:51 2013 +0200

    Add my first file

Take one of the identifiers (also if it isn’t the whole one, it doesn’t matter) and jump to that node by using the checkout command

$ git checkout c8616db
Note: checking out 'c8616db'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:

  git checkout -b new_branch_name

HEAD is now at c8616db... add line on hallo.txt

Note the comment git prints out. What does that mean? Detached head means “head” is no more pointing to a branch “label” but instead to a specific commit in the tree.

You can think of the HEAD as the “current branch”. When you switch branches with git checkout, the HEAD revision changes to point to the tip of the new branch. … It is possible for HEAD to refer to a specific revision that is not associated with a branch name. This situation is called a detached HEAD. Stackoverflow Post

Basically when I now change hallo.txt and commit the change, the tree looks as follows:

Detached head state

As you can see, the newly created node has no label on it. The only reference that currently points towards it is head. However, if we now switch to master again then the previous commit will be lost as we have no way of jumping back to that tree node.

$ git checkout master
Warning: you are leaving 1 commit behind, not connected to
any of your branches:

  576bcb8 change file undoing previous changes

If you want to keep them by creating a new branch, this may be a good time
to do so with:

 git branch new_branch_name 576bcb8239e0ef49d3a6d5a227ff2d1eb73eee55

Switched to branch 'master'

And in fact, git is so kind to remind us about this fact. The tree looks now again as in figure 6.

Rollback

Jumping back is nice, but what if we want to undo everything back to the state before the merge of the feature branch? It is as easy as

$ git reset --hard c8616db
HEAD is now at c8616db add line on hallo.txt

The tree after the reset

The generic syntax here is git reset --hard <tag/branch/commit id>.

Undo Uncommitted Changes

Another common scenario of “undoing” stuff is to simply discard local, yet uncommitted changes.

Files Not Staged For a Commit

Assume you modified a file. Executing git status would result in

$ git status
# On branch master
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   hallo.txt
#
no changes added to commit (use "git add" and/or "git commit -a")

So far nothing has been added to your local Git repo, nor has it been staged (registered) for being committed. What would it mean to discard those changes?? Think about the Git tree. Simply to get (checkout) the latest version of that file, right??

Thus,

$ git checkout hallo.txt

performs our “undo”. A further

$ git status
# On branch master
nothing to commit, working directory clean

Files Staged for a Commit

The other case might be when you modified a file and already staged it for being committed through a git add commit.

$ git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#       modified:   hallo.txt
#

A git checkout wouldn’t have any effect in this case, but instead (if you read what git printed on the status output) we have to do a reset. Why? Because the git add already created a node in the Git tree (actually not 100% correct: see Git index vs. working tree for more details) which have not yet been committed yet, however. Therefore we need to “reset” our current pointer to HEAD which is the top of our current branch.

$ git reset HEAD hallo.txt
Unstaged changes after reset:
M       hallo.txt

and consequently:

$ git status
# On branch master
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   hallo.txt
#
no changes added to commit (use "git add" and/or "git commit -a")

We’re now again in the state when we have local changes not yet staged for a commit and can therefore use the checkout command to discard them. A quicker way of doing so is to use the

$ git reset --hard HEAD

command which will do an un-staging + checkout in one command.

Sharing/Synching your Repository

Ultimately we want to share our code, normally by synching it to a central repository. For doing so, we have to add a remote.

$ git remote add origin git@github.com:juristr/intro.js.git

To see whether I succeeded, simply type:

$ git remote -v

which lists all of the added remotes. Now we need to publish our local branch master to the remote repository. This is done like

$ git push -u origin master

And we’re done.

The real powerful thing is that you can add multiple different remotes. This is often used in combination with cloud hosting solutions for deploying your code on your server. For instance, you could add a remote named “deploy” which points to some cloud hosting server repository, like

$ git remote add deploy git@somecloudserver.com:juristr/myproject

and then whenever you want to publish your branch you execute a

$ git push deploy

Cloning

Similarly it works if you’d like to start from an existing remote repository. The first step that needs to be done is to “checkout” the source code which is called cloning in Git terminology. So we would do something like

$ git clone git@github.com:juristr/intro.js.git
Cloning into 'intro.js'...
remote: Counting objects: 430, done.
remote: Compressing objects: 100% (293/293), done.
remote: Total 430 (delta 184), reused 363 (delta 128)
Receiving objects: 100% (430/430), 419.70 KiB | 102 KiB/s, done.
Resolving deltas: 100% (184/184), done.

This will create a folder (in this case) named “intro.js” and if we enter it

$ cd intro.js/

and check for the remotes we see that the according tracking information of the remote repository is already set up

$ git remote -v
origin  git@github.com:juristr/intro.js.git (fetch)
origin  git@github.com:juristr/intro.js.git (push)

We can now start the commit/branch/push cycle just normally.

Resources and Links

The scenarios above were the simples, but at the same time probably also the most used ones. But there’s a lot more Git is capable of. To get more details you may want to consult the links below.

If you have to add more, just let me know in the comments!

My Sublime Text Setup

2013-04-10T00:00:00-07:00

I absolutely love this editor. A ridiculously fast editor which has everything you’d love to have from a simple notepad to an advanced, extensible IDE with auto-completion, highlighting to whatever you’d like to have. This post aims at mainly being a setup reference for myself.

Actually, I’m a bit late now, as a couple of days ago Alex MacCaw posted published exactly a similar post to this one here. So go and check that out as well, it contains a bunch of valuable information.

Sublime Configuration

I usually have the following customizations:

{
    "font_size": 16,
    "tab_size": 4,
    "translate_tabs_to_spaces": true
}

The large font for being able to focus better on a smaller context which I found quite useful. Moreover it’s more relaxing for my eyes.

I usually leave the tab-size on “4” as that’s what my other colleagues are accustomed to have in their IDEs. But note you might want to set it to “2”, especially when using CoffeeScript as it is more handy there.

Access from the Shell

In order to use sublime productively, one of the first steps is to make it accessible from your shell.

On OSX, the best way (as already Alex mentions in his post) is to create a symlink to your Sublime installation directory like

ln -s "/Applications/Sublime Text 3.app/Contents/SharedSupport/bin/subl" /usr/bin/subl

But since I’m also working as a .Net developer and thus I’m having a Windows machine at work, I’d like to have the same functionality there as well. As such I created a special directory under C:\bin\utils which is linked in the PATH environment variable. Inside that directory I created a subl.cmd with the following content:

@echo off
"C:\Program Files\Sublime Text 3\sublime_text.exe" %1

Installing Packages

Sublime wouldn’t be that rich and useful without its packages (extensions basically). If you miss any kind of functionality, search for a package and I bet there is one already available.

Package Control

Url: http://wbond.net/sublime_packages/package_control

Package Control is simply a package manager for Sublime Text packages and extensions.

Package Control can be installed using Git. Navigate to the “Packages” folder (you can use your menu to find it Preferences > Browse packages...). Then execute the following commands

git clone https://github.com/wbond/sublime_package_control.git "Package Control"
cd "Package Control"
git checkout python3

Restart Sublime and you’re done.

To use Package Control simply press Ctrl+Shift+P to open the Sublime Menu and write

Install for installing a new package
Upgrade for upgrading an existing package or
Remove for removing an existing package.

My Packages

Here’s a list of packages I’m currently using with Sublime Text. I’ll add/remove this list over time as I find new interesting and useful ones. The installation instructions as well as the packages I listed should work on both, Sublime Text 2 as well as Sublime Text 3 (which is currently in private beta). But since I’m using the latter, you might experience some trouble in using some of them with v2.

Note, if there is no hint about the installation of a package, you can simply use Package Control for adding the extension to Sublime Text.

Package Name	Description
Emmet	Adds Zen-coding capabilities to Sublime Text. See the docs for a list of available commands and usage instructions.
Sublime TFS	A must have package if you have TFS as your version control system. After installation you should see a "TFS" menu which illustrates the major commands.
SideBar Enhancements	Adds a bunch of useful functionalities to your Sublime's sidebar context menu like copy path, duplicate file, move, copy etc...
SublimeLinter	Linting support for Sublime
DocBlockr	Augments Sublime for easy commenting of your JavaScript code. Adds comment blocks like: /** * [testFunction description] * @param {[type]} param1 * @param {[type]} param2 * @return {[type]} */ testFunction : function(param1, param2) { }
AllAutocomplete	This package extends Sublime's amazing autocomplete support over multiple files.
TrailingSpaces	Allows to configure Sublime to highlight or even automatically remove all trailing spaces. Take a look at the docs for instructions on how to configure it. My current setup adds the following to the user preferences: { "trailing_spaces_trim_on_save": true } and this to the package's preferences { "trailing_spaces_include_current_line": false }
SublimePrettyJson	Prettifies a compressed JSON string in the editor.
MarkdownEditing	If you love markdown teh same way as I do, this plugin is definitely a must have.
MarkdownPreview	Although I use this less often, it is quite useful for quickly previewing your created markdown document in a browser.

Here are some posts I find (and I’ll update over time) covering similar aspects around Sublime Text setup.

http://drewbarontini.com/setup/sublime-text

Modularity in JavaScript MVC Frameworks

2013-04-08T00:00:00-07:00

JavaScript MVC architectures are a de-facto standard when you create complex single-page JavaScript applications. But it doesn’t stop here. MVC helps to separate reponsibilities for coordinating the data (model) and visualization (view), but it doesn’t have a concept for coordination among an application’s modules or widgets as you might call them.

Modules? I don’t Have Anything Similar to that!

Modules is probably not the right term in JavaScript applications, better call ‘em widgets. A widget is something atomic with a clear responsibility, a mini-app basically that can be instantiated (possibly multiple times) on an arbitrary part of your application. You might not be accustomed to think from such perspective and therefore start straight off without building your app. That might work just fine initially, but once it gets more complex you’ll get into trouble for sure. Therefore, next time when you start building something bigger, stop for a moment and try to identify possible widgets.

Consider for example GitHub’s site:

Some potential widgets of the GitHub site

I just quickly went over its UI and marked the regions that “might” possibly be independent widgets. I just highlighted some of the most obvious ones (but there are obviously a lot more than those).

Separating your application into smaller parts is essential for keeping your architecture clean, reusable and mainly maintainable. The principle is a known concept in computer science: “divide and conquer”. Divide everything up into smaller parts which have

lower complexity
are easier to test
easier to extend
cause less headaches
(etc…)

and then compose them again together to form the whole application.

But Wait: My Widgets Have to Communicate!

Sure, modules (or widgets) within your application need to communicate with each other. Such communication creates dependencies as widget A needs to have a reference to widget B if it needs to invoke some operation on it, right? Well, not necessarily, as that would again couple those widgets together and you couldn’t exchange widget B arbitrarily without having to also change widget A.

Therefore, a common practice for creating a modular architecture is to decouple communication among components through event broadcasting mechanisms. Candidates are pub/sub architectures but also the Observer pattern. Below are just some frameworks I picked out that target the issue of modularizing large-scale applications.

AuraJS - Widget Architecture for Backbone

Addy Osmani - who is a big proponent of JavaScript architecture best practices - started a project called AuraJS with the intention to bring such modular widget-like architecture to Backbone.

Aura is a decoupled, event-driven architecture for developing widget-based applications. It takes advantage of patterns and best practices for developing maintainable applications and gives you greater control over widget-based development. Aura gives you complete control of a widget’s lifecycle, allowing developers to dynamically start, stop, reload and clean-up parts of their application as needed. AuraJS GitHub

You can read more on its GitHub repo or here.

Addy also published some good reads related to this topic. You should definitely take a look at them:

MarionetteJS - Another Backbone Extension

Similar to AuraJS, also MarionetteJS takes an event-driven architecture approach.

Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. MarionetteJS Homepage

A couple of weeks ago, they released v1.0 with components like RegionManager and EventAggregator. Those concepts sound quite similar to PRISM (another modular application framework for .Net) and indeed when I asked the author:

:) definitely not coincidence. I spent 5+ years building large scale winforms apps, and worked with prism just enough to understand the composite architecture it created. I built a very large system with patterns from the Enterprise Integration Patterns book, which are all present in PRISM and Marionette now. This is definitely the influence and direction that I took with Marionette :)

Decoupling in JavaScriptMVC

JavaScriptMVC has the concept of modularization already build-in since v3.2.

The secret to building large apps is to NEVER build large apps. Break up your applications into small pieces. Then assemble those testable, bite-sized pieces into your big application. JMVC Docs: Organizing Your App

Already the proposed folder structure of a JavaScriptMVC project suggests such approach. A couple of days ago, Justin (one of the creators of JavaScriptMVC) published two videos where he dives into this concept again.

The videos give a preview of how the upcoming release of JavaScriptMVC v3.3 further facilitates such decoupling among widgets.

Part 1 - MVC Architecture and the Observer Pattern

Part 2 - Development process

Entity Framework: Intercepting SQL Queries for Contextual Logging

2013-03-22T00:00:00-07:00

Proper logging is of major importance and a must have in any serious application. Writing logs is trivial and is already done successfully by a couple of open source libraries. But that’s just the first step in successful application logging. The far more difficult part is to have proper metrics in place that aggregate the relevant information in a proper way and provide the necessary contextual information for being able to reproduce problems. This is the only way to prevent you from being flooded with useless waste.

While I’d like to go a bit deeper into the concept of properly log and aggregate information, this post is just meant to evidence a specific case I just had of properly including contextual information into log entries. Specifically, a work mate of mine recently had a strange problem of getting an “Insufficient Priviledges” exception in his production environment. It appeared from now and then and was not really reproducable. Being related to some query execution, in that case it would be of major help to know which kind of query was executed by Entity Framework (in our case) against the underlying Oracle database that finally resulted in the mentioned exception.

The immediate approach that came to my mind is to somehow hook in a profiler in between Entity Framework and the DB, to trace and memorize all executed SQL Queries for then - later - being able to take them out in case an exception was fired. That would make it particularly easy to include the SQL statement in the log message as a contextual information for those kind of exceptions.

MiniProfiler to the Help

I did a quick googling about intercepting Entity Framework statements against the DB, found some stuff but they seemed rather complicated to setup as it required to wrap the EntityContext class etc.

That was when MiniProfiler came to my mind. We’re using to for live-profiling our application while developing it (have to blog about how I set that up for single-page JS apps). The nice nice thing about MiniProfiler is that it also traces SQL queries, their according execution time, whether you have duplicate queries and it even shows you a formatted SQL statement. That was exactly what I needed and so I started to take a look at the MiniProfiler’s source for being able to understand where I could hook in.

Installing and Registering MiniProfiler

Installation of MniProfiler is quite straightforward. Just head over to NuGet and install the packages you need.

Remember to properly initialize it for tracing Entity Framework queries (if that’s what you’re using)

    MiniProfiler.Settings.SqlFormatter = 
        new StackExchange.Profiling.SqlFormatters.InlineFormatter();
    MiniProfilerEF.Initialize();

and then to call MiniProfiler.Start() and MiniProfiler.Stop() in the begin and end request events respectively. Note that such setup should already be included in the MVC3 NuGet package and just needs to be customized.

Querying MiniProfiler’s Logs

MiniProfiler has a very intelligently designed structure. Everything starts from invoking MiniProfiler.Current

var profiling = MiniProfiler.Current;
if(profiling != null)
{
}

which returns the currently running profiler (or null if none) for the current HttpContext. What I was particularly interested in is to understand which of the profilings did actually contain SQL related stuff. This can be retrieved by using the according HasSqlTimings property

var profiling = MiniProfiler.Current;
if(profiling != null && profiling.HasSqlTimings)
{
}

Then invoking the according GetSqlTimings() method, returns a list of SqlTiming objects containing - beside other timing specific information - all “timings” that involved an execution of an SQL statement.

var profiling = MiniProfiler.Current;
if(profiling != null && profiling.HasSqlTimings)
{
    var timings = profiling.GetSqlTimings();
}

Finally, FormattedCommandString returns a formatted version of the executed SQL statement which you should be able to directly executable against your DB.

So I endend up having some very simple piece of code that looked similar to this:

private string CollectExecutedQueries()
{
    var stringbuilder = new StringBuilder();

    var profiling = MiniProfiler.Current;
    if (profiling != null && profiling.HasSqlTimings)
    {
        var timings = profiling.GetSqlTimings();

        foreach (var timing in timings)
        {
            stringbuilder.AppendLine(Environment.NewLine + "----START QUERY----");
            stringbuilder.AppendLine(timing.FormattedCommandString);
            stringbuilder.AppendLine("----END QUERY----");
        }
    }

    if (stringbuilder.Length > 0)
    {
        return Environment.NewLine + Environment.NewLine + "EXECUTED QUERIES: " + Environment.NewLine + stringbuilder.ToString();
    }

    else return "";
}

Please don’t take this code as is. I’m just about revising this further and publishing it in production. That will reveal whether it really was that simple or whether it needs to be improved. But first tests are promising and it seems to work properly.

Conclusion

What’s impressive is the ease with which MiniProfiler allows you to intercept SQL commands sent to the DB and the immense insight you get. Reading out the executed SQL command is really just a very simple use case of what MiniProfiler offers. I could imagine scenarios of sending automated warn logs when having duplicate or slow queries in your production environment.

Will I really Miss Google Reader??

2013-03-19T00:00:00-07:00

I guess you probably heard the latest announcements about the Google Reader shutdown. I heard about it already about half a year ago I guess, but didn’t want to believe initially. Now it seems to turn into reality, at least starting with July 1st. The search for alternatives has begun…

I’m a Google Reader user from the very beginning, when it was launched as a labs product. I liked the idea of having a web app where to collect and consume my news. At that time, it was quite a new thing as most RSS readers were desktop-based apps. I liked the idea of being able to seemlessly access my news at my home computer or while studying at some university computer.

That remained so, till now. GReader is my personal place for trying to consume the immense amount of news that get published on the web each day. Of course, it wasn’t the only place, social networks, especially Twitter, have become more and more important for me to pick up some important article or an interesting link.

Seems Time to Change

Many passionate GReader users don’t like the idea of moving to another product and so didn’t I. They even started a petition against stopping Google Reader. Nice initiatives that show how many people liked the product. Honestly speaking, I don’t think Google will change its plans. And then, after all, if a company decides to quit a product, even if they change and keep it running, it will quickly become obsolete due to missing investments. It’s already now that - if you compare GReader to other products - it lacks updated features like maybe a more modern UI, social network integrations and it’s ages since its mobile Android client received significant updates. So I think, it’s really time to move forward.

Is switching really so hard as it seems?? Personally, when I look at my recent habits, I notice that my usage of Google Reader (on the web) declined significantly in the last years. Mostly I just added new feeds and then consumed them on my mobile, through GReader Android, or even more often through other 3rd party apps like Press or Flipboard. So the day when the announcements about GReader’s shutdown went out, I decided to look around for a worthy alternative.

Feedly - A Worthy Alternative?

There are tons of articles now on the web presenting potential GReader alternatives. A quick search and while going over some of these, revealed Feedly which immediately caught my attention.

Here just some of the features I discovered so far and already started to like.

(TLDR: Just jump to my conclusion at the end)

Native Clients

Feedly has a bunch of “native” clients, for Chrome, Firefox, Safari, iOS and Android, all of them, however, build with HTML5 and JavaScript.

HTML5+Mobile. We love the power and openness of the web. We work hard on making Web+HTML5 a vibrant alternative to native mobile app development. Feedly About

The Chrome Extension adds a nice share button directly in the lower right corner for quickly subscribing to a new feed or for saving it to read it later.

Feedly button (collapsed and expanded)

The web frontend has been crafted with care for the details, something I especially note as a web dev. As such, for instance, menus disappear in the form of little icons when there is not enough space or fully expand on your 27” monitor.

The mobile clients look modern and clean and a big plus is that you can navigate throughout most of the app by exclusively using swipe gestures (a bit similar to Flipboard). Have a look at it by yourself:

Note that although the video demoes the iOS app, the Android one is exactly the same (due to the HTML5 approach of building it).

A negative thing about Feedly for Android is its missing offline support. So far, when you start Feedly without an active connection, you’ll get logged out. Offline functionality is an extremely important feature for a news reader as - most often especially when I don’t have any active connection - I’d like to read through my feeds (that have been synched previously). If you like that as well, go and vote this feature!

Customize it The Way You Like

It has tons of customization possibilities. Starting from the background, font or the way articles are being presented.

No two feedlies are the same. We all have unique appetites when it comes to feeding our minds. Add the sources that inspire you and the news that matters to you. Pick your layout and your theme. Feedly is your web. Feedly About

Some of the layout possibilities

Feed Aggregation and Social Integration

Beside UI customizations Feedly also tries to seamlessly integrate news feeds from your social networks like Twitter or Facebook. A “Today” section gives a quick overview of the most important news of the current day and there are possibilities to search and add new feeds based on common categories.

Conclusion

Sounds like they have me already, right? Not yet, but I’m quite satisfied in using the service for only a couple of days now. I had some minor issues in getting logged in on the Android client, but presumably that’s due to the high number of requests they’re now getting due to the GReader shutdown notice. The product looks really very promising, I like the mobile client and I have all the imaginable customization possibilities I like and liked to have with GReader:

mark as read while scrolling over articles
mark all as read
change the order of listing articles (old first)
day/night mode on the mobile client (GReader client didn’t even have this) - …

Sure, I’m also missing some features like “Search” and there will come up a couple more when using Feedly for some weeks. Since there’s a team behind which is working hard on improving the service with the interest to become the best news reader app available, makes hope for new amazing features to come soon.

As mentioned, one thing that puzzles me a bit is the missing offline capabilities of the Android client, so Feedly team, get that done soon ;). Vote for that feature here if you’d enjoy that as well.

So let’s see in a couple of weeks/months on whether I’ll really miss Google Reader.

Mocking Internal Interfaces with Moq

2013-03-07T00:00:00-08:00

When creating some Class Library you should pay attention to the visibility of its members and have a clear vision of what you’d like to expose to its users and what on the other side should be hidden. When writing unit tests against such assemblies however, you obviously want to test everything, from the internal members to the externally exposes parts.

Assume you have a class library named Base containing the following classes and interfaces

ICommandHandler - which is a publicly exposed interface
CommandHandler - basically its concrete implementation
IUndoRedoStack<T> - an interface that is used only internally
UndoRedoStack<T> - its concrete implementation

Note that I’m programming exclusively against interaces as that’s a major requirement for being able to create the necessary isolation for testing each component on its own.

Testing Classes with Internal Visibility

Lets take a closer look at the CommandHandler class

class CommandHandler : ICommandHandler
{
    //...
}

When creating a test for the CommandHandler class you would proceed as follows

[TestClass]
public class CommandHandlerTest
{
    
    private CommandHandler commandHandler;

    [TestInitialize]
    public void Setup()
    {
        commandHandler = new CommandHandler();
    }

    [TestCleanup]
    public void Teardown()
    {
        commandHandler = null;
    }


    [TestMethod]
    publiic void ShouldExecuteAGivenCommand()
    {
        //the test content
    }
}

When you execute such test, it won’t compile however. A best practice is to place the tests in a separate DLL (I usually name it like Base.UnitTests if the tested assembly is called Base) and as such, CommandHandler won’t be visible as it has been defined to only have internal visibility. In a previous blog post I already explained on how to overcome this issue, namely by specifying the InternalsVisibleTo attribute in the tested assembly. Check out that blog post for more details.

Mocking Interfaces with Internal Visibility using Moq

Now, CommandHandler has a dependency on IUndoRedoStack<T>

class CommandHandler : ICommandHandler
{
    public CommandHandler(IUndoRedoStack<ICommand> undoRedoStack) 
    {
        //...
    }
}

The CommandHandler has an Execute(command) method and suppose we’d like to test the fact that when calling it with a given ICommand object, that specific object gets added to the undoRedoStack. We would write

    [TestInitialize]
    public void Setup()
    {
        mockUndoRedo = new Mock<IUndoRedoStack<ICommand<<();
        handler = new CommandHandler(mockUndoRedo.Object);
    }

    [TestMethod]
    public void ShouldAddTheCommandToTheUndoStack()
    {
        //arrange
        var myCommand = new MyTestCommand();

        //act
        handler.Execute(myCommand);

        //assert
        mockUndoRedo.Verify(x =< x.AddItem(myCommand), Times.Once(), "The command should have been added to the undo stack");
    }

When executing the test, it fails with

Message: Initialization method Base.UnitTests.Command.CommandHandlerTest thre exception.
Castle.DynamicProxy.Generators.GeneratorException:
Castle.DynamicProxy.Generators.GeneratorException: Type Base.Command.IUndoRedoStackBase.Command.ICommand, Base, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null is not public. Can not create proxy for types that are not accessible.

The problem is the same, the Moq library I use for stubbing here, has no visibility on the internal member types and as such we need to add another InternalsVisibleTo attribute specifically for Moq. The most intuitive thing to do would be

[assembly: InternalsVisibleTo("Moq")]

but unfortunately that doesn’t work. Instead you need to add

[assembly:InternalsVisibleTo("DynamicProxyGenAssembly2")]

which is used internally by Moq to generate proxy classes. Note, as already described by this blog post this only works if your assembly is not strongly-named, otherwise you have to include the assembly’s PublicKey as well.

[assembly: InternalsVisibleTo("DynamicProxyGenAssembly2, PublicKey=...")]

Interview with DZone

2013-03-06T00:00:00-08:00

DZone, where I’m part as an MVB, recently contacted me for an interview for their weekly newsletter edition. Yesterday it got published. If you’re interested in their newsletter, the best way is to follow DZone on their Facebook page. Here’s the interview in its full length.

Hi Juri! Thanks for talking to us. What have you been working on lately?

I’ve been working on creating a new base architecture for our e-government web applications. Our main focus is on creating compelling web applications for the citizens and as such we wanted to take out the most of the web. About a year ago we therefore decided to start creating single page applications in JavaScript instead of just classic server-side web applications such as ASP.net WebForms. As a consequence I recently dig into the jungle of JavaScript MVC frameworks and started coaching our web devs to create JavaScript rich client apps using those frameworks. In specific we adopted Bitovi’s JavaScriptMVC framework which is a very nice one, especially for JavaScript beginners. It is based on top of jQuery and provides already a full stack setup, from code generators, a package manager, test automation to code linter and builder. That’s what it makes it a smaller entry barrier for newbies which don’t want to bother with AMD, RequireJS, JS linters, builders etc. Unfortunately it isn’t as popular as Backbone or Angular, but its recent developments with CanJS make some hope in that direction as well. Most recently I was also a technical reviewer of a book about web application development with JavaScriptMVC which will be published soon.

What has most excited you in the world of HTML5 and JavaScript recently?

There were many exciting developments that happened last year. When talking about HTML5 one is for sure that the HTML5 definition has been finally completed and is now ready for review. Other than that I think that every single project that emerges in the field of HTML5 and JavaScript development is a small exciting moment. Those projects make the entire scene richer and more valuable. One that has to be mentioned is for sure TodoMVC which is the only point of orientation in this jungle of MVC frameworks in the JavaScript world, a well curated and hugely educative project.

Since I’m working mainly in a world dominated by Microsoft technologies, I also really welcomed Microsoft’s investment into JavaScript as a first-class language for Win8 development. I’m not yet sure how much success it will have, but it has a positive side-effect for our web devs as Microsoft will invest into the language which ultimately results in better dev tools (which partially has become true already with VS2012) and language enhancements and tools like TypeScript. Proper development tools are a factor of major importance and the lack of such tools is the first point I often heard criticising by “classic” web devs. But that’s not entirely true. I’ve been using the Chrome dev tools now for over a year intensively and it is amazing how fast they evolved. With proper extensions you have even two-way synchronization of source code changes and live browser reloading. Such evolutions, together with great tools like Sublime or Brackets are another exciting development for me.

What does the next year hold for web apps?

2012 was definitely the year when JavaScript as a web programming language started to really emerge, with all the libraries and MVC frameworks that came out. A quick look at GitHub’s language stats explains it all. Still, many web devs look with some skepticism at this evolution, probably because they first got in touch with JavaScript under different circumstances. In high school, JavaScript was taught as a scripting language for adding dynamic behavior to a static HTML page, not as a fully capable programming language. I think that 2013 has the potential to let JavaScript loose this kind of negative connotation and push itself further from just being a temporary hype to being the way modern web applications should be developed. Major improvements in development tools will help. Before-mentioned evolutions in the Chrome-integrated devtools and projects like Brackets look very promising and will make the life of web devs a lot easier. Beside the evolution of JavaScript “Harmony” this year, I’m also particularly excited about how the mobile web will evolve, especially hybrid mobile applications. PhoneGap or Apache Cordova started with ambitious goals in 2012 and I’m curious how its story continues.

Do you have a favorite blogger?

Actually I do follow a lot of bloggers that cover quite a wide range of different topics. I can hardly tell a favorite one, it really depends what I’m currently interested in. At the moment, for instance, I do really appreciate the work done by Addy Osmani. It is just amazing, starting from his presentations and videos, his GitHub projects like TodoMVC and now Yeoman, to his open source books about Backbone Fundamentals or JavaScript Design Patterns. He does an amazing job in the field of evangelizing web technologies, obviously with the help from other amazing people like Paul Irish or Sindre Sorhus. Beside those, there’s also Alex Young’s DailyJS of course and Peter Cooper’s weekly newsletters like HTML5 Weekly or JavaScript Weekly, all of them an absolute must for every serious JavaScript dev and web dev.

You practice Yoseikan Budo – could you tell us a little bit about how you got started? Does it trickle into other aspects of your life?

Sure, I started to practice Yoseikan about 13 years ago. Actually already as a child I always admired martial arts practitioners and started to imitate and study their techniques. Only about when I was 14 years old I had the chance to then practice it by myself and that was when I discovered Yoseikan Budo. I immediately loved it, mainly because of its variety of concepts and the way it is being taught. You receive a complete training in martial arts, very much like the old Samurai, techniques which emerge from Sumo, Judo or Aikido to Karate and Kendo. It never really gets boring, but instead you have the possibility to continuously discover and learn new things. And yes, it definitely trickles into other aspects of my life. I can just confirm what many say: it helps to keep your balance. For me its combination of physical activity and the concentration needed for executing certain techniques, is the absolute best way to mentally relax from my day to day work in front of the computer.

Thanks, Juri!

The Coaching Architect

2013-02-12T00:00:00-08:00

In this talk, Roy Osherove speaks about how to become a better coach. A nice talk highlighting some of my personal principles I try to follow every day. Coaching others is a nice thing if you like it, but it also needs to be learned.

TL;DR

Ok…, so jump here then.

Talk Notes

Here are my notes I took during the talk.

Problem

for some people, the definition of an architect is to make things right, to make sure everything goes well; to do things in the best way possible
lot of architects fail because they cannot get their message across
architect is a type of leader (in the area of design, architecture,…)
wishes (feeling they’ll never come true): that team does practice TDD,…

You are the Bottleneck

leader: one that is a bottleneck; a person to ask, to get answers
being an architect makes you by definition a bottleneck
problem: you never have time to learn new things, to create new stuff because you have become a bottleneck
if you’re asked to create a framework, don’t do it if not absolutely needed. Instead, try to teach devs how to do it s.t. they get more independent. Otherwise you create another layer of ice between your mates
Wrong: ”I’m the only one that can do it/knows how to do it”

Role of a leader

make yourself unneeded (to remove yourself as bottleneck)
create people around you with your knowledge, don’t just be someone that provides guidance
if you work with a team and after your work they didn’t learn anything new, you failed, you missed the point of why you’re there, what you get paid for
grow the team that you have into the team you want to have
creating a self-organizing team, doesn’t mean you get fired ‘cause you’re no more needed:

By growing others to not need you, you will always be wanted, appreciated and highly valuable.

Leadership is tough

“I want it to solve it yourself”; this doesn’t mean you’re not doing your job, on the contrary, you’re teaching them how to solve it on their own, hence, you help them to grow and get better
coach them to learn, otherwise they’ll always come back to you and ask for that solution

How to grow people - Learning

Observations have shown that there are periods of slow learning followed by periods of very quick learning. The reason for such ravines before the fast growth are because we first need to “unlearn” what we knew before in order to be able to acquire new knowledge and try something new. For example:

when switching programming language: initially stupid, but then - knowing different programming languages - you know different kind of patterns, different viewpoints which make you more productive; teach you to think about a problem from various angles
when starting with TDD. Initially you’re awfully slow and you seem to not move ahead. But once you got it, your performance and quality of code will increase drammatically.

To grow the team, we must first realize we can do this ourselves.

Mentoring others needs to be learned…in fact, it might be uncomfortable initially. But in the end, the process of mentoring is a learning process for both, the mentor and the coached person.

Time

Common symptoms: Others will do the task much slower than myself

The key is to make time.

There are different kind of modes

survival mode - most teams are here; there is never time, to learn or practice new things; not to do TDD, not to write unit tests etc…this is a self-perpetuating mode: since you never have time to do TDD, you don’t write unit tests and hence your code quality will drammatically reduce, introducing new bugs which again take time to fix etc…
learning mode - having enough time to learn and practice new things and actually using that time properly. That’s the stage where you can be a coach.
Make time: increase tasks by at least 50% in order to create space to practice something new (i.e. Unit Testing).
self-organizing mode - when doing enough learning, people will start solving their own problems and hence get “self-organizing”.

Triangle of Quality

Goal is to not only have two of them, but all three: features, time and quality.

Again, same rule, try to avoid being the bottleneck. You’ll never be able to review all the code of your peers and as such, you have to teach them how to do it by themselves (shared code ownership).

How do we lose quality? Dilemma:

Write tests, or get it done? Answer: Let it fix quickly and get the thing done. Feeling = good
Another thing happening? Again, write tests or get done?? Last time? -> fix quickly -> so continue that way; Feeling = good; Result: year later: code sucks

But, “the project is going to take 3 weeks without unit tests and 4 weeks with unit tests…”
There is no choice, this is the way things are done. It’s the same as saying “the car costs $20,000 without wheels and $30,000 with them”.
Stand up for the values you believe you’re right.

Understand why behaviors don’t work

For each behavior, The world is perfectly designed for that behavior to happen (Influencer - the power to change anything)

There are different reasons why people may not follow certain behaviors.

Personal
- Motivation
- Ability
Social
- Motivation
- Ability
Environmental
- Motivation
- Ability

Social motivation are the people that draw you into a certain action. This is strongly related to group membership. As such, creating a support group might be helpful in convincing people to acquire certain behaviors (like doing TDD).

Environmental ability define the infrastructure around you, i.e. having an automated build server that executes the test you write in the process of performing TDD.
Environmental motivation on the other hand is strongly related to rewards. For instance, people might get rewarded for being able to quickly ship a task. As such, others, writing unit tests and thus shipping a bit more slowly, might get the feeling that their work isn’t As such, doing a good job by writing automated tests for your code seem not to be appreciated.

Common Language

The words we use when we promise something. Saying what you want to do, meaning it and to actually make it true.

Bad

We need…
I could…
Why doesn’t someone…

All of them give you a way out, a “permission” to not do it.

Better

I will…by…

This creates a commitment of something real. Moreover if people have a problem saying it, you’ll immediately know there might be problems (due to time constraints or whatever). So you can react on that. It helps to raise problems that might exist inside a team.

But attention, you can make people to only commit to things that are under their own control.

Conclusion

Don’t be a bottleneck, coach the people around you. When people come to you about a problem, challenge them in order to help them learn and grow: “What are you going to do about it?”

Know how learning works and how you can allocate time in order to create spaces for learning and for moving people out of “survival mode” into “learning mode”.

Consider also potential problems that hinder the adopton of new practivces and their potential personal, social or environmental barriers.

Also employ common language which leads to more clear commitments.

DZone MVB Goodies Box

2013-02-10T00:00:00-08:00

Yesterday morning I received a nice little box with a DZone label on it. Seems like they sent it to me as part of the MVB program I recently joined. What a surprise! Opening the package…

…unveiled a nice letter:

Dear Juri,

Congratulations! As one of our top contributors we're sending you this package as a way to thank you for everything you do for DZone.

We ended this year with over 650,000 members, more than 700 MVBs and an audience over 3 million strong. 2012 was...

and looots of nice little goodies.

Two nice DZone Refcardz about HTML5 WebSockets and Design Patterns, a DZone mug, a developer T-Shirt, a Tizen 8GB Flash Memory, a Manning Early Access Program discount, an iPad Mini Golden Ticket (for having the chance to win an iPad mini) and last but not least, Inter-Cubicle Ballistic Missile:

The result: a hard fight against my girl

So I’d like to thank DZone for the very nice and kind surprise. I’m glad to be part of the MVB program and I hope I can provide some contributions this year as well.

Test Your App Under Slow Network Speeds

2013-02-01T00:00:00-08:00

I guess that I don’t have to start talking about the importance of testing in the software development process. There are couple of different kind of tests which I’m not going to mention now, but generally speaking a good test should verify the correct implementation of the business requirements but also test the software on its boundaries and edge cases.

From a User’s Perception

Beside automated tests, often a good indicator might also be the personal perception when using the software. Sounds strange, but how does it feel to use the application. Is it fluid, responsive or rather laggy and inconvenient to use. These kind of indicators are often hard to objectively define but they count a lot and might contribute more to the overall user satisfaction than you might actually think.

Couple of days ago I got inspired by a Tweet between Addy Osmani and Sindre Sorhus:

Tweet between Addy and Sindre about speed throttling tools

Do you Test your Application under Different Network Speeds?? How often?

I can just remember to have done it once because it was an explicit non-functional requirement from our customer as there where people connecting through 56k modems(!!). Typically when developing mobile application this is an absolute must because mobile connections are highly vulnerable in terms of network connection failures or speed differences. As such, depending on your user’s internet service provider and/or the availability or absense of broadband mobile networks, he might get quite different experiences when using your application.

Modern web applications provide a lot of possibilities for bandwidth optimizations, especially also considering HTML5 additions like the different browser storage mechanisms. I’m not going into too much details here but rather I’d like to quickly show how you can test your application under potentially poor network conditions.

How to Simulate Different Network Types

On Windows

There are several tools available for windows. Probably the simplest approach is to use Fiddler2, a tool which you should have installed anyway as a web developer. Just download and start it. In the menu, there’s an entry called “Rules”, open it and navigate to “Performance”. There you should see an item called “Simulate Modem Speeds”.

Fiddler2

This will simulate a modem like network speed which allows you to test and fine-tune your webapp under more extreme, inconvenient situations.
Actually there’s also a Fiddler plugin which lets you add a delay in ms to any kind of response. I did not test that one in depth, though.

On OSX

OSX has a tool called Network Link Conditioner which allows you to do a similar job. To install it you need to first download XCode which is freely available in the App Store market. Once installed

Open XCode
Navigate the menu XCode > Open Developer Tool > More Developer Tools. This will open Apple’s website
Download the “Hardware IO Tools for XCode”

Download the Hardware IO Tools

Once downloaded, open the package and install the “Network Link Conditioner.prefPane” tool…

…which will automatically be installed on your preference pane. Here you go

Just select the desired speed option and activate it. The nice thing about this tool is that you have already a bunch of configurations at hand.

Other tools

I have to admit that I did not perform an in-depth research about other possible tools. Here are just some other potentially interesting ones I encountered.

Feel free to add yours in the comment section.

ASP.net MVC Action Methods: Testing Against Anonymous Return Types

2013-01-18T00:00:00-08:00

I don’t use dynamic types regularly, but there are always again situations when they come in quite handy. Here is one example of testing an MVC controller’s return value.

You might encounter the situation where you want to test the returned value of an ASP.net MVC controller. For instance you might have the following action method:

public JsonResult GetById(long id)
{
    var person = personRepository.GetById(id);
    return Json(person, JsonRequestBehavior.AllowGet);
}

Testing an Action Method

Then a corresponding simple test method could might look like this

[TestMethod]
public void ShouldReturnAPersonWhenPassingAValidId()
{
    //Act
    var controllerData = personController.GetById(3);
    var person = controllerData.Data as Person;

    //Assert
    Assert.AreEqual("Juri", person.Firstname);
}

When invoking the controller’s action method you get the returned ActionResult. The actual data of interest is wrapped in its according Data property.

Testing against Anonymous Types

It gets more interesting when you return anonymous types as in this dummy example:

public JsonResult CalculateValue()
{
    return Json(new { Sum = 10 }, JsonRequestBehavior.AllowGet);
}

How do you verify that the returned object’s property Sum contains the value 10?? Reflection would be one possibility, but with the dynamic types it’s even easier.

But caution, because anonymous types are internal, you need to add the InternalsVisibleTo attribute on the tested assembly, s.t. the test project can access its internal objects. Assume you have a project “AspMvcFrontEnd” and a corresponding test project called “AspMvcFrontEnd.Tests” and that the project name corresponds to the produced assembly name. Then you would have to add the following line to the AssemblyInfo.cs of the assembly you’re testing, that is the one hosting the controllers:

[assembly: InternalsVisibleTo("AspMvcFrontEnd.Tests")]

The corresonding test can then be written in quite a simple form like this (note the definition of the dynamic type):

[TestMethod]
public void ShouldReturnAnAnonymousTypeWithSumEq10()
{
    //Act
    dynamic obj = controller.CalculateValue().Data;

    //Assert
    Assert.AreEqual(10, obj.Sum, "the sum should be eq to 10");
}

Quite an elegant approach in contrast to a solution by using reflection.

How to Stay Up To Date On Web Technology

2013-01-11T00:00:00-08:00

The web is evolving extremely fast, especially in the recent years I have the feeling that it really got up to speed. Just think about JavaScript two years ago compared to today. The same holds for the browser vendors. Hence as a web developer you have to keep yourself up to date on the current web technologies. This is important for being able to make your evaluations on what is just trendy and what has future.

Here’s a nice slideshow from Chris Coyier about how to stay up to date on web technology.

My personal suggestions

Here are some of my experiences:

be social - yep, also on the web, so “don’t rant, become social and contribute”. There are so many nice places, like StackOverflow, Hackernews, GitHub,… Participate → discuss → contribute → learn
share - …what you created, your experiences, difficulties. Create your own blog to do so, it helps a lot in internalizing and reflecting about stuff
follow great people - …on their blogs, Twitter, GitHub,…

Resources to Get Started

Here are some starting points mentioned in the presentation and updated with some of mine

Websites and Blogs

On Twitter

Weekly Editions

Obviously, feel free to follow me as well :)

Transformer TF101 meets Jelly Bean powered by CyanogenMod

2013-01-06T00:00:00-08:00

During the Christmas holidays I found a bit of time to upgrade my old (but still nicely working) Nexus One to CyanogenMod 7 and I’m really happy about that. Today I decided to give my Asus Transformer TF101 a go as well.

The problem is that apparently the TF101 doesn’t get the update to Jelly Bean and I definitely didn’t want to miss it, so CM is the best available option. Unfortunately it turned out that rooting and flashing the Transformer TF101 isn’t as smooth as I thought and it involved quite a lot of reading through forums till I managed to get it working on my device. As such, this post is intended to provide you with the right information in order to save you some time (and nerves) while upgrading to CyanogenMod.

Preface

Before continuing with this post here, please read through the official CyanogenMod installation instructions for the TF101.

Disclaimer: By following the instructions presented by this page you device gets rooted which voids your device’s warranty, may cause data loss or potential other damage. I’m not responsible in any way with such side effects but it is at your own risk.

Specs used for this setup

The upgrade has been performed on

Asus Transformer TF101
Kernel/firmware version 9.2.1.27

by using a Win7 x64 setup for rooting the device and flashing ClockworkMod.

Some Basics

Boot into recovery: Switch off your device. Then press Volume DOWN+Power button till you see the boot logo, then press Volume UP again.

Enter APX mode: Switch off your device, connect it to your computer and press Volume UP+Power button.

Preparation: Download CM and GApps Package

Before starting it’s good to download the necessary files and immediately place them on the devices internal storage (or sdcard mount) s.t. we have them ready when we need them.

Download the latest (unofficial) CM 10 version (I used cm_tf101-v6).
Download the Google Apps package for Jelly Bean v 4.1.2, that is “gapps-jb-20121011-signed.zip”.

Note that this is not an official CM version but one build by some XDA developer from the CM’s GitHub repository. See this forum entry for more details.

After downloading the above mentioned files, copy them over to your device. If you have adb installed and your device connected via USB debugging this should be as easy as

adb push cm_tf101-v6.zip /sdcard/

As of writing this post there is no official stable Jelly Bean CM10 release or release candidate. Hence in this installation I used an unofficial one. You might get and check the CM download page for the TF101, however.

References

Rooting and Installing ClockworkMod

The official CM TF101 wiki page suggests the use of Wheelie for loading ClockworkMod (a custom recovery) onto the Transformer. That approach didn’t work for me, however. When placing my Transformer into APX mode and after executing the mentioned command (see CM wiki entry), I always got

Wheelie did not detect a device in APX mode.

So I googled quite a lot and there are lots of entries on the XDA forums with one-click root&flash approaches, however most of them didn’t work as well. What you need to pay attention to is the kernel version (firmware) you have installed. I had version 9.2.1.27 while many of the root utilities are for older firmware versions which might also be the reason why they didn’t work.

“1-Click Transformer Root” worked!!

After a while I finally found the 1-Click Transformer Root which finally worked. You need Windows 7 (don’t know if Win8 works as well) for executing the root processes, however.

The tool makes rooting extremely easy, just follow the steps below:

Make sure you connect your running Transformer device to your computer. Also verify that you have USB debugging enabled in your settings.
Just download the file and run the “1-Click Transformer Root.bat”
Follow the instructions given by the bat file

Your Transformer will boot multiple times and by the end your device should be rooted successfully.

In order to then install the custom recovery (i.e. ClockworkMod) you have to again start the “1-Click Transformer Root.bat” which now will present several options under which point 3 says “Install CWM recovery”. Choose that one and proceed. It should install Rogue XM Recovery 1.5.0 (CWM-based Recovery v5.0.2.8).

Don’t use the ROM manager for flashing ClockworkMod. See here for further details.

(Note if you aren’t able to download the file, just contact me as I should still have it somewhere)

Installing CM

If you successfully flashed ClockworkMod with the method mentioned before, then the Transformer should now be booted into recovery mode. The next steps involve

creating a Nandroid backup
wiping the data
installing the CM from zip
installing the gapps package from zip

Follow the installation instructions on the official CM wiki page for the TF101 for these steps.

Some Sidenotes

Nandroid backup - If it gives you an error when backing up /data try to verify whether there is enough space for the backup. In my case I had to delete the Dropbox cache. You may also want to change the backup location to the internal memory rather than to the SD card (which on the Transformer is just a virtual partition). DiskUsage is a nice Android app for analyzing the used space of your memory.

Up and running

After successfully completing the steps before everything should be up and running.

So far the increase in speed is impressing, however if I manage I’ll write a follow-up post with some more infos after using the ROM for a couple of days/weeks.

Retrospective 2012

2012-12-31T00:00:00-08:00

Yes we’re still alive ;) No jokes apart, it’s time for a year retrospective.

Normally, a retrospective consists more or less about asking the following three questions:

What did we do well?
What did we do wrong?
What could be improved?

For a year recap, let’s change it a bit.

What did 2012 bring?

2012 was a successful year. Beside relocating to a new home together with my girlfriend I also managed to finish my exam to the 2nd Dan in Yoseikan Budo.

New Blog Hosting and Style

I didn’t even recognize, but when browsing through the year recap posts of past years, one point was always a restyle of my blog.

This year (actually already in September), after about six years on Blogger, I completely changed the way of how my blog is being hosted and constructed, namely by using a static site generator, Jekyll, hosted on GitHub. A couple of days ago I then renewed the style and overall appearance of the site as well. So, why the change and why the restylings?

..because I like to have full control of what is going on. While Blogger is a nice service with lots of customizations, its main focus is on allowing the average user to quickly build a blog with predefined templates and so on…Customizations are not the focus, while Jekyll is simply blogging for hackers ;)
2nd, because I like nicely styled pages. For me, the page design is at least as important as good features and functionalities. For many devs, CSS is something that frontend designers have to care about. But that’s not entirely true. IMHO good web developers should know how CSS works, in-depth. What is definitely not their job is to make a good overall design by combining the right colors etc.

So, the current design has been written from ground up by myself, obviously with the help of Bootstrap (and my girlfriend which had the role of combining the right colors, you know ;) ). The focus was to keep it simple with major importance on facilitating the reading of the posts itself as that’s what the blog is for. So, I hope you enjoy it and as always, feedback is welcome!

Lots of JavaScript Coding

This year was intensive JavaScript programming year. At work I introduced single-page JavaScript applications to our .Net developers. So instead of constructing the front-end server-side with ASP.net WebForms we switched over to creating our front-end layer with JavaScriptMVC and a “backend” layer in ASP.net MVC exposing JSON REST endpoints.

I think JavaScript is ready and with all the tools in place and the amazing whole of libraries like jQuery, Modernizr etc people should really start to adopt this methodology. In the end, that’s the language of the web which people have been trying to avoid so far as it was simply not usable. But still, out of this year’s experience, the most hindering part which makes it quite tough initially is the lack of knowledge about available tools and this impression in devs’ mind of JavaScript not being a fully valuable language.

My Top Blogs and News Resources

I read tons of blogs and news which all get bundled for me by Google Reader. The ones that I probably read most and which come to my mind right now, are

JavaScriptWeekly and HTML5Weekly
DailyJS
Appliness
Twitter (the stuff posted by the people I follow)

Conferences: 1st QCon in London and JSDay (Verona)

Yep, this year was my 1st QCon conference in London. It was amazing, with great speakers! And London was great as well btw. I actually returned to London for holidays a couple of month ago with my girlfriend. Really nice.

In May I then attended the JSDay in Verona. The focus there was JavaScript development (server and client-side) as you might have guessed, with some very great guys around GitHub, NodeJitsu and even Crockford was there!

So, what about 2013?

You probably noticed that I’m currently totally into JavaScript. So from that point of view I think that JavaScript will get more established once new tools arrive. It’s impressing to just see how fast the Chrome Dev tools (tip: use the Chrome Canary Channel!) get new features and how they get better and better each day. And then - beside big players like Microsoft pushing the JavaScript market (see Win8 development and TypeScript) - there are really nice projects by Adobe like Brackets, but also the efforts they put into PhoneGap. So I’m curious how this evolves in 2013.

What I’m curious as well is how the whole mobile HTML5 hybrid application development evolves. At work we developed a prototype using PhoneGap and JavaScriptMVC. It works, but especially things like smooth transitions (especially on Android Gingerbread and lower) give the feeling of not being ready yet.

So for 2013 I hope to again learn some new stuff, to be able to teach others great things, to get better in JavaScript development, I hope to maybe find the time to do some native Android development again and of course I’m looking forward to attend some good conferences.

I wish a Happy New Year 2013 and thanks for everyone who’s following me.

Gist: My New Devbook

2012-12-18T00:00:00-08:00

I always had the idea of having some kind of organized store, some kind of very simple knowledge base where I could memorize interesting stuff around software development which I encounter i my day-to-day business. A wiki wasn’t suitable as it should be centered mainly around code, but still you should have the possiblity to add your text-based notes or a collection of links.

Code Notebook aka Devbook was born

When I started with my studies at the university about 7 years ago, we learned Java from ground up. And to be honest it was the first real programming language I learned, with all its concepts around object oriented programming and so on. Even though I had already created my personal utilities with VB and VBA at that time…That was when I started Code Notebook, a project to incorporate my need to store my code snippets and at the same time a very nice project for being able to directly apply the learned stuff.

1st version of Devbook, my 1st Java Swing client

It was a Java Swing desktop client which at that time was based on a MS Access DB. The latter turned out to be one of the biggest limitations, but hey…it worked for me at that time, and we haven’t been introduced to “real” DBs at that time. But it had already some cool features like

real time search
starring
labelling of items for easy organization of codes
generation of a set of static HTML pages out of “public” snippets which could then be easily put on a webserver for sharing with others - …

Eclipse RCP Clients

Then there came the time for Eclipse and its RCP platform and everything related to it. That port of Code Notebook to Eclipse was purely experimental and all-in-all a playground for me to experiment with the RCP platform. From an architectural point of view an amazing construct with its plugin architecture and decoupled messaging system. From a programming perspective…puh…a steep learning curve!

The Fascination for Rich Web Clients

Code Notebook worked just great and I used it a whole lot. But then came the time when I got fascinated for the web and the possibility to create rich client (GMail-like) web applications. I started to play around with GWT and it was when Devbook, the evolution of Code Notebook for the web, was born.

Devbook - a web based rich client powered by GWT and App Engine

The client was written in GWT and hosted on Google App Engine. That was also the time when my series of posts about it emerged on my blog, some of which turned out to be a real success (based on the number of visitors).

Unfortunately Devbook mainly remained an experimental project. I heavily used it for my personal needs, but due to time constraints (at university/work) I never really opened it up, but it remained in - what you could call - private beta.

GitHub Gists

GitHub Gists have existed already for a while and I also used them occasionally. But so far it never seemed quite complete in what it offered. A couple of days ago, GitHub announced a new release of Gist, a complete rewrite.

At it looks awesome in my opinion. It really incorporates now many things I’ve always wanted and which in part I already implemented in the Devbook GWT client: it is centered around code (having a fully functional git repo under each gist), it has social features (sharing with others through commenting) and it is also flexible enough to not only place code, but also simply textual information (in the form of markdown gists).
But read it yourself on their blog post.

Looking Back

That said, I guess Devbook is now really obsolete. So far I never found a valuable alternative that really met my needs, but now I guess I’ve found it. We’ll see. So was it a waste of time, given that it never really went online? Absolutely not. Looking back it was an awesome learning experience:

Code Notebook

Java programming
experimenting with MVC like code architectures on top of Java Swing
customization of standard library Swing lists (see the snippet list)

Code Notebook RCP

Eclipse RCP platform
plugin architectures and decoupling possibilities

Devbook GWT

Google Web Toolkit and the Google App Engine cloud platform
Spring Web framework
Hibernate (together with GAEs data store)
generally, developing rich ajax clients

So, enjoy Gist and keep sharing code!

Update

A new app has been released: GistBox. This is exactly the thing I always wanted to arrive ultimately but never had the time to realize it. Amazing piece of work.

Cerego - Learn Anything, Everywhere

2012-12-17T00:00:00-08:00

It’s now roughly 2 years I’m out of university. While also at may day-to-day job I cannot and don’t want to stop learning and getting better, the time at the university was probably the most intense in terms of studying and learning. As a dev I’m continuously seeking for automation possibilities, so also to what regards my studying system.

Already at the first years of my bachelor study period I started to think about how I could automate my learning process. I mean, it’s always nearly the same. You have a given problem and you have to verify whether your brain has a good answer for it.

The Approach

I basically needed some kind of indicator that - while studying - continuously told me the %-age of stuff I already knew. There are two prerequisites, though:

have a good set of notes
be honest to yourself about how much you know

The automation basically consisted in having a table of two columns: one containing a question, some buzzword and the 2nd column giving some hints or the solution itself.

At that time I put it down in a simple Excel sheet for putting down the stuff, normally already during the lectures itself, so there was no big overhead in having to create that list.

The Q&A Mode

Well ok, so far so good, but where’s the automation?? The automation consisted in having a program ask me the questions. In the Excel spreadsheet I had a really tiny VBA script which when switching to Q&A mode started to hide the column with the solution hints and started to randomly select some questions and present them to me. I answered the question for myself and then clicked the “Check” button which showed me my solution hints to check whether I was right/wrong. I then obviously had to rate myself on whether I was satisfied with my answer and click the corresponding “ok” or “wrong” button. At the end of each round I then had the % of known vs. wrong answers. When I reached 100% I was ready for the exam.

Hey, these are Flash Cards

Yep :). But at that time I didn’t knew them. That was later when I found a flash-card app for iOS which allowed to select a Google Spreadsheet document to import the question and answers, exactly like in my original system.

Just search the Android or Apple Store for the term “Flash Cards” and I’m sure you’ll find dozens of it.

Cerego - Learning made easy

Recently Cerego appeared on my Twitter feed. And while I’m no more actively using the Flash Card system as I don’t have the need right know, I’m always curious in new interesting ways of improving my learning.

Cerego’s mission is to transform information into lasting knowledge. Its approach combines proven learning science with cloud technology to bring breakthrough learning solutions to a rapidly expanding global market for learning languages and other core domains of knowledge.

Cerego is invite-only so far, but yesterday I got my invitation and immediately tried it out.

Find

The interesting thing about Cerego is that it has already social features build-in (a must). That means you can find courses created by others

Learn

That means you can even learn things like the ASL alphabet.

Create

Creating new courses is as easy as

uploading a couse image
specifying the details like title, description and giving it some tags
specifying whether it is intended to be public or private
entering the questions + answers

The editor for entering the questions is very handy. You just enter the question, Tab the corresponding answer, Enter and the focus will jump downwards to continue entering the next one. Win!

Give it a try!

If you’re keen on learning new things, give it a try and request an invite! It’s free.

Programming ASP.net MVC4 by J. Chadwick, T. Snyder and H. Panda

2012-12-14T00:00:00-08:00

This is one of the recent books I got from O’Reilly. It is probably the most comprehensive and detailed one I’ve encountered so far regarding ASP.net MVC development. More than 400 pages, from the very basics of the MVC pattern, client-side JavaScript and Mobile web development, application architecture to successfully deploying an ASP.net MVC application in production.

Book cover; click to see other reviews

For Beginners and Experts

First of all, the book is very nicely structured and can be suggested to both, total ASP.net MVC beginners as well as to ASP.net MVC experts. Obviously, the latter will skip the initial chapters. Those mainly deal with the very fundamentals like

MVC design pattern
setup of an MVC application
core concepts like routing and authentication
how the model, view and controller are implemented in ASP.net MVC4 (including details about RAZR engine…)

Also the chapter “ASP.net MVC for Web Forms Developers” aims at providing an upgrade-path for Web Forms developers by explaining the differences, advantages and disadvantages.

… for all of their commonality and similarities, the architecture and goals that drive the ASP.NET MVC and Web Forms Frameworks are fundamentally very different.

For the experts, on the other side, there are topics about

parallel, asynchronous and real-time data operations
caching
continuous quality control - …

A Little Insight

Here a little insight in some of the topics mentioned in the book.

Web Application Architecture

The book also dedicates an entire chapter to “web application architecture” treating topics and suggesting best practices related to the logical and physical design of the application.

A high-level architectural view of a potential web application's logical structure from the book

The chapter also mentions more commonly known best practices like

IoC (Inversion of Control) - by describing the core concepts and differences to the Factory or Service locator pattern. Moreover the most common IoC libs are listed and it is highlighted how they nicely integrate into the MVC platform by using the MVC DependencyResolver class.aspx”)
SOLID - class design principle
DRY principle

All of the concepts are nicely underlined with proper examples.

JavaScript and Client-Side Templating Techniques

For the sake of completeness, the book also enters into the (now more and more popular) client-side JavaScript development techniques. As such it treats topics like

client-side validation with jQuery Validation
client-side template engines (using the very popular Mustache engine)
responding to ajax requests (with JSON)
custom JSON model binder
JSONP and how to add support for ASP.net MVC controllers
CORS

It also mentions a lessons learned which I experienced by myself:

The other major drawback to working with complex objects is that they may be heavy or challenging to work with via JavaScript. A good practice to help avoid these challenges is to create a special, lightweight version of the entity called a data transfer object (DTO) that is more easily converted into JSON.

Quality Control

The quality control part goes into the details for constructing a proper logging system by describing on how to catch exceptions in an MVC environment, how to signal the user what happened up to building up a health monitoring system. It then enters into the topic of automated testing, mentioning the kind of automated tests (Unit, Integration, Acceptance Tests), and their corresponding characteristics. Nice examples are also provided on how to test an ASP.net MVC model/controller and how you can keep your tests clean by factoring out duplicated code. The chapter concludes by describing on how to setup a fully functional automated build environment with TFS.

Conclusion and Résumé

There’s a lot more in the book than I could write here. It also talks about the new Web Api, about security topics, caching as well as advanced data access patterns. I really couldn’t imagine anything that has been left out right now.
That said, I guess by reading this post you should now have quite a good knowledge about whether this book is for you as well as how deep your knowledge is by reading through some of the buzz-words I mentioned. Personally I can really just suggest it to every .Net web developer as it treats all of the currently actual topics in a very detailed, clear and understandable manner.

(Also do not miss the appendix on “Best Practices”!)

HowTo: Subscribe to Failed TFS Builds

2012-11-23T00:00:00-08:00

When you use a build server it is a must to get notified in case of build failures. Microsoft’s Team Foundation server has different possibilities to achieve this: using the Build Notification Tool or through so-called Alerts.

One of the prerequisites is the installation of the latest Team Foundation Power tools. You should find them easily by just googling.

Build Notification Tool

The build notification tool is a rather small windows tool that lets you subscribe to your different TFS builds.

You then get notified with IM messenger like notifications.

The tool is very beta however. Most often it has quite some delays in the notifications and there are a couple of bugs in the subscription dialog. The little red/green icon in the taskbar immediately notifies you about any problems in your builds.

TFS Alerts

Another possibility is to use the TFS alerts to get notified via email. Normally you can just right-click on the project of your team project and open the project alerts dialog.

There you can register yourself for any build quality change. That might just work fine for you. However, if you’d like to get notified only for failing builds then you have to define a separate alert definition.

Create Failed Build Alert Definition

Note: So far I’ve not found a way to achieve this in VS2012.

To create a custom alert definition for only failing builds you have to open VS2010 (with installed TFS power tools) and go to the menu Team > Alerts Explorer.

That should open the Alerts Explorer view where you can see all of the defined alerts.

Click on the “New Alert” button in the toolbar.

Then define the condition for being notified. For instance

Save it and it should work then.

juristr.com

Blog Like a Hacker with Jekyll and Nitrous.IO

Nitrous.IO Makes It Possible

Configuring Jekyll on Nitrous

Configure GitHub

Install Jekyll

Start Blogging

Conclusion

Perfect Workflow in Sublime Text 2

Git Explained: For Beginners

Just before we start..

Terminology

Workstation Setup

Lets get started: Create a new Git Repository

Create and commit a new file

Add another file

Create a (feature)branch

Merge and resolve conflicts

Jump to a certain commit

Rollback

Undo Uncommitted Changes

Files Not Staged For a Commit

Files Staged for a Commit

Sharing/Synching your Repository

Cloning

Resources and Links

My Sublime Text Setup

Sublime Configuration

Access from the Shell

Installing Packages

Package Control

My Packages

Related Posts

Modularity in JavaScript MVC Frameworks

Modules? I don’t Have Anything Similar to that!

But Wait: My Widgets Have to Communicate!

AuraJS - Widget Architecture for Backbone

MarionetteJS - Another Backbone Extension

Decoupling in JavaScriptMVC

Part 1 - MVC Architecture and the Observer Pattern

Part 2 - Development process

Entity Framework: Intercepting SQL Queries for Contextual Logging

MiniProfiler to the Help

Installing and Registering MiniProfiler

Querying MiniProfiler’s Logs

Conclusion

Will I really Miss Google Reader??

Seems Time to Change

Feedly - A Worthy Alternative?

Native Clients

Customize it The Way You Like

Feed Aggregation and Social Integration

Conclusion

Mocking Internal Interfaces with Moq

Testing Classes with Internal Visibility

Mocking Interfaces with Internal Visibility using Moq

Interview with DZone

Hi Juri! Thanks for talking to us. What have you been working on lately?

What has most excited you in the world of HTML5 and JavaScript recently?

What does the next year hold for web apps?

Do you have a favorite blogger?

You practice Yoseikan Budo – could you tell us a little bit about how you got started? Does it trickle into other aspects of your life?

The Coaching Architect

TL;DR

Talk Notes

Problem

You are the Bottleneck

Role of a leader

Leadership is tough

How to grow people - Learning

Time

Triangle of Quality

Understand why behaviors don’t work

Common Language

Conclusion

DZone MVB Goodies Box

Test Your App Under Slow Network Speeds

From a User’s Perception

Do you Test your Application under Different Network Speeds?? How often?

How to Simulate Different Network Types