Git : fast version control

What is Git ?

Git is a distributed version control system originally developed to manage Linux source codes.
Git is designed to help coordinate large, distributed group projects
Git provides a modern toolset
Fast command line utilities
Highly interactive graphical tools web viewers
Dedicated hosting sites (github, gitorious…)

Introduction to Version Control

Version control (or revision control, or source control) is all about managing multiple versions of documents, programs, web sites, etc.

Why You Should be Using Version Control:

The code programmers write changes often. Bugs need to be fixed, features need to be added, and content needs to be changed. Most code is stored as plain old text files, and the code is changed by editing these files. If you make a change to a file, save it, compile it, and find out that something went wrong, it’s often helpful to be able to go back to the old version or to get a report of what was actually changed, in order to focus on what may have gone wrong.
That’s where Version Control Systems come in.

How Git stores data?

Git store its data like a set of snapshots of a miniature file system as opposed to other systems, which store information as a list of file-based changes.

image

image

Git uses a distributed model

image

Basic Workflow of Git

Possible init or clone of repository
Edit files
Stage the changes
Review your changes
Commit the changes

A Local Git project has three areas

Modified

Staged

Committed

image

File Status Lifecycle

image

Remote repositories and local repositories

There are two types of Git repositories namely a Remote repository and a Local repository.

  1. Remote repository:  Repository that resides on a remote server that is shared among multiple team members.
  2. Local repository:  Repository that resides on a local machine of an individual user.You can use all of Git’s version control features on your local repository such as reverting changes, tracking changes, etc. However, when it comes to sharing your changes or pulling changes from your team members, that is where a remote repository comes in handy.

image

Creating a repository

There are two ways to create a local repository on your local machine.
You can either create a brand new repository from scratch or by cloning an existing remote repository onto your local machine.

or

git init

The git init command creates a new Git repository. This creates a new sub directory named .git that contains all of your necessary repository files – a Git repository skeleton. At this point, nothing in your project is tracked yet.

Cloning an Existing Repository

If you want to get a copy of an existing Git repository – for example, a project you’d like to contribute to – the command you need is git clone
Every version of every file for the history of the project is pulled down by default when you run git clone
You clone a repository with git clone [url] [dir](optional). For example, if you want to clone the Git linkable library called libgit2, you can do so like this:

git clone https://github.com/libgit2/libgit2 mylibgit

That creates a directory named “mylibgit”, initializes a .git directory inside it, pulls down all the data for that repository, and checks out a working copy of the latest version

git config

This command can define everything from user info to preferences to the behavior of a repository.
Several common configuration options are listed below:

Set the name and email for Git to use when you commit:

git config --global user.name “array151”
git config --global user.email array151@gmail.com

You can call git config –list to verify these are set.

These will be set globally for all Git projects you work with.
You can also set variables on a project-only basis by not using the
–global flag

Add and Commit

If you want to start version-controlling existing files, you should probably begin tracking those files and do an initial commit. You can accomplish that with a few git add commands that specify the files you want to track, followed by a git commit:

git add *.c
git add LICENSE
git commit -m 'initial project version'

The git add command adds a change in the working directory to the staging area. It tells Git that you want to include updates to a particular file in the next commit. However, git add doesn’t really affect the repository in any significant way—changes are not actually recorded until you run git commit.

 The “commit” operation enables you to record changes that were made to a file or directory in the Git history.

Undoing Changes

git checkout

The git checkout command serves three distinct functions: checking out files, checking out commits, and checking out branches.

git checkout <commit> <file>

Check out a previous version of a file. This turns the <file> that resides in the working directory into an exact copy of the one from <commit> and adds it to the staging area.

git checkout <commit>

Update all files in the working directory to match the specified commit. You can use either a commit hash or a tag as the <commit> argument.

git checkout master

Return to the master branch.

git revert

