Detect Caps Lock with JavaScript / / No Comments Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password input, the problem isn’t so obvious. That leads to the user’s password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated. To detect if a user has their keyboard’s caps lock turn on, we’ll employ KeyboardEvent‘s getModifierState method: document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) { const capsLockOn = keyboardEvent.getModifierState('CapsLock'); if (capsLockOn)... more → Posted in: JavaScript Tagged with: Caps, Detect, JavaScript, Lock
Using Generative AI to Detect Cat Breeds / / No Comments Let’s be honest, what other use is there for generative AI than working with cats? If you read my previous post on Google’s Gemini AI launch, you may have seen my test prompts asking it to identify the kind of cat shown in a picture. I decided to turn this into a proper web application as a real example of the API in action. Here’s what I came up with. The Front End # For the front end, I decided to make use of a native web platform feature to access the user’s camera via a simple HTML form field. By using capture="camera" on an input tag, you directly get access to the device camera. There are more advanced ways of doing this, but for quick and simple, it works... more → Posted in: JavaScript Tagged with: Breeds, Detect, Generative, using
How to Detect Failed Requests via Web Extensions / / No Comments One of the best things that ever happened to t he user experience of the web has been web extensions. Browsers are powerful but extensions bring a new level of functionality. Whether it’s crypto wallets, media players, or other popular plugins, web extensions have become essential to every day tasks. Working on MetaMask, I am thrust into a world of making everything Ethereum-centric work. One of those functionalities is ensuring that .eth domains resolve to ENS when input to the address bar. Requests to https://vitalik.ethnaturally fail, since .eth isn’t a natively supported top level domain, so we need to intercept this errant request. // Add an onErrorOccurred event via the... more → Posted in: JavaScript Tagged with: Detect, Extensions, Failed, Requests
Detect Browser Bars Visibility with JavaScript / / No Comments It’s one thing to know about what’s in the browser document, it’s another to have insight as to the user’s browser itself. We’ve gotten past detecting which browser the user is using, and we’re now into knowing what pieces of the browser UI users are seeing. Browsers provide window.personalbar, window.locationbar, and window.menubar properties, with the shape of { visible : /*boolean*/} as its value: if(window.personalbar.visible || window.locationbar.visible || window.menubar.visible) { console.log("Please hide your personal, location, and menubar for maximum screen space"); } What would you use these properties for? Maybe providing a warning to users... more → Posted in: JavaScript Tagged with: Bars, browser, Detect, JavaScript, visibility
Detect the Content Type in the Clipboard / / No Comments A user’s clipboard is a “catch all” between the operating system and the apps employed on it. When you use a web browser, you can highlight text or right-click an image and select “Copy Image”. That made me think about how developers can detect what is in the clipboard. You can retrieve the contents of the user’s clipboard using the navigator.clipboard API. This API requires user permission as the clipboard could contain sensitive data. You can employ the following JavaScript to get permission to use the clipboard API: const result = await navigator.permissions.query({name: "clipboard-write"}); if (result.state === "granted" || result.state === "prompt") {... more → Posted in: JavaScript Tagged with: Clipboard, Content, Detect, type
Detect XR Support with JavaScript / / No Comments A few years ago I wrote an article about how to detect VR support with JavaScript. Since that time, a whole lot has changed. “Augmented reality” became a thing and terminology has moved to “XR”, instead of VR or AR. As such, the API has needed to evolve. The presence of navigator.xr signals that the browser supports the WebXR API and XR devices: const supportsXR = 'xr' in window.navigator; I really like using in for feature checking rather than if(navigator.xr), as simply invoking that could cause some initialization to take place. In future posts we’ll explore identifying and connecting to different devices. The post Detect XR Support with JavaScript appeared... more → Posted in: JavaScript Tagged with: Detect, JavaScript, Support
Detect System Theme Preference Change Using JavaScript / / No Comments JavaScript and CSS allow users to detect the user theme preference with CSS’ prefers-color-scheme media query. It’s standard these days to use that preference to show the dark or light theme on a given website. But what if the user changes their preference while using your app? To detect a system theme preference change using JavaScript, you need to combine matchMedia, prefers-color-scheme, and an event listener: window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change',({ matches }) ={ if (matches) { console.log("change to dark mode!") } else { console.log("change to light mode!") } }) The change event of the matchMedia API notifies you... more → Posted in: JavaScript Tagged with: Change, Detect, JavaScript, Preference, system, theme, using
Detect Dark Mode Preference with JavaScript / / No Comments Seemingly every website, dapp, and app offers a dark mode preference, and thank goodness. Dark mode is especially useful when I’m doing late night coding, or even worse, trading into altcoins. I’m presently working on implementing a dark theme on MetaMask and it got me to thinking: is there a way we can default to dark mode if the user’s operating system also defaults to dark mode? You can determine if the user’s operating system prefers dark mode with one quick line of code: const prefersDarkMode = window.matchMedia("(prefers-color-scheme:dark)").matches; // true This code snippet takes advantage of the CSS prefers-color-scheme media query with JavaScript’s... more → Posted in: JavaScript Tagged with: dark, Detect, JavaScript, Mode, Preference