Posts

Showing posts from 2017

Filters in ASP NET Core - what are they and how to use them

Filters in ASP NET Core - what are they and how to use themASP NET Core comes with a concept of filters. Filters intercept the stages of the MVC pipeline and allows us to run code before/after their executions. They are meant to be used for cross-cutting concerns; logics which is required accross the whole application, generally not business oriented. One example is authorization where in a Web API, we would use to prevent unauthorized request to execute the code in our controllers. In order to do that we would have a filter at the entrance of the pipeline. In fact, ASP NET Core has predefine stages, the diagram can be found on the documentation https://docs.microsoft.com/en-us/aspnet/core/mvc/controllers/filters. Another example of a cross-cutting concern would be for logging and timing functions. While the concept of filters is easy to understand, the way to implement those aren’t always straight forward, especially when the filter instantiation itself requires simple objects. In or…

Different types of authorization in ASP.NET Core

Different types of authorization in ASP.NET CoreLast week I touched on how we could authenticate users using Resource Owner Password flow with identity server. Authentication is the act of taking the information provided and verifying the “identity” of the user, ensuring that Alice (our beloved example user) is who she “claims” to be.
In the program itself, we take her credentials and verify it and create an identity stating that the user is Alice and has claims A, B and C.Authentication is the first part of the access security, the second part is the authorization. The difference being that for authorization, we know who the user is, what we are verifying is if Alice is allowed to perform what she is trying to perform. The easiest example is the difference between user access and admin access commonly seen in software where users are authenticated but aren’t authorized to perform all the actions available in the system.ASP.NET Core comes with a set of useful tools to perform authoriz…

Resource owner password flow with Identity Server 4 and ASP.NET core

Resource owner password flow with Identity Server 4Few week ago I described how to build a custom Jwt authentication.
Today I will show how we can use Identity server together with Resource owner password flow to authenticate and authorise your client to access your api.This post will be composed by 3 parts:1. Identity server 2. Protect an api 3. Configure a client The full source code is available on my GitHub https://github.com/Kimserey/identity-server-test.1. Identity serverIdentity server is a framework which implements Open ID Connect and OAuth 2.0 protocols.
The purpose of Identity server is to centralize the identity management and at the same time decouple your api(s) from authentication and authorization logic.
Centralizing has many advantages:If you have multiple apis, you can hold your identities in a common placeIf you have multiple apis, it provides single sign on - user only sign in into one client and is automatically sign in in all apis. This works because all clients …

Cost of living in London

Image
Cost of living in LondonIn 2015, I decided to relocate from Singapore to London. At the time I had no idea about the cost of living, the places where I should rent and places where the groceries would be the cheapest. Fast forward to today, March 2017, I moved back from London to Singapore. I stayed around London for more than a year and a half and while I was there, I kept an extremely close look to every in and out from my bank account. I even created an app Expense King to track my expenses coming out from my bank account.Today I would like to share what I wish someone would have shared before I relocated, a post about cost of living in London. This post will be composed by 5 parts:1. Situation 2. Recurring expenses 3. Rent a place 4. Bills 5. Grocery shopping1. SituationMy fiancee and I lived in a one bedroom apartment. The apartment was located at Pontoon Dock on the east of Canary Wharf with access to the DLR (but not the underground). It is about 40min by DLR+underground from B…

Create a responsive navbar with flexbox and boostrap v4

Image
Create a navbar responsive display with flexbox and boostrap v4Last week we saw how to setup vscode to compile sass. Today we will see how we can compile bootstrap sass files together with our own sass and define a grid layout for the collapsed nav in smaller screen using flexbox.FlexboxBootstrap sass media directiveBuild the nav styleWe will be creating the style for the following navbar:1. FlexboxFlexbox allows to control how elements are rendered in a responsive layout.
We can control precisely how the space available is occupied by elements together with the order of appearance.
There’s few settings for it which are applied to the container and the elements within the container.Refer to MDN documentation if you want more explanation https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes.In this tutorial, I will only use the following css properties:For the container:display: flex; flex-flow: row wrap; display:flex is used to specify that …

Setup vscode to work with sass effortlessly

Image
Setup vscode to work with sass effortlesslyWriting sass is very easy with code. Today we will see how we can leverage some NPM packages to compile SASS to CSS, watch file changes and live update the browser for an effortless style development. This post will be composed by 3 parts: 1. Setup vscode task 2. Create a Gulp build script 3. Use live-server for live reload The tasks are from the example of vscode documentation to compile sass https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css.1. Setup vscode taskTo use code tasks, we need to create a tasks.json file under the hidden /.vscode folder.| - .vscode - tasks.json | - style.scss | - index.html The tasks allow us to execute programs by selecting from the search bar CMD + shift + P, Run build task. If a default task is set, it can directly be triggered by CMD + shift + B.As a first example we can start by installing the sass compiler with node-sass.npm install -g node-sass less And create a tas…

How to make a sticky navbar using Bootstrap

Image
How to make a sticky navbar using BootstrapToday I will demonstrate one way to achieve a sticky navbar in Bootstrap v4 using fixedsticky.
This post will be composed by three parts:1. Get the librairies 2. Page without the nav sticking 3. Make the nav stick 1. Get the librairiesAs mentioned in the introduction, we will be using fixedsticky and bootstrap v4.
We start first by getting those via bower:Bootstrap v4bower install bootstrap#v4.0.0-alpha.6 Fixed-stickybower install filament-sticky You should then have it locally in your bower folder.2. Page without the nav stickingWe build a sample page without sticky.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <style> .content { background-color: rgba(0, 0, 255, 0.21); height: 2000px; margin: 1…

