DEV Community: Melissa Houghton

Digital Twins: Your Next Step in IoT

Melissa Houghton — Wed, 18 Aug 2021 02:05:32 +0000

Digital twins bridge the gap between the physical and virtual worlds and help you realise the full potential of your Internet of Things (IoT) solutions. Now more accessible than ever, digital twins are the next step in your IoT journey.

What are Digital Twins?

Digital twins are a digital representation or model of a physical thing enabled by IoT.

IoT is the network of physical devices (things) connected to the internet, collecting data and telemetry. An IoT device could be your fridge, your Alexa, a truck, a piece of machinery in a factory, or a building. You can integrate almost anything with IoT technology.

Digital twins are a map of IoT enabled devices showing how they connect and work together, supplemented by other business information and collected data. A digital twin acts as a blueprint highlighting the relationships between each piece and allowing for complex data analysis and action.

A digital twin of an object should have:

A model of the object
An evolving set of data relating to the object, and
A means of dynamically updating or adjusting the model in accordance with the data.

(Source 1)

Say, for example, you have an office building with IoT enabled thermostats in each room. The thermostats and their data alone would not be digital twins. However, overlay that information into a building model and create a means of updating the temperature change to reflect the real world, and you have digital twins. The model could be a graph, a dashboard, a 2D map, or even a 3D virtual replica of the building.

FRAME

@frame_vr

We're thrilled to finally share this. See how the @trello team from @Atlassian used FRAME for an epic, immersive offsite: TRELLO TOGETHER 21. We made a digital twin of their actual NYC office. 🤯 All in @oculus Quests via #webxr. A full case study on this is coming, but a tease:

18:16 PM - 28 Jul 2021

Tweet from Frame VR showing a digital twin of the Trello office

Why Digital Twins?

A majority of all IoT projects are considered failures. According to a report by Beecham Research titled "Why IoT Projects Fail", only 12% are considered entirely successful. The projects fail because businesses focus on single-point solutions, jumping on new technology trends, and not looking at the big picture. As a result, projects end up with islands of things instead of an internet of things. The data is not linked together, leaving each IoT solution isolated on an island.

Connecting everything creates a complete picture that can change how we look at the problem. We can make these connections with digital twins.

Digital twins turn our islands of things back into an internet of things through relationships and models. We create insights from the mass amounts of data collected, revealing practical solutions and allowing for action with digital twins.

Actions from digital twins include:

Analysis and visualisation of the current state
Design and validation of processes new or existing
Simulation of scenarios
Increased safety and reliability with alerting
Optimisation of existing processes
Tracking and reviewing historical information
Predictive performance and maintenance
Real-time control over the physical twin

(Source 2)

Taking data-driven action in our IoT solution can turn a failure into a success.

History of Digital Twins

The concept of digital twins is not new. The term 'Digital Twins' was first used in 2002 by Michael Grieves of Florida Institute of Technology. (Source 3)

In theory, digital twins date back even farther. The first use of digital twins concepts dates back to the '60s with NASA. There is a theory that Apollo 13 was the first example of digital twins. NASA had complex simulation environments to model the spacecraft powered by computer systems, technology, and algorithms. Mission control used these simulators and the telemetry coming in from the ship to quickly adapt and model the damaged spacecraft, allowing them to get the crew home safely. (Source 4)

NASA was not using IoT devices at the time, but the theories of using telemetry to update models and make decisions are what we use now with digital twins.

Apollo 13 Mission Control with Fred Haise and Gene Kranz

Digital Twins Now

The difference with digital twins now is that we can get information in real-time. Real-time data allows us to react and automate in real-time. Then, using the power of the cloud, we can feed the stream of data into real-time processing, alerting, machine learning algorithms, advanced insights, and automation.

The cloud has also made digital twin technology more accessible and easy to use. No longer do you need a supercomputer and technology of NASA to create advanced simulations and digital twins. Instead, cloud providers take care of the compute for us, allowing us to focus on innovative solutions.

With broader accessibility, we can use digital twins anywhere you have IoT devices. Typical categories include consumer, commercial, industrial, and infrastructure. Examples usually include smart buildings and industrial use cases, but the opportunities are endless.

Digital twins power the freeways that use digital speed limits and change based on traffic patterns. Health monitors can leverage digital twins to send alerts to the user or a doctor. A bakery can leverage digital twins to track deliveries, add predictive maintenance to the ovens, and use video analytics to track food waste. You can even create a digital twin of your own home.

Examples of industries that can use digital twins: farming, city, bakery, medical, racecar, industrial

How to get started

As a software engineer in the Microsoft space, I recommend starting with Azure IoT. Azure IoT provides a broad range of services and capabilities suitable across industries and includes the Azure Digital Twins platform.

Azure Digital Twins integrates seamlessly with the other Azure services and enables the creation of knowledge-based graphs based on digital models of entire environments.

The core capabilities provided in the Azure Digital Twins platform are:

Open Modeling Language - Digital Twin Definition Language (DTDL)
Live Execution Environment - Azure Digital Twins Explorer
Input from IoT and Business Systems
Output to Time Series Insights, Storage, and Analytics

In addition to the robust capabilities, Microsoft provides a detailed suite of documentation and learning modules to help you get up and running.

Check out digital twins and take your next step in IoT.

References

