teleren/devto huggingface dataset:
Understanding Asynchronous JavaScript: Callbacks, Promise Chains, and Order of Execution
Tags: webdev, javascript, programming
Published: 2024-06-27 18:33:35

In the dynamic world of JavaScript, managing asynchronous operations is crucial for building responsive and efficient applications. Asynchronous programming allows tasks to be executed independently, without blocking the main thread, ensuring smooth user experiences. However, handling asynchronous code can sometimes be challenging, especially when it comes to controlling the order of execution.

In this article, we'll delve into the concepts of asynchronous programming in JavaScript, focusing on callbacks, understanding callback hell, and exploring solutions like promise chains. We'll also discuss the importance of managing the order of execution to avoid unexpected behavior in your code.


### N.B This is a demo post for testing dev.to
How to automate NPM authentication to avoid providing credentials every time
Tags: deepcodr, npm, javascript, javascriptlibraries
Published: 2024-06-27 18:29:20

You must have used npm for publishing your javascript packages or using private libraries and packages. For developers using npm is a daily habit for building projects. However, It becomes tedious when authenticating NPM for using or publishing any package.
<br>

We can avoid this by automating npm authentication. To do so follow the steps below.

<br>
### Approach 1:

So the naive approach is setting up credentials as environment variables. You can add the following environment variables.

> `export NPM_CONFIG_EMAIL=<EMAIL>`

> `export NPM_CONFIG__AUTH=<AUTHENTICATION_TOKEN>`

> `export NPM_CONFIG_USERNAME=<USERNAME>`

> `export NPM_CONFIG_PASSWORD=<PASSWORD>`

You can get the Auth token from the NPMJS account settings page under Access tokens.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh74ndby0z51e9vj56yw.png)

You can create two types of tokens Granular access token or classic token.

Under classic token, you can create use read-only, automation or publish token. Among these tokens, automation tokens bypass 2Factor Authentication.

While Granular Access tokens provide more security by configuring multiple options such as Validity, IP addresses and permissions.

<hr>

### Approach 2

Another way to perform this is by just updating the **_.npmrc_** file in the user's directory. We need to add the following line to the file. Add your auth token in place of <YOUR_AUTH_TOKEN>.

```
//registry.npmjs.org/:_authToken=<YOUR_AUTH_TOKEN>
```

The next time you perform any operations related to NPM you can focus on development as there is no more need to provide credentials every time.
Creating an EC2 instance with SSH access using Terraform:
Published: 2024-06-27 18:24:16


**_Introduction :_**
               *.Terraform is an open-source infrastructure as code (IaC) tool that allows you to define and provision data center infrastructure using a high-level configuration language. One of the most common use cases for Terraform is managing cloud resources, such as creating and managing Amazon Web Services (AWS) EC2 instances.


**_Steps to Create an EC2 Instance with SSH Access:_**


1)_** Setup Terraform Configuration:**_ Write a Terraform configuration file **(main.tf) **that specifies the desired infrastructure, including the EC2 instance, security groups, and SSH key pair.
2)_** Initialize Terraform**_: Run terraform init to initialize the working directory containing the Terraform configuration files. This will download the necessary provider plugins.
3)**_ Plan Infrastructure Changes_**: Run terraform plan to create an execution plan. This command shows the changes that will be made to your infrastructure.
4)**_ Apply Configuration: _**Run terraform apply to apply the changes and create the EC2 instance. Terraform will prompt you to confirm before making any changes.
5) **_Access EC2 Instance: _**Once the instance is created, use the public IP address output by Terraform to SSH into the instance and verify the setup.
 
**_Conclusion:_**
                    By following these steps, you can efficiently deploy EC2 instances and manage your AWS infrastructure with greater confidence and control. As you continue to explore and use Terraform, you will find it an invaluable asset in your DevOps toolkit, helping you to achieve more with less effort.
How can I speak to Meesho Executive?
Tags: webdev
Published: 2024-06-27 18:15:12

