Introduction to Progressive Web Apps

PWA is not a technology or a framework , set of features in web which helps to improve your application progressively. It means if you have a modern browser you will get an awesome user experience else those features just not support it , your application will have existing features remains as it is.

Let’s talk about what all the features we can use to enhance our existing or new web application .

1. You can bring native look and feel of mobile device apps on your web pages. It’s not the responsiveness of web page but you can access the native features such as camera , accessing geo location, push notifications.
2. Offline Capability when your internet connection get lost.
3. Background Synchronization of data
4. Icon on the home screen , you don’t need to install the application from the app store to place it on your home screen.

There are three import things I want to summarize about the progressive web application.

Reliable : Application will load instantly even in a uncertain condition and provide offline functionality through caching.
https://developers.google.com/web/progressive-web-apps/#reliable
Fast : Respond quickly as possible based on the user interactions.
https://developers.google.com/web/progressive-web-apps/#fast

Engaging : Feels like a native app on mobile devices.
https://developers.google.com/web/progressive-web-apps/#engaging

Can’t resolve all parameters in Angular and Webpack

I have recently faced an issue while configuring an Angular 6 application using Webpack 4 , All the dependencies I am injecting in to the component are throwing error.

This error will throw because of various reasons such as circular dependency , not properly spelled @Injectable() decorator etc. You can check the scenarios in the below link
https://stackoverflow.com/questions/37997824/angular-di-error-exception-cant-resolve-all-parameters

My issue was little bit different , typescript is not resolving decorator> To fix the issue I have set emitDecoratorMetadata=true in tsconfig.json file

Load Angular component styleUrl using web pack

The only change you have to make on your component is , instead of providing the url path using styleUrl , import the file using require and convert to string.


To get the require keyword in typescript, you have to install an npm package called ‘@types/node’
npm install @types/node --save-dev

Also if you want to build and load the scss make sure that you have installed sass-loader and style-loader for web pack

npm install sass-loader --save-dev
npm install style-loader --save-dev

Plugins for webpack

npm install mini-css-extract-plugin --save-dev

webpack-config

rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
'exports-loader?module.exports.toString()',
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader',
]
}]


plugins: [

new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({

filename: '[name].styles.css',
chunkFilename: '[name].styles.css'
})
]

what is the importance of putting semicolon always as a best practice in JavaScript

I know probably what you are thinking , we do we need to specify semicolon in my code explicitly? I am getting the right output always without specifying a semicolon also. Well it’s not always right.

Did you think Javascript Engine Syntax parser doesn’t need a semicolon?
Javascript Engine Syntax Parser always need a semicolon. If you will not put a semicolon , the syntax parser will automatically do it for you. Means , wherever syntax parser expects a semicolon , it will put one for you.

Let me give an example the importance of semicolon. Consider the below code

What will be the output of this function? everyone might think output will be {name: "Jameel"}
But it’s not right , the output is undefined .

When you put object literal in the next line of return statement , syntax parser will do a automatic semicolon insertion after the keyword return and jump out of the function.

How can we Fix this issue?
We have to prevent the automatic semicolon insertion by doing like below

Now you will get the output of
{name: "Jameel"}

Is Javascript Object Literal same as JSON?

There are lot of people still confused about Javascript Object versus and JSON.

both are same?

Answer is No . There is a difference between two

Look at the below sample code , both objects are valid javascript object literal.
var employeeObject1 = {
firstName: "Jameel",
lastName: "Moideen"
}

var employeeObject2 = {
"firstName": "Jameel",
"lastName": "Moideen"
}

Then what is the difference between JSON?
Answer is very simple. JSON have very strict rule , the property name should enclose with quotes.In the above example employeeObject2 is valid JSON.

Valid JSON
{
“firstName”: “Jameel”,
“lastName”: “Moideen”
}

InValid JSON
{
firstName: “Jameel”,
lastName: “Moideen”
}

There are some built in function in javascript to convert an array in to JSON , which can use from object to Valid JSON before you send it across the wire.

JSON.stringfy() – Convert an object to valid JSON
Example
JSON.stringify(employeeObject1)

“{“firstName”:”Jameel”,”lastName”:”Moideen”}”

JSON.parse() – Convert a string to Javascript Object
JSON.parse('{"firstName":"Jameel","lastName":"Moideen"}')

{firstName: “Jameel”, lastName: “Moideen”}

JavaScript check null or undefined – Best Practice

Let’s assume I have a variable called ‘a’ , which looks for some value.
var a;
if (a !== undefined && a!== null && a!=='') {
console.log("Something");
} else {
console.log("Nothing");
}

I have seen lot of developers is trying check condition like above to ensure we are getting the expected value we want.Do we really need to check the value a undefined and null and ?.

No. We don’t need.

Do like below as Best Practice

var a;
if (a) {
console.log("Something");
} else {
console.log("Nothing");
}

Did you understand what’s Javascript Engine doing under the hood?. In order to understand, Let’s analyze what will be the value return by the Javascript Engine when converting undefined , null and ”(An empty string also). You can directly check the same on your developer console.

You can see all are converting to false , means All these three are assuming ‘lack of existence’ by javascript. So you no need to explicitly check all the three in your code.

Also I want to point out one more thing

What will be the result of Boolean(0)?

Ofcourse false. This will create some bug on your code when 0 become a valid value on your expected result. So please make sure this thing also when you write the code