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

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 programmatically updated.

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

 

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

 

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.

 

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.getElemantById("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”);

 

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%” weight=”100%”>

  d) None of these.

 

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.

 

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

 

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;}

 

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.

 

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

 

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;}

 

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

 

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

 

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

 

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

 

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. 🙂  

NodeJS : Continuation Local Storage or Thread Local Storage?

Sometimes you need piece of data, most of the time request/response objects, between different events of a request where it is generally not accessible. Continuation Local Storage is a package to access the current express request/response object from a point where that is not readily accessible. 

Problem

Suppose you have a rest API (/users) that serves the user data. The handler of this API calls the service layer to get user data. The service layer calls your facade layer to get data from either directly from the database or from third party URL. After getting the data from different sources, facade layer combines the data and return to service layer that further returned to the actual API.

Now API layer accepts the cookie that contains some token to validate the request. The same token is required at facade layer. One way is to pass the token extracted from cookie at API layer to service layer that further will pass to facade layer.

In some cases, there can be other layers and events in which you need the same token or user data. Passing data, layers to layers is not a good practice and not a cleaner way.

So to sort the same problem Continuation Local Storage (CLS) comes into the picture.

What is Continuation Local Storage (CLS)?

Continuation Local Storage is a package to access the current express request/response object from a point where that is not readily accessible. It works like thread-local-storage in multithreading programming like java. As nodejs is single threaded it supports events/callbacks instead of multi-threads. And to achieve the same It uses the concept of **namespace**.

Node.js is asynchronous and uses an event loop to manage the asynchronicity, AsyncListener allows you to write software that can keep hold of information across callbacks.

What is Thread Local Storage (TLS)?

From Wikipedia

Thread Local storage (TLS) is a computer programming method that uses static or global memory local to a thread.

Setup

Let’s get started with Continuation Local Storage

1) Install the continuation-local-storage package

npm install continuation-local-storage --save

2) Create namespace that will hold the objects that we want to access at global level

let app = express();
let cls = require('continuation-local-storage');
let namespace = cls.createNamespace('com.domain');

3) Define middleware that will bind the request and response object to namespace

app.use((req, res, next) => {
   var nameSpace = cls.getNamespace('com.domain');
   // wrap the events from request and response
   nameSpace.bindEmitter(req);
   nameSpace.bindEmitter(res);
 
   // run middleware in the scope of the namespace that we have created
   nameSpace.run(() => {
       // set data to the namespace that we want to access in different events/callbacks
       namespace.set('data', "any_data");
       next();
   });
});

4) Now this data can be accessed at any layer. For demo, logging the data that was set in the namespace

//logger.ts

var getNamespace = require("continuation-local-storage").getNamespace;
let nameSpace = getNamespace("com.domain");
let data = nameSpace.get("any_data");
console.log("data : ", data);
en_USEnglish
en_USEnglish