Technical Proficiency

Mastery of Technology

A senior developer has a deep understanding of the technology stack they work with. This includes not only proficiency in multiple programming languages but also a thorough understanding of frameworks, libraries, and tools. They can solve complex problems efficiently and are adept at debugging and optimising code.

Architectural Knowledge

Beyond writing code, senior developers have a strong grasp of software architecture. They can design scalable, maintainable, and robust systems. They understand the principles of good software design and can apply patterns and best practices to ensure high-quality codebases.

Leadership and Mentorship

Guiding Junior Developers

One of the critical roles of a senior developer is to mentor junior developers.
This involves not only sharing knowledge and best practices but also providing constructive feedback and guidance.
Senior developers help shape the growth and development of their peers, fostering a collaborative and learning-oriented environment.

Leading by Example

Senior developers lead by example. They demonstrate professionalism, dedication, and a strong work ethic. Their behaviour sets the standard for the team, influencing the culture and productivity of the development team.

Problem-Solving and Decision Making

Strategic Thinking

Senior developers are strategic thinkers. They understand the bigger picture and how their work impacts the business objectives. They can prioritise tasks effectively, balancing short-term goals with long-term vision. Their decisions are informed by both technical and business considerations.

Proactive Problem Solving

Rather than just reacting to issues, senior developers anticipate potential problems and address them proactively. They can navigate complex challenges, identify root causes, and implement effective solutions that prevent future issues.

Communication and Collaboration

Effective Communication

Communication is a key skill for senior developers. They can articulate technical concepts to non-technical stakeholders, ensuring everyone understands the implications and benefits of their work. They are also excellent listeners, able to comprehend and address the concerns of their team and other departments.

Cross-Functional Collaboration

Senior developers often work closely with other teams, such as product management, design, and operations. They understand the importance of collaboration and can work effectively in cross-functional teams to deliver high-quality products.

Continuous Learning and Improvement

Staying Current

The tech industry is constantly evolving, and senior developers stay current with the latest trends and advancements. They are committed to continuous learning, whether through formal education, attending conferences, or experimenting with new technologies.

Reflecting and Adapting

Senior developers regularly reflect on their work and seek ways to improve. They are open to feedback and willing to adapt their methods to enhance efficiency and effectiveness.

Conclusion

Being a senior developer is a multifaceted role that goes beyond coding. It requires a combination of technical expertise, leadership, strategic thinking, effective communication, and a commitment to continuous learning. Senior developers play a crucial role in driving the success of their teams and the overall business, making them invaluable assets to any organization. Whether you're aspiring to become a senior developer or looking to understand the role better, these attributes and responsibilities provide a comprehensive overview of what it truly means to be a senior developer.

Answering questions in Auth0 community forum is one of the ways I give back to the community and also learn more about common problems or confusions Auth0 users face.

Recently, I came across a question asking how to customize the Auth0 email templates in a more maintainable way.

Link: https://community.auth0.com/t/localization-and-saving-the-user-language/90515

Auth0 supports email template customization for various emails that is sent to a user as part of different flows, such as verification email, password reset email, and so on. You can use a combination of Liquid and HTML to customize the email templates.

On top of that, Auth0 exposes some variables that you can use in the email templates. Things like the user's name, email, and other information.

Here is an example of the variables you can use in the email templates.

<html>
  <head>
    ...
  </head>
  <body>
    <center>
      <p>
        {% if user.user_metadata.lang == 'es' %}
          <b>Hola {{ user.name }}, ...</b>
        {% elsif user.user_metadata.lang == 'it' %}
        <b>Ciao {{ user.name }}, ...</b>
        {% else %}
          <b>Hi {{user.name}} ...</b>
        {% endif %}
      </p>
      <table ...>
        <tr>
          <td>
          ...

You can see that the email template is using Liquid to check the user's language and display the appropriate greeting.

This is a great feature and it allows you to customize the email templates to fit your needs.

Note: You need to set the user's language in the user's metadata. You can do this in different ways which is out of the scope of this article.

What is Liquid?

Liquid is a template language that uses a combination of objects, tags, and filters inside template files to display dynamic content. Auth0 uses Liquid to customize the email template.

Problem

If your application supports multiple languages, you might want to customize the email templates to display the appropriate message based on the user's language.

In a scenario like this, you might end up with a lot of if-else statements in the email template. This can make the email template hard to maintain.

Depending on the number of languages you need to support and the complexity of the email template, this can become a maintenance nightmare.

Add to that, the fact that most users manage the email templates in the Auth0 dashboard, which means:

• The code is not version controlled

• Editor experience is limited

• You can't use any of the tools you use to write code

• This code is not part of your test and build pipeline which means you can't test it and changes can break the email template

Solution

My solution to the problem is:

1- Keep these email templates as part of our codebase. This way, we can use all the tools we use to manage our code. We can use version control, we can use our editor, we can use our build pipeline, and so on.

2- Use code to generate the email template. This way, we can write reusable, modular code that is easy to maintain.

3- Use JSON to maintain different language translations. This gives us the flexibility to add new languages without having to change the code.

How to do it?

We can use any programming language to generate the email template. In this example, I will be using Node.js and TypeScript.

I have created a GitHub repository that can be used as a starting point for this solution.

The repository contains a simple Node.js application that can be used to generate the email template.

Prerequisites

• Node.js installed on your machine.

• Auth0 account with a tenant created.

Project setup

Project code is under the src folder. There are 3 folders inside the src folder:

• templates folder contains the email templates. These are the templates that will be used to generate the final email template. These templates are written in TypeScript so we can easily use variables and functions inside the them.

• languages folder contains the language translations. These are JSON files that contain the translations for each language.

• scripts folder contains the scripts that will be used to generate the final email template.

What is inside the templates folder?

This folder contains a file for each email template. File name are the same as the template name in Auth0 for easy reference.

As an example, I have included a file called verification-email.ts that contains the email template for the verification email.

I have copied the original Auth0 email template and stored it in a variable called html. I am treating the original template as a string. Note that I am using backticks to define the string. This is because I want to use multi-line strings, be able to use variables and also call functions inside the string.

const html = `
...
    <h1>${localizeMessage("welcome")}</h1>
        <p>${localizeMessage("thankYou")}</p>
        <p><a href="{{ url }}">${localizeMessage("confirm")}</a></p>
         <p>
            ${localizeMessage("needHelp")}
         </p>
...
`;

The localizeMessage function is a helper function that will be used to localize the message. It takes a key as an argument and returns the appropriate Liquid if/else statement to support the translation for all available languages.

    {% if user.user_metadata.lang == 'en' %}
        Hello {{application.user}} Welcome to the site


    {% elsif user.user_metadata.lang == 'fr' %}
        Bonjour {{application.user}} Bienvenue sur le site


    {% elsif user.user_metadata.lang == 'jp' %}
        こんにちは{{application.user}}さん。サイトへようこそ。


    {% else %}
        Hello {{application.user}} Welcome to the site
    {% endif %}

So anywhere in the email template I need to localize a message, I can call the localizeMessage function and pass the key as an argument.

There is also an index.ts file that exports an array which contains all the email template names. We will use this variable later in code to decide which templates to include in our build.

  export const templates = ["verification-email"];

What is inside the languages folder?

As an example I have included the translation for English, French and Japanese represented by the files en.json, fr.json, and jp.json respectively.

Each json file is a map of message keys to the translated message. For example, the fr.json file might look like this:

{
    "welcome": "Bonjour {{application.user}} Bienvenue sur le site",
    "thankYou": "Merci de vous être inscrit. Veuillez vérifier votre adresse e-mail en cliquant sur le lien suivant:",
    "confirm": "Confirmer mon compte",
    "needHelp": "Si vous rencontrez des problèmes avec votre compte, n'hésitez pas à nous contacter en répondant à ce mail.",
    "regards": "Cordialement",
    "footer": "Si vous n'avez pas fait cette demande, veuillez nous contacter en répondant à ce mail."
}

For this to work properly, the message keys should be the same as the message keys in all language files.

There is also an index.ts file that exports all the language codes as a single array. This is the array that will be used when deciding which language translation are available and should be included in the generated email template.

What is inside the scripts folder?

This folder contains two main functions:

• localizeMessage which I described above. This function uses the array of language codes to decide which translations should be included in the generated email template.

• writeFile which is used to write the generated email template to a file.

and an index.ts file that contains the main function. This function loops over the list of templates exported from templates folder and generates the localized email template for each one.

const generateTemplates = async () => {
    for (const template of templates) {
        const templateContent = require(`../templates/${template}`).default;
        writeFile(template, templateContent);
    }
};

How to run the project?

To run the project, we need to install the dependencies first. You can do that by running npm install in the root folder of the project.

Next we need to build the project. You can do that by running npm run build in the root folder of the project.

Build command will compile the TypeScript code. You can see the compiled JavaScript code in the build folder.

Finally, we need to generate the email templates. You can do that by running npm run generate in the root folder of the project.

This command will generate the email templates and store them in the output folder.

Generated email templates are html files. You can open them in your browser to see the final result. There is a serve script that can be used to serve the generated email templates. You can run npm run serve to start the server.

Note: Build and Output folders are ignored by git. You can change this in the .gitignore file.

How to use the generated email templates?

After you have generated the email templates, you can use them in your Auth0 tenant. You can find the instructions on how to do that in the Auth0 documentation.

Simply open the generated email template in your code editor and copy the content of the file. Then go to the Auth0 dashboard and open the email template you want to customize. Paste the content of the generated email template in the editor and save the changes.

How to add a new language?

To add a new language, you need to add a new JSON file in the languages folder. The file name should be the language code. For example, if you want to add a new language called Spanish, you need to create a file called es.json in the languages folder.

You need to also add the language code to the languages array in the index.ts file in the languages folder.

How to add a new email template?

To add a new email template, you need to add a new file in the templates folder. The file name should be the same as the template name in Auth0. For example, if you want to add a new email template called change-password, you need to create a file called my-template.ts in the templates folder.

Then copy the content of the original email template from Auth0 and paste it in the my-template.ts file and customize it as you like.

Don't forget to add the template name to the templates array in the index.ts file in the templates folder.

Future improvements

• Add validation for generated HTML files.

• Integrate the project build and template generation with your project CI/CD pipeline.

• Use Auth0 Management API to update an email template as part CI/CD pipeline.

• Add test for templates as part of the CI/CD pipeline. We can automate sending a test email so we can make sure it works as expected before deploying it to production.

Conclusion

In this article, we tested the idea of using code and json language files to localize email templates. We created a simple project that can be used to generate localized email templates for Auth0. This project can be used as a starting point for your own project. You can add more functions to help you process the email templates and make them more dynamic.

For example, you might want to pull some data from other sources like external APIs or databases and use it in your email templates.

You can find the source code for this project on GitHub

Reference

• Auth0 Email Templates

Thanks for reading this article. Please reach out here or on Twitter if you have any feedback or questions.

1. Tech Talk Sessions

Overview

Tech talk sessions are structured presentations or discussions where team members share their knowledge on specific topics. These sessions can cover a wide range of subjects, from new technologies and best practices to lessons learned from recent projects.

Key Features

• Focused Discussions: Each session focuses on a specific topic, allowing for in-depth exploration.

• Interactive: Encourage questions and discussions to deepen understanding.

• Regular Scheduling: Can be held on a regular basis, such as weekly or monthly.

Benefits

• Promotes knowledge sharing and continuous learning within the team.

• Provides a platform for team members to showcase their expertise.

• Encourages cross-functional knowledge exchange.

2. Workshops

Overview

Workshops are hands-on training sessions where team members collaboratively work on specific tasks or projects. These sessions are designed to enhance practical skills and foster teamwork.

Key Features

• Interactive Learning: Participants actively engage in exercises and problem-solving activities.

• Collaborative Environment: Team members work together, sharing knowledge and techniques.

• Real-World Applications: Focus on practical skills that can be applied to ongoing projects.

Benefits

• Enhances practical skills and technical proficiency.

• Fosters teamwork and collaboration.

• Provides immediate feedback and learning opportunities.

3. Pair Programming

Overview

Pair programming is a practice where two developers work together at one workstation, with one writing code (the driver) and the other reviewing (the observer or navigator). This technique is highly effective for knowledge sharing and improving code quality.

Key Features

• Real-Time Collaboration: Both developers work together, sharing ideas and solutions.

• Continuous Code Review: The observer provides immediate feedback, leading to better code quality.

• Skill Development: Less experienced developers learn from more experienced colleagues.

Benefits

• Enhances code quality and reduces bugs.

• Fosters a culture of collaboration and learning.

• Helps team members share knowledge and develop skills.

4. Pull Requests

Overview

Pull requests are a fundamental part of many version control systems, such as Git. They allow developers to review and discuss code changes before merging them into the main codebase.

Key Features

• Code Review: Team members review and provide feedback on code changes.

• Discussion and Collaboration: Pull requests serve as a platform for discussing improvements and best practices.

• Version Control: Ensures that all changes are tracked and can be reverted if necessary.

Benefits

• Ensures high code quality through peer reviews.

• Facilitates knowledge sharing and learning from feedback.

• Promotes a collaborative development process.

5. Project Documentation Using README Files

Overview

README files are essential for project documentation, providing a quick reference for understanding the purpose, setup, usage, and contributions to a project. They are typically the first point of contact for anyone new to the project.

Key Features

• Comprehensive Overview: Includes project goals, setup instructions, usage guidelines, and contribution policies.

• Markdown Format: Easy to format and read, supporting links, images, and code snippets.

• Version Control Integration: Often part of the project repository, making it easy to access and update.

Benefits

• Provides clear and concise documentation for new and existing team members.

• Enhances project understanding and onboarding processes.

• Encourages consistency and standardization across projects.

6. Knowledge Base Solutions (Wiki)

Overview

A knowledge base, often implemented as a wiki, is a centralised repository of information where team members can document and share knowledge. It serves as a reference point for everyone on the team.

Key Features

• Centralised Information: All relevant information is stored in one place.

• Searchable Content: Easy to find specific information through search functionality.

• Collaborative Editing: Team members can contribute and update content collaboratively.

Benefits

• Provides a single source of truth for the team.

• Facilitates easy access to information and reduces duplication of effort.

• Encourages continuous documentation and updating of knowledge.

7. Async communications like Slack

Overview

Slack is a popular messaging and collaboration platform that facilitates real-time communication and information sharing within teams. It can be used for quick discussions, file sharing, and integrating with other tools.

Key Features

• Channels: Organise conversations into specific channels for projects, teams, or topics.

• Integration: Connects with various tools like GitHub, Google Drive, and Jira.

• Searchable Archives: Allows easy retrieval of past conversations and shared files.

Benefits

• Enhances real-time communication and quick information sharing.

• Centralises team communication and reduces email clutter.

• Supports integrations with a wide range of productivity tools.

8. Technical Blogs

Overview

Technical blogs are written articles where team members share their insights, experiences, and expertise on various topics. These blogs can be internal or external and serve as a valuable resource for both current and future team members.

Key Features

• Detailed Articles: In-depth explanations of concepts, technologies, or project experiences.

• Knowledge Sharing: Provides a platform for team members to share their expertise.

• Accessible Resource: Serves as a long-term reference for the team.

Benefits

• Encourages team members to articulate and share their knowledge.

• Provides a valuable resource for onboarding new team members.

• Enhances the team's visibility and reputation within the wider tech community.

Conclusion

Sharing knowledge effectively is the cornerstone of a successful software team. By implementing practices like tech talk sessions, workshops, pair programming, pull requests, and leveraging tools like knowledge base solutions, Slack, and technical blogs, teams can create an environment of continuous learning and collaboration. These strategies not only improve productivity and code quality but also ensure that valuable knowledge is preserved and accessible, driving the team toward greater innovation and success.

PKCE (Proof Key for Code Exchange) is an extension to the OAuth 2.0 protocol that prevents authorization code interception attacks. It is a simple, lightweight mechanism that can be implemented in any application that requests an authorization code.

Why do I need PKCE in my mobile or web app?

It all started with the OAuth 2.0 Authorization Code Grant. This grant type is used by native and web applications to obtain an access token by exchanging an authorization code for a token. The authorization code is obtained by redirecting the user to the authorization server's authorization endpoint. The authorization endpoint redirects the user back to the application with an authorization code.

The authorization code is a temporary code that the client will exchange for an access token. The authorization code is a single-use code, meaning that it can only be used once. If an attacker manages to intercept the authorization code, they can exchange it for an access token. This is a serious security issue that can result in the attacker being able to access protected resources on behalf of the user.

This attack is known as the authorization code interception attack and is described in RFC 7636. The diagram below shows the authorization code interception attack.

PKCE is an extension to the authorization code grant that prevents this type of attack. It does this by including a code challenge and code verifier in the authorization request. The authorization server will then perform a challenge-response validation to ensure that the code verifier matches the code challenge. If the validation fails, the authorization server will reject the request.

How does PKCE work?

PKCE is a simple extension to the authorization code grant. It adds two extra parameters to the authorization code grant: code_challenge and code_verifier. The code_challenge is a Base64-encoded SHA-256 hash of the code_verifier. The code_verifier is a cryptographically random string. Both code_verifier and the code_challenge is generated by the client.

The code_challenge and code_verifier are used to perform a challenge-response validation. The authorization server will generate a code_challenge from the code_verifier and compare it to the code_challenge included in the authorization request. If the two values match, the authorization server will issue an authorization token. If the two values do not match, the authorization server will reject the request.

If an attacker intercepts the authorization code, they will not be able to exchange it for an access token because they do not have the code_verifier. The diagram below shows the authorization code interception attack with PKCE.

How do I implement PKCE?

Implementing PKCE is simple. You just need to generate a cryptographically random string and hash it using SHA-256. You can use any programming language to generate the code_verifier and code_challenge. The following example uses Node.js to generate the code_verifier and code_challenge.

const crypto = require('crypto');

const codeVerifier = crypto.randomBytes(32).toString('base64').replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
const codeChallenge = crypto.createHash('sha256').update(codeVerifier).digest('base64').replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');

You can then include the code_verifier in the authorization request. The authorization server will then perform a challenge-response validation to ensure that the code_verifier matches the code_challenge. If the validation fails, the authorization server will reject the request.

What is the difference between S256 and plain?

The code_challenge_method parameter can be set to either S256 or plain. The S256 method uses SHA-256 to generate the code_challenge from the code_verifier. The plain method uses the code_verifier directly as the code_challenge. The S256 method is recommended because it provides a higher level of security.

