TypeScript is now a very popular language to create typed JavaScript code to reduce development error. It provides a type system on top of JavaScript which has only a weak type system. Once the TypeScript code is developed, it can be compiled into corresponding JavaScript so that they can be loaded and parsed by browser.Webpack is another tool for bundling multiple JS files into a single one so that no multiple connections to be established between browser and server. when a page is loaded This would reduce the bandwidth consumption and improve website performance in general.These two are good...

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

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

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

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

Starting from Chrome 51, a new attribute SameSite has been introduced for browser cookie. This attribute is to prevent CSRF attack.Cookie is normally used to store data exchanged between client and server. It frequently stores user login information. If a malicious website can forge a HTTP request with the valid third party website cookie, it may be called a CSRF attack.For example, if a user logins to a bank website your-bank.com, the bank server responds a cookie:Set-Cookie:id=a3fWa;Later the user somehow visits malicious.com and there is a form on the website.<form action="your-bank...

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