Code Blog

2025

Implementing Content Moderation in Node.js with `bad-words`

Learn how to implement content moderation in a Node.js app using the bad-words package. Filter offensive words, handle nested fields, and improve user safety with this easy-to-follow guide. Perfect for web developers and API security!

What is a MITM Attack? (With Real-World Examples and Solutions)

Learn what a Man-in-the-Middle (MITM) attack is, explore real-world examples of famous cyberattacks, and discover effective solutions to prevent data interception, phishing, and network hijacking.

Preventing XSS: Best Practices for Frontend Developers

Secure your web applications with our comprehensive guide to preventing XSS attacks. Discover essential best practices for sanitizing inputs, escaping outputs, and implementing CSP—all tailored for frontend developers to enhance web security.

How to Secure Your Node.js API with JWT and Cookies

Discover how to secure your Node.js API using JWT and HttpOnly cookies in this comprehensive guide. Learn best practices for stateless authentication, secure cookie implementation, and robust data protection to safeguard user data and prevent unauthorized access.

Why Local Storage is Vulnerable to XSS Attacks (And a Safer Alternative)

Discover why relying on Local Storage can expose your web app to dangerous XSS attacks. This in-depth guide explains how sensitive data is at risk and shows why switching to HttpOnly Secure Cookies offers a far safer alternative for managing authentication tokens and user data.

Understanding the HTML `<template>` Tag: A Guide for Developers

Unlock the full potential of the HTML <template> tag with this comprehensive guide for developers. Learn how to build reusable, dynamic content with JavaScript, enhance performance, and implement best practices for modern web development.

Automating Daily Supabase Database Backups with Node.js

Automate your daily Supabase backups with Node.js in this step-by-step guide. Learn how to export tables to CSV, organize backups by date, and secure your data with best practices. Perfect for boosting backend productivity and ensuring reliable disaster recovery—even for complex apps like Bokkah.com.

Mastering TypeScript Decorators: A Beginner-to-Advanced Guide

Unlock the power of TypeScript decorators with our beginner-to-advanced guide. Discover practical techniques, Angular integration, and advanced metaprogramming tips to supercharge your web development skills.

Why Everyone Should Have Custom GPTs to Optimize Their Daily Tasks

Unlock your productivity potential with custom GPTs. Discover how personalized AI assistants streamline workflows by automating repetitive tasks, boosting efficiency, and empowering developers, entrepreneurs, and creatives to achieve more every day.

Moving from VS Code & WebStorm to NeoVim: A Fullstack Developer’s Guide

Switch from VS Code & WebStorm to NeoVim with this comprehensive guide for fullstack developers. Discover step-by-step setup tips, essential plugins, and performance hacks that boost efficiency, streamline your workflow, and offer unparalleled customization.

Strapi: The Ultimate Self-Hosted Headless CMS for Developers and Businesses

Discover Strapi – the open-source, self-hosted headless CMS that empowers developers and businesses with full control, flexible APIs, and robust security. Learn how to deploy, customize, and outperform competitors for a seamless digital experience.

From Slow to Instant: How I Made Bokkah.com Insanely Fast by Caching Images with a Service Worker

Discover how Bokkah.com transformed its slow-loading images into a lightning-fast browsing experience by leveraging a custom service worker in React. Learn how caching images reduces network requests, boosts Core Web Vitals, and optimizes your web app for a seamless PWA performance.

Mastering TypeScript’s `Extract<>`: Selective Type Extraction for Better Code

Unlock the power of TypeScript’s Extract<> utility to streamline your code. Discover how selective type extraction enhances reusability, reduces redundancy, and improves maintainability with practical examples and best practices.

Enum vs Type in TypeScript: Pros, Cons, and Best Use Cases

Discover the key differences between Enums and Union Types in TypeScript. This guide breaks down the pros, cons, and best use cases of each, helping you choose the right approach for cleaner, more efficient code.

Mastering OpenAI API in 2025: Use Cases, Pricing, and Practical Node.js Examples

Master the OpenAI API in 2025 with this comprehensive guide. Uncover detailed pricing insights, real-life use cases, and practical Node.js examples to build cost-efficient, scalable AI solutions.

Integrating PL/pgSQL and Supabase in Bokkah.com: A Real-World React Use Case

Discover how Bokkah.com seamlessly integrates PL/pgSQL and Supabase with React to build a dynamic follower count feature. This in-depth guide covers full-stack integration using Node.js and RPC to boost scalability and user engagement.

Getting Started with PL/pgSQL and Supabase

Unlock the power of PL/pgSQL on Supabase and transform your PostgreSQL development. Learn to build efficient functions and triggers that streamline backend logic and boost performance.

