Monthly Archives: June 2017

Progressive Web App – App Shell

1 Reply

Welcome to Progressive Web App Series. If you have missed previous blog posts, please read from following links. In this blog post we will understand one of the important component of PWA, which is App Shell, sometimes referred as Application Shell as well.

  1. What Are Progressive Web Apps?

The App Shell Model in Progressive Web App

One of the key feature of PWA is that it loads faster and that is because of Application Shell.  In native application we have all the content and resources are stored locally and we have APIs to fetch data from network. That’s the reason native app works faster than web apps. The App Shell works on something similar concept. It keeps your UI and resources local and pulls in content dynamically through an API.

The application shell is the minimal HTML, CSS and JavaScript required to start the app. This means the application shell is not loaded from the network every time the user visits. Only the necessary content is needed from the network. Here is the graphical representation.

Progressive Web App - App Shell

As you can see from above graphical representation, we have a app shell which will act as code repository on local and will hold all key resources of the app that is required to start the app.

To see how Google built an app shell architecture, take a look at Building the Google I/O 2016 PWA.

App shell does not work alone, it works with service worker. We will see how you can set caching of your app shell using Service worker.  App shell will cache resources offline and use it on next visit of users. It does not mean that it will not load fresh data from network. It will look for new versions of the app and will load it automatically.

Building Your App Shell

When you are building your application shell you must identify the resources that you will need to cache. You can then use service worker to cache those data and resources and load data dynamically from API. This means keep your HTML simple load all the data dynamically and build UI runtime. This way your application will load much faster. You have to determine the right balance between speed and data freshness for each of your data sources.

An application shell using Service worker is powerful pattern for offline caching but it also offers significant performance wins in the form of instant loading for repeat visits to your PWA. You can cache your application shell so it works offline and populate its content using JavaScript.

You can find more about Application Shell on Google Developers website.

Instant loading web apps with Application Shell Architecture

 

What Are Progressive Web Apps?

3 Replies

I recently published blog post on why you will need Progressive Web Apps . You can read it from Why Will You Need PWA

Now I am going to create series on PWA. This is first post of the series.

An Introduction to Progressive Web Apps

Progressive Web Apps use new palette of technologies such as the web app manifest, home-screen install support, service workers and the app shell. It uses modern web capabilities to deliver an app-like user experience.

Progressive Web Apps

When we say app-like user experience that means everything including db storage, push notifications, offline support etc. These things were missing in mobile web apps, but now PWA fix that with new Web APIs and new design concepts. These bridge the gap between native and web apps offering new capabilities to web developers to create amazing desktop and mobile experiences.

It’s Reliable

When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state. A service worker is a core component of PWA, we will go through details of it in upcoming posts.

A service worker, written in JavaScript, is like a client-side proxy and gives control to developers to maintain the cache and how to respond to resource requests. You can pre-cache the key resources of your app and this way you can eliminate the dependence on the network. That means your app does not depend on network and this makes it reliable.

It’s blazing Fast…..

Most of users will abandon a site if it takes longer to load! And once loaded, users expect them to be fast with smooth scrolling. Also your app should be fast to respond to user interactions on screen. The modern web technologies of PWA allows developers to have smooth scrolling, animations and great event handlers that will quickly respond to users interactions and his makes PWA blazing fast..

It’s Engaging

PWA are installable and live on the user’s home screen, without the need for an app store. They offer a full screen experience with help from a web app manifest file. We will see in details about app manifest file in upcoming post. You can engage your users with PUSH notifications.  The Web App Manifest allows you to control how your app appears. You can specify home screen icons, the page to load when the app is launched and you can also set the screen orientation.

In short, building a high quality Progressive Web App has incredible benefits, You can delight your users, grow engagement and increase conversions to your web.

Here are some good links to get more information about PWA

Google Developer – What’s the PWA

IONIC – What’s the PWA

How Google Search can make your day to day life easier

Leave a reply

As we all know Google started as a search engine, but it has evolved into a company that offers a wide variety of services. And it keeps innovating ideas and services to make our life easy with its simple but most effective tricks. Sometime Google users do not know about this tricks. So in this blog I am going to mention some tricks. Here is how Google can make your day to day life easier.

