
Null references are the bane of every developer's existence. They can occur anywhere, anytime and cause many hard to find bugs that cost time and money to fix.

While there may be some debate whether null references should exist, they do and it's important to understand how to deal with them lest you run into problems when running your code.

The .NET framework has a solution for this problem in the form of nullable value types. 

**C# Nullable value types is a type representation that allows a variable to contain either a value or null.**

A nullable type is created by adding ? after the type name. For example, `int?` means that value can either be an integer or null. 

In this article, we'll discuss the basics of nullable value types and how to use them.

<div className="mb-4">
  <figure>
    <img
      className="rounded-2xl"
      src="/img/c-sharp-nullable/c-sharp-nullable.png"
      layout="responsive"
      width={1000}
      height={616}
      alt="An example code of C# Nullable type usage."
    />
    <figcaption>
        C# Nullables are useful for showing absence of value. 
    </figcaption>
  </figure>
</div>

<TOC />

## Nullable value type vs reference type
It's important to know the difference between a nullable value type and nullable reference type:
- Reference types support the null value. 
- Value-type variables don't support the null value without using the nullable value type.

The nullable value types are available beginning with C# 2. But C# 8.0 introduces the nullable reference types feature.

The difference between nullable value type and nullable reference type is that a nullable reference type can refer to an instance of any reference type, while a nullable value type can only hold a value of the underlying type.

### Nullable value type 
For example, if we try to set a nullable integer to null, we'll see the following error:

int someInt = null;

	Cannot convert null to 'int' because it is a non-nullable value type.

If we try to do the same using a nullable value type, we'll see that it's possible:

int? someInt = null;

### Nullable reference type
For reference types, null is a valid value. For example, we can set a string to null:

string someString = null;

But with nullable reference types feature, the C# compiler will warn us of possible null references.

Nullable reference types won't make your code bulletproof. There is no difference in runtime between a non-nullable reference type and a nullable reference type. The compiler doesn't add any runtime checking for non-nullable reference types. The benefits are in the compile-time analysis. 

Nullable reference types are not distinct new class types but annotations on existing reference types. The compiler uses them to show warnings on null reference mistakes in your code. 

## Why use nullable types?
In C#, nullable value types are great for explicitly representing variables that may or may not have a value. Nullable types make that intent clear and remove any ambiguity. This allows for better code readability and developer productivity. 

For example, the default value for `int` is 0. But 0 could actually present a valid value. This can lead to many bugs that are difficult to track down. 

With nullable types, you can set the variable to null if it doesn't have a value. This makes it clear that the variable doesn't have a value and can help avoid errors.

For example:

```csharp
int? page = null;

Console.WriteLine(page .HasValue); // False
```

## Difference between `Nullable<T>` and ? annotation
`Nullable<T>` and `?` are the same. The `?` annotation is a shortcut for `Nullable<T>`. 

The `Nullable<T>` type is just a <a href="https://referencesource.microsoft.com/mscorlib/system/nullable.cs.html" target="_blank" rel="noref noopener">wrapper</a> around the actual value that will contain null values unless otherwise specified. It is not a new type and it will behave the same as the underlying type.

## System.Nullable class
To use nullable types in C#, you can reference the System.Nullable class, which contains the following:

- Value property - Gets or sets the value of this nullable type.

- HasValue property - Shows whether the current instance has a non-null value. 

- GetValueOrDefault() method - Gets the value of this nullable type if it has a value; otherwise returns the default value for this type.

The core of the nullable wrapper is very simple: 

```csharp
...
public struct Nullable<T> where T : struct
    {
        private bool hasValue; 
        internal T value;
 
        [System.Runtime.Versioning.NonVersionable]
        public Nullable(T value) {
            this.value = value;
            this.hasValue = true;
        }        
 
        public bool HasValue {
            [System.Runtime.Versioning.NonVersionable]
            get {
                return hasValue;
                }
            } 
 
        public T Value {
            get {
                if (!hasValue) {
                    ThrowHelper.ThrowInvalidOperationException(ExceptionResource.InvalidOperation_NoValue);
                }
                return value;
            }
        }
...
```

This code is very straightforward: 

- “value” variable stores the actual value of the instance and is set by the constructor, using parentheses and specifying the type directly.

- Getters for “HasValue” property just return a boolean indicating whether there is a value to return. They don't actually do anything else with it.

We can also see that underlying type must be a struct. If you try to use `Nullable<T>` with a value type that is not a struct, you will get a compile-time error.

## Nullable.GetUnderlyingType(Type) Method
The Nullable.GetUnderlyingType(Type) method returns the underlying type of a nullable type. 

This method can be used to determine if a nullable type is an instance of a specific type. It can also be used to cast a nullable type to its underlying type.

This method is useful when you need to do the following: 

- Determines whether a type can be cast to a specific type.

- Cast the nullable type to its underlying type. 


<div className="mb-4">
  <figure className="screenshot">
    <img
      className="rounded-2xl"
      src="/img/c-sharp-nullable/c-sharp-nullable-get-underlying-type.png"
      layout="responsive"
      width={980}
      height={388}
      alt="The source code for C# Nullable.GetUnderlyingType method."
    />
    <figcaption>
        Source code for Nullable.GetUnderlyingType(Type) method.
    </figcaption>
  </figure>
</div>



## C# Nullable Unwrapping
C# Nullable unwrapping is a process of accessing the underlying value.

We can use the `Nullable<T>.GetValueOrDefault()` method to unwrap a nullable type and return the underlying value. If the nullable type has a value, the method will return the value. If the nullable type is null, the method will return the default value for the type.

### Null-coalescing operator ?? 
The null-coalescing operator ?? is a binary operator that returns the first operand if it is not null; otherwise, it returns the second operand. 

The null-coalescing operator is useful when working with the Nullable type. If you want to assign a non-nullable value type variable a value of a nullable value type, you'll need to provide the replacement for null instead. For example: 


```csharp
int DEFAULT = 5;

int? num = null; 

int result = num ?? DEFAULT ; 

Console.WriteLine(result) // 5.   
```

Alternatively, we can use GetValueOrDefault() method to pass the default value: 

```csharp
int DEFAULT = 5;

int? num = null; 

int result = num.GetValueOrDefault(DEFAULT); 

Console.WriteLine(result) // 5.   
```

Both examples will print "5".

## How to identify a nullable value type
Identifying a nullable value type at runtime is not intuitive.

To determine whether an instance is of a nullable value type use `Nullable.GetUnderlyingType(Type nullableType)` method.

