teleren/devto huggingface dataset:
5 Most Used Array Methods in Front-End Development
Tags: webdev, javascript, beginners, programming
Published: 2024-05-24 16:52:00

Today we will see the most important array methods when developing front-end software. They are the most used array methods in my experience.

It is important to be very clear about how they work to develop software quickly and efficiently in our day-to-day since we work a lot with arrays.

Most people need help understanding them, and they always have to go and recheck their operation and spend extra time on it.

## 5 top array methods

The 5 array methods we are going to talk about are:

**forEach

map

filter

find

slice**

Let's go!

## forEach
It executes a provided function once for each array element.


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

## map
It's the method most used when developing with React, as it renders lists of JSX elements.

This method creates a new array in which each element results from the function applied to each one.

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

## filter
It creates a shallow copy of the array, filtered down to just the elements that pass the test implemented by the provided function.

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

## find
It returns the first element in the array that satisfies the testing function.

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

## slice
It returns a shallow copy of the array filtered down to just the elements selected from start to end (end not included), where start and end represent the index of items in that array.

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

## Conclusion
We have already seen the 5 most used methods, and it is crucial to be clear and have skill and experience with them to develop more efficient software in our daily work.

I have chosen these 5 methods based on my experience. You can check out this website and search for each one to find more information about them:

https://developer.mozilla.org/

I hope you enjoyed the article.

See you in the next post.

Have a great day!
pip Trends newsletter | 25-May-2024
Tags: python, programming, datascience, dataengineering
Published: 2024-05-24 16:44:08

This week's pip Trends newsletter is out. Interesting stuff by Tushar Aggarwal, Animesh Chouhan, Trey Hunner, Adrien Cacciaguerra, Arthur Pastel, Johni Douglas Marangon, @kanehooper & Volker Janz are covered this week