Google Search can be your dictionary

By dictionary I mean it can correct your spellings and it can help you find out meaning of your spelling. For example if you type wrong spelling in search.

SpellingCorrection

It will suggest you correct spelling. If you want to know meaning of spelling. You have to type

Google Spelling Correction

Google Search can be your currency converter

If you are dealing with money you often have to convert currency from one to other. You have to type in search

Google Currency Conversation

Google Search can be your personal virtual assistant

If you are using Google Calendar for meetings and you want to know what’s next for you. Just type following in search.

Google calendar

Google Search can be your language translator

If you want to convert sentence or word to other language, you just have to search.

Language Translate

Google Search can be your timezone converter

If you have relatives abroad leaving in different countries then you and you want to know what time it is there to speak with them. You can use search like this.

Time converter

Or you want to know what time in city right now. You can search like this.

City Time

Google Search can be your travel guide

You can find distance between two places. It will show you path on maps and it will also help you with flights between your source and destination. You can also check about places and see it on Maps or Google Earth.

Google Travel

In short in many ways Google make your day to day life better and not to forget about search. You can search anything, it will give you tons of information.

Apple WWDC 2017: Top Announcements

Leave a reply

Apple WWDC 2017 Day 1. There were lots  big announcements related to Apple products and services. Here are some key take aways from my notes of WWDC 2017.

Apple WWDC

Here are top announcements at Apple WWDC 2017

  • The most powerful Mac ever, is coming this year. iMac Pro starts at JUST $4999 and available from December
  • pay will support P2P, person to person
  • iOS 11 is here! Messages now has an App Drawer
  • Incredible in photos.
  • Apple maps are getting smarter in terms on navigation. Now there is a challenge to Google maps
  • “Do not disturb while driving” this is a good feature that can save many lives
  • MusicKit API for developers which will give access to apple music resources
  • Apple’s Siri’s influence is spreading across apps. It will influence what’s surfaced in News, iMessages.
  • The App Store is 9 years old, gets more than 500 million weekly visitors who have downloaded 180+ billion apps
  • The new tabs in the new App Store.
  • Apple is completely redesigning the App Store in 2017.
  • Apple’s Depth API can be used for really important work.
  • Apple using Machine Learning all over the place. Now they have new APIs for developers (Vision, Natural Language, AR).
  • ARKit will overnight be the largest AR platform in the world. Hundreds of millions of iPhones and iPads are compatible.
  • WingNut AR demo is super cool!!!!!!!
  • Cook: “iPad is a piece of glass that transforms into anything you want” – Probably the most sophisticated tablet definition ever
  • Apple Pencil and iPad pro, a great combination for designers.
  • Apple enters the augmented reality fray with ARKit for iOS
  • Biggest iOS for iPad release ever. Dock everywhere. Drag to slide over. New app switcher. App pairings. Drag and drop. Flick on keys. Files.
  • New Files app for iOS and iPad. Nested folders, favorites, search, tags, recents. Supports iCloud and Dropbox and much more.
  • Built in document scanner for notes, mark up with pencil. Integrated into Mail.
  • Some cool new pencil features like searchable written text and inline drawings.
  • Apple’s iPad Pro will now allow inline drawing in emails using the Pencil.
  • Notes now has a pretty powerful built-in document scanner.
  • HomePod is going to reinvent music in your home
  • it’s fair to say that they think Apple just copied Amazon Echo & Google Home with HomePod

Heart Vs Brain – Which one to follow?

Leave a reply

Heart Vs Brain

Brain Vs Heart

It’s big debate going on since long time. Since the beginning of the humanity I think. Weather to follow heart or follow brain. Heart Vs Brain choice is difficult. We often hear it said that it’s better to listen to your heart rather than your head. However, when and to what extent is this good advice for the programmers and developers in professional life?

According to me, a programmer will always have to go with brain because that’s where the thought process happening and when ever we are stuck heart can never help us. As a programmers we have to ….

  • We have to write complex algorithms.
  • We have to think about complex logics.
  • We have to evaluate things like frameworks, servers, logics, code and so many things.
  • We have to identify problems and debug programs.
  • We have to mess up with someone else work.
  • We have to understand bad code make it good.
  • We have to make complex framework.
  • We have to take a good decision based on some comparison.
  • We have to think about pros and cons before using something.

