Thursday, March 16, 2023

Microsoft's Ability Summit has inspired me, again!

Microsoft Ability Summit March 8, 2023

Microsoft's Ability Summit was last week, and it has, once again, inspired me to do more work on the tools I have in progress.

You can register via the above link to get to the official site, but the videos are also now available on YouTube.

It was inspiring to see the recently announced Accessibility Checker inside Visual Studio in action. It also showed me that it does have value. I had doubts about this as it's functionality that already exists elsewhere. 

This new tool allows you to run the same tests as can be run by Accessibility Insights, but from a button in the in-app (debug) toolbar (or Live Visual Tree window.)

Two captures from Visual Studio. The left capture shows the top edge of an application being debugged including the in-app toolbar. The 7th button is the "Show Accessibility Checker" button, shows an accessibility icon in white and has a red circle around it. The right capture shows the top of the Live Visual Tree panel in Visual Studio. On the toolbar at the top of that panel, the 6th button is the "Scan for Accessibility Issues" button, has the same accessibility icon in blue and also has a red circle around it.

I've got in the habit of using Accessibility Insights directly or via automated testing* to perform basic testing of an application.

* Yes, I have tests that run an app, navigate to each page, run accessibility tests against that page, and check for (& report) failures. It's not perfect, but it's much better/faster/reliable than doing it manually. 

It reminded me that I have code that can do much of this on source code.

Like this:

Visual Studio Editor screenshot showing contrast issues and missing Name on XAML source code files

When the benefit of Visual Studio having an Integrated Accessibility Checker in the debug experience is that it makes issues easier for developers to see and fix because they don't have to go to another tool. And it makes them quicker and easier to fix by "shifting left" to be part of the debugging experience; how much better to shift further left to when the code is being written (before getting to the debugging step) and not putting the functionality behind another tool that must be known about and run but putting the information where developers are already looking?

I really must hurry up and get this in a state that I can make it public.

It's not as complete as the other tooling as it can't catch quite as many issues, but I think there's value in catching (and fixing) even some issues earlier. 

"It's as pretty as I'm able to make it" - An excuse that shows an opportunity

When a developer gives a demo that shows code with a UI, they invariably make no effort to make it look in any way visually appealing or show any indication they've done anything more than put controls on the screen.

They'll also excuse their lack of effort on the basis that they don't have the skills, knowledge, or experience to do any better. Also, maybe with a subtle joke that designers are somehow lesser. :(

"I'm not a designer"

With a little effort, presenters could significantly distinguish themselves from "all" the others who don't put in any effort here.

It would also be a great opportunity for showing something that easily makes a basic UI look better than many do by default.

My cogs are whirring.....

Monday, March 13, 2023

Please help improve the extensibility experience in Visual Studio

 Based on your solution, you might need to install extra components for a full development experience

Have you ever seen the above prompt (or something very like it) inside Visual Studio?

It's displayed when a solution is loaded that requires workloads or components that aren't currently installed.

Those requirements are specified inside a .vsconfig config file.

The idea is that VS will tell you if you haven't got the things the project owners/creators/maintainers have specified as necessary to work with a project installed.
You can then click on the "Install" text link, and it will install the things you are missing.

But what if you want to require (or recommend) that an extension is installed to work with the solution?

Well, then you're stuck. 

You're forced to include this in the documentation and hope that someone looks at them. Ideally when setting up their environment, or--more likely--when things aren't working as expected and they want to know why.

Obviously, this is far from ideal and can be a barrier (I think) to the creation of specific extensions to fill the gaps in individual projects. - I have had multiple discussions where custom extensions were ruled out because it is too difficult to get everyone working on the code base to install the extensions. We ended up with sub-standard solutions requiring documentation ad custom scripts. :(

Wouldn't it be great if the existing infrastructure for detecting missing components could be extended to detect missing extensions too?

Well, it's currently under consideration. Maybe you've got a moment to help highlight the need for this by giving the suggestion an upvote. 👍

Thank you, please. :)

Tuesday, March 07, 2023

Do you know what good code looks like?

It's a serious question!

"I've never seen XAML done well before"

If you don't know what good code looks like, how do you know what you're doing is good?

What if it's not good?

What constitutes as good?

These are important questions when creating reliable, maintainable, high-quality code. 

This applies to any code or programming language, but especially to XAML.

The above quote was from a member of the audience after one of the first times I gave a talk about rethinking XAML. I now use it as an audience prompt in current talks.

I've met very few people who work with XAML who have given serious thought to what good XAML looks like.

Most XAML files look the same. 

And they don't look great.

They're not easy to read.

They're not easy to understand.

I don't think the solution is abandoning XAML. (Especially as there's so much existing code that needs to be supported, maintained, improved, and enhanced)

