https://www.leohuynh.dev/blog A personal space on the cloud where I document my programming journey, sharing lessons, insights, and resources for fellow developers. en-us contact@leohuynh.dev (Leo Huynh) contact@leohuynh.dev (Leo Huynh) Wed, 09 Jul 2025 00:00:00 GMT https://www.leohuynh.dev/blog/blurry-loading-effect-for-shopify-hydrogen-images https://www.leohuynh.dev/blog/blurry-loading-effect-for-shopify-hydrogen-images Learn how to create a beautiful blurry loading effect for images in Shopify Hydrogen that enhances user experience while images load. Wed, 09 Jul 2025 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) shopifyhydrogenreacttypescriptimage-optimizationui-ux https://www.leohuynh.dev/blog/crawling-goodreads-books-data https://www.leohuynh.dev/blog/crawling-goodreads-books-data Learn how to extract, crawl, and convert your Goodreads books data using Node.js. This guide covers both the RSS feed and CSV export methods. Fri, 27 Jun 2025 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) goodreadsgoodreads-apicrawlingrssrss-parsercsvcsv-parser https://www.leohuynh.dev/blog/parse-function-from-string https://www.leohuynh.dev/blog/parse-function-from-string Safely send JavaScript functions from your server to your client by serializing them as strings, then parsing them back into callable functions on the client side. Fri, 13 Jun 2025 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) typescriptparsingfunctiondeserialization https://www.leohuynh.dev/blog/github-copilot-instructions https://www.leohuynh.dev/blog/github-copilot-instructions How I use GitHub Copilot in VS Code, along with my own custom instructions, to boost productivity, keep my code consistent, and make writing (and coding) more fun! Wed, 11 Jun 2025 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) githubcopilotinstructions https://www.leohuynh.dev/blog/macos-disable-characters-popup-when-press-and-hold-keys https://www.leohuynh.dev/blog/macos-disable-characters-popup-when-press-and-hold-keys How to disable popup showing accented characters when press and hold a key on macOS. Wed, 07 May 2025 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) macosbash https://www.leohuynh.dev/blog/shopify-hydrogen-codegen-configs https://www.leohuynh.dev/blog/shopify-hydrogen-codegen-configs How to configure Shopify Hydrogen Codegen to automatically generate types for your GraphQL queries. Mon, 17 Mar 2025 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) shopifyhydrogencodegengraphqltypes https://www.leohuynh.dev/blog/build-a-price-range-filter-component-in-shopify-hydrogen https://www.leohuynh.dev/blog/build-a-price-range-filter-component-in-shopify-hydrogen A detailed guide on how to build a fully functional price range filter component for collection pages in Shopify Hydrogen. Thu, 13 Mar 2025 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) shopifyhydrogenprice-range-filterremixradix-ui https://www.leohuynh.dev/blog/macos-zip-cli https://www.leohuynh.dev/blog/macos-zip-cli Macos command to zip files and directories into a single file. Tue, 11 Mar 2025 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) macosbashzip https://www.leohuynh.dev/blog/relative-time-ago-parsing https://www.leohuynh.dev/blog/relative-time-ago-parsing A simple utility function to parse relative time-ago into human-readable format. Tue, 11 Mar 2025 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) typescripttimedaterelative-time-ago https://www.leohuynh.dev/blog/dev-setup-minimal-list-for-web-dev-on-a-fresh-macos-install https://www.leohuynh.dev/blog/dev-setup-minimal-list-for-web-dev-on-a-fresh-macos-install Having a new Mac device is always exciting for every developer, but it can also be challenging, especially when it comes to setting up a new dev environment. Here is a list of the minimal setup you need to get started with web development on a fresh macOS install. Tue, 22 Oct 2024 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) dev-setupmacosfresh-installminimal-list https://www.leohuynh.dev/blog/connecting-to-github-using-ssh https://www.leohuynh.dev/blog/connecting-to-github-using-ssh Using the SSH protocol, you can connect and authenticate to remote Github servers and services without supplying your username and personal access token at each visit. Mon, 14 Oct 2024 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) githubsshsecurity https://www.leohuynh.dev/blog/how-to-create-an-image-with-blurry-loading-effect-in-nextjs https://www.leohuynh.dev/blog/how-to-create-an-image-with-blurry-loading-effect-in-nextjs NextJS has provided a built-in image component that has many useful features, we can leverage them with some custom styles to create a beautiful image with a blurry loading effect. Sat, 12 Oct 2024 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) nextjsimageblurloading https://www.leohuynh.dev/blog/pnpm-aliases https://www.leohuynh.dev/blog/pnpm-aliases How to install and update pnpm, create a shell alias for it, and upgrade project dependencies efficiently. Fri, 11 Oct 2024 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) pnpmaliases.zprofile.bash_profile https://www.leohuynh.dev/blog/vscode-settings https://www.leohuynh.dev/blog/vscode-settings My personal VSCode configurations, settings, and key bindings that I use across all my devices. Fri, 11 Oct 2024 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) vscodesettingskeybindings https://www.leohuynh.dev/blog/how-to-setup-namecheap-private-email-to-work-with-vercel-dns https://www.leohuynh.dev/blog/how-to-setup-namecheap-private-email-to-work-with-vercel-dns A step by step guide on how to get your Namecheap private email to work with Vercel DNS. Tue, 08 Oct 2024 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) private-emailnamecheapverceldns https://www.leohuynh.dev/blog/on-tailwind-css-arbitrary-values https://www.leohuynh.dev/blog/on-tailwind-css-arbitrary-values How to use arbitrary values in Tailwind CSS to create custom styles for your components. Some nice tips to make your Tailwind CSS workflow more efficient. Fri, 04 Oct 2024 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) tailwind-cssarbitrary-valuescustom-styles https://www.leohuynh.dev/blog/npm-commands https://www.leohuynh.dev/blog/npm-commands Essential npm commands for local development, covering package installation, version control, and script management. Tue, 26 Sep 2023 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) npmcommandsnpxlinkunlink https://www.leohuynh.dev/blog/does-promise-all-run-in-parallel-or-sequential https://www.leohuynh.dev/blog/does-promise-all-run-in-parallel-or-sequential JavaScript is a single-threaded programming language, so it can't run multiple things at the same time, Promise.all() actually runs promises concurrently, not in parallel!. Let's dive in to see how it works. Mon, 04 Sep 2023 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) javascriptpromiseparallelsequentialconcurrently https://www.leohuynh.dev/blog/remixing-remix-submission https://www.leohuynh.dev/blog/remixing-remix-submission Create a custom hook to manage in-route form submissions in a Remix app. Mon, 04 Sep 2023 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) remixremix-utilssubmissionhooks https://www.leohuynh.dev/blog/verify-github-webhooks-requests https://www.leohuynh.dev/blog/verify-github-webhooks-requests Verify and process incoming GitHub webhooks. How to set up listeners, validate requests, and handle Github's webhook events. Sun, 09 Jul 2023 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) githubwebhookgithub-apiverify-webhook-signatureremix https://www.leohuynh.dev/blog/using-spotify-api-to-display-currently-playing-track https://www.leohuynh.dev/blog/using-spotify-api-to-display-currently-playing-track Retrieve a Spotify access token to display the currently playing track on your website or application. Thu, 06 Apr 2023 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) spotifynowplayingspotify-apinextjs https://www.leohuynh.dev/blog/render-blocking-css-and-chrome-performance-api https://www.leohuynh.dev/blog/render-blocking-css-and-chrome-performance-api Learn how to improve your website's performance and enhance user experience by avoiding render blocking CSS. Using the Chrome Performance API to measure and optimize page rendering time. Sat, 11 Mar 2023 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) render-blocking-resourcesrender-blocking-cssperformancechrome-performance-api https://www.leohuynh.dev/blog/migrate-shopify-store-files-to-new-store-using-file-api https://www.leohuynh.dev/blog/migrate-shopify-store-files-to-new-store-using-file-api Learn how to migrate your assets from an old Shopify store to a new one in a few simple steps. This guide will show you how to retrieve and download your images using GraphQL and Node.js, and upload them to your new store with ease. Sat, 25 Feb 2023 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) shopifyassetsfile-apimigrationgraphqlnodejs https://www.leohuynh.dev/blog/casing-utils https://www.leohuynh.dev/blog/casing-utils A various ready-to-use string casing utilities in Typescript. Tue, 21 Feb 2023 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) javascripttypescriptstringcasingutilities https://www.leohuynh.dev/blog/introduction-to-committing-with-conventional-commit https://www.leohuynh.dev/blog/introduction-to-committing-with-conventional-commit Conventional commit is a specific form of committing which gives software developers a uniform system for organizing and describing their changes, making it easier to keep track of updates Sun, 01 Jan 2023 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) commitgitconventional-commit https://www.leohuynh.dev/blog/better-responsive-image-with-srcset-and-sizes-attributes https://www.leohuynh.dev/blog/better-responsive-image-with-srcset-and-sizes-attributes A guide to using the srcset and sizes attributes to create responsive images Tue, 25 Oct 2022 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) responsiveimagesrcsetsizeshtmlattributes https://www.leohuynh.dev/blog/rename-a-case-sensitive-file-in-a-git-repo https://www.leohuynh.dev/blog/rename-a-case-sensitive-file-in-a-git-repo Safely rename case-sensitive files or directories in a Git repository to avoid conflicts or case inconsistencies. Tue, 11 Oct 2022 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) gitrenamecase-sensitive https://www.leohuynh.dev/blog/remove-falsy-values-from-an-object https://www.leohuynh.dev/blog/remove-falsy-values-from-an-object Recursively removes all falsy values (null, undefined, 0, false) from an object and its nested properties. Wed, 21 Sep 2022 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) javascriptutilsobject https://www.leohuynh.dev/blog/use-https-in-local-development https://www.leohuynh.dev/blog/use-https-in-local-development The simplest way to set up an HTTPS server in Nodejs application when developing locally Sat, 05 Mar 2022 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) httpslocalhostnodejsopen-ssl443mac-oskoajs https://www.leohuynh.dev/blog/use-async https://www.leohuynh.dev/blog/use-async Build a custom React hook to use asynchronous effects inside functional components. Tue, 22 Feb 2022 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) reacthooksasynceffect https://www.leohuynh.dev/blog/color-validator https://www.leohuynh.dev/blog/color-validator Validate strings to ensure they represent valid colors in various formats (hex, RGB, and named colors). Tue, 12 Oct 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) typescriptcolorvalidator https://www.leohuynh.dev/blog/shopify-section-rendering-apis-notes https://www.leohuynh.dev/blog/shopify-section-rendering-apis-notes Learn how to leverage Section Rendering APIs to improve your Shopify store's performance and create dynamic, context-specific sections. Discover tips for querying dynamic section markup, including product and collection context Thu, 23 Sep 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) shopifysectionsection-rendering-apiskey-notes https://www.leohuynh.dev/blog/find-and-kill-process-on-given-port-in-macos https://www.leohuynh.dev/blog/find-and-kill-process-on-given-port-in-macos Identify and terminate processes running on a specific port in your dev environment. Thu, 09 Sep 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) bashmacoskillprocessport https://www.leohuynh.dev/blog/markdown-code-block-syntax https://www.leohuynh.dev/blog/markdown-code-block-syntax A detailed overview of Markdown code block syntaxes, covering both basic and advanced use cases. Thu, 09 Sep 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) markdowncode-blocksyntax https://www.leohuynh.dev/blog/event-emitter https://www.leohuynh.dev/blog/event-emitter A lightweight pub/sub mechanism to handle custom events without adding a full-blown library. Mon, 06 Sep 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) javascriptpatternevent-emitterpubsub https://www.leohuynh.dev/blog/embed-script-using-github-and-jsdelivr https://www.leohuynh.dev/blog/embed-script-using-github-and-jsdelivr Learn how to embed scripts and styles in your web pages without the need to modify your site's existing code. Use Github to host your script and style files, and jsDelivr as a CDN to deliver them to your web page. Sun, 05 Sep 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) tutorialsharingembedgithubjsdelivr https://www.leohuynh.dev/blog/manipulating-dates-in-shopify-liquid https://www.leohuynh.dev/blog/manipulating-dates-in-shopify-liquid How to manipulate dates (adding, subtracting, and formatting, etc) in Shopify's Liquid template language. Sun, 29 Aug 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) liquidshopifydate https://www.leohuynh.dev/blog/read-all-file-names-inside-a-folder https://www.leohuynh.dev/blog/read-all-file-names-inside-a-folder A quick utility to read all file names in a directory using Node.js. Sat, 28 Aug 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) bashshellscript https://www.leohuynh.dev/blog/vnese-to-plain-english https://www.leohuynh.dev/blog/vnese-to-plain-english Convert Vietnamese text to plain English by replacing accented characters with their equivalents. Sat, 28 Aug 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) javascriptregexreplace https://www.leohuynh.dev/blog/gitignore-ignore-directory-keep-1-file https://www.leohuynh.dev/blog/gitignore-ignore-directory-keep-1-file How to ignore all files in a directory except for a specific one. Fri, 27 Aug 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) gitgitignore https://www.leohuynh.dev/blog/sync-react-component-state-with-local-storage https://www.leohuynh.dev/blog/sync-react-component-state-with-local-storage Utilize a custom hook that syncs state with local storage, allowing for persistent state between sessions. Fri, 27 Aug 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) reactstatehookslocal-storage https://www.leohuynh.dev/blog/prevent-layout-shift-while-show-hide-scrollbar-on-window https://www.leohuynh.dev/blog/prevent-layout-shift-while-show-hide-scrollbar-on-window When toggling the scrollbar on the Window, the layout shifts. This is because the scrollbar is added to the Window. How to prevent this with CSS? Mon, 16 Aug 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) csstrickslayout-shiftscrollbarwindow https://www.leohuynh.dev/blog/key-notes-while-working-with-git https://www.leohuynh.dev/blog/key-notes-while-working-with-git Key notes to save plenty of time while working with git for command-line-developer Thu, 12 Aug 2021 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) gitgit-notesgit-aliasgit-workflows https://www.leohuynh.dev/blog/drag-n-drop-api-keynotes https://www.leohuynh.dev/blog/drag-n-drop-api-keynotes Some keynotes to keep in mind when working with Drag and Drop APIs in Javascript Sun, 25 Oct 2020 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) drag-and-dropdndkeynotesapijavascript https://www.leohuynh.dev/blog/tricky-use-case-of-array-map-in-js https://www.leohuynh.dev/blog/tricky-use-case-of-array-map-in-js If you are familiar with functional programming, Array.prototype.map must be a function that you work with every day. We encountered a tricky use case of it at Cốc Cốc recently, it took me a while to figure out, and here's the answer... Tue, 22 Sep 2020 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) javascriptarraymapfunctional-programminguse-cases https://www.leohuynh.dev/blog/function-declaration-vs-function-expression-in-js https://www.leohuynh.dev/blog/function-declaration-vs-function-expression-in-js Learn about the differences between Function Declaration and Function Expression in JavaScript, including their definitions, hoisting behavior, and when to use each method. Thu, 17 Sep 2020 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) javascriptfunctionfunction-declarationfunction-expressionanonymous-functionarrow-functiones5es6 https://www.leohuynh.dev/blog/integrate-tailwind-css-with-react-application https://www.leohuynh.dev/blog/integrate-tailwind-css-with-react-application Tailwind CSS is a low-level CSS framework that’s highly customizable. Unlike other frameworks that focus on pre-designed components like buttons, cards, or modals, which are easy to start with but hard to customize later, Tailwind lets you build your own designs from scratch using utility classes... Mon, 31 Aug 2020 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) tailwind-cssreactpostcssintegration https://www.leohuynh.dev/blog/set-up-path-aliases-in-nodejs https://www.leohuynh.dev/blog/set-up-path-aliases-in-nodejs Tired of dealing with complex file paths in your Node.js project? Learn how to set up module aliases using TypeScript and module-alias package to simplify your imports and improve your development experience. Thu, 27 Aug 2020 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) nodejstypescriptjavascriptaliaspath-aliasestsconfig https://www.leohuynh.dev/blog/nodejs-fetch-json-with-https https://www.leohuynh.dev/blog/nodejs-fetch-json-with-https Learn how to make HTTP requests in Node.js without adding unnecessary dependencies to your project using the built-in https module. Follow these simple steps to easily fetch JSON data from external APIs and servers. Tue, 18 Aug 2020 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) nodejsrequestjsonhttpsbuilt-in-module https://www.leohuynh.dev/blog/how-should-developers-looking-for-a-job-part-2 https://www.leohuynh.dev/blog/how-should-developers-looking-for-a-job-part-2 What’s the dev interview process like? How do you negotiate a good salary and find the right company to grow your career... Fri, 31 Jul 2020 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) jobinterviewoffersalarycompany https://www.leohuynh.dev/blog/how-should-developers-looking-for-a-job-part-1 https://www.leohuynh.dev/blog/how-should-developers-looking-for-a-job-part-1 The demand for IT recruitment is very high. As a software engineer, what should you prepare to get a good job and always be sought after by recruiters... Tue, 28 Jul 2020 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) jobcvlinkedin https://www.leohuynh.dev/blog/deploy-and-config-website-on-namecheap-part-2 https://www.leohuynh.dev/blog/deploy-and-config-website-on-namecheap-part-2 In the previous part, I guided you through buying and connecting your domain to hosting, and activating the SSL Certificate. In this part, I’ll show you how to push your code to the server to get your website live... Sat, 25 Apr 2020 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) deploymentdomainhostingdnsnamecheap https://www.leohuynh.dev/blog/deploy-and-config-website-on-name-cheap-part-1 https://www.leohuynh.dev/blog/deploy-and-config-website-on-name-cheap-part-1 I’ve always wanted to have my own personal site, but due to lack of time, I only got to work on it recently during my stay-at-home time... Thu, 23 Apr 2020 00:00:00 GMT contact@leohuynh.dev (Leo Huynh) deploymentdomainhostingdnsnamecheap