Increasing font size in Windows Command prompt on High DPI Displays

Maybe this is an obvious settings change but somehow I missed it and struggled with a hard to read command prompt for nearly a year on my Lenovo Yoga 2 Pro.

With the out-of-the box settings, the text in the Windows command prompt is too small to read on high dpi displays.

You can access the font settings by right clicking the command prompt window bar and selecting Properties. By default, the font selected is Raster Fonts, which gives you very limited options for font sizes.

Today, I noticed that if you choose Lucidia Console or Consolas you will be given more useful options for font sizes. I set mine to Lucidia Console and a font size of 24. I now have a readable command prompt which makes me a happier dev.

Here is a before and after:

Rediscovering Software Aging

In the software industry, we have a tendency to reinvent the same concept and give it a new name. We do this over and over again.

Some of these reinventions are hotly debated, as is the case with the recent controversy surrounding Micro Services and whether or not is a re-branding of  Services Oriented Architecture (SOA).

Other concepts are a rediscovery of ideas so old that many might not realize that these ideas were originally described decades ago.

One recent example of this is that I have noticed people describing a concept that was originally described as Software Aging by David Parnas in 1994.

Who is David Parnas?

There’s a good chance that you may not have heard of David Parnas, but he is a very influential researcher in the field of software engineering.

Parnas originally proposed concepts such as modularization and information hiding/encapsulation. Today, we rely on encapsulation in our software design every day. Surprisingly, in the early 1970’s these ideas were considered very controversial. In fact, the famous book Mythical Man Month by Fredrik P. Brooks had a chapter devoted to arguing against Parnas’ ideas. In the 20 year anniversary of Mythical Man Month, Brooks included a new article titled “Parnas was right and I was wrong about Information Hiding”.

If you are interested in reading some of David Parnas’s most influential articles, you can find them here:

On the criteria to be used in decomposing systems into modules (1972)

On the design and development of program families (1976)

Software Aging (1994)

What is Software Aging?

To quote the abstract of the original article:

Programs, like people, get old. We can‘t prevent aging, but we can understand its causes, take steps to limits its effects, temporarily reverse some of the damage it has caused, and prepare for the day when the software is no longer viable. A sign that the Software Engineering profession has matured will be that we lose our preoccupation with the first release
and focus on the long term health of our products.

As I mentioned earlier, the concept that software ages or deteriorates over time is something that I hear people try to describe from time to time using various analogies. Most recently, I saw this tweet from Jessica Kerr:

Jessica’s analogy is good, and for me it served as a reminder to re-read the original Software Aging article as well as the abbreviated PowerPoint slides.

Parnas describes 2 types of aging:

The first is caused by the failure of the product’s owners to modify it to meet changing needs; the second is the result of the changes that are made.

He goes on to describe in great detail the reasons why this happens, the costs associated with software aging, and what we can do to minimize those costs.

One of the big take-away for me is that when designing a system, we need to think past the first release to when the software is old.
Overall, it is a great read and something I would recommend to anyone who is building software for a living.

Introducing Entity Framework Seeder

In a previous blog post, we discussed a fairly straight forward mechanism for seeding an Entity Framework database from a CSV file using the CsvHelper package.

Since then, I have created a package that simplifies this process even further.

Install-Package EntityFramework.Seeder.EF6

Seeding Simple Entities

Assume we are working with a very a very simple lookup entity like a  Country:

public class Country
{
    public int Id { get; set; }
    public string Code { get; set; }
    public string Name { get; set; }
}

 

Create a CSV file with a Code and Name column. We do not need an ID column because the ID will be auto-generated by the database.

Code,Name
CA,Canada
USA,United States
etc...

 

Include the CSV file as an embedded resource in your C# project. In your seed method call the SeedFromResource extension method on the Countries DbSet, specifying the name of the embedded resource and the property that uniquely identifies a Country. The unique property is required to ensure that the same Country is not added to the database a second time if the Country already exists in the database.

context.Countries.SeedFromResource("MyProject.countries.csv", c => c.Code);

Seeding Entities with Relationships

Let’s extend the model to include the concept of Provinces / States.

public class Country
{
    public int Id { get; set; }
    public string Code { get; set; }
    public string Name { get; set; }
    public virtual IList<ProvinceState> ProvinceStates { get; set; }
}

public class ProvinceState
{
    public int Id { get; set; }
    public string Code { get; set; }
    public string Name { get; set; }