The git revert command undoes a committed snapshot. But, instead of removing the commit from the project history, it figures out how to undo the changes introduced by the commit and appends a new commit with the resulting content.

git revert <commit>

Generate a new commit that undoes all of the changes introduced in <commit>, then apply it to the current branch.

Reverting vs. Resetting

It’s important to understand that git revert undoes a single commit—it does not “revert” back to the previous state of a project by removing all subsequent commits. In Git, this is actually called a reset, not a revert.

git reset

If git revert is a “safe” way to undo changes, you can think of git reset as the dangerous method. When you undo with git reset, there is no way to retrieve the original copy—it is a permanent undo. Care must be taken, as it’s one of the only Git commands that has the potential to lose your work.

git reset <file>

Remove the specified file from the staging area, but leave the working directory unchanged. This unstages a file without overwriting any changes.

git reset <commit>

Move the current branch tip backward to <commit>, reset the staging area to match, but leave the working directory alone. All changes made since <commit> will reside in the working directory, which lets you re-commit the project history using cleaner, more atomic snapshots.

git reset

Reset the staging area to match the most recent commit.

git clean

The git clean command removes untracked files from your working directory. This is really more of a convenience command, since it’s trivial to see which files are untracked with git status and remove them manually. Like an ordinary rm command, git clean is not undoable, so make sure you really want to delete the untracked files before you run it.

git clean -n

Perform a “dry run” of git clean. This will show you which files are going to be removed without actually doing it.

git clean -f

Remove untracked files from the current directory.

git clean -f <path>

Remove untracked files, but limit the operation to the specified path.

git clean -df

Remove untracked files & untracked directories from current directory.

Syncing

git remote

The git remote command lets you create, view, and delete connections to other repositories.

git remote

List the remote connections you have to other repositories.

git remote add <name> <url>

Create a new connection to a remote repository. After adding a remote, you’ll be able to use <name> as a convenient shortcut for <url> in other Git commands.

git remote rm <name>

Remove the connection to the remote repository called <name>

 

Angular Features and Important Concepts

Angular has drastic and breakable changes than AngularJS in terms of coding style, speed and performance and mobile support. Angular features like Controllers have been replaced with Components and improved digest cycle along with new feature that make Angular a powerful client side framework.

This post is not to show the basic angular feature or guide through the basic concepts but the concepts that are important to learn and very useful.

 

A Taste from Angular Version 4

https://netbasal.com/a-taste-from-angular-version-4-50be1c4f3550

 

The Ultimate Angular CLI Reference Guide

https://www.sitepoint.com/ultimate-angular-cli-reference/

 

Understanding Angular modules (NgModule) and their scopes

https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407

 

How to build and publish an Angular module

https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

 

Injecting components dynamically in Angular

https://medium.com/@tudorgergely/injecting-components-dynamically-in-angular-2-3d36594d49a0

 

Highlight selected row in ngFor – Angular

In this Angular2 tutorial, we will see how to highlight selected row in a table using ngFor & ngClassdirective.

https://ciphertrick.com/2016/10/26/highlight-selected-row-in-ngfor-angular-2/

 

Angular ngFor – Learn all Features including trackBy, why is it not only for Arrays ?

http://blog.angular-university.io/angular-2-ngfor/

 

Http Interceptor : Intercepting HTTP requests and response in Angular

http://array151.com/blog/http-interceptor-angular4/

HTML5 – Interview Questions and Answers

Preparing for an interview for a web developer or MEAN stack developer? Along with the JavaScript and other client-side and server-side technologies, developers are asked about HTML5 basic topics too. So, here are some important topics and questions that are frequently asked in an interview and the concepts that a developer must know about HTML5.

1) Once an application is offline, it remains cached until the following happens?

  a) The manifest file is modified.

  b) The application cache gets automatically cleared by the browser.

  c) The application cache is pro-grammatically updated.

  d) The user clears their browser’s data storage for the site.

Answer – A C and D

Explanation

HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface.

