teleren/devto huggingface dataset:
HTML file change to REACT
Tags: html, react
Published: 2022-12-21 03:11:18


I'm wondering if it's possible to change this HTML code to make it fit into React.For example is if I try to put this HTML code into the REACT app. I also included the code for Node.js and MongoDB. Does it require a lot of change for the HTML code to make it fit in React? Is it necessary to include script and import DOM in the method to include it in REACT App?

This is home.ejs code use for upload and download files.

`<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
 <body>
     <h2>Upload Files</h2>
        <form action="/" method="POST" enctype="multipart/form-data">
         <input type="file" name="pic"><br>
         <input type="submit" value="Upload">
        </form><br><br><br><br>
    <h2>Download Files</h2>
        <table>
            <thead>
                <tr>
                    <td>
                        image
                    </td>
                    <td>
                        download
                    </td>
                </tr>
            </thead>
            <tbody>
                <% for(var i=0; i < data.length > 0; i++) {%>
                 <tr>
                     <td><img src="<%= data[i].picspath %>" style="width:100px; height:100px;"></td>
                     <td>
                         <form action="/download/<%= data[i]._id %>" method="GET">
                          <input type="submit" value="Download">
                        </form>
                     </td>
                 </tr>
                <% } %>
            </tbody>
        </table>
 </body>
 </html>`
Ten Modern Layouts 🚀 [Part 1]
Tags: programming, html, css, layouts
Published: 2022-12-21 03:03:49

This is the first part of the "Ten Modern Layouts"

### #1 Super Centered: place-items: center

One of the main day-to-day challenges in front end development is to center elements, the best way to do it is using flex or grid as shown in the following example.

HTML

```
<body>
    <div class="parent">
      <div class="box" contenteditable>
        Hello, 👋😎
      </div>
    </div>
  </body>
```
CSS -> Using Grid

```
.parent {
  display: grid;
  place-items: center;
}
```
CSS -> Using Flex

```
.parent-flex {
  display: flex;
  place-items: center;
  justify-content: center;
}
```

