Subscribe: CodeClimber
http://feeds.feedburner.com/codeclimber
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: CodeClimber

CodeClimber



Climbing the Cliffs of C#



 



How to publish your own Nuget Package - Day 12 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Tue, 12 Dec 2017 15:50:25 Z

With package managers you consume libraries but eventually you will end up releasing yours for others to use, either to the community or as shared among co-workers. Today we look into how to do it with Nuget and .NET Core.

Doing a Nuget package was a bit convoluted with the traditional .NET Framework, but with .NET Core it's very easy.

Add metadata

After having developed the application, just add to your .csproj file the metadata needed (no need for a specific .nuspec).


  
    netcoreapp2.0
    Wrox.Book
    1.0.0
    Simone Chiaretta
    Show the title of the book
    First release
    Copyright 2017 (c) Simone Chiaretta
    book title Wrox
    http://example.com/Wrox.Book/
    http://example.com/Wrox.Book/32x32icon.png
    http://example.com/Wrox.Book/mylicense.html
  

Create the package

Now just go to the root of the project (where the .csproj is) and type dotnet pack -c Release. This will build the project and create a nuget package file, saved in bin\Release.

If you now open the file with the Nuget Package Explorer you'll see the content of the file

(image)

Publish the package

Now you can just either copy the file to a local repository or publish it to the Nuget public repository. To do so:

  • Download the NuGet command line utility (the dotnet cli is not enough here). You can install it via Nuget as well: Install-Package NuGet.CommandLine
  • Create an account on the NuGet.org gallery (if you don't have one)
  • Set your API-KEY: nuget setApiKey Your-API-Key
  • Publish the package: nuget push YourPackage.nupkg

This topic is covered more in details, together with how to develop packages for NPM and bower, on my upcoming book "Front-end Development with ASP.NET Core, Angular, and Bootstrap". If want to read more extracts of the book, come and visit my blog again tomorrow.

(image)



What are package managers and why we need them - Day 11 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Mon, 11 Dec 2017 11:51:16 Z

Over the weekend I wrote about the Bootstrap grid system and the Bootstrap Snippet Pack for Visual Studio, both extracts from Chapter 4 of my upcoming book "Front-end Development with ASP.NET Core, Angular, and Bootstrap". Today I'm going to cross halfway point in my book, taking a extract from chapter 5, which is about package managers and Nuget, NPM, Bower. And I'm going to introduce package managers and why we need them. Why we need package managers Modern software development, both front-end and server-side, is based on small and very focused components that can be composed as needed. While it is good to avoid the monolithic frameworks of the past, this new approach introduces a problem: how do you manage all these components? Components usually depend on other components, which depend on yet other components, which depend... well, you got the idea. To make things more difficult, there might be a component, let's call it A, that depends on component B, but also another component, C, that also depends on B, but a different version of it. And on top of this, all components must be kept up-to-date. Finally, in some cases, to correctly install a component, additional operations might be needed, like compiling some native library or changing some configuration files. Fortunately, all these tasks are automated by specific tools that are called package managers. What package managers do All package managers, apart from the obvious differences given by the different technologies or languages they target, are practically identical. Here are their common concepts: They all rely on a public registry that contains all published packages. The registry might also store the actual package or just provide the URL where the package can be downloaded. Packages are downloaded and stored in a local folder (usually within the current user folder) that acts as a local cache. This way when a project needs a package that has been already downloaded, it's directly copied from the cache instead of being downloaded again (providing that it is the latest version). This saves bandwidth and time (especially if packages are restored every time a project is built). It also allows some kind of offline development experience that would be otherwise impossible. Projects declare which third-party libraries they depend on. This is usually done by specifying in a JSON file the names of the packages and their versions. Package managers take care of downloading not only the projects’ dependencies but also the libraries they depend on, descending the entire tree of packages. There are still lots of interesting topics coming up from my book. If you are interested in knowing more, come back tomorrow and also remember to follow me on Twitter @simonech and like the Facebook page for my book. [...]



Bootstrap Snippet Pack for Visual Studio - Day 10 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Sun, 10 Dec 2017 15:04:34 Z

Today let's have a look at how to type less when adding Bootstrap components using the Bootstrap Snippet Pack.

This is an extract from Chapter 4 of my upcoming book "Front-end Development with ASP.NET Core, Angular, and Bootstrap".

Most Bootstrap components are made of long pieces of HTML, most of which have to be copied as it is, and only few strings need to be updated. There are two options to avoid repeating yourself all the times:

  • one is creating TagHelpers, which is covered in my book.
  • one is using the Bootstrap Snippet Pack, which is also covered in this post.

The Bootstrap Snippet Pack is a collection of 30+ snippets that can be added to an HTML page by simply dragging them from the Visual Studio toolbox.

Now development becomes very easy as the strings that can be modified are clearly marked and you can cycle through them with the Tab key.

For example, in the snippet for the modal dialog, the only strings needing customization are the ID, the title, the content, and the text of the two buttons. As you can see in following picture, these strings are highlighted for easy identification.

(image)

If you want to see more of what is coming, come back tomorrow for more tips.

(image)



Bootstrap Responsive Grid System - Day 9 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Sat, 09 Dec 2017 07:54:00 Z

After covering the chapters on ASP.NET Core, on the The Front-End Developer Toolset (and mindset) and on Angular, let's have a look at Chapter 4, which is all about Bootstrap. A few days I said that Semantic UI has class nicer naming than Bootstrap (and easier to remember) for specifying columns sizes in grids. Well, let's see how the responsive grid is defined in Bootstrap. This is an extract from Chapter 4 of my upcoming book "Front-end Development with ASP.NET Core, Angular, and Bootstrap". Bootstrap Grid System A basic feature of any CSS framework, the grid system allows you to create a page layout based on a series of rows and columns. On top of the basic behavior, Bootstrap provides a 12-column fluid grid layout that adapts to the size of the screen. Bootstrap defines four classes of devices, and for each of them there is a different CSS class prefix: Extra small devices, like smartphones, with a screen size smaller than 768px (.col-xs-) Small devices, like tablets, with a screen size bigger than 768px but smaller than 992px (.col-sm-) Medium devices, like normal laptops, with a screen size bigger than 992px but smaller than 1200px (.col-md-) Large devices, like desktops, with a screen size bigger than 1200px (.col-lg-) If size of columns is specified with class .col-sm-*, it means that everything smaller than 768px would get the default vertical stacked layout. To get the cells stacked for both smartphones and tablets but to be horizontal on desktops, the class .col-md-* should be used. But more complicated layouts can be achieved by combining different classes. For example, if you do not want the smartphone version to stack horizontally but you want two columns per row, you can define this behavior by using col-xs-6 col-sm-1. On the other hand, if you want the same layout in all device sizes, you just need to apply the class for the smallest size, and all bigger sizes will inherit it. For example, if you always want two columns per row, no matter the size, just apply col-xs-6. Just by reading the extract from the chapter it looks pretty complicated, but with the help of samples and figures everything is clearer. If you are interested, consider pre-ordering my upcoming book "Front-end Development with ASP.NET Core, Angular, and Bootstrap". If you want to see more of what is coming, come back tomorrow for more tips. [...]



JavaScriptServices - Day 8 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Fri, 08 Dec 2017 12:00:00 Z

Today marks the beginning of the second week of my advent calendar, and I'll just quickly introduce the JavaScriptServices, which makes it easier to include Angular (or React, Vue, Aurelia, Knockout) in an ASP.NET Core project.

JavaScriptServices was an experiment of Steven Sanderson which later made it into ASP.NET Core v2 as part of the core libraries.

You can create an ASP.NET Core project with Angular by selecting the template in the "New ASP.NET Core Web Application" dialog.

(image)

You can also create it via from the command prompt, via the dotnet CLI, by typing dotnet new angular.

The resulting project is more a sample than a template, but it gives a good starting point for exploring all the features of JavaScriptServices. You get:

(image)

  • server-side rendering of Angular components
  • server-side and client-side routing (defined only once)
  • a WebPack ASP.NET Core middleware which simplifies the development process by automatically running WebPack whenever a file is changed
  • NodeServices for invoking Node code from the ASP.NET Core application

The project that gets created has the structure shown in this picture.

You can discover more about the JavaScriptServices directly on their GitHub repository: aspnet/JavaScriptServices

My upcoming "Front-end Development with ASP.NET Core, Angular, and Bootstrap" book shows how to add a simple hierarchy of Angular components to the application created from the project template.

If you want more extracts from book, come again tomorrow for more. And if you want to learn about all these topics, please consider pre-booking my book.

(image)



How an Angular project is built - Day 7 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Thu, 07 Dec 2017 10:46:41 Z

Yesterday I introduced the foundations of Angular and today I'm going to briefly explain how an Angular project is built and why adding an Angular component to an ASP.NET Core is not as easy as just adding a few JavaScript files in a folder.

The following is an extract of chapter 3 of my upcoming book "Front-end Development with ASP.NET Core, Angular, and Bootstrap".

How an Angular Application Is Built for the Browser Using WebPack

To understand why it is not possible to just drop a JavaScript library in an ASP.NET Core project and have everything working, you have to understand how an Angular project is built.

As you might have noticed, Angular is a very modular framework. Each different piece of the application, both your own and from the framework, is in a separate file or module and imported as needed. Styles are spread among numerous files, potentially one per component. All these files have to be bundled together to avoid sending hundreds of files to the browser. In addition to this, Angular applications are built using TypeScript, which needs to be converted into standard ES5 JavaScript to be consumed by browsers.

Discovering the dependencies and relationships between the various pieces, transpiling JavaScript to TypeScript, bundling JavaScript and CSS, and finally including the correct references in HTML files are all steps that are needed before anyone can run an Angular application. As you can imagine, it’s a pretty daunting task.

It could have been done with a generic front-end build tool like Gulp, but the Angular team decided to use a build tool focused only on module bundling, called WebPack, which takes care of everything. And the Angular CLI tools use it to run the Angular project during development and to build the artifacts needed when publishing the application.

The rest of the chapter then explains how to integrate an Angular application into an ASP.NET Core project. You have three options:

  • Do not integrate them. Keep two separate projects, one client only and one server-side only with Web applications.
  • Integrate them in one project and have the Angular CLI create files into the wwwroot folder of the ASP.NET Core project.
  • Use the new-ish JavaScriptServices and have everything managed natively into ASP.NET Core.

Every option has pro and cons, and also a lot is decided by personal preferences. But it's important to see which the options are and how they work. Tomorrow I'll briefly show how to use the third option of the JavaScriptService.

If you want to see more of what is coming, come back tomorrow for more tips.

(image)



Angular Concepts - Day 6 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Wed, 06 Dec 2017 12:00:00 Z

On day six of the advent calendar I'm going to share some content from Chapter 3 of my book "Front-end Development with ASP.NET Core, Angular, and Bootstrap", which is all about Angular (v5). Specifically I'm going to introduce the concepts that make the foundation of Angular. AngularJS vs Angular I started writing this book in Summer 2015 with the hope of releasing it in Spring 2016 when the then ASP.NET 5 (and ASP.NET, MVC 6) were released. But unfortunately, as most people know, ASP.NET 5 Core had a long history full of fundamental changes that delayed the release of a complete working version, with both library and matching tooling till Summer 2017. This had a lot of consequences also on chapter 3 about Angular: I started writing about AngularJS 1.5, but during the two years wait for ASP.NET Core to be done, the vNext of Angular went from Alpha, to Beta, to release of Angular 2, and later even to the releases of v4 and v5. So chapter 3 went through one complete rewrite and a few smaller ones. The following is an extract of Chapter 3 about Angular, introducing the foundations of the framework. Angular Concepts Angular is a web application framework developed and maintained by Google and the open-source community. The framework has many features, like two-way data-binding, templating, routing, components, dependency injection, and so on. Unfortunately, like all frameworks of its breed, it has a pretty steep learning curve due to the many concepts you have to grasp in order to be fluent in it. Here is a list of the most important Angular concepts: Modules: Containers that group together blocks of functionalities that belong together, like components, directives, services, and so on. Components: Define the behavior of a “portion” of the screen. Templates: HTML files that define how the view for a component is rendered. Data binding: The process that connects a component to its template and allows data and events to flow between them. Directives: Custom attributes that enhance HTML syntax and are used to attach behaviors to specific elements on the page. Services: Reusable functionalities that are independent from the views. Dependency injection: A way to supply dependencies (services most of the time) to classes (other services or components). Metadata: Instructs Angular on how to process a class, whether it’s a component, a module, a directive, which services have to be injected, and so on. Those terms might sound abstract at the moment, but the upcoming pages will make everything more clear, as all of these concepts are used to build a sample single-page application. The development of the sample SPA is covered in the third chapter of my upcoming book Front-end Development with ASP.NET Core, Angular, and Bootstrap. If you want to see more of what is coming, come back tomorrow for more tips. [...]



Not just Bootstrap: Semantic UI - Day 5 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Tue, 05 Dec 2017 14:01:20 Z

Bootstrap is the most popular and used CSS framework, and my book "Front-end Development with ASP.NET Core, Angular, and Bootstrap" covers it in details in chapter 4, but today I want to highlight one o f the possible alternatives that my chapter 2 briefly covers: Semantic UI. Semantic UI The idea behind the Semantic UI CSS framework is that names of CSS classes should simply be names and concepts coming from natural languages. For example, to style a button with the primary color, you use



The Front-End Developer Toolset - Day 4 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Mon, 04 Dec 2017 12:15:23 Z

As the title says, my book doesn't covers just ASP.NET Core, but also other technologies and frameworks that are important for the development of a web site or web app from A to Z. Chapter 2 of my book is called "The Front-End Developer Toolset" and is an overview of the five categories of "tools" needed by a front-end developer. Today I'm posting an extract from the beginning of the chapter, and is of much lighter reading and less technical then the two posts I wrote over the weekend, which were about the new Web Host builder in ASP.NE Core and the TagHelper syntax for ViewComponents. JavaScript frameworks: These frameworks help you build complex web interfaces by bringing to front-end development the best practices that are typical of server-side systems, like the model-view-controller (MVC) pattern, the model-view-view model (MVVM), dependency injection (DI), routing, and many others. CSS frameworks: Developers are generally bad at making web apps look good and consistent. CSS frameworks provide a set of styles and UI components with which you can build web applications that look as if they were created by professional designers. CSS frameworks also help address the issue of responsive design that adapts to multiple resolutions and screen sizes and can also apply complex animations and transitions. Package managers: Systems are becoming more and more a mix and match of different components, many of which depend on other components. Managing all these dependencies and correct versions would be a nightmare if it wasn’t for package managers. Build systems: If you are coming from a pure .NET background, you probably have used some build systems already, like NAnt or MSBuild. The front-end development world came out with their own build systems, which are made specifi cally for managing the build of front-end systems. Languages: These extend beyond C# or VB.NET. Most of the tools from the previous categories are built and must be used with JavaScript or other domain-specific languages (DSL). Explanation of these five categories is covered in more details in the second chapter of my upcoming book Front-end Development with ASP.NET Core, Angular, and Bootstrap. If you want to see more of what is coming, come back tomorrow for more tips. [...]



TagHelper syntax for View Components - Day 3 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Sun, 03 Dec 2017 12:31:13 Z

It's the 3rd of December, and today I want to talk about View Components, showing how they can be added to a page using the Tag Helper syntax.

This is covered more in detail in the first chapter of my upcoming book Front-end Development with ASP.NET Core, Angular, and Bootstrap.

What are View Components

View Components is something introduced in ASP.NET Core, and they are used to encapsulate both UI and logic for reusable portions of pages: we can see them as the new version of the Child Actions (which have been removed from the MVC framework in ASP.NET Core). A big improvement if you ask me.

In it's simplest implementation, a View Component is just a class which extends ViewComponent and implements the method Invoke which returns a IViewComponentResult. This renders a view which is by convention stored in \Views\Shared\Components\{component_name}\Default.cshtml.

As very simple view component that shows a counter to a specific date can be implemented with few lines of code.

Here the component

public class CountdownViewComponent: ViewComponent
{
    public IViewComponentResult Invoke(DateTime to, string eventName)
    {
        var today = DateTime.Today;
        var diff = (to - today).TotalDays;
        var model = $"{diff} days to {eventName}";
        return View(model);
    }
}

And it's view

@model string
It's @Model

How to include the View Component into a view

The original way of including the view component is a view is by using the Component class specifying the name of component (as string) and an anonymous object with the parameters:

@await Component.InvokeAsync("Countdown", new {to = new DateTime(2017,12,15), eventName="Christmas"})

But this syntax is not easy to use and not discoverable as it relies on magic strings and on the developer needs to know the exact name of parameters.

There is also the TagHelper syntax, which is much easier.



And also comes with Intellisense:

(image)

If you want to learn more about View Components, Tag Helpers and much more, consider pre-ordering a copy of Front-end Development with ASP.NET Core, Angular, and Bootstrap and get it as soon as it hits stores.

If you want to see more of what is coming, come back tomorrow for more tips.

(image)



Web Host Builder in ASP.NET Core 2.0 - Day 2 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Sat, 02 Dec 2017 12:26:03 Z

On the second of December, I want to share something from the first chapter of my upcoming book Front-end Development with ASP.NET Core, Angular, and Bootstrap. While reviewing and updating the code from ASP.NET Core 1.0 to version 2.0 I was faced with the challenge of how to explain what's going on in the initialization of the WebHost which was make much more simple and logic ASP.NET Core 2.0, but at the cost of being more "magic". Initialization in ASP.NET Core 2.x But let's get back to basics a bit. The initialization happens inside two files: Program.cs, where the WebHost is built Startup.cs, where the execution pipeline and dependencies are set up The ASP.NET Core 2.x the initialization of the WebHost in the Program.cs file is just a few lines of code: public class Program { public static void Main(string[] args) { BuildWebHost(args).Run(); } public static IWebHost BuildWebHost(string[] args) => WebHost.CreateDefaultBuilder(args) .UseStartup() .Build(); } And the code in the Startup.cs file is exactly just about configuring the request execution pipeline. public class Startup { public void ConfigureServices(IServiceCollection services) { } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.Run(async (context) => { await context.Response.WriteAsync("Hello World!"); }); } } But now you don't really understand what has happened. Especially if you have worked with ASP.NET Core 1.x where everything was much more verbose and explicit. I bet you would be surprised to know that after this 3 lines of code you have: configured the app to use Kestrel as web server configured integration with IIS specified to use the current project directory as root for the application set up the configuration sub-system which reads settings from: appsettings.json in the root of the project appsettings.{env}.json which specifies environment specific configuration local user secrets storage for things like password and auth tokens (but only in the Development) Environmental variables to allow for server-specific settings command line arguments configured to logging sub-system to read its filters and rules from the Logging section of the appsettings.json file and log to the Console Debug window In ASP.NET Core 1.x you had to specify everything explicitly, even adding references to a few additional Nuget packages. All these configuration are hidden inside the CreateDefaultBuilder method. To understand better what's going on I recommend you go on the ASPNET/MetaPackages git repo and read its implementation. How do you like this new approach? I personally like it as it declutters the code and removes all plumbing code what is supposed to be just the creation of the execution pipeline of you application. But I admit it made my job of explaining what happens behind the scenes more difficult. If you are interested in learning how to become a polyglot front-end developer using ASP.NET Core as basis, consider pre-ordering a copy of Front-end Development with ASP.NET Core, Angular, and Bootstrap and get it as soon as it hits stores. If you want to see more of what is coming, come back tomorrow for more tips. [...]



