Code Blog

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

Creating a Table of Contents for a Successful Design System

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

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

Understanding Viewport Orientation Change Times for a Flawless Mobile Experience

A seamless transition between portrait and landscape modes is crucial for a smooth user experience on tablets and smartphones. This transition speed is dictated by viewport orientation change times. In this blog post, we'll explore the factors impacting these times and provide optimization tips for a flawless mobile experience across your apps and websites.

How to Make a Themeable SVG Favicon

Code Examples of the Media Creators (NodeJS) website

Here is shown a few precious pieces of code, to help in the near future, when no one knows what this all is about.

How to Scale an SVG with CSS Only

Learn how to automatically scale an SVG using CSS, allowing for responsive and flexible SVG display on your website.

Custom Scrollbar with CSS (WebKit)

Learn how to customize the scrollbar with CSS for WebKit browsers, providing a visually appealing design for scrollable elements on your website.

How to Download an Entire Website

Learn how to download an entire website on MacOS/Linux and Windows using simple commands or tools like HTTrack. This guide provides step-by-step instructions for capturing website content for offline use or archiving purposes.

My Choice for Gatsby Markdown Code Highlighting and Why

Discover why I've chosen `gatsby-remark-vscode` as the code highlighting solution for the dc.tips website. This plugin leverages VS Code's extensions and themes, offering sophisticated syntax highlighting without relying on client-side JavaScript.

How to Speed Up WordPress Websites

This video provides a fundamental approach to achieving faster page load times for WordPress websites.

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

Learn how to customize the default WooCommerce "Add to Cart" button text to "Pre-order Now" for specific products. Follow this simple guide to enhance your online store's user experience.

Simple Accessible Accordion React Component

In the world of web development, accessibility is a crucial aspect often overlooked by many developers. It's not just about creating visually appealing websites or applications; it's also about ensuring that everyone, regardless of their abilities or disabilities, can access and use digital content effectively. One common UI component that requires special attention to accessibility is the accordion.

How to Add an Intro to a Website with JS

Learn how to add an introductory animation or content to your website using JavaScript. This tutorial demonstrates a simple approach to ensure the intro is played only once per session or on specific pages.

Replace Text with CSS Only

Learn how to replace text using CSS only, providing a visual alternative for situations where direct text replacement is not possible or practical. Please note that this solution is primarily visual and may not be ideal for highly accessible websites.

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

Learn how to check if WooCommerce products in the cart have a specific tag, such as "Bottle-Wine," and automatically remove them if they can't be shipped to the customer's country. This tutorial offers a practical solution for managing product restrictions based on shipping constraints.

WooCommerce: Redirect Users by Role to Specific URL After Login

Discover how to redirect "subscribers" and "shop managers" to specific URLs after logging into the WordPress admin. This tutorial is ideal for developers or website managers who want to control user access and provide tailored experiences.

Change SRC attribute for mobile images with Vanilla JS

This snippet is a great solution to change the SRC of an <img> HTML element with vanilla JS.

How to Add Thumbnails to WooCommerce's Grouped Products

Discover how to enhance the user experience by adding thumbnails to WooCommerce's grouped products. Additionally, learn a bonus tip for displaying all variations of a variable product on a single product page.

Defer JS on WordPress

Learn how to defer JavaScript on WordPress and dramatically improve your website's loading speed.

Remove zeros on WooCommerce (3 ways)

Learn three different approaches to remove zeros on WooCommerce, whether you need a global solution or a front-end-specific one.

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

Learn how to change specific texts, titles, terms, and strings "by hand" on WordPress or WooCommerce. Find out how in this post.

How to Add HTML Content to a Specific Page in WordPress

Are you looking to add a custom message popup to a specific page on your WordPress website? Whether it's for age verification, special promotions, or any other purpose, this guide will walk you through the process step by step.

How to add extra "Local Pickup" fields for shipping methods in WooCommerce?

Learn how to add extra fields’ options for the "Local Pickup" shipping methods on WooCommerce's Cart and Checkout page.

How to customize your /wp-admin with admin.css, and use CSS to print a PDF

Learn how to customize your /wp-admin with admin.css and how to style the WooCommerce's "Overview analytics" page to be printed as PDF.