ngoclb

Fullstack Developer and Freelancer

How I Solved My File Limit Issue on Cloudflare Pages with R2 Bucket
October 23, 2025

How I Solved My File Limit Issue on Cloudflare Pages with R2 Bucket

I hit the 20,000-file limit on Cloudflare Pages for my static website, so I moved my images to Cloudflare R2 for free asset hosting. Here’s how I did it, step by step.
Fish Shell abbr: Simplify Your Terminal Commands

Fish Shell abbr: Simplify Your Terminal Commands

March 24, 2025

Fish Shell’s abbr feature creates auto-expanding shortcuts that replace short commands with full ones as you type, making it faster than aliases. Use abbr for quick interactive commands, aliases for scripts, and functions for complex tasks.
Install canvas on Mac M1 (Apple Silicon): command failed node-pre-gyp install --fallback-to-build

Install canvas on Mac M1 (Apple Silicon): command failed node-pre-gyp install --fallback-to-build

February 13, 2025

This article details troubleshooting and resolving node-gyp issues when revisiting an old Ionic v4 project. The main problem occurred during npm install due to a Python version mismatch. After reviewing error logs, the issue was identified as using Python 3.13 with [email protected], despite node-gyp requiring Python = 3.12.
How to Integrate Fish Shell with Visual Studio Code

How to Integrate Fish Shell with Visual Studio Code

November 27, 2024

By default, if Fish is already set as the default shell, VS Code detects it and integrates it with the terminal. But in my case (VS Code 1.95.3), the default setting didn’t work. After restarting, VS Code still used Zsh as the default shell in the integrated terminal. If you encounter the same issue, you can manually set up Fish as the default shell for the integrated terminal as follows…
Switch From Zsh to Fish

Switch From Zsh to Fish

November 26, 2024

Discover how switching from Zsh to Fish shell can enhance your productivity with faster performance, rich built-in functionality, and an user-friendly configuration experience. This article explodes some advantages of Fish, such as pre-installed plugins, faster and simpler setup, along with a step-by-step guide to make your migration seamless and efficient.
[Android] Hide the system volume UI when adjusting the volume

[Android] Hide the system volume UI when adjusting the volume

August 6, 2024

This is the default post-Honeycomb volume slider that appears when you press the volume up/down buttons. You cannot hide it on every screen of the system, but you can hide it in your activities. Add this code-snippet to any activity where you want to hide it, and change the volume programmatically.
Mastering NPM Scripts

Mastering NPM Scripts

July 9, 2024

You may have come across the scripts property in the package.json file and even write some scripts yourself. But do you know all you can do with NPM Scripts? In this article, I’ll share my research about how to take full advantage of NPM scripts.
console.delight - Did you know console could also render CSS, SVGs and HTML?

console.delight - Did you know console could also render CSS, SVGs and HTML?

February 28, 2024

Everyone knows you can use console.log() to log text and variables to the console. Did you know you could also render (limited) CSS, SVGs, and even HTML in it?!? I didn’t! It’s a neat technique that can delight the curious and further your brand for curious users. If you’re in a browser other than Safari, open up the DevTools console to see some examples of what we can create!
[TypeScript] The left-hand side of an arithmetic operation must be type 'any', 'number', 'bigint' or an enum type

[TypeScript] The left-hand side of an arithmetic operation must be type 'any', 'number', 'bigint' or an enum type

March 1, 2023

The left-hand side of an arithmetic operation must be type ‘any’, ‘number’, ‘bigint’ or an enum type The error “The left-hand side of an arithmetic operation must be type ‘any’, ‘number’, ‘bigint’ or an enum type” occurs when you have an arithmetic operation with values that are not of type any, number or enum, e.
[TypeScript] Property 'offsetTop' does not exist on type 'Element'

[TypeScript] Property 'offsetTop' does not exist on type 'Element'

December 7, 2022

The error “Property ‘offsetTop’ does not exist on type ‘Element’” occurs when we try to access the offsetTop property on an element that has a type of Element. To solve the error, use a type assertion to type the element as HTMLElement before accessing the property.
[Node M1] FATAL ERROR: wasm code commit Allocation failed - process out of memory

[Node M1] FATAL ERROR: wasm code commit Allocation failed - process out of memory

December 1, 2022

I received a new MacBook Air with M1 at my workplace. Apparently Node on M1 macOS doesn’t work well except on version 15.3.0 or above where they fixed related issues, and all my projects are based on Node 12 ~14.
[Android] Build failed: Installed Build Tools revision 33.0.1 is corrupted...

[Android] Build failed: Installed Build Tools revision 33.0.1 is corrupted...

November 25, 2022

The issue Today, I need to build a new Ionic project to an Android APK file but stucked at this error Build-tool 33.0.1 is missing DX at /Users/user/Library/Android/sdk/build-tools/33.0.1/dx FAILURE: Build failed with an exception.
What are the differences between the private keyword and private fields in TypeScript?

What are the differences between the private keyword and private fields in TypeScript?

November 16, 2022

TypeScript 3.8 supports the private keyword to declare its members private. And the private fields in TypeScript are the ones newly proposed for JavaScript. These fields are preceded by #.
Web Sockets Web Workers and Service Workers

Web Sockets Web Workers and Service Workers

November 16, 2022

Web Sockets, Web Workers, Service Workers… these are terms you may have read or overheard. Maybe not all of them, but likely at least one of them. And even if you have a good handle on front-end development, there’s a good chance you need to look up what they mean.
Three Techniques to Alter the Query in Wordpress

Three Techniques to Alter the Query in Wordpress

August 27, 2022