If the type provided is not a Nullable Type, Nullable.GetUnderlyingType returns null. Otherwise, returns the underlying type of the Nullable type.

Use the extension method
To make it easy to check for nullable value types, use the following extension method:

```csharp
public static bool IsOfNullableType<T>(this T _)
{

		Type type = typeof(T);

  		return Nullable.GetUnderlyingType(type) != null;

}

int? num = null; 

Console.WriteLine(num.IsOfNullableType()); // True 
```


### Don't use Object.GetType
Don't rely on the Object.GetType method to determine whether a particular object is of a nullable value type. Calling the Object.GetType method on an instance of a nullable value type boxes it to Object. When boxing a value of a non-null instance of a nullable value type, the underlying type is represented by the Type returned by GetType:

### Don't use `is` operator
The `is` operator cannot be used to identify a nullable value type. The `is` operator returns true if the instance is of the specified type and false if the instance is not of the specified type. However, with nullable value types, an instance can be of the specified type or nullable.

## Example nullable types use-case
### Default value
Nullable provide more explicit way of indicating that a variable is allowed to be null. 

Having a nullable type shows an intent to pass on data that might or might not exist. It makes intent more explicit, rather than leaving it up to a consumer of the value to discern whether some field is legal to be null.

For example, in C#, <a href="/posts/string-enums-in-c-sharp-everything-you-need-to-know">enums</a> cannot be null because enums are non-nullable value type. Enums default to 0, which can cause unexpected behavior when you try to use an enum whose value has not been initialized.

For example, in the code below, the grade will default to `A`. This might lead to unexpected behavior if the developer of this code doesn't realize that an uninitialized grade was used:

```csharp
public enum Grade
{
		A,
		B,
		C,
		D,
		F,
}

public static void Main()
{

		Grade grade = default;

		Console.WriteLine(grade); // A

}
```

That's why using a nullable value type will make the intent more explicit:

```csharp
Grade? grade = default;

Console.WriteLine(grade == null); // True
```


### Database columns
Nullable types are useful when working with databases. For example, in SQL Server, there is a concept of nullable columns. A nullable column can contain a value or it can be NULL. Nullable value types in C# can represent the NULL value similarly.

