Forem: Sabesan Sathananthan

Five methods for JavaScript to detect mobile browsers

Sabesan Sathananthan — Fri, 15 Oct 2021 08:34:44 +0000

If you are a front-end developer you need to know whether the user is using a mobile browser or a desktop browser. Based on StackOverflow , this article sorts out five methods for JavaScript to detect mobile browsers.

1. `navigator.userAgent`

The easiest way is to analyze the user agent string of the browser, which contains the device information.
JS gets this string through the navigator.userAgent property, as long as it contains keywords such as mobi, android, iphone, etc. It can be identified as a mobile device.




if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
  // The current device is a mobile device
}

// Another way of writing
if (
  navigator.userAgent.match(/Mobi/i) ||
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // The current device is a mobile device
}

The advantage of this method is simple and convenient, but the disadvantage is that it is unreliable. The user can modify this string to make the mobile browser pretend to be a desktop browser.

Chromium browsers also have a navigator.userAgentData property, which has a similar effect. The difference is that it parses the user agent string into an object and the mobile attribute of the object returns a Boolean value indicating whether the user is using a mobile device.



const isMobile = navigator.userAgentData.mobile;

Note that Apple's Safari browser and Firefox browser do not support this attribute. you can check the CanIUse website for more details.

In addition, there is an abolished navigator.platform property, which is supported by all browsers, so it can also be used. It returns a string that represents the user's operating system.



if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) {
  // The current device is a mobile device
}

2. `window.screen`, `window.innerWidth`

Another method is to determine whether it is a mobile phone by the width of the screen.

The window.screen object returns the screen information of the user device. The width property of this object is the width of the screen (in pixels).



if (window.screen.width < 500) {
  // The current device is a mobile device
}

In the above example, if the screen width window.screen.width is less than 500 pixels, it is considered a mobile phone. The disadvantage of this method is that if the mobile phone is used horizontally, it cannot be recognized.

Another property window.innerWidth returns the width of the visible part of the webpage in the browser window, which is more suitable for specifying the style of the webpage under different widths.



const getBrowserWidth = function() {
  if (window.innerWidth < 768) {
    return "xs";
  } else if (window.innerWidth < 991) {
    return "sm";
  } else if (window.innerWidth < 1199) {
    return "md";
  } else {
    return "lg";
  }
};

3. `window.orientation`

The third method is to detect the orientation of the screen. The phone screen can change its orientation (horizontal or vertical) at any time, but it cannot be done on desktop devices.

The window.orientation property is used to get the current orientation of the screen. Only mobile devices have this property. Desktop devices will return undefined.



if (typeof window.orientation !== 'undefined') {
  // The current device is a mobile device
}

Note that the iPhone’s Safari browser does not support this attribute.

4. touch event

The fourth method is that the DOM element of the mobile browser can specify the listener function for the touch event through the ontouchstart attribute. Desktop devices do not have this attribute.



function isMobile() { 
  return ('ontouchstart' in document.documentElement); 
}

// Alternative way of writing
function isMobile() {
  try {
    document.createEvent("TouchEvent"); return true;
  } catch(e) {
    return false; 
  }
}

5. `window.matchMedia()`

The last method is to judge with CSS.

CSS uses media query (media query) to specify responsive styles for web pages.If a certain media query statement for a mobile phone takes effect, the current device can be considered as a mobile device.The window.matchMedia() method accepts a CSS media query statement as a parameter to determine whether this statement is valid.



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

In the above example, the parameter of window.matchMedia() is a CSS query statement, which means that it only takes effect on devices with a screen width of no more than 760 pixels. It returns an object whose matches attribute is a boolean value. If it is true, it means that the query is valid and the current device is a mobile phone.

In addition to judging by the screen width, you can also judge by the accuracy of the pointer.



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

In the above example, the CSS statement pointer:coarse indicates that the pointer of the current device is imprecise. Since the mobile phone does not support the mouse, it only supports touch, so it meets this condition.

Some devices support multiple pointers, such as mouse and touch at the same time. pointer:coarse is only used to determine the primary pointer, and there is also an any-pointer command to determine all pointers.



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

In the above example, any-pointer:coarse means that among all the pointers. As long as one pointer is inaccurate, it meets the query conditions.

6. Toolkit

In addition to the above methods, you can also use a toolkit written by others.Recommended here is react-device-detect, which supports device detection with multiple granularities.



import {isMobile} from 'react-device-detect';

if (isMobile) {
  // The current device is a mobile device
}

How to Handle ES6 modules in Node.Js

Sabesan Sathananthan — Fri, 23 Oct 2020 10:14:07 +0000

Learning the JavaScript language, you will find that it has two types of modules.

One is the ES6 module, referred to as ESM; the other is Node.js dedicated CommonJS module, referred to as CJS. The two modules are not compatible.

Many people use Node.js and only require() load modules, but don't know what to do when they encounter ES6 modules. This article will talk about how to use ES6 modules in Node.js.

Source: https://www.zymr.com/es6-impact-node-js/

The difference between the two modules

There is a big difference between ES6 modules and CommonJS modules. The syntax of the module being loaded is different. CJS modules are loaded with require() and exported with module.exports. But ESM modules are loaded with import and exported with export.
require() is doing synchronous loading, the following statements must wait for this statement to be executed before it is executed. But import is doing asynchronous loading, to be precise it has a static code analysis and dependency resolution phase.

Source: https://twitter.com/Manz/status/1265341200007036929

The distinction of Node.js

Node.js requires ES6 modules to use the .mjs file extension. In other words, as long as the import or export is used in the script file, the .mjs file extension should be used. When Node.js encounters a .mjs file, it considers it to be an ES6 module, and strict mode is enabled by default, and it is not necessary to specify it at the top of each module file "use strict". If you do not want to change the file extension to .mjs, you can specify the type field as a module in the project file's package.json.


 JSON
{
   "type": "module"
}

Once set, the JS scripts in the directory will be interpreted as ES6 modules.


 bash
# Interpreted as ES6 Module
$ node my-app.js

If you still want to use the CommonJS module at this time, you need to change the file extension of the CommonJS script to .cjs. If there is no type field, or the type field is commonjs, the .js script will be interpreted as a CommonJS module.
Summarized in one sentence: .mjs files are always loaded as ES6 modules, .cjs files are always loaded as CommonJS modules, and the loading of .js files depends on the settings of the type field inside the package.json.

Note: Try not to mix ES6 modules and CommonJS modules. The require() cannot load the .mjs file, and an error will be reported. Only the import can load the .mjs file. Conversely, require() cannot be used in .mjs files, they should use import.

CommonJS module loads ES6 modules

require() cannot load ES6 modules and an error will be reported in the CommonJS module. You can only use the import() method to load ESM.


 JavaScript
(async () => {
  await import('./my-app.mjs');
})();

The above code can be run in the CommonJS module.

One reason why require() does not support ES6 modules is that, it is loaded synchronously, and the top-level await statement can be used inside ES6 modules, which would cause the module not to be able to be loaded synchronously.

ES6 modules load CommonJS modules

In the ES6 module, import can load CommonJS modules, but the CJS module should be loaded altogether, and can not just load a specific single exported object.


 JavaScript
// Correct
import packageMain from 'commonjs-package';

// Report an error
import { method } from 'commonjs-package';

This is because ES6 modules need to support static code analysis, and the export interface of CommonJS modules is module.exports, which is an object that cannot be statically analyzed, so it can only be loaded as a whole.
To load a specific single exported object, it can be written as follows.


 JavaScript
import packageMain from 'commonjs-package';
const { method } = packageMain;

Support two formats of modules at the same time

It is easy for a module to support both CommonJS and ES6 formats. If the original module is in ES6 format, you need to give an overall output interface, such as export default obj, so that CommonJS can be loaded with import().
If the original module is in CommonJS format, a packaging layer can be added.


 JavaScript
import cjsModule from '../index.js';
export const foo = cjsModule.foo;

The above code first enters the CommonJS module as a whole and then exports the named interface as needed. You can change the extension of this file to .mjs, or put it in a subdirectory, and put a separate package.json file in this subdirectory, specifying {type: "module" }.
Another approach is to specify the respective loading entry of the two format modules in the exports field of the package.json file.



"exports"：{ 
    "require": "./index.js"，
    "import": "./esm/wrapper.js" 
}

The above code specifies require() and import, and loading the module will automatically switch to a different entry file.

Embed Dev.to as a blog on your React Website

Sabesan Sathananthan — Mon, 17 Aug 2020 19:53:11 +0000

I have already implemented Medium as a blog on my website. In the beginning, I used jQuery to fetch JSON objects. I have mentioned that method in my medium article. But I am not satisfied with that method. I don’t like that user interface. So I thought about using React for better user experience. Then I avoided jQuery and implemented it in pure JavaScript and React Js. Here you could see the live demo of this react application. This is my 2nd dev.to article.

I downloaded the shards dashboard lite and was impressed by its blog page. Then I thought, why can’t I implement that in my blog page. After that, I come up with a solution. But that didn’t work. Then I tried a new method that worked. Now I finished that and have a repo in GitHub. In this article, I am going to say how to start from scratch.

Step1: Setup React Project

First, you need to create a react application. For that run the following command in your shell/terminal in a specific folder (e.g., desktop )



npx create-react-app dev.to-post

A new folder will be created, and it will be named as a dev.to-post. From this step, our application is bootstrapped with Create React App. Then open that project in your IDE. I am personally using the VS Code IDE.

Step2: Delete Unwanted Files

You need to delete some files and organize the files for the development after you open the folder in your IDE. Therefore you need to go to the src folder and delete Logo.svg, App.css, index.css, and App.test.js files. And create the following folders inside the src folder named components, assets, helpers, and utils, then move your serviceWorker.js into the helper’s folder. App.js file into the Components folder.

Now open the index.js file and delete the following snippet in index.js file.


 JavaScript
import ‘./index.css’;

Then modify the App.js and serviceWorker.js files paths in index.js import like following.


 JavaScript
import App from ‘./components/App’;
import * as serviceWorker from ‘./helpers/serviceWorker’;

Go to the Components folder and open the App.js. Delete the return part of the App function. Now your file organization will be like below.

Step 3: Install Shards React package

You can install Shards React via NPM.



npm i shards-react

Once the package is installed, open the index.js and add the following snippet to the top of the code.


 JavaScript
import ‘bootstrap/dist/css/bootstrap.min.css’;
import ‘shards-ui/dist/css/shards.min.css’;

Then you need to add this CSS file into the assets folder. Once you add the file inside the assets folder, import the CSS file in index.js.


 JavaScript
import ‘./assets/shards-dashboards.1.1.0.min.css’;

Step4: Fetch data from Dev.to

Then create a new file named slider.js inside the components folder. Add the following code in the slider.js file.

replace the thepracticaldev with your dev.to username. Then create the utils folder and create the Totext.js file inside the utils folder. Add the following snippet in the Totext.js file.

Then create the ShortenText.js file inside the utils folder and add the following snippet in the ShortenText.js file

Create BlogCard.js file inside the Component folder and add the following snippet in the BlogCard.js file.

Finally, Render the Slider component in App.js, as shown below.

Conclusion

Here I have showcased four steps to embed dev.to as a blog on your React Website. If you use this, you won’t spend money to embed dev.to. However, when you follow these methods, you will be unable to show your related dev.to posts section in your blog. You can clone the Repo from this link. If this repo is useful for you don't forget to give a star ⭐️.

sabesansathananthan / react-dev.to-blog

React app for fetch dev.to posts and render in cards

React Dev Blog

Aim of this project is embed Dev as a blog on your React website

🛠️ Built with

React JS - Front-End JavaScript library
Shards React - React UI Framework

Installation

To setup the app for development on your local machine, please follow the instructions below:

Clone the repo to your machine

git clone https://github.com/sabesansathananthan/react-dev.to-blog.git
cd react-dev.to-blog

Install packages

If you use npm
```
npm install
```
or

If you use yarn
```
yarn
```

Change username

Use your dev.to username👤 instead of thepracticaldev. in Slider.js

blogURL = "https://api.rss2json.com/v1/api.json?rss_url=https://dev.to/feed/thepracticaldev";

Run the development server

If you use npm
```
npm start
```
or

If you use yarn
```
yarn start
```
Visit http://localhost:3000

Live Demo

Don't forget to give a star ⭐ for this repo 🙂

Embed Dev.to as a blog on your React Website - Sabesan Sathananthan

Similar Projects

📄 License

This project is licensed under the MIT License…

View on GitHub

Happy Coding 😊 !!!

Beautify Your GitHub Profile README

Sabesan Sathananthan — Sat, 15 Aug 2020 16:58:02 +0000

I don't know how many of you know about adding a GitHub profile README. GitHub recently released a feature that allows users to create a profile-level README to display prominently on their GitHub profile. The GitHub profile-level README feature allows more content than the bio profile, supports markdown, which means you can play more visually with the content, and the README becomes considerably more accessible as it is positioned above pinned repositories and takes up as much space above the web page fold as you want. In this article, I am going to instruct you on how to create a GitHub profile README and how to take it to the next level. You are going to add an automated feed of your blog posts and GitHub stats.

First things first

Customizing your GitHub profile page with a README file is as simple as creating a repo that is named the same as your username. For example, my GitHub username is sabesansathananthan so I created a new repository with the name sabesansathananthan. Note: at the time of this writing, in order to access the profile README feature, the letter-casing must match your GitHub username and your GitHub repository visibility should be in public. Now, you are going to create a folder on your computer named the same as your GitHub username. Then you have that open in vs code. Then you create a README.md file inside that folder. README.md is a markdown file. The point of this article isn't to teach about markdown. I am going to assume that you have a basic knowledge of markdown and if not just copy and paste my code and modify it to fit your needs. push your changes to your repository.Need to brush up on Markdown Syntax? Check out this Markdown Cheatsheet.

Add List of Blog Posts

To add list of your blog posts you are going to use a GitHub action called blog-post-workflow and this was created by Gautam krishna R. You need to add   and   comment to your README file if you have medium and dev.to. I already added those comments in the above gist. so the github action workflow will add the actual blog posts in between these comments. Now go to your repository and click the actions tab and click on the "set up a workflow yourself' link.

Now It will redirect to a new page and you can see the window below.

change the file name as blog-post-workflow.yml then copy and paste the below code.

In the feed-list option replace the username with your dev.to and medium username and click the button start commit and then click the button Commit new file. click the Actions tab again and click the Latest blog post workflow. If you click the Run workflow button there will be a popup open and click the Green color Run workflow button in the popup window.

Add GitHub Stats

Lastly, you are going to add GitHub stats. For this we are going to use github-readme-stats and this is from anuraghazra. This is a very simple method. Go back to your vs code and pull all the changes. and then in the README, you are going to add it right after the blog post. Therefore you are going to add the below image tags and Replace sabesansathananthan with your GitHub username.


 HTML
<a href="https://github.com/sabesansathananthan">
<img align="center" alt="sabesan's Github Stats" src="https://github-readme-stats.codestackr.vercel.app/api?username=sabesansathananthan&show_icons=true&hide_border=true&count_private=true&include_all_commits=true&theme=radical" /></a>

<a href="https://github.com/sabesansathananthan">
  <img align="center" src="https://github-readme-stats.anuraghazra1.vercel.app/api/top-langs/?username=sabesansathananthan&layout=compact&theme=radical" />
</a>

Now your profile is pretty cool and awesome.