10 Techniques for Estimating Software Projects

Scrum for Software Developers: Why It's Worth Understanding



Developers often wonder about how to choose the right data type for their needs.

If you are storing grades from a grading system, is it better to use integers or enum?

If you've been using C#, one thing that might have bugged you is the fact that there's no way to define an enumerated type that has string value.

We can reference the enum name rather than the value by using ToString(), but what happens if we want to add spaces to the name?

<div className="mb-4">
  <figure className="">
    <img
      className="rounded-2xl"
      src="/img/c-sharp-enum/string-to-int.png"
      layout="responsive"
      width={1000}
      height={445}
      alt="Trying to use string enum in C#"
    />
    <figcaption>
        Using string-based enums in C# is not supported and throws a compiler error.
    </figcaption>
  </figure>
</div>

Since C# doesn't support enum with string value, in this blog post, we'll look at alternatives and examples that you can use in code to make your life easier.

## Introduction to the Enum type

An enumeration type is a value type that has a set of named constants. 

To declare an enumeration type, use the `enum` keyword and specify the names of enum members.

```csharp
public enum Country
{
	UnitedStates,
	Canada
}
```

### Enum operations

Since enum values are of integer types, these are the operators that we can use:

- Enumeration comparison operators `==` , `!=`, `<`, `>`, `<=`, `>=`
- Addition and Subtraction operators `+`, `-`
- Enumeration logical operators `^`, `&`, `|`
- Bitwise complement operator `++`, `--`

### Default enum value

By default, the association constants of enum members are of type int. They start at zero and increase by one following the order in which you define them.

```csharp
public enum Country
{
	None, 
	UnitedStates,
	Canada
}
Console.WriteLine((int)Country.None); // 0
Console.WriteLine((int)Country.UnitedStates); // 1
Console.WriteLine((int)Country.Canada); // 2
```

If you don't specify a value in the declaration for each enumeration element, it will get the default value from its position in the list of enums. This means that if you leave out a number or put one in wrong order, then all those numbers after it will have the default value.

```csharp
public enum Country
{
	None,
	UnitedStates = 5,
	Canada
}
Console.WriteLine((int)Country.None); // 0
Console.WriteLine((int)Country.UnitedStates); // 5
Console.WriteLine((int)Country.Canada); // 6
```

### Supported Enum Values

Enumeration's underlying type has to be integral type.

```csharp
// Won't work:
public enum Country : string
{
	None,
	UnitedStates = "United States",
	Canada
}
```

If we try to compile the code above, we get a compile error.

Output - Compilation error:

- Type byte, sbyte, short, ushort, int, uint, long, or ulong expected.
- Cannot implicitly convert type 'string' to 'int'

Since the underlying type for enum needs to be numeric (integral), let's look at some **enum string alternatives** that will help us in situations similar to UnitedStates ⇒ "United States" above. 

## Use a public static readonly string

A common alternative to string enum in C# is to create a class with constant strings. This is preferable because it makes the intent of each constant clearer, and also allows you to add methods or other extended functionality.