How do I use PKCE with Auth0?

Auth0 supports PKCE by default. You can use PKCE with any of the Auth0 SDKs or with any OAuth 2.0 library.

How other OAuth Providers Implement PKCE?

Google, Facebook, Microsoft, GitHub, Twitter and other OAuth providers support PKCE. You can find more information about how they implement PKCE in the following articles:

• Google
• Facebook
• Microsoft
• GitHub
• Twitter

Conclusion

PKCE is a simple extension to the OAuth 2.0 authorization code grant that prevents authorization code interception attacks. It is a lightweight mechanism that can be implemented in any application that requests an authorization code.

Although PKCE was originally designed for native and web applications, it is recommended that you use PKCE with all applications that request an authorization code. This includes mobile applications, desktop applications, single-page applications, and server-side applications.

Further Reading

• RFC 7636
• OAuth 2.0 for Native Apps
• OAuth 2.0 for Browser-Based Apps
• OAuth 2.0 for Mobile Apps
• OAuth 2.0 for Server-to-Server Applications
• OAuth 2.0 for Single-Page Applications
• OAuth 2.0 for Regular Web Apps
• OAuth 2.0 for Desktop Apps
• OAuth 2.0 for IoT Apps
• OAuth 2.0 for Machine-to-Machine Apps
• OAuth 2.0 for Multi-Tenant Apps
• OAuth 2.0 for Single Sign-On
• OAuth 2.0 for APIs

Thanks for reading this article. Please reach out here or on Twitter if you have any feedback or questions.

What is Risk-based Authentication?

To put it simply, Risk-based Authentication or RBA uses real-time intelligence about a user to decide if their activity is normal (low-risk) or suspicious (high-risk).

RBA estimates a risk score based on login behaviour. The calculation of risk score typically happens for any given access attempt in real-time, based on a predefined set of rules. Users are then presented with authentication options appropriate to that risk level.

Many factors are considered when assessing the risk of login activity. For example:

• Location of the user

• Device/browser

• IP and network information

• Number of attempts to log in

Or factors related to a user and their context. For example, a login attempt to the company's HR system at 2 am can be considered suspicious (high risk).

And many more factors that might make sense in a particular context.

Most Authentication providers support RBA.

Here are links to few examples, Auth0, Okta, Azure AD, AWS Cognito and Google support RBA.

Using RBA you do not need to always enforce MFA and can only ask for additional authentication if it's required based on the risk score. This helps to improve the user experience of the login flow and make it easier for low-risk logins to happen with less friction.

Built-in Auth0 features for Risk-based Authentication

Luckily, Auth0 has some features to support you here

• Adaptive MFA - this feature triggers MFA and asks the user to complete an MFA Challenge when the confidence is low (activity is high-risk).

Auth0 also provides a range of Attack Protection features which goes hand in hand with the RBA.

• Breached Password Detection - Auth0 tracks large security breaches that are happening on major third-party sites. If a user password is leaked in a data breach, they will be notified and also they might get blocked from logging in.

• Bot Detection - Bot detection mitigates scripted attacks by detecting when a request is likely to be coming from a bot and presenting a Captcha challenge that blocks the Bot attack.

These features support most of the typical scenarios for Risk-based Authentication and you can further customise them to best match your usage.

What is have i been pwned and how can it help?

Created by security expert Troy Hunt, have i been pwned is a website that allows Internet users to check whether their data has been compromised by data breaches.

As a user, you can go to this website, enter your email and get a list of data breaches that your email address has been involved in.

have i been pwned also offers REST APIs that you can use to make the same queries through code.

For example, this is the response for an API that returns the list of data breaches for an email address.

Request

https://haveibeenpwned.com/api/v3/breachedaccount/{account}?truncateResponse=false

Response:

[
    {
        "Name": "XYZ",
        "Title": "XYZ",
        "Domain": "xyz.com",
        "BreachDate": "2020-03-22",
        "AddedDate": "2020-11-15T00:59:50Z",
        "ModifiedDate": "2020-11-15T01:07:10Z",
        "Description": "In March 2020, the stock photo site .....",
        "LogoPath": ".../Images/PwnedLogos/xyz.png",
        "DataClasses": [
            "Email addresses",
            "IP addresses",
            "Names",
            "Passwords",
            "Phone numbers",
            "Physical addresses",
            "Usernames"
        ],
        "IsVerified": true,
        "IsFabricated": false,
        "IsSensitive": false,
        "IsRetired": false,
        "IsSpamList": false,
        "IsMalware": false
    },
...
]

I think you can guess where I am going with all this by now. I want to use have i been pwned REST APIs as part of my login flow to detect if a username (email) has been listed in a data breach and react appropriately based on the risk factor.

For example, if the user (email address) is listed in a recent data breach, I will send the user a change (reset) password email and ask them to complete an MFA challenge. I will further describe the login flow in the rest of this article.

To use the APIs you will need to purchase an API key. Please read these instructions to get your HIBP API key.

Use Auth0 Actions to extend the Risk-based Authentication

As mentioned Auth0 built-in features already provide a solid ground for Risk-based Authentication but based on your business requirement you might need to consider more factors as part of your risk assessment.

This is where Auth0 Actions shine and let you extend the capabilities of Auth0 beyond what is defined.

have i been pwned provides data for data breaches and also Pastes and usually has the data before other sources. So it can be a good accompanying source to secure your system.

However, using the have i been pwned REST APIs is just an example to demonstrate how you can use other data sources to enhance your risk assessment. So please do your research before adopting this data source.

What are Auth0 Actions?

Auth0 Actions are secure, tenant-specific, versioned functions written in Node.js that execute at certain points during the Auth0 runtime. Actions are used to customize and extend Auth0’s capabilities with custom logic. auth0.com/docs/customize/actions

So the idea for this integration is to use a Login Action and write a Node.js function to:

• Call have i been pwned REST APIs to figure out if the email address (username) is listed in a data breach.

• have i been pwned response will give me a list of data breaches for a given email address.

• I will pick the most recent breach.

• Then I check to see if the user has changed their password after the most recent data breach.

• If so user can login without extra authentication.

• If Not, the user needs to complete an MFA challenge and they receive an email to change(reset) their password.

This flow chart shows how the new login flow looks like this.

Note: Users signing in with social or enterprise connections must reset their passwords with the identity provider (such as Google or Facebook).

In the case of social users, you might want to limit their access to sensitive data in the system or warn them about the breach. So they can take any required actions. (not in the scope of this example)

Examples of other things you can do are:

• Completely block user access if you are dealing with a high-risk activity. For example, if the leaked account belongs to a company's Finance department staff that can do high valued monetary transactions. In this case, you might take more drastic measures involving in-person account recovery or using KYC services like Onfido to make sure of the user identity.

For sake of this blog, we will stick with a simpler REST API integration example.

Create your first Action

To start you need an Auth0 account. If you don’t already have one, follow these instructions to set up one.

After you log in to your Auth0 account click on the Actions > Flows > Login to create the login Action.

This creates a post-login trigger that runs as part of the Login flow. It is executed after a user logs in and when a Refresh Token is requested.

Click on the + button in Add Action and select Build Custom. Call it have I been pwned and leave the rest as is.

After Creation, you come to the edit screen. Here you can write the code for your Action, test it and deploy it.

Next, we write the logic to call have i been pwned APIs to check if the user email address has been involved in a data breach.

We will use the onExecutePostLogin function which is a handler that will be called during the execution of a PostLogin flow.

onExecutePostLogin function recieves two parameters, api (of type PostLoginApi) and event (of type Event)

For this example, we will use the event.user to find the user's email address. event.user contains information on the user on whose behalf the current transaction was initiated, like email, identities and more.

We also use the event.client to get the client id. Knowing the client id we can send a reset password email to the user.

You can read more on the full capabilities of the api and event in the Auth0 documentation.

We will use two APIs from have i been pwned:

• Get the list of data breaches for an email address. This will return an array of breach names that are sorted by date already. So the first item on the list is the most recent breach.

• Get the details of a particular breach. We will use the name of the first breach from the previous list to get the details of it. This includes the BreachDate.

You can read about the capabilities of have i been pwned APIs here

Code for Login Action

%[https://gist.github.com/pazel-io/27ba1ab177c14c172f5b2b9f4232a50e]

Test your action

On the left side of the Actions editor, you have 3 more options. The one that looks like a play button is Test. If you click on it give you an example login payload and once you hit run it will simulate a call to the action with the same body that you would get on a Login / Post Login flow.

You can edit the payload as you like. For example, I changed the email address to account-exists@hibp-integration-tests.com.

This is a test email address provided in have i been pwned API documentation for the scenario that the user has data breaches.

After you run the action you can see the results in the bottom right panel.

Here is an example from my test.

You can use console.log to see the result of each step in your function call.

Actions editor saves your code automatically and once you are happy you can click the deploy button.

Now when a user tries to log in they will go through our login Action and need to successfully get through our enhanced Risk-based Authentication before they can successfully log in.

Other features of Actions

Actions have more to offer. You get a secret manager, a package manager (for npm packages) and the version history of the code built-in.

This makes up for a better developer experience.

Actions limitations

Actions give you an excellent way to customise and extend Auth0 capabilities but there are some limitations. For example, each execution of a flow must complete in 10 seconds or less or the processing will end in an error.

Some of these limitations are in place to ensure that the user experience stays smooth as you add more code and capabilities.

Make sure to check these limitations before you start.

Conclusion

Auth0 Actions provide an easy way for development teams to implement authentication and authorisation based on their unique needs and open the door to many possibilities.

We only scratched the surface with this Login Action example. Actions offer more hooks and there are plenty of examples for each. The same goes for our risk calculation function. For example, we can make use of the type of breach (e.g: email, password, ...) and more data that is available in have i been pwned response to have a more meaningful risk calculation.

If this looks like something you have been looking for, I encourage you to read the Actions documentation to learn more about the capabilities of different Actions and find more examples.

Thanks for reading this article. Please reach out here or on Twitter if you have any feedback or questions.

References

• Auth0 Action docs

• have i been pwned

In the dynamic realm of technology, the allure of the next shiny programming language can be irresistible. However, true mastery in the field of software development extends beyond fleeting trends. Learning a programming language is akin to expanding one's vocabulary—it's about acquiring a new lens through which to view and solve problems. In this blog post, we'll explore the profound benefits of learning multiple programming languages, emphasising that it's not just about keeping up with the latest fad, but about embracing diverse perspectives and enhancing problem-solving skills.

Diverse Problem-Solving Approaches:

Each programming language is designed with a unique set of principles and features, shaping the way developers approach problem-solving. For instance, the elegance of Python's syntax contrasts with the precision demanded by languages like C++. Learning various languages exposes developers to different paradigms—procedural, object-oriented, functional—and equips them with a versatile toolkit to tackle diverse challenges.

Expanding Cognitive Horizons:

Much like learning a new language broadens your cultural understanding, learning a programming language expands your cognitive horizons. Each language embodies a distinct philosophy and methodology, influencing the way developers think about software design, data structures, and algorithms. The cognitive diversity gained through exposure to multiple languages enriches problem-solving skills and fosters a more holistic understanding of software development.

The Colour Categorisation Analogy:

Consider the analogy of color categorisation in language. Just as languages influence how we perceive and categorise colours, programming languages influence how we conceptualize and structure code. Learning a new language introduces developers to different ways of expressing ideas, leading to a more nuanced and flexible mental model for approaching programming challenges.

Adaptability in a Rapidly Changing Landscape:

The tech landscape is in a constant state of evolution, with new languages and frameworks emerging regularly. While it may be tempting to chase the latest trends, the ability to adapt and learn quickly is a valuable skill in itself. Developers who have experience with diverse languages are better equipped to navigate this ever-changing terrain, as they have a strong foundation in fundamental concepts that transcends the specifics of any one language.

Professional Growth and Versatility:

From web development to machine learning, different domains demand different tools. Learning a variety of programming languages enhances a developer's versatility, making them well-suited for a range of projects and roles. It also opens doors to new opportunities, as employers often value candidates who bring a diverse skill set to the table.

Conclusion:

In the world of programming, the journey of learning languages is not just about staying on trend; it's about cultivating a rich and adaptable mind. Like the expansion of colour categories in language, embracing diverse programming languages allows developers to perceive and solve problems in ways they might never have imagined. So, let's celebrate the art of programming for what it truly is—a journey of continuous learning, exploration, and the mastery of the ever-evolving languages that shape our digital landscape.

This example demonstrates how you can capture and verify the user’s phone number as part of Sign up (First login) using Auth0 Actions.

Auth0 Actions are secure, tenant-specific, versioned functions written in Node.js that execute at certain points during the Auth0 runtime. Actions are used to customize and extend Auth0’s capabilities with custom logic. https://auth0.com/docs/customize/actions

Here is a diagram showing how the solution works.

Disclaimer

If you are looking for Multi-Factor Authentication using SMS , it’s supported out of the box with Auth0. This solution is just a suggestion to get around the mobile verification issue. I found some users on the Auth0 forum asking for this feature so I decided to see if I can use Auth0 Actions to provide a solution.

https://community.auth0.com/t/mobile-verification/65206

The solution brekdown

We need the following pieces to make this flow work:

• A Twilio account. Twillio provides the APIs that we need to send the verification SMS and also to verify the code after the user submits it.

• Custom signup form with an extra field to record the user’s phone number.

• Auth0 Action that will execute on login and make use of the recorded phone number to send a verification code to the user’s device using SMS. This Action is also responsible for the redirect to the code verification form.

• A simple web application that will host the form to get the verification code from the user and redirect the user along with the code to Auth0 to finish the login.

1- Create a Twilio account and the verification service

To create an account go to https://www.twilio.com/try-twilio and create a free account.

After login, click on the verify from the side menu. This is where we can add a verification service. This service will help us to send an SMS to the user phone number and use the code in that SMS for verifying the number.

Click Verify -> Try it out and create a new service.

In the second and third steps, you get a chance to test your newly created service in the console. This helps you to verify the URL you need to call and the parameters you need to pass for the payload. After you have tested your new service and you are happy that it all works, we are done with the Twillio setup.

If you need to see your service id at any later stage you can come back to verify and it will be listed under services.

2- Create a signup form with an extra field to record phone number

There are multiple ways you can customise your login/signup form. In this example, I am using the Auth0 lock and passing the configuration for extra fields.

To learn more about other ways you can customise the signup experience check this page.

This is the configuration you can pass to the Auth0 lock to add an extra field.

And You will get a signup form like this:

Now after the user signs up, the phone number will be added to the user profile under the user_metadata . At this stage, we have not verified the phone number yet.

3- Create a Login Action to verify the phone number

Next step we need a login Action to read the phone number from the user profile and send a verification SMS to the user’s phone number.

Among the Auth0 Action triggers Login is the only one that supports redirect which is what we need for this flow. Since the phone number verification happens only once users will only go through it the first time they log in.

For the subsequent logins, the Action will check if the phone number exists and is verified for a particular user and if so it will just ignore the rest.

To start you need an Auth0 account. If you don’t already have one, follow these instructions for setting up one.

To create the login Action Click on the Actions > Flows > Login

This creates a post-login trigger that runs as part of the Login flow. It is executed after a user logs in and when a Refresh Token is requested.

Click on the + button in Add Action and select Build Custom. Call it Verify phone number and leave the rest as is.

After Creation, you come to the edit screen. Here you can edit the code and write the logic to call Twilio APIs to send a verification code and verify it.

To do this we need to write two separate functions.

• onExecutePostLogin — Handler that will be called during the execution of a PostLogin flow.

• onContinuePostLogin — Handler that will be invoked when this Action is resuming after an external redirect.

1- In onExecutePostLogin function Code is simply reading the phone number from the user user_metadata and sending an SMS to the phone number using Twilio REST API.

After sending the SMS successfully, this function will redirect the user to the webform to enter the verification code we just sent them. This webform is simply a web application that you need to create and host yourself.

It doesn't need to be anything fancy, as long as it can get the verification code and redirect the user back to Auth0.

2- The onContinuePostLogin comes into play after the user is redirected back to Auth0. At this point, you will have the verification code sent to the function from the webform using a redirect.

So we can use the code and call another REST API from Twilio to verify it. If all goes well and you get a successful response from Twillio the phone number is verified and we will add this information to the user profile but this time under the app_metadata .

Tip: user_metadata can be edited by the logged-in user but the user cannot edit app_metadata.

Here is the code for the Action.

4- Webform to get verification code & perform redirect

The code verification form is a basic HTML page with a small bit of JavaScript to handle the form submission. (based on Dylan Swartz example for consent form)

In this example, we will use Vercel to host the form but you use any hosting provider. If you haven’t done so already, sign up for a Vercel account and install the Vercel CLI with npm i -g vercel.

While you’re in the same directory as the index.html, simply run the following command to spin it up in Vercel:

$ vercel

Press enter for each prompt the vercel command gives you to select the defaults. The output of this command will contain the URL of your newly hosted code verification form.

1. In your Action’s code be sure to delete the existing VERIFY_FORM_URL and replace it with the value that is the URL that was output in the previous step.

1. If you want to make changes to the code verification form, you can upload a new version simply by running the same vercel command you did before.

Here is the code for this web application.

There you have an end-to-end solution to verify phone numbers as part of your Auth0 login and account creation.

Final notes

There are more things to consider to make this a production-ready solution.

• Error handling You need to consider and handle different errors that can happen. The example Action code makes use of api.access.deny() to reject the login in case an error happens.

• Setting up different environments(tenants) for different stages When you set up Auth0 tenant or Twilio service you need to separate your dev and prod environments.

• Keeping your Secret(API) keys safe All the secrets used in this solution only exist on the server-side of the code (action.js and verify.js) which makes it easier to keep them safe. Make sure you do not expose the sensitive keys in your client-side code or commit them to your repo.

Actions have secret management built-in to keep your secrets safe and provide a convenient way to access them in your action code.

and you can access them like this

event.secrets.SESSION_TOKEN_SECRET

• Trusted Callback URL (quoting from Dylan Swartz example ) Our sample Action and consent form makes one security compromise for the sake of convenience: the rule passes the Auth0 domain (i.e. your-tenant.auth0.com) to the form website and the form uses that to construct a callback URL (i.e. https://your-tenant.auth0.com/continue) for returning to the rule. This is essentially an open redirect and should not be used in production scenarios. You can lock this down by configuring your form website implementation to only return to a specific URL (i.e. just your Auth0 tenant) instead of one that’s generated from a query param. You can then simplify the rule too so it no longer passes the Auth0 domain.

• Data Integrity (quoting from Dylan Swartz example ) As stated, this is a very basic example of using an Action Redirect to invoke a consent form. That said, at Auth0 we take security very seriously. The confirm field (which has the value of yes) that is being passed back to auth0 as a signed token using a shared SESSION_TOKEN_SECRET. In production scenarios where you need assurances of the integrity of the data being returned by the external website (in this case in our hosted code verification form). For example, if you want to be sure that the data truly came from a trusted source, then it should be signed. If the data is sensitive, then it should be encrypted. A good mechanism for doing this is to use a JWT (JSON Web Token). You can build a JWT with claims (that you can optionally encrypt) and then sign it with either a secret shared with your Auth0 Action or with a private key, whose public key is known by the action. The Action can then verify that the claims are legit and decrypt them, if necessary.

• Social logins This solution needs some adjusting if you want to offer social logins/signup. In the case of social login, users will not use our signup form, so we need to capture the phone number through a separate form in our application.

Thanks for reading this article. Please reach out here or on Twitter if you have any feedback or questions.

Here is the link to my example code repository: https://github.com/pazel-io/auth0-twilio-phone-verification

References

• Auth0 Action docs
• Redirect with Actions
• Dylan Swartz example for consent form
• Twilio verify service

This article shows you a technique to easily use Angular's environment.ts file to access sensitive data without revealing your secrets.

What is a secret?

Secret refers to any sensitive values that are not supposed to be pushed as part of the source code. This can be things like API keys, OAuth tokens, certificates and passwords.

These secrets are often required to integrate with other providers or services as part of the build or deployments.

Secrets can be different based on deployment environments as well.

For example, you might use a test account for development with a different API key to your production.

Why should you care about secrets?

Many projects utilise cloud-based Git and CI/CD tools to manage the source code, build and deploy. So keeping secrets from leaking into your source code is essential.

You typically deal with two types of secrets in client-side projects.

1. Secrets that your client-side app needs to use when talking to a provider.

These secrets are still visible in the JS bundle or API calls. These are secrets like your Google API key that needs to be sent in an HTTP request to Google, for example.

For these types of secret usually, you need accompanying security measures. For example, Google lets you limit an API key to a domain or limit it to specific Google services.

Even for this type, it is a good practice not to hardcode in the source. hardcoding them makes the secret management based on the environment difficult.

Let's say you have a Test and Production environment which use different Google API keys.

If secret is part of the source code you need to remember to change the code each time you want to change it from Test API key to Production one.

In the same way, updating your secret to rotate it can be more challenging.

Now let's add the fact that source code will spread across branches and devices.

I guess you get the picture. This is important and for that reason there are best practices and tools to help you.

For example, Google has "Best practices for securely using API keys." Which suggest not to store API keys in source code.

Or Github will send you a warning email if you push your Google API key. They have this Automatic secret scanning going on.

2. Secrets that are just required as part of the build but not after that.

For example, if my build process can query my content repository(headless CMS) to pre-render some pages to generate static pages.

In that case, I do not need the content repository's API key after the build is done. I will only take the results (static pages) to deploy them. So I can genuinely secure my key by not putting in the source code.

If you are not convinced, read Why secrets in git are such a problem - Secrets in source code.

Utilise Angular environment.ts file to access secrets

The Angular official way to manage the environment configurations is to use the provided environment.ts file.

You can create a file for each environment.

└──myProject/src/environments/
                   └──environment.ts
                   └──environment.prod.ts
                   └──environment.stage.ts

and provide the configs of each environment like this

export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

You can easily access this configuration in your code.

  import { environment } from '../environments/environment';

  public getBooks() {
    const url = `${environment.apiUrl}/books`;
    return this.http.get<Book>(url);
  }

To get environment specific configs, you can use the env name in the build.

ng build --configuration=stage or use angular.json to define the same thing based on the environment.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "your-project-name:build:production"
    },
    "staging": {
      "browserTarget": "your-project-name:build:staging"
    }
  }
},

