Roland Weigelt

Die .NET DevGroup Göttingen/Kassel veranstaltet am 21.10.2016 ab 17:30 in Hann. Münden-Laubach ihr 202. Treffen, das als “Mini-DevCon”, also im Prinzip eine Halbtags-Konferenz, konzipiert ist.

Es hat mich sehr gefreut, als ich in meiner Eigenschaft als Mitglied des Sprecherbüros von INETA Deutschland angefragt wurde. Ich habe gerne zugesagt und werde in meinem Vortrag praxisrelevante Grundlagen in den Bereichen Visual- und User Interface-Design sowie User Experience vermitteln.

Das Programm der Veranstaltung sieht aktuell wie folgt aus:

• 17:30 – 17:45 Begrüßung und Keynote (Joachim Bieler)
• 17:45 – 18:30 Industrie 4.0 für zuhause – IoT für Otto Normalentwickler (Martin Roppert)
• 18:45 – 19:45 Design/UI/UX-Grundlagen für Entwickler (Roland Weigelt)
• 19:45 – 21:00 Abendessen und Verlosung
• 21:00 – 21:45 PRISM 6 (Jürgen Goschke)

Die Teilnahme ist kostenlos, um Anmeldung wird gebeten.

The first time I moved my UWP development beyond writing “throwaway code for learning purposes”, I did what I always do when starting a new “real” project: On the “Build” tab of the project properties, I switched the setting “Treat warnings as errors” to “All” and set the checkmark at “XML documentation file”.

Nasty surprise: When compiling the UWP app, the compiler stumbled over missing XML doc comments in code that was generated in the background.

Fortunately, I quickly found a solution on StackOverflow that automatically added a #pragma warning disabled to the generated files using MSBuild. That worked well for me until recently, when I created a new solution configuration that had a name containing spaces. Digging a bit into MSBuild, and with the help of another StackOverflow answer, I was able to figure out the following build target (which I’ll add as an answer to the original StackOverflow question):

<Target Name="PragmaWarningDisablePrefixer" AfterTargets="MarkupCompilePass2">
	<ItemGroup>
		<GeneratedCSFiles Include="**\*.g.cs;**\*.g.i.cs" />
	</ItemGroup>
	<Message Text="CSFiles: @(GeneratedCSFiles->'&quot;%(Identity)&quot;')" />
	<Exec Command="for %%f in (@(GeneratedCSFiles->'&quot;%(Identity)&quot;')) do echo #pragma warning disable &gt; %%f.temp &amp;&amp; type %%f &gt;&gt; %%f.temp &amp;&amp; move /y %%f.temp %%f" />
</Target>

How to use this:

• Unload and edit your “.csproj” file in Visual Studio (or open it in Notepad if Visual Studio is closed)
• Copy-and-paste the task just before the closing </Project> tag
• Save and (re)open in Visual Studio

Yesterday, the UWP Community Toolkit was released, “a new project that enables the developer community to collaborate and contribute new capabilities on top of the SDK.”. The toolkit “includes new capabilities (helper functions, custom controls and app services) that simplify or demonstrate common developer tasks”.

One thing that caught my eye was the support for social media like Twitter and Facebook. I had read the docs at https://dev.twitter.com/ and I had a twitter app configured at https://apps.twitter.com/ some months ago, but I never got around to actually choose a Twitter access library and use it.

But the few lines of sample code in the announcement (how to post a tweet) looked so simple I couldn’t resist trying to perform a Twitter search.

• Follow the “Getting Started” instructions in the article. (I chose the packages Microsoft.Toolkit.Uwp and Microsoft.Toolkit.Uwp.Services)
• Put a button on the form, create a click handler with the following code:

  private async void HandleButtonClick(object sender, RoutedEventArgs e)
  {
  	TwitterService.Instance.Initialize( // change (1) - (3) for your app
  		"(1) ConsumerKey",
  		"(2) ConsumerSecret",
  		"(3) CallbackUri"); 
  	await TwitterService.Instance.LoginAsync();
  	tweets = await TwitterService.Instance.SearchAsync("hello world");
  	foreach (var tweet in tweets)
  	{
  		Debug.WriteLine(tweet.Text);
  	}
  }
  

