Progressive Web Apps are supported on Apple iOS now!

Till last month there was a confusion on whether Apple is going to support PWAs or not. But with the recent 11.3 update, Apple silently added support to Progressive Web Apps (PWA).
Here is a snapshot of Flipkart Lite PWA on iPhone –
Flipkart PWA on iPhone
Following is a detailed article on medium which covers a brief history of PWA, its association with Apple and lot of other interesting things – https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
 

Seting Bootstrap navbar “active” class in Angular 2/4/5

Specify the active class in routerLinkActive directive of anchor tag like below.

<ul class="nav navbar-nav">
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/']">Home</a>
  </li>
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/about']">About</a>
  </li>
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/contact']">Contact Us</a>
  </li>
</ul>

PS: By making { exact: true } in routerLinkActiveOptions will activate the route only when the whole path matches.
References: https://angular.io/api/router/RouterLinkActive

routerLink is not working in Angular 5

If the routerLink is not working in your Angular 2/4/5 application, here are some common mistakes and solutions.

  • Check if you have added RouterModule in the imports of Module where you created this component.

For example, if you have created a NavComponent in NavigationModule and imported in your HomeModule and using it. Then you have to import ReportModule in your NavigationModule.

Like –

import { RouterModule } from '@angular/router';
NgModule({
  imports: [
    CommonModule,
    RouterModule
],
declarations: [NavComponent],
exports: [NavComponent]
})
export class NavigationModule { }
  • If you have any computations in the routerLink, like appending a value dynamically, enclose routerLink with square brackets
<a [routerLink]="['/car/', carModelName].concat(details)"></a>

Here, carModelName and details can be class variables.
Hope this helps!

MongoDB Import JSON Error – Unmarshalling Bytes

While importing data from a JSON file into MongoDB using following command  –

mongoimport --db my_db --collection my_collection --file json_file.json

if you encounter following error –

Failed: error unmarshaling bytes on document #0: JSON decoder out of sync - data changing underfoot?

Solution:
Mos probable reason is some parts of JSON Objects are not properly formatted. For that you need to use –jsonArray flag with the command.

mongoimport --db my_db --collection my_collection --file json_file.json --jsonArray

Free video tutorials on fundamentals and advanced concepts of React

Egghead.io is so generous to give away two and a half hours of React course which covers how to kick start with React and Advanced Patterns for FREE.
Beginner’s Guide course is for React newbies and those looking to get a better understanding of React fundamentals. With a focus on React fundamentals, you’ll come out of this course knowing what problems React can solve for you and how it goes about solving those problems.
Advanced Patterns course gives you the knowledge of advanced patterns you can use to make React components that are more flexible, simpler, and more fun to build, use, and maintain.
I would strongly suggest every UI Developer to go through the course and get benefited.
Here are the links for React Course –
The Beginner’s Guide to ReactJS – https://egghead.io/courses/the-beginner-s-guide-to-reactjs
Advanced React Component Patterns – https://egghead.io/courses/advanced-react-component-patterns
Happy Learning!

Application development in the world of PaaS, Faas and CaaS – Training

 
App Innovation
Join us at FREE training on “Application development in the world of PaaS, FaaS, CaaS” to kick start with Microsoft Azure. This is a hands-on training which covers Cloud development Strategies,  Introduction to Azure, different offerings, what it means for developer etc.
You can register for the event using this link – https://www.microsoftevents.com/profile/form/index.cfm?PKformID=0x2982773abcd
 
Happy Learning!

Interval Markers on both side of axis in Highcharts

If you want to have interval markers on both side of axis in Highcharts and wondering how to do it because Highcharts only support tickPosition = inside or outside. Here is a simple work-around for it.
We can do it in three simple steps.

  1. Add one more xAxis, with tickPosition as ‘inside’
  2. Disable its labels (so that there will be no gap between both the axes
  3. link the second axis with first one using linkedTo
 xAxis: [{
    tickPosition: 'inside',
    tickWidth: 2,
    labels: {
       enabled: false
    },
    tickInterval: 1.666
 },
 {
    tickInterval: 5,
    tickWidth: 2,
    linkedTo: 0
 }]

JS fiddle: http://jsfiddle.net/pranavaa/93o4jqga/

Notes from JSConf EU 2017

I thoroughly enjoyed all the tech talks, demos and predictions on future of javascript technologies in JSConf 2017. This post is notes that I have jotted down from the sessions.

More

Responsive Font Sizes using Xamarin.Forms

When developing a cross-platform application, it is common for us to target multiple form factors like Phones, Tablets, iPads etc. But in a Xamarin.Forms application we will define the control in a layout only once for all the targeted devices (iOS/Android/Windows Phone). There is no direct way to specify different font-sizes based on the form-factor/resolution of the devices. Hardly we can specify the font-size to a particular number which is common for all the devices and form-factors.
One simple way to fix this problem is to assign the device specific appropriate size in OnAppearing method by overriding it. 

More