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 …

I made a JavaScript workout with a md file in my GitHub repo. Check out the work out here. The idea of this is to list a short JavaScript programming questions that you would encounter every day as a JavaScript developer. If you know how to do these, you don’t …

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 …

To improve search results, one of the easiest way is to add synonyms. For example, a product may have an official name as well as commonly used name. When it is indexed against only the official name because the product name field doesn’t have a commonly used name, typing the …

When you try to run a Maven project Java Servlet app first time, you might get this No Compiler is Provided error Eclipse/Maven error: “No compiler is provided in this environment” The solution is simple. You need to add tools.jar to installed JRE. (1) Eclipse –> Window –> Preference (2) …