• And that’s all it is to search Twitter for e.g. “hello world”!

Things to note:

• Even though the API is really easy, it doesn’t mean that you can avoid reading or at least scanning the Twitter documentation altogether – you need to know just enough the get the required information for login.
• Storing the ConsumerKey and ConsumerSecret in an app as plain text doesn’t sound like a good idea – I’ll have to read up on what best practices are in regard to security.

I’m still at the beginning of my journey into the world of Universal Windows Platform (UWP) apps. In this blog post (which will be updated over time) I’ll collect various links to resources I found interesting and/or helpful – maybe they are of use for other people, too.

Basics

• The Windows Dev Center (dev.windows.com) is the starting point for Windows development. Documentation, downloads, samples – it’s here.
• Get started with Windows apps contains everything to, well, get started. I doubt you’ll find a more clear and concise information about how to do it than this page and its sub-pages (in the past, people actually made it their job to extract information out of wordy Microsoft articles).
• Back in the Windows 8.x days, side-loading didn’t sound too attractive. Much has changed in Windows 10 and this article sums it up: Sideload LOB apps in Windows 10
• And things are looking to get even better soon: App Installer! (via Universal Windows App Deployment blog)
• I wanted a code-signing certificate (not only for my future UWP apps), in the end I chose KSoftware who are an official partner of Comodo.

Debugging

• How to trigger suspend, resume, and background events for Windows Store apps in Visual Studio

Resources

General

• Blog: Building Apps for Windows (by the Windows Apps Team)
• Article: The Lifecycle of a UWP App
• Article: The path from a desktop app to a Universal Windows Platform (UWP) app
• Article: Optimizing your XAML app for performance (10 by 10)
• Website: Develop UWP apps – How-to articles for UWP apps on Windows 10 (“Instructions and code examples for all kinds of tasks, such as using geolocation services, transferring data over a network, and porting apps to Windows 10”)

Architecture

• Template 10 is a set of Visual Studio project templates that take care of boilerplate stuff like navigation and suspension
• Visual Studio Extension: Template 10 Template Pack
• Wiki: Documentation
• Video: Getting Started with Template 10 (on Microsoft Virtual Academy)

App Services

App Services are a very interesting concept for UWP applications that are more than just a simple self-contained “app”.

• Create and consume an app service
  
• Convert an app service to run in the same process as its provider
  
• Calling an App Service from a WPF/WinForms Win32 App
• Launch a Universal App from a WPF App contains the important part of how to reference Windows 10 APIs. When copying the XML code snippet in the blog post, leave out the reference to System.Runtime.dll and make sure you replace the typographical quotes (“example”) with plain quotes ("example").
  

App Services in a Network

• Discover remote devices
  
• Launch an app on a remote device
  
• Communicate with a remote app service

Personal Interests

My main motivation to start with UWP apps is to use the graphics and video capabilities that look much more attractive than what WPF has to offer.

Graphics and Animations

• Blog: robmikh blog (“A development blog about all things UWP and Composition”)
• Blog: Mike Taulty (“I do some developer stuff for Microsoft UK”)
• Articles on composition: https://mtaulty.com/category/composition/
• Articles on Win2D: https://mtaulty.com/category/win2d/
• Article: Windows 10 Anniversary Update–Fun with Composition and Video
• Website: Windows UI Dev Labs on github (“the place for getting the latest code samples and demos using Windows.UI.Xaml and Windows.UI.Composition to make beautiful Universal Windows Platform applications”)
• Article: How to prevent screen locks in your UWP apps
• Article: Creating a FluidBanner control using Windows Composition
• Library: CompositionProToolkit on github (“Collection of Helper classes and controls (using Win2d) for Windows.UI.Composition”)

MediaPlayer

• API reference
• Article on Windows Dev Center
• Video Shenanigins (article by Make Taulty)

Troubleshooting

Solutions for issues I ran into:

• How to disable “Missing XML comment” warning for auto generated code in Windows Store app? (StackOverflow)

