Tag: JS
-
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
-
JavaScript – Set Scrollbar Size as a CSS Variable
Managing layout shifts and space allocation in web design can be tricky when considering the variable size of scrollbars across different browsers and operating systems. This JavaScript function, dynamically calculates the size of the scrollbar and sets it as a CSS custom property, making it easier to handle layout adjustments. Function Overview The function putScrollbarSizeInCSSVariable
-
Implementing Custom Popups with HTML, CSS, and JavaScript
Creating interactive popups can greatly enhance user engagement on websites. This implementation showcases a simple yet effective way to create custom popups using native HTML <dialog> elements, accompanied by CSS for styling and JavaScript for functionality. HTML Structure for Popups The HTML structure includes two main sections: one with buttons to trigger the popups and
-
Javascript – Simplified AJAX Request functions
This JavaScript module introduces a concise and flexible way to handle HTTP requests with a primary request function and specialized get and post helper functions. The system is designed to support both GET and POST methods with easy parameter management and response formatting. Function Definition The request function serves as the core utility, enabling: Usage