Contents

• Intro
• Developing with Docker Compose
• Why use Docker and Docker Compose?

Intro

This guide is for getting developers started with using Docker Compose for development. It's targeted at devs who have experience with Docker but are sick of writing out one liners into their terminal to start a container.

You will see:

• how to run a service with Docker Compose
• how to use Traefik as a reverse proxy (makes accessing services from your browser way easier)
• the benefits of using Docker vs traditional installation of services

Developing with Docker Compose

You will need to have Docker and Docker Compose installed before you get started.

I'm using Docker 19.03.13 and Docker Compose 1.27.4.

In this example, I will be using PostgreSQL (a database similar to MySQL/MSSQL).

Running PostgreSQL with Docker Compose instead of Docker

You could write a one liner into your terminal to run your service:

$ docker run -p "5432:5432" --name postgres -e POSTGRES_USER=username -e POSTGRES_PASSWORD=password postgres:10.8-alpine

This is equal to using this docker-compose.yaml file:

version: '3'

services:

  postgres:
    image: postgres:10.8-alpine
    environment:
      POSTGRES_USER: "username"
      POSTGRES_PASSWORD: "password"
    ports:
      - "5432:5432"

Just run:

$ docker-compose up postgres

With either approach, any application can access Postgres over http://localhost:5432

We can see what containers we have running by running:

$ docker container ls

The output should be similar to:

CONTAINER ID        IMAGE                  COMMAND                  CREATED        STATUS              PORTS                    NAMES
89897d61fcaa        postgres:10.8-alpine   "docker-entrypoint.s…"   27 seconds ago Up 26 seconds       0.0.0.0:5432->5432/tcp   dev_postgres_1

You can see that the name of the container has been set to postgres- and the name of the folder that the docker-compose.yaml file is in.

Adding pgAdmin

PgAdmin is a web UI for managing Postgres.

You could go and download the executable and run it, or you could use a container to run it. This is possible because the management UI is just a website.

version: '3'

services:

  postgres:
    image: postgres:10.8-alpine
    environment:
      POSTGRES_USER: "username"
      POSTGRES_PASSWORD: "password"
    ports:
      - "5432:5432"

  pgadmin:
    image: dpage/pgadmin4:4.11
    ports:
      - "1111:1111"
    environment:
      PGADMIN_LISTEN_PORT: "1111"
      PGADMIN_DEFAULT_EMAIL: "pgadmin@example.com"
      PGADMIN_DEFAULT_PASSWORD: "password"
    depends_on:
      - postgres

Now run:

$ docker-compose up pgadmin

Because pgadmin depends on postgres, Docker Compose will run postgres first.

Now you can access pgAdmin via your web browser with http://localhost:1111

The pgadmin container can also access the database server using the hostname postgres as all containers in the same docker-compose.yml have their own network created where they can access each other.

Using Traefik

Traefik is a reverse proxy gateway server. For developing, it can allow you to have easily accessible URLs on your local dev environment.

Here's an example docker-compose.yml that uses Postgres, with pgAdmin, with Traefik for the reverse proxy:

version: '3'

services:

  postgres:
    image: postgres:10.8-alpine
    environment:
      POSTGRES_USER: "username"
      POSTGRES_PASSWORD: "password"
    expose:
      - "5432"
    labels:
      traefik.http.services.postgres.loadbalancer.server.port: 5432
    depends_on:
      - traefik

  pgadmin:
    image: dpage/pgadmin4:4.11
    expose:
      - "1111"
    environment:
      PGADMIN_LISTEN_PORT: "1111"
      PGADMIN_DEFAULT_EMAIL: "pgadmin@example.com"
      PGADMIN_DEFAULT_PASSWORD: "password"
    labels:
      traefik.http.services.pgadmin.loadbalancer.server.port: 1111
    depends_on:
      - traefik
      - postgres

  traefik:
    image: traefik:2.2
    command:
      - --providers.docker.defaultRule=Host(`{{ normalize .Name }}.docker.localhost`)
      - --api.insecure=true
    ports:
      - "80:80"
      - "8080:8080"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro

Run all the containers using:

$ docker-compose up

Navigate to http://localhost:8080 to see the Traefik dashboard.

Connecting to services

Navigate to http://pgadmin-{folder-name}.docker.localhost to access pgAdmin, make sure to replace {folder-name} with the name of the folder which your docker-compose.yml is stored in!

This works by default in Chrome (and other Chromium based browsers such as Edge), but not with Firefox or cURL. Chrome can resolve the URL. There's a good StackOverflow post here which can get you started on this rabbit hole.

My advice to the Firefox users is to modify your hosts file to include this line:

127.0.0.1 pgadmin-{folder-name}.docker.localhost

Why use Docker and Docker Compose?

The traditional way of installing a service (such as database server) is to:

• download an executable and install it
• run through the setup wizard

This mean dealing with these problems:

• sharing the setup process with a coworker is difficult
• the service (often) runs on startup
• the service keeps running in the background even when not developing
• running parallel versions is difficult
• deleting the service from file system leaves artifacts behind
• each service ties up a port, causing conflicts if 2 services try to use the same one

Docker solves these issues. Docker itself can cause some overhead when running services, but everything inside it is encapsulated. If a service is no longer needed, only the container needs to be deleted, and it's like it was never on the computer. If a service misbehaves, it can be quickly binned and recreated to resolve any issues.

Docker Compose streamlines the installation of installing a service. There's no need for an installation wizard to guide the process, instead just a single config file defines everything. The config files can be shared with other people, or saved into the code repository so anyone can see an applications requirements.

Resources

• https://docs.traefik.io/
• https://hub.docker.com/_/traefik/
• https://blog.thesparktree.com/traefik-advanced-config
• https://docs.docker.com/compose/compose-file

A note to non-technical readers - an API (application programming interface) allows developers to hook into code which has been provided to them. For example, a phone may have an camera API which allows developers to interact with the camera of that phone.

If you're short on time - skip to But now Google wants to deprecate another API.

Change is... good?

Back in Firefox 57 (released late 2017), Mozilla deprecated their older legacy extensions API in favour of the newer WebExtensions API. The legacy API gave developers a huge amount of control over the browser which allowed them to completely change how the browser looked and behaved, but the new API was not nearly as capable.

Users and developers were furious as some addons simply couldn't be ported over to the newer API.

However, Mozilla had some very good reasons for doing this, namely, the newer API:

