teleren/devto huggingface dataset:
[html css js] Show/hide password input value
Tags: html, css, javascript
Published: 2023-04-26 20:17:46

**Codepen demo: https://codepen.io/ktr92/pen/vYVmbam**

## Solution example:

**HTML**
```
<div class="inputpassword" data-toggleblock="password">
  <input type="password">
  <img src="https://ktr92.github.io/nft/dist/img/Invisible.svg" alt="" data-togglebutton="password" class="password_invisible">
  <img src="https://ktr92.github.io/nft/dist/img/Eye2.svg" alt="" data-togglebutton="password" class="password_visible">
</div>
```

**CSS**
```
.inputpassword {
  position: relative;
  width: 320px;
}

.password_visible {
  display: none;
}

.inputpassword.active .password_invisible {
  display: none;
}

.inputpassword.active .password_visible {
  display: block;
}

.inputpassword img {
  position: absolute;
  right: 0;
  top: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

input {
  background: #f3f5f8;
  padding: 20px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border: none;
  border-bottom: 4px solid #d9dde3;
  display: block;
  width: 100%;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  resize: none;
  color: #212531;
}
```

**JS**
```
document.querySelectorAll('[data-togglebutton="password"]').forEach((item) => {
  item.addEventListener("click", (event) => {
    let inp = item.closest("[data-toggleblock]").querySelector("input");
    if (inp.type === "password") {
      inp.type = "text";
      item.closest("[data-toggleblock]").classList.add("active");
    } else {
      inp.type = "password";
      item.closest("[data-toggleblock]").classList.remove("active");
    }
  });
});

```
Experienced PHP Full Stack Developer Available for Hire (Remote / Looking for Sponsorship)
Tags: php, remote, webdev, laravel
Published: 2023-04-26 14:56:27

Hello,

I am an experienced PHP Full Stack Developer with over 15 years of professional experience in web development. I have extensive expertise in developing and maintaining web applications using PHP, MySQL, HTML, CSS, and JavaScript. I am proficient in modern PHP frameworks like Laravel, as well as front-end frameworks such as jQuery, React.

As a developer, I am committed to writing clean, efficient, and well-documented code. I am always up-to-date with the latest trends and technologies in web development and am passionate about learning new skills. I have strong problem-solving and analytical skills, and I am able to work effectively in a fast-paced, collaborative environment.

Over the years, I have worked with a diverse range of clients and industries, including e-commerce, healthcare, finance, and education. I have led large-scale development projects and have a proven track record of delivering high-quality, scalable solutions on time and within budget.

If you're looking for an experienced PHP Full Stack Developer to join your team, I would be delighted to discuss potential opportunities with you. Please feel free to reach out to me at [praveen.kumar.jobseeker@gmail.com] to learn more about my experience and qualifications.

Thank you for your time and consideration.

Best regards,
Praveen
https://www.linkedin.com/in/pkvishwa/
Reduce your AWS S3 cost
Tags: aws, s3, devops, bash
Published: 2023-04-26 20:16:18

🚀 Introducing s3-abort-multipart-uploads: A Time and Cost-Saving Tool for AWS S3!

Are you tired of dealing with incomplete multipart uploads in Amazon S3?  open-source project helps you clean up your storage and reduce costs with ease.

🌟 Key Features:
- Automatically aborts incomplete multipart uploads in S3
- Improves storage usage and lowers costs
- Easy to deploy in AWS CloudShell

🔗 Explore the code and contribute on GitHub: https://github.com/richtechteam/s3-abort-multipart-uploads
Write Less Code By Using Generic Classed Based Views
Tags: django, python, webdev
Published: 2023-04-26 20:05:57

{%youtube pbvq0bZNNGI%}
In this video, we'll explore in-depth Django's generic views, an important feature that can help you build web applications more quickly and efficiently. We'll begin by defining generic views and outlining how they differ from standard views. Then, using a number of examples, we'll demonstrate how to utilize generic views to perform a variety of basic activities, like showing lists of items, creating new objects, altering existing ones, and more.
[html css jquery] Reusable script for dropdown elements
Published: 2023-04-26 20:04:04

Here is reusable jquery script for dropdown elements. You can keep every dropdown open at the same time or hide all other dropdowns when you open one.

You can add a new dropdown element declaratively via html. You need to add the attribute `data-toggleclick="some-id"` for a button and `data-toggleblock="some-id"` for a dropdown block.