### Optional argument
In ASP.NET controllers, nullable value types are useful for optional parameter values. For example, an API endpoint takes an optional page number parameter. If the page number is not supplied, the default value (should be used. In C#, this can be implemented using a nullable type:

```csharp
public IActionResult Get([FromQuery] string search, [FromQuery] int? page)
{
    _searchService.FetchResults(search, page ?? 1);
}

```

## Start using nullable in C#
C# nullable value types provide a way to work with data values that may be null. 

Understanding the difference between nullable value type and nullable reference type will make you a better C# developer.

They are useful when you need to check for a value, or when you need to provide a default value. They make intent more explicit, and can be used when working with databases or optional arguments. You can identify a nullable value type using the Nullable.GetUnderlyingType extension method. Also, don't use Object.GetType and `is`operator to identify a nullable value type.

Nullable types in C# are important when you need to handle exceptional cases, such as when a value doesn't exist. Here, you can use the null-coalescing operator `??` to get the value or provide a default value.

Start using nullable types in your own code to make your intentions more explicit and to avoid potential bugs.

 

C# Nullable value types: Everything you need to know


**C# tuple is a lightweight data structure that provides concise syntax to group multiple data elements.**

C# Tuples are a great way to pass multiple values around, but they can be hard to understand and use. How are values in a tuple related? How do you unbox a tuple into variables that have meaningful names?

If you are a web developer, this guide will help you use tuples in your own code right away! 

We'll show you what c# tuples are, how they're implemented under the hood, and all of their various uses throughout every part of .NET development.

<div className="mb-4">
  <figure>
    <img
      className="rounded-2xl"
      src="/img/c-sharp-tuple/c-sharp-tuple.png"
      layout="responsive"
      width={1000}
      height={613}
      alt="C# tuple example code."
    />
  </figure>
</div>

## C# Tuples vs System.Tuple

Before we start, there's an important distinction to make: 

**The C# tuple type is not the same as the System.Tuple type.**

C# tuples are backed by `System.ValueTuple` types, while `System.Tuple` type uses a class.

 The `System.ValueTuple types` differ from the `System.Tuple` types in that:

- <a href="https://github.com/dotnet/roslyn/blob/main/src/Compilers/Test/Resources/Core/NetFX/ValueTuple/ValueTuple.cs" target="_blank" rel="noopener noreferrer">System.ValueTuple</a> are structs, System.Tuple are classes,
- System.ValueTuple are mutable, System.Tuple are readonly
- System.ValueTuple members are fields, members of System.Tuple  are properties.

Microsoft introduced C# tuples in C# 7. So if you are using C# 7 or later, use C# tuples based on `System.ValueTuple`. But if you are using an older version, then you will have to use `System.Tuple`.

In this guide, we cover both: 
- C# Tuple
- System.Tuple


## C# Tuple
A C# tuple is a comma-separated list of elements enclosed in parentheses. Tuples can contain 0 or more elements, including nested tuples.  

A tuple has the following syntax: 

	(type1, type2,...)

For example, to represent a person's name and age we can use a tuple as follows:

	(string firstName, int age)

C# tuple can hold any number of elements.  But, the number of elements in a tuple must be fixed at compile time. 

### How to declare a tuple in C#?
The easiest way to create a tuple is to use parentheses syntax. 

You can also create a tuple by specifying the type name, followed by the element types in parentheses. For example:

```csharp
var latLong = (25.2, 12.2);

Console.WriteLine(latLong); // (25.2, 12.2)
```

### How many elements can tuple hold?
C# tuple can contain any number of elements, from zero to an infinite number of elements. The name "tuple" might make you think the tuples contain two elements, but that's not the case. 

Moreover, tuples can also contain other tuples as elements. 

<div className="mb-4">
  <figure className="screenshot">
    <img
      className="rounded-2xl"
      src="/img/c-sharp-tuple/c-sharp-very-long-tuple.jpg"
      layout="responsive"
      width={1000}
      height={186}
      alt="The source code for C# tuple showing 18 elements."
    />
    <figcaption>
        A tuple can contain many items. But do you need it?
    </figcaption>
  </figure>
</div>

### How to change C# tuple value? 
In C#, tuples are mutable. They are implemented as ValueTuple which is a struct. 

Tuples in C# can be updated in place by specifying new values for elements in the tuple. The following example shows how to update an existing tuple with new values: 

```csharp
var latLong = (25.2, 12.2);

latLong.Item1 = 42.8;

Console.WriteLine(latLong); // (42.8, 12.2)
```

### Named Tuple
The default tuple member names is "Item1", "Item2", "Item3", etc. Default naming makes it difficult to keep track of the order of the tuple members. 

C# 7 introduces a new type of tuple, called a "named tuple". Named tuples have named members, which makes them easier to read and write.

The following example shows how to create a named tuple:

```csharp
(string ItemName, double Price) itemPrice = ("Socks", 12.99);

Console.WriteLine(itemPrice); // (Socks, 12.99)

Console.WriteLine(itemPrice.ItemName); // Socks

Console.WriteLine(itemPrice.Price); // 12.99
```

### Tuple deconstruction
Tuple deconstruction is a feature for extracting the values from a tuple into individual variables. 

The C# programming language has a special syntax for deconstructing tuples, which allows you to deconstruct all of the values in a tuple in one step. To deconstruct a tuple, use the same syntax as you would use to create a tuple. 

In the example below, `GetName` returns a string extracted from the `(string, double)` tuple.

```csharp
public static string GetName((string, double) itemPrice)
{
  (string name, _) = itemPrice; 

  return name;
}

var itemPrice = ("Socks", 12.99);

Console.WriteLine(GetName(itemPrice)); // Socks
```

The underscore `_` must be present because it indicates that we are ignoring the second parameter (price). 

## System.Tuple
System.Tuple is tuple implementation that uses classes. Prior C# 7, it was the only option. That's why it's still widely used.

### System.Tuple type argument
Tuple classes require type arguments which you must provide when creating tuples using `new` constructor. The type arguments determine the number and type of the tuple members. The type needs to match the tuple elements.

For example, the following code declares a tuple with two members of `double` type:

```csharp
Tuple<double, double> coordinates = new Tuple<double, double>(25.2, 12.2);
```

If you try to create a tuple without specifying the type of arguments, you'll get a compile error. For example:

```csharp
Tuple<double, double> coordinates = new Tuple(25.2, 12.2);

Compilation error: Cannot create an instance of the static class 'System.Tuple'
```

### Tuple.Create() vs new Tuple
C# has two methods for creating tuples: Tuple.Create() and new Tuple(). They both do the same thing, but Tuple.Create() is more concise and is preferred in most cases because it is easier to read and write.

```csharp
var coordinates = Tuple.Create(25.2, 12.2); // preferred way

var coordinates = new Tuple<double, double>(25.2, 12.2); // less tidy variation
```

The fundamental difference between Tuple.Create and new Tuple is that you can use Tuple.Create without having to specify the type arguments. If you try to use new Tuple without specifying the type of arguments, you'll get a compile error.

Under the hood, both Tuple.Create() and new Tuple() do the same thing. Tuple.Create() calls the new Tuple() constructor with default values. The following example shows how both of these methods are translated to the same code:

```csharp
public static class Tuple
{
    public static Tuple<T1> Create<T1>(T1 item1) {
        return new Tuple<T1>(item1);
    }
}
```

### How to access System.Tuple values?
To access the values in a tuple, you use the Item1, Item2, etc. notation. This is a shorthand for the members of the tuple.

Unlike C# tuples, System.Tuple's elements are not named, so you have to use ordinal index to access the value of tuple element.

```csharp
var coordinates = Tuple.Create(25.2, 12.2);

double latitude = coordinates.Item1; // 25.2

double longitude = coordinates.Item2 // 12.2
```

### How to change System.Tuple member values?
System.Tuple is immutable. They cannot be changed after they have been created.

```csharp
var itemPrice = Tuple.Create("socks", 12.99);

itemPrice.Item2 = 8.99; 

// Compilation error: Property or indexer 'Tuple<string, double>.Item2' cannot be assigned to -- it is read only
```

To change a tuple value, you have to replace the tuple you want to modify by a new tuple containing the updated value: 

```csharp
var itemPrice = Tuple.Create("socks", 12.99);

Tuple.Create(itemPrice.Item1, 8.99);
```

### System.Tuple limitations
System.Tuple is limited to a maximum of 8 items. That's because it uses a class and the .NET Framework team had to provide a <a href="https://docs.microsoft.com/en-us/archive/msdn-magazine/2009/brownfield/building-tuple" target="_blank" rel="noref noopener">finite number of classes</a> to represent it.  

If we want to make a Tuple with more elements, we must first build nested Tuples. 

The last element of an eight element tuple must be a Tuple.

```csharp
var numbers = new Tuple<int, int, int, int, int, int, int, int>(1, 2, 3, 4, 5, 6, 7, 8);

/* Unhandled exception. System.ArgumentException: The last element of an eight element tuple must be a Tuple.

  at System.Tuple`8..ctor(T1 item1, T2 item2, T3 item3, T4 item4, T5 item5, T6 item6, T7 item7, TRest rest)

  at Program.Main()

*/
```

The following code declares a tuple with eight members, where the last one is another tuple which satisfies the `TRest` type constraint: 
```csharp
var numbers = new Tuple<int, int, int, int, int, int, int, Tuple<int, int, int>>(1, 2, 3, 4, 5, 6, 7, Tuple.Create(8, 9, 10));

Console.WriteLine(numbers); // (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

Console.WriteLine(numbers.Rest); // (8, 9, 10)
```

The nested tuple with 8 elements exposes the public `Rest` property, which makes it easier to access the last tuple's members. To do so, `Rest` uses internal ITupleInternal interface that allows to call tuple methods recursively without knowing the underlying types.

<div className="mb-4">
  <figure className="screenshot">
    <img
      className="rounded-2xl"
      src="/img/c-sharp-tuple/c-sharp-tuple-rest.jpg"
      layout="responsive"
      width={1000}
      height={590}
      alt="The source code for System.Tuple class."
    />
    <figcaption>
        The 8th member of System.Tuple must implement `ITupleInternal` interface.
    </figcaption>
  </figure>
</div>

## Tuple use cases
Tuples are great for moving data around without creating a custom class.

The most common use cases for tuples are: 

- Return multiple values from a function without using the `out` parameter.
- Grouping related values together.
- LIQN Projection - a LINQ technique for extracting a subset of elements from a sequence.

## Code readability
Tuples are a very concise way of representing data, and they can be very helpful when you want to return multiple values from a method. However, they can also make your code more difficult to read. If you're not careful, it's easy to create tuples that are difficult to understand. 

If the number of elements is over 3, it's better to use a class instead of a tuple. A class is more readable and it can be easier to add new members to a class than to a tuple.

Even though C# limits tuples to 7 elements, it's a good programming practice to create classes which group several values together if the number of elements is over 3. So you might never even hit the limit for tuples. But if you do, rethink your code. It's better to use a class.

## ToString()
Tuples have a built-in ToString() method that returns a string representation of the tuple. The string contains the value of each member, separated by commas.

```csharp
var coordinates = Tuple.Create(25.2, 12.2);

string description = coordinates.ToString(); // (25.2, 12.2)
```

Values get wrapped in parentheses.

With nested tuples,   the string representation is indented to show the nesting.

## Tuple Vs Dictionary
In C#, tuples are often used instead of Dictionary because they are more concise. 

A Dictionary<TKey, TValue> is a data structure that allows you to store key-value pairs. The key can be any type, and the value can be any type. 

Dictionaries can only store one value per key, while tuples can have multiple values with the same key. That's why tuples are often used to instead of dictionaries.

## Tuple Vs Enum
Tuples are often used in place of enums because <a href="/posts/string-enums-in-c-sharp-everything-you-need-to-know">C# doesn't support string enums</a>.  

For example, the following enum represents country names:

```csharp
public enum Countries
{

  UnitedStates = "US",

  Canada = "CA"

}
```

But this code won't compile in C# because enums can only have numeric values.

A better solution is to use tuples:


```csharp
List<(string CountryName, string CountryCode)> countries = new List<(string CountryName, string CountryCode)>() { ("UnitedStates", "US"), ("Canada", "CA") };

Console.WriteLine(countries[0].CountryCode); // US
```

## Conclusion
In this article, we have explored how to use tuples in .NET development ecosystem. Tuples are a great way to return multiple values from a method, but they can also make your code harder to read. If you're not careful, it's easy to create tuples that are difficult to understand. 

### Different tuple implementations
It's important to understand the difference between the new C# 7 Tuples and `System.Tuple` class.  

The `System.Tuple` class is a legacy implementation that is limited to a maximum of 8 items. 

The new C# Tuple uses `System.ValueTuple` under the hood. 

This implementation is more versatile and has no limit on the number of elements. 

Other differences between System.ValueTuple and System.Tuple include: 

- System.ValueTuple is a struct. 
- System.Tuple is a class. 
- System.ValueTuple are mutable
- System.Tuple are read-only. 
- Members of members of System ValuePair are fields, members of members of System Tuple are properties

### When to use tuples
Tuples are a great way to group several pieces of information together, but they also make it hard to maintain your code. If you have a lot of items to store, use classes instead of tuples because they are easier to read and maintain.

If the number of items is less than 3, tuples are a good way to go. 



C# Tuple: Complete Guide

When migrating to Next.js 9+,  I was running into an issue where I could not import global styles from any file other than the Next JS `_app.js`. I would get the following error:

<DangerAlert icon="">
  <b>Error</b><br/>


  Global CSS cannot be imported from files other than your Custom <App\>. Please move all global CSS imports to pages/_app.js.


</DangerAlert>


Using Global CSS was not working because since Next.js 9.2 we must import global CSS from Custom `<App>` component.


## Why the error happens
There are a few things that cause this error to happen in <a href="/next-js">Next.js framework</a>: 

- Importing Global CSS from a file other than pages/_app.js,
- Using custom css/sass loaders instead of Next.js' built-in one,
- Next.config.js misconfiguration


The styles (styles.css) defined in these files will apply to all pages and components in your application. Because stylesheets are global, you may only include them in pages/app.js to avoid overlap between components.

The built-in CSS support bundles global styles into a minified file that will automatically be included on pages.

Separating global and component-level styles allows you to share a common external CSS file between components, while moving the shared styles into a single, reusable file that is not included on each component page.

Modular CSS imports allow for advanced optimizations with style splitting and caching that help with page speed.


## How to fix the Global CSS error
There are several ways to fix this CSS error in Next.js. 

### Import global CSS from _app.js
To add a stylesheet to your Next.js app, include the CSS file in `pages/_app.js`.

```js
import '../styles.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
```

The styles (styles.css) in your application will apply to all webpages and components. So it's important to only include them in pages/_app.js to avoid conflict with other components.

Note: If you are using typescript, include the CSS file in `./pages/_app.tsx`.

### Use built-in CSS loader
Since, version 9.2, Next.js allows you to import Sass files with both the .scss and .sass file extensions.

If you were using custom loaders such as `@zeit/next-css` and `@zeit/next-sass`,  you'll need to remove them.

Remove the custom loader from your next.config.js file which takes care of importing stylesheet: 

Before:

```js
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})
```

After:

```js
// next.config.js
module.exports = {/* my next config */}
```

Before you can use Next.js' built-in Sass support, install npm package `sass`:

npm install sass
Under the hood, Next.js will use `sass` to compile your stylesheets into css files which will be included in the app bundle. 

### Fix Next misconfiguration
Global CSS error can happen because of improper configuration of next.config.js file.

If you are using `next.config.js`, make sure it is configured with the proper module exports.

Make sure there are no: 

Syntax errors
Multiple module.exports
Custom babel processors that impact style files. Check `babel.config.js` or `.babelrc.json` 
Use custom CSS loader
 You can use custom CSS loader as well. To do that, make sure to overwrite default style loader with your own in next.config.js file:

```js
module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Filter out default Next.js CSS rules:
    config.module.rules = config.module.rules.filter(r => !r.oneOf);

    // Add your own rules

    config.module.rules.push({
      test: /\.scss$/i,
      use: ['style-loader', 'css-loader'],
    })
    return config
  },
}
```



Next.js: Global CSS cannot be imported from files other than your Custom <App>


Are you looking for a new framework to build your next web app?

There are many frameworks out there nowadays, but Next.js stands out. 

It promises fast rendering, an easy way to implement Universal JavaScript, even easier routing and a lot more all in one package.

But is Next.js the right choice for you?

This article will give you the power to understand whether Next.js fits your needs or not. 

<div className="md:hidden">
    <TOC />
</div>

## What is Next.js? 
Next.js is a framework for creating universal React applications. 

Universal here means that it will render your React app on both client and server sides, thus enabling you to create fast, interactive apps even with slow backend servers.

The configuration is very minimal, and the development experience is extremely smooth. It comes with some cool features like automatic code splitting, pre-fetching for faster UX, SEO optimizations, PWA (progressive web app) support out of the box and much more.

## Advantages of Using Next.js
Next.js provides an out-of the box solution for server side rendering (SSR) of React components to help you avoid issues related with caching, load and so on but it wasn’t entirely impossible before Next.js came around! With just using React, it required a lot more tweaking than we would like sometimes, when all these other things took away time from what we should spend building business logic into our applications instead.

### Routing
Next.js comes with a <a href="/next-js/routes-navigate-between-pages">router system</a> that is very similar to what the React Router provides, while also making it easy for you to add custom routes.

### Flexible page generation
Next.js can also help you with incremental static regeneration (ISR) and static site generation (SSG). These two techniques are SEO friendly ways to build websites that take less time than regular, dynamic applications because they only load the HTML needed at runtime without rebuilding it each time users provide new input on their website or app screens; this speeds up page loads drastically.

### Speed
If performance of your app is more important than anything else, Next.js is for you. It is speed-centric. 

It offers pre-fetching of content when users are navigating between pages or even if they are just hovering over links to get to them faster.

The speed of Next.js is especially important now when Google Web Vitals are giving slower websites bad reviews and limiting their exposure to search engines.

### Image optimization
Next.js ships with a powerful image processing tool called `next/image` that includes a variety of built-in performance optimizations to help you achieve good Core Web Vitals. 

The optimizations include features that prevent Cumulative Layout Shift. 

The combination of these optimizations result in much better user experience, increased loading speeds and better search ranking. 

### Development experience
Although Next.js is a framework to create production ready applications, its dev experience is what developers love the most. 

It offers features like automatic code splitting and hot-reloading so you don't need to re-build your application as you make changes. 

The Vercel team makes sure that the documentation is very well written. Next's GitHub features hundreds of examples to help you with configuration and use cases.

The built-in Typescript support is a lifesaver too. Many other frameworks require a separate Typescript plugin to provide you with type safety. This is great since nowadays it is the de facto standard for JavaScript, especially in enterprise applications.

<div className="mb-4">
  <figure className="screenshot">
    <img
      src="/img/next-js/next-js-weekly-downloads.jpg"
      layout="responsive"
      width={668}
      height={435}
      alt="Graph showing downloads for Next.js npm package. More than 1.9 million weekly downloads."
    />
    <figcaption>
      Next.js npm package gets more than 1.9 million downloads per week.
    </figcaption>
  </figure>
</div>

### API Routes
You can also use Next.js to create API routes easily, even if they require authentication. 

This is very useful for developers who are building an application that needs to fetch data from another location and display it in their React app. 

### Deployment
You can deploy Next.js app in seconds using Vercel. It allows you to deploy the app without having to configure a server. Features such as Automatic SSL, Edge Functions, Git Integration and Analytics make it one of the best serverless providers available for JavaScript.

If you don't want to use Vercel, Next.js is also compatible with many other deployment platforms, like Heroku and Amazon Web Services(AWS). 

### Fast prototyping
Next.js is great for prototyping. It has very minimal dependencies, so you can easily try it out. The codebase is clean and there are not too many configuration files. Also, if you are not sure about how to structure your React applications, Next.js comes with a default folder structure you can use with no configuration necessary.

### CMS Connection
If you already have an existing CMS, you can easily integrate Next.js with it using Rest API or GraphQL. 

For example, if you are building a React app with Next.js and want to display data from your existing WordPress site, you can do that by just adding a few lines of code to pull data from the WordPress API. 

## Why not just use React?
In most cases, you don't need to use Next.js unless your application is dynamic and needs SSR for SEO optimizations or similar reasons. 

The performance benefits of using Next.js are impressive but it might not always be the right choice depending on your project requirements. 

## What Next.js Does NOT Do?

While we love the stuff that Next.js does, it only solves a subset of problems associated with creating SPA’s in React.

For example, if you need a ton of features from your router, you might want to take React Router into consideration instead. Also, if you have a large app and are looking for routing solutions that scale well with size, Next.js may not be the best solution.

There is a very low entry barrier to get started with Next.js for prototyping

## Who uses Next.js?
Given that Next.js is a pretty new framework, it still has a long way to go in terms of adoption by enterprises. However, a number of startups and individual developers have adopted it as their go-to framework for creating React based apps. Here are some of the companies that use Next.js:

- TikTok
- Twitch
- Netflix
- Adidas
These examples show that Next.js can be used to create production-ready applications and internal company web apps. Next.js is not going away soon. In fact, it’s being actively developed by Vercel, which is a pretty big name in the JS community.


<div className="mb-4">
  <figure className="screenshot">
    <img
      src="/img/next-js/tik-tok-web-next-js.jpg"
      layout="responsive"
      width={800}
      height={590}
      alt="Screenshot of TikTok homepage using Next.js"
    />
    <figcaption>
      TikTok is using Next.js.
    </figcaption>
  </figure>
</div>

## Future of Next.js
Next.js is still a relatively new framework compared to some of the more battle tested frameworks out there, but it has been getting a lot of attention from the community already and with significant reason! In fact, it was one of the top trending repositories on GitHub in 2018, showing that it’s definitely going places.

## Conclusion 
Next.js might be the perfect choice for you more of less work with React. It's relatively easy to learn especially if you already have experience with other frameworks like React Router or Webpack.

Also, it gives us the ability to quickly prototype new features on our apps without having to worry about extensive build steps that are required in some other common solutions. 

Moreover

Next.js is a great framework for creating React applications. It has a very minimalistic codebase and comes with many features out of the box, allowing you to focus on building your application rather than dealing with configurations. 

Also, its documentation is great and if anything goes wrong or you have some questions, there is a very helpful community willing to answer them.





## FAQ

<div className="-mx-4 md:-mx-6">
  <div className="divide-y divide-gray-200">
    <AccordionItem title="Is Next.js open source?">
        Yes, Next.js is open source. It's on GitHub!
    </AccordionItem>
    <AccordionItem title="Are there any downsides to using Next.js?">
       No framework is perfect. So yes, there are a few things to keep in mind when you are deciding whether or not to use it for your app. First, the size of the framework is relatively big, so if you are only using a small part of it then it will take up more space on your server. Second, if your app does not need any routing capabilities then you might want to consider another framework which is specifically built for that. Third, because there are not that many apps built with Next.js, you might find it harder to find experienced people to work on your app.
    </AccordionItem>
    <AccordionItem title="Do I need Next.js?">
        If you have a simple SPA and have no problems building routing features yourself then Next.js is probably not for you! However, if your app needs advanced routing capabilities or requires SSR (Server Side Rendering) then it’s definitely a framework that can move your app to another level!
    </AccordionItem>
    <AccordionItem title="Why is Next.js SEO-friendly?">
        Next.js is SEO-friendly because it uses server rendering which means that your app will be rendered on the server and then sent to the browser, making indexing much easier for search engines. Also, Next.js comes with model Meta tags so you don’t have to worry about them!
    </AccordionItem>   
    <AccordionItem title="How to install Next.js?">
        Next.js is pretty easy to setup! First, you will need NodeJS in order to install the required dependencies. Then, you can simply clone or download it from their GitHub repository and run npm install . 
    </AccordionItem>
    <AccordionItem title="How to update Next.js?">
        To update Next.js you can simply run `npm update next@latest` to upgrade the npm package.
    </AccordionItem>
  </div>
</div>

What is Next.js? Should you use it?


<a href="/next-js">Next.js</a> is an extremely popular framework for React development that allows developers to create single-page apps with ease. One of the outstanding features of Next.js is its use of routes. Routes let you handle links in a clean and concise manner so your app's logic doesn't get muddled up by all the different pages on your site. In Next.js, you can easily configure routing so you don't have to code it yourself! 

This article will teach you everything you need to know about Next.js routes and will provide you with a broad understanding of this helpful framework!


## File-system based routing
Next.js uses a file system to provide routing and URL structure for the app. 

Every file with the extensions .js, .jsx, .ts, or .tsx inside the `/pages` is considered a routable page. Files inside the `/pages` folder are React component with a route based on the file name.

<div className="mb-4">
  <figure className="screenshot">
    <img
      className="rounded-2xl"
      src="/img/next-js/next-js-route-folder.png"
      layout="responsive"
      width={649}
      height={288}
      alt="Example folder structure for routing in Next.js"
    />
    <figcaption>
        Example `/pages` folder structure for routing in Next.js.
    </figcaption>
  </figure>
</div>

**File names are crucial for routing**: 

<div className="px-4 py-2 bg-gray-100 rounded mx-0 md:-mx-10">
<table className="table-fixed">
  <thead>
    <tr>
      <th className="w-1/4 ">File path</th>
      <th className="w-1/4 ">Matching routes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>/page/index.js</td>
      <td>/</td>
    </tr>
    <tr className="bg-indigo-50 px-2">
      <td>/page/[page-id].js</td>
      <td>/page/1 or /page/2, but not /page/1/2</td>
    </tr>
    <tr>
      <td>/page/[...slug].js </td>
      <td> /page/1/2, but not /page/</td>
    </tr>
    <tr className="bg-indigo-50 px-2">
      <td>/page/[[...slug]].js</td>
      <td> /page/1/2 and /page/</td>
    </tr>
  </tbody>
</table>
</div>


## Static index routes 
Next.js router automatically loads `index` file at the root of the directory.

For example, if the index file is located at `vegetables/index.js`. Opening the `http://localhost/vegetables` URL will load the page component found in `vegetables/index.js`.