Polyglot Developer - Day 1 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Fri, 01 Dec 2017 08:53:26 Z

Today it's the first of December and this year I'm trying to do something I've never done before. I'm going to write an Advent Calendar. And each day from today to the 24th of December I'm going to write a short post with a tip, an extract, a code listing or topic from my upcoming book Front-end Development with ASP.NET Core, Angular, and Bootstrap. The posts will be published around noon European time so that they are the first thing you see in the morning in USA time zones. The book is made of 9 chapters plus introduction and preface, so it'll roughly be 2 days per chapter. Today, as first day, the content comes from the introduction of the book, and is the reason why I decided to write the book. After changing job and industry (almost 8 years ago now) and moving from companies in the IT industry to an organization where IT is something to support the main business, I've seen a big difference in the type of developers: mostly were the so called "enterprise developers" which only knew their language and their framework of choice, but had little (or no) knowledge of the revolution that was happening in our industry, more specifically about the fast-paced evolution in the world of front-end development and integration with server-side development. This is what pushed me to write this book. And here is an extract of that chapter: What is a polyglot developer In every-day life, a polyglot is a person who knows and is able to use several language: their are not necessarily bi-lingual (or multi-lingual) but they can use their second or third or fourth language with a good level of proficiency. With that definition in mind, what is a polyglot developer? It's a developer who knows more than one (programming) language or framework and uses them within the scope of the same application. From the beginning of IT industry, applications were mainly written in one language: I personally started with C, then moved to Visual Basic, landed on Cold Fusion, used JavaScript at its early stages, both on the client and the server, did a bit of Java and finally landed on the .NET platform, but only one at a time. It was the time of the big enterprise frameworks, when vendors tried to squeeze into their language or platforms all the possible features than an application might need. Probably you all remember when Microsoft tried to shield web developers from the actual languages of the web, HTML and JavaScript, introducing ASP.NET WebForms and the ASP.NET Ajax Framework. And if you look back at your personal experience in the IT industry you'll probably find many other similar examples. But lately a new trend appeared, which went in the opposite direction. The IT industry understood that maybe some languages are more suitable than others for specific tasks, and instead of trying to force everything on top of one and only language, applications started to be written in multiple languages. And that was the beginning of the era of the polyglot developer. If you are interested in learning how to become a polyglot developer using ASP.NET Core as basis, consider pre-ordering a copy of Front-end Development with ASP.NET Core, Angular, and Bootstrap and get it as soon as it hits stores. If you want to see more of what is coming, come back tomorrow for more tips. [...]



