DEV Community: Talha Mansoor

Sign In With Apple – You Should Know

Talha Mansoor — Wed, 29 Apr 2020 13:38:23 +0000

"Sign in with Apple" lets users log in to different apps and services using their Apple account. I document a few nuances and subtleties that I noticed in the course of integrating Apple authentication provider into a web app.

Offering "Sign in with Apple" is obligatory

If your app lets a user sign in using any third-party service, then you must add Apple Login to the available options.

On September 12, 2019, Apple introduced new guidelines for "Sign In With Apple". It says, in the fine print:

Apps that use a third-party or social login service (such as Facebook Login, Google Sign-In, Sign in with Twitter, Sign In with LinkedIn, Login with Amazon, or WeChat Login) to set up or authenticate the user’s primary account with the app must also offer Sign in with Apple as an equivalent option.

Apple also announced the cutoff dates on which it will start enforcing this requirement.

New apps must follow guideline 4.8 and Human Interface Guidelines on Sign in with Apple starting April 30, 2020. App updates must follow these guidelines starting June 30, 2020.

Apple Developer Program membership is required

You must have an Apple Developer Program account to offer Apple login service in your app.

You need Apple developer console to create an App ID for your app. Similarly, you need to register a client_id and redirect URL for the app under the same App ID in the Apple developer console.

You cannot use `localhost` for redirect URL

In the production, you will have a public redirect URL. During development and testing, we almost always use localhost or 127.0.0.1. But Apple does not permit localhost URLs.

To quote the documentation,

The host specified in appleid-signin-redirect-uri must include a domain name. It can’t be an IP address or localhost.

An easy workaround is to map localhost to the registered redirect URL. You can do this by adding an entry to your hosts file.

For example, you set the redirect URL to myapp.com/auth/apple/redirect in the Apple developer console. Edit your /etc/hosts file and add this entry.

127.0.0.1    myapp.com

This mapping will let you develop and test Apple sign in locally, without touching your production server running at myapp.com.

A couple of caveats

You cannot use .localhost TLD, like myapp.localhost. It is because localhost is reserved as a special-use domain.

If you use .dev TLD like myapp.dev, then your dev server must support SSL. It is because browsers force .dev domains to HTTPS.

Use "Sign in with Apple JS framework" to save time

Apple hosts a JavaScript script that does the heavy lifting for you.

https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js

You can use it:

to create and customize "Sign in with Apple" buttons,
to set authorization settings,
and to launch the authentication process.

The official documentation is available here.

Use JS for ready-made branded button

Apple is very particular about how derivate work uses its brand. They have extensive Human Interface Guidelines on how to display and offer Sign in With Apple button.

You can make your life easy, and use Apple JS Framework to create the button automatically.

<div id="appleid-signin"></div>
<script
  type="text/javascript"
  src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"
></script>

The appleid.auth.js script will automatically replace the appleid-signin div with an SVG button. You can customize the button using data- attributes. Read more about it here.

The drawback of this method is that the button will not become visible until the browser fetches, loads and runs the appleid.auth.js file. On slow networks and browsers, this will make for less than ideal user experience.

Use Apple web service for ready-made branded button

The better way is to add branded "Sign in with Apple" button as an image to your assets. You can embed the image with base64 encoding to your HTML. Then the browser will paint the button as soon as it receives the HTML of the login page of your app.

Apple has set up a web service to generate a button for you.

https://appleid.cdn-apple.com/appleid/button

Simply send it GET request or open the link in your browser to download a PNG button. You can customize the button using query parameters. For instance, to download the button with a white background, and a border-radius of 5px, you would use the following URL.

https://appleid.cdn-apple.com/appleid/button?color=white&border_radius=5

You can read more about the available parameters here.

Apple sends authorization result via HTTP POST

When you use appleid.auth.js framework, you have to configure the authorization object using AppleID.auth.init(). Then call AppleID.auth.signIn() when user clicks the sign-in button.

In the source code of appleid.auth.js, you will notice the response_mode is fixed to form_post. After Apple processes the authorization request, it sends the result using the HTTP POST method to the redirect URL you have set in the developer console. Therefore, your redirect URL should be a REST endpoint that can receive the POST and process it.

Alternative to sign in with Apple JS framework

If you want to break away from the appleid.auth.js framework, you can send authorization request using HTTP GET method to this URL

https://appleid.apple.com/auth/authorize

Pass your client_id and other information using query parameters which are documented here.

Focus on query parameter response_mode. Its valid values are,

query
fragment
form_post

If you set the response_mode to fragment then, you do not need a REST API endpoint to receive the authorization result. Apple service will put the authorization result in the URL fragment. Hence, you can set redirect URL to a client-side HTML page. JavaScript code can pick the response from the URL fragment and process it.

Caution

Remember, the authorization result contains a JWT token, which is why I would not advise you to use query response mode.

Unlike query, a URL fragment is not sent in HTTP request messages. It is not added to Referer header. The server does not receive the fragment. These benefits make fragment a more secure choice than a query to receive the result.

Apple sends user information only once

You can set the scope to either name, or email, or both or neither. If you set the scope to name or email, Apple will send you a user object. The catch is, Apple sends user object only once.

To quote the documentation,

Apple only returns the user object the first time the user authorizes the app. Persist this information from your app; subsequent authorization requests won’t contain the user object.

Most apps will use the user information received from Apple. They will use it, for example, to send emails to the users, or to display the user’s name. Consequently, your app should store the user information for reuse.

Apple sends the user object again only if the user removes your app from the authorized apps from his Apple account and then tries to log in to your app again. You can leverage this tidbit to test the login multiple times during the development.

Use `sub` claim for user identification

A user logs in using a third-party authentication provider, like Google. The user uses the email address "example@gmail.com" to log in to your app. User logs in to another instance of your app using Google. Your app will identify it is the same user because the email "example@gmail.com" matches in both cases.

It is a common scenario. But it does not apply to Apple.

Apple lets your users protect their email address from your app. When they sign in using Apple, Apple asks them if they want to hide their email address. If they do, then Apple sends a unique random email address in place of the actual email address. You can use this anonymous email address to communicate with your user, but you should not use it to identify the user.

Let's say, a user signs in to your app for the first time using Apple sign in. The user decides to conceal the email address. Apple creates a random email address for her, and sends it to your app, "random@privaterelay.appleid.com". The same user removes your app from authenticated apps in her Apple account, and signs in to your app again. This time the user decides to share the email address from you. Apple sends the email address "example@gmail.com". Now your app has two email addresses,

Both these email address belong to the same user, but your app cannot identify her if you only rely on email addresses to recognize the users.

You should use sub claim in JWT token for user identification. A sub claim is a unique identifier for the user, and it does not change when users hide or unhide their email addresses.

`email_verified` claim is a string value

email_verified is one of the JWT claims. The documentation says:

email_verified

A Boolean value that indicates whether the service has verified the email.

But it is returned as a string, "true", instead of a boolean value, true.

You can probably ignore it because the doc also mentions,

The value of this claim is always true because the servers only return verified email addresses.

Register your email domain

You can send emails to the Apple generated anonymous email addresses of the users. But to do that, you must register your email domain in the Apple developer console.

Only registered email domains can send emails to the user. This feature eliminates spam emails for users who opt anonymous addresses.

Helpful sites

https://jwt.io/ is an outstanding tool to parse and validate tokens quickly.

You will fetch Apple's public key for verifying a token signature from this link. However, for unit testing, you might need to sign tokens using a custom generated key. https://mkjwk.org/ is a simple JSON web key generator to generate random keys for testing.

Cover Image Attribution: Desola Lanre-Ologun

Iterate Over An Array And Remove Elements

Talha Mansoor — Wed, 15 Apr 2020 07:25:24 +0000

Say you have an array, a simple array with 16 integers.

const eg = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610];

Your task is to remove all numbers that are greater than 99. Simple enough! You will iterate over the array and remove all the elements that are greater than 99.

Important: Although the following examples use JavaScript, the logic and the issue it posses are valid for any programming language. Near the end, I have added examples in Golang, C#, C++, Python and JavaScript.

Your code will probably look like this,

const eg = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610];

for (let i = 0; i < eg.length; i++) {
  if (eg[i] > 99) {
    // Remove element
    eg.splice(i, 1);
  }
}

If you print the result eg, you will see that the result is not quite right.

[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 233, 610];

This result cannot be correct. 233 and 610 are greater than 99 and still left in the array.

What went wrong?

Let's add some log statements to the code. You can view and run the code at this link.

for (let i = 0; i < eg.length; i++) {
  console.log(i, eg[i], eg.length);
  if (eg[i] > 99) {
    // Remove element
    eg.splice(i, 1);
    console.log(`Element at ${i} removed. Length is  ${eg.length}`);
  }
}

The output is,

0 0 16
1 1 16
2 1 16
3 2 16
4 3 16
5 5 16
6 8 16
7 13 16
8 21 16
9 34 16
10 55 16
11 89 16
12 144 16
Element at 12 removed. Length is  15
13 377 15
Element at 13 removed. Length is  14
[ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 233, 610 ]