## Nested routes
Next.js supports nested routes inside the pages folder to create nested URL structures. For example, if the index file is at `vegetables/index.js` and we want to create a nested path called `celery`, we would create:

/// img

By nesting the route this way, Next.js will load the page component found in `vegetables/celery/index.js`.

To create a nested route inside the `vegetables/celery` subfolder, we would add a file with the route name: 

///img 

Now, visiting `vegetables/celery/kale` will load the page component found in `vegetables/celery/kale.js`.

If you are attempting to use Next.js routing without an index file, you will encounter an error.

## Dynamic routes
Next.js supports the dynamic route syntax to create dynamic URLs. In Next.js, you may add brackets to a page `[slug]` to produce a dynamic route slugs for that page.

/// img 

Dynamic Routes with Parameters Next.js also supports creating dynamic URLs with parameters inside the page component.

The bracket syntax, which is [vegetable-name], is the dynamic segment and may be used with files as well. It can also be utilized with directories like the one shown below, allowing the author to be found at /vegetables/:vegetable-name/recipes/`, making it more flexible.

Route parameters are exposed as query arguments that may be accessed in any of the connecting components involved in the route with the useRouter() hook's query object.

Catch-all routes
Catch-all routes extend the dynamic routes. We can add three dots (...) inside the brackets. 

For example:

`pages/vegetables/[...name].js matches /vegetables/kale, but also /vegetables/kale/recipes, /vegetables/kale/recipes/new and so on.

