Tutorial: Connect to SQL server from a Java application using JDBC Driver

I've started supporting Microsoft JDBC Driver for SQL server. The driver provides Java database connectivity from any Java application, application server, or Java-enabled applet. As a beginner of Java programming, I am writing this tutorial to record how to create a simple console Java application to connect SQL server using JDBC Driver.


Aug 27, 2018
Read More

The HTTP CONNECT tunnel

HTTPS is widely used on Internet to secure the data being transferred. However, when a browser needs to send a HTTPS request through proxy, since the request hostname and port number are all encrypted in HTTPS request header and even the proxy cannot get them, then how does the proxy know where to send client's request? To solve this problem, the browser sends a HTTP request with method CONNECT and the target hostname and port number to the proxy. When receiving the CONNECT request, the proxy establishes a TCP connection to the requested hostname on the specified port and then returns HTTP 200 response to tell the browser the requested connection was made. After that, the proxy should just blindly forward the packets back and forth between the client and the server without looking at them until the tunnel is closed.


Aug 12, 2018
Read More

Meet the JavaScript AST

I was developing a tool to inlinify the external Web Worker references in a JavaScript file. It checks all external Web Worker references like: new Worker('worker.js') and then reads the content from worker.js, eventually transforms the external reference to inline reference like: new Worker(window.URL.createObjectURL(new Blob(["/* the code of worker.js */"]))). The function of the tool seems to be very simple, I was considering to use Regular expression to find out the value of the external Web Worker reference, however it turned out that a lot of edge cases cannot be covered by the Regular expression solution. In the end, JavaScript AST (Abstract Syntax Tree) parser became the life saver.


Apr 12, 2018
Read More

Performance issue of using massive transferable objects in Web Worker

I was recently developing a text file parser based on File Reader API in browsers. To prevent the heavy file parsing job from blocking the UI thread, using Web Worker to parse the file would be the best choice. Web Worker needs to parse the text file into lines and transfer each line to the main thread. We will encounter performance issues on transfer speed and memory usage when Web Worker needs to pass hundreds of thousands, or even millions of lines. Most browsers implement the structured clone algorithm that allows you to pass more complex types in/out of Web Worker such as File, Blob, ArrayBuffer, and JSON objects. However, when passing these types of data using postMessage(), a copy is still made. Therefore, if you are passing a large 100MB file, there's a noticeable overhead in getting that file between the worker and the main thread. To solve this problem, postMessage() method was designed to support passing Transferable Objects. When passing Transferable Objects, data is transferred from one context (worker thread or main thread) to another without additional memory consumption, and the transfer speed is really quick since no copy is made. However I still see notable performance issue when Web Worker needs to pass massive Transferable Objects.


Jan 23, 2018
Read More

Processing huge files using FileReader.readAsArrayBuffer() in web browser

The FileReader API in HTML5 allows web browsers to access user files without uploading the files to the web servers. It not only lightens the load of web server but also saves the time of uploading files. It is very easy to use FileReader.readAsText() to process a 300K log file. However, when the file size grows to 1GB, or even 2GB, then the page might crash in browser or not function correctly. This is because readAsText() loads the full file into memory before processing it. As a result, the process memory exceeds the limitation. To prevent this issue, we should use FileReader.readAsArrayBuffer() to stream the file when the web application needs to process huge files, so you only hold a part of the file in the memory.


Sep 5, 2017
Read More

ES6: Arrow Functions

It is very common to use anonymous functions as parameters in JavaScript. Event binding, async callback and so on all use anonymous function. ES6 introduced new Arrow Functions which has shorter syntax as a replacement for anonymous function. The basic syntax is: (arguments) => {expression or return value}.


Feb 17, 2017
Read More

JavaScript ES5: the Object.defineProperty() method

We can use the form: varable.property to get and set the value of an object: var obj = {a:1} in JavaScript. This is the most common and convenient way we code in JS, however the property that is created in this way can be easily modified and is enumerable. The Object.defineProperty() allows precise addition to or modification of a property on an object. It has been widely used in some popular two-way binding JS libraries.


Feb 9, 2017
Read More

IE11 Migration Guide: How to solve compatibility issue?

Before solving website compatibility issue in IE11, we need to understand the nature of compatibiltiy issue and our target. Most webpage compatibility issues in IE11 can be divided into following two scenarios:


Read More

IE11 Migration Guide: Web page layout broken issue due to "Natural Metrics" in IE11

After upgrading to IE11, web page layout may be broken. The most common reason is the web page runs in a newer document mode in IE11. However, the layout issue might still occur even if the document mode is same as before. This is because IE11 uses natural metrics for font rendering while previous IE versions use Windows Graphics Device Interface (GDI) metrics.


Read More

How to create an IIS website that requires client certificate using self-signed certificates

Some IE/IIS issues may involve client certificate. It always took me hours to deploy a test website that requires client certificate. Therefore, I am going to write this blog to record every steps including: creating self-signed root CA, server certificate, client certificate and configuring IIS.


Jul 31, 2016
Read More

Automate Azure Web App deployment using Gulp + Git

I have used Visual Studio to deploy Azure Website, the integration of VS and Azure makes web deployment very easy. However, I have another website that is built by Gulp automating tasks. And therefore, I was looking for a single command to deploy website using Gulp, like: gulp deploy. Azure offers many options to deploy Web App: Visual Studio, Git, Powershell, FTP, manual deployment. After weighing all the factors, I chose Gulp + Git to automate the deployment. Each Azure Web App allows user to create a Git repository as the deployment source. Local Git Deployment to Azure App Service shows how to enable the Git repository from Azure portal and how to deploy your app to Azure App Service from a Git repository on your local computer. This article will focus on how to automate the deployment using Gulp.