**codepen demo: https://codepen.io/ktr92/pen/LYgyqZE**

## Solution example
**HTML**
```
<div>
  <div class="wrapper">
    <button data-toggleclick="block1">Open block 1</button>
    <div data-toggleblock="block1">
      Block 1 
    </div>
  </div>
  <div class="wrapper">
    <button data-toggleclick="block2" >Open block 2</button>
    <div data-toggleblock="block2">
      Block 2
    </div>
  </div>
</div>
```

**CSS**
```
[data-toggleblock] {
  display: none;
}

[data-toggleblock].active {
  display: block;
}

.container {
  width: 320px;
}

.wrapper {
  height: 100px;
  position: relative;
  width: 320px;
}
[data-toggleblock] {
  padding: 10px;
  border: 1px solid #000;
  margin-bottom: 30px;
  position: absolute;
  top: 50px;
  width: 100%;
  z-index: 1;
}
[data-toggleclick] {
  background: #ccc;
  padding: 10px 10px;
  border: none;
  display: block;
  width: 100%;
  font-size: 20px;
}
```

**JS (jquery)**
```
// show element by click on button 
$('[data-toggleclick]').each(function() {
  $(this).on('click', function(e) {
        $(this).toggleClass('active')
        e.preventDefault()
        let dropdown = $(this).data('toggleclick')
        // if you want to hide all other dropdowns
        // $('[data-toggleblock].active').not($(`[data-toggle=${dropdown}]`)).removeClass('active')
        // $('[data-toggleclick].active').not($(`[data-toggleclick=${dropdown}]`)).removeClass('active')
        $(`[data-toggleblock=${dropdown}]`).toggleClass('active')
  })
})
```
Separate a multi-digit integer into a single-digit array.
Tags: javascript, beginners, tutorial, learning
Published: 2023-04-26 20:00:05

I am sure there are several more ways to turn a multi-digit integer, like 123, into a single-digit array, but in this post, two ways are going to be suggested:

## 1. Turn it to string.

Here, we use the JS method toString() first to turn the integer into a string. Then, we split it with split(''). At this step, we have an array of strings. So, we can manipulate the array with a for loop or with a map() to turn every string into a number. We will use a map:

```
const num = 123;
let str = num.toString().split(''); // ["1", "2", "3"]
let int = str.map((single)=>parseInt(single)); // [1,2,3]
```
## 2. With math:

For the second suggestion, we are taking the multi-digit integer and putting it in a while loop. The condition is: "while num is true" or "while num exists"  we use the modulus of 10 to get the remainder every time we divide the integer by 10. We can use either Math.floor() or parseInt() to make sure we have an integer to push to our array.

```
let num = 123
let arrNum = [];
    while(num){
        arrNum.push(num%10);
        num = Math.floor(num/10); // remember we can use parseInt() too.
    }
console.log(arrNum) // [1,2,3];
```
If you want to share more ways to do this, please do so in the comments, with some explanation for us beginners.
re:Skill by AWS
Tags: aws, reskill, cloud, amazon
Published: 2023-04-26 19:19:46

Re:Skill by AWS is a program designed to help individuals and organizations develop the skills needed to thrive in the rapidly evolving world of technology. Given the present trend towards a digitalized market system, there has been an unprecedented need for both individuals and organizations to conform and adopt modern technological advancements in order to remain relevant.

The educational initiative offers an array of instructional materials and seminars, aimed at furnishing individuals with the proficiencies necessary for triumph in the realm of electronic commerce. From foundational courses in cloud computing and machine learning to more advanced courses in artificial intelligence and data analytics, Re:Skill by AWS has something to offer for everyone.

A paramount advantage that the program proposes is its remarkable adaptability. Our service is having a temporary outage. If the issue persists, contact support and include the following error message (Error: Request failed with status code 502) Moreover, the versatility inherent in this initiative encourages an innovative approach towards achieving one's goals by enabling experimentation with various methods until success is achieved. Online courses are readily accessible to everyone, giving them the freedom and flexibility to grasp knowledge at their preferred pace and convenience. This is particularly beneficial for individuals who may have other commitments, such as work or family, that make attending traditional classroom-based courses difficult.