My new book Front-end Development with ASP.NET Core, Angular, and Bootstrap is coming out soon

Thu, 12 Oct 2017 19:03:54 Z

I'm so excited to announce that I just sent to the my editor the final chapter of my upcoming book Front-end Development with ASP.NET Core, Angular, and Bootstrap. Which means that in a few months you will be able to get your hands on it. What is the book about The book covers a series of technologies that are important to master in modern front-end development with ASP.NET Core. I'm not talking only about Angular and Boostrap, but also about WebPack, Gulp, TypeScript, Node, Bower, Nuget and NPM. This book is meant as a reference for backend ASP.NET developers which still have to make the step to the mix of technologies that is modern front-end development. But it also good for front-end developers that come from other technologies and never used Visual Studio: they will learn how Visual Studio 2017 helps a lot with common task. And also they will learn how to developer ASP.NET applications on a Mac. It has 9 chapters, one per type of technology or tool ASP.NET Core MVC A general overview of modern front-end development Angular Bootstrap Package Managers (Nuget, NPM, Bower) Build tools and task runners (WebPack and Gulp) Deployment on-prem and to Azure How to develop without Visual Studio A sample that combines all these technologies Each of the chapters start explaining the library or technology by itself, and later shows how it works in the context of ASP.NET Core development and what Visual Studio 2017 helps doing faster or without errors. A bit of behind the scene Writing this book was a massive effort because of the constant changes in the technologies I'm covering. I started writing the book in summer 2015, when ASP.NET Core was called ASP.NET 5, ASP.NET Core MVC was called MVC 6 and the only cross-platform compiler was called dnx and was only for web development. Angular was called AngularJS v1, Bootstrap 3 was still in beta and Grunt was the main task runner, Gulp a rising star and Bower was the package manager for front-end components. Then ASP.NET 5 became ASP.NET Core... all the .NET went cross-platform as .NET Core, they went from the beloved JSON-based configuration file back to the csproj file. But ASP.NET Core was "final" only in the libraries, but not in the tools, so I had to wait for the ASP.NET Core tooling to go RTW, which happened only this spring with Visual Studio 2017. In the meantime, Bootstrap 3 became stable, and v4 was still in alpha, Angular 2 was released, Grunt felt out of grace and WebPack came to the scene. So not only I had to update the bits about ASP.NET Core, but had to completely rewrite the chapter on Angular, add some new content on WebPack and get rid of Grunt. While I was updating all of these, ASP.NET Core v2.0 was released, this August. Luckily nothing major changed since this summer (apart from Angular becoming v4 and soon to be v5 but with little or no fundamental changes) so I just finished the last chapter that combines everything which I had left as last to avoid rewriting it zillion times. A funny thing: when I started the book I asked Mads Kristensen from Microsoft if he wanted to be my Tech Editor, and he declined because he was about to become father soon and would not have had time for that. And now his kid is almost 2yo... But Mads is providing the preface to the book, so no all was lost. What's next I just have to complete some last minute changes and then the book will be sent to print (and eBook production). And I'll finally be able to conclude this 2 year and half project. I'll post more about the book the it goes into publishing and the release date, now set for 8th January, becomes certain. [...]



