Service worker finally lands on all the modern browsers 🔥[1]. It’s definitely a good time for you start playing around if you haven’t yet done so.

In short, service worker serves as a proxy that enables web application to provide a fast, reliable, and engaging experience. It also progressively enhance your exciting code base which make it even easier to adopt (and will not affect browsers that doesn’t support those features).

As service worker runs in a worker context and different Javascript thread, it could be a bit different than our regular client side Javascript code. Service worker also run…

Tinder — One of the most popular online dating service, is now available on the web platform worldwide.

We start this journey not so long ago when the company already invested heavily on native app experience and advance machine learning technology.

We realize that not all users has the latest mobile device with big storage and ultra high speed network speed to run our native client. Web platform then serve a very good purpose — able to run mostly anywhere with a relative lite required resources.

Our web team has a relative small size, but we starts with a great…

I still remember the time when parallax scrolling becomes a hit in mordern webpage development, everyone suddently feels that the smooth scrolling is a requirement for a website.

Scroll to certain position of page

1. Pure HML solution

Personally I like to use HTML anchor to jump to different location of the page. The reason is that its simple without the need of writing complicate Javascript and its natively support by browsers for a while. The code snipped will be something like

The drawback is there is no transition so the page kind of jump around when navigate.

2. Javascript solutions

You could use…

It’s very enjoyable to develop front-end fancy features rapidly, but as your project grows and people starts to complain about bad performance, it might not be the most interesting task in the world to deal with. Lots of time if we start a project with performance in mind, life will be much easier.

This post will start from the very beginning (and one of the most basic topic) — how to load an image properly (good performance), followed by some detail profiling and working examples.

How hard it can be? Just using an <img> tag

*Update: (April, 2019) ~Chrome 76 delivers native lazy load for <img> and <iframe>, checkout Addy’s…

React is perhaps the most popular Javascript framework recently. It provides a very easy API for engineer to develop sharable components as well as single page application. Combining container like Redux or data flow concept Flux makes React even more powerful.

I found it interesting (and sometime challenging) when in comes to React performance optimization.

In general, there are several angles we could tackle. Some of the optimizations are probably for web app in general (Progressive web app).

1. Initial load
2. Subsequent page load
3. React update
4. Animation and frame rate
5. General Javascript optimization
6. General CSS/HTML render optimization

This post will focus…