David Walsh Blog

5 Web Design Trends for 2023 That You Should Pay Attention To (Sponsored)

David Walsh — Tue, 17 Jan 2023 14:00:41 +0000

The start of a new year is usually a time when we start looking for ways to make something a little better. That something could be our life, work, or what we produce. Web designers, for example, might look for ways to make their designs more interesting or effective.

+ + + +

In this post we will focus on 5 web design trends that are designed to help users get the most from the websites they visit and we will use 10 pre-built websites from BeTheme to demonstrate how best to implement those trends .

+ + + +

BeTheme is one of the world’s most popular and highly-rated WordPress Themes with 268,000+ sales and a 4.83/5 star-rating.

+ + + +

5 new web design trends for 2023

+ + + +

To improve anything, you have to know what it does or how it functions and what can have an impact on its performance, whether that impact is positive or negative.

+ + + +

In our case, we want to have a impact on web design that will lead to improvements, which is what web design trends are expected to do. What follows is a discussion on how 5 trends designed to act in the best interests of web users can be implemented.

+ + + +

1. The benefits of hoverable iconography

+ + + +

One effective way of avoiding clutter is to keep the amount of text on a page to a minimum. A strategic use of icons can admirably serve that purpose – assuming users understand what the icons represent!

+ + + +

When a situation is encountered where an icon would serve a purpose but it is not a familiar one, it would appear to be a no-win situation. You could of course add text, but that would contribute to clutter – or would it?

+ + + +

Let us first start with an example of familiar icons. On the BeBiker 4 website there are three icons on the left for:

+ + + +

Shopping bag/cart
Search
Account

+ + + +

When these icons are used over and over again, on one website or many, users immediately understand what they represent.

+ + + +

How then, do you address icons that are less familiar or don’t give a user an obvious clue as to what they represent?

+ + + +

You could give each one a brief description, but that would require adding text – which, as you will see in the BeJeweler 2 site, is not a bad idea, but a very good one:

+ + + +

Hover-triggered helper text is the answer in this case, and it can have other uses as well since it can provide useful information without adding clutter. Hover-trigger helpers can increase user confidence and give those same users the impression that the website owner has their interests in mind.

+ + + +

2. Use social proof to build trust

+ + + +

Trust is an important part of relationship building, whether that relationship is personal or one a brand has with its customers. In the latter case, websites often serve as the initial touchpoints between brands and consumers and is where trust building needs to be initiated.

+ + + +

Using social proof to build trust is a trend many web designers will add to their skillsets in 2023.

+ + + +

One effective trust building approach used in website design entails a page dedicated to genuine testimonials and reviews along with a home page section that does the same, as demonstrated in the following BeDoctor site example:

+ + + +

BeDoctor uses three distinctive trust-building types:

+ + + +

A customer satisfaction rate
A customer testimonial
An average customer rating

+ + + +

of which the latter could be linked to a ratings platform such as Google or Yelp.

+ + + +

Newer businesses that lack social proof to use for trust-building may need to rely on using trust marks instead. Placing an icon next to a “Checkout” button that signifies the transaction will be secure would be one example. Another example, shown in the approach taken by BeMarketing 2, is to add context to its website claims:

+ + + +

In this example, the “threefold” asterisk is repeated to include a brief textual statement linking to a page where proof to the claim is documented.

+ + + +

3. New mobile-specific trends

+ + + +

Given rules and straightforward procedures to follow, web designers have become quite proficient at addressing mobile design needs in recent years. So much so in fact that, in those instances where designers have found a comfort zone, stagnation has set in.

+ + + +

Nevertheless, there remains room for improvement. In 2023 we will see greater attention paid to mobile-specific features that focus on overcoming specific frictions and obstacles.

+ + + +

The BeLanguage 4 pre-built website addresses one of these in its navigation design:

+ + + +

Note how the “Call Us” button is located at the top of the list of links, rather than at the end where it would normally appear on a desktop display. A slight change perhaps, but a helpful one for a mobile user.

+ + + +

The BeFurnitureStore approach takes the account, cart, and favorites icons that are normally situated at the top on a desktop display and places them on a sticky bottom banner.

+ + + +

The use of sticky banners is also advantageous to mobile users. As long as web designers work to continuously improve the mobile web experience, it doesn’t matter how small some of their changes might appear to be. Mobile users will gain from them.

+ + + +

4. Shape texturization

+ + + +

Skeuomorphism was once the rage and played a dominant role in the web design world. This was at a time when web users were still getting used to the technology and skeuomorphism proved to be an extremely helpful design trend as it helped users become more and more comfortable interacting with the web.