The parameters will be sent as a query parameter to the page, and it will always be an array, so the path /vegetables/kale will have the following query object:

{ "name": ["kale"] }

If the path matches one of /vegetables/kale/recipes, and any other matching path, additional parameters will be added to the array as follows:

{ "name": ["kale", "recipes"] }

Manual imperative routing
`useRouter` hook can be used to manually route with imperative code.

This can be useful for cases where we want to transition between pages with different paths. 

The useRouter() hook can handle routes in this way:

```js
import { useRouter } from 'next/router'

export default function Footer() {
  const router = useRouter()

  return (
    <a onClick={() => router.push('/about')}>
       About 
    </a>
  )
}
```

## Shallow routing
Shallow routing allows you to alter the URL without calling data fetching methods getServerSideProps, getStaticProps, or getInitialProps again.

The router object will update the state without losing data, as you'll receive the new pathname and query through it.

Only router query state will change, the actual server-rendered HTML won't update. That's useful when you want to update the URL, for instance after a query parameter changed.

## Link Component: Route between pages
Next.js uses the Link component from next/link to link between pages.

The benefit of using the `<Link>` instead of just `<a>` tags is the ability to generate URL's for route switching. Also, if we use the `<a>` tag, it will force a full page reload and you won't be able to take advantage of client-side routing via React's Virtual DOM. 

