Carlo Gino Catapang articles - 37 total
Build a multilingual NextJS app using the new app directory - cookie-based
Learn how to build a multilingual NextJS app using the new app directory and i18next library ...
CodeCraft: Full-Stack Chapter 3
The hammering sounds of construction woke Jason as sunlight filtered through the window of the small...
CodeCraft: Full-Stack Chapter 2
Jason awoke to unfamiliar sounds replacing the city's usual hum. The chirping of unknown birds and...
CodeCraft: Full-Stack Chapter 1
It was a sunny day, the city soaking in the warmth of the sun. The skyline was a testament to the...
CodeCraft: Full-Stack Chapter 0
In a world where spells were cast with the precision of finely written code and magical laws operated...
CodeCraft: The Full-Stack Wizard's Journey Part 2
Check the text-to-speech version here(might sound very robotic). Chapter 13: Cloud...
Build a free link shortener with Next.js and Vercel Postgres
Create a link shortener with Next.js and Vercel Postgres. Learn dynamic routing, database connection,...
Build a multilingual NextJS app using the new app directory
Learn how to build a multilingual NextJS app using the new app directory and i18next library ...
Build a simple AI-powered Q&A using Next.js and OpenAI Text Completion
TL;DR Check these API implementation and frontend implementation on Github. ...
I asked ChatGPT to generate a song about centering a div
[Verse 1] I'm a Frontend dev, with my code so tight I'm gonna center this div and make it look just...
Synchronize Chrome Extensions state using custom events
How to use custom events to sync state between Chrome Extension instances ...
Add an Options Page to Chrome Extension
Learn how to add an options page to your Chrome Extension Introduction This is a...
Svelte and Tailwind for building Chrome Extension
A step-by-step guide on how to create a Chrome Extension using Svelte and Tailwind CSS ...
You probably don't know how JavaScript hoisting works
What we used to know According to w3schools "Hoisting is JavaScript's default...
Sync React application state with the URL
A simplified approach to managing external states TL;DR Check the github repo here Jump...
How to fetch NFT collection using JavaScript and OpenSea API
TLDR Check the code here Check my list of NFTs here ...
NextJS i18n/Internationalization
Table of Contents TL;DR Source and Demo Introduction Project Setup Internationalized...
Remix Search Engine Optimization
TL;DR Here is the Remix SEO checklist High quality...
How to make your web page appear in Google Search results
Table of Contents Introduction Prerequisites Verify ownership Index the page Test the web...
Lighthouse Best Practices Cheat Sheet
TL;DR Use Lighthouse to check if your website is following the list of best practices....
Search Engine Optimization Cheat Sheet
Table of Contents Introduction Page Speed SEO Specific Guidelines TL;DR Use...
Web Accessibility Cheat Sheet
Table of Contents Introduction ARIA Navigation Semantic...
Web Performance Cheat Sheet
Table of Contents Introduction (LCP) Largest Contentful Paint (FCP) First Contentful...
How to handle errors gracefully in Remix
Using ErrorBoundary and CatchBoundary in error handling How Remix handles...
Remix and Supabase Authentication
How to secure a Remix and Supabase application using Row Level Security NOTE: This...
Styling Remix using Tailwind and PostCSS
Table of Contents TL;DR: Source and Demo Introduction Dependencies Add scripts Styles...
Styling Remix using Vanilla CSS
Table of Contents TL;DR: Source and Demo Introduction Cleaning up Global...
Remix and Database integration
Table Of Contents TL;DR Source and Demo Preface App Overview Prerequisites Supabase...
Newsletter to subscribe to
Being in a fast-paced industry, we need to update our skills to stay relevant to perform our jobs...
Getting started with Remix
What is Remix? Remix is a relatively "new" React framework which was open sourced on 23rd...