DEV Community: Alex Ivanovs

async/await

Alex Ivanovs — Thu, 16 Mar 2023 06:19:35 +0000

Async/await simplifies asynchronous programming by allowing developers to write code that looks and behaves like synchronous code, improving readability and understandability.

This page is a follow-up branch of the in-depth article "Async in JS: How does it work", if you'd like to learn about the history of asynchronous JavaScript and its evolution, refer to it.

In a nutshell

When you use the async keyword before a function definition, it indicates that the function will be asynchronous. This means that the function is designed to work with asynchronous operations, such as network requests or reading files, without blocking the main execution thread. In JavaScript, asynchronous functions are usually implemented using promises.

As a result, when you declare a function as async, the return value of that function is automatically wrapped in a Promise. Even if the return value is not a promise itself, JavaScript will create a promise that resolves to that value.

Here's an example:

// An asynchronous function
async function getUserName(userId) {
  // Simulate an asynchronous operation (e.g., fetching data from a server)
  const simulatedData = {
    1: "Alice",
    2: "Bob",
    3: "Charlie",
  };

  return simulatedData[userId];
}

// Usage
getUserName(1).then((name) => {
  console.log(`User 1: ${name}`); // Output: User 1: Alice
});

In this example, the getUserName function is declared as async. Even though it returns a simple value from the simulatedData object, the return value is automatically wrapped in a promise. When we call the getUserName function, we can use the then method to handle the resolved value, just like we would with any other promise.

Asynchronous functions are essential when dealing with operations that take an unpredictable amount of time to complete, such as making API calls, interacting with databases, or reading files. These operations are not executed immediately; instead, the code sends a request and waits for the response.

The await keyword is used inside an async function to pause the execution of the function until the asynchronous operation is completed. It allows you to write code that appears synchronous, even though it's performing asynchronous tasks. This makes the code more readable and easier to understand.

// Import the 'fs' module to work with the file system
const fs = require('fs').promises;

// An async function to read a file
async function readFileContent(filePath) {
  try {
    // Use the 'await' keyword to wait for the file to be read
    const content = await fs.readFile(filePath, 'utf-8');
    console.log(`File content: ${content}`);
  } catch (error) {
    console.error(`Error reading the file: ${error.message}`);
  }
}

// Usage
readFileContent('./example.txt');

In this example, we're using the fs.promises module to read a file. The readFile function is asynchronous, so it returns a promise. Inside the readFileContent async function, we use the await keyword to wait for the fs.readFile promise to resolve. Once the promise resolves, the file's content is logged to the console. If there's an error reading the file, the catch block logs the error message.

Call chains vs async/await

The async/await keywords in JavaScript don't introduce new functionality; they simply make it easier to work with promises. They allow you to write cleaner and more intuitive code compared to using chained then and catch callbacks.

Here's an example illustrating the difference between using promises with a call chain and using async/await.

Using a call chain with promises:

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 1000);
  });
}

function processData(data) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`${data} and processed`);
    }, 1000);
  });
}

// Chained promises with then and catch
fetchData()
  .then((data) => {
    return processData(data);
  })
  .then((result) => {
    console.log(result); // Output: Data fetched and processed
  })
  .catch((error) => {
    console.error(`Error: ${error}`);
  });

Using async/await:

async function fetchDataAndProcess() {
  try {
    const data = await fetchData();
    const result = await processData(data);
    console.log(result); // Output: Data fetched and processed
  } catch (error) {
    console.error(`Error: ${error}`);
  }
}

// Call the async function
fetchDataAndProcess();

In both examples, we fetch and process data using promises. The first example uses a call chain with then and catch, while the second example uses the async/await keywords. The async/await version is easier to understand because it looks more like synchronous code. It's also more straightforward to handle errors using try/catch blocks, making it a popular choice for developers working with asynchronous operations.

Tips & best practices

Below you'll find some personal tips but also industry best practices when working with async/await.

Always use async/await instead of then() chains and callbacks.
- Async/await is easier to read, debug, and manage compared to chaining multiple then() and catch() functions or using callback functions.
Await should not be used outside of asynchronous functions.
- The await keyword can only be used inside an async function. If you want to perform an asynchronous operation in the global scope, you must use then().
Use await Promise.all([...]) to execute several independent asynchronous functions in parallel.
- Instead of waiting for one asynchronous function to complete before executing the next, you can run multiple independent async functions concurrently using Promise.all(). This can help improve the overall performance of your code.

