Adrian Hall

Product Architect by day; Open-source developer by night

Because Developers are Awesome - page 6

Recent posts

Bottom Bar Tabs for your Xamarin Forms app

May 15, 2021  3 minute read  

Following on from last weeks article, I am continuing on my UI journey for my contacts app. My app design calls for a bottom app bar, with three sections - contacts, groups, and profile. The contacts and groups will be lists, and the profile will be a detail page for your own details with an editor. To start, I created the three pages as ContentPage views, complete with XAML layout. For example, here is my ListContactsPage XAML file: <?xml version="1.0" encoding="utf-8" ?> <Cont...

Adding an icon font to your Xamarin Forms apps

May 09, 2021  5 minute read  

I’ve started building a new app using Xamarin Forms from scratch. The idea is that I have a list of contacts stored in the cloud. There isn’t anything revolutionary about that, but I’m going to allow sharing of specific lists with others. You could, for example, create a tag called “Cycling Buddies”, and then tag your friends with that. Everyone who subscribes to the same list gets the same information. Even better, you can “broadcast” your information to certain groups, allowing other p...

Choosing a hosting option for your web app in Azure

March 10, 2021  6 minute read  

Azure, like all the other clouds, has a plethora of mechanisms for getting your web site published. You have Static Web Apps, Azure App Service, Azure Blob Storage, Web Apps for Containers, and then there are the compute ones like virtual machines, and Azure Functions. It can be a little overwhelming. For this analysis, I’m going to assume you want to deploy a stand alone web site - either straight HTML, CSS, and JavaScript or a React, Angular, Vue, or similar app. I’m going to break it d...

Rounded corner panels and masks in SwiftUI

May 03, 2020  3 minute read  

I’ve been working on my UI developer skills recently (and I’ve done a few other posts about this as well). If you look at any of the recent design trends on Dribbble or UPLabs, you will see plenty of rounded corners. SwiftUI makes it simple to create rounded corners on all the corners - just add .cornerRadius(radius) as a modifier to the view. What happens when you only want a couple of corners rounded? For this, you need to dive into custom shapes and masks. Let’s set up a view to exper...

Deploy your React app to Azure

April 04, 2020  7 minute read  

I’ve got to the point with my template where I am thinking about deployment options. There is already a great option (the gh-pages module) for deploying to a github.io site. However, I am going to be running most of my services on Microsoft Azure. I want to deploy my service automatically and copy the web application to a web site on Azure. Just like AWS, you can deploy a website directly to Azure Storage. This is a great option if you just want cheap web hosting plus the option of consu...

Add unit testing to your React app

April 02, 2020  9 minute read  

Thus far, in my journey to produce a customized toolchain for my React development, I’ve covered a lot of ground. See part 1 and part 2 for that coverage. I’ve come to the point where I need to discuss testing, which is a complex area. First, there are at least four types of testing you need to do: Unit testing is something you should be running on a regular basis - a series of tests that test each component to ensure that the functionality is correct from the outside. Integration te...

Add visual testing to your React app with Storybook

March 31, 2020  7 minute read  

In my last article, I started a React app from scratch, then integrated Parcel as the bundler, TypeScript for language support, SASS, ESLint for linting the code, and Stylelint for linting the style sheets. I didn’t include any testing capabilities, so that is next on my agenda. Let’s write a simple component to get started with testing. The component takes an “isBusy” flag. If it is true, then one icon is displayed. If false, a different icon is displayed. I’ll use text nodes in this v...

Building a React app with Parcel, Typescript, SASS, and ESLint

March 29, 2020  9 minute read  

create-react-app (CRA) is great for getting started super-fast. It has just about everything you need for building all but the most demanding apps. It is, however, opinionated in how things get set up, and I’ve been chafing at the limitations for a while. You can’t alter the tsconfig.json except in some non-important ways. It uses webpack underneath, and that is unchangeable. It uses jest and testing-library. Changing this is a pain. There are even packages that rewire the CRA so...

Integrating Microsoft Login and MSAL with React and Redux

March 06, 2020  9 minute read  

I have a new app I am working on. It’s sort of a 1990’s style text MUD, but I’m bringing it “up to this century” with a host of new features. I’m writing the first front-end in React. So, what does a modern MUD app look like? Well, I’m not into storing usernames and password any more, so I’m going to use a Microsoft OAuth service instead of a user database. My front end application handles state through Redux. Configuring Redux I’ve got a store set up as follows: import { applyMiddlew...

Pre-build steps for Flutter using Visual Studio Code

February 20, 2020  2 minute read  

Flutter is not a build system. I know, it’s a terrible way to start, but you have to accept that you need to produce a build system for Flutter. There are build systems written in Dart (such as this one), and I’m sure this situation will get better, but right now? There isn’t a good build system. So I use the node package manager. Here is my basic flow: Run npm init -y. Edit the produced package.json file to use flutter under the covers. Run flutter with npm start instead of the ...