More Gimp tips!

Image
More GIMP tips!Every now and then I discover features on Gimp that I didn’t know existed. It is always a good surprise to find a feature which simplify your work. So today I will show four features that I recently discovered:1. Extra view 2. Color palette 3. Floating layer 4. Animated GIF 1. Extra viewGimp allows us to display multiple time the same file with different zoom and positions. This is very useful as we can use as a preview view.
You can open a new view by going View > New View.2. Palette to choose colorsTo choose between colours another easy way is to use Palettes. You can open the palette by adding from Windows > Dockable dialogs > Palette. Once selected, it can be used to set the restrict the colors picker to your own colors. For example if we choose the Gold palette, we will have some shades of brown which can be used to colour objects and make them gold’ish.
We can also create our own palettes and those are saved into Gimp settings.For example here I have crea…

Create a simple form engine with WebSharper.UI.Next in F#

Create a simple form engine with WebSharper.UI.Next in F#WebSharper came out with WebSharper.Forms. It is a terse DSL to build form, I posted a tutorial on it few months ago https://kimsereyblog.blogspot.co.uk/2016/03/create-forms-with-websharperforms.html.
It’s very powerful as the abstraction handles most of the scenarios.
Today I would like to show anothe way to create forms by building a form engine.
This post will be composed by 4 parts:Define the domainImplement the renderersUse it1. Define the domainDefining a model is tricky. It needs to be both flexible enough to handle all needed scenario but it also needs to be simple enough that there aren’t too many options which would make the domain messy. I will give an example later to illustrate this.For a form engine, the domain model is composed by the elements of form and the submission behaviors.Form elementsFor this example we will just implement the input and input area. Implementing the rest of the control will just be a repet…

Post form data to WebSharper sitelet from HTML/JS

Image
Post form data to WebSharper sitelet from HTML/JSWhen building websites, chances are that you will need to gather data from your users.
The most common way to gather data is via a form. But after gathering the data, there are two ways to submit it from the browser to your server:Using a HTML formUsing an Ajax callToday we will see the differences and how we can implement it.1. Submit data using a formBefore hand, I have created a simple server which has a single endpoint accepting a POST.type EndPoint = | [<EndPoint "POST /upload">] Upload let Main = Application.MultiPage (fun ctx -> function Upload -> Content.Text "Received") Next we can create a simple form with one an input and button to submit.<form method="post" action="/upload"> <input name="my-data" type="text" /> <button type="submit">Submit</button> </form> The action is the url to post to.
The method i…

Use Local storage with ListModel with WebSharper.UI.Next in F#

Image
Use JS local storage with ListModel with WebSharper UI.Next in F#Last week I wanted to use the browser local storage to store a list of elements. I wanted to update the resource split project to have the data stored (temporarily) so that it will be easier to add or remove resources. The browser local storage is ideal for this kind of scenario. Turns out WebSharper.UI.Next has the feature built in to persist ListModel so today I will explain how to do it.This post is composed by two parts: 1. Use local storage with ListModel UI.Next 2. Debug values stored in Chrome 1. Use local storage with ListModel in UI.NextI started to browse WebSharper code and found that ListModel exposed a function named CreateWithStorage and that the default implementation was set to be used with local storage (ha! exactly what I wanted). The definition can be found here.So to use the storage we must use CreateWithStorage and Storage.default.CreateWithStorage<'Key, 'T when 'Key : equality> : …

Fix ‘The method or operation is not implemented Visual Studio’ when referencing project in F# solution

Image
Fix ‘The method or operation is not implemented Visual Studio’ when referencing project in F# solutionYesterday, when trying to reference a project within my solution, I had an error from VS with the following message.The problem was that I was referencing another project which was unloaded.
When expanding the list of references, there is a warning sign for problematic references:Most of the time, for me at least, it indicates a mismatch of F# version between the two libraries.
But a mismatch of F# version doesn’t cause the not implemented exception on Visual Studio.
The issue was that the library referenced was unloaded.Once I made sure it was loaded, the sign disappeared and VS allowed me to add a reference.

How to avoid input lost focus with ListModel WebSharper F#

Image
20170202_listmodel_websharper_lostfocus.mdHow to avoid input lost focus with ListModel WebSharper F#Few months ago, I explained how ListModel worked. Today I would like to share a recurring issue that I used to have - lost of focus on input every time the ListModel values change. There’s an easy solution to that which I will demonstrate by first showing the initial code and explaining what is going on, why the focus is lost, then I will explain how we can work around it.This post will be composed by two parts: 1. Why the inputs lose focus? 2. How to prevent it I thought about sharing this when I saw that someone else has had the same issue - http://try.websharper.com/cache/0000Bj.1. Why the inputs lose focus?The code is the following:[<JavaScript>] module Lensing = let aliases = ListModel.Create id [ "Bill"; "Joe" ] let lensIntoAlias aliasKey = aliases.LensInto id (fun a n -> n) aliasKey let Main = div [ …