UWP: Dynamic UI 1/2

If you are new to C#/UWP programming then one of the furthest things that may have crossed your mind is a UI that is dynamic and fluid based on the screen size or the device form factor your application is running on. However this concept is very important and is super easy to implement. So I thought I might do a little write up about this and help some people out. I know I may not have all the information presented here but I would like this to be a starting point that others can build on and hopefully this post is useful to some.

When I first started working on developing UWP applications I tried to have the core functionality working for a desktop PC, i.e. anything from a 12” screen sized device and up; and I did not really consider other form factors like mobile devices or the HoloLens. But the more I work on UWP applications and how simple it is to implement this functionality I ask myself, why not consider it up front? Microsoft actually has some really useful information and even provides a worthwhile example, see here. Plus there are numerous StackOverflow questions with answers and blogs/articles that discuss this exact topic. So now when I work on any UWP application I consider what UI elements need to be placed where for the various form factors and screen sizes.

If you use the link provided above then it will already place you to the correct spot in the article that outlines how to modify the UI layout based on screen sizes/form factors. The method to have your UI change based on your form factor or screen size I will be discussing is the use of Setters, StateTriggers, and AdaptiveTriggers.

Setters, StateTriggers and AdaptiveTriggers

Some of the advantages of using the new Setters designed for Windows 10 over the Storyboards that you would have had to previously use are:

  1. No more GoToState method call in your code: there is no C# code that needs to be written when using the new Setters; your application will dynamically change layouts when the state condition is met.
  2. Cleaner XAML Code: syntactically the XAML for using the Setters is cleaner and easier to read. The Storyboard objects could sometimes get very complex and large I found.
  3. No empty DefaultState: the properties in your XAML outside the Setters appear as your default properties and the Setter values will not be triggered until the state condition is met. You do not need to define an empty DefaultState.

Using the Setters, StateTriggers, and AdaptiveTriggers are extremely easy as well. The Microsoft article provides a solid example but I am going to provide two more for reference. In the first example I will showcase the change in font size when the screen changes size, and the second example will showcase rearranging of TextBlock objects when changing screen sizes and on a small form factor device like a mobile.

Example 1: TextBlock Font Size Change

This was actually one of my very first attempts to have the UI dynamically change with a changing screen size and form factor. Below is the XAML code that I wrote to get the font size to change for a TextBlock object that is displayed to the user; some of the unnecessary XAML code has been omitted.

<Page>
  <ScrollViewer>
    <VisualStateManager.VisualStateGroup>
      <VisualStateGroup>
        <VisualState>
          <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="720"/>
          </VisualState.StateTriggers>
          <VisualState.Setters>
            <Setter Target="TitleTextBlock.FontSize" Value="24"/>
          <VisualState.Setters>        
        <VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroup>
  </ScrollViewer>
  <Grid>
    ...
    <TextBlock Name="TitleTextBlock" Text="Bill" FontSize="12"/>
    ...
  </Grid>
</Page>

As you can see the amount of XAML that needs to actually be written is fairly minimal. How does the StateTrigger actually work? The AdaptiveTrigger object defined specifies that if the screen size is more than 720 pixels (that is the state condition) then the TextBlock object will have the font size set to 24; however if the screen size is less than 720 pixels the TextBlock object will have the font size set to 12. This can be seen working below (using the exact XAML code above).

DynamicUIFontSizeChange
Example 1: Dynamic UI TextBlock Font Size Change

My next example will be in a follow up blog post, so stay tuned for another post real soon about Dynamic UI. That one I feel is more important and relevant as it moves UI objects around to ensure an optimal layout for a change in screen size and what it looks like on a mobile device.

Software Development: Reducing Technical Debt

Another topic that has peaked my interest recently and I have started to pay particularly close attention to as I started to really work hard and ensure that I am following best programming practices and reduce any introduction of “code smell” into any code repository that I contribute to, is how to reduce the amount of technical debt a project’s code repository has and to not further increase said debt (sometimes this is not an easy task).

What exactly though is “technical debt”? The definition that Technopedia provides sums it up pretty good in my opinion [1].

“Technical debt is a concept in programming that reflects the extra development work that arises when code that is easy to implement in the short run is used instead of applying the best overall solution.”

