teleren/devto huggingface dataset:
Steps using useState Hooks in react app.
Tags: usestate, react, step, javascript
Published: 2023-01-03 15:47:38

To create steps using useState in React, you can define an array of step objects in your component and use useState to keep track of the current step. You can then use this state to render the appropriate step. Here's an example of how you might do this:

```
import { useState } from 'react';

function Steps() {
  const steps = [
    { label: 'Step 1', component: <Step1 /> },
    { label: 'Step 2', component: <Step2 /> },
    { label: 'Step 3', component: <Step3 /> }
  ];

  const [currentStep, setCurrentStep] = useState(0);
  const currentStepData = steps[currentStep];

  return (
    <div className="steps">
      <ul>
        {steps.map((step, index) => (
          <li key={step.label} className={index === currentStep ? 'active' : ''}>
            <button onClick={() => setCurrentStep(index)}>{step.label}</button>
          </li>
        ))}
      </ul>
      {currentStepData.component}
    </div>
  );
}
```
In this example, the steps array holds the data for each step, including the label to display in the step list and the component to render for each step. The currentStep state variable is used to keep track of the current step, and the setCurrentStep function is used to update the current step when the user clicks on a different step.

The step list is rendered using the steps array, with a li element for each step. The active class is added to the li element for the current step to highlight it. The step component is rendered below the step list using the currentStepData.component value.working
Flask, AirPlay and the port 5000
Tags: python, postman, flask, pain
Published: 2023-01-03 15:46:56

I have finally set up my VSCode to debug a Flask application. I fire a curl request to http://localhost:5000/whatever and hit the breakpoint. So far, so good. Now I want to store some request examples as a Postman collection. I import the same curl request into Postman, parametrize the domain as an environment variable, hit the “Send” button and…

`403 forbidden`. Ok, there must be something wrong. Let’s check! After a couple of minutes of searching I realize I should not have used the env variable, the endpoint path is now duplicated, http://localhost:5000/whatever/whatever. Whatever, let’s shorten it as it is supposed to be…

`403 forbidden`.  It still doesn’t work. Ah, Postman is clever, it has `Initial Value` and `Current value` for the variables. Let’s manually edit the current value, restart the app out of superstition and fire the request again…

`403 forbidden`.  Things are getting overly suspicious! Let me fiddle with the Postman headers: Content-Type, User-Agent, Accept… After switching the headers on and off in different combinations in random order I notice the response headers. They say `Content-Length: 0` and `Server: AirTunes/610.19.1`.  AirTunes doesn’t look like a Flask server, does it? I fire the curl request again in my terminal and see that the server is `Werkzeug`. 