How to get the correct Request.Url when behind a load balancer

Fri, 14 Jul 2017 14:20:00 Z

When a web application is sitting behind either a proxy or a load balancer, and you use Request.Url to, for example, generate an absolute url, you would get a the private url used by proxy to connect to the web server.

The reason

Let's see how a typical load balanced environment works:

  • The user types http://example.com;
  • The request goes to the load balancer which is configured to respond to that url;
  • Then the load balancer, randomly or with some logic, forwards the request to the real server that will generate the response, and will do so by using some internal urls, for example server1.mydomain.int or even directly with some internal IP address. Maybe there is a farm with 100s sites on it, and each site might have a port number to identify it.
  • finally the web server responds to the request which has been addressed to http://server1.mydomain.int:8045

By default, the Url property is generated using the information provided by the web server, which is fine in most cases, where the public url is directly mapped to the web server. But in this scenario, it will returnhttp://server1.mydomain.int:8045 instead of http://example.com.

The solution

The solution is pretty simple but not very well documented. All you need it is to add an aspnet specific setting in the appSettings section of the web.config file.

The property is called aspnet:UseHostHeaderForRequestUrl and by default its value is false. When set to true, the Url property will be built using the Host header of the request instead of the domain the server is responding to.

You can read more about this property and all other "secret" configuration keys on the MSDN site.

