Svelte is the new method to create web applications, it can be used from a small part of the code to the complete page web application. Svelte is not a framework, it is a compiler that is much faster as compared to the other libraries of JavaScript such as Angular JS, Vue.js, and React JS. The main purpose of the Svelte is to create reactive web applications and provides the functionality that if any change comes in the data, that will reflect on the page rapidly and will not take much time. Introduction to Svelte As we have seen in ... Read More

Nightmare is a high-level automation library offered by segment. It's a good option for smoke test automation because it can perform all of the text inputs, clicks, and visual checks that a person can. It operates as a headless browser using Electron. In this article, we will discuss Nightmare.js in detail and the installation of Nightmare.js. Introduction to Nightmare.js Segment offers Nightmare, a sophisticated browser automation library. The objective of this Nightmare is to mimic user activities (such as goto, type, click, etc.), rather than using heavily nested callbacks, to expose a few basic methods with an API that ... Read More

JSON stands for JavaScript Object Notation, basically, JSON is frequently used with JavaScript, it was initially meant to be a subset of the JavaScript programming language. However, JSON is a language-independent data format. In this article, we are going to learn about JSON and also their interesting facts with examples. Introduction to JSON When data can be transported and stored in a simple format is called JSON, or JavaScript Object Notation. Arrays, objects, names and value pairs, and other data types can all be found in JSON. The format uses quotation marks, brackets, parentheses, semicolons, and colons as punctuation. ... Read More

For storing the data there are various types of data types present in each programming language. Data may be in the form of string, character, number, etc. For each type of data type, there is a certain limit of memory allocated to use the memory efficiently for example, the character is a small unit and an integer may be large as compared to the character so it's better to define a character different from the integers. To use the memory efficiently there are various data types created based on the memory they are going to take which leads to ... Read More

Vue JS is an open-source JavaScript framework. It is used to create single-page apps and user interfaces. The component-based architecture of Vue Js uses separated, reusable elements called components to encapsulate HTML, JavaScript, and CSS. This enables the usage of a virtual DOM to boost performance while also helping efficient and maintainable code. Vue Js’s reactivity system, which allows it to immediately refresh the user interface when the underlying data changes, is one of its distinguishing characteristics. The “v-for” directive in Vue Js renders elements from iterating over arrays or objects based on the item looped over. Depending on the ... Read More

The process of assigning URLs to components in the Vue.js app is known as routing. Installing the Vue-router library and importing it into the Vue instance are prerequisites for implementing routing. Then, the user must specify the components displayed for each route in a different router.js file after defining a set of routes. Users may specify where the components for each route should be displayed in the main Vue template using the “router-view” component, and also, the users can switch between routes using the “router-link” component. A clicked link created by the routerlink component alters the URL and modifies ... Read More

Some old versions of the browsers or old browsers themselves don’t support the newly evolved features of JavaScript. For example, if you are using a very old browser version, it doesn’t support the features of the ES10 version of JavaScript. For example, some versions of the browser don’t support Array.falt() method, introduced in the ES10 version of JavaScript, to flatten the array. In such cases, we need to implement user-defined methods to support that features by the old browser version. Here, we will implement the polyfill for the trim() method of the String object. Syntax Users can follow the ... Read More

The polyfill is a concept to extend the browser's features using user-defined methods. If the user’s browser is not updated, it can happen that browser doesn’t support the newer features of any programming language, such as JavaScript. As a developer, we require to check whether the feature is supported by the browser, and if not, we need to invoke a user-defined method. In this tutorial, we will discuss implementing the polyfill for the array.reduce() method. If any browser doesn’t support the array.reduce() method, we will invoke the userdefined reduce() method. Before we start with the tutorial, Let’s ... Read More

When we click the input element in HTML, it sets the outline for the input element, focusing on it. Sometimes, we must execute some JavaScript code when the user loses focus from the input element. For example, We can autofocus the input element when the user refreshes the web page using the HTML’s ‘autoFocus’ attribute. After that, we can execute the JavaScript function when an element loses focus to ensure that the input value is not empty. If the input value is empty, and the element loses focus, we can show the error message like ‘This field is required’. ... Read More

Image transition means changing the image and replacing one image with another. Users can see the image transition in the image slider. While developing the image slider, we should focus on the animation for image transition to make an attractive UX of the application. In this tutorial, we will learn to add fading effect using various approaches to image transition. Add class to the image to show an image with fading effect We can use CSS to add fading effect to the image transition. The transition property of CSS allows us to add any transition to the image. So, ... Read More