Found 7663 Questions for Front End Technology

What are Hooks in React?

Payal Mittal
Updated on 07-Nov-2022 09:26:21
React Hooks open up a completely new approach to constructing functional components, enabling us to include capabilities like stateful logic that are only available for class components. React mostly makes use of its built−in hooks, useState and useEffect Hooks, to do this. These hooks j In this article, we will go over what hooks are and how they can be used to create applications with React. We will also see how they simplify everyday development workflows. All About React Hooks As quoted by team React− “React Hooks are a new feature of React.js that makes it possible to use ... Read More

How does React work?

Payal Mittal
Updated on 07-Nov-2022 09:30:04
The front−end development ecosystem is constantly changing. It is getting harder for business owners to choose the finest library or framework from the many available since new tools are released daily. Speaking of frontend, React.js have been setting records in the web development industry for some time and doing splendidly despite having huge competition. Why is it so? How is it that react has been able to rule the IT industry while other libraries are still struggling? We’ll get all these answers in this blog. So, let’s dive in − What is React.js? React is an open−source, front−end JavaScript library, ... Read More

A Guide To Server-Side Rendering In React

Payal Mittal
Updated on 07-Nov-2022 09:12:19
Server−side rendering has been around for a while now. It was first introduced in the early 2000s and has been used by many websites since then. The idea behind this technique is to pre−render HTML pages on a server and send them back to the client's browser as they request them. With server-side rendering (SSR), the page is rendered on the server. This ensures that the page is available to users even before it loads on their browser. We’ll get to know more about SSR in this article − How Server-side Rendering (SSR) Works? It is the process of rendering ... Read More

How to embed base64 images in HTML?

Updated on 01-Nov-2022 13:11:58
To embed images encoded with Base64, use the img element. This prevents the page from loading slowly and saves the web browser from additional HTTP requests. Set the base64 image in the src attribute of the . Let’s say we have the following image − Note − The bigger the image, the more will its bease64 code For Base64, we will consider the Data URL of the image, which is placed in the src attribute. The Data URL has two parts − The 1st part is the Base64 encoded image. The 2nd part is the Base64 encoded ... Read More

Get the size of the screen, current web page and browser window in JavaScript

Updated on 01-Nov-2022 13:07:30
To get the current screen size of a web page, use the window.inner. We can also use the window.outerWidth and window.outerHeight as shown below to get the outer width and height of the web browser windows. We will see two examples − Get the Inner Width and Height Get the Outer Width and Height Get the Inner Width and Height To get the current screen size of a web page, use the window.innerWidth and window.innerHeight − var wd = window.innerWidth; var ht = window.innerHeight; Example Let us see an example − DOCTYPE html> ... Read More

Can different HTML elements have the same ID?

Updated on 01-Nov-2022 13:01:36
No, we cannot have the same ID for different elements in HTML. IDs have to be unique in the entire HTML page. Even the official HTML standards suggest the same − Using the unique id attribute Example Let us see an example. Here, we have used the id attribute − DOCTYPE html> #myHeader { border: 3px solid violet; background-color: blue; ... Read More

How do I make a placeholder for a 'select' box?

Updated on 01-Nov-2022 12:54:41
In HTML, placeholder attribute is present for creating a placeholder, but unfortunately it isn’t available for the select box. Create Placeholder for select We can use the option tag to define an option in a select list. The value attribute of the option tag is used for this. Here we have set List of Technologies as the placeholder text − List of Technologies Example Let us now see the complete example − DOCTYPE html> select { appearance: ... Read More

How to change the href attribute for a hyperlink using jQuery?

Updated on 01-Nov-2022 12:48:59
The jQuery attr() method is used to change the href attribute for a hyperlink. Query attr() method is used to fetch the value of any standard attribute from the matched HTML element(s). Let us see an example. First, get the current URL − var httpUrl = $(this).attr("href"); Create a new URL by replacing the above using the replace() − var httpsUrl = httpUrl.replace("http://", "https://"); We will convert the https links to link using what we saw above − Tutorialspoint Tutorialspoint Courses Tutorialspoint EBooks Tutorialspoint QA Example Let us see the complete example to change the ... Read More

Unescape HTML entities in JavaScript?

Updated on 01-Nov-2022 12:43:19
To unescape HTML entities in JavaScript, use the unescaped() function. Let’s say you want to encode special character with the unescape() function − document.write(unescape("Demo%20Text%20")); In this article, we will see two examples − Unescape Entities Decode the Encoded String Unescape Entities Example Lo unescape, we will use the unescaped() method in JavaScript. Let us see an example − DOCTYPE html> Demo Heading document.write(unescape("Demo%20Text%20")); Output Decode the Encoded String Use escape() for encoding ... Read More

How to make an element width: 100% minus padding?

Updated on 01-Nov-2022 12:38:47
Let’s say we have padding: 50px 10px; for the input and want it to be 100% of the parent div's width. Using width: 100%; is not working. To fix it, we can place the input in a div with position: relative and a fixed height. This will form the element width to be 100% minus padding. We have set the position to be relative with fixed height − .container { position: relative; height: 30px; } The position of the input is set absolute − content { position: absolute; ... Read More