    public virtual Country Country { get; set; }
}

 

Now when we are loading Provinces / States we need to connect them with correct Country. To do this, define a CSV file with a Code and Name column and an additional CountryCode column. The CountryCode column will be used to find the correct Country for the Province / State.

CountryCode,Code,Name
CA,SK,Saskatchewan
CA,AB,Alberta
US,AZ,Arizona
US,AR,Arkansas
US,CA,California
etc...

 

When Seeding the provinces, specify an additional CsvColumnMapping parameter. This parameter is used to tell Entity Framework Seeder how to find the correct Country based on the CountryCode column.

context.Countries.SeedFromResource("MyProject.countries.csv", c => c.Code);
context.SaveChanges();
context.ProvinceStates.SeedFromResource("MyProject.provincestates.csv", p => p.Code,
        new CsvColumnMapping<ProvinceState>("CountryCode", (state, countryCode) =>
            {
                state.Country = context.Countries.Single(c => c.Code == countryCode);
            })
         );   

 

Provide Feedback / Contribute

You can find Entity Framework Seeder on GitHub and on Nuget.


      
    

CSS Validation with Visual Studio Web Essentials

_This is a cross post of an _article over on the Canadian Developer Connection.

I like when my IDE tells me I’m doing something wrong. I find it mush less embarrassing than when a co-worker or customer tells me I’m doing something wrong. That’s why I love Visual Studio and the Web Essentials extension. Web Essentials has some great CSS Validation features that can help to point out common mistakes. These features also apply to LESS.

There are a number of useful validation rules and best practices that Web Essentials will check. In this post, we will explore those that I found particularly useful and taught me a little more about CSS.

Vendor Prefixes

Vendor prefixes are used by browser vendors to add new CSS features that may not yet been finalized in the official CSS specs. Each browser has it’s own prefix for CSS properties. Chrome and Safari use –webkit, Firefox uses –moz and Internet Explorer uses  -ms.

For example, if you want to use CSS Column layouts, you will need to specify vendor prefixes as follows:

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;

Unless you follow the CSS specs and individual browser implementations closely, it can be very difficult to know when you need to use vendor prefixes. This is where Web Essentials can help.  If I specify the a column-count property without the required browser prefixes, it will be flagged as a warning. Web Essentials shows warnings by underlining items in the CSS editor and by listing them in the Error List (View –> Error List).

When I select the Add missing vendor specifics smart tag, Web Essentials will add the required prefixes for me.

Now, the CSS specs and browser implementations are always changing. While the –moz and –webkit prefixes are required today, they may not be required tomorrow. A good example of this is border-radius. In the past, vendor prefixes were required to support border-radius. Today, border-radius is officially part of the CSS specs and is supported by all major browsers. Web Essentials will point out that these vendor specifics are not longer necessary.

For Web Essentials to warn you of deprecated vendor specifics, you may need to set the Disallow unrecognized vendor-specifics setting to True in the Web Essentials settings. You can find Web Essentials settings under Tools –> Options. In the options dialog, select Web Essentials –> CSS.

Choosing your Browsers

Maybe your website is deployed internally and you have no need to support a particular browser. You can tell Web Essentials what browsers you are targeting by right clicking in any CSS or LESS file and selecting Web Essentials –> Select Browsers.

In this case, I un-checked FireFox. When I click Ok, Web Essentials adds a file ‘WE-browsers.xml’ to my solution. If you include this file in source control, the settings will be shared across all developers on your team.

Now, when I ask Web Essentials to add missing vendor specifics, the –moz prefix is not included.

Duplicate Properties and Selectors

As a CSS file grows over time, it can be common for a developer to accidently define the same selector more than once in a CSS file. Web Essentials will scan a the file and warn you if this happens. It will also check to make sure that you have not accidently defined the same property more than once within a selector.

Summary

We only scratched the surface of the validation rules that are available in Web Essentials. If you are interested in a complete list, you can read more on the Web Essentials site.

If you are interested in the implementation details, you can view the source code on GitHub. Remember, Web Essentials is an open source project, so you can contribute too!

The Breakneck Speed of Open Source in .NET

I wanted to share my first real experience with a large open source project in .NET.

I recently wrote an article about moving from CSS to LESS with Visual Studio Web Essentials. While writing the post, I noticed that the Extract to File feature could be improved. Web Essentials did extract the selected text to a new file, but it did not automatically import the new file into the current file.