These configs are pushed to your source code to support the build. So anyone who has access to source code can see these configs in plain text.

This technique is completely fine for typical configs like the apiUrl but not good enough for secrets.

Solution

We can provide secrets through the environemnt.ts files without pushing it to source code using the Environment variable.

An environment variable is a dynamic-named value that can affect how running processes will behave on a computer. They are part of the environment in which a process runs. For example, a running process can query the value of the TEMP environment variable to discover a suitable location to store temporary files, or the HOME or USERPROFILE variable to find the directory structure owned by the user running the process.

These Environment variables are set up on the build machine which your Angular build runs.

There are different ways to set up Environment variables, which can differ based on the context.

We don't want to set up these variables manually, so we use a .env file. You can easily set multiple environment variables and values in one go.

Later you can use the .env file to read these variables based on the environment. The content of .env looks like this.

GOOGLE_API_KEY=34232423423423234233fsajgsaagdda
AUTH0_CLIENT_ID=54235nfgde24gbdf235432
PASSWORD=adjkvknh29827;nbv_

So the idea is that you load the .env file related to an environment (Test, Production) and somehow provide them to the Angular environment.ts file.

How is this approach more secure?

This approach is more secure because simply the .env file, which contains the sensitive values, only exists on your build machine (private server).

So only the person who has access to the build server can read the file. Sensitive values are no longer part of the source code.

What about the cloud-based CI/CD?

All the cloud-based CI/CDs already provide a way to define and manage Environment variables.

Once you set them up, the Environment variables will be available at runtime when the build is running, and we can access them the same way as if it's our server. Plus, the Environment variables will be secure since they are only available through the cloud-based CI/CD admin dashboard.

Here are some examples from some of the popular cloud-based CI/CDs.

Vercel

Github Actions

AWS Amplify

How to access the Environment variable in Angular environment.ts files?

Angular build already utilises Node.js at runtime to do the build, and we can add an npm script to generate the environement.ts as part of the build.

This script will read the environment variables and generate the environement.ts file. This script is simply JavaScript, so write any logic you need to generate the output.

Here is the code for the script.

const setEnv = () => {
  const fs = require('fs');
  const writeFile = fs.writeFile;
// Configure Angular `environment.ts` file path
  const targetPath = './src/environments/environment.ts';
// Load node modules
  const colors = require('colors');
  const appVersion = require('../../package.json').version;
  require('dotenv').config({
    path: 'src/environments/.env'
  });
// `environment.ts` file structure
  const envConfigFile = `export const environment = {
  googleApiKey: '${process.env.GOOGLE_API_KEY}',
  auth0ClientId: '${process.env.AUTH0_CLIENT_ID}',
  appVersion: '${appVersion}',
  production: true,
};
`;
  console.log(colors.magenta('The file `environment.ts` will be written with the following content: \n'));
  writeFile(targetPath, envConfigFile, (err) => {
    if (err) {
      console.error(err);
      throw err;
    } else {
      console.log(colors.magenta(`Angular environment.ts file generated correctly at ${targetPath} \n`));
    }
  });
};

setEnv();

Let's see what is happening here.

• process.env provides access to the Environment variable in Node.js. So any variable that exists on the build machine will be available through it.
• fs.writeFile let us create a file and write content to it. In this case, to generate the environment.ts file.
• As a bonus, I am reading the package.json so I can get its version. This way, we can have a version number to display in our UI. This technique is convenient when for providing versioning as part of a release cycle.
• targetPath is pointing to where the target file should exist.
• envConfigFile constant is a template literal that provides the template and content of the environment.ts file. You can specify the variables you want to have in your environment.ts here.
• console.log are there to make it easy to see the output of the file generation for debugging. Make sure not to log sensitive data here. Logs usually stay around long after the build is complete.
• dotenv package can load a .env file so you can access the variable you have defined in that file. This trick helps manage a private build server or even building on your local development machine. The script won't fail if dotenv does not find the file in the specified location. So you can leave it there to support both local machine builds and cloud-based CI/CDs.

Automate it

To glue things together, we need to do two more things.

• Firstly, we need to add an npm script that can run our newly added code. Here the new config npm script will run our code. We also update the npm script for build to run the config before build.

  {
  "name": "ionic-angular-cesium-3d-map",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "npm run config && ng build",
    "config": "ts-node src/environments/set-env.ts",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
  }
  

• Last but not least, we need to ignore the generated environment.ts file and the .env file from the source code. Update your .gitignore to include these files.

  src/environments/environment.ts
  src/environments/.env
  

After following these steps, when you run the build or config npm scripts, it will generate an environment.ts and place it in the environment folder. File content will be like this.

export const environment = {
    googleApiKey: 'YOUR_ACTUAL_GOOGLE_API_KEY_FROM_ENV_VARIABLES',
    auth0ClientId: 'YOUR_ACTUAL_AUTH0_CLIENT_ID_FROM_ENV_VARIABLES',
    appVersion: '1.0.0',
    production: true,
};

That's it. Now you access these environment configs in your Angular project.

Conclusion

We learned how we can integrate the operating level Environment variables with Angular environment.ts to get the best of both worlds and secure our secrets.

There are more ways to make keeping and sharing secrets more convenient for secrets that might need to be shared on different build machines. What we read in this article is just the first step.

Thanks for reading. As usual, if you have any questions, please leave me a comment here or DM me on Twitter.

Resources

if you need an example project that utilises this solution please refer to my ionic & Cesium 3D map example.

This project uses the same technique to hide the cesiumAccessToken which is used in the code from the source code.

This project builds on Vercel and uses the Vercel Environment variable to provide the cesiumAccessToken.

Here is the code repository: ionic-angular-cesium-3d-map

Contact

Twitter: _pazel

Parham here, with another step-by-step guide.

In this article, we will create an Ionic/Angular app that uses CesiumJS to render a 3D map and render some 3D layers on top of it to show terrain and buildings.

3D maps are excellent 😎 and visualising your data in 3D can take it to the next level. 🤭

What if you can have a 3D map rendered in your browser with just writing one line of code.

That's right, using CesiumJS, you can easily have a 3D map in your app.

A quick preview of what is the final results:

What is CesiumJS?

CesiumJS is an open-source JavaScript library for creating world-class 3D globes and maps with the best possible performance, precision, visual quality, and ease of use.

To get an idea of CesiumJS Capabilities, check some of their examples.

Here is what you can expect to learn from this tutorial and the difficulty level of each part:

1. Create a blank app using Ionic CLI.

   You will learn how to use Ionic CLI to create an Ionic/Angular app. (Difficulty level: simple)

2. Use CesiumJS to render a map

   You will learn how to implement a basic map integration with Ionic, Cesium & Angular. (Difficulty level: Intermediate)

3. Use Cesium Camera

   You will learn how to use the Cesium Camera flyTo method to fly to a destination. (Difficulty level: Intermediate)

Here is the final demo link https://ionic-angular-cesium-3d-map.vercel.app/

And here is the Git repo: https://github.com/pazel-io/ionic-angular-cesium-3d-map

Let's start

1. Create the base app using Ionic CLI

If you have not installed Ionic CLI before, please head to https://ionicframework.com/docs/intro/cli and follow the instructions to install the CLI.

Next, let's create an app using CLI by running ionic start ionic-angular-cesium-3d-map. CLI should prompt you to choose the front end tech and more options.

I am going with Angular and the blank starter project.

Ionic CLI asks if you like Capacitor integration, which is not required for this tutorial. After selecting the options, CLI will download all required npm packages. (this might take few minutes) You will eventually see some logs indicating that the setup is done.

Let's cd to the new project we just created and run ionic serve. This command will run a local web server and open the app in your default browser. (by default port 8100)

2. Use CesiumJS to render a map

There are three pieces involved here to make it work.

• Cesium JavaScript file
• Cesium CSS file
• Cesium assets file

Start by adding the Cesium npm package npm install --save cesium

Configure Cesium in Angular

Now that we have installed Cesium, we need to include its files (CSS and necessary assets) in our project. We can use angular.json located at the root directory of the project to add these files. Open angular.json and add the CSS file in the styles section and the whole build Cesium folder in the assets array.

"assets": [
{
"glob": "**/*",
"input": "node_modules/cesium/Build/Cesium",
"output": "./assets/cesium"
},
],
"styles": [
"node_modules/cesium/Build/Cesium/Widgets/widgets.css",
"styles.css"
]

Display the Viewer

We will use the home component to host the Cesium viewer. All Cesium needs is to have a reference to a DOM element that is designated to render the map.

The easiest way to do this in Angular is to use the @ViewChild property decorator that configures a view query. View queries are set before the ngAfterViewInit callback is called.

This what you need to add to the home.component.html

<div class="my-cesium" #myCesium></div>

and this is the code for accessing the myCesium element in home.component.ts.

    @ViewChild('myCesium')
public myCesium: ElementRef;

The next thing is to initialise the Cesium viewer. We use the Angular AfterViewInit hook for this to make sure our ElementRef is initialised first.

Next, you need to pass the DOM reference to the Cesium.Viewer constructor.

    import * as Cesium from 'cesium';

public ngAfterViewInit(): void {
    const viewer = new Cesium.Viewer(this.myCesium.nativeElement);
}

Congrats! Now you should see a 3D globe rendered on your home page with some default Cesium controls.

We can pass some more configurations to customise the Cesium viewer. Check Cesium docs for a full list of options.

To simply my view for mobile I will disable some of these default options. Here is the updated code.

    public ngAfterViewInit(): void {
    if (environment.cesiumAccessToken) {
    Cesium.Ion.defaultAccessToken = environment.cesiumAccessToken;
}
this.viewer = new Cesium.Viewer(this.myCesium.nativeElement, {
    //Use Cesium World Terrain
    terrainProvider: Cesium.createWorldTerrain(),
    //Hide the base layer picker
    baseLayerPicker: false,
    // homeButton: false,
    geocoder: false,
    timeline: false,
    animation: false,
    fullscreenButton: false,
});
}

Couple of things to notice

• terrainProvider adds terrain data to your globe so you can see these terrains when you look at the surface. Pretty neat.
• defaultAccessToken remove the message that is displayed when you use the default access token.

You can create an account and get the access token for free for non-commercial use.

Here is the result

3. Use Cesium Camera

Next stop, we will add some 3D building data to the globe and fly from the initial location to the buildings.

When we created a Cesium Viewer, we implicitly built a Cesium.Scene.

Cesium.Scene is the container for all 3D graphical objects and state in a Cesium virtual scene, and it has a reference to the Cesium.Camera

Cesium.Camera let us to flyTo a location.

   this.viewer.scene.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-74.019, 40.6912, 750),
    orientation: {
        heading: Cesium.Math.toRadians(20),
        pitch: Cesium.Math.toRadians(-20),
    },
})

In the code above, we are telling Cesium to fly from the current location to the destination. In this example, the destination is provided in Degrees (longitude, latitude, height). We are also setting the orientation of the camera.

Next, let's add some 3D building data. Cesium already has a built-in layer for this, and you can add your data as well.

The built-in one is called the Cesium OSM Buildings layer, a global base layer with over 350 million buildings derived from OpenStreetMap data. It's served as 3D Tiles, an open standard created by Cesium.

   this.viewer.scene.primitives.add(Cesium.createOsmBuildings());

Next we add an Ionic Fab button to fly us to the destination.

<ion-content [fullscreen]="true">
    <div class="my-cesium" #myCesium></div>
    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button (click)="letsGo()">
            <ion-icon name="airplane"></ion-icon>
        </ion-fab-button>
    </ion-fab>
</ion-content>

and here is the code for the component

  public letsGo() {
    const slow$ = of(this.viewer);
    slow$
        .pipe(
            take(1),
            tap(() => this.viewer.scene.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(-74.019, 40.6912, 750),
                orientation: {
                    heading: Cesium.Math.toRadians(20),
                    pitch: Cesium.Math.toRadians(-20),
                },
            })),
            delay(2000),
            tap(() => {
                if (!this.osmBuildingInit) {
                    this.viewer.scene.primitives.add(Cesium.createOsmBuildings());
                }
            }),
            tap(() => this.osmBuildingInit = true),
        )
        .subscribe();
}

I am using RxJS to add some delays between flying and adding building data, but you can do them at once.

Now, if you click the fab button, you will fly to the destination and see some building data in 3D.

If you are interested in adding your 3D data, refer to this Cesium article Visualise a Proposed Building in a 3D City

Conclusion

CesiumJS is one of the most advanced 3D libraries when it comes to maps and Geo-Spatial data.

We learned how we could use it to integrate a 3D map experience into our Ionic application easily.

This example uses Angular, but as you can see, all the heavy lifting is done by Cesium, so what JS framework you use with your Ionic is your preference.

Thanks for reading. As usual, if you have any questions, please leave me a comment here or DM me on Twitter.

Resources

Here is the demo: demo deployed using Vercel

Here is the code repository: ionic-angular-cesium-3d-map

Contact

Twitter: _pazel

Motivation

The cover photo is from inside of a Melbourne tram. There is a clear sign inside that tells passengers what the next stop is (The yellow text) and that someone has requested to stop at the next station (red text, otherwise the tram does not always stop for all stations).

(Photo by Rishiraj Singh Parmar from Pexels)

You can see the same type of feedback or visibility in many everyday items.

Like the notification from your phone on low battery, your TV showing an animation when loading a movie on Netflix, or the green camera LED light on your MacBook to show that camera is recording.

This is what your users expect when presented with a website or web application you design. To know where they are and what is happening.

Let's see how this applies to UI/UX

Jakob Nielsen wrote an article in 1994 about "10 Usability Heuristics for User Interface".

They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines.

Many UI/UX designers indeed rely on good examples and their gut feeling when they design. This is good and, in many cases, does the trick for designing a solid UI/UX.

In my opinion, the next level would be to understand the common patterns and the science behind them.

Most UI/UX design techniques have scientific reasons, resulting from human psychology studies and human-computer interaction research. It’s good to know whys as well as good examples.

Let's look at the first rule,

Rule 1: Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.

Read the full article on the visibility of system status and watch 3 min video on the visibility heuristic.

As you can see, the definition is very high-level, so that you can bring it to life in many ways. Visual feedback can exist in the form of colour, state changes (e.g. success or error messages), progress indicators and many more UI/UX components.

Let's look at some of the examples of how to achieve Visibility of system status

1. Use an Empty state message to improve the visibility of your system status.

Empty states can display a wide variety of content. For example, they can include a list without items, or a search that returns no results. Although these states aren’t typical, they should be designed to prevent confusion.