Translating a Custom Design System to Tailwind CSS

Transform your custom design system into a streamlined Tailwind CSS setup with this in-depth guide. Discover how to configure custom breakpoints, color palettes, typography, and shadows—with practical code snippets and a video walkthrough—to enhance responsive design and boost your front-end workflow.

A Guide to Accessibility Best Practices: No ARIA is Better Than Bad ARIA

Unlock superior web accessibility with this guide on ARIA best practices. Discover why “No ARIA is better than bad ARIA” and learn practical tips for using native HTML to create inclusive, user-friendly web experiences.

Discovering the Most Unknown Semantic HTML Tags: Hidden Gems for Better Accessibility and SEO

Unlock the hidden potential of semantic HTML with this guide on 10 underused tags that boost accessibility and SEO. Discover how gems like <main>, <mark>, and <time> can transform your website’s structure, enhancing content clarity for users and search engines alike. Elevate your code and optimize your site with these essential yet overlooked HTML elements.

Generating Frontend and Backend Knowledge Bases for Your Custom GPT

Unlock the power of custom GPTs in your development workflow. Learn how to generate comprehensive knowledge bases with a simple Node.js script that compiles your frontend and backend source files into easy-to-reference .txt files for smarter pair programming and efficient code review.

Leveraging ArrayBuffer to Convert Images to Base64 for Email Notifications

Optimize your email notifications with this guide on converting images to Base64 using ArrayBuffer. Discover efficient Node.js techniques, dynamic MIME type handling, and robust error management to seamlessly embed inline images in your emails.

Renaming Files in Bulk Using the Command Line: A Step-by-Step Guide

Automate tedious file renaming with this step-by-step guide. Discover how a simple Bash script and mapping file can quickly convert long file names into concise codes, saving you time and reducing errors.

The Ultimate Guide to BEM: From Basics to Advanced Techniques

Unlock the power of BEM (Block, Element, Modifier) with this ultimate guide. Dive into scalable, maintainable CSS techniques—from foundational concepts to advanced strategies—to elevate your web development and UI/UX design.

Creating a Table of Contents for a Successful Design System

Craft a great design system with an effective Table of Contents. Learn how to boost Storybook documentation and usability with best practices and real-world examples from industry leaders like Apple, IBM, and Material Design.

Tailwind CSS: Targeting Mouse Devices Only with `mouse-only:`

Unlock smoother hover interactions with Tailwind CSS by targeting mouse devices exclusively. Learn to build a custom “mouse-only” variant that optimizes desktop hover effects while preserving a seamless experience for touch users.

Should You Open-Source Your Starter Template? A Balanced Look at the Pros and Cons

Unlock the secrets to open-sourcing your starter template! In this post, explore how sharing your Next.js and Decap CMS project can boost your visibility, career opportunities, and community engagement while weighing challenges like maintenance and copying risks.

Understanding Viewport Orientation Change Times for a Flawless Mobile Experience

Optimize your mobile experience by mastering viewport orientation change times. Learn how device performance, CPU/GPU load, and background processes affect transitions—and discover practical tips to boost responsive design and user satisfaction.

Why Use Getters and Setters in JavaScript and TypeScript?

Discover the power of getters and setters in JavaScript and TypeScript! Learn how they enhance encapsulation, computed properties, validation, and performance, plus when to use (or avoid) them for clean, efficient code. 🚀 #JavaScript #TypeScript

How to Make a Themeable SVG Favicon

Boost your website’s style and performance with this step-by-step guide to creating a themeable SVG favicon. Learn how to design a responsive, scalable favicon that adapts seamlessly to both dark and light modes using CSS media queries and HTML integration. Perfect for web developers looking to enhance UI design and user experience.

Code Examples of the Media Creators (NodeJS) website

Explore innovative NodeJS code examples from the Media Creators website to optimize images, videos, and animations for varying connection speeds—boosting performance and enhancing user experience.

How to Scale an SVG with CSS Only

Unlock the power of SVG with this in-depth CSS-only tutorial. Learn step-by-step techniques to create responsive, flexible SVGs that adapt flawlessly to any screen—perfect for modern, high-performance web design.

Custom Scrollbar with CSS (WebKit)

Elevate your website’s design with this custom scrollbar tutorial. Learn how to style scrollable elements using CSS for WebKit browsers, boosting both aesthetics and user experience.

How to Download an Entire Website

Download entire websites effortlessly on MacOS/Linux and Windows with this step-by-step guide. Learn how to use wget and HTTrack for efficient offline archiving, backups, and website mirroring.