The Link component can handle many parameters, but only the href attribute is required. We use a `<a></a>` tag as a child component to link pages in this example. Alternatively, you may link pages using any element that supports the onClick event on the Link component.

A Link component's href property may also be a URL object with parameters such as query, which are converted into a URL string automatically.

### passHref
The passHref properties make the Link component pass down the `href` property to the child component. This is required if the Link component wraps a component that generates a hyperlink `<a>` tag. 

### URL Object
A Link component's href property may also be a URL object with parameters such as query, which are converted into a URL string automatically.

```js
<Link
  href={{
    pathname: '/vegetables',
    query: { name: 'kale' },
  }}
>
```

The `href` property also has a URL type. A URL string is a structured string that has many meaningful components. When a URL is decoded, the resultant object contains properties for each of the parts.



## Custom route configuration 
Next.js supports custom route configurations inside the next.config.js file. 

Routing configuration rewrites allow you to map an incoming request path to a different destination path.

For example, to map `/about` route to `/`, we can add the rewrites key in next.config.js:

```js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/',
      },
    ]
  },
}
```

It's important to note that users won't be redirected, but instead, the requests will be passed to the new path. This allows Next.js to fallback to the routing logic defined in the pages themselves and for dynamic routes to still work. 

## Difference between React Router and Next.js Router
In Next.js, the routing system differs from the React Router. Routing is directory-based, and there's no need to write any code to build your routes. In the project root, you'll find a folder named "pages."