Notice that when the index i is 12, it reaches element 144. 144 is removed, which reduces array length to 15 from 16.

Then the index i is 14, and it reaches element 377. 377 is removed, which reduces array length from 15 to 14.

Then the index i reaches 15, but it fails the condition i < eg.length, which stops the result.

The loop ran only 14 times when it should have run 16 times. It happens because we modified the array length during the iteration.

Error: If you think forcing the loop to run 16 times will fix the issue, then you are wrong again.

Have a look at following incorrect code.

const eg = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610];

const len = eg.length;

for (let i = 0; i < len; i++) {
  console.log(i, eg[i], eg.length);
  if (eg[i] > 99) {
    // Remove element
    eg.splice(i, 1);
    console.log(`Element at ${i} removed. Length is  ${eg.length}`);
  }
}

If you try to run this code, you will get "index out of bound" runtime errors.

Now, how do we solve this issue? We have three ways to do it the right way.

Solution 1 — Decrement index

One way to solve this problem is to decrement i whenever an element from the array is removed. This way index does not skip over the remaining elements of the array.

const eg = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610];

for (let i = 0; i < eg.length; i++) {
  console.log(i, eg[i], eg.length);
  if (eg[i] > 99) {
    // Remove element
    eg.splice(i, 1);
    console.log(`Element at ${i} removed. Length is  ${eg.length}`);
    // Important
    i--;
  }
}

console.log(eg);

Its output is

0 0 16
1 1 16
2 1 16
3 2 16
4 3 16
5 5 16
6 8 16
7 13 16
8 21 16
9 34 16
10 55 16
11 89 16
12 144 16
Element at 12 removed. Length is  15
12 233 15
Element at 12 removed. Length is  14
12 377 14
Element at 12 removed. Length is  13
12 610 13
Element at 12 removed. Length is  12
[ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 ]

You can view and run this code here.

Solution 2 — Iterate in Reverse

In this solution, you start from the last element of the array and continue backwards. This way, even if array length is modified, the loop iterates over all the remaining elements.

const eg = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610];

let i = eg.length;

while (i--) {
  console.log(i, eg[i], eg.length);
  if (eg[i] > 99) {
    // Remove element
    eg.splice(i, 1);
    console.log(`Element at ${i} removed. Length is ${eg.length}`);
  }
}

console.log(eg);

Its output is

15 610 16
Element at 15 removed. Length is 15
14 377 15
Element at 14 removed. Length is 14
13 233 14
Element at 13 removed. Length is 13
12 144 13
Element at 12 removed. Length is 12
11 89 12
10 55 12
9 34 12
8 21 12
7 13 12
6 8 12
5 5 12
4 3 12
3 2 12
2 1 12
1 1 12
0 0 12
[ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 ]

You can view and run this code here.

You can, of course, use a for loop in place of while.

for (i = eg.length - 1; i >= 0; i--) {}

You can view code with a for loop here.

Is this problem specific to some languages?

No! Whichever programming language you pick, if you iterate and remove array elements incorrectly, you will face this issue.

Here is the same problem replicated in Golang. If you run it, the program fails during runtime.

package main

import "fmt"

func remove(slice []int, s int) []int {
    return append(slice[:s], slice[s+1:]...)
}

func main() {
    eg := []int{0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610}
for i, el := range eg {
        if el > 99 {
            eg = remove(eg, i)
      fmt.Println(len(eg))
        }
    }


    fmt.Println(eg)
}

The output of the above program:

./main
15
14
panic: runtime error: slice bounds out of range

goroutine 1 [running]:
main.remove(...)
    /home/runner/main.go:6
main.main()
    /home/runner/main.go:14 +0x25b
exit status 2

But if we turn around the code and start iteration is reverse, then the code works fine.

package main

import "fmt"

func remove(slice []int, s int) []int {
    return append(slice[:s], slice[s+1:]...)
}

func main() {
    eg := []int{0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610}
    l := len(eg) - 1
    for l >= 0 {
    if eg[l] > 99 {
            eg = remove(eg, l)
        }
    l = l - 1
    }

    fmt.Println(eg)
}

Best Solution

A succinct solution is to use functional programming.

Most modern programming languages are incorporating functional programming
features. Thus, if a language supports new methods, you do not have to use the
old fashioned loops to remove elements from an array.

JavaScript

In ECMA-262 5th edition, filter() method was added to the JavaScript.

We can rework the above example into a simple oneliner.

const eg = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610];
result = eg.filter(x => x < 99);
// Output
console.log(result);

Python

Here is a working Python oneliner.

eg = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610]
result = [x for x in eg if x < 99]
print(result)

C#

Either of the following ways will work in C#.

Using Linq.

using System;
using System.Collections.Generic;
using System.Linq;

class MainClass {
  public static void Main (string[] args) {
    List<int> eg = new List<int>(){0, 1, 1, 2, 3, 5, 8, 13,
                        21, 34, 55, 89, 144, 233, 377, 610};
    var result = (from x in eg where x < 99 select x).ToList();
    result.ForEach(i => Console.WriteLine(i));
  }
}

Using predicate.

using System;
using System.Collections.Generic;

class MainClass {
  public static void Main (string[] args) {
    List<int> eg = new List<int>(){0, 1, 1, 2, 3, 5, 8, 13,
                        21, 34, 55, 89, 144, 233, 377, 610};
    eg.RemoveAll(i => i > 99);
    eg.ForEach(i => Console.WriteLine(i));
  }
}

C++

C++ has std::remove_if method.

#include <algorithm>
#include <iostream>
#include <vector>

int main() {
  std::vector<int> eg = {0,  1,  1,  2,  3,   5,   8,   13,
                         21, 34, 55, 89, 144, 233, 377, 610};
  eg.erase(std::remove_if(
              eg.begin(),
              eg.end(),
              [](int x) {
                  return x > 99;
              }),
           eg.end());

  // Print result
  std::for_each(eg.begin(),
                eg.end(),
                [](const int &e) {
                    std::cout << e << " ";
                });
}

You can run this code here.

Cover Image Attribution: Gabriel Garcia Marengo

How To Add An Empty Directory To A Git Repository — Two Different Use Cases

Talha Mansoor — Sat, 04 Apr 2020 11:43:05 +0000

Git lets you only add files to the index. If you want to add a directory, then Git does not have a builtin solution for you. Of course, there are ways to work around this issue.

Add a directory but ignore its contents

If you want to add an empty folder to Git index, but you want Git to omit the present and future contents of the directory. Then, create a .gitignore file inside the directory and add these lines to the .gitignore file:

# Disregard this entire folder
*
# Except this .gitignore file
!.gitignore

Then add and commit this .gitignore file. This solution results in a directory that is present inside Git, but its contents never get added to the Git.

A possible use case scenario of this solution is to add the debug folder of a project to the index. Almost always, you do not want the contents of your debug folder to end up in the Git index. But you may need to keep the debug folder in the index because you have relative paths in your code or you want all your teammates to have the same folder structure.

Add an empty directory and track its future contents

Say, you want to add a folder to the index. It is currently blank, but you plan to add files to it that Git should track. The only solution is to create a file in the directory and add it to the Git.

Git community has settled on creating an empty file called .keep in the directory and adding it to the index.

mkdir hello
cd hello
touch .keep
git add .keep
git commit -m "add empty directory called hello"

.keep is not an officially prescribed name by the Git. You can use any other name. You can use "README" or "ABOUT", or even "Intentionally Blank File". Your choice. .keep is the most preferred filename for this purpose. The . is the beginning of its name, ensures that it will stay hidden on Linux and macOS file systems.

A possible use case scenario is if you are creating a boilerplate folder structure, which you want to reuse in all your React projects. You create empty folders for containers, components, API and store. You add these empty folders to the Git repository. You then use the repository as a template for your future projects.

Cover Image Attribution: James Best

Use sed To Extract Filename, Extension, and Directory From Path

Talha Mansoor — Wed, 01 Apr 2020 02:12:41 +0000

sed Expression

echo $var | sed 's/\(.*\)\/\(.*\)\.\(.*\)$/\2\n\3\n\1/'

The regex used is $.*$\/$.*$\.$.*$$. Lets analyze it step by step.

Let's say the path is /User/talha/content/images/README.example.md.

Extract Directory From Path

The first part of the regex is $.*$\/.

\( escapes (
. means any character
* means any number of times
Combined, .* means match all the characters in a string
\) escapes )
\/, escapes /

() is used for capturing the match. sed matches the string and captures it.
You reference the first captured match using \1; second captured match using
\2; third using \3 and so on. In this example, .* is in-between (),
therefore sed captures it.

.* means all the characters from the start.

$.*$ is followed by \/. sed matches all the characters from the start until
it finds the / character.

sed regex matcher is greedy. It means it selects the longest possible match.
In our example path, sed does not stop matching at /User. Instead, it keeps
matching until it runs out of the /. Hence it matches:

/User/talha/content/images/README.example.md

Because .* is enclosed inside brackets $ and $. sed captures the match, which is the first capture in the expression. It can be referenced using \1.

Extract Filename From Path

The second part of the regex is $.*$.

\( escapes (
. means any character
* means any number of times
Combined, .* means match all the characters in a string
\) escapes )