+ + + +

Eventually, the trend became less and less of a requirement and eventually began to be looked upon as a source of clutter and distraction. The trashcan and camera symbols remain in use, but most other examples of this design approach have gone by the wayside.

+ + + +

In 2023, web designers will begin working with organic shapes by adding small, strategic textures to their designs. The BeRenovate 5 website illustrates an example of this new trend:

+ + + +

The rounded shapes and lines that appear in the background have a softening effect while at the same time drawing attention to the central section, making the page more interesting and engaging.

+ + + +

Digital texturization can also be used to draw attention to a specific area of a page. BeCoaching 3 provides an example of this effective design trend.

+ + + +

The two digitally textured shapes seen here are used throughout this one-page website to help direct a visitor’s eyes and attention to the areas of the page you want them to go. All of the content in the example is important, but the image on the right is key and not to be missed.

+ + + +

5. Benefits of supplemental video

+ + + +

Different web users have different viewing habits, making it extremely difficult, if not impossible, to satisfy them all. Some prefer reading text or blogs. Others would rather to watch and listen to a video or a vlog.

+ + + +

Rather than trying to satisfy both worlds, experiment with using supplemental videos or video alternatives whenever it makes sense to do so. You’re less apt to downgrade site loading speeds, and avoiding an overreliance on autoplay videos would probably earn you some good marks from your users.

+ + + +

The BeBusiness 6 site’s full-width video section halfway down its home page jumps right out at you.

+ + + +

It could be used to summarize or expand on previous content, to show a video testimonial, or for a variety of other purposes.

+ + + +

A video doesn’t have to be full width to be effective. This BePregnancy hero section example includes a small cutout that features a supplemental video:

+ + + +

The “Play” button is instantly recognizable and gives a visitor the option of whether or not to watch the video. In this instance, the choice to watch would probably win hands down, but if the video were autoplay it would probably be looked upon as being intrusive.

+ + + +

Using videos sparingly and strategically makes sense. Visitor’s will likely approve, and it is easier for web designers to maintain reasonable page loading speeds.

+ + + +

What is your opinion of these website design trends?

+ + + +

Website design trends have more often than not focused on background and color trends, typological experimentation, attention-getting special effects, and other approaches that, while well-intentioned and usually effective, could also be viewed as being superficial to some degree.

+ + + +

2023’s web design trends signify a sea change in website improvement techniques. The focus is more on trust building, responsiveness, and accessibility than on user engagement or entertainment.

+ + + +

Use BeTheme to build websites and you’ll discover that these new trends have already been incorporated to one degree or another in many of its 650+ pre-built sites. Good news indeed!

The post 5 Web Design Trends for 2023 That You Should Pay Attention To (Sponsored) appeared first on David Walsh Blog.

fetch with Timeout

David Walsh — Mon, 16 Jan 2023 10:03:37 +0000

A few years back I wrote a blog post about how write a fetch Promise that times out. The function was effective but the code wasn’t great, mostly because AbortController , which allows you to cancel a fetch Promise, did not yet exist. With AbortController and AbortSignal available, let’s create a better JavaScript function for fetching with a timeout:

+ + + +

AbortSignal instances now feature a timeout option to time the Promise out after a given amount of milliseconds:

+ + + +

+async function fetchWithTimeout(url, opts = {}, timeout = 5000) {
+  // Create a signal with timeout
+  const signal = AbortSignal.timeout(timeout);
+
+  // Make the fetch request
+  const _fetchPromise = fetch(url, {
+    ...opts,
+    signal,
+  });
+
+  // Await the fetch with a catch in case it's aborted which signals an error
+  const result = await _fetchPromise;
+  return result;
+};
+
+// Usage
+try {
+  const impatientFetch = await fetchWithTimeout('/', {}, 2000);
+}
+catch(e) {
+  console.log("fetch possibly canceled!", e);
+}
+
+

+ + + +

While formerly the AbortSignal would come from an AbortController, you can now use AbortSignal.timeout to create the signal.

+ + + +

At the moment, however, only edge browser versions support AbortSignal.timeout. So much like the original function, an alternative function could use setTimeout to time to the cancellation but we’ll use the signal with the fetch request:

+ + + +