Some of the causes of technical debt that Wikipedia also provides are also very good and I have worked on projects that have code base’s with technical debt that range from extremely high to very little. Below are several that I personally feel are major contributors when working on projects of any size [2]:

  • Insufficient front up design (just take the extra time to think about the implementation, it will help in the long run)
  • Business pressures (unavoidable, especially when you have obligations to meet, etc.)
  • Tightly coupled components (most likely the cause of bad design to begin with, so design and plan ahead first)
  • Lack of a test suite (all too common in most code repositories, test driven development not utilized or unit and integration test harnesses are missing entirely)
  • Lack of documentation (again, all too common; not enough time to write up the necessary documentation to not only help you at a later stage but others working on the project too)
  • Lack of alignment to standards (sometimes developers feel the need to re-invent the wheel and re-write already publically available libraries, frameworks and APIs causing a major headache down the line)

Now that we have highlighted what technical debt is and some of the causes, it is just as important to try and reduce this technical debt over the lifetime of the project. However sometimes this is just not possible due to a number of uncontrollable factors. Other times however it is squarely in the developer’s hands to reduce as much technical debt as possible while not increasing it as bug fixes, features and improvements are added.

One way that has really helped me is with the use of third party tools and plugins. On most repositories that I work on now, to limit the introduction of “code smell” and ensuring that the technical debt is not increasing, the Git repositories have SonarQube [3] installed on them. Not only does it highlight bad programming practices when there are merge requests but it also analyses the health of the code repository. So there is now no excuse when someone merges in poorly written code when there is an external and impartial tool also looking at the merge request and not just the assignee/assignees who will merge the code; humans can miss some of the obvious things, machines with the correct setup can spot the faults instantly.

Along with the Git code repository monitored, I use a plugin called SonarLint [4] for IntelliJ that highlights poor programming practice and bad code before you even submit your merge request. With the use of this tool, not only does it ensure that I do not contribute to the technical debt, but it encourages me to design, plan and think what I am implementing. Before I was using the plugin, I generally thought that I was writing some good code. However when I started using the plugin it kept flagging my code and letting me know that it was not good code (slightly depressing really); but it taught me that there is still so much more I need to learn to ensure that I write good code. Now that I have been using it for a little while now, I have been getting flagged less and less (so that’s good to know that I am learning and getting better at writing clean code).

Another way that I try and ensure that the technical debt is reduced is whenever I submit a merge request to resolve a bug, or implement a new feature; I try and ensure that the class, method or module that I worked on is in a much better shape than when I found it. Sometimes it will involve doing some light refactoring, other times it will involve re-writing a small chunk of the class or method. However I only ever do this if I know exactly what I am doing, and have experience with the class, method or module. I never try and do this on code that I have very little experience with or don’t know what exactly the code is supposed to do because I could end up leaving the project in an even worse state. People I have talked to about this practice fall into several camps:

  1. If you are not directly working on that component don’t touch it. Just do your part and that’s it.
  2. Why are you refactoring something if you don’t need to? Leave it someone else will refactor or fix it later.
  3. Good show of initiative and desire to clean up the repository, I might end up doing the same. Every little bit helps.

The fantastic thing I have seen is that there are far more developers in camp 3 than in camps 1 and 2. I can see where developers from camp 1 are coming from; making changes to code that directly does not impact your change could pose a great risk, but if you know what it is doing and how to clean up or optimize the code, then why not try and make the repository a little better for all? If there is a TODO or FIX ME comment, then why not fix it while you’re poking around anyway? Camp 2 to me seemed a little odd. Why wait for someone else to fix something if you are already in there fixing or adding something anyway? Could this just be a lazy developer doing the bare minimum? Perhaps. Camp 2 had the least amount of people in it, but I was surprised that was even a response from some developers.

What camp do you fall in? Is there another camp out there? Let me know some of the techniques you use to reduce the technical debt and limit the amount of “code smell”.

[1] – https://www.techopedia.com/definition/27913/technical-debt

[2] – https://en.wikipedia.org/wiki/Technical_debt

[3] – https://www.sonarqube.org/

[4] – http://www.sonarlint.org/intellij/index.html

Software Development: When do you use publically available libraries?

I have seen many code repositories in my software development life (and I have not really been doing software development very long), and generally see two different types of code repositories:

  1. Extensively using public libraries even for the most simple of operations
  2. Everything is created from scratch and is managed internally