You can find the definition of this pattern in different design systems. Like Material design from google.

Or Carbon design from IBM

Here is a couple of examples from the PMST tool that uses the empty state to communicate to the user about the next step.

Asking the user to add items to the map to use the "My Features" panel.

Asking the user to use a wider screen. Alternatively, they can collapse the sidebar or rotate the phone to landscape, giving the app enough space to show the map.

2. You can use Skeleton loading to improve the visibility of your system

Based on the carbon design system [https://www.carbondesignsystem.com/patterns/loading-pattern#skeleton-states](https://www.carbondesignsystem.com/patterns/loading-pattern#skeleton-states)

Skeleton loading or Placeholder loading is used when information takes an extended amount of time to process and appear on-screen.

Skeleton states are simplified versions of components used on an initial page load to indicate that the information on the page has not fully loaded yet.

They should only appear for a few seconds, disappearing once components and content populate the page. Skeleton states use motion to convey that the page is not stuck and that data is still being loaded.

This can help to reduce user uncertainty. Only use skeleton states on container-based components like tiles and structured lists or data-based components like data tables and cards. In most cases, action components (e.g. buttons, input fields, checkboxes, toggles) do not need a skeleton state.

Never represent toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton states. Elements inside a modal may have a skeleton state, but the modal itself should not.

You can implement the skeleton loading using

• custom CSS

• https://css-tricks.com/building-skeleton-screens-css-custom-properties/

Or use a library to help you.

• Without a framework

• With Angular

• With React

• With Ionic

3. Use a progress tracker to show where the user is in a workflow

I love making progress and love a good progress tracker to show me where I am in a workflow. One of the most common examples is online shopping. This also encourages the user to continue and finish by knowing that there is, for example, one step left.

Here is the same concept used in an app that let you report frog sightings. You can record the frog's sound, take a photo of it and fill out more details to complete a report.

Another example is from YouTube video upload flow.

Angular Material has a stepper component that can help with this.

4. Make it easy to understand where the user is in the navigation flow.

You can use a breadcrumb for this. The following example shows what is the user selection using a breadcrumb.

Also, using a column browser makes it easy to see the hierarchy of data and select a category that matches the breadcrumb that users see to remind them how they got to this selection.

You can use the same concept on the phone. Here is a demo of Ionic 6 breadcrumb.

Similarly, you can highlight the selected item in the main navigation or tabbed navigation to clarify where the user is.

Look at how Twitter uses the blue highlight on the left side menu and top tabbed navigation to tell me I am on the "Explore" tab and looking at the "Entertainment" list.

Another example from Vicmap Topographic Maps highlighting the menu (Digital maps) and the selected scale (100K).

5. Show the system is busy using a loading indicator

This is an obvious one, but I have seen devs overlook it many times. The main reason is that when you develop on your local machine, you are literally using a server, so the connection is fast, and you never need to wait for the response.

I have some news for you that not all users are on a fast connection, and they will appreciate knowing the application is doing something behind the scenes. 😀

This can be a simple loading indicator or progress bar.

Almost all UI components libraries have a component for this.

The material design calls it Progress indicators.

Ionic calls it Spinner and Progress bar

Another example from pull to refresh in Ionic to show app is fetching the list behind the scene.

In the PMST web app, users can add layers to their map. These layers are usually shown using large images on the map, changing as you pan and zoom.

Obviously, I could not show a loading message each time user interacts with the map. That would block the user, and if loading happens quickly, the message would flash for a second and go.

It would be too annoying, so I use a toast (snack bar) message at the bottom of the screen that only appears if the loading of a layer takes more than 3 seconds, so the user knows we are trying.

Regardless of the UI library you use, many websites provide loading gifs or SVG animations. Like loading.io

If you have more space and feeling fancy, you can use a loading animation from lottiefiles

Bonus

If you are interested in using Lottie animations with Angular or Ionic, I have an example project that might help you.

6. Provide timely feedback to users using micro animation

This is one of my favourites. Micro-animations are small, preferably functional animations that support the user by giving visual feedback and clearly displaying changes.

Have you noticed Twitter like animation?

Many UI component libraries have this built-in.

For example, the Ionic Fab button uses a scale animation and morphs the arrow icon to the close icon to provide visual feedback. (iOS style)

This example shows how Ionic provides the micro animation for the tap on cards based on iOS or Android design guidelines.

7. Haptic feedback for touch devices

The Haptics provides physical feedback to the user through touch or vibration.

Simply put, you use the device vibration hardware to provide feedback to users when they tap a button or do a long press. The vibration pattern can be different based on the feedback.

For example, an error can cause a longer vibration.

The vibrate API is available in JS through Navigator.vibrate()

navigator.vibrate(200); // vibrate for 200ms

navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); // Vibrate 'SOS' in Morse.

If you use Ionic with Capacitor, this is provided out of the box through the Haptic feedback plugin.

Conclusion

We looked at the first rule from the "10 Usability Heuristics for User Interface" and explored how it is implemented in web or mobile UI/UX we build every day.

I just scratched the surface with this article, and there are many more ways you can improve the visibility of the system status.

Usually, you use a combination of all these techniques based on the context.

I encourage you to read the original article as well.

I hope you enjoyed reading my article, and as usual, if you have any comments, please let me know here or DM me on Twitter.

Twitter: _pazel

Parham here, with another step-by-step guide. This time, we will learn how to use Angular Router to lazy-load UI pieces that are not visible and doing it without changing the main route. So we can keep the first context.

Here is the final demo deployed using Vercel. https://ng-lazy-loaded-modal.vercel.app

Here is a video demo of the final result.

The main principle is the same here regardless of the technique or frontend technology you choose. You want to reduce the number of resources that the browser needs to initially download and parse in order to render your application. This is also referred to as optimising the critical rendering path. You can use different methods to optimize the critical rendering path. Lazy loading is one of them. If you are interested in the Critical Rendering Path topic, please check this course from Google web fundamentals.

A reminder

By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading - a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times. https://angular.io/guide/lazy-loading-ngmodules

Following the link above, it is easy to lazy load a feature module by simply defining a route for it. Here is an example to remind you how it’s done.

const routes: Routes = [
    {
        path: 'map',
        loadChildren: () => import('./map/map.module').then(m => m.MapModule)
    }
];

Doing this, Angular will separately bundle the map module, and it will only be loaded when you access the /map route.

The problem

The previous example is a good solution until you come across use cases with components or pieces of UI that cannot have a separate route. Let me explain what I mean.

Have a look at this example:

All the screenshots show the same map view. This view is created using a feature module with the route /map that hosts many other features that show up based on user interaction.

• Search modals that show up when the user is searching on the map.

• A collapsible Layer selectors panel to find a layer to add to the map. So it will be only visible when expanded.

• Layer details, which are only visible when a user clicks on a layer in the side panel to see its details.

• Also, some more UI pieces that can show up when the user selects a specific menu. Like Draw controls, Print form, Set Region control and more.
• Plus, each one of these UIs utilises services and other dependencies under the hood, which can quickly add up to map module bundle size.

The goal is to load these pieces of UI only if the user needs them. This will help reduce the initial bundle size for the Angular app and improve the performance.

I cannot lazy-load the other feature modules like the map module because accessing any routes that define other feature modules means leaving and unloading the map that will not work for my use case. For example, I need to stay on the map and show the modal.

So I want to lazy-load feature modules without leaving the map module. (/map route) Now that we have a better picture of the problem, let's discuss the solution.

There are a couple of ways we can solve this problem:

1. Use Dynamic imports using the import() function and let Webpack do its magic to lazy load a feature module. This feature is available in Angular 9+.
2. Use Angular Router to lazy load a feature module.

My solution demonstrates the second option which uses Angular router to handle lazy loading and state of the application (e.g. a modal being open or not). This means URLs are bookmarkable. For example, if you open this URL

https://invest.agriculture.vic.gov.au/#/map/(m:s/%5B16030153.917455776,-4319458.318312469%5D)?lat=144.07623978175104&lon=-36.15776605793607&z=11&bm=bm0&l=mb0:y:100

the app will automatically open the search modal and use the passed query params to search for exact lat/lng and layers that was passed through URL.

If you are interested in the first solution please also checkout Lazy Load Modal Components in Angular by Netanel Basal.

The solution - Angular Auxiliary Routes to the rescue

First, let's see what the Auxiliary route is?

To put it simply, they are just plain routes like the primary route. The only difference is that auxiliary routes are mapped to a different router outlet which must be named (unlike the primary outlet).

The following video shows how Invest in Victorian Agriculture website uses this capability. Here I am starting in the context of the /map route, and all the JS required for the visible part of the view is loaded with the map module. Please pay attention to network requests when I open the search results modal. It’s only then that Angular loads the JS files required for the SearchModule and my modal.

invest.agriculture.vic.gov.au is too complicated for the learning purpose, so I made an Example application replicating the lazy-loaded modal and map. This application is available on Github. So you can download and follow the same steps mentioned in the rest of my article.

Let’s see how the routing works here

This is the syntax for the URL

http://base-path/#/primary-route-path/(secondary-outlet-name:route-path)

Which translate to http://localhost:4200/#/map/(map-outlet:modal).

• http://localhost:4200 is the base path. I am using HashLocationStrategy, which is why I have /#/ after the base URL.
• /map is the primary route's path for the map view.
• The remaining part in the parenthesis is my auxiliary route (route within the /map route) (map-outlet:modal).

Let’s breakdown the auxiliary route

• ( open and ) close parenthesis indicates the beginning and end of my auxiliary route.
• Next is map-outlet, which is my outlet name. This is the name I selected for my secondary outlet.
• Followed by : that separates the outlet name from the actual path. In this case, the path is modal for the modal. I am using short names here to shorten my URL length, but you can use any name.

How to build the auxiliary routes?

First, I need a secondary router outlet (named router outlet). You can have one default(primary) router outlet and many named(secondary) router outlets as you need in Angular.

The RouterOutlet is a directive from the router library that is used as a component. It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.

Like any other Angular have we will have a primary outlet defined in the app.component.html where we render the primary routes.

<ul class="menu">
  <li>
    <a routerLink="home">Home</a>
  </li>
  <li>|</li>
  <li>
    <a routerLink="map">Map</a>
  </li>
</ul>

<div class="content">
  <router-outlet></router-outlet>
</div>

Here is the top-level application router config defining the /map route, which lazy loads the map module.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),
  },
  {
    path: 'map',
    loadChildren: () => import('./map/map.module').then((m) => m.MapModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The primary router outlet will render /home and /map. Given the configuration above, when the browser URL for this application becomes /map, the router matches that URL to the route path /map and displays the MapComponent. The rendered HTML will have the <app-map> as a sibling element to the RouterOutlet that you've placed in the host component's template.

I will place another router outlet in the map.component.html which is a named router outlet (my secondary outlet). Other floating components like modals or sliding panels can use this named router outlet to show within the map context.

<router-outlet name='map-outlet'></router-outlet>

I need to specify the outlet name in the map module router when I define the child routes.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MapComponent } from './map.component';

const routes: Routes = [
  {
    path: '',
    component: MapComponent,
    children: [
      {
        path: 'modal',
        outlet: 'map-outlet',
        loadChildren: () => import('../modal-wrapper/modal-wrapper.module')
          .then((m) => m.ModalWrapperModule),
      },
    ],
  },
];

@NgModule({
            imports: [RouterModule.forChild(routes)],
            exports: [RouterModule],
          })
export class MapRoutingModule {
}

That’s all you need to define a route within a route, and Angular will take care of bundling the lazy-loaded feature modules separately and also lazy loading the feature modules as you navigate to their respective route. Here is the code structure for the map module.

Now you can easily use the Angular router to navigate to the Modal route. Take a look at the openModal() method.

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { TileLayer } from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent {
  options = {
    zoom: 5,
    maxZoom: 18,
    preferCanvas: true,
    attributionControl: true,
    center: [
      -28.690259,
      131.5190514,
    ],
    layers: [
      new TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ]
  };

  constructor(private router: Router) {}

  public openModal(): void {
    this.router.navigate(['map', {outlets: {['map-outlet']: ['modal']}}]);
  }
}

As you can see, I am passing multiple commands to the navigate method.

Basically telling the router to navigate to /map/(map-outlet:modal) where /map is the map module path, map-outlet is my named outlet, and modal is the path for the modal module.

And the last piece of the puzzle to make the router work. Place a named <router-outlet></router-outlet> in the map view HTML.

<div leaflet class="map" [leafletOptions]="options"></div>
<router-outlet name='map-outlet'></router-outlet>
<button class="map__overlayButton" mat-raised-button color="primary" (click)="openModal()">Open modal</button>

By putting an outlet in the map.component.html I am telling the Angular where to render the content of the named router outlet (map-outlet).

How does the code look like for the modal module?

The architecture for the module is a bit more complicated than the other feature modules in my application since with Angular material dialog, I need to pass a component to the this.dialog.open() method. Here is how the code structure looks like.

This is modal-wrapper.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalComponent } from './modal/modal.component';
import { ModalWrapperComponent } from './modal-wrapper.component';
import { ModalWrapperRoutingModule } from './modal-wrapper-routing.module';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [ModalComponent, ModalWrapperComponent],
    imports: [
        CommonModule,
        ModalWrapperRoutingModule,
        MatDialogModule,
        MatButtonModule,
    ]
})
export class ModalWrapperModule { }

Here is modal-wrapper-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ModalWrapperComponent } from './modal-wrapper.component';

const routes: Routes = [
  {
    path: '',
    component: ModalWrapperComponent,
  },
];

@NgModule(
  {
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
  },
)
export class ModalWrapperRoutingModule {
}

this is modal-wrapper.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { ModalComponent } from './modal/modal.component';
import { take } from 'rxjs/operators';
import { Router } from '@angular/router';

@Component({
  selector: 'app-modal-wrapper',
  template: '',
})
export class ModalWrapperComponent implements OnInit, OnDestroy {

  private dialogRef: MatDialogRef<ModalComponent>;
  private closedOnDestroy = false;

  constructor(private dialog: MatDialog,
              private router: Router,
  ) {
  }

  ngOnInit(): void {
    this.openDialog();
  }

  private openDialog(): void {
    this.dialogRef = this.dialog.open(ModalComponent,
      {
        minWidth: '700px',
        minHeight: '400px'
      });

    this.dialogRef.afterClosed()
      .pipe(take(1))
      .subscribe(result => {
        if (this.closedOnDestroy) {
          return;
        }
        return this.router.navigate(['map']);
      });
  }

  public ngOnDestroy(): void {
    this.closedOnDestroy = true;
    this.dialogRef.close();
  }

}

and here is modal.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

and finally modal.component.html

<h1 mat-dialog-title>🎊 Hey, you made it! I am a route enabled modal 🎉</h1>
<h3 mat-dialog-content>You may refresh the page but I will be back.</h3>
<div mat-dialog-actions>
  <button mat-raised-button mat-dialog-close color="primary">close me</button>
</div>

Conclusion

We learned how to use Angular Router to lazy-load UI components based on user interactions without changing the main route.

I have simplified the code here for this demonstration, but you can imagine that a feature module can be more complicated and use more services or other third-party dependencies.

So being able to lazy-load modules with Auxiliary routes will be a great boost to the application performance.

• As a result of this architecture, your modal is route-enabled, which means you can refresh the page, and Angular will open the modal automatically. This is great for bookmarking and sharing URLs. In this case, I can share the link with someone, and they can see the search result for the exact lat/long I used for my search.

• By opening each lazy-loaded route defined similarly to the search module on the map, I navigate away from the search module route, and the search modal will get destroyed. This is because they use the same router. This can be good or bad based on the use case. In my case, this is exactly what I needed. For example, I want to close the search modal when I open the layer selector and vice versa. This will naturally happen as I move away from the previous route. Without this architecture, I will need to keep some flags locally in the map component or on the app state to make sure I close the layer selector component before opening the search modal, which can get really messy in a big application.

• You can skip the wrapper component (modal-wrapper.component.ts) in your implementation if you have a simpler UI to show/hide. The wrapper component is handy to support the usage of Angular Material Dialog.

• You can prefetch the lazy-loaded modules using the preloadingStrategy: PreloadAllModules or use a custom preloadingStrategy as described in the following article.

Also, if you require lazy-loading a specific component like a modal without routing, you might find the following article useful.

I hope you learned something useful from this article.

As usual, if you have any questions, please leave me a comment here or DM me on Twitter.

Here is the code repository: https://github.com/pazel-io/ng-lazy-loaded-modal

Here is the final demo deployed using Vercel.

https://ng-lazy-loaded-modal.vercel.app

Twitter: _pazel

Parham here, this time with a quick tip about how I use RxJS to reduce if/else.

There are already many blogs written on why if/else might be bad or how to reduce if/else statements in your code.

You might have seen people asking questions like, "Why is the 'if' statement considered evil?", "Why is it a bad programming practice to use if/else?" or similar ones.

Here is a popular blog example on techniques on how to reduce if/else https://javascript.plainenglish.io/6-tips-to-improve-your-conditional-statements-for-better-readability-56256c5a5245

In my opinion, there is nothing wrong with if statements but overuse of if/else and especially nested if/else statements can add more complexity to the code, make it less readable and more error prone.

Some functional libraries like ramdajs even have functions like, ifElse, unless, when and cond to solve this problem by using a function instead of if/else blocks.

https://ramdajs.com/docs/#ifElse

const incCount = R.ifElse(
  R.has('count'),
  R.over(R.lensProp('count'), R.inc),
  R.assoc('count', 1)
);
incCount({});           //=> { count: 1 }
incCount({ count: 1 }); //=> { count: 2 }

So overall it's better if you can write your code in a way that avoids branching off and needs fewer if/else statements. Writing functional code can be one more trick in your toolbelt that will eliminate the need for nested if/else in the first place.

Here is my take on utilising RxJS for the same purpose.

The code example

For a bit of context of how the code example is structured, here is what I am trying to achieve.

I am trying to decide where the user should land when they open the app.

The logic in plain English would be something like this:

• If this is the first time users visit the app, show Terms & conditions to agree to T&C. App will save and remember this choice. It's a one-off thing.

• Then If the user has agreed to T&C and has not viewed the app intro, show the introduction. This gives the user a tour of the app features and only happen once as well. So the app keeps a flag remembering this as well.

• If the user has agreed to T&C and has viewed the intro, take them to the home page.

