30 minutes learning Ractive.js

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

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

Prevent WPF Window from activating

To prevent a WPF Window from activating, I ended up hooking up the WndProc in code-behind:

protected override void OnSourceInitialized(EventArgs e)
{
	base.OnSourceInitialized(e);
	var source = PresentationSource.FromVisual(this) as HwndSource;
	source.AddHook(WndProc);
}

private const int WM_MOUSEACTIVATE = 0x0021;
private const int MA_NOACTIVATE = 0x0003;

private IntPtr WndProc(IntPtr hwnd, int msg, IntPtr wParam, IntPtr lParam, ref bool handled)
{
	if (msg == WM_MOUSEACTIVATE)
	{
		handled = true;
		return (IntPtr)MA_NOACTIVATE;
	}
	else
	{
		return IntPtr.Zero;
	}
}

References:

Debugging SharePoint WebDAV single-sign-on NTLM

We have a SharePoint site that we access through WebDAV from our .NET software on the local network. This works transparent by accessing an UNC path and gets dispatched to the Windows Service WebClient.

Requirements are that the access from our software should work automatically without asking the user for credentials. We’re using Windows 2012 R2 Server, AD DS, SharePoint 2013 on-premise with NTLM authentication. And there’s a ton of things that can go wrong…

Finally I came up with the following trouble-shooting guide for SharePoint WebDAV NTLM:

  1. Service WebClient must start at boot time. For that the registry key HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Start must be set to 2.
  2. Server name must be added to the AuthForwardServerList on the client machine if server name contains periods (.). This forces the WebClient to authenticate at the server even if it thinks it’s an internet server. See https://support.microsoft.com/en-us/kb/943280 for details.
  3. Path and server must be listed under trusted sites in the Internet Options on the client machine. This forces the Internet Explorer to authenticate at the server.
  4. User requires all access permissions on the SharePoint server to read/write the library files.
  5. If 1. to 5. does not help, sniff the HTTP traffic using WireShark. The access pattern should look like in the following screenshot.

HTTP_access_pattern_SharePoint_WebDAV_NTLM_authentication

Following my suggested readings on the topic, starting with the Microsoft support database about WebDAV:

  • Prompt for Credentials When Accessing FQDN Sites From a Windows Vista or Windows 7 Computer (“AuthForwardServerList”) https://support.microsoft.com/en-us/kb/943280
  • You cannot access a WebDAV Web folder from a Windows-based client computer (“Too many files in WebDAV”) https://support.microsoft.com/en-us/kb/912152
  • Some files under a WebDAV folder are not listed in Windows 7 (“Missing files”) https://support.microsoft.com/en-us/kb/2555258
  • You cannot open a trusted WebDAV folder by using the SharePoint Explorer View feature in Windows Vista or in Windows Server 2008 (“Autologin not configured”)  https://support.microsoft.com/en-us/kb/2577797
  • “Access denied” error message when you try to access files in a WebDAV shared folder from a computer that is running Windows 7 or Windows Server 2008 R2 (“Server uses form-based authentication”) https://support.microsoft.com/en-us/kb/2563214
  • You are unexpectedly prompted to enter your credentials when you try to access a WebDAV resource in a corporate network by using a DirectAccess connection in Windows 7 or in Windows Server 2008 R2 (“Unified Access Gateway, DirectAccess”) https://support.microsoft.com/en-us/kb/2288297
  • You cannot access a WebDAV share by using the Explorer View feature in Internet Explorer on a Windows 7-based or Windows Server 2008 R2-based computer https://support.microsoft.com/en-us/kb/2615128
  • Error message when you access a WebDAV resource in Windows Server 2008 R2 or in Windows 7: “The folder you entered does not appear to be valid”
    https://support.microsoft.com/en-us/kb/2468498
  • You experience a long delay when you try to access files on a WebDAV site for the first time or access Office files or access Office files in Windows Vista or in Windows Server 2003
    https://support.microsoft.com/en-us/kb/945435
  • On a Windows Vista-based computer, you cannot access certain directories on a Web Distributed Authoring and Versioning (WebDAV) server https://support.microsoft.com/en-us/kb/942392
  • FIX: Memory leak in the W3wp.exe process for a WebDAV website when many WebDAV clients upload files, download files, or access file directories in WebDAV 7.5   https://support.microsoft.com/en-us/kb/2503820

Suggested readings about HTTP, WebDAV, NTLM and SharePoint:

Windows 10 Developer Machine

At the time of writing, this is the list of software I install on a developer machine to build our software in .NET on Windows 10:

  1. OS: Windows 10 Enterprise EN 64 bit. Install all windows updates
  2. Enable OS Features: .NET 3.5, .NET 4.5, IIS, Hyper-V, Encrypt disk with BitLocker!
  3. Browser: Your choice of Firefox, Chrome or Opera
  4. Security: Emet 5.2
  5. Office: PowerPoint, Excel, Word 2007 32 bit. Leave out Outlook! PowerPoint, Excel, Word 2010 32 bit. Leave out Outlook! Office 2013 32 bit.
  6. SQL Server 2014: During prerequisites in installer, make your local user an administrator. Install Database Engine Services and Management Tools
  7. VS 2015 Community
  8. Utilities: Notepad++, 7zip, Paint .NET, Tortoise HG, VisualHG, True Crypt 7.1a, Azure SDK for .NET, Diffmerge, Greenshot, CloudBerry Explorer for Microsoft Azure Blob Storage

The great thing about Visual Studio 2015 Community is that ist is full featured. I did not miss anything from the enterprise yet!