React Router has a top-level navigation file that is responsible for its routes, while Next.js has a page for each directory in the "pages" folder.

React Router needs to be configured manually through adding code, but Next.js handles routing automatically by watching your directory structure and inferring simple rules from it.

Next.js has built-in support for Server-side Rendering, while React Router needs to be paired with other backend frameworks.

React Router is a low-level component, and Next.js is a high-level framework which means that Next.js makes certain assumptions about how you'll make use of its routing features and handles many configuration issues for you out-of-the box. 

## Routing is a crucial feature of Next.js
Routing is crucial for a Next.js application, and it's reflected in the file-system-based router, which builds on the idea of pages. Pages define route patterns.

Next.js makes routing simple by providing a file system-based approach to pages and URL structure. With no custom configuration required.

If you are considering switching an existing React application to Next.js, or if you are building a new React application with dynamic routes, it is important to consider the trade-offs between using built-in routing capabilities and manually managing your routing state. Next.js offers many features to support dynamic routes, but there's no one-size-fits all solution.



## FAQ

<div className="-mx-4 md:-mx-6">
  <div className="divide-y divide-gray-200">
    <AccordionItem title="Does Next.js remove trailing slashes?">
      By default, Next.js removes the trailing slash at the end of each URL. 
    </AccordionItem>   
    <AccordionItem title="Do pages impact my bundle size?">
      Yes, based on common pages, Next.js optimizes the bundle. It only loads the Javascript and CSS that are needed for individual page. Because it eliminates excess code, web pages are significantly faster to load.
    </AccordionItem>
    <AccordionItem title="How to get the current page route?">
    // pages/posts/[...slug].js<br/>
    const router = useRouter();<br/>
    console.log(router.route); //  /posts/[...slug]<br/>
    </AccordionItem>
  </div>
</div>

Next.js Routes: Navigate Between Pages


RESTful APIs are everywhere. But if you're a web development, you know it's hard to decide which HTTP request method is best for various use cases. 

Updating a resource is a very common task for REST APIs and there are two HTTP request methods that developers commonly use: PUT and PATCH.

Which one should you use? 

They both seem like they would do the same thing - update a resource on the server, but they do different tasks under the hood.

This guide will help you understand the difference between PUT and PATCH requests so that you can design professional production-ready APIs.

<TOC />

## Difference between PUT and PATCH

The difference between PUT and PATCH in REST API is that **PUT handles updates by replacing the entire entity**, while **PATCH only updates the fields that you give it**. 

PATCH does not change any of the other values.

If you use the PUT method, then everything will get updated. Depends on server implementation, but in most REST APIs, this means it will overwrite any missing fields to null.

PATCH method updates individual fields without overwriting existing fields.

Use HTTP PUT when you are updating an entity that you cannot separate into smaller chunks. For example, we should update an avatar image as a complete entity, rather than patching the individual pixel bits.

PUT needs more bandwidth because it handles full resources, so <a href="https://datatracker.ietf.org/doc/html/rfc5789" target="_blank" rel="noopener noreferrer">PATCH was introduced</a> to reduce the bandwidth needed.

In both cases, the HTTP response code should tell you whether the update is successful.

<div className="px-1">
<table className="table-fixed">
  <thead>
    <tr>
      <th className="w-1/2 ..."></th>
      <th className="w-1/4 ...">PUT</th>
      <th className="w-1/4 ...">PATCH</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Partial Updates</td>
      <td>❌</td>
      <td>✔️</td>
    </tr>
    <tr className="bg-blue-200 px-2">
      <td>Bandwidth</td>
      <td>⬆️</td>
      <td>⬇️</td>
    </tr>
    <tr>
      <td>Creates a resource</td>
      <td>✔️</td>
      <td>❌</td>
    </tr>
    <tr className="bg-blue-200 px-2">
      <td>Idempotent</td>
      <td>✔️</td>
      <td>❌</td>
    </tr>
    <tr>
      <td>Safe</td>
      <td>❌</td>
      <td>❌</td>
    </tr>
  </tbody>
</table>
</div>

## **PUT**

The HTTP PUT request method is used to create a new resource or replace an old one.

The IETF has defined the HTTP PUT method as "only allowing a full replacement of a document."

The client must send a complete entity in a request body with all the new values for the resource.

- client provides the resource ID
- if the resource exists, replace it with the inbound data
- if it doesn't exist, create a new one

### **Advantage of using PUT**

- An advantage of using PUT is that we don't have to re-fetch the entity after successfully updating it. Since PUT sends the entire entity, it'll replace whatever is there with what we send.
- Another advantage of using PUT is that we can always overwrite the complete entity if we send down all fields and do not include any delta modification to existing fields. This means that our API clients only need to implement a single PUT method instead of many for partial updates.
- PUT creates a resource if one doesn't exist, which can come useful.

## **PATCH**

PATCH is used to change or add data on existing resources.

HTTP PUT method creates the entire resource at once, whereas **PATCH only updates the fields that are being patched**.

HTTP PATCH method was added to the HTTP protocol in 2010 to overcome the limitations of HTTP PUT request, which provides no support for partial updates. 

### Advantage of using PATCH

- The client doesn't need to know the complete state of the resource before sending an update request.
- PATCH makes it easier to keep a track of update intent to see what changed with each request. This advantage can be useful in situations where we need to review logs to debug. Noticing how resource change is easier with PATCH rather than PUT because the request body has very specific intent.
- PATCH saves bandwidth by allowing partial updates. It is more efficient than HTTP PUT for updating large objects.

## Generic Updates vs Intent

It's important to consider both client and server implementation when choosing between PATCH and PUT. 

From the client's perspective, PATCH seems great because it only updates the data that you need to. But when you look at it from a server's perspective, things get complicated.

For example:

