What does Design Concept/Principle mean for a developer?

• What is good software design concept? How would you measure it? What practices would you need to follow to achieve it? How can you make your architecture flexible, stable and easy to understand?
• These are the great questions; but, unfortunately, the answers are different depending on the type of application you’re building. Nevertheless, there are several universal principles of software design that might help you answer these questions for your own project. Here I will show you seven of universal Design Concepts.

Here I have used javascript for examples but you can…

• What are hooks?
React hooks provides a way to use every react features available in react without writing a class. {get rid of this keyword and this binding :)}

•So, why using hooks?
By using react hooks, you can reduce as well optimize your code a lot especially when you are using libraries like react-navigation, redux, mobx, etc…

Comparing features in react with class and functional components:

1. useState() : this.state

useState returns a pair of state and function to update state. It has optional argument which is initial value of that state. As you can see below you can simple get rid of ‘this’ and binding ‘this’ which becomes headache many…

This is final parts of this series on angular -a guide to deal with APIs in angular. To create custom interceptor for api, first create api interceptor service. Add api-intercepotor.service.ts file in your api folder.

import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { Injectable } from '@angular/core';@Injectable()
export default class ApiInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler) {
    return next.handle(request);
  }
}

We have to implement intercept method with two parameters, request: HttpRequest and next:HttpHandler as we have implemented HttpInterceptor interface. Now, we have to provide this interceptor in our module app.module.ts file. …

Have a look into part 1 of this series as we will continue from where we left in part 1.

There are multiple ways we can handle api errors in angular HttpClient.

Method 1: While subscription of get, post, put, delete method.

Rxjs Observable errors can be handle within .subscribe() method as second argument. For example in our app.component.ts file:

getMemes(): void {
  this.api.get<MemesResponse>(GET_MEMES)
    .subscribe(
      response => this.memes = [...response.data.memes],
      error => {
         // .... HANDLE ERROR HERE 
         console.log(error.message);
    });
}

Method 2: Using Subject of rxjs with catchError operator

If you want to show, toast or alert the error message coming from api to users then Subject is useful. In our api.service.ts file, we will create one Subject…

Dealing with api is a bit diffucult task for beginners without using 3rd party libraries like axios for api request-response and state management library like redux.

I would assume that you have knowledge of angular and rxjs basics with typescript or javascript. Install angular cli if you haven’t from https://angular.io/cli and create new app. Here we will create a simple meme app.

ng new meme-app

Import HttpClientModule in your app.module.ts file. Your app.module.ts file may look like this:

We will make API service file in app. Create one folder inside “src/app” with name like api and create one file…