async function fetchWithTimeout(url, opts = {}, timeout = 5000) {
+  // Create the AbortController instance, get AbortSignal
+  const abortController = new AbortController();
+  const { signal } = abortController;
+
+  // Make the fetch request
+  const _fetchPromise = fetch(url, {
+    ...opts,
+    signal,
+  });
+
+  // Start the timer
+  const timer = setTimeout(() => abortController.abort(), timeout);
+
+  // Await the fetch with a catch in case it's aborted which signals an error
+  try {
+    const result = await _fetchPromise;
+    clearTimeout(timer);
+    return result;
+  } catch (e) {
+    clearTimeout(timer);
+    throw e;
+  }
+};
+
+// Usage
+try {
+  const impatientFetch = await fetchWithTimeout('/', {}, 2000);
+}
+catch(e) {
+  console.log("fetch possibly canceled!", e);
+}
+

+ + + +

The JavaScript code above is much cleaner now that we have a proper API to cancel fetch Promise calls. Attaching the signal to the fetch request allows us to use a setTimeout with abort to cancel the request after a given amount of time.

+ + + +

It’s been excellent seeing AbortController, AbortSignal, and fetch evolve to make async requests more controllable without drastically changing the API.

The post fetch with Timeout appeared first on David Walsh Blog.

Customizing HTML Form Validation

David Walsh — Mon, 09 Jan 2023 10:57:00 +0000

Form validation has always been my least favorite part of web development. You need to duplicate validation on both client and server sides, handle loads of events, and worry about form element styling. To aid form validation, the HTML spec added some new form attributes like required and pattern to act as very basic validation. Did you know, however, that you can control native form validation using JavaScript?

+ + + +

`validity`

+ + + +

Each form element (input, for example) provides a validity property which represents a ValidityState. ValidityState looks something like this:

+ + + +

// input.validity
+{
+  badInput: false,
+  customError: true,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: false,
+  valueMissing: true
+}
+

+ + + +

Each property in the ValidityState can roughly match a specific validation issue: valueMissing would match the required attribute, tooLong and tooShort match minLength and maxLength, etc.

+ + + +

Checking Validity and Setting a Custom Validation Message

+ + + +

Each form field provides a default error message for each error type, but setting a more custom message per your application is likely better. You can use the form field’s setCustomValidity to create your own message:

+ + + +

// Check validity
+input.checkValidity();
+
+if(input.validity.valueMissing) {
+  input.setCustomValidity('This is required, bro!  How did you forget?');
+} else {
+  // Clear any previous error
+  input.setCustomValidity('');
+}
+

+ + + +

Simply setting the message by setCustomValidity doesn’t show the message, however.

+ + + +

`reportValidity`

+ + + +

To get the error to display to the user, use the form element’s reportValidity method:

+ + + +

// Show the error!
+input.reportValidity();
+

+ + + +

The error tooltip will immediately display on the screen. The following example displays the error every five seconds:

+ + + +

+ See the Pen + Untitled by David Walsh (@darkwing) + on CodePen. +

+ + + + +

Having hooks into the native form validation system is so valuable and I wish developers used it more. Every website has its own client side validation styling, event handling, etc. Let’s use what we’ve been provided!

The post Customizing HTML Form Validation appeared first on David Walsh Blog.

How to Determine a JavaScript Promise’s Status

David Walsh — Tue, 03 Jan 2023 21:43:58 +0000

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 Promise to create an arbitrary delay time
+// In these examples, a 0 millisecond delay is 
+// an instantly resolving promise that we can jude status against
+async function delay(milliseconds = 0, returnValue) {
+  return new Promise(done => setTimeout((() => done(returnValue)), milliseconds));
+}
+
+// Promise.race in all of these functions uses delay of 0 to
+// instantly resolve.  If the promise is resolved or rejected,
+// returning that value will beat the setTimeout in the race
+
+async function isResolved(promise) {
+  return await Promise.race([delay(0, false), promise.then(() => true, () => false)]);
+}
+
+async function isRejected(promise) {
+  return await Promise.race([delay(0, false), promise.then(() => false, () => true)]);
+}
+
+async function isFinished(promise) {
+  return await Promise.race([delay(0, false), promise.then(() => true, () => true)]);
+}
+

+ + + +

A few examples of usage:

+ + + +

// Testing isResolved
+await isResolved(new Promise(resolve => resolve())); // true
+await isResolved(new Promise((_, reject) => reject()));  // false
+
+// Testing isRejected
+await isRejected(new Promise((_, reject) => reject())); // true
+
+// We done yet?
+await isFinished(new Promise(resolve => resolve())); // true
+await isFinished(new Promise((_, reject) => reject()));  // true
+

+ + + +

