Oct 07, 2017
Microsoft Orleans is a framework used to build scalable distributed systems. It reduces the complexity of distributed system by abstracting away concurrency issues and state management. Processes are ran on multiple instances and form a cluster, hosted on different environment and horizontally scalable on demand. Today I will give a broad overview of the concepts utilized and developed by the team behind Orleans.
Sep 28, 2017
Last month I showed how we could build a breadcrumb with PrimeNG in Angular (you can read it as appetizer if you are interested in implementing a breadcrumb bar). In my previous post, I suggested to have a service BreadcrumbService which would hold the crumbs and get updated in ngOnInit of the component used on the route. Since then, I always was uncomfortable with this approach as this meant that my component would know the existance of a breadcrumb, because it updates it, while I always believed it should not know and not care.
This led me to figure another way to abstract away from the component the concept of breadcrumb by combining guard, resolver and route.
Sep 22, 2017
Few weeks ago I explained how we could build reactive forms with Angular. In the previous post, I emphasized on how the reactiveness was enabling us to subscribe to the state and “react” to any state changes. Since then I have been playing quite a bit with the reactive form and more precisely with the FormBuilder. I ended up being more impressed by the link between FormGroup and UI rendering rather than about the reactiveness nature of the state held by the form. So today I would like to expand more on the FormBuilder by showing the steps needed to build a more complicated form supporting arrays of arrays and different controls like date picker and color picker.
Sep 16, 2017
Few months ago I talked about Resource owner password flow with Identity Server and ASP NET Core. But as mentioned in multi places, ROP is an anti pattern when it comes down to a correct implementation of Open ID Connect. A more appropriate flow for API <-> SPA authentication is the Implicit flow. Today we will see how we can implement.
Sep 08, 2017
One of the easiest way to build Angular applicationns is through Angular CLI. Using the ng serve command will build and serve the whole application or we can use ng build to output the app into the outputDir folder, but there might be occasions where we need to serve files which aren’t part of the Angular process, like static files or images. Those files are referred to as assets. Today we will see how we can configure Angular CLI to copy assets to the output directory and what sort of configuration is available.
Sep 02, 2017
Typescript is a superset of JavaScript. It provides type safety on top of the JS libraries. Type safety is an important part of the development experience as it allows us to detect problems early thanks to the compiler preventing us from writing broken code. JS being dynamic it is very easy to extend since anything is assumed to exist. In the context of extension methods, the only step needed is to add the method to the prototype of the class and we are done. Typescript kept that flexibility but in order to provide type safety on top of it, extra steps are needed. Today I would like to share how we can create extension methods in Typescript by extending existing types.
Aug 26, 2017
The breadcrumb is a very important piece of any website. It gives an idea where the user is currently in, from where the user landed on this page and finally allow the user to navigate back to any steps wanted. I like to call it an “enhanced version of the URL path”. The URL path in itself has the information but it might, at time, not be human readable. That is where the breadcrumb become indispensable. I showed few features of PrimeNg in my previous posts about building an inline form and about building a tree structure. It turns out that they also provide a Angular friendly breadcrumb component. Today we will see how we can make use of the breadcrumb component together with the Angular router to provide a breadcrumb bar.
Aug 19, 2017
Few weeks ago I spoke about the functionality of the Angular Router http://kimsereyblog.blogspot.com/2017/05/attribute-route-in-asp-net-core.html. It was a brief overview of all the router features but one of the feature was not totally explain, the CanActivate feature. From there a question emerged, what is the difference between CanActivate and CanActivateChild?. Today I will answer this question and at the same time discussing extra behaviours of the router.
Aug 10, 2017
Inline form are used to edit portion of long forms. This makes the process of editing a long form less tedious and less error prone as the focus is on a small portion. The process of allowing the fields to be editable can be hard as the state of the field currently selected for editing needs to be tracked and the right input fields must be shown. Angular offers convenient directives to handle showing and hiding elements, together with ngrx store to handle the state and PrimeNg UI components, it is an ideal solution to build inline forms. In this post we will see how to build a user friendly form.
Aug 05, 2017
Last month, I describe a way to manage global state with ngrx/store. With the store, we mamage the overal state of the Angular application in a single global object. Loading and retrieving data affects a single main state object. This simplication gives opportunities to other simplications. Like for example, if we loaded once a collection of items, we wouldn’t need to reload it when a component is displayed as it is available in the state. But how can we ensure that and more importantly how can we keep the check logic in a maintainable state. Here enter the Angular router route guard which I also described few weeks ago in my post on how we could create and manage routes with the Angular router. Today I will show how we can use both together to solve the issue of ensuring data is loaded before displaying a route.
Jul 29, 2017
PrimeNg is a Angular component library. Compared to other component libraries like ngbootstrap or material, PrimeNg comes with more advance components which can’t be found elsewhere, one of them being the tree structure. Having the component is one thing but having to build the tree data which can be used by the component is another hard part. Therefore today I will firstly show how we can use PrimeNg and secondly I will show how we can mold data to fit in the model used to build PrimeNg tree.
Jul 22, 2017
When developing multiple Web api under multiple Visual Studio solutions, it can become very tedious to maintain, run and debug. Opening multiple instances of Visual Studio is very costly in term of memory and running all at once also clutter the screen which rapidly becomes irritating. With the advent of dotnet CLI tools, it has been clear that the next step would be to move out of the common “right click/build, F5” of Visual Studio and toward “dotnet run” on a command prompt. Last month I was looking for a Windows alternative of the bash terminal which can be found on Mac and I found ConEmu. ConEmu provides access to all typical shells via an enhanced UI. Today we will see how we can use ConEmu to ease our development process by leveraging only 2 of its features; the tasks and environment setup.
Jul 15, 2017
Every application needs configurations, whether it is a port, or a path or simply string values. In order to deal with configurations, ASP NET Core ships with a Configuration framework. The framework provides a builder allowing to read configurations from different json files, supports environment convention and also defining custom configuration providers in order to read from other sources like MSSQL or other services. Today we will see how we can use the configuration framework.
Jul 08, 2017
The goal of Angular components is to be completely independent. This can lead to mismatch of displayed data where one component isn’t in sync with what other components are displaying. One solution is to have a stateful service shared among all components and delivering global data. This can be problematic when multiple pieces have to be globally accessible among multiple components. In this situation, the need for a global state becomes inevitable.
Jun 27, 2017
In order to facilitate the creation of a new Angular project, it is possible to use the Angular CLI. Angular CLI is a CLI providing functionality to bootstrap, upgrade and serve your Angular app. Today we will see how we can use Angular CLI to improve our workflow.
android
angular
aws
azure
bootstrap
c language
chrome
csharp
cypress
dbeaver
docker
dotnetcore
duckdb
ethereum
figma
flask
fsharp
gimp
git
gitlab
go
graphql
hashicorp
ios
jekyll
jenkins
js
kafka
letsencrypt
maths
metamask
mobx
mysql
nginx
ngrx
npm
oas
oidc
orleans
postgres
postman
primeng
prometheus
puml
python
racket
react
solidity
splunk
sqlalchemy
sqlite
typescript
ubuntu
unicode
vscode
xamarin
zsh