First make it work, then make it beautiful

That brings me to the next step in the development of the random-awesome-memory website, making things beautiful. I had a basic version, running from the default ASP.NET Core Razor Pages template integrated into Visual Studio. Everything was starting to get form and was up and running in Azure.

Now, I can understand that the definition of beauty is pretty subjective, so let's pretend I made it beautiful in my own way. I'm not a Web designer, although I've developed a lot of frontend applications and websites and not one ever compained.

Building a website layout can be a real challenge. Not only does everything have to look good, it also has to be technically correct and work on all the different types of devices. The responsiveness of the website alone can be a huge hassle. It takes a lot of time, which we don't always have.

So I decided to use a web template. Using a template is not a bad thing. Depending on the template you use, you can save a lot of time and therefore also money. You can also learn a lot from other developers on how they do things.

I've been a fan of the Canvas template for years now. It's created by the company SemiColon. I found the template many many years ago on the website Envato ThemeForest and have already bought several licenses to develop websites for customers. And for random-awesome-memory website I'm not doing it differently. The regular license only costs 16$, which is all I need, and you get a 6 month support license accompanied with it.

The template has an extensive documentation website which is extremely helpful when implementing it. I can recommend this template when people want a website design really quickly without having any issues.

The required files are copied into the project as described in the getting started docs. The appropriate stylings of my choosing have been applied. I've filtered out the files I don't actively use and removed them. And that's about it for implementing the template. The last thing I need to do, is fine tune the performance of the website a little.

There are a lot of online tools that allow you to test the performance of your website. I just Googled around a bit and found several results. GTMetrix looks like a decent one but in the past I had already used Google PageSpeed, so I checked this out thoroughly. In the end all these tools work in the same way anyway. You just fill in the url of your website, click Analyse or whatever and let the thing do it's magic. Then after a while you get a report of different topics on how to make your website better.

The report is pretty detailed. And the topics are extensive. I don't want to make my site perfect so I am going to take on the most frequent and easy to fix issues. These are the issues that always stand out the most:

Minify resources

When you're working with resource files in your website, which is actually always, they should always be as small as possible. I'm talking about CSS and javascript files. Before the user actually sees anything on your website, alle these files need to be downloaded and loaded by the browser. And of course, the bigger they are, the longer it takes. There are several techniques you can apply to make this process go faster. Minifying the resource files is one of these techniques. The minification process makes the files smaller by removing all the clutter and optimizing space.

You can minify your resource files in different ways. There are javascript compression tools at hand that allow you to create minified versions of your files when compiling. But I chose a different path. For ASP.NET Core there's a framework called WebOptimizer that allows you to minify your resources files at runtime through a middleware component. The installation and setup is easy so you don't have to worry about complicated build and configuration processes.

Enable text compression

Text compression is a technique to reduce the size of all your resources being sent over the wire. Apparently there's a .NET Core package that allows you to configure response compression, and it's conveniently called Microsoft.AspNetCore.ResponseCompression. This one also works through a middleware component that is easily installed and configured.

If you make use of a web template, you can significantly reduce the amount of time and money spent on building a design for a website or application. The only thing you need to do is spend some time researching which template suits your needs. And great documentation can also mean a big deal.

But things don't end there of course. As always, the last thing to do is do some tweaking in performance. Many techniques are present, and by spending some time Googling around, you can quickly find out which are the most important to optimize your website. I was able to significantly reduce the load time of my random-awesome-memory website by applying just a few of these methods. You can always go a step further if you want, but that wasn't my goal here. I'm happy with the result. Now I can concentrate more on writing other articles.

• Themeforest - Canvas template
• Canvas template creator - SemiColon
• Canvas template documentation - Documentation website
• website analyser - GTMetrix
• website analyser - Google PageSpeed
• Chrome Developer Documentation - Minify CSS
• Chrome Developer Documentation - Minify Javascript
• ASP.NET Resource compression tool - WebOptimizer
• ASP.NET Core Documentation - Response compression in ASP.NET Core
• Chrome Developer Documentation - Enable text compression