When debugging JavaScript application, one may frequently use console.log to print data so that it is easy to debug when issue occurs and also helps on understand the data flow. The common way of printing a variable would be something like. let user = { name: "test"};console.log(user);In this case it will print:{ name: 'test' }This is OK when there is no much logging or the program is not complicated. But it becomes difficult to debug if there are lots of variables to be printed as there is no clear indication on which variable or object it is.So in this case one may add some extra log...

calc function is a function introduced in CSS3, it can be used to calculate length values. There are a few good features which make it suitable for aligning an element vertically.One good part is that the operands can have different units like percentage, px, rem etc. This makes it very flexible when calculating the length value. One example:.rect{ margin-top:20px; height:50px; background:green; width:calc(100%-20px);}Here the left operand uses percentage while the right one uses px, they can work perfectly without any conflict.The result of calc is dynamic but not pre -calculated....

As a front end developer, there is frequent need to debug JS code and sometimes need to find out what event handler has been bound to a HTML element. In this post, we will show how to find out the click event handler bound to a HTML element, this same applies to other events as well.Nowadays, a web application is usually very complicated and there are lots of JS codes which makes it difficult to find out what click event handler has been bound to a HTML element, especially when the JS source code has been obfuscated or compressed.By using Chrome, it becomes relative easy to find out this kind ...

Sometimes there is a need for website owners to monitor user behavior on the site so that they can know what pages are mostly visited and which parts are more popular so that they can provide better service to their users. These behavior usually contain user clicks, user mouse over events etc. These data can be sent back to server when triggered with some meta data.In this post, we will cover a few ways to monitor user behavior on a web portal and send data back to backend sever.1. Synchronous AJAXA common way to send data back to backend server is using AJAX to send the data in the page unloa...

In HTTP header, there is a field named Referer which is to provide the referrer of the current accessed page. In this post, we will introduce the usage of HTTP referer field.On the web, when a user visits a webpage, s/he must be from some place. This place is usually referred a s referer. This information is very important to some website operators and server owners as they want to know where they get the traffic from and this helps them provide better service for potential targeted users.In the request header of a HTTP request, there is a Referer filed which can be set to the referrer URL ind...

With the evolvement of JavaScript, lots of new features have been added this old but robust language.  Among them are lots of functional programming language related functions like map, filter, each etc. In this post, we will cover one function map and its interesting behavior.Before dive into the details, let first take an example, do you know the output of below function call?['1', '7', '11'].map(parseInt)You may think that it's easy and the output would be[1, 7, 11]Can you try to run this by yourself and you may be surprised of the output. The actual result is[1, NaN, 3]What's happenin...

This post will cover the JavaScript questions I have encountered and have seen during my programming career. They will mainly focus on vanilla JavaScript though there are lots of excellent frameworks out there and many people are using them in their daily work.this keywordthis keyword is an very important but easy to confuse concept in JavaScript since it is always referring to the calling object of the function.1. What will be the output of below code snippet?function User(name) { this.name = name; this.display = function(){ console.log(this.name); }}var user = new User("javas...

Google has a huge user base and hence it provides an authentication service for third party service to integrate with them so that people can sign in with Google in their services. Google also adopts OAuth 2 to provide this kind of Open ID connect service.This post will introduce how to integrate with sign in with Google functionality in your PHP website. Create a client app on GoogleThe first step you should follow is to create a Google app, you can follow the post here to create the project. Once the project is created, you will get a client id and client secret, these will be used late...