May 31, 2016
Read More

Use nodemon to restart node application automatically on code change

We usually need to rerun node server.js when debugging Node.js project, which is painful and inefficient. Actually we can use nodemon to automatically restart node by monitoring the files change.


Mar 25, 2016
Read More

IE11 Migration Guide: Everything you need to know about IE11 Enterprise Mode

Compatibility view is unable to resolve all compatibility issues in Internet Explorer 11. Enterprise Mode was first introduced in April 2014 IE11 cumulative security update. It was originally aimed at emulating the behaviors of IE7 and IE8 to avoid the common compatibility problems associated with web apps written and tested on older versions of Internet Explorer. Later update of this feature added the ability to specify the document mode (5~11) for a certain website. In order to use comprehensive functions of Enterprise Mode, please first update IE11 to the latest version: KB4018271.


Read More

Walkthrough: Decrypt SSL/TLS traffic (HTTPS and HTTP/2) in Wireshark

I was recently researching HTTP/2. However I can only see encrypted network packets in Wireshark because all browsers only support HTTP/2 that run over TLS. Actually Wireshark does provide some settings to decrypt SSL/TLS traffic.


Dec 15, 2015
Read More

IE11 Migration Guide: Understanding Compatibility View and Local Intranet Zone

Compatibility View is the most common backward compatible solution in Internet Explorer, it can be configured by Compatibility View Settings, Group Policy and Local intranet security zone. We can control some of the sub-domains to be displayed in Compatibility View and some of them not by using these configurations.


Read More

IE11 Migration Guide: Understanding Browser Mode, Document Mode, User-Agent and X-UA-Compatible

Browser Mode determines the User-Agent that Internet Explorer sends to servers and the document mode Internet Explorer defaults to. This article is going to explain the relationship between them in detail.


Read More

How to resolve "SEC7111: HTTPS security is compromised by (null)" error in IE11

I recently encountered an issue that a webpage does not function in IE11 with exception "SEC7111: HTTPS security is compromised by (null)". It turned out it was caused by using document.write() function in the HTTPS webpage.


Oct 21, 2015
Read More

A new way to declare variables in JavaScript with "let"

ECMAScript 2015 (ES6) provides a stricter way to declare variables: let which can be used to supersede legacy var statement. The let statement declares a block scope local variable while the variables declared with var are scoped to the function block level. Although it is very loose and comfortable to declare variables with var, but this characteristic usually leads to some unexpected behaviors, especially in a complicated project.


Aug 8, 2015
Read More

How to develop high performance onScroll event?

We need to take special care of the performance while hooking up to the onscroll event as it fires more frequently with shorter interval time comparing to other events like mouse and keyboard. The FPS drops if your onscroll event contains elaborate logic or animations. In addition, user usually scrolls the mouse wheel continuously, it may aggravate the FPS drop, increase the browser CPU usage and impact the user experience. Developers sometimes don't notice such kind of issue since most development machines have better performance than normal user machines. Next, let's talk about how to prevent the performance issue caused by onscroll event.


Jun 19, 2015
Read More

String starting with "JavaScript:" would cause false alarm of IE XSS filter

Recently I was adding comment function to my blog article pages, IE always prompted message: "Internet Explorer has modified this page to help prevent cross-site scripting" when browsing a specific article page. After debugging by Fiddler, I found the reason was that the article title began with: JavaScript:, which triggered the XSS filter considering it as a javascript protocol string and blocking the web page. Actually the title was just a normal string without any script code.


Jun 12, 2015
Read More

Remove blocking JavaScript and CSS

External file references in web page like: JavaScript and CSS may block page rendering. They force the browser to wait for the files to be downloaded, parsed and execute. Assuming that there is a JavaScript file reference which needs 2 seconds to be loaded, then the browser will stop rendering until the JS file is loaded after 2 seconds. We need to eliminate any potential blocking external JavaScript and CSS files when optimize web page.


Jun 5, 2015
Read More

Cache static file as much as you can

The browser sends http header: If-Modified-Since and If-None-Match to check whehter a static file has been updated when it fetches the file again. If the file has not been updated, the server would send 304 Not Modified HTTP header message and the browser would use cached version instead of downloading the file again. This is the default cache mechanism of most web servers, however there is some room for improvement in the web performance. The default cache behavior still requires establishing HTTP connection between the client and the server in order to check whether the file has been modified. It may takes the browser tens to hundreds of milliseconds to talk to the server and it also consumes server resources.


Jun 1, 2015
Read More

JavaScript: What's the difference between HTML attribute and DOM property?

It is easy to confuse attribute with property when manipulating DOM object by JavaScript. document.getElementById('test').getAttribute('id'), $('#test').attr('id'), document.getElementById('test').id and $('#test').prop('id') return the same id: "test". In this article, I will explain the differences between attribute and property.


May 23, 2015
Read More

IE11 Migration Guide: Create Internet Explorer 11 batch deployment package

Beginning January 12, 2016, older versions of IE browser (8~10) will not be supported anymore. A growing number of enterprises and individual customers start migrating to Internet Explorer 11. Upgrading to IE11 is an easy job for individual customers, however it could be challenging to IT administrators in large enterprise as they need to ensure the success of hundreds and thousands PCs.


Read More