Since Web Essentials is an open source project (you can find it on GitHub), I decided this would be a good opportunity for me to try contribute to the project. I started by logging an issue describing the behavior I had expected.

Now, this is where I was surprised. My intention had been to submit a pull request resolving the issue myself. I never had a chance because the issue was resolved within an hour!

Immediately after I submitted the issue, 3 people started to discuss it: Adeel Mujahid, Peter Spada and Mads Kristensen. Shortly after than, the code was merged in to the master branch.

The speed of all this shocked me and I think this shows the benefits of open source for Microsoft. I am certain that I would not have received this kind of quick response if the project was a closed-source Microsoft project.
Thank you Adeel, Peter and Mads for your contributions.

Refactoring your CSS with LESS in Visual Studio Web Essentials

_This is a cross-post of an _article over on the Canadian Developer Connection.

I recently took on the somewhat daunting task of giving a legacy ASP.NET application a major facelift. At first, I thought this would be an easy task. All I need to do is update the CSS, right?

In reality, this was an application with 8 years of history and at least 10 different CSS files that had all evolved separately.

It was at this point that I decided some CSS refactoring was required in order to successfully pull off this facelift.

Enter LESS

I remembered attending a conference session about LESS and I thought it might help to simplify my CSS.

LESS is an extension to CSS that adds some features that can help make your CSS files a little easier to manage. Typically, LESS is compiled to CSS and the browser doesn’t even know that LESS was used in the background. No browser extensions or client side libraries are needed to use LESS.

One of the most basic LESS features is variables, which allow you to control commonly used values in a single location. For me, this was a great starting point. Since I knew I would be spending some time tweaking the color scheme for the application, it would be great if I could define all my colors in one place and reference those colors in the various CSS files in my application.

Getting started with LESS in Visual Studio

If you have the Web Essentials extension installed (and you should), getting started with LESS is extremely easy. First, rename your .css files to .less. Next, open each .less file and click Save. Web Essentials will create a .css and a .min.css file nested below the new .less file. Any time you make a change to your LESS file, Web Essentials will regenerate the .css and .min.css files.

You will also notice that when you open the .less file the source is split vertically.

The code on the left is your LESS code. The code on the right is a preview of the resulting CSS code that Web Essential will generate for you. Since we have not made use of any of the LESS features, the code on the left should be the same as the code on the right.

Defining Color Variables

You can define variables using the syntax @variable-name: variableValue;

Start by adding a variable @primary-color: at the top of your main LESS file. If you start to type a hex color be adding #, a Web Essentials popup will appear listing all the colors found in this file.

Select the color that represents your primary color. Now replace all other occurrences of that color with @primary-color.

When Web Essentials compiles the .less file to .css, @primary-color will be replaced with the value assigned to that variable in the .less file.

Now repeat this process with all the colors in your less file. Eventually, you should end up with a concise theme defined at the top of the file.

If you want to make changes to your color theme, simply change these color variables and the changes will auto-magically appear throughout the resulting CSS file.

Adding Functions

We can take this a step further and make use of LESS functions. Instead of defining 4 different shades of green for our various shades of primary colors, we can use a function to programmatically lighten the primary color as follows:

Now this LESS

compiles to this CSS:

Now, If you want to change your primary color from green to blue, you can change the single @primary-color variable and all the various shades of green will change to shades of blue.

Extracting a file

If like me, your CSS was split across numerous files, you can also extract your color variables into a separate LESS file and reference those colors from other files.

To extract the colors to a separate file, select the lines containing all the color variables, right click and select Web Essentials –> Extract to file. Name the file colors.less.

In the original less file, add _import “colors.less”; _to the top of the file.

Next, import the colors.less file into all your other LESS files and you will be able to reference the color variables from all your LESS files.

Now, you have a single place to change the colors everywhere in your application.

Web Essentials Settings

Web Essentials has some settings for how it supports LESS. You can access Web Essentials settings by selecting Tools –> Options from the Visual Studio menu, then selecting Web Essentials –> LESS.

You can choose to compile to CSS on build instead of on save. You can also choose to hide the preview pane.

Summary

We have really only scratched the surface of what LESS can do for you. For me, it was a huge help when trying to apply some more modern styling to a somewhat dated web application.

Visit the LESS website to learn more about other features that can help you. I found Variables, Mixins, various built in Functions to be very useful.