(image)



How we implemented a multi-lingual site with Umbraco at the Council of EU

Fri, 09 Jun 2017 09:00:45 Z

As mentioned last summer, I finally managed to make my passion for Umbraco a part of my everyday job, and after almost an year of work, we are approaching the final stage of the development of the new website of the Council of European Union

The project is big one compared to the typical Umbraco projects, both for the features requested by the users and for the size of the team (10+ developers and designers) working on it, so we thought it was a good idea to propose a talk on what we have done and how we are doing it.

In the talk my colleague Dirk and I covered:

  • Why and how we decided to use Umbraco for our project
  • How the team is organized and which tools we use for collaborate and plan work
  • How we implemented a CI/CD pipeline on premise using the Atlassian stack
  • How the system is designed, how we do caching and handle scalability
  • How we designed the editor experience
  • Our approach to 24 1-1 multilingual site
  • How we automate translation of content using Xliff v2.0
  • Integration with internal systems
  • Full-text search with Elastic Search
  • Importing data from the previous CMS

Without further ado, here are the slides

src="https://www.slideshare.net/slideshow/embed_code/key/dW1zPE4BhDM5RH" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border: 1px solid #CCC; border-width: 1px; margin-bottom: 5px; max-width: 100%;" allowfullscreen="">

If you attended our talk, we'd love to have your feedback, and we are happy to answer additional questions.

(image)



Free eBook on ASP.Net Core is available for download

Thu, 20 Apr 2017 12:55:41 Z

The eBook I wrote together with Ugo Lattanzi is finally available for download for free from the Free Ebooks section of Syncfusion Tech Portal.

