Sometimes developers want to know whether the user is using a mobile browser or a desktop browser so that they can build corresponding user experience. Although in many cases responsive web design would help solve component alignment issues, there are performance related considerations in some cases where some code should not be ran or some feature should not be available if user is on mobile browser. or vice versa This post will summarize a few ways which are commonly used to check whether a user is on mobile device or not.navigator.userAgentThe straightforward approach is to parse the user a...

Browsers allow JavaScript to read and write data on clipboard. Generally script should not modify user's clipboard to avoid impacting user expectation, but there are cases where this can indeed bring convenience to users. For example, for some code snippet, user can copy it to clipboard with one click instead of select and copy manually.There are three options for clipboard operation provided in JavaScript/browser:document.execCommand()Asynchronous Clipboard APIcopy and paste eventsThis post will briefly talk about these three options.document.execCommand()This is the early option for operatin...

The design of JavaScript is not so sophisticated. It's very easy for us to make mistakes if we are not very careful when using JavaScript. For example, to check the existence of JavaScript object.Now we want to check whether a global object myObj exists or not, if it doesn't exist, we declare it. The pseudo code for this is :if(myObj not exist){ declare myObj;}You may think it's very easy to write the code. In fact, it is much more difficult than we may think. Juriy Zaytsev says there are more than 50 ways to check whether a JavaScript object exist or not. Only if you are very clear about the ...

In modern JavaScript, there are two types of modules: ES6 module and CommonJS module used by NodeJS. These two types of module are not compatible. Many people would wonder how to load ES6 modules in their NodeJS project. This post will show how this can be done.DifferenceThe syntax of the module being loaded is different. CommonJS modules are loaded with require() and exported with module.exports. ES6 modules are loaded and exported using import and export respectively.Merchanismwise require() is doing sequential loading, other statements must wait for this statement to complete before executi...

D3.js is a very popular graph library to help developers draw various kind of charts using JavaScript in a webpage. It utilizes the SVG format supported by all major modern browsers and can help developers get rid of the old age of Flash or server side graph drawing libraries.In this post, we will introduce some simple examples of drawing bar chart with labels using D3.js. First, let's see what will be the final look of the graph drawn.Below is the complete source code for this example.let data = { "FACEBOOK": 30, "GITHUB" : 44, "GOOGLE" : 64, "TWITTER" : 17, "WEIBO" : ...

localStorage allows data to be stored in browsers across sessions, the data will be there even though the session is expired. It is frequently used to store static data so that they can be loaded when needed. But as per spec, it says that the keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings). Why cannot store the object as it is?Take a look at an example:var str = "test";localStorage.setItem("str", str);console.log(localStorage.getItem("str"));var obj = { a: "hello", b: 10};localStorage.setItem("obj", ob...

JSON has been used in lots of places to exchange data among different services/systems. Nowadays all mainstream programming languages have built-in library support of JSON data parse and stringify. In this post, let's talk about JSON.stringify() in JavaScript.Let's first take a small example of Object conversion handling. There is a requirement to convert below objectconst todayILearn = { _id: 1, content: '今天学习 JSON.stringify()，我很开心！', created_at: 'Mon Nov 25 2019 14:03:55 GMT+0800 (中国标准时间)', updated_at...

With the popularity of React, the internals and implementation of Virtual DOM has becoming top discussed topic in tech communities and interviews. This post will give an introduction of Virtual DOM and how to implement a simple Virtual DOM logic.How to understand Virtual DOMIn early days, front end developers would update a webpage view based on the data status change(usually after making AJAX call). But it brings performance penalties when there is frequent update as it would cause page reflow and repaint and in turn lead to page stuck.Hence people comes out a solution which is to just update...