Text editors and IDEs usually use monospaced, i.e. non-proportional, fonts by default. This may seem like an obvious choice – after all, how else do you line up characters horizontally?

The disadvantage of a monospaced font is that text lines can become relatively wide, because by definition, all characters have to have the same width as the character that requires the most space (the uppercase “W”).

Back in the 80ies and early 90ies, with identifier names like “strnicmp()”, this wasn’t much of an issue. But then libraries grew and identifier names got longer and longer. At the same time, in my IDE the source code editor on one hand and an increasing number of additional panes on the other hand were competing for screen space. In the editor, I usually had a ton of unused whitespace behind short text lines, but when a line contained a slightly longer identifier, it often got clipped.

That was the point when I asked myself how important exact horizontal alignment of characters was to me. Less horizontal scrolling and better readability for long names in return for giving up full control looked like deal good enough to give proportional fonts a try.

The Switch

I don’t quite remember the exact time when I switched; the blog post ”My Transition from Fixed to Proportional Width Fonts for Editing Source Code” is from 2004, years after the fact.

What I do remember, though, is that it was the Verdana font that made the switch final. Verdana is a sans-serif font, except for serifs for the uppercase “I” to make it easily distinguishable from the lowercase “L”.

Here’s a (wildly exaggerated) code example to demonstrate why this is important, first in Arial:

…and here in Verdana:

In Arial’s defense, I must say that I like Arial’s bold text much better than Verdana’s. And, for my personal taste, Verdana is a bit too wide (especially at larger font sizes).

Its cousin Tahoma, on the other hand, is slightly too narrow:

In the end I learned to live with Verdana, but when Segoe UI was introduced along Windows Vista, I switched immediately:

Like Verdana and Tahoma, the bold version of Segoe UI is pretty thick, but I like keywords and class names being shown in bold (even if it’s too heavy).

Noooooo…!

After I upgraded my computer from Windows 7 to Windows 10 (I skipped Windows 8.x), I noticed Segoe UI had changed. The most dramatic change: The uppercase “I” lost its serifs (see: Segoe UI gets a subtle facelift in Windows 8)!

Which means that the code example now looks like a soup of vertical bars:

Searching for Alternatives

With Segoe UI no longer suitable for source code and going back to Verdana not exactly an attractive option, I searched the web for alternatives. So far, I’ve come across the following fonts (in no particular order):

Clear Sans

