Why Versioning?

• Consistent: Versioning gives developers the ability to continuously work on the API without breaking or changing its delivered functionality by creating a separate version. For example, for a simple API /getreport, it would be benificial to have two endpoints: api.example.com/prod/getreport and api.example.com/dev/getreport. Which prod is the production stable release which should always be up and working, while developers will use dev version to develop and test new features.
• Backup/Rollback: Although the latest stable version should always be up and working, however sometimes it does break unexpectedly. With the power of versioning, when this happens, the API is always able to rollback to its previous stable version to get everything back online again.

Create API Versioning

If you exposed a lambda function as an API in API Gateway, creating versioning of it requires 2 steps:

• Create aliases on the lambda function for different version
• Deploy the lambda function aliases to different API stages

Create aliases for Lambda Function

In AWS Console, open Lambda Management Console, in the top menu, click Actions > Publish new version.

In the pop-up dialog, fill in the version description, this can be anything (like v0.1, dev, stable, etc.).
Click "Finish", then you should see the new published version under Qualifiers > Versions.

Note that under "Versions" tab, you will see there are two available version:

• The version you just published (which is version 1)
• $LATEST

The version $LATEST points to the latest changes of the lambda function, every time we modify the function, $LATEST will save that change.

The version we published earlier keeps the change at the time we published it, once the version has been published, it is not modifiable, but it can be deleted.

Once the new version has been published, create an alias called "prod" for version 1 (which is the most recent stable release by far) by clicking Actions > Create alias.

Fill in the name, description, and version number (which is 1 in our case) in the dialog.

Repeat this for another alias called dev (which is the latest development version that will be worked on and not stable).

Once done, now we should have two alias for our lambda function: prod and dev, pointing to the version 1 and version $LATEST, respectively.

Deploy a multi-stage API via API Gateway

Since we already have multiple versions of the lambda function, the next step is to add additional stages to the API.
Let's take the previous example /getreport, in this case, the API should have two stages:

• Development stage (endpoint: <API_URI>/dev/getreport)
• Production stage (endpoint: <API_URI>/prod/getreport)

Go to API Gateway console, and click the API we want to modify (/getreport), then go to Resources Tab.

Under Resources, click Actions > Deploy API to deploy the production stage of the API /getreport:

Do the same thing to deploy the development version.

After that, go to Stages tab, click on prod stage, add a stage variable under Stage Variables tab with following value:

{
    Name: lambdaAlias,
    Value: stable
}

Create a stage variable for dev stage as well:

{
    Name: lambdaAlias,
    Value: dev
}

The name and value for stage variables can be anything, but the name for two stages should be consistent, if the name is lambdaAlias in stage prod, in stage dev the variable name should be lambdaAlias as well.

Then, click the method we want to add the versioning, on the right panel, click Integration Request.

In the right panel, configure the lambda function as

<lambda>:${stageVariable.lambdaAlias}

Replace <lambda> with the lambda function we configured the versioning before.

Click the checkmark, then add the appropriate permission using AWSCLI for the Lambda Function by copying the command in the pop-up dialog.
The command should be something looks like the following:

aws lambda add-permission
    --function-name "arn:aws:lambda:<AWS_REGION>:<ARN_NUMBER>:function:<lambda>:${stageVariables.lambdaAlias}"
    --source-arn "arn:aws:execute-api:<AWS_REGION>:<ARN_NUMBER>:<ENDPOINT>"
    --principal apigateway.amazonaws.com
    --statement-id 5cce4d58-29eb-4e72-88b2-72df38c38f0f
    --action lambda:InvokeFunction

Run the command twice, replace ${stageVariables.lambdaAlias} with each lambdaAlias stage variable that created earlier (stable and dev).

When done, the API /getreport should have two endpoint available:

• <API_URI>/prod/getreport: The production stage, this should always be up and stable.
• <API_URI>/dev/getreport: Developers can use this endpoint for development and testing.

Creating versioning for API is important, especially for large-scaled applications, in the future there might be more versions rather than just two, and it is always welcome to reference this article as a guide to publish additional version of Lambda Function and APIs.

Semantic UI a powerful UI framework for front-end development, and few years ago it launched a React integration: Semantic UI React. However it does not have any instructions for installing on apps bootstrapped with create-react-app. This blog will be a very short one -- it includes the recipe I used while installing the full Semantic UI package on my create-react-app project, and the problems I was running into.

Install React package

Before we move on, make sure you have the React package for Semantic UI:

• Install via yarn:

> yarn add semantic-ui-react

• Install via npm:

> npm install semantic-ui-react

Install UI Package

