DEV Community: Amr Ataa

Autofocus Attribute

Amr Ataa — Fri, 13 Jan 2023 07:48:19 +0000

Again, HTML5 removes the need for JavaScript solutions. If a particular input should be "selected," or focused, by default, we can now use the autofocus attribute.

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

There are some important points that you need to keep in mind while using the autofocus attribute. Use of this attribute can cause behavior such as auto-scrolling of the page on load or the appearance of dynamic keyboards on smartphones.

Make Your Content Editable

Amr Ataa — Fri, 13 Jan 2023 07:45:30 +0000

Newer browsers have a nifty attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Making Content Editable</title>
</head>
<body>
    <h2>Editable To-Do List</h2>
    <ol contenteditable="true">
        <li>Break mechanical cab driver.</li>
        <li>Drive to abandoned factory.</li>
        <li>Watch video of self.</li>
    </ol>
</body>
</html>

Use “+” to convert string to number

Amr Ataa — Wed, 11 Jan 2023 06:21:26 +0000

You might be using Number() and parseInt() to convert string to number.

// ❌
let str = '123'
let num = Number(str) // 123
let num2 = parseInt(str) // 123

// ✅
let str = '123'
let num = +str // 123

Empower your front-end developers

Amr Ataa — Fri, 06 Jan 2023 13:07:51 +0000

GraphQL allows front-end developers to query and mutate the data without having to make requests for custom endpoints to back-end developers. Minimize the need for having backend developers perform low-value work.

Use “? … : …” instead of “if… else…”

Amr Ataa — Tue, 03 Jan 2023 07:42:50 +0000

Many times simple conditional judgments do not need to use “if”.

How JavaScript Works?

Amr Ataa — Mon, 02 Jan 2023 06:35:51 +0000

JavaScript is a programming language that is commonly used to add interactive features to web pages. It runs on the client side, which means that it is executed by the web browser on the user’s computer rather than on a server.

Here’s a high-level overview of how JavaScript works:

A web page is loaded in a web browser and the HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) code is rendered to create the layout and style of the page.
The web browser then looks for any JavaScript code that is included in the page. This code is usually included in one or more script elements in the HTML file.
The JavaScript code is executed by the web browser. It can manipulate the HTML and CSS on the page, respond to user events such as clicks and form submissions, and make requests to servers (using technologies such as XMLHttpRequest or fetch).
As the JavaScript code is executed, it can modify the content and appearance of the web page in real-time, making the page dynamic and interactive.

I hope this helps! Let me know if you have any other questions.

Thanks