After some duckduckgoing I found out that [Apple listens as AirPlay Receiver on the port 5000](https://developer.apple.com/forums/thread/693768) (standard Flask port), because it wasn’t registered by Internet Assigned Numbers Authority. For some reason Apple decided `5000` will be a good port (and Flask and dotnet Core and Heroku and Docker Registry). I don’t know who was the first to claim the port and why the subsequent implementations didn’t consider the first ones. I also don’t know why curl reaches my Flask app and Postman doesn’t. It’s tiring researching absolutely unnecessary piece of information.

So I changed my Flask port and it worked. I hope it helps to you as well.
Cloud Computing
Tags: devops, cloud
Published: 2023-01-03 15:45:20

Cloud Computing
We offer essential services for public cloud with complete infrastructure support that caters to your requirements.
Our expert engineers build cloud applications that deploy agile and easier application servers saving your time and valuable resources. Providing your business an edge towards networking solutions and scale your business with cloud native routing software we are a solution provider of cloud computing that is low on cost. We facilitate smooth flow of data through our cloud solutions like cloud hosting, serverless computing, incident automation, cost optimizations, compliance and infrastructure optimizations with a wide range of security tools for managing and storing data in a secure manner.
The Best AC for Your Home or Office
Tags: aircondition, workfromhome, productivity, development
Published: 2023-01-03 15:37:11

As a developer, finding products that enhance my work environment while also prioritizing my health is always a top priority. That's why I was drawn to the Lloyd 1.0 Ton 3 Star Inverter Split AC with Anti-Viral + PM 2.5 Filter. With its modern and sleek design, efficient inverter technology, and advanced air purification features, it's the perfect AC for any home or office.

![AC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxh5ruz8vw7iedd7hrta.jpg)

The installation process for the Lloyd AC was a breeze thanks to the included mounting kit, and the unit itself runs quietly and efficiently. Its 3-star energy rating also helps lower energy costs and reduce your carbon footprint.

> Get yours today at the following link: https://www.amazon.in/Lloyd-Anti-Viral-GLS12I3FWAVG-Indication-Installation/dp/B09TNRLJG6?tag=thankyoubuddy-21


But the real standout feature of the Lloyd AC is its built-in Anti-Viral + PM 2.5 Filter, which removes up to 99% of germs, viruses, and PM 2.5 particles from the air. As someone who spends long hours in front of a computer, the added protection and peace of mind provided by the filter are invaluable.

I've been using the Lloyd AC for several months now and have been thoroughly impressed with its performance. It cools my home office quickly and effectively, even on the hottest days, and the build quality is top-notch. Plus, the customer service provided by Lloyd has been excellent.

Overall, the Lloyd 1.0 Ton 3 Star Inverter Split AC with Anti-Viral + PM 2.5 Filter is the best AC for your home or office. Its advanced features and excellent performance make it a valuable addition to any space, and I would highly recommend it to any developer or individual looking to improve their indoor air quality and overall comfort. So, if you're in the market for a new AC, be sure to check out the Lloyd 1.0 Ton 3 Star Inverter Split AC with Anti-Viral + PM 2.5 Filter.
String.startsWith() in JavaScript
Tags: webdev, javascript, programming, tutorial
Published: 2023-01-03 15:30:00

The `String.prototype.startsWith()` method is a string method in JavaScript that returns a Boolean value indicating whether a string starts with a specified search string. This method is case-sensitive, meaning that it will return true only if the search string exactly matches the beginning of the target string.

## Syntax

```js
string.startsWith(searchValue, start)
```

- _**searchValue**_: A specified search string to be searched for at the beginning of the string.
- _**start**_: The position within the string at which to begin searching for `searchString`. (Defaults to `0`.)

It returns a boolean value, `true` if the searched string is found at the beginning of the given string; otherwise `false` if not found.

Here's an example of how to use the `startsWith()` method:

```js
let str = 'Hello, world!';

console.log(str.startsWith('Hello')); // Output: true
console.log(str.startsWith('hello')); // Output: false
```

In this example, we create a string called `str` and use the `startsWith()` method to search for the substring 'Hello' at the beginning of the string. Since the search string exactly matches the beginning of the string, the `startsWith()` method returns true. However, if we search for the string 'hello', which is not an exact match, the `startsWith()` method returns false.

The `startsWith()` method also accepts an optional second argument, which is the index at which the search should start. This is useful if you want to search for a substring within a specific part of the target string.

Here's an example of using the optional second argument:

```js
let str = 'Hello, world!';
console.log(str.startsWith('world', 6)); // Output: true
```

In this example, we search for the substring `'world'` within the string `str`, starting at the index `6`. Since the string `'world'` appears at index `7`, the `startsWith()` method returns true.

## Wrapping up!

The `startsWith()` method is a convenient and easy way to check if a string starts with a specified substring in JavaScript. It's often used in combination with other string methods, such as `indexOf()` and `substr()`, to perform more complex string operations.

That's all for this article, hope you learned something. Thanks for reading, catch you later.

You can also buy me a coffee that would help me grow as a frontend developer :)

<a href="https://www.buymeacoffee.com/moazamdev" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 100px !important;" ></a>

---

{% user moazamdev %}
Can a decision-making tool be powered by GPT?
Tags: gpt3, chatgpt, gpt, ai
Published: 2023-01-03 15:22:46

With the incredible capabilities of generative AI, 2023 is shaping up to be a game-changing year for startups and builders. Don’t just take our word for it; try Rationale out for yourself and see the difference it can make for your business. Get started today!

Today, we're thrilled to announce [Rationale](https://rationale.jina.ai/), an AI-powered decision-making tool that's here to help business owners, managers, and individuals make tough decisions with confidence.

Decision-making can be a daunting task, especially when you have to weigh multiple factors and consider the potential consequences of your choices. That's where Rationale comes in. With state-of-the-art GPT3.x and in-context learning algorithms, our app is specifically designed to help you make informed decisions.

In this new release, you'll learn: 

**- Pros & Cons listing & SWOT analysis**

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

**- Personalized analysis**

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

**- Multilingual support**

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

**- Universal experience on every device**

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