Wright, L., & Davidson, S. (2020). How to tell the difference between a model and a digital twin. Advanced Modeling and Simulation in Engineering Sciences, 7(1), 1–13. https://doi.org/10.1186/s40323-020-00147-4
Singh, M., Fuenmayor, E., Hinchy, E. P., Qiao, Y., Murray, N., & Devine, D. (2021). Digital Twin: Origin to Future. Applied System Innovation, 4(2), 36. https://doi.org/10.3390/asi4020036
Grieves, M. W. (2019). Virtually intelligent product systems: digital and physical twins. https://doi.org/10.2514/5.9781624105654.0175.0200
Ferguson, S. (2020). Apollo 13: The First Digital Twin. Siemens® https://blogs.sw.siemens.com/simcenter/apollo-13-the-first-digital-twin.

Getting Started with .NET MAUI

Melissa Houghton — Mon, 28 Jun 2021 21:57:54 +0000

❗ .NET MAUI is still in Preview, and the team at Microsoft continuously release changes. Some tools, features, and steps mentioned in this post may change.

This tutorial provides an overview of how to get started with .NET MAUI, the .NET Multi-platform APP UI (MAUI), a cross-platform framework for creating native mobile and desktop apps. .NET MAUI is the evolution of Xamarin.Forms and currently available in Preview 5.

To find out more about what is .NET MAUI and how it came to be, I recommend reading my blog post Aloha! Welcome to .NET MAUI before continuing with this tutorial.

We will cover:

Setting up your environment
Creating your first .NET MAUI application
Writing in C# vs XAML

Environment Setup

Before starting with a .NET MAUI project, we need to install all the proper dependencies. Microsoft has made this easy for us with a dotnet tool that evaluates your system. The tool will detect any problems and offer to try to fix them for you or suggest a way to fix them yourself.

First install the tool: (source: https://github.com/Redth/dotnet-maui-check)

dotnet tool install -g Redth.Net.Maui.Check

Run the tool using the command:

maui-check

Follow the instructions given in the tool to get everything you need to start working with .NET MAUI.

For the best development experience with .NET MAUI, it is recommended you use Visual Studio.

At the time of writing, Microsoft recommends starting with Visual Studio 2019 16.11 Preview 2 to develop .NET MAUI applications. Full support for .NET MAUI will be available in Visual Studio 2022, now in Preview.

Install the following workloads with Visual Studio:

Mobile development with .NET
Universal Windows Platform development
Desktop development with C++
.NET Desktop Development

Source: Microsoft

To run and debug in an Android emulator, setup an emulator within Visual Studio following this guide https://docs.microsoft.com/en-us/xamarin/android/get-started/installation/android-emulator/

Once you have installed all that and the maui-check succeeds, you are ready to create your first .NET MAUI application!

Create a new MAUI app

This guide will use Visual Studio to create our first .NET MAUI application. However, you can also create a new .NET MAUI application from the command line.

In Visual Studio 16.11 Preview 2, select Create a new project, search for MAUI or choose Project Type > MAUI from the dropdown.

The generated template contains two projects:

.NET MAUI project - targetting Android, iOS, and MacCatalyst
WinUI Project - for Windows desktop applications

The team is working hard to consolidate all the projects into one to build and deploy across all platforms. The final consolidation will come in later versions.

Run the application by selecting the target device, such as Android Emulator, in the Visual Studio toolbar dropdown next to the Start button.

The application is a simple Hello World counter app with a button to increase the counter.

Congratulations! You have created and run your first .NET MAUI application!

❗ At the time of writing, there are a few bugs in the layout of the template application. (issue #1382)

Fix the layout issues

The two issues in the template application are:

Image does not show
Numbers with multiple digits are cut off at the first digit

To fix this, we can change the layout from the StackLayout in MainPage.xaml to a VerticalStackLayout, newly introduced in .NET MAUI and remove each Grid.Row.

See this commit on my GitHub for the full details of the change.

Troubleshooting

As is to be expected with any preview, there are some issues you may have to address before you can fully get the project up and running. Below are the issues I ran into when writing this blog post.

Issue: Android Emulator crashes after launch

To fix this, disable XAML Hot Reload in Visual Studio, follow the instructions in this comment from the existing issue: https://github.com/dotnet/maui/issues/1361

Issue: Previous installations of .NET 6 Preview 4 cause issues in .NET 6 Preview 5

See the Microsoft documentation here: https://github.com/dotnet/core/blob/main/release-notes/6.0/known-issues.md#preview-5

I expect the team will continue to work through all the issues leading up to General Availability in November.

Using C# instead of XAML

As a C# developer with little experience using Xamarin and XAML, I am most excited about the ability to define pages in .NET MAUI applications using C#. The existing examples and templates get you started using the traditional XAML based approach, carried over from Xamarin.Forms. In Xamarin.Forms, XAML is used to define the visual contents and works with a C# code-behind file. In .NET MAUI, you now have the option of using fluent C# or XAML to define the visual contents of a page.

To translate the template from XAML to C#, follow the steps below or get the complete source code from my GitHub: https://github.com/melissahoughton/GettingStartedMaui

Steps

To use fluent C# to define the UI of the template .NET MAUI app, we will change:

App
MainPage
Startup

Note: The two projects in the template (.NET MAUI and WinUI) share the App, MainPage, and Startup files. Any changes will automatically be reflected across both.

Delete App.xaml and the code-behind App.xaml.cs

Note: In Visual Studio, the code-behind file is nested under the App.xaml. Deleting a XAML file in Visual Studio automatically deletes the associated code-behind.

Create a new class called App.cs with the below content

using Microsoft.Maui;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;
using System.Collections.Generic;

namespace GettingStartedMaui
{
    public class App : IApplication
    {
        List<IWindow> _windows = new List<IWindow>();
        public IReadOnlyList<IWindow> Windows => _windows.AsReadOnly();

        public App(IImageSourceServiceConfiguration imageConfig)
        {
            imageConfig.SetImageDirectory("Assets");
        }

        public IWindow CreateWindow(IActivationState activationState)
        {
            var window = new Window(new MainPage());
            _windows.Add(window);
            return window;
        }
    }
}

Add the Extension Service Provider Factory to the app configuration in Startup.cs to enable dependency injection for the ImageSourceServiceConfiguration used in the step above.
```
appBuilder.UseMicrosoftExtensionsServiceProviderFactory();
```
Delete MainPage.xaml and the code-behind MainPage.xaml.cs

Create a new class called MainPage.cs with the below content

using Microsoft.Maui;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;

namespace GettingStartedMaui
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            BackgroundColor = Color.FromArgb("#512bdf");

            var verticalStack = new VerticalStackLayout() { Spacing = 20 };

            verticalStack.Add(new Label
            {
                Text = "Hello, World!",
                FontSize = 32,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                TextColor = Colors.White
            });
            SemanticProperties.SetHeadingLevel((BindableObject)verticalStack.Children[verticalStack.Children.Count - 1], SemanticHeadingLevel.Level1);

            verticalStack.Add(new Label
            {
                Text = "Welcome to .NET Multi-platform App UI",
                FontSize = 16,
                HorizontalOptions = LayoutOptions.Center,
                TextColor = Colors.White
            });

            var counterLabel = new Label
            {
                Text = "Current count: 0",
                FontSize = 18,
                FontAttributes = FontAttributes.Bold,
                HorizontalOptions = LayoutOptions.Center,
                TextColor = Colors.White
            };

            var button = new Button
            {
                Text = "Click me",
                HorizontalOptions = LayoutOptions.Center,
                TextColor = Colors.White,
                BackgroundColor = Color.FromArgb("#2b0b98"),
                Padding = new Thickness(14, 10)
            };

            var count = 0;
            button.Clicked += (sender, args) =>
            {
                count++;
                counterLabel.Text = $"Current count: {count}";
            };

            verticalStack.Add(counterLabel);
            verticalStack.Add(button);
            verticalStack.Add(new Image { Source = "dotnet_bot.png", WidthRequest = 300, HorizontalOptions = LayoutOptions.Center });

            Content = new ScrollView
            {
                Padding = 30,
                Content = verticalStack
            };
        }
    }
}