And so many other things. We can do this only if we use our head and not heart. So if you are programmer and if someone ask you to follow your heart. Tell them we can not do that. If we follow our heart, there will be disaster in the world.

We are the programmers and we always have to listen to our Head not Heart. There are no sentiments in programming.

Cut Cost, Go Paperless and Go Green

Leave a reply

No matter what your business is, you have to use papers to maintain your business. These papers can be

  • Legal document
  • Orders
  • Reports
  • Invoices
  • Survey forms
  • Customer information
  • Complain forms etc.

Go Paperless

Managing each papers for your business incur cost like

  • Printing paper
  • Storing paper
  • Maintain files
  • Sending papers etc.

And you have to bare this cost which cuts your revenue and over all profit of your business and sometime it creates real mess in your office. You end up with piles of papers on your desk and storage and you may lost important documents in it and that will affect your business. You my end up with unhappy customers or you may loose contract as a delay in paper work.

Well, yon can end up this mess and cut your costs by going paperless and increase your revenue. You can be eco friendly company. You can store all your papers in digital formats and make them available in digital form to your employees and customers so they can access it easily. Here are some benefits of going paperless.

Save on Printing Cost

Most printed documents in an office are for internal use and do not contribute positively to the bottom line.  By moving to a system where more tasks are done in the digital space, a business saves money in all of these areas and this way you will be more eco friendly and save papers and save our environment. For example you have survey reports, to do analysis you print many copies of it and distribute to your employees. These copies are used only once and then thrown out. Instead of this if you can have digital system where you can send it to all your employees in form of digital copy. You save lots of printing cost.

Save on Storage Space

In many modern offices, stored paper takes up much of the room. Paper is dead space – much of it doesn’t contribute to a companies  revenue in any way. In a paperless system, many of the records stored around an office could be digitized and can be stored in clouds so it can be available anytime and can be available anywhere. There is no meaning of storing piles of files in cupboards or on office desk. You can have everything in your computer so you can access it easily.

Easy to Maintain

It’s hard to get correct paper from the piles of physical paper. You have to check each and every paper and find out the correct one. It will take lot of time and you may not have desired outcome. But if you have all the papers in digital format, you can scan through it easily and search the right paper from it.  This significantly improves your operational efficiency and employee productivity, since people don’t waste time searching endlessly for each piece of data they need.

Secure Your Data

Paper files may get lost, copied, folded, removed from the office or simply misplaced. When any of these situations arises, sensitive information is at risk. If you have digital data, you can restrict access to it and no body can manipulate it or steal it.

As a technology service provider we always insist on paperless solution for the businesses and we offer our clients number solutions from document management system, dynamic forms, mobile apps and cloud based applications. If you are looking for paperless solution for your business, contact me.

Some Useful Tips for UI / UX Developers

Leave a reply

I have been working on web development since last 7 years. I learned many useful things related to UI / UX from my experience. In this blog I am going to mention some useful tips for UI / UX developers. First of all lets understand what is UI / UX.

Generally UI / UX is developed by single web developer and generally it is referred as same terms but in fact UI and UX is different.

What is UI?

UI is short form of User Interface. It refers to how web page will be visually presented to end user. Basically it’s related to look and feel to its users. A UI designer’s job is to make it look good, impressive and should attract end user.

What is UX?

UX is shot form of User Experience. It focuses on its usability, and its ability to provide customer satisfaction. A job of UX developer is to make web page easy to use for end customers.

Now lets see some tips which I learned from my experience.

Keep it Simple

Make your UI simple so that end users can interact with it easily. There should not be any distracting elements like dark background colors or some bunch of extra spacing etc. Keep it simple so user can easily find what they want and can interact with site easily.

Less mouse clicks are better

This was told by one of my client. He said make the designs in such a way that I don’t have to do so many mouse clicks. With few clicks I should be able to see what I am looking for. This was such good tip for me. Make your site navigation easy so that user can find it what they are looking for with few clicks. Implement navigation in such a way that with few mouse clicks user should be able to navigate through your web app.