Using the cache interface gives your application three advantages:

Offline browsing – users can navigate your full site when they’re offline

Speed – resources come straight from disk, no trip to the network.

Resilience – if your site goes down for “maintenance” (as in, someone accidentally breaks everything), your users will get the offline experience
The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they’re offline.

The cache manifest file

The cache manifest file is a simple text file that lists the resources the browser should cache for offline access.

Referencing a manifest file
To enable the application cache for an app, include the manifest attribute on the document’s html tag:

<html manifest=”example.appcache”>

</html>

The manifest attribute should be included on every page of your web application that you want cached. The browser does not cache a page if it does not contain the manifest attribute (unless it is explicitly listed in the manifest file itself. This means that any page the user navigates to that includes a manifest will be implicitly added to the application cache. Thus, there’s no need to list every page in your manifest. If a page points to a manifest, there’s no way to prevent this page being cached.

Note: “/page-url/”, “/page-url/?something”, “/page-url/?something-else” are considered separate pages.

You can see the urls that are controlled by the application cache by visiting chrome://appcache-internals/ in Chrome.

A manifest file must be served with the mime-type text/cache-manifest

This requirement was dropped from the specification some time ago, and no longer required by the latest versions of Chrome, Safari and Firefox, but you’ll need the mime-type to work in older browsers and IE11.

Structure of a manifest file

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

There are a couple of things to note:

The CACHE MANIFEST string is the first line and is required.
Files can be from another domain
Some browsers place restrictions on the amount of storage quota available to your app. In Chrome for example, AppCache uses a shared pool of TEMPORARY storage that other offline APIs can share. If you are writing an app for the Chrome Web Store, using the unlimitedStorage removes that restriction.
If the manifest itself returns a 404 or 410, the cache is deleted.
If the manifest or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure.

https://www.html5rocks.com/en/tutorials/appcache/beginner/

2) What is the internal format of input type=”date” in HTML5?

  a) DD-MM-YYYY

  b) YYYY-MM-DD

  c) MM-DD-YYYY

  d) YYYY-DD-MM

Answer – B

3) Which of the following method can be used to estimates the page load times?

  a) Using _gap.push([“_trackPageLoadTime”]) with Google Analytics.

  b) Page load times cannot be estimated.

  c) Using the Navigation Timing JavaScript API.

  d) Using built-in JavaScript methods.

Answer –  A, C and D

https://www.html5rocks.com/en/tutorials/webperformance/basics/

4) Assuming that some text needs to be written on an HTML5 canvas, select a replacement for the commented line below:

<canvas id="e" width="200" height="200"> </canvas>
<script>
  var canvas = document.getElementById("e");
   // insert code here
  context.fillStyle = "blue";
    context.font = "bold 16px Arial";
  context.fillText("Zibri",100,100);
</script>

  a) var context = canvas.getContext();

  b) var context = canvas.getContext(“2D”);

  c) var context = canvas.getElementById(“context”);

  d) var context = canvas.getElementById(“2D”);

Answer – B

5) Which of the following is a possible way to get the fullscreen video played from the browser using HTML5?

  a) <object> <param name=”allowFullScreen” value=”true” />

  b) <video allowFullScreen=”true”>

  c) <video height=”100%” width=”100%”>

  d) None of these.

Answer – C

6) The following are valid use cases of client file/directory access in HTML5, except?

  a) Drag and drop files from the desktop.

  b) Full file system access.

  c) Use of the HTML5 File API.

  d) Use of files as HTML5 input types.

 

7) When does the ondragleave mouse event get fired in HTML5?

  a) It gets fired when an element has been dragged to a valid drop target.

  b) It gets fired when an element leaves a valid drop target.

  c) It gets fired at the end of a drag operation.

  d) It gets fired while an element is being dragged.

Answer – B

8) Given following HTML and CSS, what will be the height of parent element having “wrap” class?

