Category: Snippets
-
Javascript – Intercept Fetch Requests
Modern web applications often rely on asynchronous HTTP requests (commonly known as Ajax requests) to communicate with servers without needing to reload the page. This JavaScript code snippet provides a mechanism to intercept and handle fetch requests globally, allowing developers to execute custom logic at various stages of the request lifecycle. The Code How It…
-
Javascript – Check if images are fully loaded
Web developers often face the challenge of executing scripts that depend on the complete loading of all images on a page. This JavaScript code snippet provides a reliable way to run a script only after verifying that every image has finished loading, enhancing the user experience by ensuring that visual content is ready before initiating…
-
Javascript – Detecting user’s theme preference in Browsers
Modern web development practices emphasize the importance of respecting user preferences, especially when it comes to visual aspects like color schemes. The JavaScript code snippet provided offers a simple yet effective way to detect whether a user prefers a dark theme based on their system settings. The Code How It Works The window.matchMedia method is…
-
SCSS – Font Family variables for streamlined styling
Managing typography across a website can be a complex task, especially when dealing with multiple font families. The SCSS snippet below sets up a system of variables for font families, making it easy to maintain and update fonts throughout your site’s stylesheets. Defining Font Family Variables This SCSS map $fonts defines a series of font…
-
SCSS – Flexible Animation
In modern web development, animations play a key role in enhancing user experience and interactivity. The SCSS snippet provided allows developers to create a highly flexible and customizable fade-in animation using CSS variables within keyframes. Keyframe Definition with Customizable Variables This @keyframes rule, named fadeFromBottom, defines a vertical fade-in animation. The animation starts with the…
-
WordPress – Enhance Gutenberg blocks with custom attributes using HTML API
Tailoring the Gutenberg editor’s blocks to meet your website’s specific needs is now more straightforward with WordPress’s HTML API. The following PHP code snippet demonstrates how to add custom classes and attributes to the content of native Gutenberg paragraph, list, and image blocks. The Code How It Enhances Your Blocks Benefits for Your WordPress Site…
-
WordPress – Add page specific body classes
In web design, CSS plays a crucial role in customizing the look and feel of individual pages. To give you more power over styling, the following PHP snippet allows you to dynamically add the page slug as a class to the <body> tag of each page on your WordPress site. The Code How It Functions…
-
WordPress – Remove auto p in excerpt
WordPress automatically applies paragraph formatting to excerpts using the <p> tag, which can sometimes disrupt the desired layout or styling of your website. If you’re looking to have more control over how your excerpts are displayed, the following PHP code snippet allows you to remove WordPress’s default automatic paragraph tagging and gives you the option…
-
WordPress – Boost GraphQL query limits
When working with GraphQL in WordPress, you might encounter limitations on the number of queries you can execute. By default, GraphQL imposes a cap to ensure performance and server health. However, there are scenarios where you need to increase this limit to accommodate larger data sets or complex queries. The following snippet of code allows…
-
WordPress – Handle theme.json RGB color transparency
WordPress’s theme.json has brought unparalleled ease to theme customization. However, the default color settings, which are typically in hexadecimal format, lack support for transparency. To enhance your theme’s color capabilities, we’ve developed a solution that introduces RGB color values with transparency. Find out how to do it with HSL here. The Code Our custom PHP…