Clean and rebuild the project

You now are using fluent C# with your .NET MAUI application!

Take a look at the .NET MAUI GitHub for future updates and news on what is next with .NET MAUI. Mahalo!

Aloha! Welcome to .NET MAUI

Melissa Houghton — Sun, 13 Jun 2021 06:31:53 +0000

Aloha! Welcome to .NET MAUI! The all-new .NET Multi-platform App UI (MAUI). Announced at Microsoft Build 2020, Microsoft has evolved Xamarin.Forms and taken the next step in the .NET unification to give you a cross-platform mobile-first framework for Android, iOS, macOS, and Windows. .NET MAUI will introduce new ways to build applications. Available in .NET 6, in preview now!

.NET MAUI (source: Microsoft)

What is .NET MAUI?

.NET Multi-platform App UI (MAUI) is the evolution of Xamarin.Forms extended from mobile to desktop scenarios with UI controls rebuilt from the ground up for performance and extensibility

Maddy Leger, Program Manager Xamarin/.NET MAUI Team "The Future of Native Apps Development in .NET 6"

MAUI will help you deliver high-performance, cross-platform, native desktop and mobile apps from a single codebase. With .NET MAUI, you can build your apps for any device from a single codebase and project system, using one language, one set of libraries, and one UI stack for all.

What are Xamarin and Xamarin.Forms?

The most common descriptor for MAUI is the evolution of Xamarin.Forms, but what are Xamarin and Xamarin.Forms?

Xamarin is an open-source .NET platform for building iOS, Andriod, macOS, and Windows applications. Introduced in 2011, Xamarin allows you to share business logic across platforms using .NET while creating a native UI for each. Xamarin allows developers to share an average of 90% of their application across platforms).

.NET Mobile Apps with Xamarin (source: Microsoft)

To help with the overhead of creating native UI's for each platform, we have Xamarin.Forms.

Xamarin.Forms is an open-source UI framework that allows you to combine the code for Xamarin.Android, Xamarin.iOS, Xamarin.Mac and Windows applications into a single shared codebase.

What is Xamarin.Forms (source: Microsoft)

Microsoft aims to create a unified .NET platform, replacing .NET Framework, .NET Core, and Xamarin. .NET MAUI is the next step in unifying .NET, replacing Xamarin.Forms. It addresses some of the issues and downsides of Xamarin.Forms while providing an updated architecture on top of the new generation of .NET and project system.

What about my Xamarin.Forms skills and applications?

Think of .NET MAUI as a new version of Xamarin.Forms. Microsoft has assured us that our Xamarin.Forms skills are transferable.

Xamarin.Forms developers will hit the ground running with new projects in .NET MAUI, using all the same controls and APIs they have grown to know and love. source

There will also be tools and guidance to help migrate applications. The team expect to have a version of the .NET Upgrade Assistant that can migrate Xamarin and Xamarin.Forms projects to .NET 6 and .NET MAUI in the July 2021 Preview 6 release.

What is different about MAUI?

If we already have Xamarin.Forms, what is so special about .NET MAUI? Microsoft is rebuilding the core of Xamarin.Forms, bringing us performance improvements, consistent design systems, and an extension from mobile to desktop.

Key Improvements in MAUI:

Single project experience across platforms
.NET Hot Reload
Modern App Patterns

Single Project Experience