<style>
  .wrap{ box-sizing: border-box; }
  .col{ height:100px; margin:20px;}
</style>

<div class="wrap">
  <div class="col"> </div>
  <div class="col"> </div>
</div>

  a) 260px

  b) 140px

  c) 220px

  d) 280px

Answer – C

9) Which CSS2 selector, selects all Button elements that have a space separated list of values for attr where one of those values is equal to the given value?

  a) button[attr~=value]

  b) button[attr^=value]

  c) button[attr|=value]

  d) button[attr=value]

 

10) Which of the following CSS rule would make all h3 tags that are immediately preceded by a section tag italic?

  a) section~h3 {font-style: italic;}

  b) section>h3 {font-style: italic;}

  c) section+h3 {font-style: italic;}

  d) section h3 {font-style: italic;}

Answer – B

11) What is the use of data list in HTML5?

  a) Enables a tag contain additional data(meta data).

  b) Provides autocomplete feature in a textbox.

  c) Provides SEO friendly markup for page context.

  d) The alternate markup for building accessible lists.

Answer – B

12)  Generally, quirks mode could be turned on when there is:

  a) NO or Incorrect DOCTYPE declaration.

  b) Spaces or illegal chars before DOCTYPE

  c) Invalid HTML – with respect to the chosen DOCTYPE

  d) All of the above

Answer – A and C

Explanation

Quirks mode also known as Compatibility Mode – means your page is running without a document type declared(this is old school, so this is most likely not needed anymore) The whole
point of quirks mode is that it’s a compatibility mode for IE5

Modern browsers generally try to render HTML content according to the W3C recommendations. However, to provide compatibility with older web pages, and to provide additional “intuitive” functionality, all browsers support an alternative “quirks mode”.

Quirks mode is not, however, a standard. The rendering of any page in quirks mode in different browsers may be different. Whenever possible, it is better to adhere to the W3C standards and try and avoid depending on any past or present browser quirks.

Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML – with respect to the chosen DOCTYPE – can also cause the browser to switch to quirks mode.

https://stackoverflow.com/questions/1695787/what-is-quirks-mode

13) Which CSS rule would make the fourth list item underlined if the list had a fourth item?

  a) ul li:nth(4th) { text-decoration:underline; }

  b) ul li:nth-child(4) { text-decoration: underline; }

  c) ul li:4th-child { text-decoration: underline; }

  d) ul li:nth-of-type(4) { text-decoration: underline;}

Answer – B

14) Which property specifies whether the mask should scroll or stay fixed the page is scrolled?

  a) mask-clip

  b) mask-repeat

  c) mask-attachment

  d) mask-image

Explanation

https://www.html5rocks.com/en/tutorials/masking/adobe/

15) The property defines whether or not an ellipsis should be displayed when content overflows a region?

  a) text-overflow

  b) overflow-style

  c) content-overflow

  d) overflow

Answer – D

Explanation

 

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (…), or display a custom string.

Both of the following properties are required for text-overflow:

white-space: nowrap;
overflow: hidden;

div {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
}

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

16) Which rule is used to define the properties that will be animated in an animation rule?

  a) @transition

  b) @key

  c) @keyframes

  d) @animation

Answer – C

 

Explanation

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}

17) What is the attribute used in the <video> element, that is set to the URL of an image that the browser will use in place of the video before it is loaded and playing?

  a) placeholder

  b) poster

  c) banner

  d) preload

Answer –  B

 

Explanation

<video width=”320″ height=”240″ poster=”/images/w3html5.gif” controls>
<source src=”movie.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>

 

Further Readings

http://array151.com/blog/javascript-interview-questions/

http://array151.com/blog/nodejs-interview-questions/

http://array151.com/blog/angularjs-interview-questions/

ngrok: Lightweight Tool to Expose Localhost Server to Internet

Ngrok is a lightweight command line tool to expose your local running server to  the internet by providing public URL. It creates a secure tunnel to your local running server and then the same server can be accessible over the internet on different machines for testing and development purposes.

