DEV Community: MoreOnFew

[Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

MoreOnFew — Wed, 16 Feb 2022 07:16:10 +0000

You might be facing an "Attempted import error: 'Switch' is not exported from 'react-router-dom' " error if you are using the react-router-dom package version 6. This error is caused due to using the older switch syntax of the react-router-dom. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. Let us take a look at how to solve the ‘Switch’ is not exported from ‘react-router-dom’ error.

What causes the ‘Switch’ is not exported from ‘react-router-dom’ error in Reactjs?

As I mentioned earlier, the cause of the ‘Switch’ is not exported from ‘react-router-dom’ error mostly is because you are using v6 or above of react-router-dom whereas the syntax you are using is still the older one. In react-router-dom v6 onwards, the “Switch” is replaced by “Routes”.

An Example of code that might throw the error:

import React from 'react';
import './main.css';
import NavBar from './components/navbar.js';
import HomePage from './components/pages/homepage.js';
import Footer from './components/footer.js';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="main-wrapper">
        <NavBar />
        <Switch>
          <Route path="/home" component={HomePage} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

And the package.json might have the following

  "dependencies": {
    ...
    "react-router-dom": "^6.2.1" // Version 6 of React
  },

Screenshot showing ‘Switch’ is not exported from ‘react-router-dom’ error

In the above code we can notice that the code is using , whereas the package.json says that we are using v6 of react-router-dom.

There are 2 ways we can solve the ‘Switch’ is not exported from ‘react-router-dom’ error in ReactJs.

Solution 1 : Upgrade the react-router-dom and the related code to the latest version
Solution 2 : Downgrade react-router-dom to V5 so that the code understands the Statement.

Lets us take a look at both the solutions.

How to solve ‘Switch’ is not exported from ‘react-router-dom’ error in ReactJs? Solution 1

In order to solve the ‘Switch’ is not exported from ‘react-router-dom’ error in ReactJs, we need to update the syntax of the routes defined. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. And hence we need to update the syntax accordingly. Let us take a look at the steps to solve the ‘Switch’ is not exported from ‘react-router-dom’ error.

Step 1. Upgrade to React 16.8+ and react-router-dom v6+

Firstly you would have to upgrade to react version 16.8 or above version as react-router-dom version 6 makes heavy use of React hooks.

Secondly, upgrade to react-router-dom v6+ using the following command if you are already not using the latest version or V6:

npm install react-router-dom

You can also use the @latest keyword to install the latest version of the package

Step 2: Update the react-router-dom import statement.

Now that you have React 16.8+ and react-router-dom v6+, you should update the Router’s syntax. Firstly we need to update the import statement to import “Routes” instead of “Switch”.

So, Update the import statement like the following

//import { Switch, Route } from "react-router-dom";
//to
import { Routes ,Route } from 'react-router-dom';

Step 3: Upgrade the syntax and replace “Switch” with “Routes” and “component” with “element’

The third step would be to replace the “Switch” with “Routes” and the “component” with “element” as shown in the example.

So, replace the with and component attribute to element , like in the following example

// <Switch>
// <Route path="/home" component={HomePage} />
// </Switch>

//to

<Routes>
          <Route path="/home" element={<HomePage/>} />
</Routes>

Notice that the component={HomePage} too got updated to element={} as per the new syntax. You can read more about the process to update react-router-dom from v5 to v6 at https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-to-react-router-v6 .

An alternative way to fix the ‘Switch’ is not exported from ‘react-router-dom’. Solution 2

There is an alternative way to fix the ‘Switch’ is not exported from ‘react-router-dom’ error too. As we discussed earlier, the error is caused due to using react-router-dom version 6+ and using the older syntax of Router. So if you don’t have the time to update all the syntax, the alternative would be to downgrade the react-router-dom package to version 5.2.0 or 5.3.0.

You can downgrade to react-router-dom version 5.2.0 by first uninstalling the package version installed and then installing the v5.2.0. You can do so by using the following commands:

npm uninstall react-router-dom

then use the following command to install a specific version of react-router-dom

npm install react-router-dom@5.2.0

This way you would not have to worry about upgrading react-router-dom’s syntax and avoid all the hassle temporarily. On the long run I would recommend you to always upgrade to the latest version of the package . This can be useful to fix the issue ” ‘Routes’ is not exported from ‘react-router-dom’ “, which can be caused because you are using older version of react-router-dom but newer version of code.

To conclude, I can say that to solve the ‘Switch’ is not exported from ‘react-router-dom’ error, the best way is to upgrade to react-router-dom v6 or above while updating the syntax too. However, alternatively, if you don’t want to update to react-router-dom version 6, you can also instead downgrade to version 5.2.0 , in which case, you need not update the syntax code too.

This article first appeared on https://www.moreonfew.com/attempted-import-error-switch-is-not-exported-from-react-router-dom/

How to remove a specific item from an array in JavaScript?

MoreOnFew — Wed, 26 Jan 2022 08:14:38 +0000

In JavaScript, the Array Object has been one of the most commonly used objects, and hence most of us would already have a good understanding of Array methods. However, there are times when we notice that there might not be a predefined method to achieve a certain task that might seem very common. One such case is the need to remove a specific item from an Array. Let us take a look at modern and simple way to remove a specific item from an Array in JavaScript.

How to remove a specific item from Array by value in JavaScript

As you might have already figured out, there are no predefined methods in the Array object that can help us remove a specific item from an Array by its value. However, you can use the Array Filter method to achieve it.

Example showing use of Array Filter method to remove specific item from Array

const colors = ['red', 'green', 'blue', 'orange', 'pink', 'yellow'];
const removeColor = 'blue';
const result = colors.filter(
    item => item != removeColor
);
console.log(result) /* ['red', 'green', 'orange', 'pink', 'yellow'] */

You can convert the above code into an Arrow function as shown in the next section.

Method to remove specific item from Array by value

const removeByValue = (arr, valueToRemove) => arr.filter(item => item != valueToRemove);

const colors = ['red', 'green', 'blue', 'orange', 'pink', 'yellow'];
removeByValue(colors, 'blue') /* pass the array and the item value to be removed */

Output of the Above code would be as below

['red', 'green', 'orange', 'pink', 'yellow']

As you can notice, the returned value is a new Array after removing the item with value Blue. This way your original array stays intact.

How to remove specific item from Array by Index in JavaScript

On the other hand if you are looking to remove an item from Array using its index , then you can try out the following code:

const colors = ['red', 'green', 'blue', 'orange', 'pink', 'yellow'];
const removeIndex = 2;
const result = colors.filter(
    (item, i) => i != removeIndex
);
console.log(result) /* ['red', 'green', 'orange', 'pink', 'yellow'] */

The above given code can also be written as an Arrow method as show below.

Method to remove specific item from Array by Index

const removeByIndex = (arr, indexToRemove) => arr.filter((item, i) => i != indexToRemove);

const colors = ['red', 'green', 'blue', 'orange', 'pink', 'yellow'];
removeByIndex(colors, 2) /* pass the array and the Index of the item to be removed */

Output of the Above code would be:

['red', 'green', 'orange', 'pink', 'yellow']

As I mentioned earlier, there are times when we might come across scenarios where there might not be an existing or predefined method available to be used for a very common task. In such cases the alternative we have is to use other predefined methods to create a custom method, which would help us achieve what we want. One such scenario is the need to remove a specific item from an Array. And as you can see, we can make use of the existing Array Filter method to achieve what we want.

While there are many different ways available online to remove a specific item from an Array in JavaScript, including the splice() method, the ones shown above are modern and simple ways to do it. These methods would not alter the original Array and would keep it safe and immutable. Hope you liked this article. You can also check our other JavaScript related tutorials and articles.

How to get current url in JavaScript?

MoreOnFew — Fri, 24 Sep 2021 12:06:45 +0000

JavaScript has come a long way since its inception. I remember the days when it was mainly used only for form validations. Now we use JavaScript for a lot more functionalities. JavaScript has a vast number of APIs which enables us to access a variety of features and information from the browser. One such API is the window.location API which helps us to get current URL in javascript.

Get current URL in Javascript using windlow.location object

Getting the current URL in JavaScript is quite simple using the window.location object. You can get the current URL in javascript using the following code

window.location.href 
// https://www.moreonfew.com/how-to-get-current-url-in-javascript/

Using the JavaScript object window.location.href, you can get the current full URL of the page. It would return you the URL of the current page with the protocol (“https”), the domain (“www.moreonfew.com”), and the path plus the filename (“how-to-get-current-url-in-javascript”). It would also return the query parameters in the URL if they are present. In this current page’s URL there aren’t any query parameters and hence we did not get it.

How to get current URL in JQuery?

If you are using jQuery and would like to get the current URL, then you can use the following code

$(location).attr('href');
// OR
$(location).prop('href');

// https://www.moreonfew.com/how-to-get-current-url-in-javascript/

If you notice, in jQuery too, we need to access the “location” object in order to get the current URL. Once we access the location object, we use the “attr” or “prop” API to get the “href” attribute’s value.

However, I would suggest that it’s better to use window.location.href as it would be comparatively faster and simpler too.

I hope that you enjoyed reading about the method to get current URL in JavaScript. As you noticed, the way to get current URL in jQuery is also very similar and the “location” object is what we need to tap into even in the case of jQuery. If you liked this article, you can find more JavaScript articles under our JavaScript section.

The post How to get current url in JavaScript? first appeared on MoreOnFew.

How to install specific version of npm package?

MoreOnFew — Thu, 23 Sep 2021 17:31:38 +0000

As you might already know, there are a large number of npm packages released every day. An equally large number of updates too get released on the npm registry. While we would like to keep the dependencies in package.json updated to the latest version most of the times, there are still times when we would like to install specific version of npm package for certain reasons.

How to install an exact or specific version of npm package?

In order to install a specific version of npm package run the npm install command along with the package name followed by the version number prefixed with the at symbol “@”. Here is the syntax for the same:

npm install <package_name>@version_number

For example, let’s say I wanted to install React version 17.0.2, then the command would be :

npm install react@17.0.2

If you notice, the command is very similar to the basic command to install a package, however, the only difference is the @version_number that follows the package name as a suffix.

How to install the latest version of a package in npm?

On the other hand, if you would like to install the latest version of an npm package , use the same command but instead of specifying the version number, use the “latest” keyword like:

npm install <package_name>@latest

For example, to install the latest version of React, the command would be

npm install react@latest

Please note that both these commands can be used along with the --save and --save-dev etc flags too whenever required.

As you can see, it is quite simple to install specific version of npm package or to install the latest version of a package too. You can also find outdated packages or unused dependencies in npm and remove those npm packages too in order to keep your project optimized. Hope you found this article helpful.

The post How to install specific version of npm package? first appeared on MoreOnFew.

Know the difference between tilde and caret in package.json

MoreOnFew — Fri, 17 Sep 2021 19:46:48 +0000

Most of us might have wondered what does the tilde (~) and caret (^) prefixing the version number of the “dependencies” in your package.json file mean. Well, it is important to know the difference between tilde and caret in package.json as the wrong usage can even break your project.

Understanding the usage of tilde (~) and caret(^) in package.json

The tilde (~) and caret(^) have a very specific use in the package.json file and they both convey different messages. To understand it better, let’s take a look at an example of dependencies in the package.json file.

"dependencies": {
  "next": "^11.0.0",

  "react": "~17.0.2",
  "react-dom": "~17.0.2"
}

In the example above, we can notice that the “next” package has a caret (^) prefixing its version number, while on the other hand, the other two packages have a tilde(~) prefixing its version number.

We can also notice that the version numbers usually have 3 integers(can be alphanumeric too) which are separated by a dot in between two integers. They are in the format of Major.Minor.Patch.For e.g 17.0.2 , which means that the Major version is 17, Minor version is 0, and the Patch version is 2.

NPM Package version numbers are in the format of Major.Minor.Patch

A Patch version usually refers to very minor updates like a security patch, bug fix, etc. Usually upgrading from one patch to another is not harmful. For e.g upgrading from 17.0. 2 to 17.0. 3.

A Minor version upgrade usually refers to the introduction of new features and /or upgrades and are not just patch fixes or security fixes. The upgraded version will still be backward compatible and will not break your functionality. For e.g upgrading from 17. 0.2 to 17. 1.0

A Major version upgrade would mean that a major refactoring of the code has been done and there might be breaking changes that have been introduced. For e.g upgrading from 17.0.2 to 18.0.0

You can read more about the semantic version numbering at https://semver.org/ and at NPM Docs. Well, now that we understand the version’s numbering, let’s take a look at what does tilde (~) and caret (^) symbols signify.

What is tilde in package json?

A tilde (~) as a prefix to the version number in package JSON means that whenever an update is run or whenever the packages are installed, it would look for the latest patch version available in the npm registry and install it. In other words, if say the version was mentioned as “~17.0. 2 “, it can go ahead and upgrade to 17.0. x version where x is the highest available patch version in that Major.Minor.Patch combination. This means that the max it can go until is “17.0. 9 ” (if 9 was the last patch released). A tilde basically asks the npm to install only the latest patch version of the package and ignore any minor or major upgrades.

With Tilde ( ~ ) as the prefix, npm would update the package to the latest patch version available.

What is Caret in package.json?

On the other hand, A Caret (^) as a prefix to the version number in package.json means that whenever an update is run or the packages are installed, look for the latest minor and its latest patch version available in the npm registry and install it. This means that if the version in package.json was mentioned as “^17. 0. 2 “, it can update until version “17. x. x “, where x is the highest minor and patch version available. So assume if react has released a version 17.1.1 recently and I run the npm update command, npm would go ahead and upgrade the package from version “17.0.2” to “17.1.1”. Now assume if React released version 18.0.1 and I run the update, even then I would still get only version 17.1.1 (if that was the latest version before releasing version 18.0.1)

With Caret (^) as prefix, npm would update the package to the latest minor and its latest patch version.

Please note that with Caret as prefix, even though it updates to the latest minor and its latest patch version , the Major version number remains the same. Most of the times the package would be backwards compatible too.

The core difference between tilde and caret in package.json

Well, to summarize, we can say that the core difference between tilde and caret in package.json is mainly to do with instructing the npm on which latest version of the package should be installed. A tilde ( ~ ) would mean that the latest Patch version of a specific Major.Minor combination should be installed e.g 17.0. 2.

A caret ( ^ ) would mean that the latest Minor and its latest patch version should be installed e.g 17. 9. 9. In both cases, the Major version remains the same e.g 17.0.2 and 17.9.9 both have 17 as the Major version number.

If you want to install a specific version of npm package, you can do that too by removing both the tilde and caret signs and by just keeping the exact package version number like “react” : “17.0.2”

Tool to check the semantic version number Range in package.json

You can also use Semantic version calculator from official NPMJs website at https://semver.npmjs.com/ . Here you can try out the tilde and caret prefixes to check which versions of package would be covered with it. You can even select the package of your choice and try out the prefix.

I hope you are clear with the difference between tilde and caret in package.json. As I mentioned earlier, it is important that we understand the difference between tilde and Caret in package.json. Wrong usage of the tilde or caret can cause breakages in your app. If for some reason you installed the wrong version of package, you can go ahead and remove the npm package from project and install the desired version.

The post Know the difference between tilde and caret in package.json first appeared on MoreOnFew.

How to remove npm package from a project?

MoreOnFew — Mon, 13 Sep 2021 17:59:21 +0000

NPM or Node Package Manager has made it really easy to install and manage packages in JavaScript projects. The number of packages available on npm has been on an increase and it has become very convenient to install a package in a project using npm. However, over time, it becomes important to remove npm package from the project which might be outdated on unused.

Remove npm package from package.json

Removing an npm package from package.json is quite easy and straightforward. You can run the following command to remove or uninstall a package :

npm uninstall <package_name>

For example, let us say we want to remove the bootstrap package from the project. The command would be :

npm uninstall bootstrap

If you installed a package as a devDependency using the --save-dev command, you need to use the --save-dev along with the uninstall command. For example:

npm uninstall --save-dev bootstrap

How to uninstall global npm package?

Uninstalling global npm package is also very similar. To uninstall global npm package you need to run the following command :

npm uninstall -g <package_name>

For example, if you want to uninstall jsHint which say was installed globally, you can run the following command:

npm uninstall -g jshint

Once you run the uninstall command, you can notice that the folder related to the package that you uninstalled would be deleted from the node_modules folder too, and also the reference of the package in the package.json file would be removed.

I hope you have learned how to remove npm package from a project. It is important that we regularly find and remove outdated packages and unused packages from package.json. You can find the outdated and unused packages and use the command to remove these packages to keep your package dependencies in control and to avoid bloating up the build files. Hope you found the article to be helpful. Let us know in the comments.

The post How to remove npm package from a project? first appeared on MoreOnFew.

How to find outdated packages in npm?

MoreOnFew — Mon, 13 Sep 2021 12:51:26 +0000

NPM as a package manager has been a very useful tool in web development. Using npm has made it very convenient for us to add various packages to our web development projects. However, like with other software, our npm packages too get outdated either because a new feature has been introduced, the code has been optimized, or because some security fixes have been released. Nonetheless, it becomes important to find outdated packages in npm and to either remove them or update them like we would find unused dependencies in npm and remove them too to keep our build optimized.

How do I check for outdated npm packages?

Checking for outdated packages in npm is not a difficult task. You can run the following command to find outdated packages in npm :

npm outdated

The above command is inbuilt and you do not have to install any additional packages for it. Running the npm outdated command would list out all the outdated packages along with their latest version number. Following is an example of the command I ran on a trial app that I have:

D:\Project>npm outdated
Package Current Wanted Latest Location
bootstrap 5.0.0 5.0.1 5.1.1 MyApp

When we run the npm outdated command, we get to see the name of the package that is outdated with few other data which are as follows:

Package : This is the name of the package that is outdated
Current : This is the version number of the package that is currently installed, i.e the outdated package
Wanted : This is the highest version of the package that satisfies the semver range defined in the package.json file.
Latest : This is the latest version number of the package that is available to download.
Location : This is the name of the app as defined in the package.json.

What is the difference between Wanted vs Latest in npm outdated command?

Well, one can easily get confused between the wanted vs latest when running the npm outdated command.

The Wanted version basically is the highest version of the package that can be fetched as per your package.json declaration. Whereas, the Latest version is the latest or the newest version of the package available on npm’s registry for download. For example. let’s say that I’ve bootstrap’s version 5.0.0 installed on my machine. But in my package.json file, I have declared to install the exact version number 5.0.1, like the following:

"dependencies": {
  "bootstrap": "5.0.1"

}

In such a case when I run npm outdated command, the wanted version would be 5.0.1, because I’ve explicitly declared in my package.json that I want version 5.0.1 of bootstrap to be installed and nothing else. However, the latest version would still be 5.1.1, because as per the npm registry information, the latest version available is 5.1.1 (at the time I wrote this). In other words, the Wanted version is bound by the declaration in package.json. It can only go until the range that is permitted as per the package.json declaration either by giving the exact version or by using ~ (tilde) or ^ (caret) sign before the version number.

Hope the Wanted vs Latest in npm outdated command is clear now. Let us know in the comments if you have any doubts.

What does the Color codes mean in NPM Outdated command?

You might also notice while running the command that the package name might be in red or yellow.

A red color indicates that there is a newer version matching your semver requirement and you should update now.

A yellow color indicates that there is a newer version above your semver range r equirements and hence you need to be careful while updating.

Well, I believe it was an easy task to find outdated packages in npm using the simple npm outdated command. It is very important that we find outdated packages and update outdated npm packages so that we don’t run into security issues or other errors. Equally important is to find unused dependencies in npm and to remove these unused dependencies to keep your build sizes optimized.

The post How to find outdated packages in npm? first appeared on MoreOnFew.

How to find unused dependencies in npm?

MoreOnFew — Mon, 13 Sep 2021 07:19:11 +0000

NPM has become the most popular package manager over time. It is really helpful and useful to manage the package dependencies of your project. However, over time, as your project keeps growing and new packages get released, there are times when we move on to a better alternative of a package or even stop using a package since we might not require it anymore. In such cases, it is important that we find unused dependencies in our npm’s package.json so that our project does not get bloated up. It also is important to find outdated packages in npm and to update or remove them.

Finding unused packages manually can be a very cumbersome process and might not be efficient too. In such cases, it is recommended to use any tool that would help you find unused dependencies in package.json.

Here is how you can find unused dependencies in package.json via npm

As I mentioned earlier, finding unused dependencies in package.json manually can be a really tedious task. The easier alternative is to use a tool that would make your task fast and easy. One such tool is depcheck. In their own words :

Depcheck is a tool for analyzing the dependencies in a project to see: how each dependency is used, which dependencies are useless, and which dependencies are missing from package.json

https://www.npmjs.com/package/depcheck

The usage of it is fairly simple. Run the following command and it would find all the unused dependencies in your package.json :

npx depcheck

The command above would execute the package without installing it on your machine. If you are looking to install the package and run it then you can try the following command :

$ npm install -g depcheck

$ depcheck

Below is an example of running depcheck on a sample project where I’ve installed bootstrap but haven’t used it.

D:\project>npx depcheck
npx: installed 146 in 20.628s
Unused dependencies
* bootstrap

In the above example, you can notice that after running the npx depcheck command, it runs the tool and lists the unused dependencies which in my case was only bootstrap. If there were more, it would list all the unused packages in package.json.

Please note that you need to run the commands in the directory where the package.json file can be found since by default it looks for the package.json file in the root directory. Also, please note that you need to have nodejs version 10 or greater installed.

There are many more options that depcheck provides and you can check them out on their official page at https://www.npmjs.com/package/depcheck .

To conclude I would say that it is very easy to find unused dependencies in package.json using npm packages like depcheck etc. It is a good practice to keep the package dependencies on the check and to regularly remove all the unused package dependencies. It is equally important to find outdated packages in npm and to either update them or remove those outdated packages. Hope you found this article to be useful.

The post How to find unused dependencies in npm? first appeared on MoreOnFew.

Uncaught SyntaxError: Unexpected end of input – Causes And Fix!

MoreOnFew — Mon, 06 Sep 2021 12:14:47 +0000

I know that sometimes the errors we face in JavaScript can be difficult to debug. While with all the modern tools like Chrome developer tools etc the debugging has become far easier, there still are times when we come across issues that are tricky to debug. One such issue is the “ Uncaught SyntaxError: Unexpected end of input ” error in JavaScript.

Let us take a look at how can we debug such issues and what might be causing them.

What causes Unexpected end of Input in JavaScript?

Well, a large number of times, the cause of the “Uncaught SyntaxError: Unexpected end of input” error in JavaScript is missing parentheses, brackets, or quotes. Let’s take a look at the example below:

var addPost = function() {
   //add a new post when called
}

var editPost = function() {
   //edit the post when called
}

var deletePost = function() {
   //delete a post when called

var publishPost = function() {
   //publish a post when called
}

While everything looks good in the code above, this was throwing the Unexpected end of input error. However, if you look carefully, you’ll notice that the deletePost method has a missing closing bracket ( } ) which is actually causing the error.

On a javascript file with hundreds of lines of code, it can become very cumbersome to track the brackets line by line. There is an easier way to catch such errors and to avoid them too as shown in the next section.

How to fix Uncaught SyntaxError: Unexpected end of input error in JavaScript or jQuery?

Now that we know what causes this issue, the debugging method is also easy. While we can definitely look into the code and brackets and parentheses line by line, it would not be an effective method in the case of a large file. The easier way would be to make use of any tool.

One such tool I would recommend is https://jshint.com/ .

Once you visit JsHint, copy and paste your javascript code there. It would run an auto-scan of the code and list all the warnings and errors that the tool finds.

If you copy-paste the above code on JSHint, you’ll notice that it shows an ” Unmatched ‘{‘. ” warning. Once you hover over it, it would highlight the line with the deletePost method indicating that the missing bracket is in this method. Here is a screenshot that shows the issue on JsHint.

Screenshot showing the unmatched bracket warning in JsHint tool

Can the error be caused due to any other reason other than missing brackets etc?

Yes! While it is true that most of the time the issue is caused due to missing parentheses, brackets, or quotes, it has been noticed that whenever we try to parse an empty response from a JSON returned by Ajax call, the Unexpected end of input error can crop up too.

In such cases, add a conditional check to see if the data returned really has something within it before making use of the data returned.

For example, consider the following Ajax call in jQuery:

$.ajax({
   url: url,
   ...
   success: function (response) {

      if(response.data.length == 0){
         // this condition would prevent a blank json from being parsed
         // Empty response returned, maybe show an error etc
      }else{
        //Parse the JSON and use it
      }
   }
});

In the above code, you can notice that once we receive the response, we check if the length of the data returned is 0 i.e if the data returned is empty then maybe write a handler method or show an error to the user, otherwise, if there is data then parse it and use it. Without this condition, the code would have thrown the unexpected end of input error.

As I mentioned earlier, the “ Uncaught SyntaxError: Unexpected end of input” error in JavaScript can be caused due to various reasons, however, the majority of the time it is because of missing parentheses, bracket, quote or because of parsing an empty JSON. However, an easy way to spot and avoid such issues is to run your javaScript through a validator like jsHint.com. If you are using webpack then you can even configure JSLinting in your build process which would highlight such warnings and errors during the build time itself. Hope you would this article useful. Let us know in the comments!

The post Uncaught SyntaxError: Unexpected end of input – Causes And Fix! first appeared on MoreOnFew.

What is the difference between Number.isInteger() and Number.isSafeInteger() in JavaScript ?

MoreOnFew — Wed, 12 Sep 2018 09:18:32 +0000

As a part of ES6 (also known as ECMAScript 2015 or ECMAScript 6), there are a couple of new JavaScript features and methods introduced. Today we would be concentrating on just two of them i.e Number.isInteger() and Number.isSafeInteger().

What is `Number.isInteger()` ?

The Number.isInteger() is a new method of the Number object introduced as a part of ES6. This is an interesting and useful feature that can help you save some time with mathematical operations. The Number.isInteger() method basically tells you if the number passed on to the method as a parameter or argument is an Integer or not. So say if I pass a number that is Integer to the method it would return a boolean true. However, if I pass anything else to it, it would return false. Let’s take a look at an example:

Number.isInteger(10);
//returns true

Number.isInteger(13.5);
//returns false

Please note that the Number.isInteger() method returns a Boolean value always.

Number.isInteger() should not be confused with the parseInt() method. The parseInt() method parses the parameter string to a number (assuming the data type of the parameter ‘number’ was string and you want JavaScript to understand it as an Integer), and return the value as an integer. If it cannot parse it as a number, it returns NaN (Not a Number). Number.isInteger() on the other hand checks if the parameter number passed to it is an integer already and returns true or false accordingly.

What is `Number.isSafeInteger()` ?

The Number.isSafeInteger() on the other hand, is a method that is very similar to the Number.isInteger(), however, it checks if the value is a “Safe Integer”, Safe integers are all integers from -(2⁵³ – 1) to +(2⁵³ – 1) i.e -9007199254740991 to 9007199254740991. Let’s take a look at an example:

Number.isSafeInteger(10); // returns true

Number.isSafeInteger(12345678901234567890); // returns false

Number.isSafeInteger(9007199254740991); // returns true

Number.isSafeInteger(9007199254740992); // returns false

Please note that Number.isSafeInteger() too returns a Boolean value (true or false) always.

You can find out the range of Safe Integer using two new properties of the number object which are Number.MIN_SAFE_INTEGER (returns -9007199254740991) and Number.MAX_SAFE_INTEGER (returns 9007199254740991) .

But, What is a Safe Integer anyway?

“Safe Integer” is not a mathematical term and hence if you ask your Mathematics Genius friend about it he/she might not be aware of it at all. The “Safe Integer” here talks about Integers that are safe and stable to be used in JavaScript. JavaScript numbers have only enough storage space to represent integers in the range of -(2⁵³ – 1) to +(2⁵³ – 1), beyond this point the JavaScript integers are unsafe or unstable. Beyond 2⁵³ , JavaScript can represent only every second mathematical integer. For example :

console.log(Math.pow(2, 53));
//9007199254740992

console.log(9007199254740992);
//9007199254740992

console.log(9007199254740993);
// 9007199254740992 Surprising!!

console.log(9007199254740994);
//9007199254740994 fine !

console.log(9007199254740995);
// 9007199254740996

Hence you require Number.isSafeInteger() to find out if the integer is safe or not in JavaScript’s context.

There are other new Math and Number related properties and Methods that ES6 has introduced and I would recommend that you try those out too along with the Number.isInteger(); and the Number.isSafeInteger() methods. Do let us know if you learned anything new today.

The post What is the difference between Number.isInteger() and Number.isSafeInteger() in JavaScript ? first appeared on MoreOnFew.

How to detect support for a CSS feature using @supports ?

MoreOnFew — Mon, 10 Sep 2018 12:32:23 +0000

With many new CSS features being introduced regularly it has become important to check for the support of these newer CSS properties before we use them. While there are feature detection tools like Modernizr etc, not every time do we actually require to load a JavaScript file to detect a feature alone. You can do feature detection using CSS @supports rule too. However, please note that the older versions of Browsers do not support @supports rule too. In such a case I would suggest that you write small snippets of code in JavaScript to detect the support for the feature you are looking for.

How to use the `@supports` CSS rule ?

The @supports CSS rule is one among other CSS at-rules like @media etc. The @supports rule lets you to check the support for a CSS feature before the defined block of CSS properties are applied to the page. In other words its like saying that if “so and so” features are supported, apply these CSS properties to the page. Let’s take a look at an example usage of CSS @supports rule.

@supports (display: flex) {
  .main-box { display:flex; padding:5px;}
}

When the above code is parsed by the browser, it checks if the display:flex property is supported by the browser, if so it takes into consideration the block of CSS wrapper within the @supports rule. This can make your code simpler and lighter by avoiding the need for JavaScript for such feature detection. Interestingly, the @supports rule has other Operators too which gives you a little more power while doing a feature detection.

Operators that `@supports` support

Similar to the media queries (@media), @supports too has three operators :

The `not` operator

The “not” operator, as the name suggests, is to check for no support of the specified CSS property. This can come in handy to write a fallback version. For example:

@supports not (display: flex) {
  .main-box { display:inline-block; padding:5px;}
}

In the above example we can notice that if the browser does not support display:flex then keep the display as inline-block for the .main-box.

The `and` operator

The and operator can be used to check if a certain property “and” some other property are supported. For example :

@supports (display: flex) and (align-items: center;){
  .myDiv { display:flex; padding:5px;align-items: center;}
}

In the above example the block of CSS would be rendered only if both the conditions are true. You can also combine the and operator with not operator. For example :

@supports (display: inline-block) and (not (display:grid)){
  .myDiv { display:inline-block; padding:5px;}
}

The `or` operator

The other operator that @supports support is the or operator. The or operator as the name suggests can be used to check if any one of two or more CSS properties are supported by the browser. For example :

@supports (display: flex) or (display: grid;){
  /* Block of CSS here */
}

In this case the block of CSS would be executed even if one of the features are supported by the browser. You can use this operator to combine with the other operators too. For example:

@supports not ((transform-style: preserve) or (-webkit-transform-style: preserve)) {
  /* Block of CSS here */
}

If you notice, we need to make use of parentheses properly in order to define the order in which they apply. Parentheses are especially important while using both and and or operators.

To conclude I would say that the @supports rule is a very useful and helpful feature in CSS. However, the older browsers including IE11 still do not support it, hence, you need to use this with caution. However, if you are not supporting older browsers then go for it. You can check for the Browser support at CanIUse.com. Let us know about your experience using it.

The post How to detect support for a CSS feature using @supports ? first appeared on MoreOnFew.

How to make or convert LTR website to a RTL or Right-to-left Website?

MoreOnFew — Wed, 05 Sep 2018 10:06:38 +0000

I’m sure all of us want our websites to be visited and loved by people all over the world. And yes we would also like it to be shared on social media sites where people from all over the world would come across it. However many a time it might not strike to us that our visitors could be from countries that follow RTL(Right-To-Left) script. By RTL script I mean scripts of languages such as Arabic (العَرَبِية‎), Urdu ( اُردُو ‎), Hebrew (עברית), Yiddish (יידיש) and so on where the reading and writing is done from Right to left unlike English and majority of other languages where the reading and writing of the script is done from Left to Right or LTR. So how do we make our website friendly to visitors following RTL languages? Well, that’s what I’m gonna tell you guys today, how to convert your website from LTR to RTL.

How to add RTL language support to a website?

The most important thing to consider, When you add Right-To-Left or RTL Language support to your website, is to make a Mirror layout of your website. That is, all the elements that were on the left would switch their position to the right. For example, take a look at the following image that has screenshots of the Yahoo US version (LTR) and Yahoo Middle East (RTL) version :

Yahoo’s LTR and RTL version

In the image above you can notice that all the elements or components on the page have switched their positions. The Logo which was on the left is now on the right side of the page. The search box and the button too have switched their positions, so have the carousel captions. Notice the side menu, that too has shifted to the right.

Well, this might look a little weird to a reader who is used to LTR reading but it actually is very normal and ‘correct’ to a reader who is used to RTL. Hence it is quite important to be alert about how the components should be placed, for instance; the button comes before the text field and the label would come after the text box (well that’s what it would look like to a person used to LTR language).

So, What should I do to convert my site from LTR to RTL or right-to-left?

You can convert your website from left-to-right to right-to-left pretty easily than you would have thought it to be.

Convert html to rtl using the direction RTL property

Firstly , you need to change the direction of all the LTR elements to RTL. You can do this by using the dir attribute of HTML. You can edit the <html> tag to include dir="rtl". So your tag should look similar to :

<html dir="rtl">

Right to left CSS considerations

Secondly , you need to change the direction sensitive CSS properties to suit the RTL design flow. In other words, the values of direction sensitive CSS properties like margin, padding, float, background-position, border-left etc needs to be edited. For example, say I have a property in CSS like

 margin: 0 0 10px 20px; /* (i.e margin:top right bottom left) */

this needs to be changed to

margin:0 20px 10px 0;

If you notice, we swapped the margin-right value with the margin-left value. This needs to be done for all the direction sensitive CSS properties. Here is a list of all the direction sensitive CSS properties:

Direction Sensitive CSS Properties
`background`
`background-image`
`background-position`
`background-position-x`
`border-bottom-left-radius`
`border-bottom-right-radius`
`border-color`
`border-left`
`border-left-color`
`border-left-style`
`border-left-width`
`border-radius`
`border-right`

Thirdly , By now your page would be 90% RTL already ! However, you might still notice pieces of components broken which might require you to inspect and edit the CSS values based on the First and Second steps.

Tools to automatically convert CSS from LTR to RTL

While you can manually convert the CSS to meet the RTL requirement, there are many tools that you can use too. I’m listing down a couple of them:

CSS FLIP : CSS FLIP is a project by Twitter that helps you to convert your LTR CSS to RTL. You can install it via npm using npm install css-flip. To generate the rtl css you can use use their CLI and run the command as css-flip path/to/file.css > path/to/file.rtl.css
RTL CSS : RTL CSS also provides features similar to CSS FLIP. You can install it using npm code npm install -g rtlcss. You can also use it along with PostCSS etc or you can also use their CLI and run the command rtlcss input.css output.rtl.css.
CSSJanus : CSSJanus is an online tool where you can copy paste your ltr CSS to convert it into RTL CSS. Its a good tool if you do not want to go through the hassle of installing packages or if you don’t want to use node packages.
Rastchin : Rastchin is another online LTR to RTL CSS converter which is similar to CSSJanus but also provides few more options like generating minified RTL CSS output, linting the LTR CSS etc.

While there are many tools available to convert LTR CSS to RTL, I would recommend that you first understand what steps do you need to take to convert your LTR website or CSS to RTL and also the best possible way to do so. It could be manual, using tools or many be a mix of both as I believe even after using the tools, the outcome might not be 100% accurate as you wanted it to be and hence you might have to edit some components manually. Anyway, let us know about your experience of converting your LTR website to RTL.

The post How to make or convert LTR website to a RTL or Right-to-left Website? first appeared on MoreOnFew.