.NET MAUI allows us to have a single project experience instead of one project for each target platform. A single project improves the developer experience by enabling developers to target and debug different devices without switching between projects or navigating the idiosyncrasies of each platform. We can use one language across our application to target all the supported platforms and easily share resources across while maintaining an option for platform-specific code.

.NET Hot Reload

Hot reload increases productivity for .NET developers, allowing instant updates to running applications with new code changes. Removing the build and deploy interruptions saves time and allows the development flow to continue. In .NET, they are expanding Hot Reload, bringing complete support to .NET MAUI along with other workloads.

Modern App Patterns

Model-View-ViewModel (MVVM) and XAML pattern, used in existing Xamarin.Forms applications, will continue to be supported and improved with the evolution. .NET MAUI will introduce further support for the Model-View-Update (MVU) development pattern, popular in C#, enabling developers to write fluent C# UI, creating a code-first development experience.

What's new from Microsoft Build 2021?

During Microsoft Build 2021, Microsoft announced the availability of .NET MAUI Preview 4. Each preview provides us with more features and tools with general availability scheduled for November 2021 at .NET Conf.

With the release of Preview 4, you can now create functional applications across all supported platforms using .NET MAUI. In addition, they have added new capabilities to support running Blazor on desktop using .NET MAUI, allowing the reuse of Blazor UI components across native desktop and web applications.

Weather Twenty One .NET MAUI Preview 4 Demo (source: David Ortinau)

Alongside Preview 4 is the release of Visual Studio 2019 version 16.11 Preview. The Visual Studio 2019 16.11 Preview enables .NET Hot Reload for MAUI and provides productivity features for developing .NET MAUI projects. A project template option for a .NET MAUI application is now available in the 16.11 Preview, encompassing the new solution format with the multi-targeted project.

To see what is coming in future releases, visit the MAUI product roadmap.

How can you get started?

Before you get started, Microsoft has created a dotnet tool called maui-check that evaluates your system for development in .NET MAUI. The tool will scan for the required dependencies and try to fix any issues for you or suggest a way to fix them yourself.

Tool source: https://github.com/Redth/dotnet-maui-check

dotnet tool install -g Redth.Net.Maui.Check
maui-check

Once you have the complete .NET MAUI development environment setup, you can create your first app by running:

dotnet new maui -n AlohaMaui

Congratulations! You have a new .NET MAUI application.

Resources

Check out the resources below to find out more about .NET MAUI and the exciting future in the .NET ecosystem. Mahalo!

JavaScript in the Cloud

Melissa Houghton — Mon, 22 Mar 2021 04:09:29 +0000

A look at the history of JavaScript and the fun stuff you can do with JavaScript in the cloud!

Introduction

Traditionally, JavaScript is the language of the web, and it still is. But today, it's so much more. With the advent of server-side JavaScript and JavaScript support in major cloud platforms, JavaScript's power increased dramatically. Building, maintaining, optimising, and deploying end-to-end JavaScript applications is possible with JavaScript in the cloud.

Cloud platforms give us the tools, elasticity and scalability to create high performing applications without managing the physical infrastructure. You can take advantage of the cloud while using a language you already know: JavaScript!

What is the Cloud?

The cloud refers to software and services that run on the Internet instead of locally on your computer. The cloud is a server somewhere else, usually in a big data centre. Cloud providers such as Azure, AWS, Google Cloud allow you to rent space on a server and pay for what you use. They let you scale as your business needs change while they manage the physical infrastructure for you. Think of it as renting a house or renting a piece of land, providing different control levels over managing the property, depending on which type of cloud computing you are using.

So really, there is no cloud. It's just someone else's computer.

What is JavaScript?

JavaScript is a language that allows you to implement complex features on web pages.

It was created in 1995 in just ten days by Brendan Eich, who worked for Netscape. He created JavaScript as a scripting tool to manipulate web pages in the Netscape Navigator browser.

JavaScript took off to become the most popular client-side programming language. Today 97% of the web uses JavaScript!

However, JavaScript is much more than just a client-side programming language. Scott Hanselman, a Partner Program Manager at Microsoft, even went so far as to say that he proposes JavaScript is an operating system. He based the comparison on the fact that JavaScript has the same characteristics as an operating system.

JavaScript is a flexible and robust language. Thus, it makes sense for us to use JavaScript in the cloud.

JavaScript in the Cloud

Initially, Eich wrote JavaScript as both a client and server-side language. However, it didn't become popular as a server-side language until later on with the creation of Node.js in 2009.

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. With the advent of Node.js as a server-side JavaScript programming language, it opened up the ability to use JavaScript in the cloud.

Today, all the major cloud providers support JavaScript in the cloud.

And, in the words of Scott Hanselman:

The cloud doesn't care about language choice.

Tools for JavaScript in the Cloud

If you are looking to develop JavaScript in the cloud, there are some excellent tools and guides out there to help you. JavaScript IDEs such as Visual Studio Code and WebStorm have extensions that let you integrate with your favourite cloud providers, access quickstart templates, write, debug and deploy your cloud applications.

All major providers have a suite of SDKs and client libraries in JavaScript to integrate with their services from your JavaScript application. These libraries allow you to:

Recognise and transcribe human speech with speech to text
Integrate into an Azure Digital Twins solution
Add a rich Cognitive Search to your web app

And much more!

Power of JavaScript

JavaScript is a powerful language. We can use JavaScript for web, mobile, gaming, artificial intelligence, and so much more.

Watch Scott Hanselman's talk JavaScript, The Cloud, and The Rise of the New Virtual Machine to see a demo of a complete implementation of Linux and Pentium processor implemented in JavaScript and some other crazy things you can do in JavaScript.

