A straightforward and lightweight templating technique for creating dynamic information within HTML is offered by the JavaScript library known as Underscore.js. A template must be defined in the HTML file using the script tag and a custom type attribute to use underscore.js as a template engine. The template should be contained in the script tag's contents, which can also contain variables and JavaScript expressions. The _.template() function compiles the template and returns a function that can be called with data object to produce the desired result. The ability to call the built function with any data object makes creating dynamic ... Read More

Popular end-to-end testing framework Protractor performs tests against a web application in a real browser, mimicking user interactions. It is used with Angular and AngularJS apps. A new tab or window may open when a user hits a link or button in an online application. This is a typical scenario. It is crucial in these circumstances to wait for the new tab to be formed before making any additional changes to it. We can use the browser to wait for Protractor to open a new tab in conjunction with the browser's wait() feature. The method getAllWindowHandles() A list of all ... Read More

The circular progress bar is an attractive UI for any application. We can show the circular loading indicator whenever our application fetches data from the server; users are uploading files or downloading data. Here, we will learn different approaches to creating a circular progress bar using the various libraries. Use the React-circular-progressbar NPM Package The react-circular-progressbar is an NPM package, and we can import the ‘circularProgressbar’ component. It takes value as a prop to show circular progress. Users should execute the below command in the terminal to install the react-circular-progressbar NPM package in the React application. npm i react-circular-progressbar Syntax ... Read More

The button is used to perform some actions like form submission, file upload, link click, web page routing etc. The Material Ui provides the pre-styled button component, which users can import into the React application and use inside the React component. Different variants of the button are available in the Material UI, and users can use any according to their requirements. Execute the below command in the terminal to install the Material UI library. npm install @mui/material @emotion/react @emotion/styled Syntax Users should follow the syntax below to use the Button component of the Material Ui library. Click ... Read More

As the Box name suggests, it allows users to add the box of different dimensions on the web page. Users can also add any custom HTML content inside the Box component. Also, users can style the box by passing the style as props. To use the Box component of Material UI, users need to run the below command in the terminal to install the Material library. npm install @mui/material @emotion/react @emotion/styled Syntax Users should follow the syntax below to use the Box component of the Material UI library. Content of the Box. Users can see how ... Read More

In jQuery, the DataTables plugin allows us to add some extra features to the HTML table. When you create a table using the raw HTML, it looks unformatted. So, we need to style it using CSS. Also, we need to add some functionalities to the table, like pagination, searching into the table, and sorting in ascending and descending order according to a particular column's data. So, this all can take lots of effort from one developer. What if I say we add all functionalities using the DataTables plugin? Yes, you heard right. Here, we will look at the different examples ... Read More

In JavaScript, sometimes, we are required to use the variables as an object key. For example, when fetching data from the API and not sure about all the response data attributes, we must iterate through the response object and store every property of it. However, we can’t use the variables as a key while creating the object, but after creating, we can add the variable properties to the object. Syntax Users can follow the syntax below to use a variable for a key in a JavaScript object. object[key] = value; In the above syntax, ‘key’ is a variable containing ... Read More

Sharding is a method for distributing data or tasks across several machines to improve performance and scalability. Sharding is a technique used in test automation to distribute test cases among various instances of the testing framework and speed up test execution. Protractor is a testing framework that facilitates sharding test cases using the Jasmine test framework. To shard test files in Protractor, a configuration file must be written that details the path of the test files and the number of instances to be created. To shorten the overall test execution time, Protractor divides the test cases across several instances and ... Read More

In jQuery, we can trigger the ‘mousemove’ event to detect the mouse pointer's location on the web page. Also, we can detect the scroll using the ‘scroll’ event and subtract that value from the y position to get the relative mouse location. Using the ‘overflow-y: scroll’ CSS property, we can make any div scrollable. Syntax Users can follow the syntax below to get the relative mouse position while scrolling on the div. $('#main').scroll(function (event) { if (finalScroll != $('#main').scrollTop()) { location_y -= finalScroll; finalScroll = ... Read More

In JavaScript, an object contains the properties in the key-value format. We can access any property of an object using the property name by taking the object as a reference. Sometimes, we try to access the object property that doesn’t exist in the object. In such cases, we get the undefined value. Let’s understand it by the example below. Example (Accessing the Object Properties) In the example below, we have created the object and added some properties. Also, we have added some nested properties. After that, we try to access the ‘prop5’ property which is a nested property of the ... Read More