So .* means all characters, and because of brackets, capture it, which is the second capture; hence, it is referenced using \2.

However, where sed starts the match from? It starts match right where the first part ended.

/User/talha/content/images/README.example.md

Till where will sed end the match? Good question. It depends on the third part of the regex.

Extract File Extension From Path

The third part of the regex is \.$.*$$.

\. escapes .. It means literal .
\( escapes (
.* any string
\) escapes )
$ end of the string

It means, start from the end of the string, and move towards left, till a .
is found. Match any character between last . and the end of the string and
capture it.

This part of the regex, matches:

/User/talha/content/images/README.example.md

What Is Matched

When all these parts are combined, we get the following matches

/User/talha/content/images/README.example.md
/User/talha/content/images/README.example.md
/User/talha/content/images/README.example.md

What Is Captured

Notice, in the first part, \/ is outside the capturing \). In the third part, \. is placed before \(. Because they are not inside the (), they are not captured.

To understand, compare the captured result with the matched result.

/User/talha/content/images/README.example.md
/User/talha/content/images/README.example.md
/User/talha/content/images/README.example.md

Replace Pattern

Let's focus on the replace pattern of the sed expression. \2\n\3\n\1

\2 prints the second captured group, which is filename
\n prints new line
\3 prints the third captured group, which is file extension
\n prints new line
\1 prints the first captured group, which is directory

Example Output

Lets run our example through the expression,

$ echo "/User/talha/content/images/README.example.md" | sed 's/\(.*\)\/\(.*\)\.\(.*\)$/\1\n\2\n\3/'
README.example
md
/User/talha/content/images

sed for macOS user

sed version that comes with macOS does not support \n. You need to install gnu-sed

brew install gnu-sed

Then replace sed with gsed in the command.

Conditional Spread Syntax In JavaScript

Talha Mansoor — Tue, 31 Mar 2020 19:22:43 +0000

Spread syntax, in JavaScript, lets you expand arrays, objects and even strings succinctly. It is one of the features in JavaScript that I miss the most when working in other programming languages.

In this article, I will show how you can expand any JavaScript literal conditionally.

Conditionally expand an object

Idiomatic syntax is

{ ...(condition && object) }

Explanation

Consider these two objects

const obj1 = { isDev: true };
const obj2 = { name: "Talha", user: "talha131" };

You can merge them together like so,

const objMerged = { ...obj1, ...obj2 };

Say I add a boolean variable expand. obj2 should be expanded only when expand is true.

let expand = true;
let objMerged = { ...obj1, ...(expand && obj2) };

objMerged value is

{
  "isDev": true,
  "name": "Talha",
  "user": "talha131"
}

Try false.

expand = false;
objMerged = { ...obj1, ...(expand && obj2) };

objMerged value is

{
  "isDev": true
}

Conditionally expand a string to an object

Idiomatic syntax is

[...(condition && string)];

Explanation

When you apply the spread operator on a string inside {}, it returns an object.

const str = "abc";
const eg = { ...str };

eg value is

{
  0: "a",
  1: "b",
  2: "c"
}

Therefore, you can use the same syntax that you use for conditionally expanding an object.

expand = false;
let expandedStr = { ...(expand && str) };

Conditionally expand an array

Idiomatic syntax is

[...(condition ? array : [])];

Explanation

Consider these two arrays

const arr1 = [1, 3, 5];
const arr2 = [2, 4, 6];

You can merged these arrays like this,

const arrayMerged = [...arr1, ...arr2];

Say I add a boolean variable expand. arr2 should be expanded only when expand is true.

let expand = true;
const arrayMerged = [...arr1, ...(expand && arr2)];

Unfortunately, this will not work if condition, expand, is false. You will get the error.

error: TypeError: false is not iterable

The reason is in case of array and string, the ... operator requires an iterable. When the condition is false, the () expression is empty, in turn, the ... operator complains, "Where is my iterable?"

Therefore, the correct syntax is

const arrayMerged = [...arr1, ...(expand ? arr2 : [])];

The ternary operator provides an empty array for the failing case.

Conditionally expand a string to an array

Idiomatic syntax is

[...(condition ? string : [])];

Explanation

When you apply the spread operator on a string inside [], it returns an array.

const str = "abc";
const eg = [...str];

Value of eg is [ "a" , "b" , "c" ].

Therefore, just like an array, if you try to use logical and operator &&, you will get the error.

// incorrect
const eg = [...(false && "hello")];

The correct syntax is

expand = false;
let expandedStr = [...(expand ? str : [])];

Here expandedStr will evaluate to an empty array [].

Warp Up

You can see a working examples and run them at this link.

// Objects

const obj1 = { isDev: true };
const obj2 = { name: "Talha", user: "talha131" };

let expand = true;
let objMerged = { ...obj1, ...(expand && obj2) };
console.log("Expand Objects true");
console.log(objMerged);

expand = false;
objMerged = { ...obj1, ...(expand && obj2) };
console.log("Expand Objects false");
console.log(objMerged);

// Arrays

const arr1 = [1, 3, 5];
const arr2 = [2, 4, 6];

expand = true;
let arrayMerged = [...arr1, ...(expand ? arr2 : [])];
console.log("Expand Arrays true");
console.log(arrayMerged);

expand = false;
arrayMerged = [...arr1, ...(expand ? arr2 : [])];
console.log("Expand Arrays false");
console.log(arrayMerged);

// String to array

const str = "abc";

expand = true;
let expandedStr = [...(expand ? str : [])];
console.log("Expand string to array true");
console.log(expandedStr);

expand = false;
expandedStr = [...(expand ? str : [])];
console.log("Expand string to array false");
console.log(expandedStr);

// String to object

expand = true;
expandedStr = { ...(expand && str) };
console.log("Expand string to object true");
console.log(expandedStr);

expand = false;
expandedStr = { ...(expand && str) };
console.log("Expand string to object false");
console.log(expandedStr);

It's output is

Expand Objects true
{
  isDev: true ,
  name: "Talha" ,
  user: "talha131"
}

Expand Objects false
{
  isDev: true
}

Expand Arrays true
[ 1, 3, 5, 2, 4, 6 ]

Expand Arrays false
[ 1, 3, 5 ]

Expand string to array true
[ "a", "b", "c" ]

Expand string to array false
[ ]

Expand string to object true
{
  0: "a" ,
  1: "b" ,
  2: "c"
}

Expand string to object false
{ }

Build Your Own Hook To Access RESTful API

Talha Mansoor — Sat, 28 Mar 2020 20:36:21 +0000

Hooks are a transformative feature introduced in Release 16.8.0 of React. Besides the builtin hooks, you can create your own hooks.

In this article, I am going to show you how you can build your own hooks and then, how can you use your custom hooks to fetch data. I am going to use Create React App and TypeScript in the following examples.

What is a hook

A hook is nothing but a function. There is no mystery to it. It does not have any specific signature or declaration. It can take any number of arguments and can return any amount or type of values. You decide. React does not impose any requirement on you.

There is one requirement, though. A hook name should always start with use. For example, useGetUserInfo is a valid hook name. getUserInfo is not a valid hook name.

Simply, a hook is a function whose name starts with use.

Create your own hook

Let's put this to test.

Create a React project.

yarn create react-app my-app --template typescript

Edit src/App.tsx.

const useGetMessage = (): string => {
  return "Hello World";
};

const App = () => {
  const mesg = useGetMessage();
  return <div className="App">{mesg}</div>;
};

In this example, I created a hook useGetMessage. It does not take any argument and returns a string.

I agree that it is useless, and a simple function would have sufficed. I am only making a point that a hook is merely a function.

A hook that takes an argument

Let's create another hook that can take value.

const useGetSquare = (num: number): number => {
  return num * num;
};

const App = () => {
  const square = useGetSquare(2);
  return <div className="App">{square}</div>;
};

Pretty simple, right?

Here we got square of the number 2 only. What if I want to get square of 3 and 4 too? Can we do this?

const App = () => {
  return (
    <div className="App">
      {useGetSquare(2)} {useGetSquare(3)} {useGetSquare(4)}
    </div>
  );
};

A hook that uses other hooks

Let's create a hook that we will use to keep track of a button click count.

Here is a naive and incorrect implementation.

// incorrect example
const useButtonClicked = (): number => {
  let count = 0;
  count++;
  return count;
};

const App = () => {
  const count = useButtonClicked();
  const onButtonClick = () => {
    useButtonClicked();
  };
  return (
    <div className="App">
      <button onClick={onButtonClick}>Click Me</button>
      <h2>{count}</h2>
    </div>
  );
};

This code has some issues.

How do we increment the count inside useButtonClicked hook? Calling the hook from inside the onButtonClick method will only reset the count to zero.

More importantly, you can call a hook only inside a React component. onButtonClick is not a React component. This warning from rules-of-hooks explains it.

Line 12:32: React Hook "useButtonClicked" is called in function "onButtonClick" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

Clearly, our approach is wrong.

We can return a method from useButtonClicked hook, say, incrementCount. Then the component can call incrementCount to increase the count inside the hook.

// incorrect example
const useButtonClicked = (): [number, () => void] => {
  let count = 0;
  const incrementCount = () => {
    count++;
  };
  return [count, incrementCount];
};

Notice that we use an array to return the two values.

A component can use this hook like this,

const App = () => {
  const [count, incrementCount] = useButtonClicked();
  const onButtonClick = () => {
    incrementCount();
  };

  return (
    <div className="App">
      <button onClick={onButtonClick}>Click Me</button>
      <h2>{count}</h2>
    </div>
  );
};

This code fixes the rules-of-hooks warning. But it too does not work correctly. The count on screen does not increase on clicking the button.

If you add a console.log statement inside incrementCount to view the value of count, you will observe the incrementCount increases the value of count correctly. It is a JavaScript closure, and it has access to the count variable.

Unfortunately, inside the component, the count value is stale. It is initialized when we call useButtonClicked.

const [count, incrementCount] = useButtonClicked();

After this initialization, this value is never updated.

The simplest solution to this issue is to use the React's useState hook. React team has fixed the stale value in useState hook. Whenever a value is updated, the component automatically gets the updated value.

In this example, we use useState hook inside our custom useButtonClicked hook.

const useButtonClicked = (): [number, () => void] => {
  const [value, setValue] = React.useState(0);
  const incrementCount = () => {
    setValue(value + 1);
  };
  return [value, incrementCount];
};

This fixes the issue, and the hook works correctly.

Currently, the hook increments the count by one. Let's modify the hook so that component can decide the increment value. It requires very little change.

const useButtonClicked = (increaseBy = 1): [number, () => void] => {
  const [value, setValue] = React.useState(0);
  const incrementCount = () => {
    setValue(value + increaseBy);
  };
  return [value, incrementCount];
};

const App = () => {
  const [count, incrementCount] = useButtonClicked(2);
...

The count starts from 0, then 2, then 4, and so on.

Modify the hook so that count can start from any number the component provides, instead of just 0.

const useButtonClicked = (increaseBy = 1, initialValue = 0): [number, () => void] => {
  const [value, setValue] = React.useState(initialValue);
...
const App = () => {
  const [count, incrementCount] = useButtonClicked(2, 10);

Use a custom hook to make `GET` requests

So far, we have learned that hooks are functions. We can use a function inside another function, precisely the same way, we can use hooks inside other hooks. We can pass parameters to it, and use the return value in the components.

It is also clear to do anything non-trivial inside a custom hook, you have to use React's predefined hooks.

Armed with this knowledge, we will make a hook that will fetch user information from Reqres using fetch().

A request can have three states,

it has started and is waiting for server response
it has successfully completed
it has failed

It is appropriate to use useReducer hook in our custom hook, instead of useState hook. You can read this article, "When to use useState vs useReducer hook in React", to better understand the rationale.

`useGetInformation` definition

In the following lines, we will define a useGetInformation. Consumers of the hook will pass a user ID to it. It, in turn, will return the user information, and request status, like the request is in process, or the request has failed.

The interface of the JSON object that the server will send to the hook.

interface Info {
  id: number;
  emai: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

Interface for the actions that the hook can perform.

type HookAction =
  | { type: "fetching" }
  | { type: "success"; payload: Info }
  | { type: "error" };

Interface for the state of the hook.

interface HookState {
  isFetching: boolean;
  isSuccessful: boolean;
  errorMessage: string;
  result: Info | null;
}

The default state of the hook.

const hookInitialState: HookState = {
  isFetching: false,
  isSuccessful: false,
  errorMessage: "",
  result: null
};

Reducer function to update the state.

const hookReducer = (state: HookState, action: HookAction): HookState => {
  switch (action.type) {
    case "fetching":
      return {
        ...state,
        isFetching: true,
        isSuccessful: false,
        errorMessage: "",
        result: null
      };

    case "success":
      return {
        ...state,
        isFetching: false,
        isSuccessful: true,
        result: { ...action.payload }
      };

    case "error":
      return {
        ...state,
        isFetching: false,
        isSuccessful: false,
        errorMessage: "User not found"
      };
  }
};

Now that we have the state, actions and a reducer, we code the hook useGetInformation.

const useGetInformation = (): [HookState, (id: number) => void] => {
  const [fetchState, dispatch] = React.useReducer(
    hookReducer,
    hookInitialState
  );

  const fetchInfo = (id: number) => {
    fetch(`https://reqres.in/api/users/${id}?delay=5`)
      .then((response) =>
        response.status === 200
          ? Promise.resolve(response.json())
          : Promise.reject(response.status)
      )
      .then((data) => {
        dispatch({
          type: "success",
          payload: { ...data.data },
        });
      })
      .catch((err) => {
        dispatch({ type: "error" });
      });
  };

  const getInfoForId = (id: number) => {
    dispatch({ type: "fetching" });
    fetchInfo(id);
  };

  return [fetchState, getInfoForId];
};

In lines, 2-5, we use React's builtin hook useReducer. We pass it the reducer and the default state. It returns fetchState and dispatch. The hook does not need fetchState, but it will expose it for the hook users. Hook users will read the value of fetchState and update their component. useGetInformation hook uses dispatch to update the state.

Lines 7-23 has the definition of fetchInfo. This method fetches user information from Reqres and dispatches actions when the request fails or succeeds.

Lines 25-28 has the method getInfoForId. Users of the hook will use this method to pass the user ID. As soon as the ID is received, getInfoForId will call fetchInfo which will kick start the fetch process.

In the last line of the hook definition, 30, we return fetchState and getInfoForId.

Example usage of `useGetInformation`

We will define a component, that will use the useGetInformation.

const App = () => {
  const [
    { result, isSuccessful, isFetching, errorMessage },
    getInfoForId
  ] = useGetInformation();

  const onButtonClicked = () => {
    getInfoForId(1);
  };

  return (
    <div className="App">
      {isSuccessful && !isFetching && result && (
        <h2>First Name: {result.first_name}</h2>
      )}
      {!isSuccessful && !isFetching && errorMessage.length > 0 && (
        <h2>Error: {errorMessage}</h2>
      )}
      {isFetching && <h3>Please Wait</h3>}

      <button onClick={onButtonClicked} disabled={isFetching}>
        Get User 1 Info
      </button>
    </div>
  );
};

This is a simple component.

It destructures the fetchState returned from the useGetInformation hook into { result, isSuccessful, isFetching, errorMessage }.

It shows the name of the user from the result, an error message in case of error, and a "Please wait" message when the request is in process.

The button is disabled when the request is in process. When the button is clicked, it passes user ID 1 to the hook.

Let's add two more buttons.

  const onButton1Clicked = () => {
    getInfoForId(1);
  };

  const onButton2Clicked = () => {
    getInfoForId(2);
  };

  const onButton3Clicked = () => {
  // User with ID 100 is not present
    getInfoForId(100);
  };
...
      <button onClick={onButton1Clicked} disabled={isFetching}>
        Get User 1 Info
      </button>
      <button onClick={onButton2Clicked} disabled={isFetching}>
        Get User 2 Info
      </button>
      <button onClick={onButton3Clicked} disabled={isFetching}>
        Get Invalid User Info
      </button>

This is the result of clicking on the "Get Invalid User Info" button.

You can play with this code in the sandbox at this link.

Wrapping up

In this tutorial, we have learned how to create custom hooks, and then we used this knowledge to create a hook that does GET requests to a RESTful API server. We can make similar hooks for POST, PATCH and DELETE requests.

Cover Image Attribution: Tobias Keller

How I Converted C# Yellow Book Sample Code To Images

Talha Mansoor — Sun, 22 Mar 2020 15:48:16 +0000

What is C# Yellow Book

Rob Miles' book, The C# Yellow Book is a beginner-friendly book to introduce students to C# and programming in general. It is short and makes a for a fun read. The book is not only free, but it also comes with code samples, that a student can use to learn and test their concepts.

Why convert code to images

I picked this book for a Coding Bootcamp that I am running in my local community. I want my students to read the code samples, run them in their Visual Studio, and explain the code line by line. It is a simple task. Unfortunately, many students take the copy-paste path to cheat through the assignment.

I have observed that learners who make it a habit of typing the examples from the books and coding samples perform better than those who just read the examples. Learning programming is like learning to swim. You cannot learn to swim by merely reading about it. Perhaps, when you are familiar with a language and have a few years of experience under your belt, you can skip over the trouble of typing the examples. But when you are new, typing and trying the example code will only help you understand it better.

So to force some of my challenging students to type, I decided to provide them with the code samples in image formats.

How to convert code to images

Carbon is easy to use, and performant website that converts your source code to beautiful photos. You can customize the programming language parser, fonts, themes, and even window type. It is a fantastic service.

There is a third-party command-line tool carbon-now-cli that lets you use the Carbon service from the comforts of your terminal.

What's the challenge

Download the code samples and archive and views its content. Notice,

It has 57 folders
Each folder contains a complete Visual Studio project
All projects are named YellowBookSamples
Project folders have a bin directory that contains the debug build of the project
Project folders also have an obj directory which holds intermediate files

I do not need to distribute the bin and obj folder. I also do not need Visual Studio projects. I expect students to create the projects themselves.

Only files that I want to loot from this sample archive is the Program.cs file present in every folder.

The objective

Write a fish shell script that will pick Program.cs file from each folder, rename it to the folder name, convert it to an image, and then place it in a new destination folder.

So if a Program.cs file is in "Code Sample 37 Simple Interface" folder. I want a Code Sample 37 Simple Interface.cs.png file.

Let's get this task done.

Get `carbon-now-cli`

Install carbon-now-cli.

yarn global add carbon-now-cli

Fish Shell script - Step by step

Unzip the archive and cd into the folder.

Run the following fish shell script.

for f in *
  echo $f
end

It shows the name of each folder.

We know each Program.cs file is present inside a folder named YellowBookSamples in each of these folders. Let's check this assumption.

for f in *
  test -f $f/YellowBookSamples/Program.cs; or echo "not found in '$f'"
end

This script tests if the file is present in the folder or not. If the file does not exist, then it prints the message "not found in <folder name>".

On running, I got

not found in 'Code Sample 57 WPF Adding Machine'

So only Project "Code Sample 57 WPF Adding Machine" is different. All other folders have file in YellowBookSamples/Program.cs. "WPF Adding Machine" is different. We will skip this WPF sample code.

We have all the information we need. Let's create a destination folder.

mkdir ../dest

Now we write a script to pick the Program.cs file and convert it to an image.

for f in *
  set code $f/YellowBookSamples/Program.cs
  test -f $code
  and begin
    mkdir ../dest/$f
    carbon-now -h -l ../dest/$f -t $f  $code
  end
end

set code $f/YellowBookSamples/Program.cs create the path of the file, like "Code Sample 46 Storing accounts in an array/YellowBookSamples/Program.cs", and assign it to the variable code
test -f $code tests if the file exists
and begin is a block of that will only run if test in the previous line returns true. You can read more about and begin in this article
mkdir ../dest/$f creates a sub-folder in the destination directory
Call carbon-now command to convert the file to an image

When I used carbon-now, it did not work unless I used it with the -h, i.e. the headless option. -l ../dest/$f is the location to save the image and -t $f is the image name.

The result is that each code sample is converted to an image and placed in its folder.

Unfortunately, carbon-now command did not work for eight projects. I had to convert them manually.

carbon-now sends the file to the Carbon via URL parameters, because as of writing this article, Carbon does not have an API. The files are probably
too long to be handled via URL.

Finally, I optimized the images using ImageOptim. I ran the following script from the dest folder.

for f in **.png
  echo $f
  open -a ImageOptim $f
  sleep 60
end

I had to add a one-minute because ImageOptim sometimes crashes if too many images are passed to it at once.

Github Repository

I have uploaded the images in this Github repository.

Create Apple And Google Sign-In Buttons - Quick And Dirty Way

Talha Mansoor — Thu, 19 Mar 2020 18:55:43 +0000

Both Apple and Google have extensive guidelines on how to use their respective logos and create sign-in buttons that use their services.

Both companies provide their logo artwork for download, in both vector and raster formats, that you can use to create these buttons.

Apple sign-in button example

Apple has a helpful article Displaying Sign in with Apple Buttons on their website. It has a sample HTML code that if you write to a file and open the file in the browser, it will show you their branded sign-in button.

<html>
  <head>
    <meta name="appleid-signin-client-id" content="[CLIENT_ID]" />
    <meta name="appleid-signin-scope" content="[SCOPES]" />
    <meta name="appleid-signin-redirect-uri" content="[REDIRECT_URI]" />
    <meta name="appleid-signin-state" content="[STATE]" />
  </head>
  <style>
    .signin-button {
      width: 210px;
      height: 40px;
    }
  </style>
  <body>
    <div
      id="appleid-signin"
      class="signin-button"
      data-color="black"
      data-border="true"
      data-type="sign in"
    ></div>
    <script
      type="text/javascript"
      src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"
    ></script>
  </body>
</html>

The appleid.auth.js script replaces the div that has the id appleid-signin with their SVG files.

Google sign-in button example

If you visit the Google documentation on Building a custom Google Sign-In button, it has a ready to use sign-in button example, which complies with their guidelines.

The quick and dirty way to create sign-in buttons

If I were working on a serious project, I would have used their SVG logos and created reusable button components using React. Though, it will be arduous to ensure the buttons match their policies. I am sure a designer worth their salt would not see it as a challenge. But I am no designer.

I needed “Sign in with Google” and “Sign in with Apple” buttons for a temporary project. So I decided to phone it in.

I would customize the size and some minor attributes of the example buttons on their website using the browser’s “Inspector” tool and then take screenshots of them. I will use those images in my project.

I could have used the scripts they provide to load the buttons from their servers, but my project was going to run in an offline environment.

The button size I require is 210x50 with no rounded corners.

Makeshift Google sign-in button

I opened the Google documentation that has the example button in the Firefox Developer Edition browser. Why Firefox Developer Edition? I will get to that, but it is essential to have Firefox Developer Edition.

I right-clicked and examined the button. It is almost the same size that I require.

Inspect and edit the HTML of the Google sign-in button

I only had to

Disable box-shadow in CSS
Set border-radius to 0
Set the width to 210px from 240px

Luckily, the width change is only minor; otherwise, the button and logo would get out of proportion.

I right-clicked the node and chose “Screenshot Node” option. This feature is why I used Firefox Developer Edition. It is one of the many features that make Firefox Developer Edition more effective than Chrome for web developers.

Screenshot Node option in Firefox Developer

Makeshift Apple sign-in button

Apple sign-in button required a little extra work because they do not have any HTML button on their documentation site. Their documentation uses images of buttons to explain their guidelines.

No big deal. Remember the HTML code I mentioned earlier? I modified it a little so that the button has a white background. You can see and run the code yourself here.

This button has rounded corners. On examining the rendered HTML in the browser inspector, I noticed it uses SVG for the border.

Removing ry attribute from the SVG removed the rounded corners.

<rect width="100%" height="100%" ry="15%" fill="#fff" stroke="black" stroke-width="1" stroke-linecap="round"></rect>

I adjusted the height of the root div from 40px to 50px. Width was already 210px. Then I right clicked on the root div and selected the “Screenshot Node” option.

The resulting image had white borders outside the black outline of the button. I am not sure what the reason is.

It’s a quick and dirty hack. So I didn’t investigate it further. Instead, I set the background-color of the body to black using Firefox’s CSS editor.

Now when I took the screenshot of the node, the result did not have the white border.

Adjust the image size

Now I examined the image sizes using the good, old, trusty ImageMagick.

$ identify apple.png
apple.png PNG 1260x300 1260x300+0+0 8-bit sRGB 22512B 0.000u 0:00.000
$ identify google.png
google.png PNG 420x100 420x100+0+0 8-bit sRGB 5914B 0.000u 0:00.000

Focus on the part that comes after PNG. That’s the dimension.

You see that google.png dimension is 420x100. But in the browser, I set it to 210x50. What happened? Retina display happened. My machine has a retina display because of which this image is 2x its set size.

Apple button size is enormous. I have to cut it down.

convert apple.png -resize x100 apple-h100.png

-resize tells ImageMagick to resize the input image.

x100 means set the height to 100, and adjust the width to keep the perspective.

Let’s check the dimensions of the result.

$ identify apple-h100.png
apple-h100.png PNG 420x100 420x100+0+0 8-bit Gray 256c 4725B 0.000u 0:00.000

So now I have a Google sign-in button image, and an Apple sign-in button image, in my required dimensions, which 100% conforms to the official guidelines.

I ran both the images through ImageOptim to reduce their sizes, which decreased their sizes to 4kb each.

Conclusion

Honestly, it took me more time to write this article than it took me to get the image buttons.

But should you use this “technique” in the production?

Although each image has a minuscule size of 4kb each, your web page will still have to make additional two requests to the server to fetch them. Usually, we want to minimize the number of requests to the server to improve the page’s performance. Therefore, I would not advise using it in production.

Then again, it is possible to use loader like this to convert your image to base64 encoded strings automatically and inline them. If your build pipeline supports such loader, then you can use the images without worrying about the additional requests. But if you use the loader for too many images, then your page size will get hefty.

So choose wisely!

Cover Image Attribution: James Sutton

Fix Gmail Spoof Warning From Mailchimp

Talha Mansoor — Wed, 18 Mar 2020 14:00:46 +0000

I set up Mailchimp to send latest release notification to Pelican - Elegant theme users. Setting up the newsletter was easy, thanks to the Mailchimp’s easy to follow UI and beginner-friendly walkthroughs.

When the first newsletter went out, I received the email too. To my surprise, Gmail placed a banner on top of the email.

Gmail Spoof Warning

It reads,

Be careful with this message

This may be a spoofed message. The message claims to have been sent from your account, but Gmail couldn’t verify the actual source. Avoid clicking links or replying with sensitive information, unless you are sure you actually sent this message. (No need to reset your password, the real sender does not actually have access to your account!)

After a little digging, I discovered that Mailchimp recommends verifying your email domain. But I use Gmail, which I cannot verify as my email domain. These free email providers have certain limitations, which in turns, causes the spoof warning.

Luckily I own the domain onCrashReboot. I use Netlify to do DNS management for my domain.

What I need is to set up email forwarding on oncrashreboot.com domain to my Gmail address, or set up an email hosting service on the domain. Then create an email address like elegant@oncrashreboot.com. Then I need to verify the new email address with Mailchimp.

Zoho Mail offers a free plan for email hosting. But using it would mean I have to check Zoho mail for emails that I receive on the elegant@oncrashreboot.com address, besides my primary email address. Or setup email forwarding from Zoho to Gmail, and configure Zoho mail to send emails from Gmail account. It seemed like to much work, also I am not sure how reliable this setup would be.

There is another service ImprovMX that specializes in setting up email forwarding, quickly and painlessly. It has a guide to setup free email forwarding with Netlify.

Tip

After using ImprovMX, I must say it is one of the simplest and easiest web services to use. Kudos to their team. I highly recommend them.

Configure your DNS to use ImprovMX

Log into DNS management service, in my case, Netlify, and following records.

Record Type	Name	Priority	Value
MX	@	10	`mx1.improvmx.com`
MX	@	20	`mx2.improvmx.com`
TXT	@		`v=spf1 include:spf.improvmx.com ~all`

Create ImprovMX account

Got to ImprovMX, and enter your domain name and email address, in my case, my Gmail address.

Next login to ImprovMX, and click on “Prefer to connect using your domain’s DNS entry?”. Provide your domain and the email address.

ImprovMX Account Registration Form

Create your email alias

Create an email alias for your domain like elegant@oncrashreboot.com.

Verify domain in Mailchimp

Verify Domain Button

Click on “Verify Domain” button. Enter the email address alias you created in ImprovMX, in my case elegant@oncrashreboot.com.

Mailchimp will send a verification code to your email alias, which then ImprovMX will forward to your email account.

Enter the verification code in the Mailchimp form and complete the process.

Update your Mailchimp campaigns

Got to your campaigns and click “Pause & Edit Campaign” on one of your campaigns. Go to “Setup” step, and edit “From email address” field.

Set to the alias you just verified.

Save and exit the form. Reactivate your campaign.

Repeat this process for all your campaigns, that have spoof email warning issue.

These steps should fix the Gmail spoof warning.

Send emails from Gmail using the alias

This step is optional. It lets you send email from your Gmail account. The recipient will see that the email is from your alias email address, like elegant@oncrashreboot.com

ImprovMX has a helpful guide on this issue.

When To Use useState vs useReducer Hook In React

Talha Mansoor — Tue, 17 Mar 2020 17:04:10 +0000

Release 16.8.0 of React introduced a groundbreaking feature, hooks. It will not be an exaggeration to say that this single feature changed the React landscape completely. Not only did it disuse class components, but it also reduced the necessity of using a store management library like MobX and Redux. I, for one, stopped using Redux-Forms, and migrated the forms in my projects to hooks.

useState is a hook that lets you have a state in a classless or functional component. Previously, if your component needed state, you had to use a class for it.

There is another hook, useReducer. The documentation states,

(It’s) an alternative to useState.

The question is when is using useReducer more suitable than useState hook?

Here, I will create a simple React application, first using useState. Then I will create the same application using useReducer hook. The differences and advantages fall into place when you can compare the code side by side.

I will use TypeScript. I expect the reader is familiar with TypeScript and primary hook usage.

What’s the application objective?

It is a simple application to fetch user information from Reqres API server.

End-user will enter a number into a text field
On clicking the fetch button, the application will fetch the info and display the result
In case of error, show the error message
Also, we do not want the end-user to click the fetch button multiple times while the application is fetching information

Let’s start the development

Create a boilerplate repository using Create React App.

yarn create react-app my-app --template typescript

Then edit src/App.tsx file.

const App = () => {
  return (
    <div className="App">
      <form noValidate autoComplete="off">
        <label>
          Enter User ID (1-12)
          <input type="text" id="userId" name="userId" required />
        </label>
        <input type="submit" value="Fetch" />

        <label className="status">
          Fetching data. Please wait (max wait: 5 seconds)...
        </label>
        <label className="error">"errorMessage"</label>
      </form>

      <div className="result">
        <h2>Result</h2>
        <pre>
          <code>"result"</code>
        </pre>
      </div>
    </div>
  );
};

It is a simple form with a text field, a submit button, and a pre to show the result. We also have to two labels, one to show the error message and one to show the “Please wait” message.

`useState` for state management

Now, we are going to use useState hook, for adding the required features.

Control input field

Update the input field when a user types in it and store the value.

const [userIdValue, setUserIdValue] = React.useState("1");

const onValueChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
  setUserIdValue(event.target.value);
};

// ... Some other code

<input
  type="text"
  id="userId"
  name="userId"
  required
  onChange={onValueChanged}
  value={userIdValue}
/>;

Submit button click handler

Next, add a handler for the button, so that we can know user has clicked it.

const onFetchClicked = (
  event: React.MouseEvent<HTMLInputElement, MouseEvent>
) => {
  event.preventDefault();
  // fetchUserInfo();  // We will add its definition later
};

// ... Some other code

<input type="submit" value="Fetch" onClick={onFetchClicked} />;

Disable button until fetch request is not complete

We do not want the user to click the button in rapid succession. It will overload the server, and in almost in all cases, results in bad user experience.

We add a state isFetching. As long as it is true, the button will stay disabled.

const [isFetching, setIsFetching] = React.useState(false);

// Disable the text field
<input
  ...
  disabled={isFetching}
/>

// Disable the button
<input
  type="submit"
  ...
  disabled={isFetching}
/>

Show wait message

Good manners and good user experience dictates us to tell the user, “please hold on”. Otherwise, our user will get confused, “why the button is not working? Did I break something?”

For this task, we already have a label. We only need to show when the application is fetching.

{
  isFetching && (
    <label className="status">
      Fetching data. Please wait (max wait: 5 seconds)...
    </label>
  );
}

Notice, so far we have not used setIsFetching method. We will get to it.

Show Result

To show the result, we will request the server. This request can complete successfully, or it can fail. It does not make sense to show the result when the request has failed. We will hide the result section unless the request has completed successfully.

In other words, show the result, but only when the request was successful.

const [result, setResult] = React.useState("");
const [isSuccessful, setIsSuccessful] = React.useState(false);

...

{isSuccessful && (
  <div className="result">
    <h2>Result</h2>

    <pre>
      <code>{result}</code>
    </pre>
  </div>
)}

Show error

If a request fails, we should show message to the user. A request can fail for a number of reasons, server was busy, connection to the server failed, or our user entered an incorrect userId.

We display an error message, but only when the request fails.

const [errorMessage, setErrorMessage] = React.useState("");

...

{!isSuccessful && errorMessage.length > 0 && (
  <label className="error">{errorMessage}</label>
)}

Fetch User Info

Now we get to the core of the application, fetch user info and set result or error message.

I am going to use fetch API and Promises.

const fetchUserInfo = () => {
  fetch(`https://reqres.in/api/users/${userIdValue}?delay=5`)
    .then(response =>
      response.status === 200
        ? Promise.resolve(response.json())
        : Promise.reject(response.status)
    )
    .then(data => {
      setIsSuccessful(true);
      setResult(JSON.stringify(data, undefined, 2));
    })
    .catch(err => {
      setIsSuccessful(false);
      setErrorMessage(`Request failed. Error: ${err}`);
    })
    .then(() => {
      setIsFetching(false);
    });
};

If the request is successful, we set isSuccessful to true. Then we set the result. I have used JSON.stringify() to convert the JSON response to string and to prettify it.

If the request fails, we set isSuccessful to false and set an error message.

Finally, we set isFetching to false. Right? Because fetching has completed. This part of the code is executed whether request succeeds or fails.

We missed one thing. We didn’t actually call the fetchUserInfo() method. Yet! We call it in the onFetchClicked().

const onFetchClicked = (
  event: React.MouseEvent<HTMLInputElement, MouseEvent>
) => {
  event.preventDefault();
  setErrorMessage("");
  setIsSuccessful(false);
  setIsFetching(true);
  fetchUserInfo();
};

Before calling fetchUserInfo(), we make sure we reset the values of errorMessage and isSuccessful. We also set isFetching to true.

Let’s run the code

I have created a repository of this code.

https://github.com/talha131/onCrashReboot-react-state-hook-example

Let’s run the code using CodeSandbox. Try entering some number or a string and see the result.

Let’s review the code

We used useState hook for the application. We ended up having five state variables in our component.

Statements to set the states are strewn around the code. For example, we call setIsSuccessful in three different places. setIsFetching is called at two places.

If we were coding a real-world application, then this pattern would have become a severe problem. Maintaining such a code becomes a nightmare. You have to invest significant time to understand where and why a state is set or modified.

Another thing to note is that we had to set some states successively, for example in onFetchClicked.

setErrorMessage("");
setIsSuccessful(false);
setIsFetching(true);

Is the order of these statements relevant? What happens if we set one state, but not the other two? In this code, these questions are not significant. But in any real application, this will pose a problem, and code maintenance would become a challenge.

Overall, this code is difficult to understand, follow, and maintain. You may disagree, but that is because it is a small and straightforward application. In any application of moderate size, it is essential to have readable and easy to follow code, which does not require a considerable resource investment to maintain.

`useReducer` for state management

Now we are going to create the same application using useReducer hook.

Define component actions

Our component can have four possible actions.

User is typing in the input field
Fetching response from the server
Fetch response succeeds
Fetch response fails

We can define these actions in this way:

type Action =
  | { type: "typing"; value: string }
  | { type: "fetching" }
  | { type: "success"; payload: string }
  | { type: "error"; code: string };

The value in typing action will contain the string user has typed into the input field.

payload is the result of the response request, which we will get when the request succeeds.

code will contain the error code, which we will get when the request fails.

Define component state

Remember, we had to define five state hooks in the useState example? Here too, we need five state fields.

Let’s define an interface and then the initial values of the state.

interface State {
  isFetching: boolean;
  isSuccessful: boolean;
  errorMessage: string;
  result: string;
  userIdValue: string;
}

const initialState: State = {
  isFetching: false,
  isSuccessful: false,
  errorMessage: "",
  result: "",
  userIdValue: "1"
};

Define the reducer

Reducer is the nexus where action and state meet. It is a function that gets the current state and current action in its argument. It then updates the state and returns the result.

const appReducer = (state: State, action: Action) => {
  switch (action.type) {
    case "fetching":
      return {
        ...state,
        isFetching: true,
        isSuccessful: false,
        errorMessage: "",
        result: ""
      };

    case "typing":
      return { ...state, userIdValue: action.value };

    case "success":
      return {
        ...state,
        isFetching: false,
        isSuccessful: true,
        result: action.payload
      };

    case "error":
      return {
        ...state,
        isFetching: false,
        errorMessage: `Request failed. Error: ${action.code}`
      };
  }
};

When the component is performing fetching, we set isFetching to true and other state fields.

When the user is typing, then we only need to update the userIdValue.

We set state, in a similar fashion, when success and error action is dispatched.

Create instances of state fields and dispatch

Inside the App component, we create instances of the state fields and dispatch method.

const App = () => {
  const [
    { isSuccessful, isFetching, userIdValue, errorMessage, result },
    dispatch
  ] = React.useReducer(appReducer, initialState);
...

`dispatch` actions

We have to update our fetchUserInfo and other methods to dispatch appropriate actions.

const fetchUserInfo = () => {
  fetch(`https://reqres.in/api/users/${userIdValue}?delay=5`)
    .then(response =>
      response.status === 200
        ? Promise.resolve(response.json())
        : Promise.reject(response.status)
    )
    .then(data => {
      dispatch({
        type: "success",
        payload: JSON.stringify(data, undefined, 2)
      });
    })
    .catch(err => {
      dispatch({ type: "error", code: err });
    });
};

const onValueChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
  dispatch({ type: "typing", value: event.target.value });
};

const onFetchClicked = (
  event: React.MouseEvent<HTMLInputElement, MouseEvent>
) => {
  event.preventDefault();
  dispatch({ type: "fetching" });
  fetchUserInfo();
};

Use state fields

This part of the code is not different from the code we wrote in useState example.

return (
  <div className="App">
    <form noValidate autoComplete="off">
      <label>
        Enter User ID (1-12)
        <input
          type="text"
          id="userId"
          name="userId"
          required
          onChange={onValueChanged}
          value={userIdValue}
          disabled={isFetching}
        />
      </label>
      <input
        type="submit"
        value="Fetch"
        onClick={onFetchClicked}
        disabled={isFetching}
      />
      {isFetching && (
        <label className="status">
          Fetching data. Please wait (max wait: 5 seconds)...
        </label>
      )}
      {!isSuccessful && errorMessage.length > 0 && (
        <label className="error">{errorMessage}</label>
      )}
    </form>
    {isSuccessful && (
      <div className="result">
        <h2>Result</h2>

        <pre>
          <code>{result}</code>
        </pre>
      </div>
    )}
  </div>
);

Let’s run the code

I have create a repository of this code.

https://github.com/talha131/onCrashReboot-react-reducer-hook-example

Let’s run the code using CodeSandbox. Try entering some number or a string and see the result.

Moment of truth

At last, we are prepared to compare useState code alongside useReducer code.

See the definition of onFetchClicked method in both the projects.

// using useState()
setErrorMessage("");
setIsSuccessful(false);
setIsFetching(true);

// using useReducer
dispatch({ type: "fetching" });

Notice how three lines have been reduced to just one.

See the code that is called when request failed.

// using useState()
setIsSuccessful(false);
setErrorMessage(`Request failed. Error: ${err}`);

// using useReducer()
dispatch({ type: "error", code: err });

We reduced two lines of code to one.

Also note, that in useReducer we do not have to add a then after the last catch in fetchUserInfo method.

When you study both the codes, you notice certain things.

useReducer code is easier to understand. The component state is modified in only one place, i.e. the reducer method. You can see the list of actions and understand what kind of state changes this component supports. dispatch simplifies our state modification code. Instead of several setState methods, you only need to call one dispatch.

But all these benefits come at a cost. useReducer code is verbose. It requires you to define actions and state, whereas useState does not have this wordiness problem. Verbosity is the reason which made a lot of people prefer MobX over Redux, so we cannot disregard it altogether. A verbose design requires more time and effort.

Another concern is that useReducer has a steep learning curve. Unless you have prior experience, it is challenging to understand the concepts behind reducer and actions.

Conclusion

`useState`

useState is easier to start with and requires less boilerplate code
Using useState in a component of even moderate functionality results in a less understandable code

Consequently, useState is better suited for components which have only one or two states

`useReducer`

useReducer is difficult to understand for beginners
It compels you to write more code
It drives you to think your design through
The result is a code which is easier to understand, read, and maintain

Therefore, use useReducer when your component has non-trivial state transitions or business logic, or you are creating a medium-sized application which you plan to maintain for a considerable period.

Use Exit Status of A Command in A Fish Shell Function

Talha Mansoor — Mon, 16 Mar 2020 00:00:00 +0000

Fish shell is a user-friendly and a feature-rich alternative to the Bash shell. Think Zsh, but with saner and user-friendly defaults. Fish shell "just works", requiring minimal customizations. You do not have to waste time scouring the internet for tutorials and example config files.

When writing scripts, a lot of time you run into cases where you have to get the exit status of the last command executed. In this article, I detail all the ways you can use to the exit status of a command.

In the following examples, I am going to use rg, i.e. ripgrep. It’s a modern and faster equivalent of the traditional grep and ack commands. rg also has a sane default configuration that does not require you to enable command switches to do mundane tasks like searching recursively or respecting .gitignore rules.

`$status` variable

Fish Shell stores the exit status of the last command in the $status variable.

➤ true
➤ echo $status
0
➤ false
➤ echo $status
1
➤ blahblah
fish: Unknown command blahblah
➤ echo $status
127

Use it with if and test in your scripts.

function example -d 'Example Fish function'
    rg $argv[1] > /dev/null
    if test $status -eq 0
        echo "$argv[1] found"
    else
        echo "$argv[1] not found"
    end
end

Notice how I used test to check the value of $status variable.

You can read more about $status variable in fish documentation.

Use `and`, `or` Combiners

Fish also supports and and or.

and runs the command if the last command execution was successful.
or runs the command if the previous command execution failed.

➤ rg "blahblah" > /dev/null; and echo "found"; or echo "not found"

We can use newlines instead of ;. Use Alt (⌥Option key on macOS) and ⌤Enter key to insert newlines.

➤ rg "blahblah" > /dev/null
   and echo found
   or echo not found

You can read more about and, or combiners in fish shell documentation.

Use `and`, `or` Combiners with `begin`

We can do complex operations like running more than one command using begin with the combiners.

function example -d 'Example Fish function'
    rg $argv[1] > /dev/null
    and begin
        echo "$argv[1] found"
    end
    or begin
        echo "$argv[1] not found"
    end
end

Between begin and end you can write more commands or even more conditions.

You can read more about begin here.

Use `if`

You do not have to use the $status variable and test command. You can use if directly.

function example -d 'Example Fish function'
    if rg $argv[1] > /dev/null
        echo "$argv[1] found"
    else
        echo "$argv[1] not found"
    end
end

Store output of a command in a variable and `test` it

Sometimes reading the exit status of a command is not enough. Take git cherry, for example. This command returns the unpushed git commits.

Whether it finds unpushed git commits push or not, it always exits successfully.

Consider the following script,

➤ git cherry
   and echo commits found
   or echo commits not found

I run it in a repository whose HEAD is one commit ahead of the upstream. The output I get is

+ 12dc1f697b714336b118f1361fa49a4ef71c44b7commits found

Then I run it in a repository whose HEAD is in sync with the upstream. The output is,

commits found

Even though git cherry couldn’t find any unpushed git commits. I cannot employ previously suggested methods that rely on the exit status of the command.

In this case, we have to test the output of the command.

Test Output As String

Consider the following script,

function example -d 'Example Fish function'
    if test -n "(git cherry)"
        echo commits found
    else
        echo commits not found
    end
end

Do you notice the quotes around (git cherry)? It is crucial.

See, git cherry can return more than one line in the output. With quotes, the Fish shell treats the command output as one argument, even if it has newlines.

If we remove the quotes, then if newlines are present, the output becomes a list or an array.

test -n returns true if the length of the string is non-zero.

You can read about test command here.

Count Number Of Lines In Output

It is not necessary to use quotes. We can refactor the above script to handle arrays and then count the number of indices in the array.

function example -d 'Example Fish function'
    if test (count (git cherry)) -ne 0
        echo commits found
    else
        echo commits not found
    end
end

count command returns the number of elements in the list. So with count (git cherry), we read the number of lines returned and compare it to 0.

test -ne returns true if the first number is not equal to the second number.

count documentation is available here.

Example

You can see the above discussion in action in a script that I wrote to periodically push out git commits to the upstream, every 10 seconds.

Source Code of tm_git_push script

Cover image attribution: David Clode

How To Create pre-commit Hooks For Git

Talha Mansoor — Sat, 14 Mar 2020 13:56:48 +0000

Git has a robust system of hooks. Hooks are some scripts that fire off when specific actions occur. For example, you may want to make sure your code builds successfully before pushing it to the upstream. You can use Git hooks to define a script that builds your code when you issue git push command. Then, Git pushes the code only when the script runs successfully. If there is a build error, the push will not happen.

Most Git hooks are local to your repository, called client-side hooks.

It’s important to note that client-side hooks are not copied when you clone a repository.

It means if you add a hook to your repository, your coworker working on a fork of the repository, does not have access to your hooks. It makes it challenging to share your hooks with others. Even if you email the script to your coworker, how do you update his copy of the script when you make a change in your copy?

Pre-commit is a beautiful tool that makes syncing and updating the hooks a breeze. You can see its documentation to see how to set it up.

Here, I explain the process of creating a Git hook that can be used with pre-commit.

Create a test repository

We will use this repository to test the hook.

$ mkdir "test-my-hook"
$ cd "test-my-hook/"
$ git init
Initialized empty Git repository in /Users/talha/Repos/temp/test-my-hook/.git/```
{% endraw %}


## Enable pre-commit in test repository[](#enable-pre-commit-in-test-repository "Permanent link")

Create a file {% raw %}`.pre-commit-config.yaml`{% endraw %} in the root of the repository.
{% raw %}


```shell
$ pre-commit sample-config > .pre-commit-config.yaml
$ git add .pre-commit-config.yaml
$ git commit -m "add pre-commit configuration"

Add a test file in test repository

Add a file on which we want pre-commit to run the hook.

$ echo "some random text" > example.text
$ git add example.text

Notice, I have staged the file example.text but I have not committed it.

Now that we have a repository ready to run our test hook, let’s move to the next step: creating a pre-commit hook.

Create a hook repository

Create a new repository, outside “test-my-hook” directory, where you will define your pre-commit hook.

$ cd ..
$ mkdir pre-commit-test-hook
$ cd pre-commit-test-hook/
$ git init
Initialized empty Git repository in /Users/talha/Repos/temp/pre-commit-test-hook/.git/

Create pre-commit hook configuration

From the documentation, we know a hook repository must contain a .pre-commit-hooks.yaml file. Let’s create it.

$ touch .pre-commit-hooks.yaml

Now edit the content of this file,

- id: "test-hook"
  name: "Test Hook"
  entry: run-test-hook.sh
  types: [text]
  exclude: ".yaml$|.yml$"
  language: "script"
  description: "This is an example hook to demonstrate how to create a pre-commit hook"
  args: [--example1, --example2]

id is the id of the hook. Users of your hook refer to your hook using this ID.
entry is the name of the executable file that pre-commit runs. Think of it as the main() of a C program.
types are the types of file on which this hook runs. You can also use files.
exclude is a Python regular expression to exclude specific files. In this case, it tells pre-commit to not run the hook on files that have .yaml or .yml extension.
language tells pre-commit how to install the hook. If you use 'script', it means your hook is a Bash script.
args this is optional. It is used to pass arguments to your script. You can define it or leave it for your users to define it in their configuration. Of course, if your script does not accept any argument, then args is redundant. Here we pass two arguments, --example, and example2.

You can use other languages like Python, to create your hook. But in that case, you must provide installation instructions so that pre-commit can install the hook. For example, in the case of Python, you need setup.py.

A Bash script does not require any installation or extra tools. Bash is ubiquitously present wherever Git is, which is why Bash is preferred to write the hooks.

Create the Hook Script

Now we are going to add some code to the run-test-hook.sh file.

#!/usr/bin/env bash

echo "The hook is running"
echo "$@"

Commit your additions.

$ git add .pre-commit-hooks.yaml run-test-hook.sh
$ git commit -m "add an example hook"

Test your hook

Luckily, you do not have to publish your hook first to test it. You can use pre-commit to run this hook locally.

Go to the test repository we created to test the hook.

$ cd "test-my-hook"

Run the following command in it,

pre-commit try-repo ../pre-commit-test-hook/ test-hook --all-files --verbose

pre-commit try-repo is the command and the switch.
../pre-commit-test-hook is the path to your pre-commit-test-hook repository on your file system. This path depends on where you have created these repositories.
test-hook is the ID of the hook. Remember it?
--all-files runs the hook on all the supported files.
--verbose is important for debugging. It displays the output of the echo statements in the Bash script.

The output of the hook

When you run the hook, with the verbose option, you should see the following output besides a bunch of other pre-commit logs.

The hook is running--example1 --example2 example.text

Remember the --example1 and --example2 arguments that we mentioned earlier?

Pre-commit passes those arguments first and then the list of files on which the hook could run to our script.

Notice, it does not pass .pre-commit-config.yaml file although it is a text file and present in the repository. It is because we have excluded all files ending in .yaml or .yml from the hook.

What’s next?

Now that you have the hook running, you can modify your copy of run-test-hook.sh. You can use a Bash script to parse the switches and arguments, using getopts for example.

Then you can use Bash and other command-line utilities to modify the files.

When your hook is ready, you can push it Github so that others can use it.

TekWizely/pre-commit-golang has some brilliants scripts that you can use to learn and improve your hooks. I have created a simple hook for my Go projects, which you can see here, talha131/pre-commit-golang.

DEV Community: Talha Mansoor

Sign In With Apple – You Should Know

Offering "Sign in with Apple" is obligatory

Apple Developer Program membership is required

You cannot use localhost for redirect URL

Use "Sign in with Apple JS framework" to save time

Use JS for ready-made branded button

Use Apple web service for ready-made branded button

Apple sends authorization result via HTTP POST

Alternative to sign in with Apple JS framework

Apple sends user information only once

Use sub claim for user identification

email_verified claim is a string value

Register your email domain

Helpful sites

Iterate Over An Array And Remove Elements

What went wrong?

Solution 1 — Decrement index

Solution 2 — Iterate in Reverse

Is this problem specific to some languages?

Best Solution

JavaScript

Python

C#

C++

How To Add An Empty Directory To A Git Repository — Two Different Use Cases

Add a directory but ignore its contents

Add an empty directory and track its future contents

Use sed To Extract Filename, Extension, and Directory From Path

sed Expression

Extract Directory From Path

Extract Filename From Path

Extract File Extension From Path

What Is Matched

What Is Captured

Replace Pattern

Example Output

sed for macOS user

Further Readings

Conditional Spread Syntax In JavaScript

Conditionally expand an object

Explanation

Conditionally expand a string to an object

Explanation

Conditionally expand an array

Explanation

Conditionally expand a string to an array

Explanation

Warp Up

Build Your Own Hook To Access RESTful API

What is a hook

Create your own hook

A hook that takes an argument

A hook that uses other hooks

Use a custom hook to make GET requests

useGetInformation definition

Example usage of useGetInformation

Wrapping up

How I Converted C# Yellow Book Sample Code To Images

What is C# Yellow Book

Why convert code to images

How to convert code to images

What's the challenge

The objective

Get carbon-now-cli

Fish Shell script - Step by step

Github Repository

Create Apple And Google Sign-In Buttons - Quick And Dirty Way

Apple sign-in button example

Google sign-in button example

The quick and dirty way to create sign-in buttons

Makeshift Google sign-in button

Makeshift Apple sign-in button

Adjust the image size

Conclusion

Fix Gmail Spoof Warning From Mailchimp

Configure your DNS to use ImprovMX

Create ImprovMX account

Create your email alias

Verify domain in Mailchimp

You cannot use `localhost` for redirect URL

Use `sub` claim for user identification

`email_verified` claim is a string value

Use a custom hook to make `GET` requests

`useGetInformation` definition

Example usage of `useGetInformation`

Get `carbon-now-cli`

`useState` for state management

`useReducer` for state management

`dispatch` actions

`useState`

`useReducer`

`$status` variable

Use `and`, `or` Combiners

Use `and`, `or` Combiners with `begin`

Use `if`

Store output of a command in a variable and `test` it