After that, we can start installing Semantic UI, you can either install the full Semantic UI package (which is what we are going to cover here), or just have the CSS package if you don't want custom theming support.

Issues on the official documentation:

The official documentation recommends to use yarn to install the package:

> yarn add semantic-ui --dev

However it will freeze at the first step of installing, it has been an known issue for a while.

To install, we have two methods, each one is relatively short and simple.

Method 1: Via npm

Instead of using yarn, we can use npm to install:

> npm install semantic-ui --saveDev

Method 2: Via yarn

If you think npm is too slow and insist to use yarn...okay I understand, but do this instead (thanks to @Ahmad-Maged's solution on this issue):

> yarn add semantic-ui --ignore-scripts
> cd ./node_modules/semantic-ui/
> gulp install

For both methods, choose the desired installation method as you wish when prompted (I choose "Automatic" for the sake of simplicity).
For the installation path, Semantic UI needs to be installed inside the /src since your create-react-app instance will not have permission to navigate outside of it. Make sure you put the absolute path here (for example: C:/my-react-app/src if /my-react-app is your project root folder).

After the installation is complete, the UI package will be installed at ../project-folder/src/semantic.
Move the file semantic.json to folder /semantic, and edit it:

{
-   "base": "semantic\\",
+   "base": "/",
    "paths": {
    "source": {
      ...
    },
    ...
}

Build Semantic Library

> cd /project-folder/src/semantic`
> gulp build

Then, every time before making changes to the theme:

> gulp watch

Make sure everything works

To make Semantic UI works, add the minified CSS to src/index.js:

import './semantic/dist/semantic.min.css';

To test if the installation is successful, simply add some components from Semantic UI to your site, for example, we can add a button on the top of our App.js:

import React, { Component } from 'react';
import { Button } from 'semantic-ui-react'
...
class App extends Component {
  render() {
    return (
      <div className="App">
        <Button>Test</Button>
        <header className="App-header">
          ...
        </header>
      </div>
    );
  }
}

export default App;

If the button shows up on top, cheers! You have succesfully added Semantic UI to your app!

Getting Stuck? No Luck?

Make a comment below! Make sure to describle the problems as detailed as possible so I can take a look what's wrong!

I believe at lease some of you have met this situation (or similar) while developing your own games in Unity: There is a GameManager.cs script attached to a gameObject(probably named as "GameManager" as well):

 public class GameManager : MonoBehaviour {
     
     private const float StartingTime = 60f;
     private int _time;
     ...
     // some other variables and methods
     ...
     
     public void RoundRestart() {
         _time = StartingTime;
         ResetSpawnPoint();
     }
}

And you need to get it in an another script (Player.cs, for example):

 public class Player : MonoBehaviour {
     
     private float _health = 100f;
     ...
     // some other variables and methods
     ...
     
     private void Update() {
         if (health <= 0f) {
             // RoundRestart() <- NEED TO CALL THIS METHOD IN GameManager
         }
     }
}

How to do that? Some of you might tried to create an GameManager variable in the Player.cs, find the GameManager and assign to it:

GameManager _gm = GameObject.FindGameObjectWithTag("GameManager").GetComponent<GameManager>();
_gm.RoundRestart();

or some lazy bastards will create a serialized field and drag the object to the slot in Unity Editor:

 public class Player : MonoBehaviour {
     
     [SerializedField] GameManager _gm;
     
     ...
     
     private void Update() {
         if (health <= 0f) {
             _gm.RoundRestart();
         }
     }
}

Seems like it solves the problem, nice. Now we have another problem: what if there are some other scripts (more than 10) also need the GameManager script?

We can just copy the code we wrote for Player.cs, then we created multiple references to GameManager, which causes a lot of redunancy. To solve this problem without copy and paste the code around, we can use a design pattern: Singleton:

In software engineering, the singleton pattern is a software design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. The concept is sometimes generalized to systems that operate more efficiently when only one object exists, or that restrict the instantiation to a certain number of objects. The term comes from the mathematical concept of a singleton. (from Wikipedia - Singleton Pattern)

To make the GameManager singleton is simple:

 public class GameManager : MonoBehaviour {
 
     private static GameManager Instance; // **<- reference link to GameManager
     
     ...
     
     private void Awake() {
         if (Instance == null) {
             Instance = this;
         }
         else {
             Destroy(gameObject);
         }
     }
     
     ...
}

That's it! The piece of code above creates a static reference of GameManager instance (which is itself) and delete any duplicate instances. With this, getting a reference of your GameManager is much easier, for example, to access a public function in your GameManager, instead of doing:

GameManager manager;
...
mamager.SomeFunction();

you can directly access it using:

GameManager.Instance.SomeFunction();

A note of using Singleton Pattern: DO NOT abuse singleton pattern! It is a pattern which usually been used for global configurations and sometimes it is considered as a "anti-pattern" (since it is basically a global variable but nicely written), such as GameManager in our case. Only use singleton if you are sure your game has and only has exactly One instance of this object. For example, you should not use singleton pattern on Enemy, or PickupItem since those objects are very likely to have more than one.

Patrolling is the most commonly used movement type while designing enemy AI, it is simple and makes your enemies looks "smarter" than just standing still, also it is easy to implement.

A simple solution - static waypoints

Waypoints seems to be the most straight forward solution to come up with, the basic idea is to setup an array of waypoint game objects, and let the enemy character move from one to another.
The approach is simple (Use a 2D space in Unity as an example):

public class EnemyMovement : MonoBehaviour {
    public GameObject[] waypoints;
    public float moveSpeed = 5f;
    
    private GameObject currentWaypoint;
    private int wpIndex = 0; // index of the current waypoint in array
    
    private void Start() {
        wpIndex = 0;
        currentWaypoint = waypoints[wpIndex]; // initialize current waypoint
    }
    
    private void Update() {
        Patrol();
    }
    
    private void Patrol() {
        if (WpReached()) {
            UpdateWp(); // move to next waypoint if reached the current one
        }
        gameObject.transform.position = Vector2.MoveTowards(
            gameObject.transform.position, 
            currentWaypoint.transform.position, 
            moveSpeed * Time.deltaTime
        );  // move towards the current waypoint
    }
    
    private bool WpReached(Vector2 position, Vector2 target, float allowance) {
        return Vector2.Distance(position, target) <= allowance
    }
    
    private void UpdateWp(){
        wpIndex++; // next waypoint
        wpIndex = wpIndex % waypoints.Length; // cycling from 0 to waypoint length
        currentWaypoint = waypoints[wpIndex];
    }
}

Looks good, but seems like the enemy will always move between the given waypoints, so the player can predict the enemy's path after few plays. What if I want my enemy patrols randomly?

Improvement - Random waypoints

To make the enemy move randomly, we have to let enemy chose the waypoint by itself, the idea is to randomly choose a new x location when the enemy reaches its destination, and set the next waypoint location to (newX, currentY).
Here's the approach (again, a 2D space in Unity):

public class EnemyMovement : MonoBehaviour {
    public float moveSpeed = 5f;
    
    private GameObject currentWaypoint;
    
    private void Start() {
        currentWaypoint = SelectRandomPoint(); // initialize current waypoint
    }
    
    private void Update() {
        Patrol();
    }
    
    private void Patrol() {
        if (WpReached()) {
            currentWaypoint = SelectRandomPoint(); // select a new waypoint
        }
        gameObject.transform.position = Vector2.MoveTowards(
            gameObject.transform.position, 
            currentWaypoint.transform.position, 
            moveSpeed * Time.deltaTime
        );  // move towards the current waypoint
    }
    
    private bool WpReached(Vector2 position, Vector2 target, float allowance) {
        return Vector2.Distance(position, target) <= allowance
    }
    
    private Vector2 SelectRandomPoint() {
        // select a random point inside a circle
        var point = Random.insideUnitCircle * wanderingRadius;
        // eliminate the change of Y
        point.y = 0;
        // Add the difference to the current locaton of enemy
        point += (Vector2)gameObject.transform.position;
        return point;
    }
}

This will make the enemy patrol to random locations, but what about those location which could be inside of a obstacle? We need to take care of that.
Add this member variable to the EnemyMovement class:

public LayerMask layer; // layer of all obstacles

And this to the beginning of your Patrol() function:

if (Physics2D.OverlapCircleAll(wanderWaypoint, 1, layer).Length != 0) {
    currentWaypoint = SelectRandomPoint();
}

This will detect if the waypoint overlaps with any game objects in obstacle layer, if yes then select a new point.
Of course, you need to set all of your obstacle game objects (such as walls, ground blocks, platforms, etc.) to a new layer, and then attach this code to your enemy game object then select the obstacle layer(s) in the inspector.

This could be one of the concepts that will easily get confused, especially for those ones just get started on network programming.

The Major Difference

First thing: blocking operation does NOT equal to synchronous, also non-blocking operation does NOT equal to asynchronous. Actually, they don't have direct relevant with each other.

Synchronous & Asynchronous

Synchronous/asynchronous describes the communication mechanism.

Synchronous is, when we started a function call, the call will not return anything until it gets the result, the function needs to finish everything before it can give anything to us.

Asynchronous does not need to wait for the function completes its operation, once we call it, it returns immediately without any result, the function uses callback function (or other notification method) to "notify" us to get the value after it completes execution.

A Common "Noob" Problem: Why I get null from my getter?

Before we continue, let's take a look at this getter from an android project:

public class CarService {
    public Car getCar() {
        ...
        client.get("https://car.example/api", params, new AsyncHttpResponseHandler() {
            @Override
            public void onSuccess(int statusCode, Header[] headers, byte[] res) {
                try {
                    String result = new String(res, "utf-8");
                    Gson gson = new GsonBuilder().create();
                    car = gson.fromJson(result, Car.class);
                } catch (UnsupportedEncodingException e) {
                    Log.e("Error", e.getMessage());
                }
            }

            @Override
            public void onFailure(int statusCode, Header[] headers, byte[] res, Throwable error) {
                Log.e("Request Error", String.valueOf(statusCode));
            }
        });
        return car;
    }
}

Looks like it has no problem: it establishes an API call to get the car from server, and returns it at the end. However, when this getter gets called in another class:

public CarActivity extends Activity {
    private Car myCar;
    private CarService carService;
    //.....
    public void setMyCar() {
        myCar = carService.getCar();    // <- *this will return null*
    }
}

myCar will be null, why? Because the getter starts an async operation AsyncHttpResponseHandler() to establish an API call asynchronously and returns car immediately right after that, the function will not wait for the inside code (onSuccess(), onFailure(), etc) to finish, so car gets returned before it gets the value from the server.

So how to solve it? A straight forward solution is to use a callback to handle the response instead of just return it:

public interface CarServiceCallBack {
    void onSuccess(Car car);
}

In class CarService:

public void getCar(final CarServiceCallback callback) {
    client.get("https://car.example/api", params, new AsyncHttpResponseHandler() {
        @Override
        public void onSuccess(int statusCode, Header[] headers, byte[] res) {
            try {
                String result = new String(res, "utf-8");
                Gson gson = new GsonBuilder().create();
                car = gson.fromJson(result, Car.class);
                callback.onSuccess(car); // <- Pass the car object to callback funtion
            } catch (UnsupportedEncodingException e) {
                Log.e("Error", e.getMessage());
            }
        }
        ...
    }
}

And in CarActivity.setMyCar():

public void setMyCar() {
    // Construct a new callback object
    carService.getCar(new CarServiceCallback() {
        @Override
        public void onSuccess(Car car) {
            myCar = car;    // <- pass the received car object to myCar
        }
    });
}

How this works? When CarActivity.setMyCar() gets called, it will call carSerivce.getCar() and pass in a new callback interface CarServiceCallback to handle the async operation, while the client successfully gets the response, in the handler's onSuccess() it will ask the callback interface to call its onSuccess() method, which is implemented in CarActivity.setMyCar():

public void onSuccess(Car car) {
    myCar = car;    // <- pass the received car object to myCar
}

Blocking & Non-blocking

Unlike synchronous/asynchronous, blocking/non-blocking focuses on the status of the program while waiting for the result from the function call.

A blocking operation hangs up current thread before it gets the result, in other words, a blocking operation will let the current thread wait for the result returns, even if the target function will use a callback function to notify client side to fetch the result, the thread on the client side will still be blocked until it gets the returned result. In opposite way, the non-blocking operation will not hang up the current thread if no result returned immediately.

A Simple Example

You are the customer making the phone call to the hotel to make a reservation.

Synchronous: The hotel receptionist receives the call and ask you to wait while he/she needs to look up the calendar to see if there is any available time slot. After finished looking up, the receptionist tells you if the requested time slot is available (result returned).

Asynchronous: The hotel receptionist receives the call and tell you that they have got the information, then he/she hangs up, you will receive a call back from the hotel once they have finished checking (callback).

Blocking: You make the phone call, before you get any result back, you will sit on the couch and do nothing until the hotel tells you if your reservation can be made.

Non-blocking: You make the phone call, after telling the information to the hotel, you start to do something else (drink water, eat snacks, take shower, etc.) and check if you get any results every few minutes.

Overall

The example above should give you a clear understanding of the underlying communication between client (you) and server (hotel). Sync/Async usually describes how the server will deal with incoming requests, and Blocking/Non-blocking describes how the client side will handle the results (wait or do something else).

Further Reading:
Understanding Synchronous vs Asynchronous (AJAX) - JavaTPoint
Blocking and Nonblocking I/O - Kansas State Polytechnic