Developers can always add another await or then to a Promise to execute something but it is interesting to figure out the status of a given Promise. Is there an easier way to know a Promise’s status? Let me know!

The post How to Determine a JavaScript Promise’s Status appeared first on David Walsh Blog.

Detect XR Support with JavaScript

David Walsh — Mon, 02 Jan 2023 18:09:11 +0000

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 first on David Walsh Blog.

Document.elementFromPoint

David Walsh — Fri, 30 Dec 2022 22:37:00 +0000

Reacting to events with JavaScript is the foundation of a dynamic experiences on the web. Whether it’s a click event or another typical action, responding to that action is important. We started with assigning events to specific elements, then moved to event delegation for efficiency, but did you know you can identify elements by position on the page? Let’s look at document.elementFromPoint and document.elementsFromPoint.

+ + + +

The document.elementFromPoint method accepts x and y parameters to identify the top-most element at a point:

+ + + +

+const element = document.elementFromPoint(100, 100);
+// 
+

+ + + +

If you want to know the entire element stack, you can use document.elementsFromPoint:

+ + + +

+const elements = document.elementsFromPoint(100, 100);
+// [, , ]
+

+ + + +

The elementFromPoint and elementsFromPoint are really helpful for experiences where developers don’t want to assign individual events. Games and entertainment sites could benefit from these functions. How would you use them?

The post Document.elementFromPoint appeared first on David Walsh Blog.

Detect Browser Bars Visibility with JavaScript

David Walsh — Fri, 30 Dec 2022 01:36:35 +0000

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 when your web app required maximum browser space. Outside of that, these properties seem invasive. What do you think?

The post Detect Browser Bars Visibility with JavaScript appeared first on David Walsh Blog.

JavaScript print Events

David Walsh — Fri, 30 Dec 2022 00:12:37 +0000

Media queries provide a great way to programmatically change behavior depending on viewing state. We can target styles to device, pixel ratio, screen size, and even print. That said, it’s also nice to have JavaScript events that also allow us to change behavior. Did you know you’re provided events both before and after printing?

+ + + +

I’ve always used @media print in stylesheets to control print display, but JavaScript provides beforeprint and afterprint events:

+ + + +

+function toggleImages(hide = false) {
+  document.querySelectorAll('img').forEach(img => {
+    img.style.display = hide ? 'none' : '';
+  });
+}
+
+// Hide images to save toner/ink during printing
+window.addEventListener('beforeprint', () => toggleImages(true))
+window.addEventListener('afterprint', () => toggleImages());
+

+ + + +

It may sound weird but considering print is very important, especially when your website is documentation-centric. In my early days of web, I had a client who only “viewed” their website from print-offs. Styling with @media print is usually the best options but these JavaScript events may help!

The post JavaScript print Events appeared first on David Walsh Blog.

How to Control CSS Animations with JavaScript

David Walsh — Tue, 27 Dec 2022 20:02:45 +0000

When it comes to animations on the web, developers need to measure the animation’s requirements with the right technology — CSS or JavaScript. Many animations are manageable with CSS but JavaScript will always provide more control. With document.getAnimations, however, you can use JavaScript to manage CSS animations!

+ + + +

The document.getAnimations method returns an array of CSSAnimation objects. CSSAnimation provides a host of information about the animation: playState, timeline, effect, and events like onfinish. You can then modify those objects to adjust animations:

+ + + +

+// Make all CSS animations on the page twice as fast
+document.getAnimations().forEach((animation) => {
+  animation.playbackRate *= 2;
+});
+
+// Stop all CSS animations on the page
+document.getAnimations().forEach((animation) => {
+  animation.cancel();
+});
+

+ + + +

How could adjusting CSS animations on the fly be useful to developers? Maybe use the Battery API to stop all animations when the device battery is low. Possibly to stop animations when the user has scrolled past the animation itself.

+ + + +

I love the way you can use JavaScript to modify CSS animations. Developers used to need to choose between CSS and JavaScript — now we have the tools to make them work together!

The post How to Control CSS Animations with JavaScript appeared first on David Walsh Blog.

Detecting Fonts Ready

David Walsh — Mon, 26 Dec 2022 14:03:54 +0000

Knowing when resources are loaded is a key part of building functional, elegant websites. We’re used to using the DOMContentLoaded event (commonly referred to as “domready”) but did you know there’s an event that tells you when all fonts have loaded? Let’s learn how to use document.fonts!

+ + + +

The document.fonts object features a ready property which is a Promise representing if fonts have been loaded:

+ + + +

+// Await all fonts being loaded
+await document.fonts.ready;
+
+// Now do something!  Maybe add a class to the body
+document.body.classList.add('fonts-loaded');
+

+ + + +

Font files can be relatively large so you can never assume they’ve loaded quickly. One simply await from document.fonts.ready gives you the answer!

The post Detecting Fonts Ready appeared first on David Walsh Blog.

How to Internationalize Numbers with JavaScript

David Walsh — Mon, 21 Nov 2022 12:40:22 +0000

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 currency is possible
+price.toLocaleString('de-DE', { 
+  style: 'currency', 
+  currency: 'EUR' 
+}); // "16.601,91 €"
+
+// You can also use Intl.NumberFormat for formatting
+new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'GBP'
+}).format(price); // £16,601.91
+

+ + + +

It’s a major relief that JavaScript provides us these type of helpers so that we don’t need to rely on bloated third-party libraries. No excuses — the tool is there!

The post How to Internationalize Numbers with JavaScript appeared first on David Walsh Blog.

Locate Empty Directories from Command Line

David Walsh — Tue, 01 Nov 2022 10:26:52 +0000

As a software engineer that lives too much of his life on a computer, I like keeping my machine as clean as possible. I don’t keep rogue downloaded files and removes apps when I don’t need them. Part of keeping a clean, performant system is removing empty directories.

+ + + +

To identify empty directories, I use the following command:

+ + + +

+find . -type d --empty
+

+ + + +

To remove empty directories, we can add a --delete flag:

+ + + +

+find . -type d --empty --delete
+

+ + + +

Keeping a clean machine is easy when you know the tools that can help you. find makes identifying and eliminating easy, so don’t be afraid to use it!

The post Locate Empty Directories from Command Line appeared first on David Walsh Blog.

How to Extend Prototypes with JavaScript

David Walsh — Mon, 31 Oct 2022 12:13:00 +0000

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 instance with a unique method by extending its prototype:

+ + + +

+Array.prototype.unique = function() {
+  return [...new Set(this)];
+}
+
+['1', '1', '2'].unique(); // ['1', '2']
+new Array('1', '1', '2').unique(); // ['1', '2']
+

+ + + +

Note that if you can also ensure chaining capability by returning this:

+ + + +

+['1', '1', '2'].unique().reverse(); // ['2', '1']
+

+ + + +

The biggest criticism of extending prototypes has always been name collision where the eventual specification implementation is different than the framework implementation. While I understand that argument, you can combat it with prefixing function names. Adding super powers to a native prototype so that every instance has it is so useful that I’d never tell someone not to extend a prototype. #MooToolsFTW.

The post How to Extend Prototypes with JavaScript appeared first on David Walsh Blog.

How to Use window.crypto in Node.js

David Walsh — Thu, 27 Oct 2022 11:36:39 +0000

I’ve been writing a bunch of jest tests recently for libraries that use the underlying window.crypto methods like getRandomValues() and window.crypto.subtle key management methods. One problem I run into is that the window.crypto object isn’t available, so I need to shim it.

+ + + +

To use the window.crypto methods, you will need Node 15+. You can set the window.crypto by importing the crypto package and setting it on the global:

+ + + +

+const crypto = require('crypto').webcrypto;
+
+// Shims the crypto property onto global
+global.crypto = crypto;
+

+ + + +

I really loathe creating mock functions for missing libraries in Node because they can lead to faulty positives on tests; I really appreciate webcrypto being available!

The post How to Use window.crypto in Node.js appeared first on David Walsh Blog.

Convert Fahrenheit to Celsius with JavaScript

David Walsh — Wed, 26 Oct 2022 10:19:49 +0000

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 × 9/5) + 32
+

+ + + +

The following function converts Celsius to Fahrenheit:

+ + + +

function convertCelsiusToFahrenheit(degrees) {
+  return Math.floor(degrees * (9/5) + 32);
+}
+

+ + + +

Temperature conversion is one of those things that’s difficult to do in your head due to the somewhat complex formula. If you have a site that reflects weather data, keep these handy functions nearby!

The post Convert Fahrenheit to Celsius with JavaScript appeared first on David Walsh Blog.

Create a Thumbnail From a Video with ffmpeg

David Walsh — Tue, 25 Oct 2022 09:28:58 +0000

Creating a thumbnail to represent a video is a frequent task when presenting media on a website. I previously created a shell script to create a preview video from a larger video, much like many adult sites provide. Let’s view how we can create a preview thumbnail from a video!

+ + + +

Developers can use `ffmpeg, an incredible open source media utility, to create a thumbnail. To create a thumbnail from the first frame of a video, execute the following command:

+ + + +

+ffmpeg -i input.webm -vf "select=eq(n\,34)" -vframes 1 thumbnail.png
+

+ + + +

Providing a video thumbnail is a great tool convert images into video views. You don’t need fancy software and manual labor to create thumbnails — use ffmpeg!

The post Create a Thumbnail From a Video with ffmpeg appeared first on David Walsh Blog.

Detect System Theme Preference Change Using JavaScript

David Walsh — Mon, 24 Oct 2022 11:16:01 +0000

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 when the system preference changes. You can use this event to automatically update the site’s display in real time.

+ + + +

I love that this API allows detecting user preference on a system level. Catering to user needs is an important part of creating a great web experience!

The post Detect System Theme Preference Change Using JavaScript appeared first on David Walsh Blog.

How to Use Storage in Web Extensions

David Walsh — Wed, 19 Oct 2022 22:59:18 +0000

Working on a web extension is an interesting experience — you get to taste web while working with special extension APIs. One such API is storage — the web extension flavor of persistence. Let’s explore how you can use session and local storage within your Manifest V3 web extensions!

+ + + +

Enabling Extension Storage

+ + + +

The extension storage API isn’t available by default. To enable the storage API, you need to cite it in the manifest.json file of your extension:

+ + + +

+{
+  // more....
+  "manifest_version": 3,
+  "name": "__MSG_appName__",
+  "permissions": [
+    "storage",
+    // more....
+  ],
+  // more....
+}
+
+

+ + + +

Adding storage to the permissions array, which is a top level manifest.json key, provides session and local storage capabilities to your extension.

+ + + +

Get, Set, and Remove Storage Values

+ + + +

Much like traditional localStorage and sessionStorage APIs, extension storage provides get, set, and remove operations:

+ + + +

+// set
+await chrome.storage.session.set({ name: "David", color: "green" });
+
+// get 
+const { name, color } = await chrome.storage.session.get(["name", "color"]);
+
+// remove
+await chrome.storage.session.remove(["name", "color"]);
+

+ + + +

A few things to note:

+ + + +

get requires an array argument, not a single value like localStorage and sessionStorage
set needs to be an object format
remove is also an array, much like get
You can use chrome.storage.local or chrome.storage.session depending on how
All of the extension storage API methods are promise-based, with await or callback formats

+ + + +

Clear All Storage

+ + + +

In the event that you want to clear all data for local or session storage, there’s a clear method:

+ + + +

+await chrome.storage.session.clear();
+

+ + + +

Using clear is effective but you’ll want to be sure that you do truly want to clear everything — clear could become a maintenance issue.

+ + + +

Storage is an essential part of most web extensions. While the API is simple, the async format and method names are different.

The post How to Use Storage in Web Extensions appeared first on David Walsh Blog.

Skip or Only Run a Test with JavaScript Mocha

David Walsh — Mon, 10 Oct 2022 10:13:03 +0000

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, use it.only:

+ + + +

+it.only('does the thing I want', () => {
+
+});
+

+ + + +

it.only is especially helpful if you have a large test suite and just want the result of a work-in-progress test quickly.

+ + + +

Let’s be honest: writing tests isn’t very fun. Like taking your cousin to the school dance or changing a diaper. But test writing is important enough to save yourself, and more importantly, your users, from disaster.

The post Skip or Only Run a Test with JavaScript Mocha appeared first on David Walsh Blog.

Determine Default App for File Type from Command Line

David Walsh — Sun, 02 Oct 2022 22:50:28 +0000

One quality of life improvement any developer can make for themselves is ensuring different file types open in the app they’re most proficient in. If you know me, you know I prefer accomplishing as much as possible from the command line. The duti utility allows users to determine default file type from command line.

+ + + +

The duti utility allows developers to query which app is the default for different file types. You can install duti with brew:

+ + + +

+brew install duti
+

+ + + +

Once you have duti available, you can check on the default app for file type with the following command:

+ + + +

+~ duti -x md
+Xcode.app
+/Applications/Xcode.app
+com.apple.dt.Xcode
+

+ + + +

You can set the default app by using its package:

+ + + +

+duti -s com.sublimetext.2 .js all
+

+ + + +

The duti utility is really great for determining and automating default app management!

The post Determine Default App for File Type from Command Line appeared first on David Walsh Blog.