{% embed https://newsletter.piptrends.com/p/sleepsort-the-new-repl-in-python %}
Networking Tips for New Developers: Building Your Professional Circle
Tags: beginners, tutorial, codenewbie, career
Published: 2024-05-24 16:25:29

### Networking Tips for New Developers: Building Your Professional Circle

1. **Attend Industry Events**: Participate in tech conferences, meetups, and workshops to meet other professionals and stay updated with industry trends.

2. **Leverage Social Media**: Use platforms like LinkedIn and Twitter to connect with industry leaders, join relevant groups, and share your projects and insights.

3. **Join Professional Organizations**: Become a member of organizations such as the ACM or IEEE to access resources, events, and networking opportunities.

4. **Engage in Online Communities**: Contribute to forums like Stack Overflow, GitHub, and Reddit where developers discuss problems, share knowledge, and collaborate on projects.

5. **Find a Mentor**: Seek out experienced developers who can provide guidance, advice, and introductions to other professionals in the field.

6. **Collaborate on Open Source Projects**: Work on open-source projects to improve your skills and build relationships with other contributors and maintainers.

7. **Attend Hackathons**: Participate in hackathons to work on real-world problems, meet fellow developers, and showcase your abilities.

8. **Network Within Your Company**: Build relationships with colleagues from different departments and levels within your organization to expand your internal network.

9. **Volunteer for Speaking Engagements**: Offer to speak at local events, webinars, or podcasts to share your expertise and increase your visibility.

10. **Follow Up and Stay in Touch**: Maintain and nurture connections by regularly following up with new contacts, sending periodic updates, and offering help or collaboration opportunities.

Happy Learning 🎉
My Patent Pending AWS Challenge
Tags: awschallenge, authentication, devchallenge, fullstack
Published: 2024-05-24 16:36:15

---
title: My Patent Pending AWS Challenge
published: true
description: 
tags: awschallenge, authentication, devchallenge, fullstack
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-05-24 16:14 +0000
---
*This is a submission for the [The AWS Amplify Fullstack TypeScript Challenge ](https://dev.to/challenges/awschallenge)*

## What I Built
**TL;DR Simple mutual (yet) patent pending authentication solution which is cheap and works perfectly well on small and medium websites, yet provides banking level security for the session.**

So I got with this idea early in the morning to come up with a service, named Signmeonly.io, which basically offers an authentication solution at a level above the other most common 
login solutions. I felt that the other solutions lack of something fundamental, secure network while there’s a Man In The Middle; lack of fundamental security on public networks in other words.

What happened is that I saw that once someone targets you in attacking over a public network they pretty much have everything to succeed: they can fire up a fake website that looks like the same as the original one and with some IP, DNS or router spoofing your device is got to believe the fake website is the real one.

From then on they would accept your credentials and OTP and just redirect you to the real site until you’re done. Then, they will (trust me) continue in such an unauthorized activity on your behalf, that you’d curse every moment in that coffee shop.

Are you scared? I am…

My solution is a patent pending technology: Signmeonly.io. It uses a shared secret key that you’d receive over the email and it will be used to both sign and validate JWT tokens on both the client and the server. 🤷‍♂️

Is that easy? Yes. But the patent filing was a tedious task. Today as I am working on fine tuning everything and implementing step by step all the small details of my patent I look towards ways to expose my invention to as much possible users and early adopters. 🌸


If you or the one next to you is seeking for a fresh technology to start with in the new website you guys are building, consider Signmeonly.io

The robustness of the security in Signmeonly is a serious painkiller and will heal your wounds from the scratches you get over time from the other authentication and logging in services.

## Demo
As I mentioned I applied for a patent with this technology and currently I’m in the patent pending list, the patent will see light in 18 months whereas it will be able to get negative or positive feedback. The application patent number is 18/665,621.
Is Web3 expensive?
Tags: web3, blockchain
Published: 2024-05-24 16:28:49

Recently I've got an idea to try to make a dApp. I've dived into learning more about how blockchain is working, what smart contract, fees, gas, solidity, remix and etc are. I know now the difference between web2 and web3 and I need community support to help me to understand one thing.. 😀

Web3 apps have no backend as we know it. All the information is stored in contracts. Reading the data from them is free for the end user, but putting information there will cost a fee. This fee can either be paid by the end user, or it can be moved on dev shoulders. So what is not clear for me - how do you know your avg. costs to maintain the application? 

Let's assume I am making a dApp where users can store a list of their favourite books. Each editing and insertion would require from them, or from me, to pay the money...


> Imagine you would need to pay each time you leave a comment on dev.to 
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2u59s5m2pnawy9pt3da.gif"  width="100" height="100">

If I decide to pay all fees by myself, how can I know, that I won't bankrupt after one user just messes up with editing the title of the book (in our example)? So in this case it would make sense to use a good old web2 and store the data for free on some Supabase solution. The costs won't be so high and the app will do what it has to.

So the question is, is there a way to avoid this? Was really inspired by the idea of Web3 and now am not sure which projects should use Web3 at all? Only the ones which make crypto currency operations? 😒

How do P2E games are created? Do they really pay for all user actions or are they not dApps? 

Thank you very much for your replies!
How to Use Dark Mode In NuxtJS with Nuxtlabs UI
Tags: nuxt, vue, tailwindcss, webdev
Published: 2024-05-24 16:12:36

In this tutorial, I will show you how to use toggle dark and light mode in nuxt 3 Nuxtlabs UI. Before we begin, you need to install and configure Nuxtlabs UI in NuxtJS.
<br>
[How to Install Nuxtlabs UI in Nuxt 3](https://webvees.com/post/how-to-install-nuxtlabs-ui-in-nuxt-3)
You can easily build a color mode button by using the useColorMode composable from @nuxtjs/color-mode.
```vue
<script setup>
const colorMode = useColorMode()

const isDark = computed({
  get () {
    return colorMode.value === 'dark'
  },
  set () {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})
</script>

<template>
  <ClientOnly>
    <UButton
      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
      color="gray"
      variant="ghost"
      aria-label="Theme"
      @click="isDark = !isDark"
    />

    <template #fallback>
      <div class="w-8 h-8" />
    </template>
  </ClientOnly>
</template>
```
![toggle dark and light mode in nuxt 3](https://webvees.com/wp-content/uploads/2024/05/xCfoUuZeuZypREw3644ZAyBRIiV9GZNfD5qZQvYh.png)
![toggle dark and light mode in nuxt 3](https://webvees.com/wp-content/uploads/2024/05/wy47g1y5VuDQjZDX6imPgicCAC75S2DnWZXnBRix.png)
Learning AWS Day by Day — Day 74 — AWS Organization Concepts
Tags: aws, cloud, cloudcomputing, beginners
Published: 2024-05-24 16:09:14

Exploring AWS !!

Day 74

AWS Organization Concepts

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

Organization:
Can be used for consolidating various or multiple accounts so that we can administer all of them as a single unit.
An Organization will have one master account and zero or more member accounts. The Organization can be organized in a hierarchical order by keeping root at the top.

Root:
Master account for all other member accounts. On applying any policy to the root, it gets applied automatically to all the member accounts. When we create an Organization, Root gets automatically created and we can have only one Root.

Organization Unit (OU):
A container for accounts within a root. An OU can contain other OUs, and that’s how we can have a tree like architecture. Attaching a policy to OU, will affect all other OUs and member accounts under it.

Account:
This refers to AWS accounts containing AWS services and resources. Policies can be attached to the account only to control the resources within it.
Master account creates the Organization and we can administer using it.
All other accounts in member accounts are part of Organization.

Invitation:
A process of asking other AWS account to join our Organization. This invitation can be sent only by Master account, and once the request is accepted, they become a member.

Handshake:
A process of sharing information with to accounts or parties. Handshakes are used to send invitations and get back acknowledgement. We can directly work with handshakes when using CLI or Organization’s APIs.
UseRouter import from next/navigation or next/router in App Router Next JS?
Tags: javascript, nextjs, userouter, react
Published: 2024-05-24 16:02:04

Hi devs, in this article we will learn which solution is better for us.
So many developers facing issue while using useRouter in next JS.

```
import { useRouter } from "next/router";

 const router = useRouter();
```
The above import is not working in next JS when we are using app router.

So as documentation next js allow useRouter from next/navigation in App Router.
Here is the way of importing the useRouter in App Router.

```
import { useRouter } from "next/navigation";

  const router = useRouter();

```
Thank you for reading. That’s all for today.
peviitor.ro - proiectul principal al ONG-ului ASOCIAȚIA OPORTUNITĂȚI ȘI CARIERE
Tags: peviitor, comunity, motordecautare
Published: 2024-05-24 15:55:41

## Misiunea [ASOCIAȚIEI OPORTUNITĂȚI ȘI CARIERE](https://www.oportunitatisicariere.ro/)

> ![Motto Oportunități și cariere](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44z751qqt12xs2kat7v6.png)

Organizația non-profit cu sediul în Zimbor, România colaborează alături de peste 400 contribuitori și voluntari din toată țara. Aici tinerii, și nu numai, își dezvoltă skill-urile prin dezvoltarea aplicației.

<u>Departamente:</u>

- back-end development

- business analyst

- design

- front-end development

- marketing

- scraping

- testing

---

## [peviitor.ro](peviitor.ro/)
Proiectul pentru care s-a înfiintat ONG-ul este proiectul PEVIITOR.ro.

Acest motor de căutare locuri de muncă reprezintă cel mai important proiect din cadrul ASOCIATIEI OPORTUNITATI SI CARIERE.

Ne propunem să agregăm toate locurile de muncă din România într-un singur loc pentru toate cele peste 1.418.000 companii active în România.

Serviciul este gratuit atât pentru companii, cât și pentru viitorii potențiali angajați.

---
Safe and Secured Ways to Recover Stolen Crypto ; HackSavvy Technology
Tags: javascript, beginners
Published: 2024-05-24 15:41:29

Behold, dear seekers of justice, for I bring tidings of a remarkable expedition into the heart of the digital wilderness – the illustrious HackSavvy Technology  .In a world fraught with peril and deception, the valiant wizards of HackSavvy Technology stand as beacons of hope, wielding their formidable expertise to reclaim what's rightfully ours from the clutches of scammers. As a weary traveler who has traversed the treacherous paths of online fraud, I can attest to the unparalleled prowess and unwavering dedication of this extraordinary team. From the moment I stepped into their enchanted realm, I was enveloped by an aura of determination and resolve. The HackSavvy , masters of their craft, greeted me with warmth and understanding, ready to embark on a quest to retrieve my stolen funds.What sets HackSavvy Technology apart is not merely their technical proficiency, but their heartfelt commitment to their clients. They understand the despair and frustration that accompanies falling victim to online scams, and they offer steadfast support every step of the way.With each stroke of their digital wands, the Hacksavvy penetrated the intricate networks of the scammers, unraveling their web of deceit with precision and skill. In a feat of unparalleled wizardry, they reclaimed my stolen funds and ensured that the perpetrators faced the consequences of their actions.But perhaps what impressed me most was HackSavvy Technology dedication to creating a safer online environment for all. Through their tireless efforts, they send a clear message to scammers that their days of preying on the innocent are numbered.I cannot recommend HackSavvy Technology   highly enough. If you find yourself ensnared in the tangled webs of online fraud, look no further than this esteemed establishment. Trust in their expertise, and let them lead you on a journey towards justice and redemption. With HackSavvy Technology  by your side, you can rest assured that your stolen funds will be reclaimed, and the light of truth will shine brightly once more in the digital realm, Email them via  Contactus@ hacksavvytechnology .com  &  Support@ hacksavvytechrecovery. com   &  WhatsApp : +7 999 829‑50‑38  .
Manipulando o hook useState
Tags: react, reactnative
Published: 2024-05-24 15:36:51

Quando você trabalha com o hook `useState` do React, há situações em que é melhor usar uma função para atualizar o estado com base no estado anterior, em vez de defini-lo diretamente. Aqui estão os motivos:

##  Manipulação de Atualizações de Estado Assíncronas
O React agrupa atualizações de estado para melhorar o desempenho. Quando você define o estado diretamente, pode não estar trabalhando com o valor mais atual do estado devido à natureza assíncrona das atualizações de estado. Usando uma função, você garante que está trabalhando com o valor mais recente do estado.

**Exemplo:**
```javascript
setCount(prevCount => prevCount + 1);
```
Neste exemplo, `prevCount` é garantido ser o valor mais recente do estado, garantindo que a operação de incremento seja precisa.

### 2. **Lidando com Múltiplas Atualizações de Estado**
Se você tem múltiplas atualizações de estado que dependem do estado anterior, usar uma função ajuda a evitar problemas potenciais. Sem isso, as atualizações podem sobrescrever umas às outras.

**Exemplo:**
```javascript
const handleIncrement = () => {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
}
```
Aqui, `count` será corretamente incrementado em 2, porque cada função de atualização obtém o estado mais recente.

### 3. **Evitando Estado Obsoleto**
Usar o estado anterior garante que você evite problemas de estado obsoleto, que podem ocorrer se o estado for atualizado com base em um valor desatualizado.

**Exemplo:**
```javascript
const handleUpdate = () => {
  setCount(count + 1);  // Pode usar estado obsoleto
}
```
Se `count` não for o valor mais recente, o incremento pode não funcionar como esperado.

### 4. **Atualizações Funcionais em Lógica de Estado Complexa**
Quando a lógica de atualização do seu estado é complexa, usar a função do estado anterior pode simplificar a implementação e tornar o código mais legível.

**Exemplo:**
```javascript
setState(prevState => {
  // lógica complexa usando prevState
  return newState;
});
```
Dessa forma, você define claramente como o novo estado depende do estado anterior, tornando o código mais fácil de manter.

### Resumo
- **Atualizações assíncronas**: Garante que você sempre trabalhe com o estado mais recente.
- **Múltiplas atualizações**: Evita que as atualizações de estado sobrescrevam umas às outras.
- **Evitar estado obsoleto**: Previne bugs relacionados a valores desatualizados do estado.
- **Lógica complexa**: Simplifica e clarifica as atualizações de estado.

Usar uma função para atualizar o estado com base no estado anterior é uma prática robusta no React, que ajuda a gerenciar o estado de forma mais previsível e evita problemas comuns.
Understanding Idempotency in Software Development 🥇
Tags: webdev, beginners, programming, tutorial
Published: 2024-05-24 15:36:29



Idempotency 🎯 is a crucial concept in software development that helps mitigate unintended errors or unhappy scenarios that users might encounter. This concept categorizes web events or processes into two parts: idempotent (ineffective) and non-idempotent (effective).



![ Idempotency  ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw3j8lu4x3gdwijsywsi.png)
**Ineffective (Idempotent) Operations 💡**:

These operations do not change the state of the system regardless of how many times they are executed. Examples include PUT and GET requests. For instance, retrieving data (GET) or updating a resource to a specific state (PUT) multiple times will have the same effect as doing it once.



**Effective (Non-Idempotent) Operations 🕸**:

These operations change the state of the system each time they are executed, potentially leading to side effects if repeated. Examples include POST and PATCH requests. For instance, creating a new resource (POST) or modifying a resource partially (PATCH) can lead to different outcomes if the request is sent multiple times.



**Scenario:** Handling Duplicate Purchase Requests 🧱



Consider a scenario where a user makes a request to purchase an item. After clicking to send the request, the user's internet connection drops. The request completes on the server side, but the user does not receive a confirmation message. In this case, the user might resend the request, and the server, not recognizing that the operation has been performed already, processes it as a new request. Consequently, the user ends up purchasing the item twice, leading to dissatisfaction.



Solving the Problem with Idempotency 👨‍💻🛠



To prevent such issues, we can implement idempotency by creating a unique identifier (idempotency key) for each request and storing it in a temporary database. This intermediary system checks whether a request has already been processed or if it is a new one. Here’s how it works:



1. Generate Idempotency Key : Generate a unique key for each purchase request.

2. Store Key and Result: Before processing the request, check if the key exists in the database.

  - If it exists, return the stored result, ensuring the operation is not performed again.

  - If it does not exist, process the request and store the result along with the key.

3. Return Stored Result: On receiving a request with the same idempotency key, return the stored result instead of processing the request again.



**Conclusion ✔**

Implementing idempotency in your services enhances the reliability and user-friendliness of your application, preventing common issues associated with repeated requests. It ensures operations like purchases are not accidentally executed multiple times, maintaining data consistency and integrity.



For a deeper dive into this concept, I recommend reading Alex Hyett’s detailed description and solutions.

https://www.alexhyett.com/idempotency for further insights.