Creating a FontAwesome bundle with only the icons you use

FontAwesome contains thousands of icons, but you often use a very small subset of those icons. For instance, I only use 15 icons on this website. So, why do you want your visitors to download hundreds of icons they won't use. One solution is to create a custom bundle that contains only the icons you actually use. You can reduce the bundle size from a few hundred kB to a few kB (6kB on this website).… [read more]

Loading stylesheets asynchronously using a TagHelper in ASP.NET Core

In a previous post, I've talked about inlining a CSS file in the html page. In term of performance, this is important to inline the critical CSS. However, the rest of the styles of the page doesn't need to be downloaded immediately. For script elements, you can simply add the attribute async to instruct the browser to load the resource asynchronously. For stylesheets, there is no equivalent. You have to… [read more]

Inlining a Stylesheet, a JavaScript, or an image file using a TagHelper in ASP.NET Core

In the previous post, I've written about inlining a Stylesheet file in the page. This allow you to reduce the number of requests required to load the page, and so to reduce the loading time of the page. The TagHelper automatically replace the tag by the content of the file at runtime, so the html document stays clean in the source code. In this post, we'll create new Tag Helpers to be able to inline CSS,… [read more]

Inlining a stylesheet using a TagHelper in ASP.NET Core

When you have a very tiny stylesheet, it may be more performant to inline it directly in the page. Indeed, it will avoid one network call, and the layout may be blocked until the browser get the response of this call. If the stylesheet is very small you may not care about caching the file on the client. For instance, on this website, the main stylesheet is 2kB large, and the full page with the inlined… [read more]

How to document an ASP.NET Core Web API using OpenAPI Specification (swagger)

Documenting your API is very important if you want people to be able to consume it. An API documentation should contain the list of accessible endpoints (URL, method), their parameters, and the response (http status code, body). The documentation should be readable by a human, but also by a computer. The later is very useful to generate clients automatically. OpenAPI Specification is the most common way… [read more]

How to enforce a consistent coding style in your projects

Every company/team has its own coding style. The coding style is about naming, spacing, or language feature usages. Do you use tabs or spaces, and how many spaces? Do you use PascalCase or camelCase? Do you prefix field names with _? Do you always use var or only when the type is visible? And a few more questions in that vein… In an open/inner source project, you want to ensure every contributor uses your… [read more]

Library Manager, a client-side library manager in Visual Studio 2017

Microsoft released Library Manager a few weeks ago. Library Manager is a Visual Studio's new client-side static content management system. Designed as a replacement for Bower and npm, Library Manager helps users find and fetch library files from an external source (like CDNJS) or from any file system library catalog. Library Manager is open source. You can find the source of the project on GitHub:… [read more]

Which version of EcmaScript should I use in the TypeScript configuration

TypeScript allows to convert most of the ES next features to ES3, ES5, ES6, ES2016, ES2017. Of course, you can also target ES Next. But which version should you target? Why you should use the highest possible version? Using the highest version allows allows you to write shorter code, and use more readable features, such as async/await, for..of, spread, etc. It's not only shorter, but also easier to debug.… [read more]