Download and Setup

You can download the command line tool from this link. A zip file will be downloaded that contains the command line tool. And that’s all.

To expose your localhost server to internet you tell where your local server is running and the port number. Hit the following command to expose your localhost server to internet

ngrok http 3000

Ngrok is the command and the second parameter is the protocol and the last is port where your application is running.  After running the above command you will see the following output on the console

It will show the following detail

 

Attribute Description
Session status It could be online|offline. Status of your application is it running on not?
Session expires When will the ngrok session expires default is 8h
Version Version of the tool
Region Where is the public server is running that is pointed to your localhost server
Web interface Web interface of tool where you can check no of connections to your app and monitor the traffic
Forwarding Public URL of local server
Connections No of connections to your application

 

The public url will be like http://5057493e.ngrok.io. You can specify your subdomains but for that you have to upgrade your account.

 

For more detail

ngrok Documentation

ngrok Official Website

iOS 11 : Exciting and Awesome Features

iOS 11 came up with hundreds of new features that will change the way you are using your phone now. It was Introduced on June 5, 2017, at the Worldwide Developers Conference and released on September 19, 2017. 

It introduces major design changes, new app features, and a complete interface rebuild for the iPad. Features like Siri, Messaging, Music, Single hand Keyboard upgraded in a way that you will get the awesome experience.

If we discuss storage, this update shows 1.91GB size and would require at least 1.5GB of temporal space in order to completely install the iOS 11. Hence, we are expected to have at least 3.4GB of storage space before upgrading.

iOS Features

Siri

Siri has been upgraded with two new features.

  • Type to Siri – You can type to Siri now. (General -> Accessibility -> Siri -> Type to Siri)
  • Siri Translation – Get a spoken and written answers from Siri in the required language. So, Siri now supports spoken translation just like Google Assistant.

Keyboard

  • One-handed Keyboard – Hold down the globe keyboard button and a mini keyboard will appear which can be attached to the left or right side of the display.
  • iPad Extra Symbols – By pressing the shift key has long brought up alternative symbols and numbers, but now further alternatives can be accessed by pulling down on the shift key.

Control Center

  • Customisable Control Centre – Add shortcuts to Control Centre i.e. Low Power Mode, Notes, Text Size, Wallet, Screen Recording etc. Its layout is fixed.
  • Long Press Support – In Previous iOS 3D touch was the only way to get quick access to contextual options in Control Centre, but now these can be opened via a long press. For example, long press on the torch icon and you can adjust its brightness.

Maps

  • One-Handed Zoom – iOS 11 allows us to double tap on Apple Maps and if we keep our finger held to the screen on the second tap swiping up and down will zoom in and out. A useful feature when on the move.
  • Flyover Mode – Select 3D View, popular city and choose the Flyover option. If this is enabled in iOS 11 we can now fly over the city just by moving around. It is just a kind of simplified AR.

WiFi

  • Quick Password Sharing – This is a very interactive feature added. When two iOS devices are running iOS 11 in close proximity but only one is connected to WiFi. Then that device will get a prompt to share the password if the other device tries to connect. If the first device gets agreed and the other will immediately be connected without any effort.

Camera

  • QR Code Support – Automatic detection of QR codes is now supported in iOS 11. So, no need for third-party QR code apps now.
  • Leveling Tool – Open Settings -> Camera -> Switch on ‘Grid’. Now if the camera is taking a photo of something directly below it then two + icons will appear. Line those up and the image will be exactly level before we take our shot.
  • Live Photo Editing – Open a Live Photo, tap Edit and mute the video, look for the video preview at the bottom and you can trim it just like you would a normal video by dragging the sliders from either end. You can also swipe up on a Live Photo to add Bounce, Loop and Long Exposure effects.
  • Live Photos In FaceTime – If both FaceTime callers have iOS 11 then a shutter button shows up during FaceTime calls. Pressing it records a shot Live Photo. The other caller is notified about this.

