Category: Snippets
-
Safari’s position relative bug on Table rows
When working with tables in web development, making entire table rows clickable is a common requirement for better user experience. However, developers often encounter a peculiar issue in Safari: position: relative doesn’t work on <tr> elements as expected (also on all table like elements). Let’s dive into this problem and explore the solutions. https://mtsknn.fi/blog/relative-tr-in-safari
-
Client-Side block settings filtering in WordPress
WordPress’s block editor (Gutenberg) provides powerful customization capabilities through client-side filtering. This article explores how to curate the editor experience using the blockEditor.useSetting.before filter, introduced in WordPress 6.2. Understanding Client-Side Filtering The blockEditor.useSetting.before filter allows developers to modify block-level theme.json settings before the editor renders. Unlike server-side filters, this client-side approach offers greater control and…
-
React – Custom Visibility Hook
In today’s fast-paced digital world, optimizing user experience and resource management is crucial. One way to achieve this is by leveraging the Visibility API to detect whether your application is currently visible to the user. This can be particularly useful in scenarios where you want to conserve resources or enhance user engagement. In this post,…
-
Get user font size browser preference
In web development, adapting to user preferences is crucial for delivering an optimal user experience. This JavaScript function is designed to detect a user’s base font size preference, allowing developers to tailor their web applications accordingly. The Code How It Operates The getUserFontSizePreference function assesses the user’s preferred base font size, specifically focusing on rem…
-
Simplify WordPress
Managing a WordPress site can sometimes feel overwhelming with all the extra features and functionalities that might not be necessary for everyone. The “Headache” snippet is a collection of code functions designed to remove or disable various WordPress elements that might be considered redundant or unnecessary for the average user. Below, we’ll go through each…
-
Editing an ACF Field Key/Value in WordPress with SQL
Introduction When managing a WordPress website with Advanced Custom Fields (ACF), there are times when you may need to update the keys or values of custom fields. This can be necessary due to renaming fields or changing field structures. This guide provides quick SQL solutions for updating ACF field keys and values directly in the…
-
WordPress – Updating site URL with WP-CLI
A common task for WordPress developers is to migrate a site from a production environment to a local development environment. One of the crucial steps in this process is updating the URLs in the database to reflect the local environment. This can be efficiently achieved using WP-CLI, the command-line interface for WordPress. Prerequisites Step-by-Step Guide…
-
SCSS – Convert HEX to RGB
When working with colors in web design, it’s often necessary to convert between different color formats. The SCSS function hexToRGBString simplifies the process of converting a hexadecimal color value to an RGB string, which can be particularly useful for dynamic styling and JavaScript interactions. The Code How It Operates The hexToRGBString function takes a hexadecimal…
-
SCSS – Convert HEX to HSL
Manipulating colors in web design is a common task, and sometimes you need to convert color formats to achieve the desired effect or compatibility. The SCSS function hexTohslString provides a straightforward way to convert a hexadecimal color value to an HSL (Hue, Saturation, Lightness) string, which can then be used within your stylesheets. The Code…
-
Javascript – Stylish console logs
Console logs are a developer’s trusty sidekick for debugging and providing information during the development process. While typically used for outputting plain text, console logs can also be styled to catch the eye and convey messages with a bit of flair. The JavaScript code snippet below showcases how to add custom styles to your console…