Click [here](https://jina.ai/news/introducing-rationale-decision-making-tool-powered-latest-gpt-context-learning/?utm_campaign=introducing-rationale&utm_source=dev.to&utm_medium=post) to get 50% off on your first purchase
What new badges would you like to see on DEV?
Tags: meta, discuss
Published: 2023-01-03 15:16:21

It's a new year and for many of us that means new goals, resolutions, and general self improvement.


![Cute mushroom character with a determined face doing pull-ups. The words "this will be the year" appear on screen.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3g11oeomv62hxt8mcstj.gif)

I know lotsa folks like to set goals around writing, which gets me thinking about [badges](https://dev.to/badges) on DEV. We have writing streak badges, community wellness streak badges (for leaving comments), tag-specific badges, and the highly coveted Top 7 badge, just to name a few. 

We can always add more badges to the site! So, do y'all have any thoughts or opinions about new ones you'd like us to include? Or, if you don't have specific ideas for badges, but have thoughts on things that you think we should reward folks for, it's totally fine to just drop those rough ideas for us to brainstorm together. _Note: we try our best to steer away from awarding badges that might cause unhealthy habits or stress, so let's keep this in mind._

What new badges would you like to see on DEV?
Components in Nuxt 3
Tags: webdev, javascript, beginners, programming
Published: 2023-01-03 15:10:53

{% embed https://www.youtube.com/watch?v=o4SkcTupZBo %}

Components are a key part of any modern front-end JavaScript framework and Nuxt.js is no different. Nuxt.js makes it easy to create components that are useful on a wide variety of routes by abstracting the complex configuration required to use Vue.js components in a server-rendered app.

There are two types of components in Nuxt.js: layout components and page components.

Layout components are used to define the structure of the app, such as the header and footer. They are global components that are available to all routes.

Page components are specific to a route and contain the content that is displayed on that route. They can be nested and can also include layout components.

To create a component in Nuxt.js, you simply create a .vue file in the /components directory. The component can then be auto-imported and used in the template of a page component or layout component.

You can also create asynchronous components in Nuxt.js, which allows you to load components only when they are needed. This is useful for optimizing the performance of your app by only loading the components that are actually being used.

Nuxt.js also includes a component caching feature, which allows you to cache the component's data so that it is not re-fetched each time the route is visited. This can improve the performance of your app by reducing the number of server requests.

Overall, components are an essential part of building a Nuxt.js app and are a powerful way to modularize and reuse code.

Guillaume Duhan
Arrays & Structs.
Tags: blockchain, web3, beginners, programming
Published: 2023-01-03 14:39:56

**Solidity Reference Types**

At this point, you are well on your way to becoming a Solidity master. We've looked at the primitive data types in Solidity, such as:

**uint/int**
**boolean**
**address**
**enum**
**bytes**

Primitive data types can also be referred to as "value types". A value type stores its data directly in the variable.

Solidity, like most other object-oriented programming languages, has another type of data for reference-based data types, such as:

**arrays**
**strings**
**structs**

mappings (also reference types, but we've already covered them quite heavily!)
A reference type does not store values directly in a variable. Instead, reference types hold a pointer to the address of the data's location.

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

The two main reference types we will cover today are: arrays and structs.

**Arrays**
In computer science, an array is a data structure consisting of a collection of elements (values or variables), each identified by at least one array index or key. In Solidity, an array can be both of fixed or dynamic size.

What Are Dynamic & Fixed Arrays?
The size of dynamic arrays are not predefined when they are declared. As elements are systematically added, the size of the dynamic array changes, and during runtime, the actual size of the array will be determined.

In contrast, fixed arrays have a predefined size, and the quantity of elements present in the array should not exceed the size of the array.

Storage Arrays
Storage arrays are typically declared as state variables and can be either fixed or dynamic in size. Here's a Solidity code snipper declaring both a fixed and dynamic-sized array in a simple **MyContract**


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

Both fixed and dynamic sized arrays have access to the .length array member:

.length: returns how many values an array holds per index
Dynamic storage arrays have the typical array methods available, such as:

.push(): used to add an element to the array at the last position

.pop(): used to remove an element of the array at the last position
Machine Learning Master's degree
Tags: machinelearning, computerscience, python, datascience
Published: 2023-01-03 14:37:46

To validate my master's degree, I need to work on a new project.

The objective is to choose a machine learning model associated with a recent research article (nothing more than 18 months old) and to choose a dataset on which to apply it to establish a POC. 

Would you have any ideas to submit to me? I would like if possible to do something in the computer vision
Code is cheap, show me the product!
Published: 2023-01-03 14:29:10

Coding is more complex than ever. Creating a new product is much more complex.

A software developer must have deep knowledge of a subject and knowledge of many other technologies. This t-shaped skill helps developers to build software from end to end. If you are a backend developer you need to understand how frontend works and vice versa. And add some Docker, cloud systems (AWS, Azure …), CI/CD knowledge. Don’t forget to add database knowledge.

Now you are a complete development team, right? No. This is how things work nowadays. Literally. If your code is not working, you need to know the problem’s source. Is it your code, infrastructure, or pipeline? Is data orphaned? Accessing the logs and reading them is also getting complex. You need to use a few tools to just read logs. This is getting crazy.

Despite all this, coding is not so important. Yep! You heard it right.

People care about products, not codes.

Who is using your product?

Who is paying for that?

What difference does your product make?

What is the added value?

How do you differentiate from your opponents?

and many other questions that disturb you about your product

Getting customers is hard. Keeping them is too hard. Word-of-mouth marketing and becoming a love brand is every product owner's dream. But we live in the real world. Who cares about your product? You answer "why", and I answer you "who". Think about why and add some difference. Then sell it. People will love it if you focus on why. People will talk about it if they love it.

Developers? Don't listen to them too much. Give developers freedom, and power but always listen to your clients more. Some solutions don't require coding, some solutions only need integration which can be solved with no-code integration tools. Focus on finding a solution to problems, not on coding.

Implementing a new feature is hard. Implementing the right feature is too hard. Users always request new features. They want a magic button that solves everything. Measure it! Use analytic tools, A/B testing, and ask your clients. But measure it, twice.

Fixing the bugs is hard. Prioritizing bugs is too hard. You always have bugs in your code. You always complaining customers. It is the nature of software. You have limited time and limited resources. You need to prioritize.

If it is not a bug, it is a feature.

Product is the new king! Developers can code any product (just ignore the pain). Even ChatGPT can write code. But what is the right product?

Source: [https://emremert.dev/code-is-cheap-show-me-the-product](https://emremert.dev/code-is-cheap-show-me-the-product)
AEROSPIKE
Published: 2023-01-03 14:24:53

**Aerospike is a distributed, in-memory, NoSQL database. It is designed to be horizontally scalable and to handle high transaction rates with low latency. **

Here are a few key features of Aerospike:

- In-memory data storage: Aerospike stores data in RAM to provide very fast access times.

- Persistence: Aerospike can also write data to disk to provide data durability in case of power failure or server restart.

- Automatic scaling: Aerospike automatically distributes data across multiple servers, allowing it to scale horizontally as the data set grows.

- Strong consistency: Aerospike provides strong consistency, meaning that all nodes in the cluster see the same data at the same time.

- Support for multiple data types: Aerospike supports storing a variety of data types, including strings, integers, lists, and maps.

- Built-in query language: Aerospike has a built-in query language called AQL that can be used to retrieve and manipulate data.

- High availability: Aerospike is designed to be highly available, with features such as cross-data center replication and automatic failover.
New Year's Resolutions for a neurodivergent junior developer
Tags: impostersyndrome, devjournal, 100daysofcode, neurodivergency
Published: 2023-01-03 14:24:36

When it comes to making New Year's resolutions, a lot of people try to stick to them but realise it is a very difficult process. This is even more different for neurodivergent people, who often deal with [executive dysfunction](https://www.additudemag.com/what-is-executive-function-disorder/), which makes being productive very difficult. I have tried everything, from Trello boards to journaling and while those methods are effective for a week, the executive dysfunction eventually wins out and I become unproductive again. However, this year, I plan to change that by doing the 100 Days of Code challenge.

Last month, I purchased Angela Yu's [100 Days of Code: The Complete Python Pro Bootcamp](https://www.udemy.com/course/100-days-of-code/) from Udemy to learn Python as it is a very versatile programming language but I could only watch a few videos a day before stopping instead of doing all of the videos of one section in a day. 

I decided to change this by making one of my resolutions be to have more than 300 contributions in my [GitHub](https://github.com/toyinariyo) for 2023 as I would always have under 100 contributions in my GitHub for the previous years (2020, 2021, 2022). Seeing the little green contribution squares helps gamify the process of coding in my mind and it makes me feel more productive. I uploaded Day 1's code to my GitHub on Sunday to start my resolution.

```
print("Hello user. Welcome to Toyin's band name generator")
city = input("What city did you grow up?\n")
pet = input("What is the name of your pet?\n")
print("Here is your band name: " + city + " " + pet)
```

I also wanted to further my C# skills so I have decided to convert the above Python code to C# so that I can gain a better understanding in both programming languages. 

```
using System;

class Program {
  public static void Main (string[] args) {
    string city;
    string pet;
    Console.WriteLine ("Hello user. Welcome to Toyin's band name generator");
    Console.WriteLine("What city did you grow up in?");
    city = Console.ReadLine();
    Console.WriteLine("What is the name of your pet?");
    pet = Console.ReadLine();
    Console.WriteLine("Here is your band name: " + city + " " + pet);
  }
}
```
I will post Day 2's code tomorrow for both programming languages tomorrow. Doing this challenge and documenting them with these daily blogs will improve my skills as a developer and will make me more confident in my programming.