Screen Control

  • Screen Recording – In Control Center, a button is added to capture screen recording. This can be done with or without audio. It is a great feature for instructional videos and tech support.
  • Screenshots And Edits – A new option is added to re-crop and markup the screenshots. It will appear after the screenshots are taken, We can edit them before saving them in camera roll.

Safari

  • Additional Privacy – In Settings navigate to Safari and there is an option ‘Try to Prevent Cross-Site Tracking’. This stops ads following us from site to site, it is enabled by default.
  • Automatic Reader Mode – While long press the ‘Reader button’ and the options ‘Use on this site’ and ‘Use on all sites’ appear. Select one and the site will always automatically load in Reader mode.
  • Password Autofill – Saved passwords in Safari can now be securely integrated into third party apps, saving our time to typing them. Android 8.0 Oreo also just added this feature.
  • Flight Status – In iOS 11 flight information is fetched automatically from our emails and calendar and can be kept visible in Safari or a Spotlight widget.

Smart Storage

  • Recommendations – In Settings ‘Storage and iCloud Usage’ has been renamed ‘iPhone/iPad Storage’ and it offers recommendations for saving space with options such as auto deleting old conversations, removing large iMessage attachments and storing messages in iCloud.
  • Auto App Removal – In Settings -> General -> iPhone Storage, iOS 11 gives us the option to automatically delete lesser used apps when low on storage. All data and settings are saved, so nothing is lost and the app will return when storage is freed up.

Drag and Drop

  • iPhone Drag and Drop – This allows users to move images, text and files between apps much like we can on a full-size Mac or PC.
  • Multi App Dragging -Tap and hold an app until it wiggles and you can now select multiple apps at the same time and then drag them all to a new screen or folder. It is a Great feature for the quick organisation.

Phone

  • SOS – In settings, there is an ‘Auto Call’ option exists which will dial 911 if we pressed Sleep/Wake/Power button quickly five times.
  • Auto Answer – In Settings -> General -> Accessibility -> Call Audio Routing -> Auto-Answer Calls, we can set a time period of up to 60 seconds by when calls will be answered automatically.

AppStore

  • Interactive Design – Now the App Store has been redesigned from the ground up to provide a beautiful place to showcase amazing apps and to help customers to discover new favourites.
  • More User-Friendly – Feature like Today’s Tab, A Fresh Take on Games and Apps, A Deeper Product Page Experience, Enhanced Search And Promoting In-App purchases makes the AppStore more user-friendly.

Notes

  • Interactive Design – Notes section is more interactive and user-friendly inside iOS 11. More controls are added to enhance the quality of notes. Apple Pencil users can open Notes straight from the Lock Screen by tapping the Apple Pencil on the display.
  • Scan Documents – Now we can scan high-quality documents from the camera and embed inside notes. Steps are: Open notes app, Press plus icon, Choose ‘Scan Documents’ option inside alert sheet.
  • Edit Scan Documents & Save – We can even edit our scanned documents and save to Camera roll and drive also.

Messages

  • Hide Alerts – We can hide alerts of not just iMessage conversation but also general SMS. When enabled, message alerts won’t show up on the lock screen.
  • Live Links on Message Windows – Message window provides updated UI for message composer and added more links to message body.

Music

  • Sociable Apple Music -Inside music app, the subscribers can create profiles as well as follow friends and share their playlists. The user can also see the music to their friends are listening most. Now Apple Music social events can also be set as notifications.

New iPad Dock

  • Frequently used Apps and Docs from any Screen – Apple Design a new dock for iPad in iOS 11. It will provide quick access to favourite and frequently used apps and documents from any screen.

New Files App

  • File Organiser – iOS 11 has provided the centralise approach to organise all our files in one place. We can access the file from Box, Dropbox and Google Drive etc to centralise and organise at one place in Files App.

