Some practical skills about scrolling — It is a ubiquitous feature that every webpage can be scrolled, as the dimensions of the device used to render the page are not uniform. The same website can be accessed from a mobile phone or desktop browser. With increasing complexity of the website, varying scrolling requirements are encountered. …

Using Sveltekit to build a Chrome Extension V3 — Over the past few months, I’ve been learning Svelte in order to create a tool that generates websites from Notion databases. …

This approach can be used to retrieve any host server — I am working on a Chrome Extension that utilizes the TinyPNG open API to compress images. Previously, it was easy for the content script to fetch content from any host without encountering the CORS problem in V2. …

It’s easy to create a PWA project with next-pwa module — Preface Progressive Web Apps (PWAs) have become increasingly popular, offering users a native app-like experience through a web application. By combining the power of Next.js, we can create a fast, scalable, and engaging web app. In the last month, I made a website for daily learning quotation that supports PWA. In…

Use React-Select to accomplish a user-friendly async select component. — In our React project, we usually need to use form to collect user’s data, one of the most commonly used components is the select component, which allows users to choose from a list of options. In some cases, the options may not be available at the time the component is…

Using AbortController for Canceling Requests, DOM Events, and Promises — Introduction As a front-end developer, you may have encountered situations where you need to cancel ongoing requests, DOM events, or promises. In the past, this was often a challenging task that required complex code, we had to use different techniques for different scenarios, such as setting a flag to cancel a…

3 practical skills help you master the position: sticky — What is position:sticky The position: sticky is an amazing CSS property that allows an element to remain in place when scrolling the page. …

Use plain Node.js to serve static files and support download — Preface Recently I developed a feature that needs to support downloading PDF files in a web application. Although I just need to focus on the download action, with the server part being taken care of by backend colleagues, just for fun, I accomplished it with Node.js. This post will cover the…

Three different ways to serve static files. Preface Most of frameworks have provided a dev server that help us to view the pages in the browser. But the files that generated from building the application is required to deploy into one server. …