Author: Victor
-
Streamline your dev workflow with Husky
As developers, we’re always on the lookout for tools and tricks that can shave off precious minutes from our workflow, ensuring that we maintain our focus on writing clean, efficient code rather than getting bogged down by repetitive tasks. One such tool that has become an indispensable part of the modern developer’s toolkit is Husky,…
-
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…