Detect XR Support with JavaScript

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

Another Update to my Slideshow Web Component – JavaScript Support

Last month I shared a simple web component I built to embed slideshows onto web pages. If you didn’t get a chance to read that, you can see it in action in this CodePen below: See the Pen Slideshow Web Component by Raymond Camden (@cfjedimaster) on CodePen. After I wrote this, Šime Vidas shared an excellent update to my component with some great modifications. I talked about this version in a blog post, and it’s the version I’ll be using for my post today. What am I covering today? When I demonstrated how to use my web component, it was done via a script include (well, it’s on CodePen, but you get the idea), and then a bit of HTML. Here’s an example. (And... more →
Posted in: JavaScript

How to Determine a JavaScript Promise’s Status

Promises have changed the landscape of JavaScript. Many old APIs have been reincarnated to use Promises (XHR to fetch, Battery API), while new APIs trend toward Promises. Developers can use async/await to handle promises, or then/catch/finally with callbacks, but what Promises don’t tell you is their status. Wouldn’t it be great if the Promise.prototype provided developers a status property to know whether a promise is rejected, resolved, or just done? My research led me to this gist which I found quite clever. I took some time to modify a bit of code and add comments. The following solution provides helper methods for determining a Promise’s status: // Uses setTimeout with... more →
Posted in: JavaScript

Detect System Theme Preference Change Using JavaScript

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

Convert Fahrenheit to Celsius with JavaScript

The United States is one of the last bodies that refuses to implement the Celsius temperature standard. Why? Because we’re arrogant and feel like we don’t need to change. With that said, if you code for users outside the US, it’s important to provide localized weather data to users. Let’s took at how you can convert between Fahrenheit and Celsius. Fahrenheit to Celsius The formula to convert Fahrenheit to Celsius is: °C = 5/9 x (°F - 32) The following function converts Fahrenheit to Celsius: function convertFahrenheitToCelsius(degrees) { return Math.floor(5 / 9 * (degrees - 32)); } Celsius to Fahrenheit The formula to convert Celsius to Fahrenheit is: °F = (°C... more →
Posted in: JavaScript

How to Internationalize Numbers with JavaScript

Presenting numbers in a readable format takes many forms, from visual charts to simply adding punctuation. Those punctuation, however, are different based on internationalization. Some countries use , for decimal, while others use .. Worried about having to code for all this madness? Don’t — JavaScript provides a method do the hard work for you! The Number primitive has a toLocaleString method to do the basic formatting for you: const price = 16601.91; // Basic decimal format, no providing locale // Uses locale provided by browser since none defined price.toLocaleString(); // "16,601.91" // Provide a specific locale price.toLocaleString('de-DE'); // "16.601,91" // Formatting... more →
Posted in: JavaScript

How to Extend Prototypes with JavaScript

One of the ideological sticking points of the first JavaScript framework was was extending prototypes vs. wrapping functions. Frameworks like MooTools and Prototype extended prototypes while jQuery and other smaller frameworks did not. Each had their benefits, but ultimately all these years later I still believe that the ability to extend native prototypes is a massive feature of JavaScript. Let’s check out how easy it is to empower every instance of a primitive by extending prototypes! Every JavaScript native, like Number, String, Array, Object, etc. has a prototype. Every method on a prototype is inherited by every instance of that object. For example, we can provide every `Array... more →
Posted in: JavaScript

Skip or Only Run a Test with JavaScript Mocha

Whenever I start to feel anxiety about a big change I’m making, I start writing more unit tests. I’ll write down my fear and then write a test that attacks, and eventually relaxes, that fear. There are two actions that I’ve been frequently using with test writing: skipping all but one test or single tests. Skip a Test Oftentimes I will create tests with empty bodies so that I don’t forget to write them. To skip a test which is incomplete or known to fail, you can use xit: xit('does the thing I want', () ={ }); Once the test is complete or ready to be applied, you can change xit back to it. Run a Single Test To run only a single test with the Mocha test framework,... more →
Posted in: JavaScript
1 2 3 4 5 52