When I was programming this afternoon and I was looking at a number of code repositories I was wondering; when is it appropriate to use a public library, one that has been tested thoroughly and has potentially hundreds of contributors or do we just write up our own utility classes and methods, making it only available to projects that we work on? It is questions like these that have me stay up late at night, making it hard to go to sleep.

I primarily use Java at work and is one of the programming languages I use when working on my programming projects. Being so popular there are an insane number of super useful libraries out there with a range of purposes. So it is really easy if you are using Maven to manage these libraries and dependencies, and include them for use in your projects. For example, imagine you have the following scenario:

You want to check whether a String value is null or empty, and this is done in a number of places across the code repository before using this value at any time.

The code could look something like this, all over the repository:

String str = getSomeValue();
if (str != null && !("".equals(str))) {
	...
} else {
	...
}

Wouldn’t it be easier to import the Apache Commons package and use the StringUtils class and do this operation instead, having the StringUtils method referenced across the repository?:

String str = getSomeValue();
if (StringUtils.isNotBlank(str)) {
	...
} else {
	...
}

Sure they generally have the same structure and basically offer the same functionality, but I feel the second option is easier to understand and looks better (personal preference).

What I find the oddest though is when you see code repositories that have their own StringUtils class for example that has a method that does exactly this same check as the Apache Commons StringUtils class, just called differently. So we see this instead:

String str = getSomeValue();
if (StringUtils.isNotNullOrBlank(str)) {
	...
} else {
	...
}

Why not just use the Apache Commons class and methods? What benefits are there to writing your own utility classes unless there are specific operations that you need to perform that the public libraries do not offer? Why go out of your way to write your own caching class when you can use the easy to use, extensively tested and heavily documented Google Guava Cache? These are the types of questions I ask myself when I see utility classes that have one or two methods that do the same operation as publically available library class’s methods. Not only do you have to write the near identical code as the publically available class, but you also need to document the class and write up test harnesses for the class to ensure it works as intended. Most of the time the utility classes I see are not documented and/or there are no test harnesses so developers just assume “Yep, it looks like it should work, so we are good to go.“.

Let me know what you generally do when you work on projects. Do you use the publically available libraries whenever you can? Or do you write your own classes and methods even though you know there are the publically available libraries? If you fall into the latter camp, please let me know why. There may be a valid reason that I am just too ignorant or dumb to notice, because generally whenever I have the option I will always use the public library.

The MVP (Minimum Viable Product)

As I work on more side projects the concept/idea of a minimum viable product is becoming more and more important; especially for someone like me who generally builds products alone with limited resources. I have started, put on hold, never finished or completely shelved a large number of side projects since I started programming. The reasons range from I lost motivation (which is a shame) to I didn’t have a complete understanding of what the applications true purpose was anymore (poor planning and design) and how it would benefit the user (complete lack of understanding of the market and what users are after). The last one started to become very common and I needed a new way to approach my side projects. Working on something cool and fun is great and all but there is a high chance if you don’t have a clear picture of what you want to achieve and the minimum requirements needed to distribute your app to users then your enthusiasm will at some point dwindle away. Also if you start with an idea that is so big it can become daunting and you will never finish it.

I started taking a new approach to my side projects now. Whenever I start, I note down what I exactly want to build (at a high level only), how I feel it would benefit the users (very important to understand), and what are the minimum features needed to ensure that I can get it to user’s devices to make it worthwhile using in a timely manner (the details are important here). Not only is this process helping me focus and know exactly what I need to achieve but it also allows me to mentally picture a roadmap of sort. I can easily see that features A and B need to be done for the application to be worthwhile and features C, D and E can be easily added later in patches and with feedback from users I can continue to refine and craft an app better tailored to them.

Why am I posting this you may ask? Well several weeks ago I posted about how I am/was going to be working on either one or two new applications. In that time I managed to get a clearer picture of what I wanted to achieve, how it would benefit someone and what the minimum features needed to be implemented for it to be worthwhile. If I didn’t spend this time understanding this then my new project probably would have eventually been shelved at a later point and I would not have built an end to end product for people to use. With this new approach I not only get to showcase my skills with complete apps (fundamentally the absolute minimum to be worthwhile, but apps nonetheless) and provide a product people will hopefully find useful in a timeframe that isn’t insane.