There is a concept called the Rule of Least Power from Tim Berners-Lee, the creator of the web. The rule suggests choosing the least powerful language suitable for a given purpose.

As a corollary to this rule, we get Atwood's Law.

Any application that can be written in JavaScript, will eventually be written in JavaScript.

Summary

In conclusion, I hope if you are not yet using JavaScript, you go out and learn it today. If you already are using JavaScript, I hope you start exploring what you can do with it.

Because the opportunities with JavaScript are endless, especially when paired with the power of the cloud.

Nevertheless, She Coded: Melissa Houghton

Melissa Houghton — Mon, 15 Mar 2021 04:48:27 +0000

In honour of International Women's Day, I #ChooseToChallenge, starting by creating awareness and sharing my journey as a woman in tech.

Me raising my hand to show I am in and that I commit to #ChooseToChallenge

What Do You Want To Be?

Adults constantly ask kids what they want to be when they grow up.

The trouble is, many of us do not know what we want to be. Too often, society pushes us into becoming something we do not want to be or pushes us away from what we genuinely love.

And now, and for the coming generations, we are likely to hold jobs that did not exist or were unheard of when we were young.

My mom always says that she still does not know what she wants to be.

If you told me I would become a software developer, I would have no idea what that meant. I would certainly not know how much I would love it.

Growing up, I did not conform to the traditionally girly pastimes and often challenged the status quo. As a kid, you could find me up a tree or playing sports while also playing with Barbies and having tea parties.

One of my most memorable toys was an Intel Play QX3 Microscope which could connect to a computer. I would spend hours with it, examining things up close and getting very creative with the software.

Me with my Intel Play QX3 Microscope, circa 2000

My parents supported me in doing what I wanted. They provided me with opportunities to explore all areas — eventually leading me to find my love for Science, Technology, Engineering and Mathematics (STEM).

Yet life in tech is not what I would have expected for myself, although looking back, I should have known.

My Journey Into Tech

I didn't find tech; tech found me.

As a kid, I spent lots of time having fun on the computer. For a middle school project, I created an animation about cave dwellers in PowerPoint. In high school, I spent hours customising my MySpace page, which, unbeknownst to me, meant I was working with HTML and CSS.

When it came time to apply for Universities and choose my major, I knew I wanted to get into STEM. Computer Science did not even occur to me as something I would enjoy. I chose Mechanical Engineering because I knew it had a lot of math and science, and my dad was a Mechanical Engineer.

Into my first year, I realised it was not for me. I changed to pure Mathematics, which has always been my favourite subject. Under my Maths degree, I took an Introduction to Java course. We had an assignment to change an image to black and white using code. The visual presentation of the code coming to life made me fall in love with programming.

After that, I changed my degree to be both Mathematics and Computer Science. The following summer, I landed an internship as a developer and have never looked back.

I was lucky to find an area I loved and the confidence to pursue it.

Yet, I still had a constant pressure to do certain things, to like certain things and act in a certain way.

Nevertheless, I Coded

Walking into my first Computer Science University course, I found myself one of two females in the whole 200 person lecture hall.

Nevertheless, I coded.

I avoided the computer lab as much as possible. When I did have to go to the lab, I could feel the room full of men staring at me, wondering why I was there. I felt very out of place and that I did not belong.

Nevertheless, I coded.

Men in bars would tell me, "You are too pretty to be studying Computer Science; you should be a model instead."

Nevertheless, I coded.

I have been called bossy. I have had ideas ignored, only for a man to suggest the same thing and have others listen.

Nevertheless, I coded.

To this day, I am often the only female in the room. More often than not, I am assumed to be in a less technical role than I am.

Nevertheless, I coded.

I have been told I only got the opportunity because I am female.

Nevertheless, I coded.

I could go on.

Despite my parents best efforts to put the world at my fingertips, society decided to push back. Thankfully, I have been strong and continued on my path. I have continued to ignore all the bullshit and do what I love.

How Did I Do It?

I got involved in the tech community. There I found likeminded people and networks dedicated to supporting women in tech.

Mentors for the Bankwest Girls CoderDojo, April 2018

I surrounded myself with those who did not care what I did. Those who saw past my gender and appreciated my hard work and skills for what they were.

I learned to believe in myself. To get over my impostor syndrome and learn not to care what others thought.

My Advice to You

My advice to you, no matter your gender, industry, or role, is to support those around you. Make others feel welcome, leave biases at the door. Approach everything with an open mind.

Bring others along for the ride and help them break out of their comfort zones. They might be too shy to do it themselves. They might feel out of place or that it is not suitable for them.

// Detect dark theme var iframe = document.getElementById('tweet-1362957830332973058-492'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1362957830332973058&theme=dark" }

But it's never too late to explore and find out what you love, no matter what society tells us to do.

Inspire the next generation to do the same and challenge the status quo.

You can choose to challenge, call out inequality, change your words and actions and advocate for others.

Know that you are not alone, and nevertheless, #WeCoded.

Resources

International Women's Day: https://www.internationalwomensday.com/

DEV #SheCoded Celebration: https://dev.to/shecoded

Women in Tech Communities:

Watch a discussion from Microsoft #NewBreakpoint about tangible ways you can support Women in Tech

Getting Started with Angular Material

Melissa Houghton — Sun, 12 Jul 2020 06:40:15 +0000

This tutorial will provide an overview of how to get started with Angular Material, a UI component library that implements Material Design in Angular. We will cover how to set up an Angular application to use Angular Material and create content to demonstrate the material components, as seen below.

The full code from this tutorial is on my GitHub. Each commit aligns to a step in this post.
https://github.com/melissahoughton/angular-material-blog

Set up

Generate the app