{% embed https://codesandbox.io/embed/super-centered-oq5kpx?fontsize=14&hidenavigation=1&theme=dark %}

## #2 The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>

This is a common layout for marketing sites, which may have a row of 3 items, like image, title and description. On mobile, we'll want those three sections to stack nicely, and expand as the screen size increases. 


HTML

```
 <div class="parent">
      <div class="child-streching">one</div>
      <div class="child-streching">two</div>
      <div class="child-streching">three</div>
    </div>
    <div class="space"></div>
    <div class="parent">
      <div class="child-no-streching">one</div>
      <div class="child-no-streching">two</div>
      <div class="child-no-streching">three</div>
    </div>
```
CSS

```
 .parent {
  background-color: bisque;
  display: flex;
  flex-wrap: wrap;
}
.space {
  background-color: white;
  height: 100px;
}
.child-streching {
  flex: 1 1 300px;
  border: 1px solid red;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}
.child-no-streching {
  flex: 0 1 300px;
  border: 1px solid blueviolet;
  background: papayawhip;
  font-size: 2rem;
  text-align: center;
}
```
{% embed https://codesandbox.io/embed/the-deconstructed-pancake-9gu75j?autoresize=1&fontsize=14&hidenavigation=1&theme=dark %}

## #3 Sidebar Says:grid-template-columns: minmax(<min>,<max>)...)

This demo uses the minmax function to create a grid layout. We're setting the minimum sidebar size to 200px, but on larger screens, it can stretch out to 30%. The sidebar will always take up 30% of its parent's horizontal space, unless that 30% becomes smaller than 200px.

HTML

```
<div class="parent">
      <div class="section-blue" contenteditable>
        Min: 200px / Max: 30%
      </div>
      <div class="section-green" contenteditable>
        This element takes the second grid position (1fr), meaning it takes up
        the rest of the remaining space.
      </div>
    </div>
```

CSS

```
.parent {
  display: grid;
  grid-template-columns: minmax(200px, 30%) 1fr;
}
.section-blue {
  background-color: skyblue;
}
.section-green {
  background-color: darkgreen;
  color: white;
}
```


{% embed https://codesandbox.io/embed/sidebar-says-grid-template-columns-d9u56l?autoresize=1&fontsize=14&hidenavigation=1&theme=dark %}

[here you can read part 2](https://dev.to/ernerdo/ten-modern-layouts-part-2-3o6o).
Python-Basics
Tags: python, beginners, programming, codenewbie
Published: 2022-12-21 02:37:00

Dear, everyone. 
This is first step of "HackInScience Python Exercises" series.
I've finished all the basic exercises and share them on my [Github](https://github.com/levintech/HackInScience).

1. Hello World
2. Print 42
3. Number of seconds in a year
4. Using operators
5. Characters counting
6. Fix the indentation
7. Square numbers
8. Powers of two
9. Import
10. Comparisons
11. Counting Words
12. First function
13. Print even numbers
14. Sum of even numbers <= 100
15. Multiples of 3 and 5
16. Temperatures
17. Print every two letters pairs
18. Print every pair of distinct letters

Hope my work would be little bit helpful for python beginners.
To encourage me to continue, please follow me on [Github](https://github.com/levintech)

Best Regards.
Runme: Road to Testable Docs
Tags: vscode, programming, beginners, devops
Published: 2022-12-21 02:35:09

Today, we are excited to ship Runme v0.4 adding notebook authoring capabilities. The first intermediate step on the road to v1.0. Make changes to your existing READMEs, execute your commands, save and share with your fellow developers. Or, just create a brand new Runme notebook from scratch, saving changes as you go. Runme notebooks are 100% markdown-compatible and the best choice to document your repo’s development environment. Here’s how:


![Open source toolkit for testable docs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdvhbgofi4l8ffzzr39e.gif)
> Open source toolkit for reliable docs

If you haven’t used Runme yet, it is really neat. It will let you open your README (any markdown file really) as an interactive notebook. Stay focused and save time by clicking ▶️ next to commands to intuitively execute the commands and forget about copy & paste. All open source. No changes required to your markdown, install, open README.md, and go! Keep reading to learn more about this release and what’s planned for Runme v1.0.

# No More Broken Docs 👉 Roadmap to v1.0

Runme’s vision is to provide a flexible - open source - toolkit to deliver testable docs.

![Runme Notebooks](https://media.graphassets.com/DKR95j3QTeSjR5Q2Tjs8)
> More at https://runme.dev/

In Runme’s initial release a few weeks back, we decide to forgo “full notebook editing” to ship faster and learn from users. We've done our homework and came up with a plan. For Runme's v1.0, to achieve testable docs, we are planning the following:

1. Full editing inside ✍️ of Runme notebooks (v0.4 ✓)
2. Shared session-state 💻 between notebook & terminal
3. Elevate ergonomics 👩‍💻 inside notebook UX

Read more about the detailed breakdown of above's line items at https://www.stateful.com/blog/runme-road-to-reliable-docs as well as [GitHub Projects boards](https://github.com/stateful/runme/projects) to track progress. ETA for v1.0 is planned for February/March 2023.

## Check it out!

If you haven’t yet, now is a good time to give Runme a spin at https://runme.dev/. You’ll be surprised how quickly it will replace your old markdown editor and associated habits.

Stay tuned! Thank you.
Troubleshooting AWS Application Composer Errors
Tags: aws
Published: 2022-12-21 02:29:27

**[AWS Application Composer](https://aws.amazon.com/application-composer/)** was released to [Public Preview during re:Invent 2022](https://aws.amazon.com/blogs/compute/visualize-and-create-your-serverless-workloads-with-aws-application-composer/). The [Developer Guide Documentation](https://docs.aws.amazon.com/application-composer/latest/dg/what-is-composer.html) covers the basics of how to use the service, but currently there's limited guidelines on troubleshooting bugs.

When loading an existing SAM Template, the following error may appear:

![Screenshot of the error below](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98itfysh1ehdh8411j9s.png)

> **Incompatible template**
> An incompatible or malformed template has been detected, which means it is not accessible in Composer. Load another file.

The front-end provides no further details, but they are output into the browser console. For this error, the `INITIALIZE_PROJECT_FAILED` event offers insight:

![Screenshot of a JSON event in the browser console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64424ye3wcaz6o23cf9y.png)

My error appeared to be related to the concurrent release of [Step Functions Distributed Map](https://aws.amazon.com/blogs/aws/step-functions-distributed-map-a-serverless-solution-for-large-scale-parallel-data-processing/), which changed some language definition in ASL around the `Map` state, and may not yet be reflected in App Composer's validator.

AWS Application Composer is still in Preview, which means it's still undergoing active development, and things constantly shift about in AWS. If you find a similar error, it's worth sending feedback to the Service Team using the link in the AWS Console.
Understand difference between HTTP and HTTPs
Tags: wireshark
Published: 2022-12-21 02:05:47

<h2>Introduction</h2>
In this we will see what will be the practical difference between http and https. 
<h2>Procedure</h2>
Wireshark tool is used to capture the TCP packets and examine them.
There are two websites:-
1- (https disabled) 192.102.104.3
<img src="https://d1tlzifd8jdoy4.cloudfront.net/wp-content/uploads/2022/06/Screenshot-2022-06-08-at-4.49.44-PM-640x403.jpg" alt="" width="640" height="403" class="alignnone size-medium wp-image-891238" />
2- (https enabled)192.102.104.4
<img src="https://d1tlzifd8jdoy4.cloudfront.net/wp-content/uploads/2022/06/Screenshot-2022-06-08-at-4.59.50-PM-640x298.jpg" alt="" width="640" height="298" class="alignnone size-medium wp-image-891243" />
We will try to put our username:-<strong>bee</strong> and password:-<strong>bug</strong> in both the websites and examine each TCP packets.
Now i had to setup Wireshark to capture the packets as we put the username, password and click on Login.
Then the Wireshark catch this packet.
First let’s examine the HTTP website’s TCP packet but flowing the TCP stream.
<img src="https://d1tlzifd8jdoy4.cloudfront.net/wp-content/uploads/2022/06/Screenshot-2022-06-08-at-4.55.23-PM-640x439.jpg" alt="" width="640" height="439" class="alignnone size-medium wp-image-891244" />
By analysing the TCP/HTTP packet, we can see that the username and password are in text format.
<img src="https://d1tlzifd8jdoy4.cloudfront.net/wp-content/uploads/2022/06/Screenshot-2022-06-08-at-4.56.52-PM-640x69.png" alt="" width="640" height="69" class="alignnone size-medium wp-image-891245" />
Now we will put the same credentials in the https enabled website(192.102.104.4) and analyse the packet.
<img src="https://d1tlzifd8jdoy4.cloudfront.net/wp-content/uploads/2022/06/Screenshot-2022-06-08-at-5.01.24-PM-640x436.jpg" alt="" width="640" height="436" class="alignnone size-medium wp-image-891246" />
The whole HTTP/TCP packet is encrypted and none information is shared including the username and password.
<h2>Conclusion</h2>
This explains technically that using https enabled websites are better than using https disabled ones.
This experiment was done in ine.com website's pen-testing student course's lab
Configurando o arquivo de credenciais
Tags: veracode, m3corp, security, ptbr
Published: 2022-12-21 01:35:18

Para a utilização das soluções da Veracode em sua máquina é importante que tenhamos configurado o arquivo de credencias, já que ele é utilizado para autenticar as soluções como o IDE Scan/Greenlight e as opções de linha de comando. 


**Obtendo as credenciais**
Antes de criamos ele em si, precisamos ir até o portal da Veracode e gerar nossas API Credentials. 
Para fazer isso, inicialmente precisamos [acessar o portal](https://web.analysiscenter.veracode.com/) e nele clicamos no nome de nossa organização no canto direito, depois selecionamos "API Credentials":
![Opção dentro do menu do usuario](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wgzwn19zzhaisvczvcn.png)

Na tela seguinte teremos um botão para gerar nossas credenciais, clicando nele dois valores serão gerados, o ID e o Secret Key:
![Valores das chaves](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roqkoh50jjnmtw9b5x82.png)

Com esses dois valores vamos conseguir criar nosso arquivo. 
É importante lembrar que eles também são usados para autenticar uma esteira, já que é a combinação desses valores que permite utilizar as soluções, conforme disponibilizadas para o usuário que possui as credenciais. Um outro ponto é que por padrão eles duram um ano, mas podem ser revogadas antes. 


**Criando o arquivo**
Nessa etapa vamos ter uma pequena diferença de acordo com o sistema operacional utilizado, mas a ideia é basicamente a mesma, precisamos criar um arquivo na pasta do usuário, sendo que esse arquivo precisa se chamar "**credentials**" e não ter nenhuma extensão. 
Dentro desse arquivo, vamos precisar ter o seguinte template:
```
[default]
veracode_api_key_id = "Valor do ID"
veracode_api_key_secret = "Secret Key"
```

Esse arquivo precisa ficar salvo dentro da pasta ".veracode" dentro de sua pasta de usuário. Por exemplo, no Windows ficaria assim: 
`C:\Users\"seu usuário"\.veracode`

Com isso vai conseguir utilizar as soluções integradas na IDE e caso queira utilizar as opções de linha de comando, como o Pipeline Scan, não vai precisar passar os parâmetros VID e VKEY já que por padrão as soluções de linha de comando antes verificam se existe o arquivo no caminho correto e busca as credenciais neles.
Se aventurando em eletrônica #1
Published: 2022-12-21 01:24:07

Eu tenho muita vontade de aprender eletrônica e decidi começar a escrever sobre isso, pra facilitar nos momentos que eu queira olhar novamente sobre o que estou aprendendo, sendo assim vou ir documentando nessa série de artigos.

Um dos tópicos que eu sempre preciso procurar pq eu esqueço porém que são de extrema importância na eletrônica são os conceitos: Corrente(Amperagem), Tensão(Voltagem), Resistencia e potência então vou tentar falar rapidamente de cada um deles

## Tensão
 É a diferença de potencial(DDP) elétrico que provoca o movimento ordenado das partículas elétricas, gerando uma corrente. A unidade de medida da tensão é o Volt(V)

## Corrente
 Corrente(ou também conhecido como Amperagem) contínuo das cargas elétricas se movendo para uma mesma direção. A unidade de medida da corrente é o Ampere(A)

## Resistencia
 É a capacidade de um material resistir/dificultar(se opor) a passagem da corrente elétrica. causado pelo atrito entre elétrons e núcleo de átomos e esse atrito dificulta a passagem e gera calor (assim como o atrito de quando esfregamos as mãos uma na outra rapidamente esquenta nossa mão). A unidade de medida da resistência é o Ohm(Ω)

## Potência
 É a grandeza que define a quantidade de energia necessária pra efetuar algum trabalho é a potencia. A unidade de medida da potencia é o watt(w)

Basicamente é isso, no futuro vou tentar voltar em cada um deles pra falar com mais detalhes e com exemplos melhores, porém já serve para mim de documentação, qualquer melhoria que enxergarem por favor coloque nos comentários, ajudará e muito no meu aprendizado.

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

## Referência
[O que é TENSÃO, CORRENTE, RESISTÊNCIA E POTÊNCIA, ELÉTRICA?](https://www.youtube.com/watch?v=lMFRBc2_Vo0)
[Qual a diferença entre volt, watt e ampere? #ManualMaker Aula 2, Vídeo 1](https://www.youtube.com/watch?v=JtttnL28m3Q)
[O que é tensão e corrente elétrica?](https://www.clickgeradores.com.br/blog/post/153/o-que-e-tensao-e-corrente-eletrica-#:~:text=A%20corrente%20elétrica%20é%20o,homenagem%20a%20André-Marie%20Ampère.)
How to build Neumorphism calculator using javascript, html, and css
Tags: javascript, beginners, webdev, productivity
Published: 2022-12-21 01:14:41

Neumorphism is a design trend that involves creating soft, subtle gradients and shadows to give an interface a more organic, three-dimensional look. Here is an example of how you can build a neumorphic calculator using HTML, CSS, and JavaScript:

1. Create the HTML structure for the calculator. This will include the input fields for the numbers and the buttons for the different operations. Here is an example HTML structure:

```
<div id="calculator">
  <input type="text" id="result">
  <button type="button" class="operator" value="7">7</button>
  <button type="button" class="operator" value="8">8</button>
  <!-- more buttons for the other digits and operations -->
</div>

```
2. Add some neumorphic styling to the calculator using CSS. You can use CSS to create the soft gradients and shadows that are characteristic of neumorphism. Here is an example of some neumorphic CSS styling:

```
#calculator {
  display: flex;
  flex-wrap: wrap;
  width: 240px;
  height: 280px;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

input[type="text"] {
  width: 100%;
  height: 50px;
  font-size: 24px;
  text-align: right;
  border: none;
  background-color: #fff;
  box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.1);
}

button[type="button"] {
  width: 60px;
  height: 60px;
  font-size: 18px;
  border: none;
  background-color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.1);
}

button[type="button"]:active {
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.1);
}

```
3. Add the JavaScript code to make the calculator function. You can use JavaScript to listen for clicks on the buttons, retrieve the values of the buttons, and perform the calculations. Here is an example of the JavaScript code:

```
const buttons = document.querySelectorAll('.operator');
const resultField = document.querySelector('#result');

let result = '';

buttons.forEach(button => {
  button.addEventListener('click', () => {
    result += button.value;
    resultField.value = result;
  });
});

```
This code selects all elements with the class operator, which are the buttons on the calculator, and the element with the id of result, which is the input field where the result is displayed. It then sets up an event listener for the click event on each button, which appends the value of the button to the result variable and displays it in the result field.
Working with large CSV files in Python from Scratch
Tags: datascience, dataengineering, bigdata, python
Published: 2022-12-21 01:02:14

check this out:

![CSV files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ft32ncctt93bpr9yvcnv.png)


https://coraspe-ramses.medium.com/working-with-large-csv-files-in-python-from-scratch-134587aed5f7
How to implement bill splitting function using Javascript
Published: 2022-12-21 00:35:04

_To implement a bill splitting function in JavaScript, you can use the following code:_

```
function billSplitter(total, numPeople) {
  const amountPerPerson = total / numPeople;
  console.log(`Each person should pay $${amountPerPerson.toFixed(2)}.`);
}

const totalBill = prompt("Enter the total bill:");
const numPeople = prompt("Enter the number of people:");
billSplitter(totalBill, numPeople);

```
This code prompts the user to enter the total bill and the number of people, then calls the billSplitter function with the entered values. The function calculates the amount each person should pay by dividing the total bill by the number of people, and logs the result to the console, rounded to the nearest cent.

Note that the prompt function in JavaScript returns a string, so you will need to convert the entered values to numbers using the parseFloat function for the total bill (since it is a decimal number) and the parseInt function for the number of people (since it is an integer).

Here is the modified code that takes this into account:

```
function billSplitter(total, numPeople) {
  const amountPerPerson = total / numPeople;
  console.log(`Each person should pay $${amountPerPerson.toFixed(2)}.`);
}

const totalBill = parseFloat(prompt("Enter the total bill:"));
const numPeople = parseInt(prompt("Enter the number of people:"));
billSplitter(totalBill, numPeople);

```
This code prompts the user to enter the total bill and the number of people, then calls the bill_splitter function with the entered values. The function calculates the amount each person should pay by dividing the total bill by the number of people, rounds the result to the nearest cent, and prints it.
Fixing Eslint in Vue 3 with Typescript Visual Studio Code
Published: 2022-12-21 00:24:53

I have problem Eslint Error when working with Vue 3 and Typescript template. Errors are shown because Vetur is not compatible with Typescript.

Solutions:
Uninstall Vetur from Visual Studio Code extension

Install extension called "volar"

Volar is official extension from Vue creator
How to implement pagination in Rest API
Tags: rest, node
Published: 2022-12-21 00:12:08

_Pagination is a technique used to split a large result set into smaller chunks, or "pages", that can be more easily consumed by clients. Implementing pagination in a REST API involves the following steps:_

1. Add query parameters to allow clients to specify the page size and the page number: The page query parameter can be used to specify the page number, and the page_size query parameter can be used to specify the number of results per page.

2. Implement server-side logic to calculate the offset and limit based on the page size and page number: The offset is the number of results to skip, and the limit is the maximum number of results to return. These values can be calculated using the following formulas:

`offset = (page - 1) * page_size
limit = page_size
`
3. Execute the database query with the calculated offset and limit: Use the offset and limit values to execute a database query that returns the appropriate results for the current page.

4. Return the paginated results to the client: In the response, include the total number of results, the page size, and the current page number. You can also include links to the previous and next pages, if applicable.
Here is an example of a paginated REST API endpoint that returns a list of users:

```
GET /users?page=2&page_size=10

{
  "total": 100,
  "page_size": 10,
  "page": 2,
  "prev_page": "/users?page=1&page_size=10",
  "next_page": "/users?page=3&page_size=10",
  "results": [
    { "id": 11, "name": "User 11" },
    { "id": 12, "name": "User 12" },
    // ...
  ]
}

```
I hope this helps to give you an understanding of how to implement pagination in a REST API. Let me know if you have any questions!