Learning ASP.NET Core in 12 hours

ASP.NET Core is the new open source version of ASP.NET based on .NET Core which is completely open source. Smart move from Microsoft…

I start by installing the .NET Core SDK from https://www.microsoft.com/net/core#windows as I already have Visual Studio 2015 Community Edition installed. The “hello world” goes like this:

    mkdir hwapp
    cd hwapp
    dotnet new
    dotnet restore
    dotnet run

As installation takes forever¬†(as expected), I start reading the introduction at https://docs.asp.net/en/latest/intro.html which gives a good overview over what ASP.NET Core is: Louse coupled Services, middleware, server, ioc, …

Lets implement the first web app from console as described here: https://docs.asp.net/en/latest/getting-started.html

Then dive into the tutorial on how to create a ASP.NET Core app using Visual Studio: https://docs.asp.net/en/latest/tutorials/first-mvc-app/start-mvc.html

In the next step, the MVC pattern and the controller is described. The controller serves as a HTTP endpoint and each method returns a text or view:
https://docs.asp.net/en/latest/tutorials/first-mvc-app/adding-controller.html

Ohh and there is a video tutorial to Asp.net MCV. About 8 hours long with much information:

Introduction to ASP.NET MVC: (01) Basics of MVC and the Moving Parts
https://channel9.msdn.com/series/Introduction-to-ASP-NET-MVC/01

Introduction to ASP.NET MVC: (02) Creating and Configuring Models
https://channel9.msdn.com/series/Introduction-to-ASP-NET-MVC/02

Introduction to ASP.NET MVC: (03) The Power of Visual Studio
https://channel9.msdn.com/series/Introduction-to-ASP-NET-MVC/03

Introduction to ASP.NET MVC: (04) Deep Dive into Controllers
https://channel9.msdn.com/series/Introduction-to-ASP-NET-MVC/04

Introduction to ASP.NET MVC: (05) Deep Dive into Views
https://channel9.msdn.com/series/Introduction-to-ASP-NET-MVC/05

Introduction to ASP.NET MVC: (06) Introduction to Bootstrap
https://channel9.msdn.com/series/Introduction-to-ASP-NET-MVC/06

Introduction to ASP.NET MVC: (07) Introduction to Authentication in MVC
https://channel9.msdn.com/series/Introduction-to-ASP-NET-MVC/07

Introduction to ASP.NET MVC: (08) Supplement Your Knowledge
https://channel9.msdn.com/series/Introduction-to-ASP-NET-MVC/08

If you need to re-create your DB from model, follow http://stackoverflow.com/questions/20304058/how-to-re-create-database-for-entity-framework

Next is the introduction on what’s new in ASP.NET Core:
https://channel9.msdn.com/Events/Visual-Studio/Connect-event-2015/100

ASP.NET Core Deep Dive into MVC from build conference:
https://channel9.msdn.com/Events/Build/2016/B812

Learning Ractive.js in 30 minutes

Heard of Ractive.js as a great js library. Let’s start with the introduction on their site:

“Ractive.js is a template-driven UI library, but unlike other tools that generate inert HTML, it transforms your templates into blueprints for apps that are interactive by default.” — http://www.ractivejs.org/

It’s a library that allows UI templating and data binding. So its

Data + Template = HTML/DOM.

Let’s now dive into the tutorial

Now I learned that Ractive combines HTML templates with data to output a DOM. There are variables so that a template can display the values from the data.

Template:

    <p>{{greeting}} {{name}}</p>

Code:

    var ractive = new Ractive({
        el: output,
        template: template,
        data: { greeting: 'Hello', name: 'world' }
    });

    ractive.set("greeting", "Yo");

That looks promising. Also variables can be used to style stuff like this:

    <p style='color: {{color}}; font-size: {{size}}em; font-family: {{font}};'>
        {{greeting}} {{name}}!
    </p>

As I like what I see, I need to invest more time in Ractive now… Interesting features are

  • Expressions in templates, e.g. calculate total sum from price and quantity
  • Formatting of text using JS that can be references from template (ToStringConverter)
  • Animation of data values (animate instead of set)
  • Proxy events with more convenient syntax than DOM events

Admin: Internet Explorer not starting on Windows 10 with EMET 5.5

Internet Explorer 11 does not start on Windows 10 with EMET 5.5 default settings installed. There was the following entry in the Windows Event Viewer:

    Faulting application name: iexplore.exe, version: 11.0.10586.20, time stamp: 0x56542a5e
    Faulting module name: ntdll.dll, version: 10.0.10586.103, time stamp: 0x56a8483f
    Exception code: 0xc0000409
    Fault offset: 0x00000000000a9b40
    Faulting process id: 0x31e8
    Faulting application start time: 0x01d16fb151f8b677
    Faulting application path: C:\Program Files\Internet Explorer\iexplore.exe
    Faulting module path: C:\WINDOWS\SYSTEM32\ntdll.dll
    Report Id: 93111a31-ea1b-4010-8343-8021f6c9c10e
    Faulting package full name:
    Faulting package-relative application ID:

2016-02-25 10_53_11-Event Viewer

I had to disable the following settings im EMET App Settings:

  • EAF – Export Addess Table Access Filtering
  • EAF+ – Export Addess Table Access Filtering
 2016_02_25_10_56_04_Jump_List_for_Visual_Studio_2015
Afterwards IE started fine.

Tutorial: Creating icons with Inkscape

Icons are used everywhere in product development. Native apps, desktop apps, even websites need an icon. And Inkscape is a great tool for creating icons as it is a vector graphic software that can export PNGs. And the best: It comes for free without any costs.

First you need to start Inkscape and setup the document. Then you start with the actual design process. After that the resulting icon can be exported from Inkscape as a PNG with transparent background.

Document Setup

  1. Open Document Properties (File > Document Properties…)
  2. Set document units to pixel and Width and Height to 32 pixels
  3. Zoom to fit page window (Zoom Tool, Zoom to fit page window)
  4. Enable page grid (View > Page Grid)
  5. Enable icon preview (View > Icon Preview…)
Step0_DocumentProperties

1. Open document properties

Step1_UnitsInPixelAndWidthHeight

2. Set units, width and height

Step2_Zoom

3. Zoom to fit page in window

Step3_PageGrid

4. Enable Page Grid

Step4_IconPreview
5. Enable Icon Preview

Creating the icon

The icon can be best designed when built from basic building blocks like rectangles, arcs and lines. I always try to build everything without outline as the outline is not scaled with the whole icon is. It is also a good idea to keep the elements on the pixel grid for better resizing results. Using the Icon Preview you can see how the icon will look like when resized to different sizes.

B_Step0_TryElementsOnPixelGrid

Try to keep elements on pixel grid x, y and with, height.

B_Step1_IconPreview

Icon Preview

 

Export Icon

To export the final PNG icon from the Inkscape SVG, choose export PNG from the file menu. In the export pane, first set the X and Y both to zero 0 and enter a with and height of 32 pixels. The final image will should have 90 DPI. Enter a file path and click export.

C_Step0_ExportPNG

Open the export PNG pane

 

C_Step0_ExportPNG2

Setup and start the export PNG

You can also export the PNG from Inkscape via command line which allows scripting using a batch file:

    Inkscape.exe
        --export-png=Icon.png
        --export-area=0:0:32:32
        --export-dpi=90
        Icon.svg

 

Using the DPI you can also scale the image. For example when exporting with 180 DPI the 32×32 icon will become 64×64 pixels in size.

The parameters for exporting are described here: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/CommandLine-Export.html