My Choice for Gatsby Markdown Code Highlighting and Why

Unlock the power of flawless code display with gatsby-remark-vscode! Discover how leveraging VS Code’s extensions and build-time rendering delivers superior Markdown syntax highlighting in Gatsby—no client-side JavaScript needed for fast, eye-catching code blocks.

How to Speed Up WordPress Websites

Boost your WordPress site speed with this comprehensive video guide. Discover essential strategies—efficient hosting, effective caching, image optimization, and CDN integration—to enhance performance and deliver a smoother user experience.

Change Default "Add to Cart" Button Text to "Pre-order Now" in WooCommerce

Boost your WooCommerce store’s conversion rates with a simple code tweak. This step-by-step guide shows you how to swap the default “Add to Cart” button for a “Pre-order Now” call-to-action on selected products, enhancing user experience and driving more sales.

Simple Accessible Accordion React Component

Discover how to build a simple, accessible accordion component in React that enhances web usability. This guide covers ARIA compliance, keyboard navigation, and screen reader support—essential techniques for inclusive web development.

How to Add an Intro to a Website with JS

Add a dynamic website intro with JavaScript. This tutorial demonstrates how to trigger an engaging animation only once per session using sessionStorage, ensuring a smooth user experience.

Replace Text with CSS Only

Discover a CSS-only trick to replace text visually using pseudo-elements! This tutorial shows you how to hide default text and insert custom content—ideal for quick web design tweaks (with accessibility caveats).

WooCommerce: Check if Products in Cart Have a Specific Tag and Remove Them If They Can't Be Shipped

Discover how to streamline your WooCommerce checkout with this PHP snippet that checks for products tagged “bottle-wine” and automatically removes non-shippable items. This guide helps you enforce shipping restrictions and boost customer satisfaction.

WooCommerce: Redirect Users by Role to Specific URL After Login

Unlock seamless user management in WooCommerce with this step-by-step guide on redirecting users by role after login. Learn how to use custom PHP code to send subscribers to targeted pages and guide shop managers directly to their admin dashboard for a secure, tailored experience.

Change SRC attribute for mobile images with Vanilla JS

Boost your mobile site’s performance with a simple vanilla JavaScript snippet. Learn how to dynamically update image SRC attributes for responsive design and faster load times.

How to Add Thumbnails to WooCommerce's Grouped Products

Boost your WooCommerce store’s UX with this step-by-step guide on adding thumbnails to grouped products. Learn how to showcase product images—and even all variable product variations—with a simple code tweak.

Defer JS on WordPress

Boost your WordPress site’s performance by deferring JavaScript! This guide shows you how a simple PHP tweak adds the defer attribute to your scripts—improving load times, enhancing user experience, and driving better SEO.

Remove zeros on WooCommerce (3 ways)

Streamline your WooCommerce store’s pricing display by removing trailing zeros with three simple methods. Learn how to use PHP and JavaScript solutions to enhance your site’s look without compromising backend functionality.

How to Change Specific Texts and Strings "by Hand" on WordPress

Unlock a simple, code-based method to manually update specific texts on your WordPress and WooCommerce sites. This step-by-step tutorial shows you how to safely modify titles, labels, and translation strings—without editing core files—for a cleaner, more customizable website.

Adding HTML to Specific WordPress Pages

Unlock the full potential of your WordPress site with this step-by-step guide on adding custom HTML to specific pages. Learn how to create targeted popups—perfect for age verification, special promotions, and more—to enhance user experience and boost engagement.

Adding Custom Local Pickup Fields in WooCommerce

Boost your WooCommerce store’s functionality with custom local pickup fields. This comprehensive guide provides PHP and jQuery code examples to add extra options on your cart and checkout pages—streamlining shipping methods and enhancing your customer’s pickup experience.

Understanding Semantic HTML: Why It Matters and How to Use It

Discover how Semantic HTML transforms web development by boosting accessibility, SEO, and maintainability. Learn best practices, WCAG 2.1 tips, and real-world examples to build future-proof websites.

Customizing WordPress Admin with CSS & PDF Printing

Unlock the full potential of your WordPress backend! This guide shows you how to customize your /wp-admin with a tailored admin.css and style WooCommerce’s analytics page for flawless PDF printing. Perfect for developers looking to streamline and enhance the WordPress admin experience.

The Evolution of Responsive Design: A Look Back and Forward

Discover the evolution of responsive design—from fixed layouts to mobile-first innovations. Learn how fluid grids, flexible images, and media queries revolutionized web development, enhancing UX and SEO. Dive into a history that set the stage for modern design trends and future innovations.