• was much easier to use
• had cross platform support, so an extension written for Firefox would mostly work with Chrome (and didn't need a full rewrite)

Also the legacy API also had some big issues:

• it perhaps gave too much control to developers (making Firefox unstable)
• but most importantly, it was not compatible with "e10s" (multiprocess) Firefox

Firefox was slower

The Firefox codebase had been partially rewritten to support multiprocessing - this allows Firefox to be a noticeably faster.

Firefox was losing a lot of users because it was painfully slow when compared to Chrome, a browser which had multiprocessing from the start.

Mozilla had to make a hard decision - either remove the legacy API (hurting a small number of power users), or keep the API and watch as the browser became comparatively slower (hurting all users). Although I miss the old extensions which improved the browsing experience, I think they made the right choice.

These days, public sentiment towards Firefox has changed a lot. To me, the browser feels noticeably faster and less buggy. In fact, Chrome is often stated to be a resource hog, as it eats RAM like there's no tomorrow. There's even memes about it:

Further reading: the differences between multiprocessing in Firefox and Chrome, and why Chrome eats RAM in favour of stability and speed

But now Google wants to deprecate another API

Recently there have been discussions about Chrome removing support for the webRequest API, in favour of the declaritiveNetRequest API.

The current API allows developers to make a request to any website on the web, on your behalf. They can even steal cookie information, so if you've just logged into your banking website, a malicious addon could secretly tell the website to transfer funds out of your account.

I myself have made an extension which actively uses cookie information to authenticate with a website to make web requests on the users behalf (non-maliciously of course) - it's not hard to do.

Would this affect me?

uBlock Origin is one of the most popular content blocking extensions available today. If you haven't heard of it, it's like an adblocker, but it doesn't just block ads, it blocks anything that could harm your privacy.

In short, the newer API doesn't have the level of control the older API has, so uBlock would be severely neutered in its capabilities.

But I use Opera/Brave/Vivaldi/Microsoft Edge

Opera, Brave, Vivaldi (and soon Microsoft Edge), are all based on Chromium, which is an open source version of Chrome. Basically, anything which happens in Chrome, will likely happen in Chromium based browsers too.

But I use Firefox

Firefox and Chrome would prefer to keep their WebExtensions API similar so the extensions can be easily ported between the platforms. And there's a good reason for Mozilla to go along with Google - it improves security...

Security

Here's the thing. When a developer makes a change to an extension, they can publish that change to both the Firefox addon store, and the Chrome extension store. Once it's published, any user who currently has that addon would then get the updated version.

But that developer could update their extension to include malicious code. The extension would then be stealing passwords without anyone realising for days.

There's one key difference between publishing on Firefox and Chrome:

Publishing to the Firefox store takes less than minute - Mozilla do a quick automated check then releases the extension.

Publishing to the Chrome store can take days - Chrome also does automated tests, but they seem to actually have a real person look over the code to check that nothing dangerous is going on.

With my personal extension, I find that publishing a new version to the Chrome store tends to take about 5 days (because I'm asking for these specific permissions that give me full access to everything).

Cost

Since Google has to pay a real person to look over the code, this becomes quite costly. I can see why Google is interested in removing this potentially dangerous feature. Not only would it protect their users, but also it would save them a lot of time and money.

My verdict

Most other articles on this topic only mention that this would stop adblockers such as uBlock from working (which is of course in Google's interest), but they don't mention how insecure extensions really are.

Based on the fact that Mozilla deprecated their legacy extensions API knowing that it would hurt some users, I think Google will also change their extensions API in order to protect the user from malicious extensions.

The final problem

I just want to wrap up here and say that the WebExtensions API, to my surprise, is not a W3C standard.

This means as a developer, I'm constantly finding small differences between the Chrome and Firefox WebExtensions. It seems they can't quite agree on how things should be implemented, and means that they're free to make changes how they want.

My hope is that this API can become an open standard in the future.

Below I have compiled a list of channels which I actively follow and avidly wait for new content from. I have put a suggested video with some of the channels so you can see if you like them, right here. I hope you find it useful.

The Channels

I've loosely bundled together all of my most watched channels into some categories.

Somewhat educational

Most of the videos I watch are somewhat educational by nature. I like the feeling coming away from a video thinking I've learned something, rather than just watching funny trash.

Tom Scott

By far one of my favourite YouTubers. One of his best series is Amazing Places.

austinmcconnell

Austin McConnell is a filmmaker who creates high quality videos on on particular subject.

Matt D'Avella

Matt D'Avella is a filmmaker. His YouTube channels features crisp, well crafted videos that attempt to advertise the benefits of being a minimalist in everyday life.

Sterling Grinnell

Sterling was recently popularised by Matt D'Avella by a fantastic video which copies Matt's video style. Sterling is still young but the quality of his videos is already very high.

Second Thought

An animated channel which mostly considers "what would happen if" scenarios.

PolyMatter

Another animated channel similar to Second Thought.

CPG Grey

A fun animated channel. The videos are somewhat sciency.

Tapakapa

Tapakapa is essentially an Austrian version of CPG Grey - the videos are done in a similar animated style and they cover similar topics.

Tech

Marques Brownlee

MKBHD makes super high quality videos on up and coming tech. Half of the reason I watch him is because the quality of his filmography is top notch. He's known for reviewing smart phones, I recommend watching his review on a smart phone before you buy it.

Linus Tech Tips

LTT releases plenty of videos almost daily. They cover anything from building computers with hardware to reviewing cheap Amazon steals.

He feels a bit like he's a shill (as in he's getting paid to say good things about certain products), but for the most part it's a great channel.

TechLinked

A spin off from Linus Tech Tips, TechLinked releases 3 videos a week which briefly explain what new things have happened with tech.

News

Bloomberg

Bloomberg is a well known news outlet. They mostly focus on market and business news.

Vox

Vox features a mishmash of content, which is probably aimed at younger more liberal audiences.

TLDR News

A very new channel with a simple animated art style. They have mostly been attempting to explain what going on with Brexit in an easy to digest way. They're also experimenting in creating a "This Week In Parliament" series where they explain the latest going-ons in the British parliament.

Educational

Two Cents

This channel helps explain the everyday economics of life in a simple way.

CrashCourse

CrashCourse has a number of different series where they quickly explain subjects such as economics, history, psychology and many more.

Music

Middle 8

A fairly new channel which covers mostly newer music artists in details.

Video games

UpIsNotJump

UpIsNotJump used to mostly focus on recreating scenes from popular TV using a video game such as Fallout... I have to say I'm not a fan.

But recently his channel has taken a turn and he's recently been making a series where he explains, with plenty of funny jokes, why a specific game is good or bad in VR.

I can safely say that his videos are one of the big reasons why I want to get into VR.

SovietWomble

SovietWomble creates compilations of him making jokes and otherwise having fun with his friends in a variety of multiplayer games.

Travel

Abroad In Japan

Since I was young I had wanted to travel to Japan. In 2018 I finally got the chance and I wanted to find out about Japan and I came across Abroad In Japan. This channel features a British guy, making rubbish (British) jokes, while explaining his experiences of living in Japan.

Monkey Abroad

Monkey Abroad makes a very good series where he shows how cheap you can travel abroad - for just $20 a day he'll shows what's possible.

Science

Kurzgesagt

Kurzgesagt always makes super high quality, beautifully animated videos. They don't release very regularly but I'm always looking forward to their next video.

Their videos also have a strong chance of giving you existential dread.

Vsauce

Vsauce is likely the most popular science based YouTube channel.

It covers science in a pretty simple way which I feel that anyone can understand. The science has perhaps been dumbed down a little bit and it also he tends to go on these crazy tangents which aren't directly related to the topic of the video.

For example, in the video below (called "What If Everyone JUMPED At Once?"), the video also covers what "decimated" means and what "Dunbar's Number" is (nothing to do with jumping). However, the videos are very entertaining.

Vsauce also does this weird thing where, between cuts of the video, he sort of springs upwards. It's easy to ignore at the start but I notice it every time now.

Veritasium

Veritasium is a lot like Vsauce in the topics which he covers, except I feel like his approach is more aimed at properly teaching science.

In a number of his videos, he will explain an idea by first asking the general public what they think the answer is. He's done research showing that videos which just explain what something is don't tend to teach us anything. By showing telling us what other people might answer, then telling us the correct answer, apparently it helps us retain the lesson learned.

minutephysics

Minutephysics has a cool hand drawn art style which is used to explain physics.

It's worth noting that the videos are rarely a minute long.

MinuteEarth

MinuteEarth is a lot like minutephysics but it covers topics such as biology and geography.

Numberphile

Numberphile is pretty nerdy. It mostly features maths professors talking about maths while scribbling on a bit of paper.

My favourite video is the one below, where a (crazy enthusiastic) man has klein bottles hand made and stored in boxes under his house. The space under his house is quite small, so he built a cute little robot which can grab the boxes for him.

Programming

Devin Crawford

Devin Crawford is an enthusiastic programmer who's at uni. He records himself building his projects.

LiveOverflow

LiveOverflow makes videos about programming and hacking.

Motorbiking

FortNine

ForNine is unlike most motorbiking channels on YouTube, where it's just some douche riding his bike around, or they're just trying to sell you something with a vaguely educational video...

FortNine makes cinematic videos which tell tale about a bike. Production value of the videos is pretty high and they try pretty hard to make each video feel new.

Existential crisis

exurb1a

Exurb1a creates videos which appear to be designed to give existential dread.

The creator also has a channel called exurb2a which features content which doesn't quite fit with the main channel.

Film study

Every Frame a Painting

Every Frame A Painting covers cinematic techniques which are used in movies. Since watching this channel, I find myself looking more at how a scene is filmed. For example, the video below explains how movies make use of single takes. I've really begun to notice when movies are using single takes, such as in Children of Men which for me, is a pretty iconic movie.

Now You See It

Now You See It is a lot like Every Frame A Painting, it's worth checking them both out.

Languages

Language Transfer

I've used this free language training course to help me learn German, and I have to say that the style of teaching is very good for those of us who hate memorising languages. I strongly recommend Language Transfer for anyone who wants to start learning a new language.

Trash

apandah

Apandah makes videos are purely post modern trash. Viewer discretion is advised.

an0nymooose

More random trash.

Have something to say?

I hope you found this list of videos somewhat helpful.

If you have a list of videos you want to share, or a specific channel you're really into, please share it below!

Some web applications need to be able to trigger tasks to occur as set times. A good task scheduler should be able to do the following:

• schedule one off tasks
• create reoccurring tasks
• set a time and date for a future task to occur
• allow access a UI which can be used and understood by anyone
• allow for error handling

Tasks which you may want a task scheduler to do include:

• triggering CSV imports to update site content
• ensuring that repeat payments or orders occur
• sending emails to users which haven't been active in a while

Umbraco has a built-in way of handling task scheduling. Add the following code in a YourUmbracoSite.Web/config/umbracoSettings.config file and you're away:

<scheduledTasks>
    <!-- add tasks that should be called with an interval (seconds) -->
    <task log="true" alias="My Scheduled Task" interval="3600" url="https://website.com/umbraco/api/tasks/method" />
</scheduledTasks>

You can read more about using this here.

This works by visiting the given URL at a set interval (in seconds). But this method has a lot of drawbacks:

• you can't set a specific time for a task to occur (such as once per day)
• the only way to check to see if a task triggered or completed is to look in the Umbraco log which isn't transparent for non-developers
• it's possible that two instances of the same task could run simultaneously as this method doesn't check for an existing running task
• the task can be interrupted by a server or website restart and there's no built in error handling
• tasks have to be publicly accessible by a URL and the built in Umbraco authorisation doesn't work

It's about time we did away with this and used something better!

Okay! What's the solution?

There's a few ways to schedule tasks in .NET. Here are some options:

• Quartz
• Hangfire
• Windows Task Scheduler

Quartz

Quartz is an open source .NET scheduler and is a port of a popular Java job scheduler.

I have used Quartz on an internal project and my experience was good. You can either schedule tasks using the built in LINQ methods, or if you understand crontabs then you can build complex schedules with one line strings.

Tasks can either be stored in memory or you can configure Quartz to save tasks to a database. The former option is simpler to setup, but would require you schedule the tasks on site startup if you want to have commonly occurring tasks.

The only downside of Quartz I can think of is there's no UI to view tasks, so it's still not transparent to non-developers what is going on.

There is an Umbraco package called Url Task Scheduler for V7 which uses Quartz for scheduling and provides a UI on an Umbraco dashboard. Though you should note this package is targeted at developers and there haven't been any recent updates to the package. Use at your own risk!

Hangfire

Hangfire is a full-featured solution for task scheduling as it even includes a beautiful UI which you can access via your browser. The UI can tell you when tasks have been called, when they completed and if an error occurred.

Hangfire assumes you have a MS SQL database and setting it up to use the database is super simple. But the best thing is some other Umbracians have written blog posts on integrating Hangfire with Umbraco. Check them out here and here.

Hangfire might be a little overkill if you want to setup a couple of simple reoccurring tasks, but for bigger websites, there is a real benefit from using it.

Windows Task Scheduler

Windows has a task scheduler built straight into it which can be used by programs or users.

The Task Scheduler is a similar solution to using the Umbraco built in scheduler, but with three clear advantages:

• you can set a time and date for a task to be called
• the task scheduling isn't affected by site and server restarts
• you can add error handling in (such as calling the task again if an error occurs)

The steps involve creating a script (such as a PowerShell script) which calls a web URL and waits for a response. A simple example of the code is:

$url="https://website.com/umbraco/api/tasks/method"
(New-Object System.Net.WebClient).DownloadString("$url");

The downsides of this approach are:

• the task sits outside of the application which isn't transparent and can add technical debt to a project
• the UI can only be accessed by RDPing into the server
• tasks have to be publicly accessible by a URL

My verdict

It's often that more complicated websites need to be able to run reoccurring tasks. Umbraco Scheduled Tasks can solve this issue, but it's not a silver bullet and can cause more problems than it solves.

My personal favourite solution is Hangfire because of the user friendly UI. But ultimately, what you use depends on how critical tasks that you need carrying out are and the budget of your client.

Have you got a solution you prefer? Or do you think Umbraco should include a better task scheduler in the core? You can contact me on Twitter to let me know what you think!

Show me the packages

301 URL Tracker

https://our.umbraco.org/projects/developer-tools/301-url-tracker/

As of Umbraco 7.5, the CMS comes with its own 301 redirecter. What this does is when you move or rename a page in Umbraco, the 301 redirecter will put a redirect in place to send the user from the old pages URL to the new one. This helps a lot with SEO as Google hates it when it finds a 404 where a page used to be.

However, the 301 redirecter is not perfect. It is fast but it doesn't allow you to setup your own redirects. This can be a pain if you're migrating from an old site, or you need to set up some more comprehensive redirects.

This is where 301 Url Tracker comes in. This package has been around since Umbraco 4. It was actually the inspiration for the new built in redirector. It also tracks page changes and automatically adds new redirects, but you can set up your own redirects if required, which can also use regular expressions. The package doesn't 100% fit in with the Umbraco aesthetic, and it has some bugs mainly to do with performance, but these issues are small and can generally be fixed by upgrading to the latest version of the package.

Nested Content

https://our.umbraco.org/projects/backoffice-extensions/nested-content/

Nested Content is a package I simply cannot live without when building even the most simple of Umbraco websites. It's a property editor that allows you to create repeatable content in Umbraco on a node using a doc type schema to model the repeatable content. This beats a host of other ideas such as using real nodes as it keeps all of the content for a page on one node. It's quick and easy to setup and it supports almost any property type you throw at it. Another great feature is that the data maps straight to IPublishedContent so you don't even need to learn anything new. One last reason to use Nested Content is there is instant Models Builder support.

An alternative to NC is Archetype, which offers nearly the same functionality but doesn't use the built in Umbraco doc types.

uSync

https://our.umbraco.org/projects/developer-tools/usync/

If you're not using Umbraco Cloud (aka, Umbraco as a Service (UaaS)), then you may need something like uSync to help with managing schema changes in Umbraco between dev/staging/live instances of your website. uSync can output some files which describe an Umbraco website, these files can then be copied to another Umbraco website which can then be used to update that website to be the same as the original website.

This saves anyone from needing to do the tedious work of adding new document types, templates, properties and whatever else to multiple Umbraco instances. Just copy the files over and it's all managed for you.

My original experience with uSync was a bit buggy, but I soon learned that using the packages manual mode made the package a bit more predictable.

Models Builder

https://github.com/zpqrtbnk/Zbu.ModelsBuilder/wiki

Before this package came along, I was writing custom C# models which reflect individual Umbraco nodes. These models would handle getting data out of Umbraco and made managing long lasting websites much easier. However, writing these models is potentially time consuming. This is where the Models Builder comes in. With the click of a button, a DLL or set of automatically generated C# files can be created which does all of this for you. This basically hands you strongly typed models which can be used with Visual Studios Intellisense for a better developing experience. The Models Builder truly has improved the way which I build websites and saves me time everyday.

This package actually comes built into Umbraco. Generally it is turned on by default, which can be a little confusing if you haven't built with Umbraco before. However, I strongly recommend reading the documentation on this package as it will help you in the long run.

If you're not into having models generated automatically (as this can give you less control over the resultant code), you may want to look into using Ditto as it can help speed up the rate which you can write your own models. I have not personally used Ditto as I love the Models Builder, but I think Ditto would have been great otherwise.

Umbraco Core Property Value Converters

https://our.umbraco.org/projects/developer-tools/umbraco-core-property-value-converters/

This package is a huge helper for anyone who uses the Models Builder as it changes the property types for core property editors in Umbraco from simplistic ones to something more useful. For example, if you use a Content Picker (node picker) in Umbraco, rather than giving you an integer to use in your code, you automatically get an IPublishedContent then and there. This saves time as you don't need to manually retrieve the document from the Umbraco cache and this also ensures that you can't make any errors in this process.

A note on using this package - it's best not to add it after a site has been built as it will change what the Models Builder outputs. This means that if your code expects a integer and is instead now being handed an IPublishedContent, your code will error!

Umbraco Forms (Contour)

https://our.umbraco.org/projects/developer-tools/umbraco-forms/

I have written about Umbraco Forms before, but would just like to reiterate for anyone else that this package is really quite nice. Umbraco Forms allows content editors in Umbraco to create forms of their liking which can then be added to the front end. This is great as it saves developers from needing to add or remove fields in the long run - the content editor can do all this as they need.

Umbraco Forms also saves form submissions into a database table which can all be accessed through the backoffice. This is great because if the SMTP details on your website suddenly stop working (it's happened before and I guarantee it will happen again), form submissions will still be saved in an easy to reach place.

The only downside of this package is that it costs 129 euros per a domain. However, you can test it on a localhost for free before you buy.

Iconator

https://our.umbraco.org/projects/backoffice-extensions/iconator/

No article would be complete without some shameless self-promoting... That's why I'm sharing my own personal package called Iconator with you. It's a simple package which scans a CSS file for icon classes (using a regex) and allows a backend user to select the icon they want in a friendly and visual way.

I've used this package on a number of client websites as it solves an everyday problem. If you're not sure about icon fonts, you can see why they're great here.

Multi Url Picker

https://our.umbraco.org/projects/backoffice-extensions/multi-url-picker/

Multi Url Picker is another package which never misses an Umbraco installation for me. It's a simple property editor that allows you to pick either an internal Umbraco node or allows you to input a link to another website. The backend user can also supply a name for the picked link (which is great for putting in an anchor) and whether the link should open in a new tab.

A DLL is supplied with this package which gives you a model which you can cast the data to. This actually works really well as it just supplies you with a URL to print onto the page, no need to use the UmbracoHelper to get an IPublishedContent - it's all done for you.

Documento

https://our.umbraco.org/projects/backoffice-extensions/documento/

This package made by GrowCreate isn't a must have, but it's nice to have regardless. It replaces the standard dashboard when you login to your Umbraco website with a slightly more helpful one which lists out all of the document types that have been setup in Umbraco, with some information about what each field does. It's pretty and it includes a link to an Umbraco editor manual which can be useful for new Umbraco editors.

Umbraco v6 MVC Razor Cheatsheets

https://our.umbraco.org/projects/developer-tools/umbraco-v6-mvc-razor-cheatsheets

This package is perhaps a little outdated by now but it's still quite relevant to Umbraco 7 since Umbraco 6 is architecturally very similar. This package is just a PDF cheatsheet which lists out all of the methods that are available to an Umbraco developer. I can remember referring to this sheet many times when I first got started with Umbraco and C#, and I would still recommend it to newer members of the community who aren't yet used to the ASP.NET stack.

Doc Type Grid Editor

https://our.umbraco.org/projects/backoffice-extensions/doc-type-grid-editor

This package is a must have if you're creating complicated Grid layouts in Umbraco. The idea of the package is simple yet revolutionary as it allows you to use Umbraco document types, much like Nested Content, except inside of the Umbraco Grid. This is great because adding functionality to the Grid can be a slow and cumbersome process. This package makes the process much quicker and cleaner by uniting different components of the backoffice together. Next time you work with the Grid and you need to output something a little more than a few columns (and you want to avoid the soon to be deprecated macro), then this package may fill you with happiness.

uComponents (Umbraco 6)

https://our.umbraco.org/projects/backoffice-extensions/ucomponents

If you're lucky enough to be supporting an Umbraco 6 (or even Umbraco 4!) website then uComponents adds a bunch of functionality to the backoffice including my favourite pre-Umbraco 7 property editor called 'DataType Grid'. This property allows for repeatable content (a little like Nested Content but a lot less pretty and less developer friendly) in Umbraco.

I won't dwell on this package as it's back from the dark days. It's definitely worth noting that there is no clear path for upgrading a website from Umbraco 6 to Umbraco 7 when the data is stored in uCompontents data types. You must either manually migrate the data or figure out some programmatic route. Either way, it can take some time.

Round up

There are some more packages which I use but nothing super essential. This list is already pretty comprehensive and should give any Umbraco user an idea of what's out there. If there's anything extra then you should mention it below, maybe there's something I haven't heard of yet which needs adding to this list!

Judging from this Stack Overflow thread, it was very easy to do using Python, but I don't have Python installed (although I should probably find some time to actually learn the languages basics). I do however have NodeJS installed.

After discovering and installing this package that can find the length of a single MP3 file, the next step was easy. Simply get all of the files in a folder, and get the length of each file:

const mp3Duration = require('mp3-duration');
const fs = require('fs');

const folder = './mp3s/';

fs.readdir(folder, (err, files) => {
    if (err) {
        return console.log(err.message);
    }

    for (let file of files) {
        mp3Duration(folder + file, (err, duration) => {
            if (err) {
                return console.log(err.message);
            }

            console.log(file + ' is ' + duration + ' seconds long');
        });
    }
});

After running this script and waiting a couple of seconds, the console began to spit out of all of data I needed:

...
37.mp3 is 366.733 seconds long
05.mp3 is 372.297 seconds long
29.mp3 is 379.376 seconds long
28.mp3 is 380.735 seconds long
19.mp3 is 413.022 seconds long
11.mp3 is 420.206 seconds long
12.mp3 is 424.751 seconds long
20.mp3 is 426.632 seconds long
03.mp3 is 437.316 seconds long
01.mp3 is 445.1 seconds long
26.mp3 is 457.822 seconds long
06.mp3 is 466.495 seconds long
07.mp3 is 466.625 seconds long
18.mp3 is 462.785 seconds long
32.mp3 is 481.176 seconds long
24.mp3 is 470.518 seconds long
...

Hurrah! Oh wait, the files aren't quite in order here. I wanted the files to be read in alphabetical order. Obviously a race condition was occuring. Generally the shortest file was being printed at the top, and the longest at the bottom.

A quick change ensured that each file would be read in the correct order:

const mp3Duration = require('mp3-duration');
const fs = require('fs');

const folder = './mp3s/';

const readFiles = (files, index) => {
    let file = files[index];

    mp3Duration(folder + file, (err, duration) => {
        if (err) {
            return console.log(err.message);
        }

        console.log(file + ' is ' + duration + ' seconds long');

        if (files.length != index + 1) {
            readFiles(files, index + 1);
        }
    });
};

fs.readdir(folder, (err, files) => {
    if (err) {
        return console.log(err.message);
    }

    readFiles(files, 0);
});

This causes this output:

01.mp3 is 445.1 seconds long
02.mp3 is 320.183 seconds long
03.mp3 is 437.316 seconds long
04.mp3 is 356.415 seconds long
05.mp3 is 372.297 seconds long
06.mp3 is 466.495 seconds long
07.mp3 is 466.625 seconds long
08.mp3 is 357.982 seconds long
09.mp3 is 585.117 seconds long
10.mp3 is 344.842 seconds long
11.mp3 is 420.206 seconds long
12.mp3 is 424.751 seconds long
...

This script is significantly slower than the last, because the program waits until each files length is figured out before reading the next file.

My challenge was now complete, but still, I wanted to produce the fastest script I could. The Promise API is really useful for this:

const mp3Duration = require('mp3-duration');
const fs = require('fs');

const folder = './mp3s/';

const promises = [];
const results = [];

fs.readdir(folder, (err, files) => {
    if (err) {
        return console.log(err.message);
    }

    for (let file of files) {
        promises.push(new Promise((resolve, reject) => {
            mp3Duration(folder + file, (err, duration) => {
                if (err) {
                    reject(err.message);
                }

                results.push(file + ' is ' + duration + ' seconds long');

                resolve();
            });
        }));
    }

    Promise.all(promises).then(() => {
        console.log(results.sort());
    }).catch((err) => {
        console.log('error:', err);
    });
});

After a few seconds of waiting, this outputs an array of sorted values:

[ '01.mp3 is 445.1 seconds long',   
  '02.mp3 is 320.183 seconds long', 
  '03.mp3 is 437.316 seconds long', 
  '04.mp3 is 356.415 seconds long', 
  '05.mp3 is 372.297 seconds long', 
  '06.mp3 is 466.495 seconds long', 
  '07.mp3 is 466.625 seconds long', 
  '08.mp3 is 357.982 seconds long', 
  '09.mp3 is 585.117 seconds long', 
  '10.mp3 is 344.842 seconds long', 
  '11.mp3 is 420.206 seconds long', 
  ...]

Conclusion

I'm sure that there's an even faster way of getting the length in seconds of a group of MP3 files, but for my purposes this worked great. However, writing this saved me time, it's reusable for the next time I need to do it and as always, writing anything with JS is a lot of fun for me.

The learning curve

When I first started using Umbraco at GrowCreate, I only had experience with the PHP stack, so trying to learn ASP.NET and C# was a big hurdle for me. It took me quite a few months to understand the new stack including the use of the MS SQL database, IIS, and Visual Studio. This was not an easy time, although looking back on my days of PHP I can say that using ASP.NET feels far more structured.

As a developer it can be hard to get started with Umbraco; luckily I had someone helping me through the basics. From a developer and a content editor’s point of view, Umbraco is very usable. The near perfectly built Angular interface of Umbraco 7 is quick and seamless to interact with and feels modern compared to other content management systems.

Features

Umbraco comes packed full of features that allow for most designs to be completed without requiring any extra packages (add-ons). This is great because you don’t have to rely on support outside of Umbraco HQ which means fewer dependencies and an easier upgrade path in the future. Below I have outlined some of the features that come with Umbraco:

Front end freedom

One reason why we chose Umbraco as our CMS is that it doesn’t impose any kind of restriction on what kind of markup you have to write. This means that you can have the front end built as an entirely different step to the Umbraco implementation. This appears to differ to perhaps a Wordpress site, where everyone I have seen has tons of junk in the HTML which increases page weight and impacts performance. Umbraco takes a different approach by giving you a blank slate and with it the freedom to design and code whatever you want.

Media

The media section of Umbraco is one of the most obvious features. Simply put, it allows content editors to upload images and files that can then be referenced from other parts of the website.

The media section over the years has received a number of improvements despite holding the same core functionality. The beauty of the media section is that it can be changed as per the developer's ideas much like the rest of the templates can within the implementation. It’s all built using the same system, so no extra learning is required.

Members

Umbraco still has the member section which hasn’t changed much since Umbraco 4. This area of the back office allows the administration of members (users) of the site. New members can be created here, or old ones edited. You can also quite easily programmatically create members whenever one signs up using the methods and classes provided by the Umbraco installation. The grid

The grid has been around since Umbraco 7.2. It allows content editors to create a more custom template with a column layout. The editor can create multi-column layouts to display content on the front end.

Our clients love the grid

My personal experience developing with the grid has been pretty bad. When it first came out there were a number of bugs and not much documentation and this meant a lot of time faffing around. The code you have to write isn’t pretty and given the choice I would not develop with the grid, but there’s one big problem; our clients love the grid!

The grid really does allow a lot of freedom to the content editor. This means you have to code for a wide array of uses and this can take a long time. I guess as long as clients keep requesting the grid we will work to build better implementations until we’re grid masters.

Umbraco Forms

Although technically not included in Umbraco, the Forms (previously called Courier Contour) package is maintained by Umbraco HQ and costs 99 euros per domain or is free for Umbraco Gold Partners.

Umbraco Forms allows content editors to create custom forms which can then be placed on the website. The package works well for simple forms and can be extended to do more complicated things. Form submissions are automatically stored in the back office which editors can easily view, which ensures that if an email doesn’t get sent, there’s always a record of the submission.

Personally, I love the Forms package because it cuts down on work for the developer when content editors want to add or remove a field from a form or have it send the email to someone else. While this functionality could be custom built into Umbraco, it’s not worth the effort. For the price, Umbraco Forms covers a lot of use cases.

Models Builder

The Models Builder is a purely technical feature of Umbraco that developers can utilise to speed up Umbraco development. Umbraco is not a code first CMS (although there are some packages out there which can make it code first), this means that the code has to be written to mirror the data the CMS contains. As a C# developer, this may mean writing models which reflect the data. However, with the Models Builder, this step can be automated meaning at a click of a button, a DLL or some C# files can be generated. Personally, I love this, even if it can be a little buggy.

The open source aspect

This may be an obvious thing for some people, but I just want to iterate this. Umbraco being open source is a massive feature. Unlike some other CMS platforms (cough, Sitecore), I can look at the Umbraco source code and know where the code needs improvement. You may be asking, “Why would I want to see the ugly code?” Well, being able to know where a CMS needs improvement allows me to really get comfortable with the CMS. All software has warts and bugs, but if they’re in plain sight, I can at least improve the code or avoid using it altogether.

Even better, if I find a bug in Umbraco which I can’t avoid, I can find it in the code base and try to fix it myself, or I can point out the issue to someone else (either the community or Umbraco HQ) who can then fix it for me. This is something I love about Umbraco. In fact, I could probably write another paragraph about how awesome the Umbraco community is, but you really have to experience that yourself.

Easily extendable

It’s fair to say that extending Umbraco is a breeze. That’s not to say a little more documentation wouldn’t be handy, but with a little knowledge of how to use the (reasonably well documented) Umbraco surface controller API, and a quick and dirty understanding of how the front end works with Angular, you can create new dashboards and sections in Umbraco.

At GrowCreate, we have built integrations into Umbraco with SharePoint, Salesforce, and MS Dynamics. We have even built our own packages such as Pipeline CRM and Iconator. I think being able to extend Umbraco is one of it’s greatest strengths.

The future

The future of Umbraco is bright. And I’m not just saying this because GrowCreate main sale is Umbraco integrations. I genuinely believe it.

Despite packing more features, Umbraco itself seems to be getting faster with every release. And with the release of Umbraco 8 in the coming year (hopefully early 2017), we can expect some tremendous improvements, such as:

• cache improvements (moving away from an XML cache to an in-memory cache, much faster!);
• using GUIDs (unique IDs) rather than standard IDs allowing for easier syncing of data between Umbraco instances;
• cutting down of the Umbraco code base (if I remember from Code Garden, the cut down may be as large as 30%);
• the latest minor version of Angular (better experience developing packages for Umbraco).

You can read up on the status of Umbraco 8 here.

On the ASP.NET site of things, Microsoft appears to be moving towards open sourcing and making their technologies cross-platform. This includes:

• the release of .NET Core (a newly rebuilt version of .NET which is 100% cross platform, Umbraco HQ hopes to get Umbraco 9 built on .NET Core which would allow Umbraco websites to be hosted on a Linux server)
• the release of SQL Server 2016 which can be run on Linux (beta now available)
• the release of different types of Windows Servers, including Nano Server which is a massively cut down version of Windows (weighing around 1GB and comes without a GUI) which is perfect for hosting small websites or for building lightweight Docker containers

Conclusion

Umbraco has plenty of features which, if you can get past the development learning curve, can be extremely flexible and a joy to program with. The fact that the technology is open source and backed by a profitable company and an amazing community only sweetens the deal. Finally, the future of Umbraco looks very promising, and I can’t wait for the following releases of the .NET technology stack along with newer versions of Umbraco.

This became an area of interest to me recently when some strange behaviour occured in a program that I had helped write. The program was originally written as a simple static class, but as time went on, more and more features were added, until the class was a monstrosity. We've all been there...

Eventually thread safety became a problem with the program because a second process (or thread) of the static method was called while the first method was still running.

Here is a simplified example of the buggy program:

namespace StaticTest
{
    public class Program
    {
        static void Main(string[] args)
        {
            while (true)
            {
                // Run the method asynchronously.
                new Task(Worker.Work).Start();

                Thread.Sleep(5000);

                new Task(Worker.Work).Start();

                Console.ReadLine();
            }
        }
    }

    /// <summary>
    /// A class that will do "work".
    /// </summary>
    public static class Worker
    {
        /// <summary>
        /// A simple logging variable which has text appended to it.
        /// </summary>
        public static string Log;

        /// <summary>
        /// An indicator that stops the process from being ran twice.
        /// </summary>
        public static bool InProgress;

        /// <summary>
        /// A fake method that will work for 10 seconds before logging.
        /// </summary>
        public static void Work()
        {
            Log = "";

            var startTime = DateTime.Now;

            Log += "Started at: " + startTime.ToString() + Environment.NewLine;

            if (InProgress)
            {
                Log += "Process already started before. Exiting out." + Environment.NewLine;

                return;
            }

            InProgress = true;

            Log += "Doing work for 10 seconds..." + Environment.NewLine;

            Thread.Sleep(10000);

            Log += "Finished work." + Environment.NewLine;

            Log += "Ended at: " + DateTime.Now.ToString() + Environment.NewLine;

            Console.Write(Log);

            InProgress = false;
        }
    }
}

This program had a little bit of consideration put into it to ensure some simple safety:

• the log was set to an empty string when the Work() method was called
• an InProgress boolean is set to true to ensure that the work can't be done twice at the same time

I expected the following to be logged to the terminal:

Started at: 26/10/2016 20:11:27
Finished work.
Ended at: 26/10/2016 20:11:27

But instead, this was logged:

Started at: 26/10/2016 20:11:27
Process already started before. Exiting out.
Finished work.
Ended at: 26/10/2016 20:11:32

This can be a little bit confusing, but as it turns out, the static properties on a static class are not thread safe. What this means is that the property is shared between threads.

Here's a step by step on what happened:

• Main started running
• the Work method was ran (on a new thread, which we will call "Work (1)")
• Main then paused on Thread.Sleep(5000)
• Work (1) continued and set the Log string to empty. It then added "Started at: 26/10/2016 20:11:27"
• Process.InProgress was currently set to false, so Work skipped the if block
• Process.InPogress was set to true
• "Doing work for 10 seconds..." is added to the log
• Work (1) then waited at Thread.Sleep(10000)
• Main finished waiting and started a new thread for the next Work (2) method
• Work (2) sets the Log string to empty. It then added "Started at: 26/10/2016 20:11:32"
• Work (2) saw that the InProgress boolean was set to true, and added "Process already started before. Exiting out." to the Log
• Work (1) finished waiting added "Finished work." and "Ended at: 26/10/2016 20:11:32" to the Log
• Work (1) writes the Log to the console

This program can be fixed by either making the Worker class non-static (along with the properties and methods inside of it), or by making the Log thread static. This can be done with a simple attribute:

[ThreadStatic]
public static string Log;

The moral of the story

Generally in a majority of my classes I won't use static classes. Although static classes are quicker to instantiate (in terms of processing time and developer writing time), they're not exactly perfect for all situations.

The only time I would consider using a static class is if I want to implement a helper method - such as changing a DateTime into a specific format. These kinds of methods can be useful, but can be slightly annoying to call if a class has to be instantiated.

The programs

Audacity - OSX, Windows, Linux

The obvious choice for any simple audio editing. This can also be used to record your voice. Although I rarely need to edit audio, this program is small enough and bloat-free enough that I won't second guess it on a new machine.

AlternativeTo

Website

Chocolatey: choco install audacity

BlueScreenView - Windows

Every time a blue screen happens on a Windows machine, a log is created and an event is recorded. Looking at the event doesn't give much information, and the log file is impossible to read, but BlueScreenView allows you to see a little more into what caused the blue screen.

I came across this software when a nearly brand new laptop of mine started BSODing over and over. Using this software, I quickly discovered that there was something wrong with the Windows filesystem, which led me to fixing it.

AlternativeTo

Website

Choco: choco install bluescreenview

Bulk Rename Utility - Windows

BRU is a god send if you have a bunch of files that need renaming. It's a small light-weight program but doesn't skimp on features.

AlternativeTo

Website

Choco: choco install bulkrenameutility

Calibre - OSX, Windows, Linux

Calibre is a great program for managing your book library. Just drop a book file (such as an EPUB or MOBI) into the program and it will slot the book into its file system. Attach an eReader such as a Kindle and with the click of a button, Calibre will (if necessary) convert the file to a type that the reader will understand, and upload it.

AlternativeTo

Website

Choco: choco install calibre

Chocolatey - Windows

Chocolatey is a CLI package manager a little bit like Aptitude except it works on Windows. Chocolatey cuts out the tediousness of downloading an installer and running through the installation wizard, and does this all automatically. Chocolatey can also be used to auto update all of your programs.

One of the best things about Chocolatey is that you can be fairly sure that none of the packages that are available on it will try to install any extra bloat-ware (such as browser toolbars or anti-virus programs). This is because each package is maintained by someone who chooses the best settings for that program. This best settings options can however sometimes be not what you want, especially when a program chooses to install itself somewhere unusual. However, 90% of the time I find that Chocolatey installs the program just fine.

The other great thing about Chocolatey is that you can export all of the programs you have installed via it to a list, and then get Chocolatey to run through that list on another computer. This can be used to replace Ninite when you are setting up a new computer. I find that this process saves me a lot of time - just input the command and Chocolatey will happily install as many programs as you want while you walk away and think about less tedious things.

The main syntax of Chocolatey is easy to learn. "choco search {program-name}" will return a list of programs that match your name. "choco install {program-name} -y" will install a program without asking if you accept the terms and condtions.

AlternativeTo

Website

Clover - Windows

Having tabs on a file browser makes as much sense to me as having tabs on your browser. Unfortunately, Windows has yet to implement this feature into even their latest OS. There are alternative file browsers (such as Q-Dir) that you can use instead of the default Explorer, but I find that they don't integrate with Windows as nicely as the default does. Fortunately, there is a program called Clover which adds Chrome-like tabs to your ordinary Explorer. The integration is seamless and works near perfectly.

AlternativeTo

Website

Choco: choco install clover

ConEmu - Windows

For those who like Windows, like the terminal but hate the Cmd prompt, there is ConEmu. This program allows for an overwhelming amount of customisation on the terminal including tabs and theming.

AlternativeTo

Website

Choco: choco install conemu

Foobar2000 - Windows

Foobar is a fairly simplistic but highly customizable music player. There is advanced theming for people who can work out how to use that, but for me, I like to use the layout editing mode to get everything where I want.

One simple feature that I like is that the music in your library can be viewed by folder structure, and since I have a organised folder structure this is something which really appeals to me.

AlternativeTo

Website

Choco: choco install foobar2000

Honeyview - Windows

Honeyview is a fairly configurable image viewer. It is very fast and can view just about any image format, including GIF.

AlternativeTo

Website

Choco: choco install honeyview

KeePass2 - OSX, Windows, Linux, Android

KeePass is a program which stores passwords in a locked database. Enter the right master password (or attach the correct keyfile), and the database will open up. This program doesn't store the password file online so unless someone gets your local machine, you can be fairly sure that the passwords are completely safe. KeePass also allows you to generate random password of varying sizes and complexity which I always use now to ensure that my passwords can not be bruteforced.

If you need the passwords file to be accessible, consider uploading the file into the cloud (by using something like Dropbox).

One key feature for me is that password databases can be merged which is very useful for if I make changes to two versions of the same file. Using this feature I can quickly merge the two versions back into one without needing to worry about missing new passwords.

AlternativeTo

Website

Choco: choco install keepass

Launchy - OSX, Windows, Linux

It seems like every time a new a new version of any operating system comes out, they add bloat to the search tool of the OS. With Windows we now have the search looking for files on the computer, doing Bing searches and also looking for programs. 99% of the time all I want to do is get a program open that I don't have in my quick launch bar. Launchy solves this issue by only searching for programs within the OS. It is very fast and can be configured to be opened by a keypress or two. I have left it so it is opened when I press alt-space together. A box then pops up which I can type the name of the program in.

Launchy seems to learn what to search for based on what you have opened before with it. For example, if I type "c" into Launchy, it knows that I want to open up Clover because before I skipped the option that was Control Panel, and went straight for Clover. However, the inbuilt search for Windows never learns that I am more likely to use Clover than the Control Panel.

One of the best things about Launchy is that it's cross platform, which means that regardless of the operating system, I can access my programs fast without needing to learn that systems search.

Something to note is that Launchy can take a couple of minutes to put a program into its index. This means that if I install something, I can either tell Launchy to reindex, or open the program another way. When I next come to using Launchy, the program should then be in the index.

AlternativeTo

Website

Choco: choco install launchy

Open Broadcaster Software - OSX, Windows, Linux

OBS can be a little hard to understand if you're new to it, but the main feature which I use it for is screen recording, which it really excels at. It's totally free (including open-source) and has many features including the option to live-stream to other people.

AlternativeTo

Website

Choco: choco install obs

Thunderbird - OSX, Windows, Linux

For mail clients, I have to say, Thunderbird is the best of a bad bunch. Email is always slightly dodgy because the technology basically died years ago, and for this reason, Thunderbird does not need to innovate. Instead, Mozilla chooses to push other features onto the mail client that has nothing to do with email (such as a calendar).

However, if you want your email to be quickly accessible (and accessible offline), all in one interface, then Thunderbird will do the trick.

AlternativeTo

Website

Choco: choco install thunderbird

MPC-HC - Windows

MPC-HC is barely different from VLC, but a lot of nerds will swear by it. These nerds will claim that MPC can render better than VLC and with less glitches.. Or whatever.

For me, I quite like MPC simply because by default, the video player will only show the controls (when in full screen) when the cursor is actually brought over them, rather than whenever the mouse moves. Otherwise, the two programs appear to be basically identical to me.

AlternativeTo

Website

Choco: choco install mpc-hc

Mumble - OSX, Windows, Linux, OSX, Android

There are many voice clients that can be used such as Ventrillo or Team Speak, but Mumble works reasonable well for me. It ensures that users set up the sound profile properly before entering any chat rooms which helps keep the chat clean.

The software is opensource, and you can install Murmur (the Mumble server) on any machine you like. Configuration for Murmur is relatively straight forward, but will most likely require port-forwarding if you are running it from a home network.

There is also an Android client which allows you to connect to Murmur, called Plumble. There is a free version of the client which I have only briefly used, but seems to work very well.

AlternativeTo

Website

Choco: choco install mumble

qBittorrent - OSX, Windows, Linux

While uTorrent is still a very popular client for torrenting, many of the users has started moving away from it because it is shoveling advertisements into its UI. Otehr people instead choose to stay on an older version of uTorrent before it changed its way. However, for me, qBittorrent is a fine replacement. The UI is very familiar and easy to use, and the project is opensource so it's unlikely to go the way of uTorrent. Previously, people had common problems with torrents stalling for ages, but this problem seems to have been fixed.

AlternativeTo

Website

Choco: choco install qbittorrent

Recuva - Windows

A while ago I accidentally formatted one of my USB drives which meant I lost a couple of useful files. I quickly found myself looking for a program to recover the lost files, and although a lot of programs can do this, a lot will then charge you to actually recover the files. Recuva is an excellent recovery tall made by Piriform that does file recovery without any hassle.

AlternativeTo

Website

Choco: choco install recuva

RDCMan - Windows

RDCMan or Remote Desktop Connection Manager is a program much like the Windows inbuilt Remote Desktop Connection except it allows you to save servers into groups for easy management of multiple servers at the same time.

AlternativeTo

Website

Choco: choco install rdcman

TrueCrypt - OSX, Windows, Linux

Although TrueCrypt has been abandoned by the owners of the project in 2014, it is still a tried and tested solution to drive encryption. The project was large enough that an entirely separate project was instigated to simply test the programs implementation and ensure that the encryption was entirely secure.

AlternativeTo

Website

Choco: choco install truecrypt

WinDirStat - Windows

WinDirStat is a simple program that runs through a drive on your computer and finds out the sizes of each of the files within. It then displays a simple UI where each folder and file is visually shown to help you see where space is being used. This can be helpful if you need to free up some space and you want to know where the big culprits are.

One of my colleagues found that about 40GB of their drive had mysteriously gone missing, and they couldn't find it in any of the usual folders. After running WinDirStat for a few minutes, we discovered that a huge portion of the computers drive had been taken up by a log file that had grown excessively large. This log file was being stored in an unusual place in the file system which without WinDirStats visual representation of the file system would have been very hard to find.

AlternativeTo

Website

Choco: choco install windirstat

Thoughts and other things

There are probably many good alternatives to the list that I have put up above, but these are the ones that I currently use. One property of a program that I always look out for is if the program is cross-platform and if it is open-source. Generally, only if the program truly excels despite not having these two properties will I then use it. The reason being that if I ever choose to swap operating system then it's important to me that I can use as many of the old programs as possible. As for the open-source issue, it's comforting knowing that even if the main developers dropped support, other developers could continue to keep new releases coming out. Having the source to a program can also help ensure that there is nothing malicious hidden.

Along with all of the programs, I have included a link to AlternativeTo which is a great site that I always check before installing a new program. The program finds alternatives to just about any application or website and can help you find the best tool for your needs. AlternativeTo also allows people to comment, which can help steer you clear of any dodgy programs that may try to install malware.

If you have any other programs you think should belong in this list, comment below and tell us why you think it's great.

So?

A common example of code that resides in Umbraco views is:

var content = node.GetPropertyValue("content");

This is all great until someone removes the content property in Umbraco and suddenly the view breaks because there isn't a content property type on the node. The Models Builder helps point out any errors (generally in the Intellisense or on build) that have occured due to any changes in Umbraco.

Using this with the content service to create nodes

Occasionally it is necessary to create nodes in Umbraco programmatically. You can do this using the ContentService. Here is a document type that I have created in Umbraco:

We can see that there are three properties on my post document type; postTitle, content and postDate. Without the Models Builder, we would've created new Umbraco nodes this way:

var contentService = ApplicationContext.Current.Services.ContentService;
var parentId = 1053;

// Create the new node.
var post = contentService.CreateContent("My Post", parentId, "post");

// Add content to the node.
post.SetValue("postTitle", "Alternate Title");
post.SetValue("postDate", DateTime.Now);
post.SetValue("content", "<p>...</p>");

// Save and publish the node.
contentService.PublishWithStatus(post);

The above works, but it has the age old problem where if the document type changes in Umbraco, there's no way of knowing what code has become out of date and needs updating. The below code remedies this by using the new Models Builder.

var contentService = ApplicationContext.Current.Services.ContentService;
var parentId = 1;

// Create the new node.
var post = contentService.CreateContent("My Post", parentId, ContentModels.Post.ModelTypeAlias);

// Add content to the node.
post.SetValue(ContentModels.Post.GetModelPropertyType(x => x.PostTitle).PropertyTypeAlias, "Alternate Title");
post.SetValue(ContentModels.Post.GetModelPropertyType(x => x.PostDate).PropertyTypeAlias, DateTime.Now);
post.SetValue(ContentModels.Post.GetModelPropertyType(x => x.Content).PropertyTypeAlias, "<p>...</p>");

// Save and publish the node.
contentService.PublishWithStatus(post);

This updated code might be longer, but it should help with site maintenance in the long run.

The thing is, developers get lazy when they start making emails. The technology is stuck in the past and it's not a fun front end experience to try and create complicated layouts using tables. All of this together makes creating emails a hack and slash job. Here's the simple way a lot of emails are made:

public bool Send()
{
    var mailServer = new SmtpClient();
    var mail = new MailMessage();

    mail.From = new MailAddress("foo.bar@net", "Foo Bar");
    mail.To.Add("bar@foo.net");
    mail.Subject = "Thank you for signing up!";
    mail.IsBodyHtml = true;

    // Don't do this!!
    mail.Body = String.Format("<h2>Dear {0},</h2><p>Thank you for signing up. We value you as a customer etc etc...</p<<p>From the team at {1}.</p>",
        "Bar Foo",
        "foo.bar.net");

    try
    {
        mailServer.Send(mail);
    }
    catch (SmtpException e)
    {
        LogHelper.Error(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType, "Error sending welcome email.", e);
        return false;
    }

    return true;
}

The above doesn't look crazy bad, but just wait until the email starts getting complicated. If you want to have real formatting, then it's going to quickly get out of hand.

Rendering MVC emails with Razor and CSHTML templates

Enough of string formatting! We have a better method now. We're used to using Razor and some sort of MVC to build our ordinary website views. Surely there is some way we can incorporate that into our email design? Well there is!

The West Wind Toolkit Way

Fortunately there is a tool out there which allows us to easily render a CSHTML view with a model of our choosing. This tool is called the West Wind Toolkit. It's opensource and under the MIT license, meaning we can use it in our projects.

The particular part of the toolkit we plan on using is the view renderer. Since I didn't want to bloat my project with anything more than necessary, I ripped apart this piece of C# that West Wind has provided us with, and only kept the core methods in the end result:

using System;
using System.Web;
using System.Web.Mvc;
using System.IO;
using System.Web.Routing;

namespace YourNamespace
{
    /// 
    /// Class that renders MVC views to a string using the
    /// standard MVC View Engine to render the view.
    /// 
    /// Requires that ASP.NET HttpContext is present to
    /// work, but works outside of the context of MVC
    /// 
    /// Particularly useful for rendering CSHTML for emails.
    /// 
    /// Code extracted from:
    /// https://github.com/RickStrahl/WestwindToolkit/blob/master/Westwind.Web.Mvc/Utils/ViewRenderer.cs
    /// 
    public class ViewRenderer
    {
        /// 
        /// Required Controller Context
        /// 
        protected ControllerContext Context { get; set; }

        /// 
        /// Initializes the ViewRenderer with a Context.
        /// 
        /// 
        /// If you are running within the context of an ASP.NET MVC request pass in
        /// the controller's context. 
        /// Only leave out the context if no context is otherwise available.
        /// 
        public ViewRenderer(ControllerContext controllerContext = null)
        {
            // Create a known controller from HttpContext if no context is passed
            if (controllerContext == null)
            {
                if (HttpContext.Current != null)
                {
                    controllerContext = CreateController().ControllerContext;
                }
                else
                {
                    throw new InvalidOperationException(
                        "ViewRenderer must run in the context of an ASP.NET " +
                        "Application and requires HttpContext.Current to be present.");
                }
            }

            Context = controllerContext;
        }

        /// 
        /// Renders a partial MVC view to string. Use this method to render
        /// a partial view that doesn't merge with _Layout and doesn't fire
        /// _ViewStart.
        /// 
        /// 
        /// The path to the view to render. Either in same controller, shared by 
        /// name or as fully qualified ~/ path including extension
        /// 
        /// The model to pass to the viewRenderer
        /// Active controller context
        /// String of the rendered view or null on error
        public static string RenderView(string viewPath, object model = null, ControllerContext controllerContext = null)
        {
            var renderer = new ViewRenderer(controllerContext);
            return renderer.RenderViewToString(viewPath, model);
        }

        /// 
        /// Renders a partial MVC view to string. Use this method to render
        /// a partial view that doesn't merge with _Layout and doesn't fire
        /// _ViewStart.
        /// 
        /// 
        /// The path to the view to render. Either in same controller, shared by 
        /// name or as fully qualified ~/ path including extension
        /// 
        /// The model to pass to the viewRenderer
        /// String of the rendered view or null on error
        public string RenderViewToString(string viewPath, object model = null)
        {
            return RenderViewToStringInternal(viewPath, model, true);
        }

        /// 
        /// Internal method that handles rendering of either partial or 
        /// or full views.
        /// 
        /// 
        /// The path to the view to render. Either in same controller, shared by 
        /// name or as fully qualified ~/ path including extension
        /// 
        /// Model to render the view with
        /// Determines whether to render a full or partial view
        /// String of the rendered view
        private string RenderViewToStringInternal(string viewPath, object model, bool partial = false)
        {
            // first find the ViewEngine for this view
            ViewEngineResult viewEngineResult = null;
            if (partial)
                viewEngineResult = ViewEngines.Engines.FindPartialView(Context, viewPath);
            else
                viewEngineResult = ViewEngines.Engines.FindView(Context, viewPath, null);

            //if (viewEngineResult == null || viewEngineResult.View == null)
            //throw new FileNotFoundException(Resources.ViewCouldNotBeFound);

            // get the view and attach the model to view data
            var view = viewEngineResult.View;
            Context.Controller.ViewData.Model = model;

            string result = null;

            using (var sw = new StringWriter())
            {
                var ctx = new ViewContext(Context, view,
                    Context.Controller.ViewData,
                    Context.Controller.TempData,
                    sw);

                view.Render(ctx, sw);
                result = sw.ToString();
            }

            return result;
        }

        /// 
        /// Creates an instance of an MVC controller from scratch 
        /// when no existing ControllerContext is present       
        /// 
        /// Type of the controller to create
        /// Controller Context for T
        /// thrown if HttpContext not available
        public static T CreateController(RouteData routeData = null) where T : Controller, new()
        {
            // create a disconnected controller instance
            T controller = new T();

            // get context wrapper from HttpContext if available
            HttpContextBase wrapper = null;
            if (HttpContext.Current != null)
            {
                wrapper = new HttpContextWrapper(System.Web.HttpContext.Current);
            }
            else
            {
                throw new InvalidOperationException(
                    "Can't create Controller Context if no active HttpContext instance is available.");
            }

            if (routeData == null)
                routeData = new RouteData();

            // add the controller routing if not existing
            if (!routeData.Values.ContainsKey("controller") && !routeData.Values.ContainsKey("Controller"))
            {
                routeData.Values.Add("controller", controller.GetType().Name
                    .ToLower()
                    .Replace("controller", ""));
            }

            controller.ControllerContext = new ControllerContext(wrapper, routeData, controller);
            return controller;
        }
    }

    /// 
    /// Empty MVC Controller instance used to 
    /// instantiate and provide a new ControllerContext
    /// for the ViewRenderer
    /// 
    public class EmptyController : Controller { }
}

You can also view the latest version that I will be using in my projects here.

Include this view renderer in your project, and you can use it to render Razor CSHTML views with a model.

Building the Model

Before we start using the view renderer in our project, we will need to set up a model to use with our view. Below is a very simple one that covers the two properties that our model will need:

public class NewSignUpModel
{
    public string Recipient { get; set; }
    public string Team { get; set; }
}

Building the view

Our view will need to reference the model we just made using @model at the top of the template:

@model NewSignUpModel
<h2>Dear @(Model.Recipient),</h2>
<p>Thank you for signing up. We value you as a customer etc etc...</p>
<p>From the team at @(Model.Team).</p>

The @model reference allows use to then write @(Model.Recipient) where we want the parameter to be shown. But I'm sure you're used to doing this kind of thing by now.

Updating the mail sending method

Finally, we need to update our original mail send method to use the view renderer. Pass in the path to your view as the first parameter to the ViewRenderer.RenderView method, and the model you intend the view to use as the second:

public bool Send()
{
    var mailServer = new SmtpClient();
    var mail = new MailMessage();

    mail.From = new MailAddress("foo.bar@net", "Foo Bar");
    mail.To.Add("bar@foo.net");
    mail.Subject = "Thank you for signing up!";
    mail.IsBodyHtml = true;

    mail.Body = ViewRenderer.RenderView("~/Views/Mail/NewSignUp.cshtml", new NewSignUpModel
    {
        Recipient = "Bar Foo",
        Team = "foo.bar.net"
    });

    try
    {
        mailServer.Send(mail);
    }
    catch (SmtpException e)
    {
        LogHelper.Error(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType, "Error sending welcome email.", e);
        return false;
    }

    return true;
}

Using the above method will get an email sent off but with the view that we created as the body of the email.

How to cache standard MVC controllers using the OutputCache attribute

Caching an MVC controller is very easy. All you need to do is shove [OutputCache] before your method (or even class) and it will be cached on the server:

public class PageController : Umbraco.Web.Mvc.RenderMvcController
{
    // Warning!! Won't work in a UmbracoApiController!!
    [System.Web.Mvc.OutputCache(Duration = 60)]
    public override ActionResult Index(RenderModel model)
    {
        var pageModel = new PageModel(model.Content);

        // some code

        return CurrentTemplate(pageModel);
    }
}

The Duration parameter sets how long to cache in seconds.

One way to test to see if this has worked is to set a breakpoint in the code and refresh the page that the controller controls. The first time it will hit the breakpoint, the second (provided that you refresh before the time runs out) it won't! That's because the output has been cached.

However, if you try the same attribute on a controller that inherits from a UmbracoApiController, you will find that it has no effect. Shame!!

This is because the UmbracoApiController inherits from the UmbracoApiControllerBase which in turn inherits from the basic ApiController. So? Well, as it turns out, the ApiController does not take notice of our fancy OutputCache. You can read all about it here.

This is different from the RenderMvcController because it inherits from the UmbracoController which in turn inherits from the basic MVC Controller. This one does take notice of our OutputCache.

The fix: CacheOutput

Fortunately for us, someone clever has made an alternative - the CacheOutput attribute. This sounds similar, so try not to it with the built in cache attribute.

On your project, install the package "WebApi2" using the NuGet console in VS:

PM> Install-Package Strathweb.CacheOutput.WebApi2

After the package has successfully installed, you can use the CacheOutput attribute instead of the built in MVC one:

public class MySurfaceController : UmbracoApiController
{
    [WebApi.OutputCache.V2.CacheOutput(ClientTimeSpan = 60, ServerTimeSpan = 60)]
    public MyObject Umbraco.Web.WebApi.GetInformation(string someParam)
    {
        var myObject = new MyObject();

        // some code..?

        return myObject;
    }
}

Now visiting /umbraco/api/mycontroller/getinformation?someparam=somevalue and running the same breakpoint test as before will show that the CacheOutput attribute has worked.

This time, ClientTimeSpan gets the clients browser to cache the first result - next time a request won't even make it to the target server because the browser will reach into its' own cache and retrieve the data it received before. This should be done with a "200 (cached)" or a "304 Not Modifed" HTTP status if you view the call in your network tools of your browser. Meanwhile, ServerTimeSpan works in the same way as before.

Wrapping up

As always, be careful with caching. Caching on the server in this basic way will cause the same results to be shown to everyone, so make sure that no user sensitive data is being cached. Caching on the client can be great but can lead to out of date content if the cache period is too long.

Resources

• Our Umbraco

The solution? Node.js!

I decided that I had to add some backend logic to piece together my pages. First I questioned if PHP was the answer, but I've always found that PHP would also get out of hand with bits of code getting lost in places. I asked my coworker from GrowCreate for their oponion, and they said that I should try building in Node.

The problem

Developing Node applications on Windows is very simple. All you have to do is just open up a cmd window (after installing Node) and type "node server.js", where server.js is your server configuration file. However, doing this on a live Windows server was impractical. Having a cmd window open to host the website all the time would be a bad idea. Intead, I wanted my site to be hosted through IIS, as it meant that all of my sites would be clearly visible from one applicaion on my server. Currently, only way to do this is by installing IISNode.

Getting IISNode running is easy once you've done it before, but understanding the steps required to get there can be a little difficult.

Getting started

I suggest doing this on your development machine before doing this on a server. Below is a list of things you will need already set up before you can get IISNode set up.

• IIS7/8 installed
• Node installed

Installing IISNode

I accidentally went down the path of trying to build IISNode from source which can be pain if you've never done that sort of thing before. As it turns out, you can download a compiled install file from here. Choose the correct build for your system (either 64bit or 32bit). I will be using v0.2.11 as it is the latest version at the time of writing.

After downloading this file, install it!

Testing IISNode

If you want to test that IISNode installed correctly, you can use the setupsamples.bat script to create an instance of IISNode. To run this file, you will need to open up an administrator window of cmd and cd to either "C:\Program Files\iisnode" (or "C:\Program Files (x86)\iisnode" if you installed the 32bit version). Type "setupsamples.bat" into the cmd prompt and the script should run. Read the output to check if the script ran successfully. The output should be similar to the one below.

Now provided that you have the "Default Web Site" running, you should be able to go to localhost/node" in your browser. If your browser just tells you that it is unable to connect to this, then it's likely that the "Default Web Site" is not running. If it gives you an "HTTP Error 404.0 - Not Found", then the script did not run correctly. Otherwise you should be on a page similar to the one below.

Clicking on the first link "helloworld" will show you a running example of a Node site running in IISNode. You can actually see the source code for this in "C:\Program Files\iisnode\www".

URL Rewriting

In "localhost:8080/node" try navigating to the "urlrewrite" part of the site by following the link. If you get an error on the page, then Url Rewriting has not been installed. This is going to be necessary if you want to run an Express site. You can download URL Rewrite from Microsoft here. Click on the "Install this extension" button and download the file. After downloading the file, run it. It should bring up a Web Platform Installer which will guide you through the simple installation procedure.

Once URL Rewriting is installed, go back to the page on your localhost and refresh to test if it's working.

Express

If you want to get Express working with IISNode, you will only need to create two files; a JS file which will control your server, and a web.config for IIS.

server.js

Your server.js has to be tweaked just a little bit to make it work with IISNode. Notice the past line where the app has to listen using "process.env.PORT". This port is decided by IIS.

var express = require('express');

var app = express();

app.get('/', function (req, res) {
    res.send('Express is working on IISNode!');
});

app.listen(process.env.PORT);

I found that many other tutorials said that "var app = express.createServer();" was the correct line to use, but I found that this just created an error. This may be due to the other tutorials using an older version of Express.

web.config

The web.config file is the configuration for this website. A handler is required to specify that the application is handled by IISNode. The rewrite allows the server.js deal with incoming connections rather than IIS.

<configuration>
    <system.webServer>

        <!-- indicates that the server.js file is a node.js application
        to be handled by the iisnode module -->

        <handlers>
            <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
        </handlers>

        <rewrite>
            <rules>
                <rule name="sendToNode">
                    <match url="/*" />
                    <action type="Rewrite" url="server.js" />
                </rule>
            </rules>
        </rewrite>

    </system.webServer>
</configuration>

Install the Express module

You will also need to install the express module before this Node server will work. Open a cmd prompt and cd to your folder (which has the server.js and web.config files) and type "npm install express".

Adding your site to IIS.

The last step is adding your site to IIS Manager. Open up the program and on your Sites, right click and select "Add Website...". Fill out the details and link it to your folder with the server.js and web.config files inside of it.

After adding your host name to your systems hosts file, navigate to the url in a web browser and see the result.

Resources

• IISNode GitHub