I think the solution is to change the way we write XAML.

More on this to follow...

In the meantime, what do you think "good XAML" looks like?

Three thousand .NET MAUI Developers can't be wrong!

 MAUI App Accelerator - marketplace screenshot showing 3000 installs

Well, it's a milestone of sorts and, as such, is something worth celebrating.

Beyond this post, I've also just released an update that fixes a bug preventing the creation of apps with spaces in their name.

If you don't know what any of this is, the MAUI App Accelerator is a Visual Studio (for Windows) extension that provides a wizard to quickly scaffold a new .NET MAUI application by selecting from a number of options, pages, and features to include in a generated app.

Get it from the marketplace or provide feedback or suggestions on GitHub.

Monday, January 30, 2023

MAUI App Accelerator version 1.2 is now available - What's new?

Version 1.2 adds:

  • 1 new Navigation Style: None (No Shell)
  • 4 new pages: Map, NavigationPage, TabbedPage, & FlyoutPage
  • 7 new features: FontAwesome, sqlite-net-pcl, AppCenter,, InAppBilling, StoreReview, & Audio
  • Use of the newest versions of NuGet packages.
  • Support OS-level Text Sizes in the wizard (for improved accessibility.
  • Some bug fixes
  • Improved testing (although you'll never see that)
  • Images of new sponsors - a big thank you to all of them
  • Support for all the sponsor images when the wizard is too small. 

Let me break that down.

New Navigation Style: "None"

Don't want to use Shell? - Now you have that option.

Wizard showing the "None" option for "Navigation Style"

New Pages:

If you're targeting .NET 7.0 you can now create a page with a map on it (and the relevant package referenced and configured in the app Builder.)

This means you can easily create the following on Android & iOS.

But not on Windows--because it doesn't (yet?) have a native map control. :(

If you're not using Shell, you may also want to use one of the page types that aren't supported by Shell. Now you can:

FlyoutPage, NavigationPage, & TabbedPage options in the wizard

New Features:

There are lots of new features that have been added.

The "Add Features" step in teh wizard showing all the newly added options.

Most of these add references/files and do essential configuration. 

Hopefully, this provides an idea of what's possible and hints at where I'd like to go with this in the future.

If it gives you ideas for what you want to see added to this list, please create a suitable issue.

Updated NuGet package references:

I find it very disappointing when you create a new project, and the first thing you need to do is update all the referenced NuGet packages to pick up the latest features, fixes, and security patches.

Well, not here. Everything 

Support for OS-level text sizing:

In the past, if someone had configured Windows to make text larger, like this:

Partial screenshot of the "Make text bigger" option in the "ease of access" or accessibility settings
Then the wizard could end up looking "less than ideal." All the buttons are at least accessible, even if you can't read all the text.

Wizard not coping with resized text

Most of this UI had come from Windows Template Studio and had design and accessibility reviews by the Visual Studio team. I was surprised this was an issue.

But, now it's not:

The updated wizard that adjusts to increased text sizes

This isn't something I've ever considered previously. For the most part, addressing the issues was easy, but some things were harder than I would have hoped. This includes testing the related changes. I guess that part of the reason this hasn't been noticed before is that there are no automated testing tools for verifying this behavior, and to manually test requires changing an OS setting. Hopefully, this will change in the future.

New sponsor images & Improved handling of so many sponsor images:

Having a lot of people sponsor me via GitHub is a lovely thing. In appreciation of this, I tell them how to remove the prompt to become a sponsor that is shown in some extensions. And if their sponsorship isn't private, I add their avatar to the bottom of the wizard.

Like this:

Sponsor avatar images

However, when the wizard is made smaller, some of those images are obscured.

Hey, I'm not complaining. This is a nice problem to have, and I want to respect all my sponsors, not just those displayed on the leftmost edge of the screen.

So, now this happens when the screen gets smaller:

Yes, I have wasted several minutes watching as things overlap when the available space is reduced.

Please download version 1.2, try it, and tell me what you think. (If it's good, leave a review on the marketplace so others can see it too.)

Then, if you have suggestions for other things I can add, head over to the GitHub repo and create, upvote, or comment on a suitable issue.

Did you know that GitHub sponsors can be Private?

When you sponsor someone via GitHub Sponsors, there's an option to make your sponsorship public (so everyone can see it) or private (so only you and the sponsor know about it.)

Partial screenshot of the sponsorship form. Title: Who can see your sponsorhsip? Option 1: Everyone - Others can see that you sponsor mrlacey. Option 2: Private - only mrlacey will be able to see that you are a sponsor

Why might you want to keep your sponsorship private?

Well, you may have many reasons. 

If I had to speculate, one reason I've assumed is that you don't want other people asking you to sponsor them too, or questioning why you are sponsoring a person.

I've had a few well-known people (in the Microsoft/.NET world) sponsor me. This was very surprising and flattering, but I can easily see other people online reacting to this knowledge negatively or demanding that they sponsor them too.

All I can do is thank these secret benefactors.

Whatever your reason, I (or anyone else you chose to sponsor) will always be grateful for your sponsorship.

If you do sponsor me, you will get:

  • My gratitude.
  • The knowledge that you're helping me create tools to help more developers do more. (like this.)
  • Details of how to remove the prompt to become a sponsor that's shown by some of my extensions.
  • Early access to my writings and some tools via a private GitHub repo. (recurring sponsors only--for now, based on how the GitHub sponsors infrastructure makes this possible.)
  • If not a "private" sponsorship, I display your avatar in some of my tools. As below. (Position and duration of inclusion depend upon sponsorship amount and if one-off or recurring.)

partial screenshot of the MAUI App Accelerator windows showing images of all public sponsor avatars

Any amount, one-off or recurring, for as long as you wish. Your sponsorship will be appreciated. :)

And a big thank you once again to all who have, are, or will sponsor my activities.

Sunday, January 29, 2023

All my Visual Studio extensions now work on ARM64 - thanks to GitHub sponsors

Thank you, lovely sponsors!

My MacBook is broken. According to the "Genius" I spoke to, it's not dangerous, but if it gets worse, I shouldn't use it anymore.

My plan had been to replace that and then start thinking about getting an ARM64 device for Windows development and testing.

But then I started to get requests for supporting my Visual Studio extensions on the ARM64 version. In that, those sponsoring me on GitHub are primarily in response to the extensions I've made, it made sense to use the money they've generously provided to be able to enhance those extensions so more people can use them.

So I put the sponsorship money towards a Windows Dev Kit so I can test the extensions in a suitable environment. Technically, it's not needed for development, but I didn't want to release anything that isn't adequately tested.

So, what can you do?

Well, here are the supported extensions:

Warn about TODOs

Visual Studio automatically takes code comments that include TODO and turns them into User Tasks that are displayed on the Task List.

This extension takes those same tasks and also creates warnings for them.

You can also configure which items result in warnings (or Errors) being listed. Like here:

Example of filtered TODO items shown in the Error List

Error Helper

Make it easier to work with items in the Visual Studio Error List by copying or searching (with Ecosia, Bing, Google, or StackOverflow) for just the description of an error.

Additional items shown in the drop down


Display a text watermark over the Visual Studio editor.

Visual Studio Editor window showing (highlighted) as watermark of my Twitter handle

C# Inline Color Visualizer

See samples of the colors you use within your C# code.

Never again be forced to remember what a named color looks like.

Examples of a number of colors specified in different ways in C#

Clearly Editable

A Visual Studio 2022 extension to change the editor's background color to show which documents can't or shouldn't be edited. This could be because that are generated, read-only, or linked files.

Example of the backgrounds set on different editor windows

String Resource Visualizer

Visual Studio extension that shows the text of a string resource (.resx) when used inline in code.

The default language value is displayed as a text string directly above where the resource is used. As shown in the screenshot below.

Use it in your C# files

C# editor screenshot showing resource values

and in .cshtml files with the ASP.NET Localizer

Editor showing resource values as used by the ASP.NET Localizer

Const Visualizer

A Visual Studio extension to show the values of constants where they are used.

screenshot showing const values above their use elsewhere in code

Comment Links

Create links between any files. Useful if your project or solution contains code in multiple languages or if you wish to link to documentation.

Watch an example on YouTube
YouTube link

Don't Copy Always

Automatically checks for files that have 'Copy to output directory' set to 'Copy always'.

Any affected files will be listed in the Output Pane.

Resource Pseudo Localizer

Testing localized string resources can be tricky, especially if you don't speak multiple languages. This extension adds a new context menu to RESX and RESW files in Solution Explorer that will allow you to pseudo Localize your string resources. Viewing the app with pseudo-localized strings makes it easy to spot any text that doesn't come from a resource.

Context menu showing available options

Demo Snippets

Makes using code snippets in demos easy. Do real demos but without having to worry about typing or managing pieces of code to copy in from elsewhere.

Coming soon:

MAUI App Accelerator

Rapid XAML Toolkit

A big thank you to all my lovely sponsors. (You could become one too.)
Who knows what future sponsorship money will enable me to do.....?

Tuesday, January 10, 2023

4 Ways 'MAUI App Accelerator' can save you time (and money)

Step 4 (Add Pages) of the extension wizard

MAUI App Accelerator (marketplace link) is a Visual Studio extension that can help you start making apps with .NET MAUI.

It shows several best practices and examples and is intended to help you start building the app you want to make and do it faster and with less effort.

Here's how:

1. It lets you start with something closer to what you actually want!

The default app generated by the official new app template gives you a single page with content that you'll probably want to delete.

Instead, MAUI App Accelerator lets you choose the coding pattern and navigation style that you want to use. You can then add as many pages as you want/need. These pages can be blank or include some basic content--if that's what you'd like. It also adds any view models, navigation entries, dependency references, and anything else you need based on the options you choose.

It also lets you add references to libraries you want and adds in any basic, associated plumbing code. All with a single click.

It means that once you click "Create" you have something you can add your specific code to. You don't need to then start setting up the project structure and adding more references.

2. It forces you to think before starting your project.

I think this is the most important point. How often have you ended up spending more time overall because you rushed into something (not just code) and need up having to go back and change it? 

If you'd spent more time planning things in advance, you'd have saved more time overall.

I've seen many developers start projects by selecting "File > New Project > {selecting options}> Create" and only then stopping to think about what they're going to need in their project. By wiring up more functionality at the start and adding multiple pages (that you know you're going to need), you're forced to think about what you actually need in the app. 

Yes, you can still add to the generated app, but by being encouraged to do a little planning in advance, you'll save more time overall.

3. It makes it easier to try out new things.

Want to quickly try something that requires an app with two pages? Yes, you could create this yourself, but MAUI App Accelerator will let you do it faster and with less effort.

Want to try a specific control that has a sample page in the options presented in the wizard? Generating an app with that page can be much quicker than adding all the code and wiring up the control functionality yourself.

4. It lets you learn from complete examples. 

Want to try something new? With MAUI App Accelerator, you're not forced to rely on documentation or descriptions.

Maybe you've got no experience with MVVM, and you'd like to learn, but the resources online are confusing (& sometimes contradictory) and working with event-handlers and code-behind has always been sufficient for you. Well, you can now easily build the same app twice, once with code-behind and once with MVVM, and compare to see the differences. 

Or do the same with an app that uses XAML and one that generates the UI with C#. See what the differences are and how things work by comparing apps with identical functionality and content.

To enjoy these benefits yourself, simply install the extension. Then, when creating your next project, select `MAUI App Accelerator` in the new project wizard.

The 'MAUI App Accelerator' option in the new project wizard