Have consistency in designs

This is another important element in designs. Have consistency in terms of font size, font family, spacing colors etc. Make it same everywhere in your all the pages so user can have good feeling of consistency. Generally all the designers makes mistake in this. They use different layouts, different styles on each page and that will not give consistent experience to user.

Highlight key elements

In your web app highlight your key elements by making them bigger or by adding some striking visual interface so users can easily find it and it avoids making the user have to search for them; by helping the user focus on them.

Make a prototype

Before you start working on UI / UX make a prototype of designs and navigations so UI developer will have better idea of what to implement and UX developer can plan better user interactions.

Here are some prototype tools which you can use to make good prototype.

InVision

InVision

Proto.Io

ProtoIo

Sketch

Sketch

Easy Currency Conversion in eCommerce Website using CurrencyLayer

Leave a reply

If you are an eCommerce developer creating eCommerce websites or mobile apps or mobile web apps, you always have to deal with currency conversation. Specifically if you are dealing with global customers.  This has to be done properly and carefully or else it will create chaos in system. Some time Customers have to pay more than actual amount and receiver will get less money and nobody would like that. So it will be better if you use some secure and reliable API for currency conversation and CurrencyLayer is one such API.

CurrenyLayer

Adding CurrencyLayer to your eCommerce Application

It gives you free account with limited API requests. Also there are other paid plans with more API request. You can signup from here. Start using currency layer API.

Once you signup you will get an API key, which you have to pass in API requests. Now we will see some APIs of currency layer and see how we can use it.

Please note here base currency will be USD.

Getting all currency listing

To get list of all the supported currency by API. You have to make get request with following params.

http://apilayer.net/api/list?access_key=YOUR_API_KEY&format=1

Here we have specified format = 1, which will give us return data in JSON format, Here is sample output.

{
“success”:true,
“terms”:”https://currencylayer.com/terms”,
“privacy”:”https://currencylayer.com/privacy”,
“currencies”:{
“AED”:”United Arab Emirates Dirham”,
“AFN”:”Afghan Afghani”,
“ALL”:”Albanian Lek”,
“AMD”:”Armenian Dram”,
“USD”:”United States Dollar”,
“UYU”:”Uruguayan Peso”,
“UZS”:”Uzbekistan Som”,
“VND”:”Vietnamese Dong”
}
}

Getting real time conversation rate

You have to make API call with following params.

http://apilayer.net/api/live?format=1&currencies=USD&access_key=YOUR_API_KEY&currencies=GBP,EUR,

And following is sample output.
{
“success”: true,
“terms”: “https://currencylayer.com/terms”,
“privacy”: “https://currencylayer.com/privacy”,
“timestamp”: 1496300046,
“source”: “USD”,
“quotes”: {
“USDGBP”: 0.77777,
“USDEUR”: 0.889028
}
}

Here we are passing API key format and currencies as param and it will give us conversation rate for this currencies for USD

So using this API you can easily add conversation features to your eCommerce application. It will be reliable and real time so you don’t have to worry about issue in conversation. The currencylayer API is one of the easiest to use APIs I’ve ever worked with.

We Have Bugs

Leave a reply

It’s pretty normal for software engineer to deal with bugs everyday. In fact some time we spend more time in solving it than real work. So this blog post is about some humor related to it.

My reaction to team on bugs report

Reactions of developers

Brave Developer     Crying Baby

There are two types of developers in the world. One who are afraid of it. They got scared when they get reports. There are others who faces it bravely and destroy them. Be like second one. Do not be afraid of bug, have a gut accept it, face it and kill it.

So moral of the story is don’t be a cry baby.

We have so many bugs

And now comes my real life funny incident on it. One friend of mine who is interested in photography. So here is how conversation went.

Friend : Now, I want to take picture of bugs. But it’s difficult to find them

Me : Really, I can help you. I have so many.

Friend : Really? Are you sure? Where is it?

Me : (Logged in to Bugzilla) Here it is.

Friend : Oh come on Hiren…..