```json
PATCH /orders/533
{
	"total": 8.34
}
```

In this request, we only want to update the `total`, meaning that server implementation should not touch other fields. However, server developers now need to know all fields that clients might update.

We call this the "intent" of the update and it's not explicit in a PATCH request.

To overcome this, we can use a feature called JSON Patch, where we define the intent of the update.

An intent represents a change you want to make of an entity. With property-based patching, you can use HTTP headers to express the intent of an update.

```json
PATCH /orders/533
[

	{ "op": "replace", "path": "/total", "value": "8.34" }

]
```

According to <a href="https://datatracker.ietf.org/doc/html/rfc6902" target="_blank" rel="noopener noreferrer">RFC6902</a>, the supported intents are "add",  "remove", "replace", "move", "copy", or "test".

JSON Patch makes updating a resource a lot easier. The client defines the intent, and the server updates the object based on the context of that definition.

## Idempotent Principle

RESTful architecture is all about idempotent operations. An idempotent operation has the same result, no matter when it is done. Non-idempotent operations can have different results.

An idempotent method's definition applies to the resource rather than the result. If you call the same idempotent method twice, the **method should produce the same result both times**.

An idempotent method should not have any side-effects. A side-effect is any state change outside the method itself.

PUT is idempotent but PATCH is not because of its ability to modify resource's entire content rather than specific fields. 

PATCH is not, because the modified data might result in different state than if it had never been patched. PATCH should only be used when you are updating or changing data on existing resources. If you find yourself needing to create a resource and

## Concurrent updates

When applying PATCH changes, it's a good idea to include a condition in the request to prevent it from succeeding if someone else updated the resource in the meantime.

The ETag HTTP response header is an ID. It is the identifier for a specific version of a resource.

When If-Match header and ETags are used in combination, they help to make sure that when a client is trying to update a resource, they can't. Instead, the old resource is kept and the new one isn't saved.

## Summary - PATCH vs PUT

The Internet Engineering Task Force (IETF) is a group of people who work on how the World Wide Web should work. They have rules, but it is up to developers to follow them by adding to them into their systems.

If you have to choose between PATCH and PUT, thinking about these main differences:  

- With a PUT request, the server modifies the resource identified by the Request-URI in place. In contrast, with a PATCH request, the server replaces or updates only certain parts of a resource without changing other aspects.
- When we execute a PUT request, we regard the enclosed entity as a modified version of the origin server's resource and the client is requesting to replace the existing version. With PATCH, however, the enclosed entity contains a set of instructions describing how to modify a resource currently on the origin server to produce a new version.

## FAQ

<div className="-mx-4 md:-mx-6">
  <div className="divide-y divide-gray-200">
    <AccordionItem title="What is the difference between PUT and PATCH?">
      The difference between PUT and PATCH in REST API is that PUT handles updates by replacing the entire entity, while PATCH only updates the fields that you give it.
    </AccordionItem>
    <AccordionItem title="Should I use PUT or PATCH?">
      Yes. PATCH requests have a body that comprises the instructions to modify or add data to an existing resource
    </AccordionItem>
    <AccordionItem title="Do PATCH requests have a body?">
      The difference between PUT and PATCH in REST API is that PUT handles updates by replacing the entire entity, while PATCH only updates the fields that you give it.
    </AccordionItem>
    <AccordionItem title="Which HTTP status code should PATCH return?">
      Successful PATCH requests should return status code from the 2xx range.
      Two most common are 204 (No Content) if there is no response data and 200 (OK) if there is some response data.    
    </AccordionItem>   
    <AccordionItem title="Which HTTP status code should PUT return?">
      Successful PUT requests should return status code from the 2xx range.
      Two most common are 204 (No Content) if there is no response data and 200 (OK) if there is some response data.
      If the intended resource does not yet have a current representation and the PUT request creates one, the origin server must send a 201 (Created) response to the client.
    </AccordionItem>
    <AccordionItem title="Can you use both PUT and PATCH?">
      Yes, you can use both PUT and PATCH since they have different purposes and methods.
    </AccordionItem>
    <AccordionItem title="Is PATCH or PUT easier for the client?">
      It depends on the use case, but PATCH is usually easier for the client because it allows to make changes without reloading the whole resource.
    </AccordionItem>
    <AccordionItem title="Is PATCH allowed on read-only resources?">
      Yes, you can use a patch if the only thing you want to do is test something using the "test" intent. You don't need to change anything in the patch.
    </AccordionItem>
    <AccordionItem title="Why PUT is idempotent and PATCH is not?">
      PUT is idempotent because calling it once or several times successively produces the same effect. PATCH is not because the update intent might yield different result every time.
      For example, if we want to update order total with PUT, we need to specify the value: $32.11. With PATCH, we could send a command to "increase" by $10.11, which could apply to an order where the total was originally $22.11, resulting in a new total of $32.11. But if the original total is not $22.11, PATCH will produce different result.
    </AccordionItem>
    <AccordionItem title="Can PATCH be idempotent?">
      Yes, it can.<br/><br/>
      For example, if you use PATCH to update an order's total with `"set" : \ "price" : 50 \`, then successive patches with this field set to the same value will produce the same result, thus the operation will be idempotent.
    </AccordionItem>
    <AccordionItem title="Does an idempotent method have side-effects?">
      No, an idempotent method should not have any side-effects.
    </AccordionItem>
    <AccordionItem title="Is PUT safe?">
      PUT is not safe. An HTTP method is safe if it doesn't change the server's state. A method is safe if it leads to a read-only operation.
    </AccordionItem>
    <AccordionItem title="Can PATCH create a resource?">
      It *may*, according to RFC 5789, but in practice, it doesn't. That's different between PATCH and PUT because PUT creates a resource if it doesn't exist.
    </AccordionItem>
  </div>
</div>


When To Use PATCH vs. PUT in Professional REST APIs

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?

<div className="mb-4">
  <figure className="">
    <img
      className="rounded-2xl"
      src="/img/c-sharp-enum/croatia.png"
      layout="responsive"
      width={3016}
      height={1860}
      alt="TryParse Enum Default Value in C#"
    />
  </figure>
</div>

The console prints out "UnitedStates" because `TryParse` outs the default value, which is 0 (<a href="/posts/c-sharp-nullable-value-type#default-value">not null</a>!). 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 must-know commands to 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.

4 Safe Steps to Update npm Packages [BONUS commands cheat sheet]

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>

## Get Google to crawl your site 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: /
``` 

Latest Blog Posts