(Intel, https://01.org/clear-sans)

Clear Sans doesn’t seem to be hinted well enough for rendering at 10pt on a screen at around 96 pixel per inch, at least with ClearType on Windows (I don’t have a Mac for comparison). While it looks rather ugly on my machine, Clear Sans turns out pretty nice at 20pt or when I scale Visual Studio’s editor to 200%, so it may be a good choice for users with a HiDPI display.

Source Sans Pro

(Adobe, https://github.com/adobe-fonts/source-sans-pro)

What I wrote about Clear Sans in regard to hinting is also valid for Source Sans Pro. For my personal taste, though, the difference between the uppercase “I” (without serifs) and the lowercase “L” (with only a small tail at the bottom) is too subtle, regardless of font size.

PT Sans

(ParaType, http://www.paratype.com/public/)

PT Sans Caption has serifs for the uppercase “I” and a tail at the bottom of the lowercase “L”, which is a bit too much in my opinion – and doesn’t look any better at larger sizes.

Input Sans

(Font Bureau, http://input.fontbureau.com)

Input is not a single font, but a whole family of both monospaced and proportional fonts and font variants. Selecting your favorite is easy, using a nice configuration tool (http://input.fontbureau.com/preview).

I played around with the configuration utility for a long time, but I couldn’t get any results that were pleasant to my eyes. At larger font sizes you can see that a lot of thought about maximum readability of individual characters went into the design. But I don’t need a font for labeling the controls of a nuclear power plant, I need a font that doesn’t hurt my reading flow – in that regard, Input Sans just doesn’t work for me.

An Unexpected Discovery: Ebrima

In a typical case of “why didn’t I do that earlier?”, I copied some source code into Microsoft Word and tried all the fonts I had on my computer using the font live preview (selecting all text and moving through the font list with the down arrow key). That’s how I came across Ebrima… and it looked just like the old Segoe UI:

But why is that? And where did it come from? From the Wikipedia entry: “Ebrima is an OpenType font designed to support African writing systems. It [...] is part of the Windows 7 operating system. [...] Its Latin alphabet is based on the Segoe font”.

I have Ebrima on my machine because I did an upgrade installation from Windows 7 to Windows 10 and I can use it because I don’t need the more special Unicode characters. Lucky me!

Where from here?

So for now, I finally have a font for Visual Studio. As I mentioned, the bold text is a bit too heavy, but you can’t always have it all. At some point in the future I surely will have a HiDPI display, then I may give Clear Sans another chance.

What about you? Have you found your “perfect” proportional font yet?

While preparing an upcoming blog post about proportional fonts for programmers, I came across a tweet by Val Head (@vlh), pointing me to programmingfonts.org. The website boasts the slogan “The most complete resource for monospace fonts on the web” and looking at the list of fonts, I’m inclined to believe it.

I browsed the site for a while until finally saw the link “Try them all online right now” which was hidden in plain sight directly in front of me:

The link opens a nice web application that lets you test drive a huge number of fonts, using a text of your choice. The available themes are a matter of personal taste, but this is mainly about getting an idea whether a font looks good before spending more time on it.

Recently I took my first steps into the world of Universal Windows Platform (UWP) apps after many years of WPF. What came a bit as a shock to me was the sheer number of required/recommended tile and icon assets.

Most of the images are versions of the same image, scaled to different sizes. Of course, creating these images is something that can and should be automated, starting from a sufficiently large image.

One way to handle this is via Photoshop Actions, but when looking for a simpler solution I came across the Windows Universal App Image Scaler. This is a Visual Studio extension that adds a context menu entry to the Solution Explorer. You simply right-click an image file, choose “Scale image for Windows Universal app…” and specify the kind of images you want to create. When you press “Ok”, the output will be written to the directory that contains the source image, and that’s it!

You find this nice extension

• in the “Extensions and Updates” dialog inside Visual Studio (via the “Tools” menu) by clicking “Online”, “Visual Studio Gallery” and searching for “app image scaler”,
• on the Visual Studio Gallery website: https://visualstudiogallery.msdn.microsoft.com/824f5375-b0c7-4d79-b9bf-04653876ba53
• or on GitHub: https://github.com/spadapet/universal-image-scaler

Am Mittwoch, 16. März 2016, wird um 12:00 Uhr die Anmeldung zur dotnet Cologne 2016 am 13. Mai in Köln freigeschaltet. Die 400 Tickets für die letztjährige Konferenz waren in weniger als 4 Minuten verkauft, es gilt also pünktlich am Rechner zu sitzen!

Dass diese Community-Konferenz, die Stefan Lange und Melanie Eibl (dotnet Köln/Bonn e.V.), Albert Weinert (.net user group Köln) und ich (Bonn-to-Code.Net) seit 2009 zusammen organisieren, so erfolgreich ist, macht uns schon ein wenig stolz.

Gleichzeitig gilt weiterhin unsere Philosophie, dass die dotnet Cologne eine Konferenz sein soll, wie wir sie selber gerne besuchen würden. Und dazu gehört für uns nicht zuletzt, dass wir am 13. Mai möglichst viele aktive Mitglieder der deutschsprachigen .NET Community treffen möchten.

Damit dies nicht vollständig dem Zufall überlassen bleibt, haben wir uns entschlossen, einen Teil der Karten zu blocken und für Leiter und Stellvertreter von .NET User Groups, MVPs, Betreiber von Community-Foren etc., aber auch für Sprecher früherer dotnet Cologne Konferenzen und unserer User Group Treffen in den letzten 12 Monaten zu reservieren.

Weitere Infos zu dieser Aktion gibt es auf http://dotnet-cologne.de/CommunityTicket.ashx

Also: Man sieht sich am 13. Mai!