Web Development Articles - Page 47 of 801

The SASS is a pre-processor built on top of the CSS to manipulate the CSS code better. It contains multiple directives and rules, making it easy to write CSS code. It also contains some very useful features such as inheritance, if/else statements, functions, etc. In SASS, we can import one file into another file and use one file's content for another. It also allows us to create inheritance between multiple classes. We can use the @extend directive to inherit one class to another class. By using inheritance in CSS, we can increase the reusability of the code. In this tutorial, ... Read More

In many cases, developers require to place an icon inside the text input or particular HTML element. For example, we are creating a form containing multiple inputs. If we put the icon related to the form input field inside the input, we can create a better UI and attractive design for the application. In this tutorial, we will use the font-awesome library to add the icon on the web page. Also, we will manipulate the CSS code to place the icon inside the input field. Syntax Users can follow the syntax below to place an icon inside the input field. ... Read More

To Place background image using ::before pseudo selectors, we will be using background-image and ::before psuedo element. CSS ::before pseudo-element is used to add content before the selected element with the content property allowing to insert text, images, or decorative elements, without modifying the HTML structure. In this article, we are going to place background image using ::before pseudo selector inside a div element. Placing background image using ::before pseudo selectors We have used a div element with class name as background where image will be used. We have used background ... Read More

Nowadays, every website contains at least a single form, such as a contact form, application form, etc. It is also required to notify users when the form is submitted successfully or with errors so that users can take action again. In JQuery, we can use the submit() method to call the callback function after submitting the form. However, we can also save form data to the database in the callback functions. So, there can be many use cases where we must call the callback function after submitting the form to perform the particular operations. Syntax Users can follow the syntax ... Read More

When developers develop a real-time web application, they need to deal with a large amount of data. For example, we have listed 1000 product data in the table format on the web page. If users want to find any particular product from the table, they need to scan the whole table by scrolling through it, which is a very bad user experience. So, it is necessary to add a search functionality to the table to allow users to search for any specific data in the table. Here, we will learn to add search functionality to the table using JavaScript and ... Read More

Web components are a powerful tool for building reusable and encapsulated UI elements in web applications. They allow developers to create custom elements with their own markup, style, and behavior, which can be easily reused across different projects and shared with other developers. In this article, we will explore the fundamentals of web components and learn how to build custom elements using JavaScript. What are Web Components? Web components are a set of web platform APIs that allow you to create reusable, encapsulated, and composable UI elements. They consist of three main specifications: Custom Elements, Shadow DOM, and HTML Templates. ... Read More

Have you ever wondered if it's possible to run high-performance applications on the web without sacrificing the portability and security that JavaScript provides? Well, wonder no more! With the introduction of WebAssembly (Wasm), it is now possible to bring native-like performance to web applications while still leveraging the power of JavaScript. In this article, we will explore the basics of WebAssembly and how it can be used alongside JavaScript to unlock a new world of possibilities. What is WebAssembly (Wasm)? WebAssembly, often referred to as Wasm, is a binary instruction format designed specifically for web browsers. It is a low-level ... Read More

In recent years, the world of robotics has seen a significant shift towards open-source technologies and platforms. One such platform that has gained immense popularity is Raspberry Pi, a small and affordable single-board computer. Coupled with the power and versatility of JavaScript, developers can now embark on exciting journeys into the world of robotics. In this article, we will explore how to build autonomous robots using Raspberry Pi and JavaScript, diving into code examples, explanations, and their output. Setting Up Raspberry Pi Before we delve into the realm of JavaScript robotics, it is essential to set up our Raspberry Pi ... Read More

JavaScript is a versatile programming language that runs on the client-side as well as the server-side. Traditionally, JavaScript executed tasks in a single-threaded manner, which limited its ability to handle computationally intensive operations efficiently. However, with advancements in web technologies, parallel programming in JavaScript has become possible through the use of Web Workers and SIMD.js. This article aims to introduce parallel programming concepts in JavaScript, focusing on Web Workers and SIMD.js, along with code examples to illustrate their usage. Understanding Parallel Programming Parallel programming involves dividing a task into smaller subtasks that can be executed concurrently, thereby utilising multiple resources ... Read More

In today's digital landscape, web applications have become increasingly sophisticated, offering a wide range of features and functionalities to users. However, this evolution comes at a cost: larger JavaScript bundle sizes. When a user visits a website, the browser is responsible for downloading and executing the entire JavaScript bundle, which can be a time-consuming process. This results in slower load times, increased network usage, and, ultimately, a negative impact on the user experience. To address this challenge, developers have turned to various techniques to optimize JavaScript bundle sizes. Two popular strategies that have gained traction are code splitting and lazy ... Read More