Example:

async function getUser() {
      // Returns the information about the user
    }

    async function getNews() {
      // Returns the list of news
    }

    // Using Promise.all to run getUser() and getNews() concurrently
    const [user, news] = await Promise.all([getUser(), getNews()]);

Don't mix async/await and Promise.then syntax.
- To maintain consistency and readability in your code, try to stick to one approach throughout your project: either async/await or Promise.then. Mixing the two can make your code harder to read and maintain.
Use try/catch blocks for error handling.
- When using async/await, it's a good practice to handle errors with try/catch blocks. This approach is more consistent and easier to understand compared to handling errors with Promise.catch().

Example:

async function fetchData() {
      try {
        const data = await fetchSomeData();
        console.log("Data fetched:", data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    }

Avoid "async/await hell."
- Similar to "callback hell," "async/await hell" refers to a situation where you have multiple nested async functions, making the code hard to read and maintain. Instead, try to break down your code into smaller, reusable async functions.
Keep your asynchronous functions focused.
- Try to create asynchronous functions that perform a single, well-defined task. This approach makes your code easier to understand, test, and maintain.
Use Promise.race([...]) when you need the result of the fastest promise.
- If you have several asynchronous operations and need to get the result of the one that completes first, use Promise.race(). It returns a promise that resolves or rejects as soon as one of the input promises settles.

Example:

async function fetchFromAPI_A() {
      // Fetch data from API A
    }

    async function fetchFromAPI_B() {
      // Fetch data from API B
    }

    // Using Promise.race to get the result from the fastest API
    const fastestResult = await Promise.race([fetchFromAPI_A(), fetchFromAPI_B()]);

By adhering to these recommendations, you can improve the readability, maintainability, and performance of your JavaScript code when working with asynchronous operations using async/await and promises.

CSS :has() Parent Selector

Alex Ivanovs — Wed, 19 Oct 2022 15:01:59 +0000

The :has() relational pseudo-class is officially recognized as a Parent Selector, and in the actual spec [Selectors Level 4], it is described as a relative selector that accepts “forgiving-relative-selector-list“. However, :has() is extremely capable as far as selectors go, and there’s plenty of proof that it is more than just a parent selector.

Syntax

The syntax of the :has() pseudo-class is relatively simple and easy to learn to get started, because its semantics are very clear and consistent with the rendering presentation, meaning that the so-and-so element will match if it matches the so-and-so selector.

As a simple example, the following function means that if the element has an <a> element inside the <img> element, the <a> element will match.

a:has(img) { 
  display: block; 
}

We can use this selector to easily distinguish whether it is a text link or an image link and set different CSS styles.

The :has() pseudo-class supports all CSS selectors. E.g.:

a:has(> img) { 
display: block; 
}

The above function indicates that a elements whose matching child element is an img element will be matched, while more distantly related descendant elements will not be considered.

Note that in the above code, the :has pseudo-class argument - > selector - is written directly at the top of the argument, rather than a:has(a > img). The :has() pseudo-class has an invisible :scope pseudo-class at the top of its argument, so it is prohibited to write a:has(a > img).

Similarly, you can use selectors like + or ~ to achieve the effect of a "front sibling selector", where the front element is selected based on the back sibling element. Like so:

h3:has(+ p) { 
font-size: 1.5rem; 
}

The above query indicates a match for an h3 element followed by an p element. The :has() pseudo-class also supports complex selectors and selector lists. E.g.:

article:has(h3, p) { 
   background-color: #f3f3f3;
}

The above query indicates that only h3 elements or p elements inside the article elements will match: as an or relationship, not a with relationship.

If you want the relationship to be with, i.e., both h3 elements and p elements to match, you can write it like so:

article:has(h3):has(p) { 
   background-color: #f3f3f3; 
}

The :has() pseudo-class can also be mixed with other pseudo-classes, such as :checked, :enabled, etc., or even with other logical pseudo-classes, such as :not. E.g.:

section:not(:has(h3)) {
  border: 1px solid yellow;
}

section:has(:not(h3)) {
  color: orange;
}

Note that the two queries above have different meanings.

The former selector means that section elements that do not contain h3 elements have a yellow border, while the latter means that section elements that contain elements that are not h3 elements are orange in color.

It is honestly confusing for everyone. But once you understand that not -> has means has not, it gets easier.

Examples

The :has() pseudo-class has been available for quite some time now (either under browser flags or with a polyfill), and the possibilities of what this parent selector will be able to do will have to be unraveled over time.

In the meantime, this section covers examples of creative ways in which :has() is already being utilized.

#1: Styling figcaption only if it is present

See the Pen :has() Demo #1 — Figure variations by Jen Simmons (@jensimmons)

#2: Carousel gallery with scale and gap effect in pure CSS

See the Pen :has() example four by Kevin (@kevinpowell)

#3: Creating a native color theme switcher

See the Pen CSS :has - Color theme by Ahmad Shadeed (@shadeed)

Browser Support

Stable Diffusion: Tutorials, Resources, and Tools

Alex Ivanovs — Sat, 10 Sep 2022 06:17:40 +0000

On the 22nd of August, Stability.ai founder Emad Mostaque announced the release of Stable Diffusion - an AI generative art model that has not only superior capabilities to the likes of DALL·E 2 but is also available as an open-source project. In those 2 weeks since its release, people have abandoned their personal endeavors and projects to give Stable Diffusion their full attention.

I was already quite excited when OpenAI announced DALL·E 2, and I was also fortunate enough to get early access. But having toyed around with Stable Diffusion for the last couple of days, I can say that DALL·E 2 doesn't come even close to what Stable Diffusion brings to the table.

And the fact that it is open-source also makes it much more accessible. In just 2 weeks, sites like Lexica have archived over 10 million AI-generated images. I also fully expect that developers will make steady strides to integrate Stable Diffusion with the most popular graphic design tools, such as Figma, Sketch, and others. The ability to generate high-quality art on the go is unprecedented.

"Kerala village, sharp focus, wide shot, trending on artstation, masterpiece, by greg rutkowski, by ross tran, by fenghua zhong, octane, soft render, oil on canvas, colorful, cinematic, environmental concept art"

The purpose of this article is to list all the interesting and relevant tutorials, resources, and tools to help you get up to speed with Stable Diffusion quickly. I do believe over the coming months we're going to see a massive influx of projects that specialize in extracting the most potential out of Stable Diffusion, and I will do my best to keep this article updated accordingly.

👉 Tutorials - this section is focused heavily on topics such as "How to use Stable Diffusion?".
💻 Resources - this section is focused on queries such as "What is Stable Diffusion?".
🚀 Tools - this section is based on tools that let you use Stable Diffusion yourself.

So without further ado - let's start with the basics.

Resources & Information

One of the first questions a lot of people have about Stable Diffusion is the license that this model is published under, and whether the generated art is free to use for personal and commercial projects.

The license Stable Diffusion is using is CreativeML Open RAIL-M, and can be read in full over at Hugging Face. In short, "Open Responsible AI Licenses (Open RAIL) are licenses designed to permit free and open access, re-use, and downstream distribution of derivatives of AI artifacts as long as the behavioral-use restrictions always apply (including to derivative works).".

A more detailed explanation for this license is available on this BigScience page.

What images were used to train the Stable Diffusion model?

AI modeling is the means of creating and training Machine Learning algorithms for a specific purpose. In this case, the purpose of generating images from user prompts.

If you're curious as to which images Stable Diffusion used - Andy Baio together with Simon Willison did a thorough analysis of over 12 million images (from a total of 2.3 billion) that were used to train the Stable Diffusion model.

Here are some of the key takeaways:

The datasets which were used to train Stable Diffusion were the ones put together by LAION.
Out of the 12 million images they sampled, 47% of the entire sample size came from 100 domains, with Pinterest yielding as much as 8.5% of the entire dataset. Other top sources included WordPress.com, Blogspot, Flickr, DeviantArt, and Wikimedia.
Stable Diffusion doesn't restrict the use of generating art from people's names (be it celebrities or otherwise).

It will be interesting to see how the model evolves, and whether companies will be willing to contribute their own media to help Stable Diffusion grow.

Where to find Stable Diffusion examples & prompts?

One of the ways in which Stable Diffusion differs from the likes of DALL·E is that to get the most out of Stable Diffusion you have to learn about its modifiers. One modifier, in particular, is called the seed - whenever you generate an image with Stable Diffusion, that image will be assigned a seed, which can also be understood as the general composition of that image. So, if you enjoyed a particular image and wish to replicate its style (or at least as close as possible to it) - you can use seeds.

The best platform for finding example images and the prompts that were used to generate those images is Lexica, which archives over 10 million sample artworks. Each artwork includes its full prompt, but also the seed number which you can then reuse yourself.

Tools & Software

If you've seen or been captivated by the art created with Stable Diffusion, you might be wondering whether you can try it out for yourself. And the answer is yes, there are multiple ways to try Stable Diffusion for free, including doing so from the browser or your own machine.

The official way to do so is to use the DreamStudio platform.

Anyone can register for free, and new accounts get a complimentary 200 free tokens. These tokens are sufficient for 200 generations as long as you don't increase complexity and don't change the height and width past the 512x512 default setting. But if you do increase the complexity, you're probably going to run out of your tokens rather quickly.

How to run Stable Diffusion on your own machine?

At this time, the most popular solution for running Stable Diffusion locally is the Stable Diffusion Web UI repo available on GitHub. Based on the Gradio GUI - this is as close as it gets to the actual DreamStudio interface, and you can wave goodbye to any kind of limitations.

What are the PC requirements for Stable Diffusion?

- 4GB (more is preferred) VRAM GPU (Official support for Nvidia only!)

- AMD users check here

- M1/M2 users check here and here also

Keep in mind that to use the Web UI repo, you will need to download the model yourself from Hugging Face. Make sure you fully read the Installation guide (Windows) to set it up properly. For Linux, check this guide. And you can also get it up and running on Google Colab - guide here.

How big is the Stable Diffusion model?

As I mention above, you have to download the Stable Diffusion model yourself, and the link to do so can be found here. You will need to create an account on Hugging Face, and afterward, accept the license terms for the model before you're able to view and download its files.

One of the questions people have is, "How come the model is only 4GB in size even though it has been made from over 2 billion images?".

And the best answer to this question comes from a Hacker News user juliendorra ⟶

That’s the interesting part: all the images generated are derived from a less than 4gb model (the trained weights of the neural network).
So in a way, hundreds of billions of possible images are all stored in the model (each a vector in multidimensional latent space) and turned into pixels on demand (drived by the language model that knows how to turn words into a vector in this space)
As it’s deterministic (given the exact same request parameters, random seed included, you get the exact same image) it’s a form of compression (or at least encoding decoding) too: I could send you the parameters for 1 million images that you would be able to recreate on your side, just as a relatively small text file.

Tutorials & Guides

The following section is dedicated entirely to tutorials and guides to help you extract the most juice out of your Stable Diffusion prompts. As I said, I will do my best to keep this updated as more guides become available and a better understanding of the model is gained.

Ultimate Beginner's Guide

Arman Chaudhry published a compact Google Docs presentation on the essentials of SD.

This guide covers all of the modifiers that SD supports but also recommends the best practices for width/height settings, as well as common mistakes to avoid.

Stable Diffusion Akashic Records

If you're looking to do a deep dive (or need references for research) - the SD Akashic Records repository has an astounding amount of resources for you to study.

You'll find everything from keyword usage, to prompt optimization, to style guides. There are also mentions of several tools, outside of those already mentioned in this article.

Stable Diffusion Prompt Cheatsheet

If you're looking for inspiration to apply custom styles and effects to your prompts, check out this blog post from Moritz. It covers prompt additions for concepts like 2D & 3D art, details, lighting, colors, and environments.

Tailwind CSS: Cheat Sheet (Chrome Extension)

Alex Ivanovs — Thu, 30 Jun 2022 07:08:31 +0000

Are you new to Tailwind CSS or maybe you’re returning to give it a second try? In any case, having quick access to the Tailwind CSS cheat sheet is a fundamental part of working with the framework. Everyone knows Tailwind CSS has a peculiar syntax.

The two most popular cheat sheets are either the official documentation from Tailwind Labs or the custom-built reference by Tailwind Components. And now, thanks to Shahid Shaikh, you can also get the Tailwind CSS cheat sheet as a Chrome extension.

You can get it directly from the Google Web Store or visit the GitHub project page.

All the references are taken from the Tailwind Components page.

Once you install the extension, you can click on the icon in your extension bar and have quick access to various classes and their associated properties. For each property, there’s also a link to the official docs page in case you need additional details. There is a search feature also.

So, for example, if you need a quick reference to all the available place-items properties, you can just search for that and click to copy to the clipboard.

The project is open-source, so feel free to contribute. I think the search feature could use a little bit of fine-tuning, as I found quite a few overlaps when searching for classes. And, it would probably be nice if someone could port this over for Mozilla users, too.

How to Add a Mega Menu on a WordPress Site

Alex Ivanovs — Wed, 23 Mar 2022 18:49:25 +0000

In this article, we are going to discuss the topic of mega menus, and how to add a mega menu to a WordPress site. We will explore what a mega menu is, why is it beneficial, and what is the best WordPress plugin for adding a mega menu to your blog.

Website navigation or a menu for short is one of the quintessential design elements.

It is impossible to have a good page layout without navigation. And in the case of mega menus, it is a flexible solution to display a contextual hierarchy of your site's content.

For starters, a mega menu can help display the larger context of what your website is about.

But, also:

Show your most popular content categories.
Display trending articles or blog posts.
Include information about your brand, such as social links, etc.

Here is an example taken from the IEEE Spectrum magazine:

This one big navigation menu is able to convey practically everything about the sites' structure. And, one could say that it is also pleasing to the eye. Browsing large contextual navigation through a drop-down menu is quite impractical. Whereas a mega menu efficiently gives the reader quick access to your most important content.

Other notable brands who use mega menus include:

Amazon, the largest eCommerce platform in the world.
Asana, one of the leading project management tools.
Adobe, the leading software company specializing in design.

And many, many more!

Is a mega menu SEO friendly?

One of the first questions people ask about mega menus is whether they are search engine friendly. And the answer is yes. Internal links are extremely important for SEO, and using a large menu you can add dozens of links to your pages without hindering the user experience.

It's also well-known that Google Crawler can interpret JavaScript, which makes it a non-issue for indexing-related concerns.

If you look at more popular platforms like Shopify, WooCommerce, and others. All of them implement some kind of a mega menu structure for displaying product information.

Can you add a mega menu without a plugin?

It is possible, yes. But, in a lot of ways - impractical. There are plenty of open-source libraries on GitHub that showcase mega-menu functionality with JavaScript.

But, in terms of adding this to WordPress - it's way too much work. Needless to say, you might have to add items individually. It is much easier to do this through a plugin.

And this is also going to be the next topic of discussion.

What is the best plugin for adding a mega menu?

On the WordPress plugin repository, there are hundreds of plugins that provide this functionality. However, calling something the best is often a matter of subjective opinion.

In some cases, plugins are locked behind page builders like Elementor and Visual Composer. And, other times - the plugin provides very minimal functionality without pro features.

So, for this guide - we are going to be focusing on the EasyMega plugin.

_It is completely free to download and use.

Let's take a look at the core features for EasyMega:

Native integration with the Customizer design system for WordPress.
Preview changes in real-time.
Use Drag & Drop to create the perfect mega menu layout.
Choose between Full-Width or Boxed.
Change the alignment of how menu items appear to the reader.
...and a lot more!

And it's extremely simple to use. Don't believe me? Let's see how easy it is to add a mega menu to your site with a simple tutorial.

How to add a mega menu using the EasyMega plugin

First and foremost, you want to grab the plugin by going to Plugins -> Add New from your WordPress dashboard. On this page, simply search for EasyMega and Install the plugin.

Once you are done you will be taken to the plugin introduction page. You can skip this entirely and go to your homepage to open Customizer.

From Customizer, you want to navigate to Menus and select your Primary Navigation.

Like this:

Under the Mega Menu Settings, simply click "Activate mega menu features" and save your changes. At this stage, you can click on any of your existing Menu items and select the Mega Menu features.

Like so:

By doing this, a new panel will appear at the bottom of the page where you can start doing customizations.

You can also click on the Live Preview button to see changes in real-time. This will help you avoid having to go back and forth between changes.

The next step is to start adding items to your menu. For this tutorial, we are using the Columnize menu type.

This lets us create multiple columns, which we can individually populate with the content we wish to store inside a menu.

You can directly navigate to the "Columnize Mega Menu Content" section to begin work.

Like this:

Let's take a look at what is happening here.

In the Columnize tab, you can choose from any number of columns to show inside the mega menu. I have selected 3.
The next step is to click the Add menu button on any given column.
Once you do that, you will be able to choose from any of your site content to add to that specific menu column.

The content can be anything. Blog posts, custom pages, categories, or any custom fields that you have on your WordPress site.

Alternatively, if you wish to display content with images, you can do so by going back to Settings and changing the Type to Content Grid.

How you wish to present your sites' navigation is entirely up to you.

Closing statement

This also concludes our tutorial.

As you can see, by using a plugin - adding a mega menu to a WordPress site is extremely easy. How you style it and how you wish to present it to your readers is entirely up to you.

How to Detect Mobile Browsers with JavaScript

Alex Ivanovs — Wed, 09 Mar 2022 15:38:59 +0000

Mobile detection has always been a crucial aspect of app development. It is relevant both for apps, but also software and websites. There are countless reasons to check for mobile browser agents. Most importantly, the ability to render a unique user experience.

The UAParser.js library alone gets millions of weekly package downloads. And, in most cases, it is enough if you’re building something from scratch. But, what about alternative ways to detect mobile browsers with JavaScript?

Sometimes you might just want a simple solution that does the job without any libraries. And in this article, I am gonna lay out for you a handful of JavaScript techniques for detecting mobile users. Let me know if I missed any!

navigator.userAgent

The holy grain of browser detection is the navigator.UserAgent property.

if (/Android|iPhone/i.test(navigator.userAgent)) {
  // This checks if the current device is in fact mobile
}

// an alternative structure to check individual matches
if (
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // making individual checks
}

This is, of course, a very primitive way of doing it. It can easily be manipulated as the User-Agent property can be spoofed. But, because it does the job you can still use it in a variety of projects.

E.g. Landing pages or making a custom redirect to a mobile version.

TouchEvent

One method to detect mobile users is to check if the device has a touch screen.

Using the GlobalEventHandlers.ontouchstart property you can make a simple check to see how the user interacted with your app. If the interaction came from a touch screen, you can then return a mobile version of the app or page.

if ("ontouchstart" in document.documentElement)
{
  // content for touch-screen (mobile) devices
}
else
{
  // everything else (desktop)
}

Touch-screen devices like Surface do not have this property. So, users coming from desktop-based touch devices will still see the desktop version of your pages.

Window.matchMedia()

The Window.matchMedia() is one of the best properties for detecting mobile users with JavaScript. And it is so because it lets you interact with CSS directly.

In a lot of cases, media queries are superior because they have built-in mobile detection tools. For example, you can make a call to check if “pointer:coarse” is true.

This specific statement validates whether the device’s pointer is fine or coarse.

let isMobile = window.matchMedia("(pointer:coarse)").matches;

Alternatively, the device might have both a fine and coarse pointer. For this use case, we can check if any pointers are coarse.

let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Keep in mind that this only validates the query as true or false. A more refined way to check for mobile devices is to use media queries directly.

let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

This query will directly check the max-width of the device and assert whether it matches the criteria. Again, this is quite a lot of work for getting all devices correctly. As such, it’s easier to use a pre-built library with all the devices types already defined.

Libraries for Detecting Mobile Devices

For this section, I’m going to list the most popular JavaScript libraries for detecting mobile devices. Again, I emphasize that these are specific to JavaScript. Refer to the docs for proper implementation in your app.

UAParser.js

As far as complete libraries go, UAParser is the best there is. With more than 10 million weekly downloads on npm alone – UAParser is the defacto solution for detecting mobile devices. As the name gives it away – the library works by parsing User-Agent strings.

However, what makes it so popular is the fact that you can parse hundreds of device variations. And, all of it is very well documented. You can go from practical device vendors to more intricate detection patterns like CPU architecture.

GitHub Documentation

mobile-detect.js

This is a fairly straightforward port of the Mobile Detect library for PHP, provided to the community by Heinrich Goebl. The library itself uses User-Agent for detection, so like we discussed earlier – not the best option.

Still, it should do the job when it comes to practical HTML templates or portfolio projects.

GitHub Documentation

isMobile

Here we have another take on the User-Agent Navigator property from Kai Mallea. While still a simplistic solution, I like that isMobile provides a variety of specifications. For example, you can test for any mobile devices or specific ones like phone or tablet.

GitHub Documentation

react-device-detect

Are you a React.js developer?

Then this library from Michael Laktionov is for you. It works as you would expect – first the library detects device type, then renders the view based on that type. Works flawlessly with component integration, and can be further customized through API calls.

One interesting fact is the number of selectors this library includes. It covers devices like smart TVs, wearables, a variety of iPhone devices, and much more. This gives you a broad selection of design choices when building an app for a specific device.

GitHub Documentation