A web skimmer is a piece of malicious JS code embedded in web payment pages to skim customer’s payment information. There are a few tricks to embed malicious scripts. In this post, we’ll discuss how it can be done in CSS file and SVG file as well as what works …

If you are using TypeScript for Bootstrap, you need to extend the JQuery interface to add Bootstrap methods. For example, if you want to use the tab function from Bootstrap to programmatically trigger bootstrap tab click, the below code will have a type error. $(‘#mytarget’).tab(‘show’); With TypeScript, we can extend …

One of my friends are super into Jekyll. He’s build a few cool web apps and blog sites. He swears by it. I was looking for a static site generator technology make my portfolio site. I initially thought I would go with Gatsby because I know React well and the …

When we have a web analytics application that collects front end event data such as Tealium, Adobe Analytics and so on, we can dispatch an custom event whenever user does action on the page. For example, we can dispatch a custom event to indicate the user clicked certain button on …

A polyfill is code that fills in functionality missing from the older browser. For example, Internet Explorer does not have Promise like other modern browsers. In this case, we can use a promise polyfill so that the code that uses Promise can work in IE. There are two ways of …

I had an interesting problem with Promise Polyfill to make promise and finally work on IE11. The page has multiple JS bundles. The existing JS bundles all had Promise polyfill from older version of core-js (babel-core@7.0.0-bridge.0). import ‘core-js/es6/promise’; Then, I added another JS bundle with the latest Promise polyfill. The …

I recently built a chat widget that supports Amazon Connect Chatbot with amazon-connect-chatjs. It turned out the library does not support IE11 (see the issue I raised here). The good news is that if we add polyfills, we can make it work. AWS will probably update the library with IE …

By using the HTML audio element, we can embed sound in documents. When your app in running in a server, we can add audio files and refer to the paths in the audio element’s src attribute. What if you are creating an JS bundle that can be injected into a …

We can optimise the load time by using different image sizes for different screen widths. There is no point in loading a huge image for a mobile when the width is only for 200px. Here is the quick Python script to resize images. By changing the array, you can output …

The JavaScript this keyword refers to all the objects that exist in the function’s call-site.   A call-site of a function is the location where the function is called. When a function’s call-site is inside an object, this refers to the object where the function belongs to. When a function’s call-site …