The code uses TypeScript and Angular, but no major dependency on these tech stacks, and you can replicate in any other tech stacks like React or Vue easily.

Original code: I came across this code in one of the code reviews.

public enter(): Subscription {
    return this.termsConditionsStateSelector.agreed()
      .pipe(
        switchMap((termsAgreed) => this.helpStateSelector.viewed()
          .pipe(
            map((helpViewed) => ({helpViewed, termsAgreed})),
          ),
        ),
        tap(({ termsAgreed, helpViewed }) => {
          if (!termsAgreed) {
            this.navCtrl.navigateRoot('/terms-conditions');
          } else if (termsAgreed && !helpViewed) {
            this.navCtrl.navigateRoot('/help');
          } else {
            this.navCtrl.navigateRoot('/home');
          }
        }),
      ).subscribe();
  }

Refactor Option 1: Use withLatestFrom instead of that weird switchMap.

  public enter(): Subscription {
    return this.termsConditionsStateSelector.agreed()
      .pipe(
        withLatestFrom(this.helpStateSelector.viewed()),
        tap(([termsAgreed, helpViewed]) => {
          if (!termsAgreed) {
            this.navCtrl.navigateRoot('/terms-conditions');
          } else if (termsAgreed && !helpViewed) {
            this.navCtrl.navigateRoot('/help');
          } else {
            this.navCtrl.navigateRoot('/home');
          }
        }),
      ).subscribe();
  }

Refactor option 2: Completely remove the if/else.

 private showTnC(): void {
    const showTnC$ = this.termsConditionsStateSelector.agreed()
      .pipe(
        filter((agree) => !agree),
        take(1),
        tap(() => this.navCtrl.navigateRoot('/terms-conditions')),
      );
    showTnC$.subscribe();
  }
 private showIntro(): void {
    const showIntro$ = this.termsConditionsStateSelector.agreed()
      .pipe(
        filter((agree) => agree),
        withLatestFrom(this.helpStateSelector.viewed()),
        filter(([, viewed]) => !viewed),
        take(1),
        tap(() => this.navCtrl.navigateRoot('/help')),
      );
    showIntro$.subscribe();
  }
 private showHome(): void {
    const showHome$ = this.helpStateSelector.viewed()
      .pipe(
        filter((viewed) => viewed),
        take(1),
        tap(() => this.navCtrl.navigateRoot('/home')),
      );
    showHome$.subscribe();
  }
 public enter(): void {
    this.showTnC();
    this.showIntro();
    this.showHome();
  }

What do you think about the readability of code in these two examples?

Option 1 is easier from understanding the control flow, but Option 2 is more modular and functional.

I like Option 2 better because:

• There is no if/else. ✅
• Each function is doing a single job, so concerns are separated.
• Code is more modular and therefore easier to test.
• Functions are named based on my DSL.
• Code is more functional, and there is less side effect.
• I know how many signals to expect to use the take() operator and do not need to worry about unsubscribing?!! (Not exactly correct always, depending on the code flow)

⛔️ A note on unsubscribing and memory leak issues based on your code flow

Using filter() with take(1) can lead to a memory leak. For example, imagine agreed === true at the time of subscription, then showTnC$ will never get a signal and therefore never completes the subscription, even after the component is destroyed. In other words, it will be waiting forever. (potential memory leak). If this is a component that you can reinitialise multiple times (like leaving a view and come back to it), you will have multiple instances of these subscriptions, leading to your app misbehaving.

You have three solutions to fix this problem.

1. Use a destroy signal and the takeUntil(this.destroyed$) pattern with destroyed$ emitting a signal as soon a subscription is not required. For example, if I get a signal to showIntro$, Probably I can send a destroy signal for my showTnC$ and use the takeUntil operator, assuming there is no further use for showTnC$.
2. Skip the subscription altogether, use the async pipe in the template, and let Angular take care of unsubscribing.
3. Keep a reference to your subscription and unsubscribe when the component is destroyed (ngOnDestroy). If you want to do this, I suggest adding an array of subscriptions to your class and push every new subscription to this array. Later at the component destroy time, you can loop over your subscriptions array and unsubscribe from each.

Something like this:

public subscriptions: Subscription[] = [];

 private showHome(): void {
    const showHome$ = this.helpStateSelector.viewed()
      .pipe(
        filter((viewed) => viewed),
        take(1),
        tap(() => this.navCtrl.navigateRoot('/home')),
      );
    const showHome$$ = showHome$.subscribe();
    this.subscriptions.push(showHome$$);
  }

  public ngOnDestroy() {
    this.subscriptions.forEach(subscription => subscription.unsubscribe());
  }

Fortunately, in my case, this code lives in “app.component.ts”, which means the component will never get destroyed or reinitialised unless the whole page is reloaded. So even without applying any fix, I am safe for memory leaks.

Thanks for reading.

I hope you find this article useful, and as usual, please leave me a comment here or DM me on Twitter if you have any questions.

Twitter: _pazel

Parham here, with another step-by-step guide. This time, we will build an Ionic PWA app that shows a map, but that is not all.

A quick preview of what is the final results:

Here are the app features, what you can expect to learn implementing each part and the difficulty level of each part:

1. Create a blank app using Ionic CLI.

   You will learn how to use Ionic CLI to create an Ionic/Angular app. (Difficulty level: simple)

2. Adding a leaflet map to your Ionic app.

   You will learn how to implement a basic map integration with Ionic, Leaflet & Angular. (Difficulty level: simple)

3. Add a base layer switcher to switch between different base maps

   You will learn how to interact with basic Leaflet APIs like TileLayer, LayerGroup and Map methods. (Difficulty level: Intermediate)

4. Geolocation API integration to use device GPS and find user current location.

   You will learn how to use Geolocation API to find device locations and handle related errors. (Difficulty level: Intermediate)

5. Address search to find a location using google address search.

   You will learn how to use Google Places APIs to address search and find the coordinates related to an address. (Difficulty level: Intermediate)

6. Make it a PWA

   You will learn how to use @angular/pwa to make your app an installable PWA. (Difficulty level: Intermediate)

7. Bring it all home

   What is the point of building all this if we cannot show it off? Let's deploy your new app using Vercel and show it off to our friends 😀 (Difficulty level: simple)

Here is the demo: demo deployed using Vercel

Here is the Github code repository: ionic-angular-leaflet-offline-map-pwa

Let's start

1. Create the base app using Ionic CLI

If you have not installed Ionic CLI before, please head to https://ionicframework.com/docs/intro/cli and follow the instructions to install the CLI.

Next, let's create an app using CLI by running ionic start ionic-leaflet-offline-map-pwa. CLI should prompt you to choose the front end tech and more options.

I am going with Angular and the blank starter project. Ionic CLI asks if you like Capacitor integration. It's not required for this tutorial. After selecting the options, CLI will download all required npm packages. (this might take few minutes)

Ionic CLI asks if you would like a free Ionic account after the npm package install. It's not required for this tutorial. You will eventually see some logs indicating that the setup is done.

Let's cd to the new project we just created and run ionic serve. This will run a local web server and open the app in your default browser. (by default port 8100)

2. Add a map using Leaflet

Leaflet is an open-source JavaScript library for mobile-friendly interactive maps. It offers heaps of cool features to work with maps. Using the features we need to show the map, and we are gonna just scratch the surface. So it's relatively easy.

We use the Angular Leaflet wrapper for easier integration here. We will use the @asymmetrik/ngx-leaflet project. This package is not an official part of Angular, but it is reliable, and I have used it in many prod apps.

Run npm i leaflet @asymmetrik/ngx-leaflet to install both leaflet and ngx-leaflet.

We love TypeScript so let's add appropriate typings for Leaflet.

Run npm i @types/leaflet -D to install the typings as a dev dependency.

OK, we are done with the installation. Let's add a map to our Angular app!

I will add the map to our HomePage(home.page.ts) component. This is easy.

Add LeafletModule to the imports array in HomePageModule(home.module.ts)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LeafletModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Add map options and OnMapReady

options define things like map centre, maxZoom, baseLayer and more.

onMapReady will be called when the leaflet map is ready and receive the map instance. We will need this instance to interact with the map later.

import { Component } from '@angular/core';
import { Map as LMap, TileLayer } from 'leaflet';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public map: LMap;
  public center = [
    -28.690259,
    131.5190514,
  ];

  public options = {
    zoom: 5,
    maxZoom: 18,
    zoomControl: false,
    preferCanvas: true,
    attributionControl: true,
    center: this.center,
    layers: [
      new TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
    ],
  };

  constructor() {}

  public async onMapReady(lMap: LMap) {
    this.map = lMap;
    setTimeout(() => lMap.invalidateSize(true), 0);
  }

}

Add the map container in our home.page.html.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Leaflet Map
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="leaflet" leaflet
       [leafletOptions]="options"
       (leafletMapReady)="onMapReady($event)">
  </div>
</ion-content>

Add the leaflet CSS to the list of our global CSS.

Open the angular.json file in the root of the project and update line 34 from

"styles": ["src/theme/variables.scss", "src/global.scss"], to

"styles": ["src/theme/variables.scss", "src/global.scss", "./node_modules/leaflet/dist/leaflet.css"],

and add the map container CSS to home.page.scss. The updated file looks like this.

.leaflet {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
}

Restart your server to make sure the new CSS loads properly. You should see a screen like this.

Congrats!! 🎉 👏

Now we integrated a map into our Ionic app.

3. Add the ability to switch base maps

We have already added one base map in the options we defined. I want to change it and use Cycling and Transport base maps and use a button to switch between them.

Let's be fancy and add a FAB button from Ionic to do the layer switching. Go ahead and add a FAB button with a list of options inside your <ion-content>. The updated code looks like this.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Leaflet Map
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-fab vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="layers-outline"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="bottom">
      <ion-fab-button color="danger">
        <ion-icon name="bicycle"></ion-icon>
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon name="car"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
  <div class="leaflet" leaflet
       [leafletOptions]="options"
       (leafletMapReady)="onMapReady($event)">
  </div>
</ion-content>

The updated screen will have a FAB button on the top right with two options (cycling & transport) for selection.

We need to add the code to actually switch the base map when we click our new buttons. Don't worry. I have got you!

I will show you the updated code, and we will go through the changes one by one. This is the new home.page.ts file.

import { Component } from '@angular/core';
import { LayerGroup, Map as LMap, TileLayer } from 'leaflet';
import { BaseLayer } from './BaseLayer.enum';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public map: LMap;
  public center = [
    -37.8182711,
    144.9648731
  ];

  public options = {
    zoom: 15,
    maxZoom: 18,
    zoomControl: false,
    preferCanvas: true,
    attributionControl: true,
    center: this.center,
  };

  public baseMapUrls = {
    [BaseLayer.cycling]: 'http://c.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
    [BaseLayer.transport]: 'http://c.tile.thunderforest.com/transport/{z}/{x}/{y}.png',
  };

  public selectedBaseLayer = BaseLayer.cycling;

  public baseLayer = BaseLayer;

  private baseMapLayerGroup = new LayerGroup();

  constructor() {
  }

  public async onMapReady(lMap: LMap) {
    this.map = lMap;
    this.map.addLayer(this.baseMapLayerGroup);
    this.switchBaseLayer(this.selectedBaseLayer);
    setTimeout(() => lMap.invalidateSize(true), 0);
  }

  public switchBaseLayer(baseLayerName: string) {
    this.baseMapLayerGroup.clearLayers();
    const baseMapTileLayer = new TileLayer(this.baseMapUrls[baseLayerName]);
    this.baseMapLayerGroup.addLayer(baseMapTileLayer);
    this.selectedBaseLayer = BaseLayer[baseLayerName];
  }

}

I removed the layers array from the map options, and instead, I have added the baseMapUrls, an object. Keys are the map name, and values are the URL for map tiles. For keys, I am using a TypeScript Enum to make it easier when reusing the same string. Enum is in a new file called BaseLayer.enum.ts, and here is the code:

export enum BaseLayer {
  cycling = 'cycling',
  transport = 'transport',
}

Next, we have the selectedBaseLayer property to keep track of which the user selects the base layer. I have initialised it with the cycling base map using the same Enum.

Next, we have the baseLayer property pointing to the BaseLayer enum. This is to make the enum available to our map HTML template and use it there.

Next, we have the private baseMapLayerGroup = new LayerGroup();. LayerGroup is a Leaflet way to group multiple layers and separate them from the rest of the layers on the map. Using it here makes it easier to manage base layers. We will use more LayerGroups later to add the address search and GPS search results.

Next, we have the switchBaseLayer method. It takes a base layer name and can switch the base layer. It first clears any layers in the layer group and then adds the new layer by finding the config from the baseMapUrls object. Notice that the layer we add is of type TileLayer. This special type of layer in Leaflet world can show tiles used for the base map.

And here are the changes you need in the HTML. Basically adding the click functions to buttons. Also, check the selectedBaseLayer to highlight the colour of the button representing selected base layer by changing it to red(danger). Notice I am using the same BaseLayer enum values to maximise reuse and not repeat myself.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Leaflet Map
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-fab vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="layers-outline"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="bottom">
      <ion-fab-button [color]="selectedBaseLayer === baseLayer.cycling ? 'danger' : 'primary'"
                      (click)="switchBaseLayer(baseLayer.cycling)">
        <ion-icon name="bicycle"></ion-icon>
      </ion-fab-button>
      <ion-fab-button [color]="selectedBaseLayer === baseLayer.transport ? 'danger' : 'primary'"
                      (click)="switchBaseLayer(baseLayer.transport)">
        <ion-icon name="car"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
  <div class="leaflet" leaflet
       [leafletOptions]="options"
       (leafletMapReady)="onMapReady($event)">
  </div>
</ion-content>

4. Use device GPS and find the user current location

We will use Geolocation API to find the device location. This is a standard web API. For privacy reasons, users will be asked to grant access to their location. So the user can grant access or deny, and we need to handle the potential errors in this process.

First, let's add a method to read the device's location.

  public async locate() {
    this.locationLayerGroup.clearLayers();
    if (!navigator.geolocation) {
      console.error('Geolocation is not supported by your browser');
      return;
    }
    await this.presentLoading();
    navigator.geolocation.getCurrentPosition(
      (position) => this.onLocationSuccess(position),
      (error) => this.onLocateError(error),
      {enableHighAccuracy: true}
    );
  }

As you might have noticed, I have added another LayerGroup for the GPS location to the map called locationLayerGroup.

Next, I am checking if the navigator.geolocation is supported. Notice, If it is not supported, I log an error and use the return statement to exit the function. This is a nicer alternative compared to doing if/else and makes your code more readable.

If it is supported, I show a loading message. Then, I call getCurrentPosition, which returns the device's current location (another method if you like to watch the location, which is good for tracking use case).

getCurrentPosition takes three parameters. First, the success callback function, which is called when the location is successfully fetched. The second is the error callback which will be called if there is an error. Like location access denied or timeout error if GPS satellite is not available. And third, the PositionOptions, which I use to enable the HighAccuracy location. Enabling this option will cause the location reading to take longer but will make it more accurate.

Here is the code for success callback

  private onLocationSuccess(position: GeolocationPosition) {
    const {accuracy, latitude, longitude} = position.coords;
    const latlng = [latitude, longitude];
    this.hideLoading();
    this.map.setView(latlng, 18);
    const accuracyValue = accuracy > 1000 ? accuracy / 1000 : accuracy;
    const accuracyUnit = accuracy > 1000 ? 'km' : 'm';
    placeLocationMarker(this.locationLayerGroup, latlng, `Accuracy is ${accuracyValue} ${accuracyUnit}`);
    const locationCircle = circle(latlng, accuracy);
    this.locationLayerGroup.addLayer(locationCircle);
  }

Here I read some properties from the GeolocationPosition I receive. I use the latitude and longitude to create a Leaflet LatLng array that can centre the map. I use the map's setView method for that, passing a LatLng and zoom level (18).

The accuracy we receive here is in metres, so I convert it to KM if it's bigger than 1000 so it's more readable when presented to the user.

I use placeLocationMarker to display a marker on the map for device location. I have extracted this function because I want to show a tooltip on the marker, which shows the accuracy. And since this is a Leaflet tooltip and the whole DOM creation is handled by Leaflet, there is a bit of complication around how to handle the touch events. This complexity is handled inplaceLocationMarker function.

And at last, I use the Leaflet circle function to draw a circle on the map, which shows the accuracy visually to the user. This circle is centred on the device location, and the radius is as big as accuracy.

Before you get too bored, here is the result

Notice that I am using Chrome Devtools to fake the GPS location. You can access this feature in the console tab by clicking three dots next to Console and choose Sensors.

Ok, Let's have a quick look at the error callback. This one is simple. On error, we hide the loading and use the Ionic's Alert component to notify the user about the problem. 3 errors can happen. PERMISSION_DENIED, TIMEOUT , POSITION_UNAVAILABLE. The first two are obvious, and the third can happen when there is faulty GPS hardware. For each error, you get a message and code. If you need to customise the message, use the code and draft your own message.

  private async onLocateError(error) {
    this.hideLoading();
    const alert = await this.alertController.create({
      header: 'GPS error',
      message: error.message,
      buttons: ['OK']
    });

    await alert.present();
  }

And finally, here is the code for the placeLocationMarker function. This code is located in a separate file with the same name. It does three things.

• Creates a Leaflet marker using a custom icon.
• Binds a leaflet popup to the marker that shows accuracy value and a delete link button. Why do we need the delete? Because when the user adds a marker to the map, they need a way to remove it when they are done.
• Listen to the click event on a specific marker popup to handle the delete button click. As mentioned, the DOM operations here are totally happening outside of the Angular world, so I use RxJS fromEvent function to filter and receive the click events from this delete button.

The subscription to the click event only happens when the popup is open, and it will unsubscribe as soon as it is closed.

Another good practice here is extracting the placeLocationMarker. This has made it as pure as possible. So this function only relies on its inputs to operate.

import { LatLng, LayerGroup, marker, Marker } from 'leaflet';
import { fromEvent, Subscription } from 'rxjs';
import { filter, map, tap } from 'rxjs/operators';
import { markerIcon } from './markerIcon';

const subscribeToDeleteLocationMarker = (id: string, marco: Marker, layerGroup: LayerGroup): Subscription => {
  return fromEvent(document, 'click')
    .pipe(
      tap((event) => event.stopPropagation()),
      map((event) => event.target),
      filter((target: HTMLElement) => target.id === id),
    )
    .subscribe(($event) => layerGroup.clearLayers());
};