This project had a long development as we had to wait till all the latest bits of the ASP.NET Core tools (which only became final with Visul Studio 2017) were finally available to deliver a complete and up to date picture of how to develop an ASP.NET Core application. But now it's finally out and you can get it for free.

The table of content of the book is:

  • About ASP.NET Core Succinctly
  • Introduction to ASP.NET Core
  • What are .NET Core and ASP.NET Core?
  • A Brief History of the Microsoft Web Stack
  • Getting started with .NET Core
  • ASP.NET Core Basics
  • Beyond the Basics: Application Frameworks
  • How to Deploy ASP.NET Core Apps
  • Tools Used to Develop ASP.NET Core Apps
  • A Look at the Future

The books also briefly covers OWIN, which was the "inspiration" for ASP.NET Core, but if you want to know more about it, we also wrote OWIN Succinctly, still published by Syncfusion.

A big "thank you" goes to both the editors at Syncfusion and to technical editor James McCaffrey whose comments helped improve the quality of the book.

(image)



How to get the url of custom Umbraco backoffice API controllers with the GetApiUrl method

Wed, 21 Dec 2016 13:35:47 Z

Today my article on extending Umbraco has been published on the Umbraco Advent calendar site and on a comment Ismail asked if one could have used the umbRequestHelper.GetApiUrl method to build the Url to the backoffice API instead of hardcoding it into the $http request. Since it would quite a long explanation which wouldn't fit in the comment, I'm posting it here instead. The umbRequestHelper.GetApiUrl method This method is used to simplify the creation of Url to the backoffice web api, and it creates them based on a JavaScript dictionary Umbraco.Sys.ServerVariables[umbracoUrls] that is created on the server, directly using the MVC routing engine to get the correct url for controllers. Once a custom controller has been registered in the umbracoUrls dictionary, using the method is pretty easy. You just call it by specifying the apiName (which is the key with which you register your controller in the dictionary) and the actionName within the controller (and a query paramter if needed). For example, if you want the url for the GetLanguages action of the NuTranslation API you just do: umbRequestHelper.getApiUrl("nuTranslation","GetLanguages") Setting the key in the umbracoUrls dictionary But for it to work you need to first set the url in the umbracoUrls dictionary. And here comes the tricky bit. This has to be done inside as handler for the ServerVariablesParser.Parsing event, where you just ask to the UrlHelper to get you the url of a given controller. Here is a simplified version of the code. public class NuTransationApplication : ApplicationEventHandler { protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) { ServerVariablesParser.Parsing += ServerVariablesParser_Parsing; } private void ServerVariablesParser_Parsing(object sender, Dictionary serverVars) { if (HttpContext.Current == null) throw new InvalidOperationException("HttpContext is null"); var urlHelper = new UrlHelper(new RequestContext(new HttpContextWrapper(HttpContext.Current), new RouteData())); umbracoUrls["nuTranslation"] = urlHelper.GetUmbracoApiServiceBaseUrl("Index"); } } To make sure it all goes well, in a production level solution you should probably add some more error checking. You can see a complete version on NuTranslation github repo. If you now call the getApiUrl("nuTranslation","GetLanguages") it will return /umbraco/BackOffice/Api/NuTranslation/GetLanguages. Now if you rename the controller you won't have to update the frontend as well, and you won't have to remember the exact route to API controllers. [...]



Ignoring files on git, but just for a while with assume-unchanged

Mon, 19 Dec 2016 14:09:12 Z

One of the most common issue we all face when versioning code on source repositories is being able to make changes to files that are tracked, but without committing them. A typical example is the web.config file in Umbraco projects: the version in source control should be the default "uninstalled" version, while each developers will have its own, with it's local configurations.

Probably some of these scenarios could be solved with other approaches, like writing .user config files, but a solution that solves all of these issues is using the update-index command of git.

You can type git update-index --assume-unchanged to temporarily exclude the file from any tracking, pretending it never changed. And when you actually need to commit some actual change to the file you can use the opposite command git update-index --no-assume-unchanged .

The only annoying problem is that I cannot find a way to list which files are untracked. But it nicely solves the problem of making configuration changes that we don't want to commit in a way that is transparent for the solution being developed.

Have you ever used this approach before? What do you think? Let me know in the comments.

(image)



10 years of blogging... and blog migrated to Articulate on Umbraco

Sun, 11 Dec 2016 16:37:43 Z

Exactly 10 years, on the 11th of December 2006, I wrote my first post on this blog, just a few days before quitting my first ever job in Esperia and few weeks before moving to New Zealand.

Lots of time passed by. I moved to New Zealand, went back to Italy, quit my job at Calcium, started working in Avanade, got to know Umbraco, moved here to Belgium and started working for the EU, started triathlon (and many other changes as well).

Blog migration

Now, 10 years after my first blog post, as I announced a few days ago, I also changed blogging platform, moving from the obsolete Subtext, to the more modern, easier to update and closer to my current interests, Articulate.

As you can see, the skin is very simple and some of the feautures I had in my previous skin are not here yet, like categories, tags, monthly archives, code highlighting and lightbox for images. I wanted to make sure all content was moved correctly.

A new feature introduced is that comments are now managed off-site, by Disqus.

How I migrated from Subtext to Articulate

The migration was not a difficult one, but a few customizations we needed to keep the old URL structure and make the right URL rewriting for the routes that I couldn't keep the same.

I'll write some posts in the next weeks explaining everything I've done.

Contributions to Articulate

Apart from some customization specific to my scenario I also made a lot of changes to Articulate in order to correctly import my BlogML. I'll be sending a few PR to be incorporated into the main code-base.

(image)



Blog Migration to Articulate

Thu, 08 Dec 2016 09:52:54 Z