Just in time for the start of the new financial year I will be releasing an alpha version of my bill tracking UWP app in either late July or early August for the Windows Store (more information about this when the release date gets closer). I have a very basic prototype up and running and will be working on refining that to be the final app (took under three hours to get something I wanted functional thanks to the great documentation Microsoft has on UWP development, C# and XAML). Until the app is released I will be trying to write more frequently covering certain aspects of the app, what I have enjoyed programming and what I have had difficulty doing. Stay tuned for that because July and August are going to be jam packed full of programming goodness.

My E3 2017 Summary

It has been a very busy week (and weekend), and not just in the gaming world. With me being a massive gamer I was paying close attention to this year’s E3. I was surprised and fairly satisfied with the announcements, especially from coming from the Microsoft Press Event (to be up front, I am a massive Xbox and Windows gamer so there is some bias in what I am interested in). Below are my memorable moments from E3 and the games, products, features or services that I am looking forward to the most or am excited to get my hands on (in no particular order):

  • Microsoft Xbox One X (aka Project Scorpio):
    • What more can I say than, “The World’s Most Powerful Console”? True 4K gaming, HDR and Dolby Atmos support. Even though I do not have a 4K TV, having the games supersampled on my brilliant 65” 1080p Panasonic TV and reducing the loading times while increasing the framerate is always a bonus. Day one purchase for me, no questions asked 🙂
  • State of Decay 2:
    • I absolutely loved the first one. A little rough around the edges but it was super fun. It was a great zombie survival game. Happy that they are releasing a sequel. Looks like they have doubled down on what worked and removed elements that were a pain and fell short in some areas. Another day one purchase for me.
  • Crackdown 3:
    • Terry Crews. Can I get a hell yeah? Collecting orbs has never been so much fun. The chaos and mayhem I created when playing the original and sequel will always have a special place in my heart. This sequel has been a long time coming and I am looking forward to this one.
  • The Evil Within 2:
    • The first was a horror masterclass IMO. It knew how to create the most intense and gripping moments, while also pulling back and letting you do your thing. If the sequel is anything like the first (and from the videos I have seen, it is) then this will be a horror game that I cannot pass up on. Any true fan of horror games will most likely be keeping this on their radar.
  • Wolfenstein II: The New Colossus:
    • If there was one game that was worthy of a sequel it was the rebooted Wolfenstein: The New Order game. The reboot was a masterclass in showcasing how an FPS should and can be created. Pure chaos and fun with characters that felt unique and memorable. From the trailer this appears to be more of the same. New guns to blow your enemies into giblets, what more could a FPS fanatic want?
  • Star Wars: Battlefront 2:
    • Did someone say battledroids? A beautiful, rich and engrossing experience from what I have seen. Nothing more needs to be said. I grew up playing with Star Wars toys and a mate of mine summed up the new series perfectly.

It is a Star Wars kids dream. EA and DICE have crafted a sequel where you can go in and play with your favourite Star Wars characters and worlds you love; just as you did when you were a kid playing with your Star Wars toys.” – DEFJESTA 17.

  • Anthem:
    • This was a surprise, coming out of left field. Most of the games BioWare create are magical. From the characters to the story. Anthem looks to be EA’s answer to Activision’s Destiny. A little disappointed with the game that is Mass Effect Andromeda, so I am cautious about this one. Will be paying very close attention to this and will make a decision to pick this up at a closer date, probably after the reviews. Will also talk to my mates to see what they think, it appears to be heavily co-op focused.
  • A Way Out:
    • It is great to see a developer come out onto the stage and be so confident and pumped for the title that they are developing. This one was a favourite of mine when it was shown at this year’s E3. It looks unique and ambitious with plenty of potential. If they can pull this off then this will be a really enjoyable experience with replay value galore.
  • Sea of Thieves:
    • Nearly all of my Xbox mates are looking forward to this title. A romp across the open seas, having a blast looking for treasure and fighting other pirates. Something about this game reminds me of the Fable franchise, which is a good thing. Everything that I have seen of this game is leading me to make this a day one purchase.
  • Middle Earth: Shadow of War:
    • The Nemesis System was nearly perfect. Having refined it and having what appears to be objectives that can be failed and never replayed, makes everything worthwhile and meaningful. It just builds from a solid first game outing.
  • OG Xbox Backwards Compatibility:
    • This was a complete and utter surprise. I know Phil Spencer said the titles in this backwards compatibility list will be smaller due to licensing, but I am still looking forward to playing some OG Xbox games [1]. Please let KOTOR 1 and 2 be playable *fingers crossed*. So to the entire Xbox team, thank you for this, from the bottom of my heart. I know we didn’t need to have this feature, but it shows you really care for what gamers find important; and this is playing games no matter the generation.
  • Ori and the Will of the Wisps:
    • When this came up and the music played, a tear shed from my eyes. The first game was beautifully crafted. The tight controls, perfect art style and masterclass score made Ori and the Blind Forrest deserving of a sequel. Day one purchase, no questions asked.
  • Metro: Exodus:
    • When the 4a Games logo came up on screen, my brother and I both widened our eyes at the same time. Could it be a new Metro? Boy were we jumping for joy when it was. The first two games were not only gorgeous but were difficult. Day one buy again.
  • Forza Motorsport 7:
    • The only racing franchise now that I play is Forza, sorry Need for Speed. Be it the brutally realistic Motorsport series, or the more arcade Horizon. This game is really going to showcase what the Xbox One X can really do in 4K at 60 fps. I bought Forza Motorsport 5 when the Xbox One launched and I will be buying this racing game when it comes out for the Xbox One X as well.
  • Vampyr:
    • Coming out of nowhere, this game intrigued me. I need to see more of it, but from what I saw it looks like it is going to be fun. There is something about the setting and vampires that gel well. As the release date comes closer and more information is released I’ll be making a decision whether to purchase it, or wait for it to go on sale. Either way it will be going in my digital game collection.
  • Age of Empires Definitive Edition:
    • Growing up as a kid, this franchise was my got to RTS, next to Warcraft (sorry I didn’t play StarCraft). I played the HD remaster of the second game and enjoyed playing that one, even though the multiplayer matchmaking was slightly broken (but that is for another time). This will likely be a game I pick up purely based on nostalgia.

Being such a solid week for gamers, no matter what platform that you play on or the genre of games you prefer, there is something out there. I probably missed some other games, but these are the ones that I remembered off the top of my head. If there are others that you think were worthy of mentioning then feel free to add them in the comments below.

BJJ White Belt 1st Stripe Incoming

I love Mondays. I know plenty of people that dread Sunday nights because of Mondays. However I am the complete opposite. Sure I have to go to work but I generally enjoy what I do at work, if I didn’t then I’d probably not be there. But what really makes me love Mondays (and Wednesdays) is going to my BJJ class at night. To make it even better and to ensure that I actually go is that I attend the school with a college. So there is no way for me to dodge a class (not that I would as I am enjoying it), but there is some accountability there 😉

As the hours tick by during the day I get more and more excited. I have been going to this school for a short period of time and I am nearly ready to attempt my first test and get my first stripe on my white belt (so excited). Everyone who I roll with is super friendly and being several stripes or belts higher destroy me but are always willing to give me tips so that I can get better during my rolls. Do I get steamrolled sometimes when we roll? Definitely, and it is not sometimes, its most of the time. Do I get super confident when I don’t get submitted and can prevent people passing my guard? Absolutely, it means I am doing something right.

I still have so much to improve on though from my guard pass protection to my triangle choke from closed guard. However by constantly training and going into the school and attending class at least twice a week and giving it my best I know I am going to get better. By not being carried away, not having a massive ego and knowing that I am still very raw at BJJ who will get submitted and passed I can learn better. Patience, practise, and perseverance will always prevail. Here is hoping my next BJJ post I’ll have my white belt with one stripe (if so then I’ll end up posting a picture).

For the people that train and practise BJJ, how are you finding it? What do you find most challenging? And what do you feel is the most important idea or concept that someone like me should take going into each class?

All the best people and good night.

My First Post

I hope you’ve had a great weekend so far and now a new journey for me begins.

For the last two months I have been toying with the idea of whether or not to start my own site/blog. I know how important it is to have your own space on the internet and not entirely relying on services like Facebook, YouTube or LinkedIn to promote yourself.

By creating this site for myself I am able to showcase what I am working on, what video games I am playing, what books I am reading, and just my general thoughts on technology ranging from mobiles to software applications. So if you like those topic areas then stay tuned because there is more to come.

Now that I have my site up and running I can start focusing more on the side projects I am working on without worrying too much about how to promote myself at the same time. I plan on writing at least weekly about what I have been doing, or if there is something that I feel I need to write urgently then I’ll have impromptu posts.

Let this magical journey begin…

 

%d bloggers like this: