Author: Victor
-
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…
-
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…