Front End Technology Articles - Page 123 of 745

Converting pixel values to number values in JavaScript is a simple task that can be accomplished using built-in functions such as parseInt(), parseFloat(), Number() and also string method replace(). Each method has its own advantages and disadvantages and the best method to use will depend on the specific requirements of your project. When positioning and styling items on a web page, it's sometimes required to work with both pixel and numeric values in web development. To execute computations or operations on a value, for instance, you might need to convert a pixel value, such as "100px, " to a ... Read More

In JavaScript, there are many built-in methods that can convert a number into an array. The simplest one is to the split() method. We can also use the map(), reduce(), or form() methods to perform the task. Some of the most popular methods for converting a number into an array are discussed in this article, along with examples of when and how to apply each technique. Now, the question will be, why there can be a need to convert a number into an array? Then the reason could be splitting a phone number into its individual digits or breaking own ... Read More

HTML5 includes a number of built-in form validation features that allow developers to easily add validation to their forms. One of these features is the "required" attribute, which specifies that an input field is required and must be filled out before the form can be submitted. The “required” attribute is a boolean attribute. If any input field with the “required” attribute is present in the form, then this field must be completed before submitting the form. If that particular field is left blank before submitting the form, the user will see an error message from the browser informing ... Read More

Anime.js is a lightweight JavaScript library with a straightforward, effective API. It functions with JavaScript objects, CSS, and DOM elements and also Anime.js is easy to use. Traditionally, we make animations by gradually modifying the styling of an element. Such movements are possible with JavaScript, but even the simplest animations are difficult and time-consuming to develop. Anime.js makes animation easier by offering a variety of tools. It offers capabilities to regulate the timing and user inputs and supports many animations running concurrently on the same object. The majority of popular browsers also support Anime.js. Installation Part of Anime.js ... 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

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

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