Another key benefit of Re:Skill by AWS is its focus on practical skills. The aim of these particular courses is to furnish individuals with hands-on knowledge that they can put into practical use in real-world scenarios, rather than merely instructing them about theoretical ideas. This means that individuals can apply what they learn immediately to their current job or future career.

In addition to the courses themselves, Re:Skill by AWS also offers a range of certification programs. These certifications are recognized globally and are highly valued by employers. By earning a certification through Re:Skill by AWS, individuals can demonstrate their expertise and commitment to their career.

Additionally, the curriculum is remarkably budget-friendly since a plethora of courses can be accessed at no charge or with a frugal fee. The expansiveness of its accessibility caters to a diverse cohort including individuals from all walks of life, without exception for their financial disposition.

Overall, Re:Skill by AWS is an excellent program for anyone looking to develop their skills in the digital economy. Employing its emphasis on utilitarian competencies, adaptability, and cost-effectiveness; this course of action serves as an excellent means for individuals to manage their professional trajectory while maintaining a competitive advantage in the quickly developing technology sector.
[html css jquery] How to hide element by click outside
Tags: html, css, jquery
Published: 2023-04-26 19:10:52

There is an element which we need to close by click outside of it. We can do it using simple reusable function.

**codepen demo**: https://codepen.io/ktr92/pen/LYgyGaY

## Solution example

**HTML**
```
<div>
  <button data-toggleclick="block1">Open block 1</button>
  <div data-toggleblock="block1" class="active">
     Click outside to close
  </div>
  <div>
    <br><br>
  <button data-toggleclick="block2" >Open block 2</button>
    <div data-toggleblock="block2"  class="active">
      Click outside to close
    </div>
  </div>
</div>
```

**CSS**
```
[data-toggleblock] {
  display: none;
}

[data-toggleblock].active {
  display: block;
}
```

