CSS has two very important properties on determining the position of an element in webpage: display and position. display is used to determine how elements are grouped and displayed on the page. While position is used to determine the exact position of an element on a page. And this post would explain position property in detail.position is used to determine the exact position of an element on a page. It has five possible values.staticrelativeabsolutefixedstickysticky is supported starting from 2017 in browsers and it would be explained more later.staticstatic is the default value of the posit...

JavaScript is single threaded, it means there would be only one task running at any point of time. But this would slow down the overall program execution if there is long running task, hence asynchronous task execution is desired in complex cases. To achieve asynchronous task execution, there are a few options introduced in JavaScript.setTimeout/setIntervalEventPromiseAsync/AwaitsetTimeout/setInterval is one of the first mechanisms introduced in JavaScript to simulate asynchronous operations. Since these operations are not executing in sequence, there would be a potential issue on how data/sta...

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