Using Asp.net Taghelpers for building consistent UI components

Generally when creating asp.net razor templates, or HTML in general. We seperate structure from layout by only using HTML for the structure, and CSS for the way it looks.

When using UI frameworks like Bootstrap we heavily validate this rule by defining the way it looks inside out HTML-documents. For example:

<a class="btn btn-success"><i class="fa fa-check" aria-hidden="true"></i> Create</a>

the class "btn-success" will make it look green, and the "fa-check" class will give it a checkmark icon. 

But what if we decide that we want to get rid of Bootstrap, or have all "Create"-buttons a "plus"-icon instead a "check" icon. Can you imagine all the manual labour this would require?

Asp.net core MVC6 introduced the feature of Tag Helpers (https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro)

This allows you to create re-usable components inside your razor-templates, for example like this:

<a button="add" asp-action="Save">Create</a>

This solves all our problems we had before, it allows to stick to the structure in the HTML document. We just specify the type of the button, how it will turn out is specified inside our taghelper.

Creating a taghelper is just as easy as creating a class that inherits from the TagHelper-class. 

This is a small example for our button:

 [HtmlTargetElement("button")]      [HtmlTargetElement(Attributes = "button")]      public class ButtonTagHelper : TagHelper      {            [HtmlAttributeName("button")]          public string ButtonType { get; set; }            public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)          {                var content = await output.GetChildContentAsync();              string target = string.Empty;                switch (ButtonType)              {                  case "back":                      output.Attributes.Add("class", "btn btn-danger");                      target = "<i class=\"fa fa-repeat\" aria-hidden=\"true\"></i> " + content.GetContent();                      break;                    case "add":                      output.Attributes.Add("class", "btn btn-success");                      target = "<i class=\"fa fa-check\" aria-hidden=\"true\"></i> " + content.GetContent();                      break;                    default:                      target = content.GetContent();                      break;              }                output.Content.SetHtmlContent(target);            }      }

Getting this taghelper to work inside our templates is just as easy as telling razor where to look by adding your location to Views/_ViewImports.cshtml

@addTagHelper *, NameSpaceWithTaghelpers

3 easy steps to secure your Raspberry Pi

Having a Raspberry Pi in your network is a nice powerful low-energy host on which all kinds of applications like small databases or home-automation systems can run. Like all devices, we need to properly secure this device. Here are three basic steps which will make your Raspberry Pi better protected:

1. Change default password 

Hopefully you already have changed the password of the default "pi"-user. If not, drop everything and do this now. Having an unsecured fully equiped linux-machine makes further compromising your network a lot easyer. So even if there is no sensitive data on your raspberry pi. You need to protect it. 

You can change the password of the pi-user when logged on, by using the following command:

passwd

2. Enable firewall 

UFW (Uncomplicated Firewall) is an easy to use firewall, which if extremly easy to setup. We can close all ports, and only open the ports we really need. 

Installing UFW can be easyly done by running:

sudo apt-get install ufw

When installed we can start opening ports, for example if we want to have ssh open, we can run:

sudo ufw allow from 192.168.1.0/24 to any port 22

This will only allow ssh from the subnet 192.168.1.0-192.168.1.255, if you also want to have ssh open remotly you can remove the "from 192.168.1.0/24 to any port" part.

When you are done opening all the ports you need to open, you still need to enable UFW. Enabling UFW is done by running:

sudo ufw enable

3. Remove password login

Speaking of SSH. You should not login to ssh using a password. You should be using a key-pair to securely login.

If you already have a key-pair you can add it to the pi-user by appending your public key to the file /home/pi/.ssh/authorized_keys

Now you can configure ssh to not allow passwords. Open the config file /etc/ssh/sshd_config, find the following section:

#PasswordAuthentication yes

And change it to:

PasswordAuthentication no

Getting started with Razor Pages

Razor pages is a new asp.net feature, available in .net core 2.0 that allows us to create pages without some of the overhead that MVC requires. Razor pages are intended to replace MVC controllers that look like this: 

Public IActionResult About() {
return View();
}

By loading MVC we get the Razor pages feature for free. All we need to do to create a new page is put some .cshtml (for example about.cshtml) inside a new folder called Pages, and put @page on top of this file.

For example: (Pages/About.cshtml): 

@page
This is a RazorPage!

If we want to navigate to this page, we simply can by going to /About

We can use the same layout we already are using for our MVC-controller by setting the layout like this: 

@{ Layout = "_Layout"; }

This lifehack saves me at least half an hour each day

What is the first thing you do when you wake up? If i would have to guess, I would guess using your smartphone is on top of the list. Am I right?

Well it also used to be the first thing I did in the past when I woke up. Reading emails, checking the news, wasting some more time on social media or playing silly games. Yes I did all these things. But what did I get out of it?

To be honest, not much. So a few months ago I decided to stop wasting time each morning, and to ban all digital devices from the bedroom. Now my phone is charging each night far away in another room, and I bought this nice alarm clock to wake me:

Now each day I save at least half an hour in the morning by simple not using my smartphone. This time can offcourse be spent doing things you like, like reading, writing or even, why not, programming.