A good example of using a static class as an alternative to enum is [`HttpMethods` in NET Core.](https://github.com/dotnet/aspnetcore/blob/665ea2f868d916693ad1e243959349fa8e6d9647/src/Http/Http.Abstractions/src/HttpMethods.cs)

<div className="mb-4">
  <figure className="">
    <img
      src="/img/c-sharp-enum/public-static-readonly.jpg"
      layout="responsive"
      width={1200}
      height={387}
      alt="A code showing HttpMethods class in .NET CORE."
    />
  </figure>
</div>

It allows for writing enum-like syntax, but it returns a string. For example:

```csharp
Console.WriteLine(HttpMethods.Get); // GET
```

### static readonly vs const

Should we use `static readonly` or `const` when defining constants?

Compiler embeds `const` value in each assembly that uses them, giving each assembly a unique value for the constant. On the other hand, `static readonly` makes sure that the same reference gets passed across assemblies. 

That means that using `static readonly` for string comparison checks for reference equality rather than value, which is faster. 

The comment in the [source code of "HttpMethods"](https://github.com/dotnet/aspnetcore/blob/665ea2f868d916693ad1e243959349fa8e6d9647/src/Http/Http.Abstractions/src/HttpMethods.cs) explains the benefits of using `static readonly` as opposed to `const`:

> We are intentionally using 'static readonly' here instead of 'const'.
 'const' values would be embedded into each assembly that used them
and each consuming assembly would have a different 'string' instance.
Using .'static readonly' means that all consumers get these exact same 'string' instance, which means the 'ReferenceEquals' checks below work and allow us to optimize comparisons when these constants are used.

The biggest drawback of this approach is loosing a compile-time check of supporting values. For example, in the code below, compile-time check is not validating if variable httpMethod is one of the supported HttpMethods, and nothing is stopping developers from assigning it an invalid value:  

```csharp
string httpMethod = HttpMethods.Get;
httpMethod = "Invalid"; // this would work
```

## Custom Enumeration Class

In the [blog post](https://lostechies.com/jimmybogard/2008/08/12/enumeration-classes/) from 2008, Jimmy Bogard introduces the pattern of creating a custom enumeration class which has the primary goal to minimize scattering of enum logic throughout the code base. 

While using enum for control flow or more robust abstractions can be appropriate, it often leads to fragile code with many control flows checking enum values.

Instead, we can create Enumeration classes that enable all the rich features of an object-oriented language. 

Implementing [the abstract class `Enumeration`](https://docs.microsoft.com/en-us/dotnet/architecture/microservices/microservice-ddd-cqrs-patterns/enumeration-classes-over-enum-types#implement-an-enumeration-base-class), makes it easy to use enum-like synax with string names while getting all the benefits of compiler checks: 

```csharp
public class CountryType : Enumeration
{
	public static CountryType UnitedStates => new(1, "United States");
	public static CountryType Canda => new(2, "Canada");

  public CountryType(int id, string name)
      : base(id, name)
  {
  }
}

Console.WriteLine(CountryType.UnitedStates); // "United States"
```

In this pattern, the logic is in one place. This is good when the data is static and we know it at the compile time. But if you have settings or database values, then you'll need a different solution.

## Attribute and Extension methods

We can use the Description attributes to provide the string description of the enum, and with some help of extension methods we can make it easy to extract that value. 

### DescriptionAttribute

Usually, we need a human-readable description next to the raw numeric value of an enumeration. For this, there is the `DescriptionAttribute` available natively within .NET which allow to add any string as a description attribute to the enum.

<div className="mb-4">
  <figure className="">
    <img
      src="/img/c-sharp-enum/enum-string-description-attribute.jpg"
      layout="responsive"
      width={900}
      height={512}
      alt="Code that is using DescriptionAttribute."
    />
  </figure>
</div>

The downside of using `DescriptionAttribute` is that it might not be available in different frameworks that we use. We need to have access to `System.ComponentModel` from .NET to use it.

Another downside of using `DescriptionAttribute` and is that it requires you to recompile your code every time you want to update the string associated with.

Note that although this is useful when you need some additional information on enumerated values in your code; It doesn't help us if we are displaying something outside of a C# becau

The good thing about this approach is that it comes with .NET through `System.ComponentModel`.

### Extension method

Extension method allows us to extract the Description attributes easily, using just a single method call:

```csharp
Country.UnitedStates.DisplayName(); //United States
```

User cocowalla on GitHub put together a very useful [extension method](https://gist.github.com/cocowalla/f8002c14cbf5d35fd3e0b14e3db96c75). It also caches the results. Caching the results is important because reflection can be relatively expensive.
<div style={{maxHeight: '600px', overflow:'auto'}}>

```csharp
// Credits: https://gist.github.com/cocowalla

using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Reflection;

namespace Acme.Utils
{
    public static class EnumExtensions
    {
        // Note that we never need to expire these cache items, so we just use ConcurrentDictionary rather than MemoryCache
        private static readonly 
            ConcurrentDictionary<string, string> DisplayNameCache = new ConcurrentDictionary<string, string>();

        public static string DisplayName(this Enum value)
        {
            var key = $"{value.GetType().FullName}.{value}";

            var displayName = DisplayNameCache.GetOrAdd(key, x =>
            {
                var name = (DescriptionAttribute[])value
                    .GetType()
                    .GetTypeInfo()
                    .GetField(value.ToString())
                    .GetCustomAttributes(typeof(DescriptionAttribute), false);

                return name.Length > 0 ? name[0].Description : value.ToString();
            });

            return displayName;
        }
    }
}
```

</div>

## Use a Switch statement

The simplest way to convert enum values into string representation is by using a switch statement.

Examples:

```csharp
public string GetCountryName(Country country)
{
	switch(country)
	{
		case Country.UnitedStates:
			return "United States";
		case Country.Canada:
			return "Canada";
		default:
			throw new ArgumentOutOfRangeException();
	}
}
public string GetCountryContinent(Country country)
{
	switch(country)
	{
		case Country.UnitedStates:
		case Country.Canada:
			return "North America";
		default:
			throw new ArgumentOutOfRangeException();
	}
}
```

This approach is good if Country based logic is present only in a few places, but if we add more, the behavior gets scattered all around the application.

It gets hard to keep track of all places where we have different logic based on enum value.

## Map Enum Values to Desired String Using a Dictionary

Using "if/else" or "switch" statements is useful if you have a couple of values to map, but code gets complicated if we end up having many values to convert. In that case, it's better to use a dictionary. 

Another alternative is to create a dictionary that maps between enums to desired string values.

```csharp
public static void Main()
{
	Console.WriteLine(GetOrderErrorDescription(OrderErrorCode.NotFound));
  // Output: "Order not found or does not exist."

	Console.WriteLine(GetOrderErrorDescription(OrderErrorCode.Locked));
  // Output: "Unknown"
}

public enum OrderErrorCode
{
	Unknown,
	NotFound,
	Locked
};

public static Dictionary<OrderErrorCode, string> OrderErrorDescriptions = new Dictionary<OrderErrorCode, string>()
{
		{ OrderErrorCode.Unknown, "Unknown Order Error"},
		
		{ OrderErrorCode.NotFound, "Order not found or does not exist."}
};

public static string GetOrderErrorDescription(OrderErrorCode errorCode)
{
	if (OrderErrorDescriptions.TryGetValue(errorCode, out string description))
	{
		return description;
	}

	// Could't find the mapping value in the dictionary.
	// Return a default string.
	return "Unknown";
}
```

The biggest advantage of the dictionary approach is that we can map a single enum to multiple dictionaries.

The downside of dictionary approach is that maintaining the conversion mapping might be tedious because each change in enum needs to be reflected in the dictionary.

Avoid this approach for anything other than descriptive messaging.

## Code Patterns to avoid

### Avoid Converting String Value to Enum By Name

Using `Enum.Parse` to get enum of a string is a practice that I frequently see in web applications.

The problem with this approach is that it becomes difficult to maintain if you have many values. After all, the promise of enum type is to provide compile-time safety by providing constant definitions.

Avoid `Enum.TryParse` and `Enum.Parse` because it tries to match (parse) arbitrary input values with the explicitly defined names in the enum.

But if you end up using these methods, catch exceptions.

For the example below, what's the output when we try to parse the drop-down text?

// insert croatia.png

The console prints out "UnitedStates" because `TryParse` outs the default value, which is 0 (not null!). And in our case, `UnitedStates` has a value of 0.

`Enum.TryParse` returns `false`, so be sure to check that too.

### Avoid basing your logic on string representation of Enum Name

Avoid basing your logic on string representation of Enum Name.

```csharp
if (Country.UnitedStates.ToString() == "UnitedStates") // do something
```

Logic that goes after the code that compares the string representation of enum name above would change if someone changed "UnitedStates" to "US" but didn't update the "UnitedStates" string.

Looking at the example, it might seem trivial, but it is easy to forget. This mistake happens often in big systems, so try to avoid it.

### Enum.IsDefined

`Enum.IsDefined` method tells whether **an integer value** or **its name** exists in the enumeration.

The method returns true if it exists and false otherwise.

For example, we can use the Country enumeration and see if an enum member is defined with a certain associated value:

```csharp
private enum Country
{
	UnitedStates,
	Canada
}

Enum.IsDefined(typeof(Country), "UnitedStates") // true

Enum.IsDefined(typeof(Country), Country.UnitedStates) // true

Enum.IsDefined(typeof(Country), 3) // false
```

Conversion of explicit enum names to strings based on `Enum.IsDefined`, or basing the further logic on it can lead to code smells.

## Conclusion

In this blog post, we introduced the enum type and C# limitation of not being able to assign it a string value type.

There are many possibilities for replacing string enums with other C# features and methods that should be considered in order to reuse code more easily and create a better experience for developers.

### Alternatives to String Enum

We looked at five most popular alternatives: 

- `static readonly string`
    - Quick solution to comparing, but not so safe when having to assign because it allows developers to assign strings that are not supported in the static class.

- **Attribute and Extension methods**
    - Description attribute paired with extension methods is a quick way to add string to numeric values.
- **Custom Enumeration Class**
    - Provides a brilliant solution for cases when we need to add a lot of logic around enums.
- **Switch or if/else statements**
    - Not very good at scale. Only use it when the enumeration type is tiny.
- **Dictionary mapping**
    - Useful when mapping one integral value to manny string representations.

### When to use enum?

Enum are a type of data in C# that we should use with caution. When to use them?

- If you need to store only a few values and they are all known at compile time.
- When we won't be adding logic around the string representation of the enum.
- When the string value is for error messages, descriptions, or basic front-end messages.
- If you want the compiler to produce an error if someone assigns an undefined value or out of bounds index.
- When the set of enum values is small. e.g. days of the week.
- To make code more readable, especially when it is dealing with flags.

### When not to use enum?

It might be worth to consider not using enums: 

- When you go through a lot of trouble to use an enum, it might be time to use a class.
- When the application does not know the list of enum values at compile time (static).
- When different enums correspond to different types with different behaviors but the same interface.
- When we expect the list of enum value to grow a lot.
- When having to store strings representation to a database, rather than integral value.

### Will C# ever support for enums to be strings?

There are no signs that C# will have string enums soon.

There's an open [GitHub proposal](https://github.com/dotnet/csharplang/issues/2849) requesting string enums to be a C# language feature.

But until then, we'll have to keep using alternatives.

String Enums in C#: Everything You Need to Know


Have you ever tried to update a npm package and then realized that it breaks all other packages in your Javascript project?

This is a common problem for web developers, luckily there are some easy steps to take before updating a module.

In this blog post, I will show you how to update npm packages without breaking your project by following 4 simple steps:

1. Understand npm package versioning
2. Audit installed npm packages
3. Update only one npm package at time
4. Test your code after updating npm packages

<a href="#cheat-sheet">Cheat Sheet: 6 Commands To Help You Update npm Packages</a>

## Step 1: Understand npm package versioning

Versioning is an important part of npm and how to use updates safely when developing web applications.

Most npm packages follow semantic versioning guidelines.

**Semantic versioning** means that developers should compose a package version of three numbers separated by periods (e.g., "0.12.31").

### MAJOR.MINOR.PATCH versioning format

The first number, called the **major version**, indicates how significant a release this is in relation to other releases with the same minor and patch levels. Major version number indicates incompatible API changes.

The second number, called the **minor version**, indicates how much new functionality has been introduced since the last significant release; for instance, if this change was only small fixes or enhancements to existing features and no behavior changes were made then it would result in a higher value. Minor releases are not as risky as major version because they typically introduce new features, but they are not as risky as major updates because no API changes were made.

The third number is called the **patch version** and it indicates how much bug fixes or enhancements have been introduced since the last minor release; for instance, if this change was only small fixes or enhancements to existing features and no behavior changes were added.

### What do the caret (^) and tilde (~) mean?

In package.json, a version can have a ^ in front (e.g. `^0.12.31`), meaning the **latest minor release** may be safely installed. 

Tilde (~) in front (e.g., `~0.12.31`) means the **latest patch release** is safe to install. 

<div className="mb-4">
  <figure className="">
    <img
      src="/img/how-to-update-npm-packages-in-your-javascript-project/package-json-dependencies.jpg"
      layout="responsive"
      width={800}
      height={765}
      alt="Npm package dependencies listed in package.json file."
    />
    <figcaption>
        An example of npm packages that are listed as dependencies in the package.json file. All dependencies have a caret (^) in front, showing that it is safe to install the latest minor versions.
    </figcaption>
  </figure>
</div>

<InfoAlert>
  <b>package.json</b><br/>
  <strong><dfn>package.json</dfn></strong> is a file that keeps track of all the packages your app needs to run properly, as well as settings for how it should behave when running on different platforms and environments.
</InfoAlert>

## Step 2: Audit installed npm packages

Before you update npm packages, figure out if you have a good reason to.

It is better to stick with the package version that works. That way you will not have a risk of something breaking.

Primary reasons for upgrading npm packages are:

- Recent version of the package having a feature that we want
- Fixed bugs in the latest version of an npm package
- Updated dependencies for another package that you are using
- A security vulnerability in the npm package
- Upgrade of the environment where the project is running is not compatible with the the current version of the npm package

Couple of npm commands that will help you audit your packages before upgrading: 

- `npm list --depth 0` lists all packages at the top level
- `npm audit` checks for  security vulnerabilities or out-of-date versions
- `npm outdated` lists report of package versions compared to versions specified in `package.json` file

### npm list --depth 0

`npm list --depth 0` lists all installed npm packages, but only at the top level.

Listing packages at the top level is enough most of the time. Top-level dependencies usually take care of their inner dependencies.

### npm audit

`npm audit` will run a security vulnerability check against your project and report any found issues. It is not perfect, but it helps to find potential problems if you are using npm packages that have security vulnerabilities. It's not perfect because not all vulnerabilities are reported to npm.

<div className="mb-4">
  <figure className="">
    <img
      src="/img/how-to-update-npm-packages-in-your-javascript-project/npm-audit.png"
      layout="responsive"
      width={700}
      height={249}
      alt="An example of output when running `npm audit` command."
    />
    <figcaption>
        `npm audit` shows you a list of vulnerable packages, including the npm dependency tree.
    </figcaption>
  </figure>
</div>

### npm outdated

`npm outdated` will report any out-of-date packages in your project.

It shows current, wanted and latest versions compared to versions specified in package.json file.

- **Current**: is the currently installed version.
- **Wanted**: The maximum version of the package that is allowed by the version range in package.json.
- **Latest**: version of the package is the one that is tagged as "latest" in the npm registry.

Note: `npm outdated` command only shows the direct dependencies of the root project. But if you want to see other dependencies also, then use "--all."

<div className="mb-4">
  <figure className="">
    <img
      src="/img/how-to-update-npm-packages-in-your-javascript-project/npm-outdated.png"
      layout="responsive"
      width={800}
      height={534}
      alt="An example of output when running `npm audit` command."
    />
    <figcaption>
    `npm outdated` prints out a list of all installed packages that have updates available.
    </figcaption>
  </figure>
</div>

### Check for breaking changes before you update

Some npm packages will introduce breaking changes, which may cause errors when using the module.

Before making a breaking change, package developers often add "Breaking Changes" messages to the console output. It means that the module will change in future versions and developers need to keep an eye out for it.

To see if there are any breaking changes, you can also look at the "Breaking Changes" section of the package's readme file.

You can usually find package's readme file in:

- npm package's page on the [npm registry](https://www.npmjs.com/)
- inside of a module directory, check `node_modules` folder inside of your project
- project's website (or GitHub)

## Step 3: Update only one package at time

When updating, we need to be careful to only update packages we want. There is no need to update all of your modules at the same time.

Start by making updates in small batches and test each batch for any issues that might arise. This will allow you to find out how it's affecting your project, and it will let you isolate any errors.

### npm update

Changing the package version in package.json file and running `npm install` will most likely not do anything because already installed package version satisfies the versioning in the package.json file.

Rather than using `npm install`, you can use the `npm update` command to upgrade already installed packages. When you run a `npm update`, npm checks if there are newer versions out there that satisfy specified semantic versioning ranges that you specified in package.json and installs them.

To update a specific npm package, run the following in console:

```css
npm update package_name
```

### How to revert npm package updates?

If there are any bugs, you can easily undo the changes with these two commands:

```css
npm uninstall package_name
npm install package_name@version
```

The `@version` should be the same version that you had installed previously.

### Step 4: Test your code after installing new packages

In order to make sure your code still works after updating npm packages, it's important that you test the functionality before deploying. This is because a package update may cause errors in your application if you are not careful. To avoid these issues, I recommend running all tests on server and client side as well as manually checking for any JavaScript error messages throughout the site.

Steps:

- Run all unit and integration tests from both serverside and clientside by running `npm test` or equivalent command for your project.
- Review package logs for clues about what caused an issue or where things went wrong during installation

These 3 simple steps can help you avoid breaking your project by carefully installing new npm packages. 

What are some of the other ways that people have broken their projects? Let us know in the comments below, and we'll write a blog post on them!

### Bonus Tip: Clear npm cache

> As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead. On the other hand, if you're debugging an issue with the installer, you can use `npm install --cache /tmp/empty-cache` to use a temporary cache instead of nuking the actual one.

Sometimes npm doesn't pull the latest version of the package because it has an older version stored in cache. As of npm@5, cache issues should not be happening. But they still do sometimes.

To clear npm cache, run `npm cache clean --force`. This command clears npm's cache of all the packages that your project has installed with npm install or npm update.

It does not remove any dependencies from package.json, but it may help resolve a dependency issue if there is an outdated version in the cache and you can't find which one it is by looking through the packages list.

<h3 name="cheat-sheet" id="cheat-sheet">Cheat Sheet: 6 Commands To Help You Update npm Packages</h3>

This cheat sheet will make it easy to safely update npm packages in your node application. It includes a list of commands that will help you keep up with the latest updates and avoid breaking changes.

- Use `npm list --depth 0` to list all the packages in your package directory
- Use `npm audit` to find out which of your npm dependencies are vulnerable.
- Use `npm outdated` to list the packages that are out of date with respect to what is installed in package.json
- Use `npm update package_name`  to update an individual package that has already been installed.
- Use `npm uninstall package_name` and `npm install package_name@version` to revert to a specific version.
- Use `npm cache clean --force` to clear npm's cache of all the packages that have been installed.

How to Update npm Packages In 4 Easy Steps

How To Improve Cumulative Layout Shift Score

<div className="prose prose-xl">


A couple of months ago, I worked on a **saved payment methods feature** for an ecommerce website.

The end goal was simple — Allow people to save their cards so they can checkout easier. 

Working on it ended up being a lot of fun because it required both frontend and backend skills. 

Here's what I learned about it from the perspective of business, customers and security. 

<div className="px-6 py-7 my-4 md:rounded-xl" style={{backgroundColor:'#f7f7f7'}}>
Jump to: 
<div className="flex space-y-1 flex-col ml-2 mt-2">
<a href="#how-saving-credit-cards-online-became-a-thing">How saving credit cards online became a thing</a>
<a href="#how-saved-credit-cards-increase-loyalty-in-ecommerce">How saved credit cards increase loyalty in ecommerce</a>
<a href="#pay-using-saved-payment-methods-on-the-checkout-page">Pay using saved payment methods on the Checkout page</a>
<a href="#manage-credit-cards-on-the-checkout-page">Manage credit cards on the Account page</a>
<a href="#how-to-securely-store-credit-cards">How to securely store credit cards as a business</a>
</div>
</div>

</div>
<div className="mt-16" />

<InfoAlert icon="cursor">
  <b>Interactive demo</b><br/>
  Try to buy using saved payment methods below.
</InfoAlert>


<div className="-mx-4 px-6 py-7 my-4 md:rounded-xl" style={{backgroundColor:'#f7f7f7'}}>
<SavedCreditCardsPicker savedCreditCards={{
      credit_cards: [
      {          
        id: 1,
        last_four: '2215',
        image_url: 'Visa',
        card_type: 'Visa',
        expiration_year: '2022',
        expiration_month: '12',
        is_expired: false,
        is_expiring_soon: false,
        is_default: true,
        address: { },
      },
      {          
        id: 2,
        last_four: '2215',
        image_url: 'Mastercard',
        card_type: 'Mastercard',
        expiration_year: '2021',
        expiration_month: '05',
        is_expired: false,
        is_expiring_soon: true,
        is_default: false,
        address: { },
      },
      {          
        id: 4,
        last_four: '5366',
        image_url: 'Visa',
        card_type: 'Visa',
        expiration_year: '2020',
        expiration_month: '11',
        is_expired: true,
        is_expiring_soon: false,
        is_default: false,
        address: { },
      },
      
      ]
  }}
/>
</div>

<div className="mt-20" />

<div className="prose prose-xl">

<h2 name="how-saving-credit-cards-online-became-a-thing" id="how-saving-credit-cards-online-became-a-thing">
How saving credit cards online became a thing
</h2>

54.2% of users have their card stored at one or more ecommerce sites, according to Baymard Institute. 

→ How did people become comfortable leaving their credit cards (money!) on all kinds of websites?

Because of many years of marketing and tech improvements.  

Going back to the Dot-com bubble era of the late 90s, e-Loyalty was a hot topic.

**E-Loyalty** is a model that describes how to build an online relationship with customers to **increase satisfaction and repurchase intention**. 

Trust was very important because ecommerce business was in early stages.

Sites were crashing all the time, and customers didn't feel secure to leave their credit card information on the new web. 

Although forgotten, e-Loyalty is still relevant because it's based on universal marketing principles. 

<h3 name="how-saved-credit-cards-increase-loyalty-in-ecommerce" id="how-saved-credit-cards-increase-loyalty-in-ecommerce">
How saved credit cards increase loyalty in ecommerce
</h3>

Saved credit cards feature affects e-Loyalty because it touches on:

<div className="nested-list">

- **Convenience**
    - I don't have to type in my credit card number every time I purchase.
    - I want to mark one of my saved credit cards as "preferred card" so the website can pre-select it in checkout.
- **Security**
    - I want to see compliance certificates that will ensure me that their site is secure.
    - As a business, we want to make sure to comply with PCI standards so we can ensure customers that their data is secure.
- **Payment System Reliability**
    - I want my saved credit card to work on repeated purchases, without having to retype anything.

</div> 

## What will customers see (UX/UI)

There are two key pages to manage saved credit cards:

<span className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"  viewBox="0 0 20 20" fill="currentColor">
  <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
</svg>
    &nbsp;
    <b>Checkout</b>
</span>

<span className="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
    <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
    </svg>
    &nbsp;
    <b>Account</b>
</span>

<div className="flex items-center mt-10">
<svg xmlns="http://www.w3.org/2000/svg" className="w-7 h-7 mr-2"  viewBox="0 0 20 20" fill="currentColor">
  <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
</svg>
<h3 className="m-0-imp" name="pay-using-saved-payment-methods-on-the-checkout-page" id="pay-using-saved-payment-methods-on-the-checkout-page">
Pay using saved payment methods on the Checkout page
</h3>
</div>

Saved credit cards feature increases the convenience of the checkout process. 

The key goals were to: 

<div className="nested-list">

- Fit it in the existing checkout flow
    - So customer can maintain **familiar shopping process**
- Show icon, name and last four digits of the credit card
    - So customers can **easily identify the card** they want to use.
- Pre-select the Primary card
    - So customers can **checkout quicker** if they have many cards.
- Make it easy to still use manually-typed credit card
    - So customers can **opt-out the new feature** if they don't want to save their cards. 
- Show that card "Expires soon"
    - So customers know to **update the credit card**.
- Show expired cards on the bottom, grayed out
    - So customers know their card didn't magically disappear

</div>

### Keep the familiar checkout process

In the existing "3 Steps" checkout process, everything stayed the same, except we now replace the input fields with multi-card selection.  



<div className="hs md:-mx-20 lg:-mx-48 -my-2">
  <figure className="screenshot">
  <img className="rounded shadow" src="/img/saved-credit-cards/credit-card-checkout-page.png" layout="responsive" width={800} height={938} 
  alt="Checkout page with credit card input fields." />
  <figcaption>
    <b>Before</b><br/> 
    Regular checkout page
  </figcaption>
</figure>

<figure className="screenshot">      
  <img src="/img/saved-credit-cards/saved-credit-card-checkout-page.png" layout="responsive" width={800} height={938} 
  alt="Checkout page with credit card selection." />
  <figcaption>
    <b>After</b><br/> 
    Checkout page with saved credit cards
  </figcaption>
</figure>
</div>

### Show the primary card

Since customers can have many cards, we need to give them good visuals.  

With the crazy number of card providers, it gets very complicated. Luckily, our payment gateway service gives us the card logo, name and last four digits. 

Customers get to mark one of their cards as _primary_. So it always shows on the top and pre-selected.

<div className="mb-12">
    <figure className="screenshot md:-mx-8">      
        <img src="/img/saved-credit-cards/selected-credit-card.png" layout="responsive" width={1317} height={386} />
        <figcaption>
        The <b>primary card</b> is pre-selected in green.
        </figcaption>
    </figure> 
</div>

### Show that card will expire soon

Expired credit cards show up on the checkout screen, grayed out and not-selectable.

Even though customers can't use them to checkout, don't hide them. People forget, so showing them grayed out is a good reminder.

To try to avoid the _expired_ scenario, two months before the expiration date, we show the _expires soon_ indicator to remind customers.

<div className="mb-12">
    <figure className="screenshot md:-mx-8">      
        <img src="/img/saved-credit-cards/expired-credit-card.png" layout="responsive" width={1669} height={371} />
        <figcaption>
        <i>Expires soon</i> indicator and expired card grayed out.
        </figcaption>
    </figure> 
</div>


<div className="flex items-center mt-10">
<svg xmlns="http://www.w3.org/2000/svg" className="w-7 h-7 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
</svg>
<h3 className="m-0-imp" name="manage-credit-cards-on-the-checkout-page" id="manage-credit-cards-on-the-checkout-page">
Manage credit cards on the Account page
</h3>
</div>

Having a place to manage saved credit cards is important because credit cards change often.

23.6% of users get a new credit card at least once a year, and 57.5% at least every couple of years, according to Baymard Institute.

The Account page is the place to add, update and remove saved credit cards. 

<div className="-my-2">
  <figure className="screenshot">
  <video autoPlay loop controls playsInline muted src="/img/saved-credit-cards/add-saved-credit-card.mp4" />
  <figcaption>
    Adding a credit card on the account page.
  </figcaption>
</figure>
</div>

### Fake-swap the card for better UX

Technicalities around updating the credit card are difficult to make sense of in the UI. 

When banks reissue cards, for customers it seems like an update of their existing one. But technically, it's a completely new credit card.

Instead of making them delete the old one and add a new one, I decided o use the "fake edit" flow. 

If customers update their card with a new expiration date, CVV, or even the card number, we let it go through.  

We make it seem like their card is just updated, but in reality we delete their old card and add a new one. 

It makes it convenient; they don't have to know about technicalities. 


## Web Developer's view

Above all, I wanted to **bring the most value to the business**. 

From the coding perspective, working on saved credit cards feature was interesting because I worked on both frontend and backend code. 

I had to make sure to correctly wire the backend to the existing payment processor. But also make it convenient for the customers on the website.

The three biggest goals in my mind were to make it:

- secure,
- convenient to checkout with their saved credit cards,
- easy for people to manage (update and remove) their saved credit cards.

<h2 name="how-to-securely-store-credit-cards" id="how-to-securely-store-credit-cards">How to securely store credit cards as a business</h2>

We couldn't risk breaking our **PCI compliance**. 

Behind the scenes, this was the top priority.

### Don't store credit cards numbers yourself

We could not save credit card numbers, CVVs, and expiration dates in our database. Even if we could, I would stay away from storing sensitive payment information because of the responsibility it takes. 

*Someone else* had to store cards for us, and we'd just get them on demand. 

Since we were already using Braintree to accept credit card payments, using Braintree's Vault was the best approach. 

Braintree Vault is a secure data store for payment method information. 

They take care of storing sensitive data. We just make use of it through their API.

**The Braintree Vault is now a big dependency. But the tradeoff is worth it.**

<DangerAlert>
      <b>Be careful who you trust as your vendor</b><br/>
      If data breach happens to payment processing vendor, it's still <i>your</i> data.<br/>
      Always stay up-to-date with them to see how they're doing as a business.<br/>
      Better yet, design your system so it's easy to switch vendors. 
</DangerAlert>

### What to store yourself

Keep it minimal.

To reference the stored data in the Braintree Vault, we used two properties:

- Braintree Customer ID - Identifies the customer in the Vault
- Unique Number Identifier - Identifies the credit card number

`UniqueNumberIdentifier` is a randomly generated string that uniquely identifies a credit card number in the Vault. 

If a customer adds the same card twice, `UniqueNumberIdentifier` would be the same. So it's very useful to identify duplicates without storing the actual credit card number.

### Keep your site and Braintree Vault in sync

But what if someone manually removes cards from the Braintree Vault?

How to keep them in sync? 

This website had an interesting scenario: 

Sometimes, customer service would store credit cards in the Braintree Vault for customers that placed back-orders. Those orders usually get processed in a couple of months, but during that time, we don't want that stored credit card to show as a saved credit card on the site.

The process to solve that was:

1. Get Braintree Customer Id from customer's record in our database
2. Get all cards in the Braintree Vault that belong to that Braintree Customer Id
3. Get all `UniqueNumberIdentifier` for that customer in our database
4. Filter out cards that are not part of subsets from step 2) and 3)

That way **only credit cards that customers explicitly saved will show on the website**.

</div>

Saved payment methods in ecommerce


One day, our team started getting alerts that our client's website doesn't work. It was slow for customers.

We looked at the activity logs and saw that Bingbot was hammering the site:
<figure>
  <img src="/img/user-agent-breakdown-pie-chart.png" layout="responsive" width={800} height={575} alt="A pie chart showing distribution of traffic." />
  <figcaption>
    <b>Distribution of website traffic</b><br/> 
    Roughly 30% Users, 50% Bing, 15% to Google and 5% Other.
  </figcaption>
</figure>
Website crawlers usually have rate-limiting. Rate-limiting is a feature that makes them slow down if they start breaking the website.
But it didn't seem like the Bingbot could sense that it's breaking the site for regular people. 
Or maybe it didn't work that well.
The crawl didn't seem to slow down.

If it was my personal site, the solution would've been simple - just block the Bingbot user agent!

Who uses Bing anyway, _right_? <br/>
Well, people do – About 3%.

Our site was an eCommerce site that maximized SEO. Google was king, but there was still some $$ coming from Bing.

We had to find balance. 

## How to slow down the Bingbot

According to Microsoft, there are four settings that webmasters can use to control Bingbot's crawl speed:

| Crawl-delay setting      | Speed |
| ----------- | ----------- |
| Not set      | Normal 👀       |
| 1   | Slow        |
| 5   | Very slow        |
| 10   | Extremely slow        |

We decided to slow down Bingbot's crawling, but still keep it present.

So we simply added this two-liner to the `robots.txt` file:

```
User-agent: bingbot
Crawl-delay: 10
```

`Crawl-delay: 10` directive tells Bingbot to crawl the site "Extremely slowly." 

Couple of days later, Bingbot listened:

<figure>
  <img src="/img/user-agent-breakdown-after-crawl-delay-pie-chart.png" layout="responsive" width={800} height={575} alt="A pie chart showing distribution of traffic." />
  <figcaption>
    <b>Distribution of website traffic after adding craw-delay for Bingbot.</b><br/> 
    Roughly 35% Users, 2% Bing, 60% to Google and 2% Other.
  </figcaption>
</figure>

## Google is crawling more

Great, Bingbot is down! But isn't the googlebot hammering the site now?

Googlebot is unique amongst crawlers because **Google pays attention to load that it's putting on your server**: 
- If the site responds quickly, the crawl limit goes up​
- If the site slows down or responds with a lot of HTTP 500 errors, the limit goes down, and Googlebot crawls less​

Even though it was hitting the site more now, we didn't have trouble with the HTTP 500 errors that Bingbot was causing.


## Control Google's Crawl Budget for your advantage

Slowing down Bingbot tremendously increased our crawl budget with Google.

**Crawl budget** is the number of pages Google will crawl on your site on any given day.​

More crawling won't necessarily make you rank better on SERP, but it will give you better visibility by making sure crawlers get to your content quicker.  

Increased visibility was an advantage for us because we knew we had great content that will rank well.

## How to Block Bingbot

If you want to completely block Bingbot from crawling your site, add following lines to your `robots.txt` file:

```
User-agent: bingbot
Disallow: /
``` 

Josip Miskovic

Latest Blog Posts

10 Techniques for Estimating Software Projects

Scrum for Software Developers: Why It's Worth Understanding

String Enums in C#: Everything You Need to Know

How to Update npm Packages In 4 Easy Steps

How To Improve Cumulative Layout Shift Score

Saved payment methods in ecommerce

How to save your website when Google and Bing are fighting for traffic