Overview of the state of Microsoft Software development ecosystem 2020

EndBird — Mon, 16 Dec 2019 20:05:33 +0000

Intended Audience

This paper is intended for those who are new to the Microsoft software development ecosystem and would like to understand how it operates and develops.

If you were like me you would find reading up Microsoft documentation very confusing. Windows was not taught at my school, and terms like .NET, UWP, WPF, etc.. are foreign to me.

This might not be a problem for you, maybe you just want to build something, have it working, and deploy it to the public. If that is you, there are lots of tutorials in the Microsoft docs to teach you how to use Visual Studio (their IDE) and build an app.

But if you are like me and want to understand how all the pieces connect together, how they work together, in order to see the state of Microsoft software development is, read on.

From my research on the Internet, I found the first piece of information one should read (or watch) is: What is .NET

Here, it tells us that, as a software developer, .NET is a suite of languages and class libraries. There are three implementations: .NET Core, .NET Framework, and Xamarin. What it does not tell us is that each implementation also contains runtimes components for running the apps built using respective .NET implementations.

If you are wondering why Microsoft has three implementations instead of one, it is because in the past Microsoft only had .NET Framework, which only worked for Windows apps and was closed source. Then the mobile revolution came along and Xamarin was made. Xamarin was an attempt at open-source, cross-platform, development for mobile applications for Windows developers. .NET Core is a new and improved version of Framework, and is also open-source cross-platform development.

For more intelligence on .net core read: https://devblogs.microsoft.com/dotnet/net-core-is-the-future-of-net/

However, as a developer in 2020 for Windows, you do not have to interact with these .NET frameworks directly. You would either use Universal Windows Platform (UWP) or ASP.NET, or ASP.NET Core. UWP enables you to build apps that work across all Windows 10 platform, whether it is mobile, laptop, HoloLens, etc.. ASP.NET and ASP.NET Core enables you to build web applications, with both a front end and a back end. UWP is actually separate from .NET but also uses .NET Core libraries along with its own libraries (see: https://docs.microsoft.com/en-us/archive/msdn-magazine/2015/windows-10-special-issue/microsoft-net-net-and-universal-windows-platform-development). ASP.NET uses .NET Framework libraries along with its own libraries. ASP.NET Core uses the .NET Core libraries along with its own libraries.

(There is also WPF, Windows Forms, and Win32 you can use for Windows desktop apps but UWP seems like their leading edge. See: https://docs.microsoft.com/en-us/windows/apps/desktop/choose-your-platform)

Going forward, Microsoft intends on building a .NET 5, which will be the successor of .NET Frameworks, .NET Core, and Xamarin. (Yes, one framework will be the successor, instead of three). .NET 5 will support all the functionalities that .NET Frameworks, .NET Core, and Xamarin have. See https://devblogs.microsoft.com/dotnet/introducing-net-5/ for more details.

Hopefully, this means that the Microsoft ecosystem will be much easier to learn about and develop.

I also hope that you, reader, now has a good overview of the state of Microsoft software development ecosystem in 2020.

CSS: How to display information with .... separating two items

EndBird — Fri, 06 Dec 2019 20:35:26 +0000

Intended Audience

This tutorial is intended for people who have knowledge of HTML and CSS, and who are looking to learn more at an abstract level on how to improve their UI.

Supposing one wanted to display information summarising the details of an upcoming car racing event. One might want it to look like this: (let's call this visual style "notebook")

This style of displaying information allows for the readability of information and does not clutter, while at the same time make every row seem connected together.

To explain what I mean, I will compare it with a table.

If one were to create a table to display this information, it might look like this:

In the table, the alternation between grey and white delineates differences in space between the odd row and the even row. This helps the viewer follow a row without ending up in another row. I can look at row Date and end up at the date instead of the subject. However, this same strength is a weakness of this style. It requires separating spaces between each row, which suggests that each row's information is separate from each other. Perhaps you do not want this.

The same problem exists in each row. In each of the rows, the row's subject is demarcated from its object by a line drawn in between. This helps with readability but also creates the feeling of a strict separation between the subject and the object. Perhaps you do not want this.

The boxing up of spaces in a table can also create a feeling of clutter, as boxes take up space.

To address these weaknesses, one can make a design like the first visual I presented. Every row exists in the same space, as there are no differences in shading between each row. To address the problem of reading each row, trailing "....." is placed at the end of the subject leading up to the object. The "..." leads the eyes so that it knows where to end up. Thus, we have a picture where all the rows seem connected together, and the readability issue is solved by trailing "...".

The trailing "..." also resolves the issue of strict demarcation. If you want to create each row so that the subject and object seem connected, "..." gives this more than a straight line separating the two cells. It is kind of like when you're writing a sentence: "I would like ... chocolate ice cream!".

Without any boxing, there is less clutter, hence giving your overall design a sense of more space and openness.

Now that we have explained our understanding of the design, let's start coding!

Before we get to the smart, but harder, solution, let's discuss the easy and not smart solution. Because this "notebook" style is not premade in CSS, it is tempting to simply just take the easy solution of creating a table and for each table row, write, for example, <td> <div>Birthdate..........1966-05-07</div></td>

This solution has a few problems: a) it is much harder to line up every row so that the beginning and end of each row is the same. b) By putting the subject and the object in the same <td>, it fails to capture the intuition that the object and the subject are different. (Remember the purpose of a <td>). c) Manually putting "..." as the text does not capture the intuition that the "..." serves as a way to organise information, not text the way "Birthdate" is text.

Here is the better solution:

Here is the CSS for it:

A) By putting the subject in td col1 and object in td col2, it captures the intuition that subject and object are different.

B) By using the <td> bottom border to create the "...", it captures the intuition that the "..." is a design pattern intended to organise information.

As a natural consequence of capturing A) and B), it is now much easier to make the beginning and end of every row positionally the same.

Proof

Every row is of equal width=>The bottom border width is equal on every row => The "..." is of equal width on every row. We set col2 text-align to right, and because it is in its own td, it does not disrupt the subject (remember we want subject to be aligned to the left).

Hence, by setting the text-align separately for subject and object, the text on the left begins the same positionally and the text on the right ends the same positionally.

And since the "...." can never be longer than the width of the row, it implies that every row must begin and end the same positionally.

With only A) and B) though, we only have this:

But we obviously want the texts to be right on the line with the "...".

To make this happen, we use a dirty solution. We simply manually change the position of the texts relative to its original position, "eye-balling" until the text looks right on the line with the "...". It would be better if there was a way to do it through the table designs features (ie through CSS that belongs to <table>). However, this cheating I think is okay because we can interpret the property of being right on the line as part of the information itself instead of as part of the way information is being organised.

Thus we make this css code:

This method only works if one were to put another element inside of the td element to contain the text. Otherwise, we would be moving the whole row! Also, we do not want the "..." underneath the text, but beside it. The div element within the td goes "on top" of the td border and hides it, making it seem like the "..." starts after the end of the text instead of underneath it.

Voila! We are done. I hope you enjoyed this read. It is quite a lot to digest so feel free to reread it.

Forem: EndBird

Overview of the state of Microsoft Software development ecosystem 2020

Intended Audience

CSS: How to display information with .... separating two items

Intended Audience

Now that we have explained our understanding of the design, let's start coding!

Proof