**JS (jquery)**
We need a second argument (our element's open button) to prevent the element from opening and closing at the same time.

```
function closeByClickOutside(element, button, callback) {
    $(document).click(function(event) {
        if (!$(event.target).closest(`${element},${button}`).length) {
            $(button).removeClass('active')
            $(element).removeClass('active')
            // or  
            //$(element).hide()
        }
    });
    
    $(document).keyup(function(e) {
        if (e.key === "Escape") { // escape key maps to keycode `27`
            $(button).removeClass('active')
            $(element).removeClass('active')
            // or  
            //$(element).hide()
        }
    });

    if (callback instanceof Function) { callback(); }
  }

// usage
closeByClickOutside('[block_selector]', '[button_selector]')
```
Resolvendo problemas no HackerRank: Lados do mapa
Tags: javascript, beginners, programming
Published: 2023-04-26 19:08:05

Olá, seja bem vindo a mais um Resolvendo problemas no HackerRank: No caso de hoje, você tem um mapa cheio de cavidades. Vejamos mais informações com a explicação e sua resolução.

**cavityMap -**

Você recebe um mapa quadrado como uma matriz de strings inteiras. Cada célula do mapa tem um valor que denota sua profundidade. Chamaremos uma célula do mapa de cavidade se e somente se esta célula não estiver na borda do mapa e cada célula adjacente a ela tiver profundidade estritamente menor. Duas células são adjacentes se tiverem um lado ou aresta comum.

Encontre todas as cavidades no mapa e substitua suas profundidades pelo caractere maiúsculo X .

A grade é reorganizada para maior clareza:

989
191
111
Retornar:

989
1X1
111

- Nosso objetivo é:devolver a string modificada.

Vejamos o código:

```
function cavityMap(grid) {
    // Write your code here
  let newgrid=grid.map((item)=>item.split(""))
    
    for(let i=1;i<grid.length-1;i++){
        for(let j=1;j<grid.length-1;j++){
            let ele=grid[i][j]
            if(grid[i-1][j]<ele&&grid[i][j-1]<ele&&grid[i+1][j]<ele&&grid[i][j+1]<ele){
                
                newgrid[i][j]='X'
            }
        }
    }
    return newgrid.map((item)=>item.join(""));
}
```
let newgrid = grid.map((item) => item.split("")): Essa linha cria uma nova matriz chamada newgrid usando o método map. Para cada elemento item da matriz grid, é aplicado o método split(""), que divide a string item em um array de caracteres. Isso é feito para permitir a modificação individual dos caracteres posteriormente.

O código então prossegue para um loop aninhado for, que percorre a matriz grid (ou seja, as linhas e colunas). No entanto, observe que o loop vai de 1 a grid.length-1 para evitar acessar elementos fora dos limites da matriz.

Dentro do loop, a variável ele é atribuída ao elemento atual da matriz grid na posição [i][j].

A condição if verifica se o elemento atual é maior que os elementos vizinhos na matriz grid. Se todos os elementos vizinhos (acima, abaixo, à esquerda e à direita) forem menores que o elemento atual, significa que o elemento atual está em uma "cavidade" na matriz.

Se a condição do if for verdadeira, a matriz newgrid é atualizada na posição [i][j], atribuindo o caractere 'X' à mesma posição. Isso indica que o elemento original na posição [i][j] foi substituído por um 'X' para representar uma cavidade.

Depois de percorrer todos os elementos da matriz grid e atualizar a matriz newgrid conforme necessário, a função finaliza.

return newgrid.map((item) => item.join("")): Antes de retornar a matriz newgrid, a função usa o método map novamente para percorrer cada elemento da matriz newgrid e usa join("") para converter o array de caracteres de cada elemento de volta para uma string. Isso é feito para que a matriz final retornada seja composta de strings em vez de arrays de caracteres.

O resultado é:

```
4
1112
1912
1892
1234

input: 1112
```
Assim, concluímos mais um _Resolvendo problemas no HackerRank:_ até a próxima.
Apache AGE Datatypes
Tags: apacheage
Published: 2023-04-26 14:32:45

Apache AGE uses its own custom data type called agetype, which is a super set of Json and a custom implementation of JsonB. It is the only data type returned by AGE.

## Simple Data Types

- Null: It represents missing or undefined values. Most expressions that take null as input will produce null. Null is not equal to null. Not knowing two values does not imply that they are the same value. So the expression null = null yields null and not true.

- Integer: It stores whole numbers and it is a 64 bit field that stores values from -9,223,372,036,854,775,808 to 9,223,372,036,854,775,807. The smallint type is generally used only if disk space is at a premium. The bigint type is designed to be used when the range of the integer type is insufficient.

```
SELECT *
FROM cypher('graph', $$
    RETURN 1
$$) AS (result agtype);

```

- Float: The data type float is an inexact, variable-precision numeric type, conforming to the IEEE-754 Standard. Values that are too large or too small will cause an error. Rounding might take place if the precision of an input number is too high. Numbers too close to zero that are not representable as distinct from zero will cause an underflow error. It also supports values Infinity, -Infinity and Nan.

```
SELECT *
FROM cypher('graph', $$
    RETURN 1.0
$$) AS (result agtype);


```
- Numeric: The type numeric can store numbers with a very large number of digits. It is especially recommended for storing monetary amounts and other quantities where exactness is required. Calculations with numeric values yield exact results where possible, e.g., addition, subtraction, multiplication. However, calculations on numeric values are very slow compared to the integer types, or to the floating-point type.

```
SELECT *
FROM cypher('graph', $$
    RETURN 1.0::numeric
$$) AS (result agtype);

```

- Bool: AGE provides the standard Cypher type boolean. The boolean type can have several states: “true”, “false”, and a third state, “unknown”, which is represented by the Agtype null value. Boolean constants can be represented in Cypher queries by the keywords TRUE, FALSE, and NULL.

```
SELECT *
FROM cypher('graph', $$
    RETURN TRUE
$$) AS (result agtype);

```

- String: Single (') quotes are used to identify a string. The output will uses double (") quotes. AGE type strings can also contain escape sequences, for example, \t, \b, \n.

```
SELECT *
FROM cypher('graph', $$
    RETURN 'Example String'
$$) AS (result agtype);

```
These are the Simple Data Types used in Apache AGE. There are also Composite Data Types which includes List and Maps.
Welcome Thread - v222
Tags: welcome
Published: 2023-04-26 18:58:23

---
title: Welcome Thread - v222
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Purple wizard dog waving hello with the words hello above the dog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rh519nkcgglf3ho4qww.gif)

---

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

3. If you are new to coding, want to help beginners in their programming journey, or just want another awesome place to connect with fellow developers, check out the [CodeNewbie Org](https://dev.to/codenewbieteam). You can also say hi in our weekly [Hello Newbie](https://dev.to/codenewbieteam/hellonewbie-v2-p52) thread!

**Great to have you in the community!**
Shallow Copy vs Deep Copy no JavaScript
Tags: webdev, javascript, beginners
Published: 2023-04-26 18:47:36

Uma _shallow copy_ de um objeto é uma cópia que, embora aponte para uma referência diferente do objeto original, suas propriedades ainda apontam para as mesmas referências na memória. Portanto, embora sejam objetos diferentes, a alteração do valor de uma propriedade do objeto original também alterará o valor da mesma propriedade na cópia, e vice-versa.

É possível criar uma _shallow copy_ usando o método `Object.assign`, _spread operator_ e etc.

```javascript
const person = {
    name: 'Tom',
    age: 55,
    bestFriend: {
        name: 'Rob',
        age: 33
    }
}

// Shallow copy
const person2 = {...person}

console.log(person === person2) // false

console.log(person.bestFriend === person2.bestFriend) // true

person.bestFriend.name = 'Ben'

console.log(person.bestFriend.name) // Ben
console.log(person2.bestFriend.name) // Ben
```

Importante lembrar que, no JavaScript, todo valor primitivo (como número, string, etc.) é armazenado diretamente no objeto, e não apenas sua referência na memória. Por isso, mesmo em uma _shallow copy_ de um objeto, suas propriedades primitivas serão diferentes e a modificação do valor no objeto original não afetará o valor na cópia, e vice-versa.

```javascript
const person = {
    name: 'Tom',
    age: 55,
    bestFriend: {
        name: 'Rob',
        age: 33
    }
}

// Shallow copy
const person2 = {...person}

console.log(person === person2)

person.name = 'Bob'
console.log(person.name) // Bob
console.log(person2.name) // Tom
```

Já a _deep copy_ é o oposto de uma _shallow copy_, sendo uma cópia do objeto em que todas as referências apontam para locais diferentes na memória em relação ao objeto original. Dessa forma, alterar o valor de uma propriedade no objeto original não afetará o valor da mesma propriedade na cópia, e vice-versa.

É possível criar uma _deep copy_ de um objeto usando o método `JSON.parse`, a biblioteca `lodash ` do Node ou uma função recursiva que utilize _spread operator_.

```javascript
const person = {
    name: 'Tom',
    age: 55,
    bestFriend: {
        name: 'Rob',
        age: 33
    }
}

// Deep copy
const person2 = JSON.parse(JSON.stringify(person))

console.log(person === person2) // false

console.log(person.bestFriend === person2.bestFriend) // false

person.bestFriend.name = 'Ben'

console.log(person.bestFriend.name) // Ben
console.log(person2.bestFriend.name) // Rob
```

Compreender as diferenças entre _shallow copy_ e _deep copy_ pode ajudar a evitar erros ou mudanças inesperadas nos valores dos objetos.
Why Scalable Monitoring is Essential for Modern, Distributed Systems
Tags: distributedsystems, monitoring, scalabiltiy, netdata
Published: 2023-04-26 18:01:47

As the world of technology grows increasingly complex, so does the need for scalable monitoring solutions. In our latest blog post, we explore the importance of scalability in monitoring distributed systems and the impact it has on performance and reliability.

In this article, we dive into:

- The challenges of monitoring distributed systems
- The need for scalable monitoring solutions
- Key components of scalable monitoring solutions
- How Netdata addresses scalability in distributed systems

If you manage a distributed system, understanding the critical role of scalable monitoring solutions is crucial. Learn more about the challenges, benefits, and the future of scalable monitoring by reading the [full article here]( https://blog.netdata.cloud/why-scalable-monitoring-is-essential-for-modern-distributed-systems/).
🎉🐻 We're thrilled to announce that BuildBear now supports #Avalanche #Mainnet! 🚀
Published: 2023-04-26 17:58:36


👩‍💻 With http://BuildBear.io, you can create customized #Testnets by forking #Avalanche at any block number, override gas estimation, allow unlimited contract size, and set specific mining windows to meet your requirements. 🔧💻

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apy9n655rbjfdu053pho.png)
📢 Exciting News!
Published: 2023-04-26 17:57:00

 🌟 Learn how to build your very own decentralized #NFT marketplace with #Solidity and #Hardhat in our comprehensive step-by-step tutorial! 

Check it out now on Medium! 🔗👇
https://medium.com/buildbear/building-a-decentralized-nft-marketplace-with-solidity-and-hardhat-a-step-by-step-tutorial-cef7af808b93