Generate a new Angular app and add Angular Material.

Use Angular CLI to generate a new Angular App

Run ng new my-app in the command line, replacing my-app with the name of the app.

Select Y for routing.

Select SCSS for styles.
Add Angular Material

Run the following commands
```
cd my-app
ng add @angular/material
```
Choose any of the prebuilt themes provided.

Select Y for global typography (font styles).

Select Y for animations.

The add command will install @angular/cdk and @angular/material libraries and set up the material fonts, icons and base styles.

Remove defaults

The current content is auto-generated by Angular in the first step, but we want to create our own.

Remove everything in app.component.html except for <router-outlet></router-outlet>.

Create the material module

To use the material components in the app, we need to import them. Create a separate material.module.ts to import the individual components, and in the next step, we will import the material module into the app.

While not recommended, the material components can be imported directly into the app.module.ts file.

We will import all the available components for Angular Material to be ready for use in the app. You can simplify this file later to import only the required components.

Create a folder called material in src\app.
Create a file called material.module.ts and copy the below contents into that file. Or copy this material module file from my GitHub into the folder.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';

@NgModule({
  exports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,
  ]
})
export class MaterialModule { }

This file imports all the available material components and adds them as exports in a MaterialModule which will expose them to the app.

Import the material module

In app.module.ts, an import statement to the material module created in the last step.

Add MaterialModule to the imports array of the AppModule to import it into the app.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';