In this snippet, I will describe three different techniques to alter the WordPress default query with an example showing how to add a secondary page to the front page in the Customizr theme
20+ ffmpeg Commands for Beginners

20+ ffmpeg Commands for Beginners

July 11, 2022

In this guide, I will be explaining how to use FFmpeg multimedia framework to do various audio, video transcoding and conversion operations with examples. I have compiled most commonly and frequently used 20+ FFmpeg commands for beginners.
Replace Old URL with New URL in Revolution Slider

Replace Old URL with New URL in Revolution Slider

June 28, 2022

Many of you might have made a WordPress site on the demo domain and then transferred the whole files to a new domain or hosting. Sometimes you might have come across the slider revolution images missing on the new domain. Even though you have cloned a WordPress site and replaced the URLs using Velvet URLs plugin, the Revolution Slider images URL will not be replaced yet.
404 Page Templates With SVG Animations

404 Page Templates With SVG Animations

June 24, 2022

All the best 404 pages normally have something that stands out. From animated illustrations to custom typography, having a visually appealing and catchy error page can delight your visitors. So when building your websites be sure not to forget to style them.
100+ Best Hugo Themes (Hand-Picked For 2022)

100+ Best Hugo Themes (Hand-Picked For 2022)

June 17, 2022

Crafting a site with Hugo static site generator is appealing because of its brute speed, build time, and deployment flexibility. The user base of this platform is growing rapidly with various categories such as blogging, documentation, corporate, and even eCommerce. Hugo themes come into play in this context to fulfill the needs of various sorts of users.
Moving From Wordpress to Hugo

Moving From Wordpress to Hugo

June 19, 2021

Wordpress CMS have many great features but I never use them such as Authentication, Plugins, Media Library… Beside that Wordpress takes much time to publish a simple post. So that I will use HUGO for my blog at this time because it is so simple and…
Setup the dropdown terminal in maxOS with iTerm2

Setup the dropdown terminal in maxOS with iTerm2

March 23, 2021

Recently I switched from my ThinkPad to MacBook Pro. Coming from Linux world I soon started missing some of my previous favorite tools. One of them is Guake – a drop-down terminal tool. There’s no macOS version of it but luckily there’s a way to get terminal with similar behaviour on macOS.
Tracking Redirects With Curl

Tracking Redirects With Curl

October 9, 2020

Redirect target and destination Somewhere someone’s complaining about a redirecting URL that’s not going where it’s supposed to. Or maybe the URL is hopping too many times and it’s affecting SEO. Using cURL on the command line is a quick and clear way to see where a URL is redirecting to and how it’s getting there.
Top Javascript Animation Libraries in Jan 2019

Top Javascript Animation Libraries in Jan 2019

February 12, 2019

Today we are going to look at some of the great JavaScript Animation Libraries of 2019. We have web animations right here since the advent of websites. In the early years, we have used the flash for animation purposes for the web. During that period, the websites made entirely of Flash were very popular. The main disadvantage of flash was its file size. Now, things have changed, and today the flash websites are almost gone.
The Best Front End Hacking Cheatsheets

The Best Front End Hacking Cheatsheets

December 20, 2018

It’s rather impossible to remember all the APIs by hearert. This is when cheatsheets jump in! Here are the best front-end cheatsheets I’ve gathered.
CSS Timeline Examples From CodePen

CSS Timeline Examples From CodePen

December 12, 2017

With the emergence of social media, timelines have started to become popular and be used in other type of websites, such as blogs, portfolios, news portals, weather apps and many more. With the help of CSS & JS you can create stunning timelines that can be used in your current and future projects.
Flexbox Cheat Sheet

Flexbox Cheat Sheet

November 2, 2016

In order to use flexbox, you must create a flex container in which your content will live within. It’s as easy as creating a class, and setting the property to display: flex or display: -webkit-flex; in Safari DevTools.
Các công cụ vẽ sơ đồ thay thế cho MS Visio

Các công cụ vẽ sơ đồ thay thế cho MS Visio

September 16, 2016

Đôi khi trong công việc, bạn cần phải vẽ một sơ đồ để chèn vào trong báo cáo hay trong slide của mình, phần mềm Office Word hay PowerPoint của Microsoft cung cấp những tính năng vẽ biểu đồ thống kê rất tuyệt vời nhưng với các sơ đồ, đặc biệt các sơ đồ theo chuyên ngành riêng biệt thì dường như rất hạn chế.
JavaScript Best Practices: Tips & Tricks to Level Up Your Code

JavaScript Best Practices: Tips & Tricks to Level Up Your Code

August 30, 2016

Learning new things everyday is part of what makes being a rational human being great. And as developers, it is part of our job to learn new things continuously, whether or not these things are from positive learning experiences.
Sticky Footer solved by Flexbox

Sticky Footer solved by Flexbox

June 22, 2016

Getting the footer to stick to the bottom of pages with sparse content is something just about every Web developer has tried to tackle at some point in his or her career. And, for the most part, it’s a solved problem. Yet all the existing solutions have one significant shortcoming — they don’t work if the height of your footer is unknown.
Hướng dẫn viết chương trình vẽ đồng hồ kim 2D bằng Java

Hướng dẫn viết chương trình vẽ đồng hồ kim 2D bằng Java

October 11, 2011

Ý tưởng rất đơn giản, dùng hàm fillOval để vẽ mặt đồng hồ, và dùng hàm drawLine để vẽ kim đồng hồ. Ta vẽ một cái hình oval có 2 đường kính bằng nhau (tức là hình tròn), có tọa độ của đỉnh góc bên trái (chỗ 9 giờ trên mặt đồng hồ) là 50,50 và đường kính là 200 tức là tâm đường tròng có tọa độ là 50+(200/2) = 150.