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.
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.
Out of the web vitals, there are 3 core web vitals:
• Fast. As fast as npm and Yarn.
• Efficient. One version of a package is saved only ever once on a disk.
• Strict. A package can access only dependencies that are specified in its
• Deterministic. Has a lockfile called
• 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.
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.
WebAssembly (Wasm) has been around for about two years. It is still relatively new technology.
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.
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…
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…