@NgModule({
declarations: [
  AppComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  BrowserAnimationsModule,
  MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

The app is now ready to use angular material. Continue on the next step to add content into the app, which demonstrates material components.

Add content

Create a component

Generate a component using Angular CLI

Run ng generate component home

Set up the routes

Replace the empty routes in app.routing.module.ts with

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

These steps have created a component called Home and set this as the base page.

Run ng serve to compile the app and see the text home works!

Add basic styles

Add basic styles to create spacing on the page.
We will use CSS FlexBox.
Angular also provides a robust Flex-Layout API @angular/flex-layout which combines CSS FlexBox and mediaQuery.

Add the material background style. In index.html add class mat-app-background to the body tag.
Wrap the <router-outlet></router-outlet> tag in a div with a class container

Add the following styles into app.component.scss

.container {
  max-width: 800px;
  margin: 4em auto;
  padding: 0 20px;
}

.container > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Add the following styles into home.component.scss

.flex-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 16px;
}

button {
  margin: 8px;
}

.mat-radio-button~.mat-radio-button {
  margin-left: 16px;
}

Create a header toolbar bar

In app.component.html add a toolbar above the container div to be our app header

<mat-toolbar class="mat-elevation-z6" color="primary"></mat-toolbar>

Run ng-serve and open your browser to see the header at the top of the app.

We have now added our first Angular Material component. The components are styled based on the theme.
We have set the bar to the theme's primary colour using the color attribute.
The material elevation classes add shadows to create a textured material look.

Add Angular Material Components

Replace the contents of home.component.html with the below code, which contains a sample of material components. Refresh your browser to see the Angular Material components in action.

<h1 class="mat-display-1">Easy, Breezy, Beautiful: Angular Material</h1>

<p>Here are some random angular material components</p>

<mat-card>
    <mat-card-header>
        <img mat-card-avatar src="https://cdn.pixabay.com/photo/2018/10/11/12/31/black-cat-3739702_1280.jpg"
            alt="My Photos">
        <mat-card-title>Easy, Breezy, Beautiful</mat-card-title>
        <mat-card-subtitle>Angular Material</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <p>
            This is an amazing blog on Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
        </p>
    </mat-card-content>
    <mat-card-actions align="end">
        <button mat-raised-button color="primary">Read More</button>
    </mat-card-actions>
</mat-card>

<div class="flex-container">
    <div>
        <button mat-raised-button color="primary">Raised Primary</button>
        <button mat-raised-button color="accent">Raised Accent</button>
        <button mat-stroked-button>Basic Stroked</button>
        <button mat-stroked-button color="primary">Stroked Primary</button>
    </div>

    <button mat-fab>
        <mat-icon>thumb_up</mat-icon>
    </button>

    <mat-radio-group aria-label="Select an option">
        <mat-radio-button value="1">Option 1</mat-radio-button>
        <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>

    <mat-checkbox>Check me!</mat-checkbox>

    <mat-form-field>
        <mat-label>Choose a date</mat-label>
        <input matInput [matDatepicker]="picker">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <mat-slider></mat-slider>


    <button mat-flat-button color="primary" matTooltip="Info about the action" matTooltipPosition="after"
        aria-label="Button that displays a tooltip when focused or hovered over">
        Tooltip
    </button>
</div>

<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

Congratulations! You now have an Angular app using Angular Material.

Check out the Angular Material documentation for the full set of components and how to use them.

Keeping up in a Pandemic

Melissa Houghton — Sun, 26 Apr 2020 04:25:16 +0000

It is ok not to be ok.

What does it mean to keep up during a pandemic? What are we supposed to do? Are we supposed to use this time to learn a new skill? Or do our best to survive, keeping ourselves and others safe?

If you are having trouble doing the basics, you are not alone.

Throughout this time, I have felt I should be doing more. I see posts of people learning new skills, running live coding streams, and online workshops. They are using the lockdown to their advantage. Meanwhile, I struggle with the day-to-day.

I had big plans for this year. I created a website, started a blog and applied to speak at conferences. I had goals to post once a month and complete ten public speaking events this year. I joined the organising committee for DDD Melbourne and another group that was brainstorming the future of the .NET community. I was eager to get involved and be proactive in the tech community. I finished one blog post and was accepted to speak at Full Stack Day, New Zealand in March.

Then the pandemic hit.

Company-wide travel restrictions and self-quarantine for international travellers meant the conference in New Zealand could not happen.

Working from home became mandatory. We all had to adjust to a new way of doing things, with no end in sight.

I hoped that working from home would mean more time to get things done. I would have more time to write blog posts, conference talks and learn new technologies.

I was wrong.

We've been working from home now for six weeks. Some days are better than others. One week I was very productive, accomplished all my tasks and was positive about my work. The next, I had trouble concentrating, was not able to focus, felt down and angry at myself for not achieving as much as I thought I should be.

My big plans fell to the waste side as I tried to figure out how to make this all work.

Many people are worse off than I am, having to look after kids while trying to work, or not able to work at all. I am grateful I am still able to work, but that does not mean it is unchallenging. This pandemic has impacted us all in different ways.

The purpose of this post is not to be all doom and gloom but instead to tell you that it is ok and you are not alone. Not everyone can accomplish more or learn a new skill. It is ok to have a glass of wine, to have good days and bad, to struggle to keep on top of routine tasks. The conference talks and new skills can wait. Take care of yourself and do what is best for you. We will get through this.

Battles of an Impostor

Melissa Houghton — Sat, 22 Feb 2020 01:17:24 +0000

My battle with impostor syndrome and three steps to help you fight it.

Impostor syndrome is a popular subject and with good reason. You or someone close to you suffer from impostor syndrome.

I experience impostor syndrome regularly and have battled against it all my life. My first conference talk was on the subject, and now my first blog post. It made me reluctant to write a post, to begin with, and apply to conferences. It has held me back time and time again. Now, I have come up with tricks to win the battle and wanted to share my experience with you.

What is Impostor Syndrome?

Clinical psychologists Pauline Clance and Suzanne Imes first defined impostor syndrome in 1978 as:

An internal experience of intellectual phoniness, despite outstanding academic and professional accomplishments.

Their study focused on high achieving women, but later studies found any gender can experience it.

Impostor syndrome has other names: imposter syndrome (alternate spelling), impostor phenomenon, impostorism, and fraud syndrome.

Whatever you want to call it, it is when you feel like a fraud, you are getting away with something, and you do not deserve your achievements nor opportunities, and fear others find out.

My Story

In September 2019, I did the locknote for DDD Sydney.

DDD Sydney

@dddsydney

It's our pleasure to introduce our locknote speaker, @meliss_houghton, part of the fabulous @DDDPerth crew!

Melissa will be sharing her experience dealing with impostor syndrome, which I'm sure many of us have experienced.

Don't forget your 🎫! ti.to/ddd-sydney/ddd…

22:28 PM - 03 Sep 2019

When I first heard that they wanted me for the locknote, I thought it must be a prank!

It was my night last in Perth, before moving to Melbourne. I was leaving my job as a Software Developer at Bankwest, where I had worked for four and a half years. I was about to start a new role as a Senior Developer at Telstra Purple. A company I had always looked up to as employing brilliant people. DDD Perth had just finished, and I was talking to colleagues and friends over a few drinks. It was the last time I would see them and, people were sharing words of encouragement and praise from their time working with me. As kind words were said to me and so much was happening, I was having an intense battle with impostor syndrome.

It was during this battle that Michele from YOW, who was sponsoring the talk, approached to tell me they wanted me to do the locknote at DDD Sydney!

My brain immediately jumped to thinking it must be some sort of conspiracy. No way colleagues I admired and people in the tech community that I looked up to, thought this highly of me. My subconscious was telling me that they must be up to something.

But they weren't.

I was experiencing impostor syndrome.

It was not the first time I have experienced impostor syndrome,
and yet it continues to occur; it is an ongoing battle.

When I was at Bankwest, I had a secondment as the Technology Graduate Program Manager.

The most common problem the graduates had was feelings of not meeting expectations and questioning why they got the role. I talked them through their feelings and helped them to battle against what they were experiencing, which was impostor syndrome.

Ironically, in that role, I felt like an impostor. I had finished the graduate program before moving directly into managing it. I had no prior management experience, and half of the graduates reporting into me were older than me. Not that age matters, but it was another factor that fed into my impostor syndrome.

How did I get through this? How did I ensure that these feelings would not hold me back? How did I help others do the same?

Three Steps to Win the Battle

I came up with three steps to win the battle with impostor syndrome:

Recognise
Rationalise
Reflect

First, I learned how to recognise impostor syndrome as it was happening. After I acknowledge it, I rationalise the situation; people were not out to get me, there was no conspiracy, and what benefit would they have if there was? Lastly, I reflect on my accomplishments; I have worked hard! I use positive thoughts to empower me to fight against impostor syndrome, flip the beliefs and prove myself wrong!

The motivation to fight impostor syndrome encouraged me to say yes, accept the chance to give the lock note, and many other opportunities.

Recognise: Am I Experiencing Impostor Syndrome?

70% of people experience impostor syndrome at some point in their life. Anyone can suffer from it, but some are at higher risk.

You are more likely to experience impostor syndrome if you are or have been:

From underrepresented communities
Suffering from mental health issues
Abused or highly criticised
Naturally talented and had high expectations against you
Continually learning new things and outside of your comfort zone
First-generation university student

Graduate students were the subject of several studies I found. The studies found them to experience impostor syndrome at a higher rate because of the constant learning environment. In tech, we are continually learning new things, and I believe these same theories apply to us.

How does Impostor Syndrome Present Itself?

Comic by Honey Dill

We so-called impostors have trouble accepting compliments. We make excuses say "they have to say that" and brush it off, not recognising it for what it is.

When it comes to completing work, we either overprepare or procrastinate. We can be workaholics and perfectionists. Or avoid tasks altogether for fear of failing or not living up to expectations. Those that are naturally talented, or continuously told they are the "smart one"; get frustrated when not able to grasp concepts right away and, often, give up.

If we notice ourselves or our friends doing any of these things, they might be experiencing impostor syndrome.

What are the risks?

Impostor syndrome can lead to:

Increased depression and unhappiness
General life dissatisfaction
Avoidance sharing ideas and opinions
Reluctance accepting or apply for opportunities
Lack of motivation
Burn out

When I was the Graduate Program Manager, I took on more responsibility than I had ever had before. I had 14 direct reports and was entirely out of my comfort zone. Outside my role, I was trying to maintain involvement in volunteer groups and organisations. I had over-committed myself, was losing motivation and no longer believed in my abilities. I was not happy in my role nor my life; I was perpetually overwhelmed.

Thankfully, after a while, I recognised what was happening and cut back on commitments. However, negative thoughts and feeling of being an impostor remained.

Rationalise: Am I an Impostor?

How do you rationalise those thoughts and feelings away? Think through, does this make sense?

How likely is it that someone is going to run up here and pull me off stage because me giving the lock note was some sort of joke? Not very likely, I hope.

Share the feelings! Talk about it! Educate someone whom you think might be experiencing it. We can use conversations to get affirmation from others that it is sensible to feel like an impostor, but our feelings do not reflect the truth.

"Bill Gates" by Sebastian Vital / Text added from original. Quote Source.

Stop comparing yourself to others!

Think, how did you get to where you are; was it luck or was it the hard work and effort you put in?

Someone gave you that role, that job, that opportunity for a reason!

You are great for your reasons and talents. They hired you not because they expected you to know everything but because they saw the potential in you.

In reality, most of us don't know what we are doing. I don't know how to write a blog or do a conference talk, yet I am doing it.

It is ok not to know everything. Use the power of not knowing as motivation to achieve more. Not knowing gives us the ability to think outside of the box and do things no one else has ever done.

Challenge negative thoughts and practice positive self-talk. Flip limiting believes beliefs and use it as a challenge, a motivation to prove yourself wrong!

Remember, it is ok to fail. The important thing is to keep learning.

Even after I rationalised the negative thoughts of being a phony Graduate manager, I was still not happy in the role. I was able to see past the feelings of being a fraud, to recognise that I was doing well, but it was just not for me. I cut the secondment short and moved back into a developer role. I use my experience as a positive one, to motivate me, and I reflect on it as an achievement.

Reflect: What are the Facts?

I flip the negative thoughts and feelings that impostor syndrome throws at me through reflection.

I keep a work journal where I take notes on what I have done each day, making sure to note accomplishments, no matter how small.
From completing a card to winning an award, I write it down.
Later, I review my journal and am always surprised about how much I have accomplished.

In times where I feel like I am not making progress, or I do not belong in my role, these little notes help to prove otherwise and turn negative thoughts positive.

Feedback

Feedback is a powerful tool to combat impostor syndrome. Collect feedback on yourself and give it to others. Use the feedback to reflect and find out the facts of the situation.

When the Graduates would share feelings of being a fraud, I gave them the assignment of collecting feedback from their teammates. They were often surprised by the result.

One Grad told me she did not know why the Senior was spending so much time helping her. She said she felt bad for wasting his time.

When I spoke to the Senior, he said she was doing well. He was proud of her progress; she picked up the technology quickly and was contributing to the team. He felt sorry for not giving her more of his time.

It was all a matter of perspective.

Expectations Grads had put on themselves did not match reality. Finding out what the reality was, recognising that it did not match their internal feelings, rationalising and reflecting, helped shift the negative thoughts.

If you are on the other side, tell people when they have done well, even if they brush it off, continuous feedback can help to wear negative thoughts down.

When I was a graduate, I shared an interest in leadership roles with a colleague. When the Graduate Manager role came up, he approached me and told me I should apply.

My immediate reaction was "no way; I would not be able to get the role nor be any good at it".

But he believed in me, and that made me believe in myself. With his support, I applied and was successful!

A few years later, when I wanted to move to Melbourne, I applied to Senior positions, despite being a midtier developer. I did this because my manager had told me I was reaching Senior level. Without him telling me that, I would not have had the confidence to apply for those roles.

If you see potential in others, encourage them. Reach out, be a mentor, provide feedback and help them to reflect on their accomplishments.

How Can We Battle Against It?

Impostor syndrome can be beneficial! We can use it as motivation!

Turn the negative self-doubt into a challenge. Prove the internal monologue saying you are not good enough wrong. Even if it was some sort of prank to get you into that position, it is not a very good one if you do it confidently and you do it well.

Remember it's ok not to know everything, and it is ok to fail. Just keep learning and do not let impostor syndrome hold you back.

Use the three steps to win the battle with impostor syndrome:

Recognise
Rationalise
Reflect

Recognise impostor syndrome in ourselves and others. Keep an eye out for those who are at higher risk and those who make excuses, over-prepare and procrastinate. We can support one another to try for new opportunities and celebrate success.

Rationalise the situation and think through the internal feelings of being a phony. Share these feelings with others and combat the fear of being discovered as a fraud.

Reflect on accomplishments. Motivate ourselves to believe we can do it, we can give the lock note at DDD Sydney, and we can get that Senior position!

The battle with impostor syndrome is an ongoing one. Just remember to recognise, rationalise and reflect.

Watch Full Talk

Watch my full talk, Battles of an Impostor, from DDD Sydney 2019: