Google recently introduced Web Vitals, a collection of metrics that seek to provide unified guidance for quality signals for user experience on the web. This is a story of how we improved one of them: Largest Contentful Paint (LCP), on our mobile web homepage. Though, before we get into that, let’s have some introduction to Web Vitals.

What are Web Vitals?

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
web.dev

Out of the web vitals, there are 3 core web vitals:


Get to know this lesser-known JavaScript package manager

pnpm is a package manager for JavaScript, like npm and yarn. I personally feel that pnpm is less known than it should be. According to the README in the repository, pnpm is:

• Fast. As fast as npm and Yarn.

• Efficient. One version of a package is saved only ever once on a disk.

Great for monorepos.

• Strict. A package can access only dependencies that are specified in its package.json.

• Deterministic. Has a lockfile called pnpm-lock.yaml.

• Works everywhere. Works on Windows, Linux and OS X.

This writing shares some of my learnings from migrating a…


Nowadays, web-apps are expected to be more and more powerful. Since the conception of AJAX, the web is no longer a medium to simply view HTML documents. People are building an actual full-fledged app to run on web browsers! These are made possible by the ever-growing list of new web APIs, the massive amount of modules written by the community, and the collaboration between browser vendors.


Turn your commit messages into release notes for your users

Photo by Yancy Min on Unsplash

Changelogs are great. They give us a record of what changes in our project were made at a particular time. If you’re writing a library, it also gives your users awareness of what changed and gives the impression that your library is well-maintained and can be relied on. Tools such as conventional-changelog allow us to generate a very neat changelog easily, provided we adhere to their conventions on how to write commit messages. One of the most popular ones is Conventional Commits.


Learn WebAssembly while building a Wasm-based QR decoder for the browser

WebAssembly (Wasm) has been around for about two years. It is still relatively new technology.

For some reason, something about it always feels scary to me. Maybe because it has Assembly in its name? Or maybe it’s having to code in a language that is very different to JavaScript?

Whatever it was, I am a curious person and after watching a talk by Surma, I convinced myself to try and learn WebAssembly.

What is WebAssembly

“[WebAssembly] provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that previously couldn’t have…


Tokopedia is one of the largest e-commerce platforms in Indonesia. Our users can virtually search for any products they might want to buy at Tokopedia. One thing we have noticed is that new users often found out about Tokopedia when they are searching through the web; sometimes, using their mobile devices. We have implemented various technologies to help users enter our mobile web with ease. One of our approach was to utilise PWA + AMP, you can read more about this at this article.

The previous approach worked well, so we thought about creating an AMP for our mobile web…


The React team made quite an announcement when they revealed hooks in React. Hooks allow functional component to have state, access to lifecycle (called effects), context, and other stuffs. The community seems to have mixed opinions and some concerns about what this means for React moving forward. I played around with hooks during the weekend, and these are some of the reasons why I think hooks are good idea.

No more wrapper hell

Typical thing that happens in React app

If you are working with React, the picture above is probably awfully familiar. Until now, the main way to inject reusable logic to our component is by wrapping it in another…


Photo by Jefferson Santos on Unsplash

When working with React, code reusability is one of the problem that we often have to face. Being a library that promotes component-based pattern, it is only natural to build reusable components. Whether you are writing a library, an npm package, or a web-app, code reusability is something to strive for.

There is a lot of opinion, and with it, solutions, regarding code reusability. One of the most common way is to use the Higher-Order Component pattern (widely known as HOC). But recently, another pattern seems to start getting traction as well, it is called (you guessed it) Render Prop

Jacky Efendi

I play around with JavaScript and all-things-web 🌐 | https://jackyef.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store