const bindMarkerPopup = (marco: Marker, text: string, layerGroup: LayerGroup) => {
  const id = `location-marker-${Date.now()}`;
  marco.bindPopup(`
        <p>${text}</p>
        <div class="location-marker-popup__buttons">
            <a class="location-marker-popup__button" id="${id}">delete</a>
        </div>
      `,          {
    maxWidth: 200,
    maxHeight: 120,
    className: 'location-marker-popup',
  });
  let deleteMarkerSubscription;
  marco.on('popupopen', () => deleteMarkerSubscription = subscribeToDeleteLocationMarker(id, marco, layerGroup));
  marco.on('popupclose', () => deleteMarkerSubscription.unsubscribe());
  marco.openPopup();
};

export const placeLocationMarker = (layerGroup: LayerGroup, latLng: LatLng, text: string) => {
  layerGroup.clearLayers();
  const marco = marker(latLng, {icon: markerIcon()});
  layerGroup.addLayer(marco);
  bindMarkerPopup(marco, text, layerGroup);
};

5. Use Google Places Autocomplete Service to find an address and show it on the map

We will start by adding the Google Maps JavaScript API. To do this, you need a Google account and a Developer API Key.

Follow the instructions on the following instruction to get an API key. https://developers.google.com/maps/documentation/javascript/get-api-key

You will need to:

• Create a new project
• Get an API key. Make sure to restrict the key to APIs you will add and also restrict by HTTP referer. So you can make sure no one can take advantage of your API key and use your quota.
• Enable Places API and Maps API in the Google Cloud Console.
• Enable billing for the services you just added. Google cloud offers $200 free monthly usage which can be sufficient for testing or low usage websites. Plus, you can add quota usage alerts if you want to make sure your bill will not get too big.

This process can be a bit tricky, so please read the instruction carefully. Let me know if you get stuck in the comments. I will try to help you out.

After you have done the steps above, the next step is to add the Google Maps JavaScript API to your app. Open index.html and add this script.

<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Next, install proper typings for Google APIs using npm i -D @types/google.maps. This will let us use the google global namespace in TypeScript without issues. There are multiple to use the TS definitions. It's described here. I use the second method adding this comment at the top of my file.

/// <reference types="google.maps" />

There are multiple ways to add the Google address search (Places Autocomplete) to your app.

1. Adding an Autocomplete widget
2. Adding a SearchBox widget
3. Programmatically retrieving Place Autocomplete Service predictions

I will use the third method so I can create my own UI/UX. I will create a component to separate this. Let's call it addressSearchComponent.

Go ahead and generate a new component with the same name using Angular CLI using the following command.

Note: It's always a good idea to use the --dryRun flag if you are not sure. This will give you a chance to review the changes before it happens to avoid mistakes.

npx ng g component addressSearchComponent --create-module --spec=false

Next, we need to create an instance of AutocompleteService. This service provides two methods.

I will use the AutocompleteService.getPlacePredictions() method. This method takes a search query and returns an array of prediction objects.

Each suggestion has a place_id associated with it which can be used to get more details using PlacesService.getDetails() method. I will use the second service call the details of the place, including the geometry, which has the latitude and longitude of a place to show it on the map.

Here is the final result:

Here is the code for what I explained.

/// <reference types="google.maps" />

import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
import AutocompleteResponse = google.maps.places.AutocompleteResponse;
import AutocompletePrediction = google.maps.places.AutocompletePrediction;

@Component({
  selector: 'app-address-search-component',
  templateUrl: './address-search-component.component.html',
  styleUrls: ['./address-search-component.component.scss'],
})
export class AddressSearchComponentComponent {
  @ViewChild('result') result: any;
  @Output() placeSelect: EventEmitter<any> = new EventEmitter();
  public predictions: AutocompletePrediction[] = [];
  public predictionsVisible = false;
  private autocompleteService: google.maps.places.AutocompleteService;
  private placesService: google.maps.places.PlacesService;
  private sessionToken: google.maps.places.AutocompleteSessionToken;

  constructor() {
  }

  public async lookupAddress(event) {
    if(event.target.value === ''){
      return;
    }
    const addressQuery = event.target.value;
    const autocompleteResponse = await this.getPlacePredictions(addressQuery);
    this.predictions = autocompleteResponse.predictions;
    this.predictionsVisible = this.predictions.length > 0;
    console.log('predictions', autocompleteResponse.predictions);
  }

  public showPredictions() {
    this.predictionsVisible = this.predictions.length > 0;
  }

  public clearPredictions() {
    this.predictionsVisible = false;
    this.predictions = [];
  }

  public getPlaceDetails(placeId: string) {
    this.predictionsVisible = false;
    this.getPlacesService().getDetails({
      placeId,
      sessionToken: this.getSessionToken(),
      fields: ['formatted_address', 'geometry'],
    }, (placeResult) => this.placeSelect.emit(placeResult));
  }

  private getPlacePredictions(addressQuery: string): Promise<AutocompleteResponse> {
    return this.getAutocompleteService().getPlacePredictions({
      componentRestrictions: {country: ['au']},
      input: addressQuery,
      sessionToken: this.getSessionToken(),
      types: ['address'],
    });
  }

  private getPlacesService() {
    if (this.placesService) {
      return this.placesService;
    }
    this.placesService = new google.maps.places.PlacesService(this.result.nativeElement);
    return this.placesService;
  }

  private getAutocompleteService() {
    if (this.autocompleteService) {
      return this.autocompleteService;
    }
    this.autocompleteService = new google.maps.places.AutocompleteService();
    return this.autocompleteService;
  }

  private getSessionToken() {
    if (this.sessionToken) {
      return this.sessionToken;
    }
    this.sessionToken = new google.maps.places.AutocompleteSessionToken();
    return this.sessionToken;
  }
}

And here is the template and CSS files:

<ion-searchbar
  mode="ios"
  type="search"
  inputmode="search"
  placeholder="Enter address"
  [animated]="true"
  (ionChange)="lookupAddress($event)"
  (ionClear)="clearPredictions()"
  (ionFocus)="showPredictions()"
></ion-searchbar>
<div #result style="display: none;"></div>
<ion-list [hidden]="!predictionsVisible">
  <ion-item *ngFor="let prediction of predictions"
            (click)="getPlaceDetails(prediction.place_id)">{{prediction.description}}</ion-item>
</ion-list>

:host {
  position: absolute;
  height: 60px;
  top: 60px;
  left: 5%;
  width: 90%;
  z-index: 1000;
  display: block;
  background-color: #121212;
  border-radius: 10px;
}

ion-list {
  margin-top: -7px;
  padding: 15px 5px 5px 5px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

ion-item {
  --inner-padding-bottom: 5px;
  --inner-padding-top: 10px;
}

6. Make it a PWA

This step is easy because Angular CLI does all the heavy lifting for you. Just run npx ng add @angular/pwa. This command will add all the required packages to your project, configure your service worker, and add the default assets for caching. The only file that you might need to interact with is the ngsw-config.json.

This file tells the Angular service worker, what assets to cache and what caching strategy to use.

For example, all JS files are cached eagerly when all the image assets are cached lazily. You can read more about managing this file in Angular docs for Service worker configuration.

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

And as always, make sure to test your PWA locally. To do this, run the build command ionic build.

This will generate the www folder. The application in this folder is a PWA. You can use a local server like serve to run it.

Service Workers require the app to be hosted in a secure context. To serve the build, we use a local node server. Install the npmjs.com/package/serve by running npm i serve -g.

Next, we can run the serve www command. This runs the app on http://localhost:5000, and luckily, with localhost is considered safe, and you do not need HTTPS origin to test our PWA now.

Open an incognito window in chrome and open the http://localhost:5000. You will notice another issue. When you refresh the page, the app will not load. This is because the serve tries to find localhost:5000/home and expect a home folder with an index.html file in it, and this file does not exist. There are multiple ways to fix this issue. For this tutorial, I will use hash routing.

All you need to change is to go to your app-routing.module.ts file and add useHash: true to your router options. Now page URL will look like localhost:5000/#/home, and you can refresh without an issue.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: true })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

After fixing the routing issue, open the http://localhost:5000.Then open Chrome Devtools, open the Lighthouse tab and generate a report for the Progressive web app. This is my test result which shows the PWA app has an issue that needs to be fixed.

• There is no apple-touch-icon.

Add the following code to your index.html in the head tag to fix the second and third issues.

<link rel="apple-touch-icon" href="/assets/icon/icon-192x192.png">

We are all set. Let's build and test the PWA app one more time. Run ionic build and then serve www. Open the Chrome incognito window and test using Lighthouse.

You should see a result like this one, indicating that your PWA is ready and installable.

If you want to test the install, you can open your app on a normal window (not incognito), and you should be able to see the install button in the Chrome address bar.

7. Deploy your new app using Vercel in less than 5 mins

To test our PWA on the phone, it would be easier to deploy the app to access it through a URL over HTTPS easily. I will use Vercel for this. Vercel is a zero-configuration cloud CI/CD that can understand the structure of our Ionic project and deploy it out of the box.

To do this, please go to vercel.com and register for a free account.

Log in, and you have the option to import a project from your Git repo. I am using Github, as mentioned before. So I will import the project from my Github.

Vercel already knows that your project is Ionic Angular and knows what command to run to build it. Just go ahead and click deploy. This will run the build and give you a URL that your project will be available on.

Simply click the button that says "Visit" to access your deployed app.

Congratulations if you have made it this far through the tutorial. 👏 🙌

Thanks for reading. As usual, if you have any questions, please leave me a comment here or DM me on Twitter.

Here is the demo: demo deployed using Vercel

Here is the code repository: ionic-angular-leaflet-offline-map-pwa

Twitter: _pazel

This was something I was curious about as well. Doing some googling, I came across two solutions that seemed to solve the same problems.

1. cross-post-blog npm package

2. cross post as SaaS

The second solution seemed interesting since it's SaaS and seemed to do it with minimum effort, so I decided to test the trial.

The following is a cross-posted article from Medium to Hashnode using https://crossxpost.app.

Here is the link to the Medium blog for comparison. https://medium.com/lapis/reduce-if-else-using-rxjs-950a5cb50684

I used their import function, which basically asks for the article's URL, and imports it to the crossxpost.app text editor, which seems it's an HTML editor.

They also offer some SEO tools that can suggest optimisation for SEO. In my case, it just said the following, which is not much of help.

To integrate with Hashnode, they ask for a key which was not clear what does that mean. I guessed that it might be the API access key, and I was right.

I intentionally did not edit it to demonstrate what this tool is capable of.

There are some edits possible in the tool. It has a text editor there.

It copies the Medium blog as HTML to Hashnode, and the code is not clean. It is hard to edit. Overall not the best solution. It offered some tags, but the list was limited and missing what I needed. I could type in my tag but would not save it unless it was from the provided list.

This is how the code looks like in my Hashnode editor.

It's not a perfect and polished UI, but it did the job. I prefer to use MD as the source and publish across. So it might still make sense to build a tool that you can write MD and publish across.

It's a nice idea, but it needs improvements to be a solid solution for me.

=====================================================================

The rest of the page is the posted article by crossxpost.app

=====================================================================

Reduce if/else using RxJS

Elevate your code series 😊

I am trying to decide where the user should land when they open the app.

The logic in plain English would be something like this:

• If this is the very first time user visits the app show Terms & conditions so they can agree to T&C. This will be saved and the app will remember this choice. It’s a one-off thing.
• Then If the user has agreed to T&C and has not viewed the app intro, show the introduction. This gives the user a tour of the app features and only happen once as well. So the app keeps a flag remembering this as well.
• If the user has agreed to T&C and has viewed the intro, just take them to the home page.

The code is using TypeScript and Angular but no major dependency on these tech stacks and you can replicate in any other tech stacks like React or Vue easily.

Original code

// From this ================>
  
public enter(): Subscription {
    return this.termsConditionsStateSelector.agreed()
      .pipe(
        switchMap((termsAgreed) => this.helpStateSelector.viewed()
          .pipe(
            map((helpViewed) => ({helpViewed, termsAgreed})),
          ),
        ),
        tap(({ termsAgreed, helpViewed }) => {
          if (!termsAgreed) {
            this.navCtrl.navigateRoot('/terms-conditions');
          } else if (termsAgreed && !helpViewed) {
            this.navCtrl.navigateRoot('/help');
          } else {
            this.navCtrl.navigateRoot('/home');
          }
        }),
      ).subscribe();
  }

Refactored with RxJS

// To this ================> private showTnC(): void {
    const showTnC$ = this.termsConditionsStateSelector.agreed()
      .pipe(
        filter((agree) => !agree),
        take(1),
        tap(() => this.navCtrl.navigateRoot('/terms-conditions')),
      );
    showTnC$.subscribe();
  } private showIntro(): void {
    const showIntro$ = this.termsConditionsStateSelector.agreed()
      .pipe(
        filter((agree) => agree),
        withLatestFrom(this.helpStateSelector.viewed()),
        filter(([, viewed]) => !viewed),
        take(1),
        tap(() => this.navCtrl.navigateRoot('/help')),
      );
    showIntro$.subscribe();
  } private showHome(): void {
    const showHome$ = this.helpStateSelector.viewed()
      .pipe(
        filter((viewed) => viewed),
        take(1),
        tap(() => this.navCtrl.navigateRoot('/home')),
      );
    showHome$.subscribe();
  } public enter(): void {
    this.showTnC();
    this.showIntro();
    this.showHome();
  }

What do you think about the readability of code in these 2 examples?
To me first one is easier from understanding the control flow but the second one is more modular and functional.

I like the second one better because:

• There is no if/else. ✅
• Each function is doing a single job so concerns are separated.
• Code is more modular and therefore easier to test.
• Functions are named based on my DSL.
• Code is more functional and there is less side effect.
• I know how many signals to expect so I can use take operator and do not need to worry about unsubscribing.

=====================================================================

End of posted article by crossxpost.app

=====================================================================

Conclusion

I think what Cody has done is on the right track and can be a good solution. As mentioned before, I would prefer to have an app with a similar editor to my Hashnode blog.

This app would be the main place to write the article and publish it so other platforms.

Having such a solution will definitely help to avoid copy/paste across blogging platforms but still, to get the most out of your Hashnode, you might need to come back to Hashnode and do some final touches.

I did not test the first solution, but it also works similarly to ask for your article URL to cross-post. So most probably, the second platform will receive an HTML version that is not the source.

Maybe this can be a cool feature that Hashnode offers. 🤷‍♂️

I hope this was helpful if you were looking for a similar solution.

Thanks for reading. I am available if you have any questions. Leave me a comment here or DM me on Twitter.

Twitter: _pazel

We will go through a step by step guide on how to do this.

Here is the final demo.

Git repo: https://github.com/pazel-io/ionic-auth0-react-pwa

Configuring Auth0

Before anything, let's set you up with Auth0. Please head to https://auth0.com/ and register for a free account. After signing up, you can log in to your account. You will land on the Auth0 dashboard. From the menu on the left, choose the Applications page and click the “Create Application” button.

Click on the option that says a new Single Page Web Applications, choose a name and click create. (PWAs are web apps that behave like a native app)

Choose the technology you are using for your front end, or go with the pure JS version. I will go with React here. This selection helps Auth0 to provide relevant examples and code snippets.

After choosing your front end technology, you land on a quick start guide that walks you through integrating Auth0 into your web app. Before doing that, let's create our Ionic app using the Ionic CLI. The code from this app is pretty much what I will use for my Ionic PWA integration.

If you have not installed Ionic CLI before, please head to https://ionicframework.com/docs/intro/cli and follow the instructions to install the CLI.

Next, let's create an app using CLI by running ionic start ionic-auth0-pwa. CLI should prompt you to choose the front end tech and more options.

I am going with React and the blank starter project. After selecting the options, CLI will download all required npm packages. (this might take few minutes)

Ionic CLI asks if you would like a free Ionic account after the npm package install. It's not required for this tutorial. You will eventually see some logs indicating that the setup is done.

Let's cd to the new project we just created and run ionic serve. This will run a local web server and open the app in your default browser. (by default port 8100)

Now we can add the Auth service based on the example. I am going to follow the instruction from Auth0 React example to add the Auth0 login.

The first step adds the Auth0 React package to my Ionic app.

npm install @auth0/auth0-react

Next open index.tsx and wrap the <App> component in the Auth0Provider like this.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Auth0Provider } from '@auth0/auth0-react';