Augmented Reality

  • Introduced ARKit – iOS 11 launches ‘ARKit’ which helps developers to build powerful AR apps (virtual objects placed in real-world scenes using the camera). We can apply AR to anything. Nowadays Gaming, Designing and shopping are the big focus area of AR.

Do Not Disturb Driving

  • Automatic Do Not Disturb Driving Service – iOS 11 can detect when you are driving and automatically silence notifications to avoid distraction while setting up auto-replies to specific contacts.

Bonuses

  • Flac Support – The Files app unofficially supports playback of high-quality FLAC lossless audio files. Store them in Files or in anywhere Files can access (iCloud, Dropbox, Box, Google Drive etc) and it will play them when opened.
  • iCloud Battery Saving – Photo syncing in iCloud now stops automatically if battery life is low.

So in nutshell, Apple launched a great iOS update which is very fast and time saver and user-friendly platform for iOS devices.

Let’s enjoy the update.

Cheers!!

Reference

https://www.apple.com/in/ios/ios-11/

Interceptor: Intercepting third party Request and Response on the Server side

In the previous post, we have seen

1) What are the interceptors?
2) How to intercept HTTP calls at the client side in Angular2 and Angular4?

On the server side, there are scenarios where we need to do some third party requests to get the final result that our node API will serve. There are various third-party libraries that help the user to make third part rest calls from the NodeJS itself.

Libraries like request, got, reqwest, superagent and axios are popular to do the same task. These libraries have its own benefits, some of these are promise base and some of these provide you with some extra benefits like prefixing the request URL, elegant way to append query string and intercepting the request and response.

You can find the comparison of all these libraries here.

This post will guide you how to intercept request and response of third-party rest call on the server side (NodeJS).

Among all the libraries following two are widely used and most elegant to make third-party calls from the server side.

1) SuperAgent
2) Axios

SuperAgent

SuperAgent is a small progressive client-side HTTP request library, and Node.js module with the same API, sporting many high-level HTTP client features.

It comes with different individual plugins that can be installed separately to enhance the functionality of it. Plugins like

1) superagent-promise – Simple/dumb promise wrapper for superagent

2) superagent-mock – Plugin allowing to simulate HTTP calls by returning data fixtures based on the requested URL.

3) superagent-charset – Add charset support for node’s superagent

4) superagent-rxjs – Return an RxJS v5 Observable from your superagent request

5) superagent-load-balancer – Load balancer plugin for superagent

SetUp

1) Install superagent and superagent-use modules

npm install superagent superagent-use --save

superagent module is to make third-party rest APIs and superagent-use is a plugin that works as a middleware or interceptor.

2) Require the modules

var request = require('superagent-use')(require('superagent'));

3) Then define the superagent middleware

// interceptor used by superagent to add jwt in the header for each 
request.use((req) => {
   req.header.jwt =”******”;
   return req;
});

We have added the superagent-use plugin to append a jwt header to each third party request.

4) And then make calls

request
 .get(url)
 .query({ view: 'jsonView' });

Superagent is more useful than the request-promise as this module provide the promise and rxjs base APIs, URL prefix and an elegant way to append query string.

Axios

Axios is another promise based HTTP client for the browser and server-side (NodeJS)

Features

  • Https request from server (nodejs) and client side (browser)
  • Promise base API
  • Request can be cancelled
  • Request and Response Interceptor
  • Automatic conversion to json

Setup

1) Install the module using npm

npm install axios –save

2) Require the module

const axios = require('axios');

3) Register the interceptor

// axios interceptor
 axios.interceptors.request.use(function (config) {
     let jwt = "****";
     config.headers.common.jwt = jwt;
     // Do something before request is sent
     return config;
 }, function (error) {
      // Do something with request error
      return Promise.reject(error);
 });

4) And then make call

axios .get('http://host:port/rest/users?id=1')

That’s all folks. 🙂  

en_USEnglish
en_USEnglish