How can I speak to Meesho Executive? Toll Free: [...] Online complain, 24/7) ,9831,228.932. (0626,7490.546- meesho complaint customer service /credit card/ report Transaction),1800-298-6161 (Report on-line application....
Hosting a Static Website Using S3 in AWS with Terraform
Published: 2024-06-27 18:06:28

Introduction
Hi there! I've been investigating Terraforms and AWS's capabilities as part of my internship. I recently worked on Hosting a Static Website Using S3 in AWS with Terraform
Hosting a static website on Amazon S3 is a cost-effective and scalable solution that can be easily managed using Terraform. This tutorial will guide you through the steps to set up and deploy a static website using S3 with Terraform.

### Prerequisites
Before you begin, ensure you have the following:
1. **AWS Account**: If you don’t have one, create it [here](https://aws.amazon.com/).
2. **Terraform Installed**: Download and install Terraform from the [official site](https://www.terraform.io/downloads).
3. **AWS CLI Configured**: Install and configure the AWS CLI. Follow the instructions [here](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html).

### Step-by-Step Guide

#### 1. Set Up Your Terraform Project
1. **Create a Directory**: Start by creating a directory for your Terraform project.
2. **Create the `main.tf` File**: This file will contain the Terraform configuration for your S3 static website.
    

#### 2. Initialize Terraform
Run the following command to initialize your Terraform project:


#### 3. Plan the Deployment
Run the `terraform plan` command to see what Terraform will do:

#### 4. Apply the Configuration
Apply the configuration to create the S3 bucket and upload the website files:
Terraform will prompt for confirmation. Type `yes` to proceed.

#### 5. Verify the Deployment
Once the apply command completes, Terraform will output the website URL. You can access your static website using this URL.

### Conclusion

Using Terraform to host a static website on Amazon S3 simplifies the deployment and management process. With infrastructure as code, you can version, reproduce, and maintain your static websites more efficiently. This guide provides a foundational setup, which you can expand upon by adding more resources and configurations as needed.By leveraging Terraform and AWS S3, you can quickly deploy scalable and reliable static websites, making your web hosting process smoother and more efficient.
Interview with Vitor Ayres, a Tauri Maintainer
Tags: rust, tauri, opensource, maintainer
Published: 2024-06-27 18:06:26

Welcome to the first episode of our new series “Tauri Maintainers”, where we chat with [Tauri](https://tauri.app/) maintainers.

In this episode, [Eleftheria](https://twitter.com/BatsouElef) discusses with [Vitor Ayres](https://www.linkedin.com/in/ayresvitor):

* How he started
    
* What motivated him to contribute to Tauri
    
* Best practices and tips for building Tauri apps
    
* Decision-making and the “documentation process” inside the Tauri Working Group
    
* Advice for developers interested in contributing to open-source projects
    
* And more!
    

Check out the [video](https://youtu.be/np4KB-PsUSg):

{% embed https://youtu.be/np4KB-PsUSg %}

## Find Out More 🔗

* Find Vitor on [LinkedIn](https://www.linkedin.com/in/ayresvitor) and on [X](https://twitter.com/eu_vi_tor)
    
* Join [Tauri](https://discord.gg/TMeDqHPa)’s and [CrabNebula](https://discord.gg/7U2Ed9AnuQ)’s discord servers
    

Have you built something cool with Tauri? Ping Eleftheria (username: eleftheria\_b) on [Discord](https://discord.gg/tsvf4TEaB5) to schedule your interview! This is your chance to demonstrate your product to a community of thousands of developers. 😏

---

Author: @eleftheriabatsou, Community Manager at @crabnebuladev.
Cloud Migrations Paving the Way for Digital Excellence
Tags: cloud, migration, devops, digitaltransformation
Published: 2024-06-27 18:06:16

## What is Cloud Migration?

💻 Cloud migration refers to the process of moving digital assets – like data, applications, or workloads – from on-premises infrastructure or a legacy data center to the cloud. It&#x27;s a critical step in an organization&#x27;s digital transformation journey, offering a myriad of benefits.

## Why Migrate to the Cloud?

💥 The momentum behind cloud migrations is driven by compelling advantages:

- 🔥 **Cost-Efficiency:** Eliminate costs associated with maintaining and updating on-premises hardware.
- 🌍 **Scalability:** The cloud can effortlessly scale resources up or down based on demand.
- 💻 **Innovation:** Leverage cloud-native tools and services to foster innovation and growth.

## Key Considerations for Cloud Migration

🛡️ Migrating to the cloud is a significant endeavor, and its success hinges on meticulous planning:

- 🔄 **Assessment:** Understand what digital assets you have and what needs to be migrated.
- 🔒 **Choose the Right Migration Strategy:** Decide between various strategies like rehosting, refactoring, or rebuilding.
- 🕵️ **Security &amp; Compliance:** Ensure that the cloud environment meets necessary regulatory and security standards.
- 📚 **Post-Migration Testing:** Once migrated, rigorously test applications and workflows to ensure functionality.

## Overcoming Migration Challenges

Migrating to the cloud can come with its set of challenges:

- 🚀 **Downtime:** Plan migrations during off-peak hours or in stages to minimize disruptions.
- 🛡️ **Data Loss:** Regular backups and data integrity checks are crucial.
- 💼 **Skill Gap:** Equip your team with the necessary skills or collaborate with cloud migration experts.

## Conclusion

💻 Cloud migrations, when executed correctly, can supercharge an organization&#x27;s digital capabilities. While the journey might be intricate, the rewards in terms of efficiency, scalability, and innovation are unparalleled. Embark on your cloud migration journey and harness the power of the future! ☁️🚀
TextField
Tags: java, programming, learning, beginners
Published: 2024-06-27 17:57:24

A text field can be used to enter or display a string. **TextField** is a subclass of **TextInputControl**. Figure below lists the properties and constructors in **TextField**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atiwatmtj409rd6nk5h6.png)

Here is an example of creating a noneditable text field with red text color, a specified font, and right horizontal alignment:

`TextField tfMessage = new TextField("T-Strom");
tfMessage.setEditable(false);
tfMessage.setStyle("-fx-text-fill: red");
tfMessage.setFont(Font.font("Times", 20));
tfMessage.setAlignment(Pos.BASELINE_RIGHT);`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pa6u3dy6zgtwqtywuzcw.png)

When you move the cursor in the text field and press the Enter key, it fires an **ActionEvent**. The code below gives a program that adds a text field to the preceding example to let the user set a new message, as shown in Figure below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74b1mhldxhwp9g4m6rl9.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40yr6dtyr4mybe2v2gt4.png)

**TextFieldDemo** extends **RadioButtonDemo** (line 9) and adds a label and a text field to let the user enter a new text (lines 14–21). After you set a new text in the text field and press the Enter key, a new message is displayed (line 24). Pressing the Enter key on the text field triggers an action event. 

If a text field is used for entering a password, use **PasswordField** to replace **TextField**. **PasswordField** extends **TextField** and hides the input text with echo characters ******.
How to Install,create,modify,destroy EC2 instances in AWS using Terraform !
Published: 2024-06-27 17:49:57

**_Introduction :_**
*.Terraform is a powerful tool that can be used to create, modify, and destroy EC2 instances, among other resources.
*.This introduction provides an overview of how to manage EC2 instances in AWS using Terraform, covering the essential steps and concepts involved.


**_EC2 Instance:_**
       *.Amazon Elastic Compute Cloud (EC2) is a web service that provides secure, resizable compute capacity in the cloud.
       *.EC2 instances are the virtual servers in AWS, and you can use them to run applications, host websites, and much more.
      *.Managing these instances involves tasks such as launching, configuring, and terminating them.

**_Terraform:_**
*.Terraform uses a declarative language (HCL - HashiCorp Configuration Language) to define the desired state of your infrastructure. 
*.By applying these configurations, Terraform ensures that the actual state matches the desired state, automating the provisioning and management of resources.


**_Steps to create EC2 instances with Terraform:_**
 
**_1)  Setup Terraform and AWS Provider:_**

*.Install Terraform.
*.Configure the AWS provider with your AWS credentials.

**_2) Create an EC2 Instance:_**

*.Define an EC2 instance resource in a Terraform configuration file.
*.Initialize Terraform in your configuration directory.
**_[terraform init]_**


**_3) Modify an EC2 Instance:_**

*.Update the Terraform configuration file to reflect the desired changes.
*.Plan and apply the configuration to modify the EC2 instance.
**_[terraform plan
terraform apply]_**

**_4) Destroy an EC2 Instance:_**

*.Use the terraform destroy command to remove the EC2 instance and clean up associated resources.
_**[terraform destroy]**_


**_Conclusion:
_**
Managing EC2 instances with Terraform streamlines the process of provisioning, updating, and decommissioning cloud resources. By using infrastructure as code, you can ensure consistency, reduce manual errors, and enhance collaboration within your team. Terraform's declarative approach and robust state management make it an indispensable tool for modern cloud infrastructure management.





****
Setting Raspberry Pi with Laptop
Tags: raspberrypi
Published: 2024-06-27 17:48:52

### Requirements
1. Raspberry Pi (all models)
2. Memory card (16GB or larger recommended)
3. SD Card adapter
4. LAN cable
5. Power adapter

---

**Disclaimer**:

> You can use any operating system of your choice. I'll be demonstrating with Arch Linux, but the steps are applicable across different OSes.

## Installing the Operating System

Start by downloading your preferred Raspberry Pi operating system [here](https://www.raspberrypi.com/software/operating-systems/). If you prefer another ARM-based OS, feel free to download it instead.

## Flashing the OS

To flash the OS onto your SD card, download Raspberry Pi Imager from [here](https://www.raspberrypi.com/software/) or from their [GitHub repository](https://github.com/raspberrypi/rpi-imager.git) for other systems.

1. Connect the SD card to your computer.
2. Open Raspberry Pi Imager.
3. Select your device.
4. Choose the downloaded OS.
5. Select the SD card as the storage location.
6. Configure hostname, username, and password.
7. Enable SSH.
8. Write the image to the SD card.

## Setting Up Remote Access

After flashing:
- Create an empty file named `ssh` (without an extension) in the `bootfs` directory of the SD card.
- Eject the SD card and insert it into your Raspberry Pi.
- Power on the Raspberry Pi.
- Connect your laptop to the Raspberry Pi using a LAN cable.

### Using PuTTY and VNC Viewer

Download PuTTY for SSH access and VNC Viewer for a graphical interface.

1. Open PuTTY and connect using `<hostname>.local`.
2. Accept the connection and log in with the previously set credentials.

### Enabling VNC

To enable VNC for graphical access:

```bash
sudo raspi-config
```

Navigate to:
1. **Display options**: Set a resolution.
2. **Interface options**: Enable VNC.

Access VNC by typing `<hostname>.local` into your browser's address bar.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbjxvqujj7200mt7ex3u.png)

### Logging in via Command Line/Terminal

To access the Raspberry Pi via terminal:

```bash
ssh <username>@<hostname>.local
```

or

```bash
ssh <username>@<ip_address_of_pi>
```

---

Stay tuned for more exciting projects and tutorials in my Raspberry Pi series! Happy tinkering!
Letzz Understand Temporal Dead Zone in JS ( TDZ ) ;)
Tags: webdev, javascript, beginners, programming
Published: 2024-06-27 17:43:16


Let's Understand What is TDZ ;)


![Yes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kehi8ke7i2dgcdducdjg.png)



## What is the Temporal Dead Zone (TDZ)?

- The Temporal Dead Zone refers to a period of time during the execution of your code where variables declared with let and const cannot be accessed before they are actually declared. This period starts from the beginning of the enclosing scope (e.g., a function or a block) and ends when the variable is declared.


![Yeah](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opn0k3qusielfx4m4axx.png)


## Let's understand in easier way.



we have one code below,
Now, What happened - Javascript Code will execute line by line so it runs line number 1 and at line no 1 variable "a" is not declared so it will throw the error of "**ReferenceError**".

So Now Line No 1 and 2 is called "**Temporal Dead Zone**"


![Let TDZ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vrvtxspozqhdz6rv8nb.png)


> Now, let's use the same code with "var" variable. so, it'll not throw any error. 

**Why it's not throwing an error??**

- variables declared with **var** are hoisted to the top of their scope and initialized with **undefined**. This can lead to `subtle bugs`, which is why **let** and **const** were introduced with the TDZ to avoid such issues. 


![Var TDZ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57ym84kv2acrigx86yu1.png)

Now, Let's See How to Avoid it, 

## How to Avoid Issues with the TDZ

- Declare Variables at the Top: To prevent running into the TDZ, declare your variables at the top of their scope.


![Test 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixwjk34t3rq3ov0c36va.png)

- Use const When Possible: If you don't plan to reassign a variable, use const to make your intentions clear and avoid accidental reassignments.


![Test 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15kchtgapwv07p32n384.png)

## Conclusion

- The Temporal Dead Zone is a concept that ensures variables declared with let and const are not accessed before they are defined. It helps in catching errors early and makes your code more reliable. By understanding and leveraging the TDZ, you can write cleaner and more predictable JavaScript code.

Thanks...
1791. Find Center of Star Graph
Tags: php, leetcode, algorithms, programming
Published: 2024-06-27 17:41:40

1791\. Find Center of Star Graph

Easy

There is an undirected **star** graph consisting of `n` nodes labeled from `1` to `n`. A star graph is a graph where there is one **center** node and **exactly** `n - 1` edges that connect the center node with every other node.

You are given a 2D integer array `edges` where each <code>edges[i] = [u<sub>i</sub>, v<sub>i</sub>]</code> indicates that there is an edge between the nodes <code>u<sub>i</sub></code> and <code>v<sub>i</sub></code>. Return the center of the given star graph.

**Example 1:**

![star_graph](https://assets.leetcode.com/uploads/2021/02/24/star_graph.png)

- **Input:** edges = [[1,2],[2,3],[4,2]]
- **Output:** 2
- **Explanation:** As shown in the figure above, node 2 is connected to every other node, so 2 is the center.

**Example 2:**

- **Input:** edges = [[1,2],[5,1],[1,3],[1,4]]
- **Output:** 1

**Constraints:**


- <code>3 <= n <= 10<sup>5</sup></code>
- <code>edges.length == n - 1</code>
- <code>edges[i].length == 2</code>
- <code>1 <= u<sub>i</sub>, v<sub>i</sub> <= n</code>
- <code>u<sub>i</sub> != v<sub>i</sub></code>
- The given `edges` represent a valid star graph.


**Solution:**


```
class Solution {

    /**
     * @param Integer[][] $edges
     * @return Integer
     */
    function findCenter($edges) {
        return $edges[0][0] == $edges[1][0] || $edges[0][0] == $edges[1][1]
               ? $edges[0][0]
               : $edges[0][1];
    }
}
```



**Contact Links**

- **[LinkedIn](https://www.linkedin.com/in/arifulhaque/)**
- **[GitHub](https://github.com/mah-shamim)**
QuickSlice Orders
Tags: javascript, react, python, php
Published: 2024-06-27 17:30:25

[](https://quicksliceorders.netlify.app/)

QuickSlice Orders

"Pizza Palace Online Ordering" is a modern web application designed to streamline the pizza ordering process, bringing convenience and efficiency to both customers and restaurant staff. Built with React.js and Firebase, the platform offers a seamless user experience with robust features including user authentication, a dynamic menu display, and an intuitive order form.
How To Use HttpClient on a .NET8 Prerendered Blazor App with Auto/Wasm Rendermode
Tags: csharp, blazor, dotnet, httpclient
Published: 2024-06-27 17:25:13

Using the http client in a blazor ssr app can be annoying, the following error would be thrown when the blazor wasm component is prerendered on the server:

`fail: Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[1]
      An unhandled exception has occurred while executing the request.
      System.InvalidOperationException: An invalid request URI was provided. Either the request URI must be an absolute URI or BaseAddress must be set.`

The correct registration and usage of the http client on the client will not work when prerendering is enabled:
```cs
// Project.Client/Program.cs (the wasm project)
builder.Services.AddScoped(sp => new HttpClient { 
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
});

// Project.Client/Pages/FetchTest.razor
@page "/FetchTest"
@inject HttpClient httpClient
@rendermode InteractiveWebAssembly

<div>...</div>

@code
{
    protected override async Task OnInitializedAsync()
    {
        var res = await httpClient
            .GetFromJsonAsync<YourType>("api/fetchtestdata");
        ^^^^^^^^^^^ will fail at this point in ssr ^^^^^^^^^^
        // ... rest
    }
}
```

But there is a solution/workaround for this!
Just disable any http client usage in the prerendering, like early return in the OnInitialized method, before the http client is actually used.

Here an example:
```cs
@page "/FetchTest"
@inject HttpClient httpClient
@rendermode InteractiveWebAssembly
@using System.Runtime.InteropServices

<div>...</div>
@code
{
    protected override async Task OnInitializedAsync()
    {
        var isPrerendering = RuntimeInformation.ProcessArchitecture != Architecture.Wasm;
        
        Console.WriteLine("prerendering: " + isPrerendering);
        
        if(isPrerendering)
            return;

        var res = await httpClient
            .GetFromJsonAsync<YourType>("api/fetchtestdata");

        // ... rest
    }
}
```

Now the error is gone and the blazor component with webassembly rendermode is working prerendered.

The server will log `prerendering: True` and the console in the browser will log `prerendering: False`.

Google, ChatGTP did not help that much, took a while to find this solution – actually from `SamBerk` on this post: https://stackoverflow.com/questions/60589776/detecting-server-pre-rendering-in-blazor-server-app