ReactDOM.render(
    <React.StrictMode>
        <Auth0Provider
            domain="REPLACE_WITH_YOUR_DOMAIN"
            clientId="REPLACE_WITH_YOUR_CLIENT_ID"
            redirectUri={window.location.origin}
        >
            <App/>
        </Auth0Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

The values for ClientId and Domain are populated based on your application. You can also find them in the setting section of your app.

Next, we create two components for Login and Logout.

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import { IonButton, IonIcon } from "@ionic/react";
import { logIn } from "ionicons/icons";

const LoginButton = () => {
    const { loginWithRedirect, loginWithPopup } = useAuth0();

    return <IonButton onClick={() => loginWithPopup()}>
        <IonIcon slot="start" icon={logIn} />
        Log In
    </IonButton>;
};

export default LoginButton;

The Login component in the Auth0 example uses the redirect method, which leaves your app for the Auth0 website, does the login and comes back to your app with Auth token. There is another method for loginWithPopup, which I will use for this example. loginWithPopup does not leave your app and makes auth flow a bit simpler.

And here is our LogoutButton component.

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import { IonButton, IonIcon } from "@ionic/react";
import { logOut } from "ionicons/icons";

const LogoutButton = () => {
    const { logout } = useAuth0();

    return (
        <IonButton onClick={() => logout({ returnTo: window.location.origin })}>
            <IonIcon slot="start" icon={logOut} />
            Log Out
        </IonButton>
    );
};

export default LogoutButton;

Let's make use of our newly created components. I will replace the content of ExploreContainer.tsx, which is the default homepage of our Ionic app, with the following code.

import './ExploreContainer.css';
import LoginButton from "./LoginButton";
import LogoutButton from "./LogoutButton";
import { useAuth0 } from "@auth0/auth0-react";

interface ContainerProps {
}

const ExploreContainer: React.FC<ContainerProps> = () => {
    const {isAuthenticated} = useAuth0();
    if (isAuthenticated) {
        return (
            <div className="container">
                <LogoutButton/>
            </div>
        );
    }
    return (
        <div className="container">
            <LoginButton/>
        </div>
    );

};

export default ExploreContainer;

This is to check the isAuthenticated flag and decide to show LoginButton or LogoutButton. The result should be something like this.

Test the Login

Clicking the login button should open a popup and show the login form. If instead of the login form, you see a message saying, "Oops! something went wrong". You have probably missed the step to set up the callback URLs for your Auth0 app.

To do this, go to your app settings. Scroll down to the section that says "Allowed Callback URLs" and enter your app URL there. We need to add http://localhost:8100 for the "Allowed Callback URLs", "Allowed Web Origins", and "Allowed Logout URLs".

If you click the login now, you should see this screen.

You can signup & log in with a username/password or use a google account to log in. The login options provided are based on the default settings when you added your application in Auth0. You can obviously change these through Auth0 to add other social logins like Facebook, Apple or enable Multi-factor authentication.

Add a User Profile to show user info

Now that we have a login and logout, let's add a UserProfile component to show some user details.

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const UserProfile = () => {
    const {user, isAuthenticated, isLoading} = useAuth0();

    if (isLoading) {
        return <div>Loading ...</div>;
    }

    if (isAuthenticated) {
        return <div>
            <img src={user?.picture} alt={user?.name}/>
            <h2>Hello, {user?.name}</h2>
        </div>
    }
    return <p>Tap the login button</p>
};

export default UserProfile;

I will use the new UserProfile component in the ExploreContainer. The new updated code is:

import './ExploreContainer.css';
import LoginButton from "./LoginButton";
import LogoutButton from "./LogoutButton";
import UserProfile from "./UserProfile";
import { useAuth0 } from "@auth0/auth0-react";

interface ContainerProps {
}

const ExploreContainer: React.FC<ContainerProps> = () => {
    const {isAuthenticated} = useAuth0();
    if (isAuthenticated) {
        return (
            <div className="container">
                <UserProfile/>
                <LogoutButton/>
            </div>
        );
    }
    return (
        <div className="container">
            <UserProfile/>
            <LoginButton/>
        </div>
    );

};

export default ExploreContainer;

Now, after you log in, you should see your name, avatar and a logout button.

Make it a PWA

We are almost there. All we need to do is to make this Ionic app a PWA. That is very easy. Open your index.tsx file and find the serviceWorkerRegistration.unregister(); on line 24 and change it to serviceWorkerRegistration.register();

To make sure our PWA is ready, we need to build the app and test it using Lighthouse. Run the ionic build to build the app. This should create a build directory with all of the build files, including the PWA's service worker and manifest file.

Service Workers require the app to be hosted in a secure context. To serve the build, we use a local node server. Install the https://www.npmjs.com/package/serve by running npm i serve -g.

Next, we can run the serve build command. This runs the app on http://localhost:5000 and luckily with localhost is considered safe, and you do not need HTTPS origin to test our PWA now.

Open an incognito window in chrome and open the http://localhost:5000. You will notice another issue. When you refresh the page, the app will not load. This is because the serve tries to find localhost:5000/home and expect a home folder with an index.html file in it, and this file does not exist. There are multiple ways to fix this issue. For this tutorial, I will use hash routing.

All you need to change is to go to your App.tsx file and replace IonReactRouter with IonReactHashRouter. Now page URL will look like localhost:5000/#/home, and you can refresh without an issue.

After fixing the routing issue open the http://localhost:5000.Then open Chrome Devtools, open the Lighthouse tab and generate a report for the Progressive web app. This is my test result which shows the PWA app has a couple of issues that need to be fixed.

Issues are:

• Some icon sizes are not provided.
• There is no apple-touch-icon.
• There is not theme-color specified in meta tags.

To fix the first one, we need to provide icons for all sizes in the manifest.json file. This file is located in the public folder of your project. I will use an online PWA manifest & icon generator (https://www.simicart.com/manifest-generator.html)

Just specify your app icon with a minimum (512px x 512px) and a name here. Then click generate the manifest to download a zip file. It should contain all the icons we need. I will use the default icon provided by Ionic in the asset folder. Your zip file content should look like this:

Go ahead and copy all icons to your project under the public -> assets -> icon folder.

Your new manifest.json will include these icons, and it should be like this:

{
  "short_name": "Ionic App",
  "name": "My Ionic App",
  "icons": [
    {
      "src": "assets/icon/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icon/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icon/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icon/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

That is the fix for the first issue.

Add the following code to your index.html in the head tag to fix the second and third issues.

<link rel="apple-touch-icon" href="%PUBLIC_URL%/assets/icon/icon-192x192.png">

<meta name="theme-color" content="#ffffff"/>

We are all set. Let's build and test the PWA app one more time. Run ionic build and then serve build. Open the Chrome incognito window and test using Lighthouse.

You should see a result like this one, indicating that your PWA is ready and installable.

If you want to test the install, you can open your app on a normal window (not incognito), and you should be able to see the install button in the Chrome address bar.

If you try to log in on the installed version of the app, you will notice that you get the same error as before, saying, "Oops! something went wrong". This is because the origin is changed to localhost:5000. You can add the new origin to Auth0 settings or specify the port when running the server. serve build -p 8100

Some screenshots of how the app works after installing on desktop.

Congrats!! 🥳 🎉 👏 🥂

Now you have a functional PWA app with Auth0 login!

You can use this the same on the phone and install it as a PWA app.

You can download the code (project) I build as part of this blog from Github.

https://github.com/pazel-io/ionic-auth0-react-pwa

Bonus point - Deploy your new app using Vercel in less than 5 mins

To test our PWA on phone it would be easier if we deploy the app so we can easily access it through a URL over HTTPS. I will use Vercel for this. Vercel is a zero-configuration cloud CI/CD that can understand the structure of our Ionic project and deploy it out of the box.

To do this please go to https://vercel.com and register for a free account.

Log in and you have the option to import a project from your Git repo. I am using Github as mentioned before. So I will import the project from my Github.

Vercel already knows that your project is Ionic React and knows what command to run to build it. Just go ahead and click deploy. This will run the build and give you a URL that your project will be available on.

Simply click the button that says "Visit" to access your deployed app.

Remember you will need to add the new origin (Vercel deployment domain) to Auth0 settings for Allowed Callback URLs, Allowed Logout URLs and Allowed Web Origins so you login successfully. You can add the new one like this. Replace the YOUR_APP_NAME with your own Vercel app.

http://localhost:8100, https://{YOUR_APP_NAME}.vercel.app

Now I can test it on a phone.

Go ahead open the installed version of the app and try to log in.

That's it for this tutorial. This implementation is good enough for Web and Mobile as long as you run it in a browser or installed it as PWA.

I will be writing on Ionic & Capacitor integration with Auth0 as a native app in my next article.

Thanks for reading. I am available if you have any questions. Leave me a comment here or DM me on Twitter.

Git repo: https://github.com/pazel-io/ionic-auth0-react-pwa

Demo: https://ionic-auth0-react-pwa-deploy.vercel.app/#/home

Twitter: _pazel

The downside of all the methods I explained in the first part of this article is that they are only available as long as the app is in debug mode (not the release version).

When you sign the app for Release, the app cannot be debugged using remote debugging anymore or using the Native IDE. So You need an alternative way to see your application logs. Let’s explore some of the options.

1. Use device logs

This method is not my favourite, but it can be handy sometimes to look at the device logs. You can connect your iOS or Android device to a computer to see the logs written to the console by all applications.

It’s not the friendliest debugging experience, but sometimes it is a good option since some of the issues can be at the OS level and not related to code, so WebView might not be much of help.

If you go down this path, you need to learn how to filter the logs to see the logs related to your application. You can use your app bundle id or some specific keywords to filter the logs and see your application logs. Still, this will be a very low-level debugging experience compared to the experience you can get from Chrome DevTools.

Here is an example of Android debug logs by running the adb logcat command.

Tip: use a consistent structure in your application logs. This way, you can always use grep to filter the device logs. Here I am usingadb logcat grep | 'File manager' to get all logs starting with that keyword.

Viewing Android debug logs using adb logcat

If you decide to go down this path, you should use Android Studio since looking at adb logs is not much helpful. This way, you can set the log level as you wish and filter by relevant keywords you know, like your bundle id.

Here is an example of adb logs for the Spotify app with bundle id com.spotify.music. To access the logs open Android Studio, click the logcat in the bottom toolbar and then in the logcat window, select your device and provide the filtering options and log level(info, error).

Viewing Android debug logs using adb logcat in Android studio.

Here is an example of iOS debug logs using Xcode. You will get a lot of logs, but you can filter by application. The nice thing is that you can access crash logs to give you an insight into why the app is crashing. To access these logs, open Xcode, then go to window menu and select Device and Simulators (or use cmd+shit+2 as shortcut) and select your device or simulator from the list to see its related logs.

Looking at device logs from the prod app using Xcode

Some other limitations are that you need access to the device. This can be problematic since your mobile app is distributed to an extensive range of Android and iOS devices that you do not physically have access to them.

Usually, when an issue happens in production, you have no clue until an upset customer reaches out and tells you about it.

Even then, replicating the issue might be very difficult considering all the environment settings you may need. (OS version, Device model, Runtime issue related to lack of resources like memory or storage on the user device and bad network issues, to name a few.)

All you will get is that your app doesn’t work! If you are lucky and dealing with an experienced user, you may get some more details on the workflow leading to the issue. I think you agree that this sort of debugging is very inefficient, and you can go forth and back with the user many times to pinpoint the issue.

2. Create an on-screen logger

This method is very similar to the previous solution but a little easier to access the logs. Instead of connecting the device to a computer and looking at runtime logs, you can show a human-readable version of all the logs on a debug page in your app. This method is helpful, especially during internal QA when the app is tested as a proper release version by your own QA in-house. Here is an example of the on-screen logger in one of our older Ionic app, which uses AngularJS. These logs are categorised for easy access to errors and have a specific format.

It might not look obvious at first, but in the hands of an experienced dev who knows the app’s workflow, this is good information for debugging.

Also, the user can send a copy of logs by sending the dump file to an API or email address.

On-screen debugger page showing application logs

The easiest way to implement this is to override the console methods and add logs to an array so you can print them on your page.

Even this method has its limitations. You can only write a limited number of logs on the screen, which is not easy to read through or search. Also, you cannot keep too many logs on the device since it can turn into a large file quickly. So look at it as an option that you want to only enable temporarily for debugging a specific flow. The chances are that you might miss some errors that might be happening earlier in the workflow.

So are there any better ways to efficiently debug the Ionic apps in production?

Yes!

3. Solutions that can record the whole user session

So the idea is that you record whatever the user does (interaction in the app like click or visiting pages) and send it to a remote server. Then you can access an admin dashboard and replay the user’s session. Several platforms provide this type of solution.

LogRocket

LogRocket lets you replay what users do on your site or hybrid mobile app, helping you reproduce bugs and fix issues faster. With LogRocket, you can replay problems as if they happened in your browser.

LogRocket lets you:

• Session replay See a pixel-perfect replay of what the user saw. LogRocket can recreate the UI/UX of your app for you in its admin console.

• **Redux **Inspect actions and state at any point in time.

• **Network activity **View every network request and response, including the error code. Quickly find that nasty CORS error or the error related to API.

• **Console and errors **Inspect console logs and JavaScript errors

Plus, you can add a user identifier to logs, so you know which session belongs to which user. This method is beneficial during UAT testing. Also, Logrocket provides easy integration with your favourite framework and even Redux state management (it has a middleware for NgRX). So you can see the state changes as if you have access to the browser in debug mode.

Sounds great! Isn’t it? Well, there are some pitfalls!

• There is no offline support out of the box. Meaning if a user is offline, LogRocket has no means to keep the device's data and send it later. You can add a service worker to your app and proxy the LogRocket request to provide the offline storage yourself.

• If you have a sizeable redux state, it can affect your app's performance and hug too much bandwidth. LogRocket will show you a warning if your state is too large and let you selectively ignore reporting parts of the state.

• LogRocket has a free tier and very flexible pricing. So if you have not tried it, I highly recommend it.

I have used LogRocket in many of our Ionic apps, and it makes prod debugging much easier for us. To avoid unnecessary data capture and respect user privacy, we usually avoid sending sensitive data by removing it from the payload that is sent to the LogRocket.

LogRocket session recording is disabled by default in our prod. We only enable it when debugging a specific user problem.

Enabling LogRocket for a specific user is usually triggered by the user by accessing a debug menu in the app. This way, the user will be in control of when their session is recorded.

There is another service called Fullstory, which provides session replay, and I have not used it personally. Also, the pricing seems more expensive than LogRocket.

4. Solutions that can handle runtime errors

There are multiple solutions known as JS error trackers, which can send any runtime error in the JS runtime to a remote server. These errors are usually accompanied by helpful environment and user-session information. Like browser spec, the stack trace of errors, time, location, user id and more.

Also, you can integrate them with other notification services like Slack so you can get real-time feedback from your production and act as quickly as possible to fix user issues.

I usually have Sentry as part of most of the apps I build to make it easier for me to address user issues proactively.

Sentry.io

Sentry provides self-hosted and cloud-based error monitoring that helps all software teams discover, triage, and prioritise errors in real time. Sentry integrates with all major frontend frameworks easily and also has a free tier for you to start with.

TRACKJS

JavaScript Error Logging from TrackJS monitors your web applications for JavaScript errors, alerting you with excellent context about how the user, application, and network got into trouble. Find and fix your bugs fast with TrackJS. Here is a good video by Bas explaining how TRACKJS works.

5. Use google analytics to track exceptions

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic.

Google Analytics is used to track website activity such as session duration, pages per session, bounce rate, etc., of individuals using the site and the traffic source information.

To use Google Analytics for exception reporting, you can send data of any exceptions you are interested in along with custom metrics that you have defined. Then you can make use of Google Analytics reports understanding what type of exceptions happen or how many users get a specific kind of exception.

An example of this use-case can be if many users are searching for a product in your shopping app that you do not provide. This exception is not necessarily an error, but at the same time, it’s valuable stats for you to improve the UI/UX to give the user a better error message or maybe even consider adding that product to your offering.

Conclusion

I hope you have enjoyed reading this article, and please check the first part of this article.

Please leave a comment if you have questions or need help with some specific topic in the Ionic apps debugging.

1- Remote debugging during development using Web View

from Ionic website: Web Views power web apps on native devices

Ionic apps (native apps) are web apps that run in an embedded browser, so you can use remote debugging with chrome dev tools on Android or Safari Web Inspector on iOS to debug JavaScript, HTML and CSS.

You can use remote debugging with an actual device or simulator. If you use a real device, ensure that debugging is enabled both from the device and on the remote browser.

In Android, you need to go to the settings and enable developer mode first and then USB Debugging under the developer options menu. If you do not see the Developer options menu, you need first to enable it. To do that, go to About phone > Software information find the build number and tap on it until you get the confirmation for enabling developer options. Then the Developer options menu will be available at the same level as About phone menu option.

To enable remote debugging for android. Open a new chrome tab and type in chrome://inspect this will show you all the web views available for debugging, grouped by app name.

Chrome inspect devices tab, showing apps that can be debugged on Simulator and Actual Device

iOS is very similar. Open Safari and find the menu that reads Develop from there; find the device you want to debug. Open the device menu, and you will see all available apps(Web Views) to debug. If you do not see the Develop menu, you need to go to Safari preferences and enable developer mode from the advanced settings. Also, make sure that the developer option is enabled on the actual device you use for debugging.

Develop menu in Safari Desktop

You can use console methods like console.log and look at runtime logs to see how your app works. Also, you can use the JS debugger as you would do with a standard web application. You can inspect DOM and manipulate HTML and CSS for debugging.

Here is an example of remote debugging using Safari web inspector running the app on iOS simulator.

Remote debugging using Safari web inspector running the app on iOS simulator

Here is an example of remote debugging using Chrome DevTools running the app on Android simulator.

Remote debugging using Chrome DevTools running the app on Android simulator

If you prefer remote debugging using your IDE, VSCode already supports this feature. So instead of putting a debugger in JS or adding console logs, you can simply put a breakpoint in your code in IDE and runtime will pause that your breakpoints. There is a section in the Ionic debugging guide about this method. https://ionicframework.com/docs/troubleshooting/debugging#debugging-with-visual-studio-locally-in-chrome-both-android-ios-

2- Debugging during development using a browser

If you use Ionic with Cordova or Capacitor, some of the native features will be only available when the app runs natively on a device or simulator. This limitation means you cannot simply serve the app using a desktop browser. To avoid this issue, I usually try to wrap my native service calls. Many plugins already provide a web implementation like Geolocation which falls back to use the browser Geolocation API. With other plugins, you can mock the plugin behaviour for the web or wrap the plugin calls in a service/function that ignores the web calls.

The following code is an example of using the Capacitor Haptics plugin on the device and ignoring the call on the web. This way, I will not get errors for the Haptics call in the console if I serve the app in a desktop browser. Alternatively, I could have used the Navigator.vibrate() to replicate the same behaviour, but in this case, I did not have a web target for deployment.

import { Capacitor, HapticsImpactStyle, HapticsNotificationType, Plugins } from '@capacitor/core';
const { Haptics } = Plugins;
export const hapticWarning = () => Capacitor.isNative ? Haptics.notification({ type: HapticsNotificationType.WARNING }) : '';
export const hapticError = () => Capacitor.isNative ? Haptics.notification({ type: HapticsNotificationType.ERROR }) : '';
export const hapticLight = () => Capacitor.isNative ? Haptics.impact({ style: HapticsImpactStyle.Light }) : '';
if (Capacitor.isNative) {
  Haptics.selectionStart();
}
export const hapticSelect = () => Capacitor.isNative ? Haptics.selectionChanged() : '';

Debugging on a regular browser like chrome helps you to use your favourite debugging tools and extensions. For example, I use redux DevTools to see how my state is changing as I navigate my application workflow. It’s much easier to simulate different screen sizes for testing your UI and the app layout responsiveness using the chrome dev tools. Another benefit of this approach is the faster feedback loop since changes are just a refresh away. Not suitable for debugging that involves native apis access.

Other useful extra tools available compared to remote debugging are the performance audit tab(lighthouse) to test your performance, accessibility, PWA scores, or animation debugger.

Here is an example of debugging an app, which uses ionic v5 and Angular v9.

Debugging app layout using Chrome DevTools

3- Debugging during development using native IDEs

If you use Xcode or Android Studio to run your app on an actual device or simulator, you can look at debug logs output in IDE. This method is beneficial to debug issues that happen at the native level. Sometimes these issues happen early on app startup, which means your Web View does not even get a chance to load. So previous methods will not work.

Plus, if you use plugins to access native capabilities, you can quickly put a breakpoint in the Swift (Objective C) or Java code to find out issues caused by a bug in that plugin.

Running the app using native IDE’s is the primary way Ionic & Capacitor works. With Ionic & Cordova, you will need to go to generated iOS or Android project and open it in the respected IDE to debug it.

Debugging using Xcode

Debugging using Android Studio

There are many more tools for debugging. For example, using the desktop browser or native simulators, you throttle the network to simulate intermittent network condition or mock GPS location for debugging related to a device moving on a path or at a certain speed.

I hope you have enjoyed reading through this article, and please check part two of this article.

Please leave a comment if you have questions or need help with some specific topic in the Ionic apps debugging.

I had 884GB of my 1TB hard disk taken by macOS temp files. These files plus my files, apps and projects had reduced the free space to less than 100 MB (out of 1 TB) and nothing was working properly. I was getting disk space alert constantly.

These temp files are hidden so you will not find them in any reports. like when you look at storage analysis in macOS. It just comes under the category of Other which does not tell you what or where the files are.If you google these many people have the same issue.

macOS storage analysis example showing others

Googling I found the “Other” category includes the following types of files:

• System temporary files

• macOS system folders

• Archives and disk images (.zip, .iso, etc.)

• Personal user data

• Files from the user’s library (Application Support, iCloud files, screensavers, etc.)

• Cache files

• Fonts, plugins, extensions

• Hidden files

• Other files that are not recognized by a Spotlight search

I tried multiple techniques to make these hidden files visible.

• I restarted the machine and that seemed to release some disk. I got to 4GB free space.

• Using ncdu with command sudo ncdu / ncdu is a disk usage analyzer with a ncurses interface. It is designed to find space hogs on a remote server where you don’t have an entire graphical setup available, but it is a useful tool even on regular desktop systems. It takes a long time to analyse and for me was crashing halfway. I believe the size of disk or data was too big for this tool. Also for some reason, it was showing the size of the drive as 3.9 TiB which is way more than 1TB.

ncdu tool scanning my HD

• Next tried DiskDaisy and after analysis, it showed that there are 881GB of hidden files but I needed to pay and buy a licence to see the hidden files. It’s a premium feature.

DiskDaisy scan results on the free version

• Next tried CleanMyMac. It’s a nice software and has some free feature but it was only finding 7.5 GB of junk to clear. Things like app caches, unneeded download files and some more junk. I removed the IMovie through CleanMyMac since I don’t use it and that gave me another extra 2GB disk space.

CleanMyMac UI example — I did not save the actual one from my test

• Then tried the OmniDiskSweeper and when I ran the analysis It found 110GB of used disk space. Failed to see the hidden files. I used the GUI but apparently, you can use it as command line as well. Install with HomeBrew using brew cask install omnidisksweeper

OmniDiskSweeper UI example — I did not save the actual one from my test

• Looking at Mac DiskUtility I could see the same info on disk space usage but no more info on what or where are those files.

• Last hope was going back to DiskDaisy and purchasing a licence. Hoping it can show what are those hidden files finally. Good news! It worked and it showed that the hidden files are located under private/var/tmp and there they were!

DiskDaisy showing the hidden file in the premium version

• Then after reading more on the forums, I found these are macOS temp files. Articles I read were primarily suggesting 2 solutions. 1- Restart your machine and macOS should get rid of temp files. 2- If the first solution does not work, start in safe mode and then restart in normal mode and that should remove the temp file. None of them worked for me. I even kept the machine in safe mode for a couple of hours to give the so-called macOS cleanup task enough of the time. Still no luck!

• Then I used macOS built-in Disk utility in safe mode and the First Aid and hoping it can clean up any temp files. It did not find any errors and did not delete any files. So no luck here either!

• Last resort was to manually delete the files. If you read on this manual deletion topic you will find a lot of ppl warning not to mess around with files in private/var/folders and also private/var/tmp since they are managed by OS and can cause irreversible damage to files. Since I was out of options and HD space I relied on one article that was claiming removing temp files manually will not harm anything. I removed the files using DiskDaisy and freed up space. Then restarted and all looks good so far 🤞.

It took a good 40mins to remove all the files and my computer is alive. It was like choking the resources before. Disk space is one problem and also this issue was causing my BitDefender to go crazy and upload a lot to its server (I guess BitDefender does send some data about file for scanning to its server). So it was using a lot of bandwidth as well.

I still am not sure if what I did was right and if you should have manually deleted the temp files. The main question is why the OS didn’t clear out the temp files in that folder in the first place as expected. I will keep an eye on things in that area for the next few weeks and make sure it cleans up after itself.

The DiskDaisy licence did cost me AUD 15 and saved me a lot of time on this diagnosis. Also, I can use it on my other machines.

My machine is much faster now and I have not heard the fan sound today. BitDefender network activity is reduced significantly as well.

I was so focused on solving the issue and did not think about checking how old these files were or potentially try to find out if they belong to any specific programs which might have caused the issue.

So if you have more information on the macOS temp files, please share it here with me.

ps: I have used my machine for 5 days since and so far no signs of anything missing after the cleanup.

Many software development teams practice agile with scrum for software development. As a part of these practices, you are always trying to maximise productivity and get more goals done in a given sprint.

Unfortunately, it’s very easy to get caught up in answering the never-ending demands and deadlines of projects and forget about the amount of stress and load put on the team and the individuals.

Achieving the maximum amount of work done DONE does not necessarily mean you have a long term efficient team. In sprint retrospective meetings when you ask how each individual feels about the sprint, although they have achieved a lot from the product owner’s point of view, they are not feeling good about the achievements and some are probably stressed out.

This is not a good outcome because it’s not sustainable. If you continue on this path you will not only have an unhappy team and loss of productivity but you also risk losing good resources as well.

Does it sound familiar? Can you relate to this story in your team or organisation?

Stress and burnout

Stress is a natural human response to challenging or dangerous situations. A small amount of stress, such as working to a deadline, can actually be helpful and allow increased alertness, energy and productivity. However, ‘living on adrenaline’ can only be effective for a short time. If the pressure goes on for too long or becomes greater than our ability to cope with the stress, it can drain our physical and mental resources. Stress can have a negative effect on physical and mental health, relationships, work and wellbeing. Burnout is a state of emotional and physical exhaustion that can occur after a long period of excessive or stressful work. The 3 key features of burnout are:

• emotional exhaustion
• a feeling of detachment from work or becoming cynical
• reduced efficiency or lacking a sense of achievement

source: https://www.healthdirect.gov.au/work-life-balance

To avoid burnouts in your team, make sure you are not encouraging Working overtime regularly or on weekends. STOP rewarding workaholics. The workaholism culture is bad for the team and it should be discouraged.

Workaholics arent‘ heroes. They don’t save the day, they just use it up. The real hero is already home because she figured out a faster way to get things done. from: http://37signals.com/rework/

Some of the common reasons why you work extra hours might be:

• You are a junior developer so you want to learn fast.

• You have started a new job and want to prove yourself.

• You want to learn a new language, technology as part of your job so you are putting extra hours to compensate for the learning on the job.

• The project has a very aggressive deadline and instead of raising this issue you quietly put in more hours to finish the task.

• There are hidden tasks that are not accounted for but need to be done as part of your task. Like a pre-existing bug preventing you to add the new feature.

• You lack some skills to do the task. Instead of learning that skill properly before doing the task, you try to finish the task by endless google searches and copy/paste from stack overflow. Eventually, you barely make it work by spending more time.

• You are a perfectionist and find endless improvements to do. Things that no one asks you but regardless you want to add that small UI tweak here and there or refactor the code 100 times so it looks perfect.

• Tasks are underestimated and instead of fixing the estimates or the process that produces those estimates you put in more hours.

Whatever is your reason for working compulsively it’s hurting you and your team. So it must be stopped because:

• You have other responsibilities outside of work and working overtime affects your life in a way that reflects badly on the work. So it’s not even sustainable.

• As said before you will lose efficiency. Putting in more hours will not result in more work done. Say goodbye to creativity!

• You might think you are doing your team a favour. Unfortunately, you are hurting the project budget by putting extra hours that are not counted in the costing. These are the hours going unreported because you quietly worked a little more here and there so you can finish. So when you cost the next project this broken cycle repeats.

Many of you probably have read *The 7 Habits of Highly Effective People.*

I was revisiting this classic recently and one story, in particular, grabbed my attention. The story of the golden goose and P/PC concept.

P/PC

P stands for the production of desired results. PC stands for production capability.

To explain the P/PC Stephen Covey uses the story of the Golden Goose by Aarne-Thompson. This is the story of a farmer who finds out that his goose can lay golden eggs. Eventually, the farmer becomes greedy and wants more golden eggs quickly so, he kills the goose hoping to get all the eggs at once. This results in him losing the golden eggs (the desired result) as well as the goose (production capacity).

There is always a tension between results and the ability to produce those results (aka effectiveness).

The P/PC Balance is about balancing between two extremes. One end is being focused only on the result and the other end is focusing on the production capacity only.

Who is the golden goose in your development team?

I think the development team as a whole is your golden goose. So the team must be nurtured. This way we will have a sustainable production of golden eggs.

The key here is the team, so avoid rewarding or criticising individuals as much as possible. In my experience that does not help with team development.

People have different roles in a team which adds different values to the business but at the end of the day what you get is the result of teamwork.

You want to create a nurturing culture that prevents the issues that are caused by bad habits/processes and encourages good habits/processes. The main focus is here the team culture rather than individuals.

“You don’t create a culture. It happens. This is why new companies don’t have a culture. Culture is the byproduct of consistent behaviour. If you encourage people to share, then sharing will be built into your culture.“ from: http://37signals.com/rework/

How do you nurture your development team?

First, we need to understand what motivates the team and makes them happy.

Here are some items that apply to my team:

• Recognition by peers and team.

• Working with smart people and learning from them.

• Being technically challenged and coming up with creative solutions.

• Experimenting with cutting edge technology and staying relevant with the new technologies.

• Career development and feeling of growth

• Having a proper work-life balance

• Having flexible work arrangements

Over the years we have tried different techniques to inspire my team. Here are some of them.

Transparent workflows and processes

We use a mixture of Scrum and Kanban. We have clearly defined workflows and processes that the team must follow. Through this, the team knows how to start a piece of work, how to measure progress and when to call it done. This clarity reduces the stress in the team.

For example, some of the rules are:

1- You should not start on a task without clear understanding of business requirements. 2- You should not start a task that does not have an agreed and documented acceptance criteria. 3- You should raise your hand and ask for help if you are stuck and cannot progress more than 1hr. 4- You should break the task if it’s too big to commit to in a day.

People know what to expect at each stage of the workflow and also how to realign and come back to the right track in case something unexpected happens. Like scope changes when the client changes their mind or when a technical challenge rises at the very last part of the implementation.

Team values system

• We have clearly defined our values as a team.

• A few examples of my team’s values are #teamwork, #commitment, #responsibility, #respect, #skills.

• We have even visualised these values to constantly remind ourselves about them.

• Teammates help each other to understand and achieve these values by completing daily tasks. For example, knowledge sharing helps us to upskill. We also take courses individually or as groups to learn new things.

• This values system is also used to recognise teammates contributions.

Team values visualised as a tree by Anastasia Foulidis

Team rewards

• We have a team-driven rewards system so colleagues can recognise and appreciate each other.

• Heytaco on Slack is how the team can appreciate one another with tacos. Rewards can be claimed individually (coffee and brownies) or can be used to contribute to a team reward, like a company-sponsored lunch or an outdoor activity.

• Super tacos are given at the end of each sprint. This is a letter of recognition describing the significance of the contribution along with a gift card or movie tickets. This will also land you in the Taco hall of fame.

• Staff awards at company events for more significant contributions. This is a certificate of excellence from the CEO and a gift card. Plus you get a chance to present your work in front of the whole company.

Team activities

• We do team building activities and encourage the whole team to participate.

• Tech Talks once a fortnight is where we share new things and learn new technologies.

• Group code reviews to understand and solve some technical challenges that are common across the team.

• Working groups. These are multiple teams that cover different areas of software development like DevOps, UI/UX and front end development, Backend development and QA. These working groups have fortnightly meetings to discuss the issues in their respective area and come up with plans and strategies on how to tackle them.

• I almost forgot to mention we have some serious competitions going on table tennis and footy tipping. Even during COVID time, we do virtual games and daily step challenges.

• We do many more group activities to help us socialise as a team and connect on a human level. When I talk to former colleagues, one of the things that come up consistently is our team’s social culture which they miss.

Feedback loop

We have multiple feedback channels. Some are through predefined meetings/surveys and some initiated by the teammates when they want to provide feedback. This helps to find the issues early and avoid potential damages.

• Multiple surveys throughout the year to anonymously give your opinion on different topics that affect you and your work.

• There are 1–1 meeting with your manager every fortnight. You have a chance to discuss all the issues you are facing.

• On top of that doors are always open and we value feedback and transparency.

Support for career development

We have a range of activities that try to cater to each individual’s career development and define clear goals for the team so we can support it as much as possible.

• A skills matrix to help us measure and assess each person’s skills in different areas.

• A chance to work on new tech in R&D projects. For example, trying machine learning in the context of an R&D project.

• Accommodate people when transitioning from one technology or software development layer to another. For example, a Java developer moving on to NodeJS or a front-end developer trying full-stack.

• Dedicated Personal Development time and budget that you can decide how to spend. Be it buying books, courses or going to conferences. Your choice!

Work-life balance

• My team offers flexibility around the working hours. If someone needs to come in late and work late it’s fine. As long as you and other teammates can do their task efficiently. The only exception being the 9:45 am standup and sprint planning because these sessions are critical to helping us communicate as a team.

• People can work from home if they need to and we have all the required infrastructure in place to support it.

These are just some of the examples my team uses to nurture our development team. I am sure your team has similar ways.

What are the signs that you are too focused on the golden eggs?

I am going to discuss these signs in more details in part 2 of this article but just to give you a peek, here are some of the common ones.

• People work overtime for extended periods instead of improving the processes.

• Creative ideas come from mangers and clients instead of the development team.

• Lack of interest to participate in team activities.

• The team is happy to keep using outdated practices and technology and people do not care to suggest tech upgrades or upskilling.

• People are not sharing their opinions or ideas and prefer to be quiet.

I consider myself a seasoned software engineer as I have been working in this industry for a good amount of time.

I recently received feedback from my team in one of the sprint retrospective sessions.

I agreed with many of the points my teammates were making. At the same time, I tried to present my views on the issue and the reasons why I made the decisions I made.

I approached the feedback with an open mind but still, it felt pretty harsh and I found it a bit discouraging.

This made me think, why did this feedback make me feel bad? Wondered if there is a better formula to provide the same feedback constructively.

Over 50 percent of employees in today’s workplace receive feedback that’s too general or not designed to give enough constructive criticism. This was mentioned in an article in the journal of Association for Talent Development titled “Please Boss Me Around.”

There are times that you need to give feedback to a colleague or they might be asking a question ( and no there are no stupid questions just people with different skills or skill levels). You might be their peer, team lead, or manager.

How do you give feedback? Have you ever paid attention to your choice of words or your tone?

Sometimes conversation in a team can be just logical, binary if you like, and the conversation tone might be condescending or even insulting.

When giving feedback, specifically if this is to criticise something that has gone wrong, discussions can easily take an ugly turn and become unproductive arguments or make the other person feel bad and inadequate.

We need to be mindful that people’s sensitivity levels are different and not everyone can stomach the same level of criticism.

This is not to say you cannot give them feedback but it is best to understand how the human brain works when receiving criticism/feedback.

Constructive criticism as it’s called is truly a hidden gem that can unlock many potentials in people. 💎

A research at the University of Minnesota shows that negative events at work, such as being criticised, have a more powerful effect on an employee’s mood than do positive events, such as receiving praise. The study reveals that employees react five times more strongly to a negative encounter with their boss than to a positive encounter. Moods are the dimmer switch of performance, so be careful how you use that dial. (Ref: What Our Brains Look Like on Praise and Criticism)

Giving constructive feedback is an art, and there are a few things to consider before designing your message. Luckily there are proven ways that you can use to give feedback without offending people. Here are some tips:

1. Create a feedback-friendly atmosphere. 🤝 No matter what your position is, you can ask for feedback for yourself. Others around you are more likely to open up, drop their guard, and do the same. Next time you lead a meeting or give a presentation, ask a colleague to reflect on a few specifics.

2. Make sure what you are about to criticise can be improved in the first place. In other words, no point in asking for a change in something that is not in control of the other person.

3. Make sure that the other person understands your point of view before trying to ask them to change!

4. Use the sandwich technique! 🥪 🌯 Wrap the issue you want to discuss between a couple of good feedbacks so your teammate doesn’t feel they are being cornered. People get defensive when they feel they are cornered.

5. Always find the action that is causing the issue and criticise the action, not the person.

6. When working in a software development team, you need to always approach issues from the team point of view! Use what is called “WE” language to emphasise that you as the team are willing to work and improve the situation.

7. Avoid sarcasm! Avoid sarcasm! Avoid sarcasm! Also, keep your emotions out of the conversation!

8. Don’t use a parenting tone! (Unless you are working with 5-year-old developers!) 👶 🍼 You might be a mom/dad but your teammates are not kids! (Eg: asking questions like this one with a parenting tone: “Alex! What do we do when the task’s estimate changes?!”)

9. Avoid impulsive decisions for criticising someone. Think thoroughly and carefully before saying anything. You may not be able to undo what you say and this will cost you in terms of team relationships.

10. Choose a proper time and place! ⏰ Remember you are about to tell someone there is an issue with what/how they do their job so you don’t want to add to that the embarrassment of being in front of everyone. You may even ask your colleague what is a good time to give them some feedback. This way they will not be caught off-guard and know what is coming.

11. Watch your body language and tone of voice! 📣 Try to be friendly and approachable. For example, if you are sitting across the table from your colleague and hitting your hand on the table whilst talking loudly, you might be demonstrating an aggressive body language. (CHOPPING MOVEMENTS 🤺)

CHOPPING MOVEMENTS (Image from 13 Revealing Body Language Hand Gestures article)

What is your experience with giving or receiving feedback at the workplace? Do you have any techniques to share?

Please feel free to comment.😊