I’m in the process of migrating my blog from Subtext to Articulate.

There are various reasons to this. First, not being MVP I don’t have  free azure subscription anymore, and I’d have to migrate anyway. Then Subtext is a very old software, based on pre-nuget libraries, and I cannot even make it to run on my own computer, so I cannot update it with things I’d like in a modern blogging engine. And finally, being more and more into the Umbraco community, I wanted to host my blog on Umbraco as well.

I already setup a blog on Umbraco and Articulate: TriathlonGeek, and is about my triathlon experience and how I’m preparing for my first full distance Ironman for 2018. It’s pretty clean and easy, but planning on adding some more features to it.

Now, what are the issues the I’ve to face when migrating from my blog to Articulate:

  1. First I need to export all posts from Subtext and import them into Articulate: this is easy as Subtext exports to BlogML and Articulate imports BlogML
  2. Then I need to copy over all pics and make sure references are still ok. There are few options I’m considering for this.
  3. Articulate doesn’t natively support comments, but it can be configured to use either Disqus or facebook. I’ll go with Disqus as it allows me to import my old comments from BlogML.
  4. Finally I need to keep the same URLs. Now I have /archive/yyyy/mm/dd/title.aspx. Articulate by default has /archive/title. No date and no .aspx at the end. With a mix of 301 redirects and custom UrlProvider to generate custom url I should have this solved.
  5. I also need to import manually all tags, as the BlogML export from Subtext doesn’t provided them.

So while recovering from surgery I’m doing all these changes and I hope to have them done by when my MSDN subscription expires, beginning of next week. If not, my blog will be down a couple of days before it’s new life on Umbraco and Articulate on Umbraco Cloud.

(image)



All about Connect() 2016

Thu, 17 Nov 2016 12:55:54 Z

Lots of announcements the Connect(); 2016 event around the new wave of tools from Microsoft.

TL; DR; Microsoft released Visual Studio for Mac, .NET Core 1.1 (with ASP.NET Core and EF Core) and Visual Studio 2017 RC… and many other Azure related and mobile related features

Here a selection of all the posts from various offical blogs about what happened recently:

If you want to go bit more in details of some of the features, here are some more in-depth coverage of the some of them:

The conference is not over yet, so make sure you tune in at https://connectevent.microsoft.com/ for more in depth video about the new line of Visual Studio tools and for the Future of .NET

(image)



Extending the dotnet core cli: introducing dotnet-prop

Wed, 16 Nov 2016 21:56:20 Z

Last week, on the last day of the MVP Summit, I participated in the .NET Hackathon. There were many different topics, ranging from ASP.NET Core to Minecraft and HoloLens. But I was interested in better understanding the .NET Core tooling so I joined the table of the dotnet-cli team. With the move from the easily editable project.json file to the old .csproj format, it became more difficult to manually edit the project file, so I built a command for the dotnet cli, to make it easier to edit some properties without messing up with the XML-based format of the MSBuild file. The usage of the tool is very simple. First you have to add the tool to the project you want to edit by manually editing the csproj file. I know this sounds a bit weird but unfortunately there is no way to add global tools for the dotnet-cli, but only tools specific for a project. I sent a pull request to the dotnet-cli project so this step won’t be needed if they include this tool as command. To add the reference to the tool you have to add: 0.1.0-* Then, restore the dependencies and finally just call the dotnet prop verb from the root of project. The commands available are: add, to add a property (or update one that already exists) del, to remove a property list, to list all the properties of the csproj file For the moment I only implemented the possibility to add/update the following three properties: version number (-v|--version), which sets the VersionPrefix property in the MSBuild file target framework (-f|—framework),  which  sets the TargetFramework property supported runtimes (-r|--runtime), which sets the RuntimeIdentifiers. Since one project can be built for many runtimes, this option can be specified more than once You can find the code on my github repository: https://github.com/simonech/dotnet-prop/ The tool is available on nuget and will be automatically downloaded when restoring the packages of your project. This was just a test and it’s a work in progress, so please let me know what you think of it, and which other properties should be added. I’m also undecided on the right commands and options to use. Which of the following pattern do you think is better: command for the operation (add or delete or list) and option for the property (like now): dotnet prop add –version command for the property and option for the operation: dotnet prop version  –add |—del Tags: dotnet-cli, netcore [...]



The time I was top link on Hacker News and Azure killed my site: lessons learned

Thu, 03 Nov 2016 14:23:03 Z

Monday morning (USA time) 31st October 2016, at a certain point my post about “Surface Book vs MacBook Pro” got the first position on Hacker News. It triggered a good amount of discussion, and luckly the tech-savy people commenting managed to go on using either the Google cache or directly reading from the RSS feed (which is distributed via feedburner, thus static) What happened? How did I notice it? Because someone wrote me on facebook that my site was down. The error I got was: Going to page linked from the error, Azure SQL Database resource limits, looks like the problem is that I reached the maximum number of workers allowed by my SQL Basic Tier (30). Also DTUs were maxed out, according to the resource chart from azure portal. All these was due to the huge number of requests arriving from Hacker News, more than 40k per hour… with more than half of the response returning HTTP errors. Normally I have less than 500 per hour, so a huge peak.   I’m running on Azure thanks to my MSDN subscription, which entitles me to 130 Euro per month to spend on Azure. So I had a Standard tier for the Web and a Basic tier for SQL Server. And at the time I set them up this was almost maxing out my budget. I realized lately I was just using less than 40€ per month, so I upgraded the SQL server to the Standard tier, which has 60 workers and 10 DTUs. Unfortunaly it took 3-6 hours to scale up a database (even if mine is pretty small, less than half gigabytes). So I guess I lost the traction of the first visits from Hacker News. I would have expected Azure to allows sporadic peaks (I’m usually at half DTU all year long, and for the 3 hrs I’m above the limit they shut it down?). What did I learn? Short term solution, thanks to some suggestion from some friend, I setup my site under CloudFlare. It is a kind of CDN which caches my website and serves it up to the world. It caches only static files (js, css, images) but by default it doesn’t cache dynamic pages, so I’ll have to understand how to configure it to cache them and also keep the backend outside and update pages after comments have been added. Longer term solution: Move away from Subtext and from Azure. This was already something I was planning to do since my MSDN license was a benefit of being MVP. And not making any money out of my blog (apart from the sporadic 5-10SUSD a month I get from ads) I can’t afford to spend 50€ a month on Azure fees. I’m evaluating some options for the new home of my blog: one is making everything static, and host it on github pages. Another is migrating to another blog engine built with Umbraco, Articulate, and run it from Umbraco Cloud. Tags: azure, hackernews, cloudflare, traffic peak [...]



MacBookPro vs Surface Book [based on specs]

Fri, 28 Oct 2016 15:25:00 Z

Now it is an exciting moment to buy a new laptop, with Microsoft having released its new lineup of Surface devices and Apple having released its new MacBookPro with TouchBar. I have a super-old MacBook Pro, “early 2009” Core 2 Duo, that is still working pretty ok till now, after having boosted RAM to 8Gb and disk with an SSD. With a lifetime of 7 years and half, having kept all my previous laptop maximum 3 years, this is the longest living computer I ever had, more than twice. But with the model getting out of support and not compatible with new macOS versions, it’s time for a new laptop to enter my home-office. If there were no Surface laptop, the decision would have been a no-brainer, but now it gets more complicate. So let’s see the specs and features of both the two models. Note: Since none of the two laptops are available on the market, this comparison is just based on specs and personal opinions. Microsoft Surface Book The Surface Book is a hybrid laptop, with a 13” touch screen and pen, and a detachable keyboard that also contains additional battery and discrete graphic processor (NVIDIA® GeForce® GTX 965M 2GB). The new version, called “Surface Book with Performance Base”, comes in 3 configurations all based on i7 Intel CPU: 8Gb RAM and 256Gb SSD and 16Gb RAM with both 512Gb or 1Tb of SSD. The old Surface Book is still available and comes in 7 configurations, i5 or i7, with or without discrete graphic processor (still NVIDIA GeForce), 8Gb or 16Gb RAM and 126Gb to 1Tb SSD. Apple MacBook Pro The MacBook Pro is a standard laptop, with a new Touch Bar strip on top of the keyboard, available in both 13” and 15” displays, the latter with a quad-core i7 and a discrete graphic processor (Radeon Pro 450 2GB or 460 4GB). In addition to these, there is also a revamped MacBook Pro 13” without the Touch Bar. In total there are more than 30 possible configurations as you can mix and match what you want. They even have 2 different clock speeds available and SSD goes up till 2Tb, with the powerful configuration being a 15” with 2.9Ghz quad-core i7, 16Gb of RAM, 2TB SSD and Radeon Pro 460 4GB. Comparing the two beasts Moving along from the factual information, let’s compare the products, focusing on the features that are not just coming from the specs Processing Power This is difficult to do a fair comparisons, especially when comparing prices later, because, while for the MacBook Pros we know exactly their clock speed and if they are dual-core or quad-core, there are no specs for the new Surface Book. I read somewhere they used the same processors of the previous model, so dual-core i5 2.4Ghz and dual-core i7 2.6Ghz. Which is more than the revamped MBP whose i5 is 2.0Ghz and i7 is 2.4Ghz, but (much) less than the new models which have an i5 with 2.9Ghz and i7 up to 3.3Ghz and even a quad-core i7 2.9Ghz for the 15”. Update: In comments someone wrote that “processors are not benchmarked by GHz these days”. While there is more to CPU performances than GHz, they still play an important part of it. So I looked up the model numbers of CPUs, and compared their scores on PassMark benchmarks. CPU Laptop Mark i7-6920HQ @ 2.90GHz MBP 15” (optional) 9588 i7-6820HQ @ 2.70GHz MBP 15” (standard) 8697 i7-6700HQ @ 2.60GHz MBP 15[...]



I’m no more an MVP… and that’s OK

Fri, 30 Sep 2016 13:02:06 Z

This the time of the year when usually member of the Microsoft community post about becoming Microsoft MVP or having their status renewed for another year. I also did that for 8 years, first on my blog since I was first awarded in 2008, in 2009, then when I became a Belgian MVP in 2010, and then on social media when blogging became slower. But this year, instead of announcing my renewal as MVP, I’ve to announce that I’m not being renewed. The reason is simple… during the last year, apart from presenting ASP.NET Core at the Umbraco CodeGarden, I mainly worked on my upcoming book, which is not released yet. So no real tangible contribution. Also last year they put together many expertices into one, so from being MVP on ASP.NET I became an MVP in Visual Studio and Development Technologies, together with MVPs from .NET, ALM, Security, IE and C++, so basically the “generic” Microsoft developers group which do not focus on Azure or devices. This meant more people to be compared with, and with categories that are usually more prolific in community contributions. At first I was kind of upset and annoyed, but after some hours of introspection I remembered that being an MVP for me was a way to get into closer contact with the product groups I care, which are ASP.NET and Web Tooling. But I’m an ASP Insider, so I can still do that. The only thing that affects me is that I’d lose my Azure credits, so I’ll move my blog away from Subtext and from Azure (the use I do wouldn’t justify the 30-40 Euro per month that I’d pay). So, you’ll still see me this year at the MVP summit, and probably also in the years to come. Tags: MVP, MVP Summit [...]