teleren/devto huggingface dataset:
Criar uma lista de itens ordenada ou não ordenada no HTML
Tags: html, webdev, programming, frontend
Published: 2023-05-15 17:36:11

Criar uma lista de itens é uma tarefa básica em HTML que pode ser útil em muitas situações, como para exibir uma lista de tarefas, itens de menu ou simplesmente para organizar informações. Existem dois tipos de listas em HTML: listas ordenadas e listas não ordenadas. Neste artigo, vou mostrar como criar esses dois tipos de listas em HTML.

## Lista Não Ordenada

Uma lista não ordenada é criada usando a tag `<ul>`, que representa uma lista de itens não ordenados. Cada item da lista é representado pela tag `<li>`. O código a seguir demonstra como criar uma lista não ordenada simples em HTML:

```
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
```

Este código produzirá uma lista não ordenada que se parece com isso:

- Item
- Item
- Item

Observe que não há números ou letras indicando a ordem dos itens na lista não ordenada.

## Lista Ordenada

Uma lista ordenada é criada usando a tag `<ol>`, que representa uma lista de itens ordenados. Cada item da lista é representado pela tag `<li>`. O código a seguir demonstra como criar uma lista ordenada simples em HTML:

```
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>
```

Este código produzirá uma lista ordenada que se parece com isso:

1. Item
2. Item
3. Item

Observe que cada item da lista tem um número que indica a ordem em que ele aparece na lista.


Adicional:

## Lista de Definição

Uma lista de definição é criada usando a tag `<dl>`, que representa uma lista de termos e suas definições. Cada termo é representado pela tag `<dt>`, e cada definição é representada pela tag `<dd>`. O código a seguir demonstra como criar uma lista de definição simples em HTML:

```
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>
```

Este código produzirá uma lista de definição que se parece com isso:

HTML
- HyperText Markup Language

CSS
- Cascading Style Sheets

Observe que cada termo tem a tag `<dt>` e cada definição tem a tag `<dd>`.

## Conclusão

Criar listas em HTML é uma tarefa simples, mas útil para organizar informações. Com as tags `<ul>`, `<ol>`, `<li>`, `<dt> e <dd>`, você pode criar listas não ordenadas, listas ordenadas e listas de definição em HTML. Com essas ferramentas, você pode melhorar a estrutura e o design do seu site.


**Stefany Repetcki - Dev Front End**
Juego en ReactJS - Yatzy
Tags: react, typescript, node
Published: 2023-05-15 17:34:25

Desde ya varios años he estado trabajando con ReactJS, para aprender está librería he desarrollado varios juegos, en cada uno aprendí algo nuevo.

{% link https://dev.to/jorger/recreando-el-parques-parchis-en-reactjs-primera-parte-nkk %}

Y ahora deseo compartir con ustedes un nuevo juego desarrollado en React, en este caso el Yatzy.

Yatzy es un juego de dados, cuyo objetivo es obtener la mayor puntuación posible tras sumar los puntos de las 13 combinaciones disponibles en la tabla de puntuaciones. Puede jugar cualquier número de jugadores; incluso se puede jugar en solitario. Tiene una mecánica similar a la de Yahtzee, Yams, Kismet, Balut, la generala y los dados de póquer, y es muy popular en los países escandinavos.

## 🎮 Yatzy ReactJS

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

Esta versión de Yatzy, está compuesta por dos proyectos: frontend con ReactJS/Typescript y el backend con Nodejs/Typescript, tiene 4 modalidades de juego como son:

**URL del Juego**: https://yatzy-react-game.herokuapp.com/

* Solo
* Online
* Vs a Friend
* Vs a Bot.

## 🚀 Curso de Udemy.

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

He preparado el curso ["Aprende a desarrollar un juego de Yatzy con ReactJS/NodeJS y Typescript"](https://www.udemy.com/course/aprende-a-desarrollar-un-juego-de-yatzy-con-react/?referralCode=A524789E1703570AF758). en el cual enseño a desarrollar este juego desde cero.

Este proyecto nació de una inspiradora experiencia en la pasada [JSconf Chile](https://jsconf.cl/), donde tuve la oportunidad de compartir mi conocimiento sobre el desarrollo de juegos con React ([ver conferencia](https://www.youtube.com/watch?v=nReMDgz02qo&t=10553s)). 

Quedé encantado al ver la respuesta entusiasta de los participantes. Desde entonces, al día de hoy he desarrollado más de 13 Juegos utilizando ReactJS, no solo con el objetivo de aprender, sino también con el deseo de compartir mis conocimientos.

El resultado de esa pasión y dedicación es este curso, que contiene más de 27 horas de videos. Durante el curso, te guiaré en la creación de dos proyectos, uno en el front-end y otro en el back-end, ambos utilizando Typescript.

## Preview

{% youtube hRiR0iooRy8 %}
Productivity is the price paid for poor communication.
Tags: cloudcomputing, devops, development
Published: 2023-05-15 17:27:27

We all want to be productive, don't we? It's a universal desire, especially for technology leaders who strive to create efficient and innovative teams.

Throughout my career as an engineering leader, I consistently encountered a major challenge 'How to foster productivity'. 

Although we were supposed to be a cohesive unit, the developers spoke one language, operations spoke another, and the bridge between them had been neglected for far too long. Barriers of protection had been erected, isolating each side from the other.

Addressing this problem is complex, with numerous variables at play. However, I firmly believe that the first step toward a solution lies in bridging the communication gap. 

If my teams were to succeed, then they had to be speaking about infrastructure the same way. They required a shared understanding - a specification.

The power of specifications lies in their ability to instill confidence:

- Clarity of requirements: Clear specifications prevent misunderstandings and ensure that all team members are aligned with the project's goals.
- Reduced rework and errors: Clear specifications minimize mistakes and the need for revisions, saving valuable time and resources.
- Streamlined decision-making: Detailed specifications facilitate efficient decision-making processes, removing ambiguity and uncertainty.

However, manually building specifications can be a time-consuming process, requiring upfront answers to questions that might catch us off guard. Additionally, we don't want our teams to spend excessive time in war-room planning sessions for every project, only to regroup and handle unforeseen changes. This is precisely where automation excels.

By automating the generation of specifications, we can expedite the process, enhance consistency, and foster collaboration. Ultimately, this automation contributes to improved communication and productivity throughout the project lifecycle.

Imagine being able to automatically create a resource specification that dynamically adapts to changes, keeping drift at bay. This automated process leverages adaptive provisioning, ensuring that your infrastructure aligns with a resource specification that has been automatically inferred from your application code.

Don't let communication barriers hinder your team's productivity and innovation. Embrace the power of automated resource specifications and witness the transformation in your team's efficiency and effectiveness. 

[Let us show you how Nitric can help.](https://nitric.io)
Criar um formulário HTML com campos relevantes
Tags: html, development, webdev, frontend
Published: 2023-05-15 17:23:14

Criar um formulário HTML pode ser um desafio para muitos desenvolvedores, especialmente se eles estão iniciando. Neste artigo, vamos mostrar como criar um formulário HTML com campos relevantes, fornecendo exemplos para ajudar nós desenvolvedores a entender melhor a criação de formulários.

## 1. Formulário de contato

Um formulário de contato é um dos tipos mais comuns de formulários HTML que você pode criar. Ele permite que os usuários enviem mensagens para você através do site. Um exemplo de código para um formulário de contato pode ser:

```
<form action="enviar.php" method="post">

  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>

  <label for="mensagem">Mensagem:</label>
  <textarea id="mensagem" name="mensagem" required></textarea>

  <input type="submit" value="Enviar">
</form>
```

Neste exemplo, há campos para o nome, e-mail e mensagem do usuário, todos com a tag `<label>` para indicar o tipo de informação solicitada. Além disso, há a tag `<textarea>` para o campo de mensagem, permitindo que o usuário escreva mais texto.

## 2. Formulário de cadastro

Outro tipo comum de formulário é o formulário de cadastro, que é usado para coletar informações do usuário para criar uma conta ou perfil. Um exemplo de código para um formulário de cadastro pode ser:

```
<form action="cadastrar.php" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>

  <label for="senha">Senha:</label>
  <input type="password" id="senha" name="senha" required>

  <label for="confirma_senha">Confirme a senha:</label>
  <input type="password" id="confirma_senha" name="confirma_senha" required>

  <input type="submit" value="Cadastrar">
</form>
```

Neste exemplo, há campos para o nome, e-mail, senha e confirmação de senha do usuário, todos com a tag `<label>` para indicar o tipo de informação solicitada. Além disso, há a tag `<input type="password">` para os campos de senha, ocultando a entrada do usuário.

## 3. Formulário de pesquisa

Um formulário de pesquisa é usado para permitir que os usuários encontrem informações específicas no seu site. Um exemplo de código para um formulário de pesquisa pode ser:

```
<form action="buscar.php" method="get">
  <label for="pesquisa">Pesquisar:</label>
  <input type="text" id="pesquisa" name="pesquisa" required>

  <input type="submit" value="Buscar">
</form>
```

Neste exemplo, há um campo para o usuário inserir o termo de pesquisa, com a tag `<label>` para indicar o tipo de informação solicitada. Além disso, o formulário utiliza o método.

_Stefany Repetcki - Dev Front End_
Conheça a diferença entre tags html 'h1', 'h2', 'h3'
Tags: html, webdev, programming, development
Published: 2023-05-15 17:09:32

Quando se trata de criar conteúdo na web, a hierarquia de conteúdo é muito importante. É por isso que as tags HTML, como o h1, h2 e h3, são tão importantes para a estruturação do seu conteúdo. Neste artigo, vamos dar uma olhada nas diferenças entre essas três tags HTML.

`<h1> - O Título Principal`

A tag HTML `<h1>` é usada para definir o título principal da página. Em geral, o título principal é o elemento mais importante da página e deve conter a principal mensagem ou objetivo da página. Ele deve ser usado apenas uma vez em cada página e deve estar localizado próximo ao topo da página, geralmente logo após o cabeçalho.

`<h2> - Subtítulos Importantes`

A tag HTML `<h2>` é usada para definir os subtítulos mais importantes da página. Os subtítulos geralmente são usados para quebrar o conteúdo em seções menores e mais gerenciáveis, e para dar aos usuários uma ideia do que esperar do conteúdo a seguir.

Os subtítulos devem ser usados para dar ao usuário uma ideia clara do que está por vir, então é importante que eles sejam concisos e informativos.

`<h3> - Títulos de seções menores`

A tag HTML `<h3>` é usada para definir títulos de seções menores dentro do conteúdo. Eles geralmente são usados para descrever subseções de uma seção principal. Os títulos de seções menores devem ser usados para quebrar o conteúdo em pedaços menores e mais gerenciáveis, para que os usuários possam encontrar rapidamente as informações que estão procurando.

Os títulos de seções menores podem ser usados em várias seções diferentes do conteúdo, desde que sejam apropriados e claros.

Resumindo

Em geral, a hierarquia de títulos deve ser usada para ajudar os usuários a entender a estrutura do conteúdo da página. É importante lembrar que a hierarquia de títulos deve ser clara e significativa, e deve ser usada para ajudar os usuários a navegar pelo conteúdo.

Ao criar conteúdo para a web, é importante usar as tags HTML apropriadas para ajudar a estruturar o conteúdo e facilitar a navegação do usuário. Usar as tags h1, h2 e h3 corretamente é uma das maneiras mais eficazes de fazer isso.
Project: Library - [Completed]
Tags: webdev, javascript, beginners, programming
Published: 2023-05-15 17:04:35

I just finished my first project in the JS path of TOP and feel pretty good about where I am in my journey. While there are still/always going to areas I need to improve on, overall I am happy with my current standing.

I was able to improve on how I plan for and approach new projects by breaking down each problem to it simplest form. With the help of StackOverlow and ChatGPT, I was able to find the answers I didn't have myself and learn why those answers worked so that I, hopefully, will not need them as much in the future. This being the thought process I have whenever I come a across an issue I can't think through on my own. If I am seeking the answer to a problem then my goal is to find the most efficient/correct answer, and why that answer is best for the current problem, so that I will be able to get it own in the future.

I am trying to be hyper aware of my reliance on tools like StackOverflow and ChatGPT, while I am still learning. I do think that AI based tools will be standard for developers going forward, I don't want to be reliant on them to do everything. Therefore I am putting an emphasis having these resources be something I only use after I am sure I can not come to a conclusion on my own.

After reading the book, "Make It Stick" by Peter C. Brown, I have a new appreciation/understanding of how the learning process works. One of the more important take-a-ways being that the struggle to recall information strengthens it. Assuming you do get the answer eventually, that information will last longer because of the effort you put into trying to recall. It's that recall process that solidifies what you learned previously.

Knowing this, I want to be able to achieve this as organically as possible each time. I don't think this recall process solidifies the information as well when you have to be given the answer, like with ChatGPT. However, if you spend too much time spinning-your-wheels and getting frustrated then I think it's best to get your answer. Even when you are given the answer, its often not completely accurate and needs to be tweaked to fit your current needs. Requiring you too think through another problem, even if that new problem isn't as cumbersome.

At the end of the day, these AI tools are here to stay and I just have to find a way to make the most of them while also making sure they don't hinder my development in the process.

Overall, I believe I am doing a good job at finding that balance.
MOT Features and Benefits
Tags: opengauss
Published: 2023-04-13 02:47:26

MOT provide users with significant benefits in performance (query and transaction latency), scalability (throughput and concurrency) and in some cases cost (high resource utilization) –

Low Latency – Provides fast query and transaction response time
High Throughput – Supports spikes and constantly high user concurrency
High Resource Utilization – Utilizes hardware to its full extent
Using MOT, applications are able to achieve more 2.5 to 4 times (2.5x – 4x) higher throughput. For example, in our TPC-C benchmarks (interactive transactions and synchronous logging) performed both on Huawei Taishan Kunpeng-based (ARM) servers and on Dell x86 Intel Xeon-based servers, MOT provides throughput gains that vary from 2.5x on a 2-socket server to 3.7x on a 4-socket server, reaching 4.8M (million) tpmC on an ARM 4-socket 256-cores server.

The lower latency provided by MOT reduces transaction speed by 3x to 5.5x, as observed in TPC-C benchmarks.

Additionally, MOT enables extremely high utilization of server resources when running under high load and contention, which is a well-known problem for all leading industry databases. Using MOT, utilization reaches 99% on 4-socket server, compared with much lower utilization observed when testing other industry leading databases.

This abilities are especially evident and important on modern many-core servers.
How to track your coding time
Tags: webdev, beginners, programming, tutorial
Published: 2023-05-15 16:54:29

Have you ever wondered how much time you spend coding, if so, is there a way to track it. The extension Wakatime is available for many IDE's and text editors with this extension you can easily track your time: WakaTime - Dashboards for developers

Every week they email you a report and they have an option to display your time on Github

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

Personally I use it because I'm interested how much time I code per week, but it's also cool to show my friends the time on Github :D

Do you use Wakatime or don't like it?
Tags necessárias para um HTML básico
Tags: html, development, frontend, webdev
Published: 2023-05-15 16:47:28

HTML é uma das linguagens mais importantes para a criação de páginas da web. É a base do conteúdo que as pessoas veem e interagem em seus navegadores da web. Quando você está criando uma página da web, é importante que você use as tags HTML corretas para criar a estrutura básica da página e para fornecer informações semânticas sobre o conteúdo.

Aqui estão algumas das tags HTML mais comuns que você precisa conhecer para criar uma página da web básica:

`<!DOCTYPE html>`

A primeira linha de um documento HTML deve sempre ser o tipo de documento, ou DOCTYPE. Ele define o tipo de documento que está sendo usado, para que o navegador saiba como interpretar o código. No caso de uma página HTML básica, você deve usar o DOCTYPE HTML5, que é:

`<!DOCTYPE html>
<html>`

A tag HTML envolve todo o conteúdo da página. Ela marca o início e o fim do documento e fornece informações adicionais sobre a linguagem usada na página. Tudo o que estiver dentro da tag HTML será interpretado como código HTML.

`<head>`

A tag head contém informações adicionais sobre a página que não são visíveis para o usuário. Ela inclui o título da página, informações de metadados, como descrição e palavras-chave, e links para arquivos externos, como folhas de estilo e scripts.

`<title>`

A tag title define o título da página. Ele é exibido na guia do navegador e é uma das primeiras coisas que os usuários veem ao visitar a página. O título também é importante para os mecanismos de pesquisa, pois ajuda a determinar o conteúdo da página.

`<body>`

A tag body contém todo o conteúdo visível da página, como texto, imagens e links. É onde você adiciona todo o conteúdo que deseja exibir na página.

`<h1> a <h6>`

As tags de cabeçalho definem os cabeçalhos da página. Eles são usados para marcar seções importantes do conteúdo, como títulos de seção e subtítulos. Existem seis níveis de cabeçalho, de <h1> a <h6>, com <h1> sendo o mais importante.

`<p>`

A tag de parágrafo é usada para criar parágrafos de texto. É uma das tags mais comuns em uma página da web, pois a maior parte do conteúdo da página é texto.

`<img>`

A tag img é usada para inserir imagens na página. Ela requer um atributo src que aponta para o arquivo de imagem que você deseja exibir.

`<a>`

A tag de âncora é usada para criar links para outras páginas ou para seções dentro da mesma página. Ele requer um atributo href que define o URL da página ou seção para a qual o link está apontando.

`<ul> e <li>`

As tags ul e li são usadas para criar listas de itens. A tag ul define uma lista não ordenada, enquanto a tag li define cada item da lista. As listas são úteis para agrupar informações relacionadas.

**Estas são apenas algumas das tags HTML mais comuns que você precisa conhecer para criar uma página da web básica. Há muitas outras tags disponíveis que podem ser usadas para formatar texto, criar tabelas, inserir áudio e vídeo, e muito mais**

_Stefany Repetcki_ Dev FrontEnd
Weekly Roundup 004 (May 8): 🔥Hot Topics🔥 in #workplace, #sharepoint, and #powerplatform
Tags: roundup, workplace, sharepoint, powerplatform
Published: 2023-05-15 16:43:20

Hey fellow developers! It's @jaloplo, here to give you the latest scoop on what's been happening in the [#workplace](https://dev.to/t/workplace), [#sharepoint](https://dev.to/t/sharepoint), and [#powerplatform](https://dev.to/t/powerplatform) communities. 😎

## [#workplace](https://dev.to/t/workplace)

- [Dark Side of Remote Work – Personal Experience](https://dev.to/viktoriabors/dark-side-of-remote-work-personal-experience-5dch) by [Viktoria Bors-Pajuste](https://dev.to/viktoriabors) shares the negative aspects and challenges faced in remote work from a personal perspective.
- [Creating a Healthier Workplace with a Wellness Challenge](https://dev.to/saumya077/creating-a-healthier-workplace-with-a-wellness-challenge-318e) by [saumya077](https://dev.to/saumya077) explores the implementation of a wellness challenge to promote a healthier work environment.
- [What is needed to move the needle on employee engagement?](https://dev.to/sherin792/what-is-needed-to-move-the-needle-on-employee-engagement-32ok) by [sherin792](https://dev.to/sherin792) discusses strategies and initiatives required to improve employee engagement levels in organizations.
- [Upgrading Construction Business with Digital Business Solutions](https://dev.to/isabeldeabra/upgrading-construction-business-with-digital-business-solutions-28ea) by [Isabel Debra](https://dev.to/isabeldeabra) explores the benefits and advantages of implementing digital business solutions in the construction industry.

## [#sharepoint](https://dev.to/t/sharepoint)

- [Switching to Microsoft Lists, A goodbye to SharePoint Online lists](https://dev.to/jaloplo/switching-to-microsoft-lists-a-goodbye-to-sharepoint-online-lists-5enk) by [Jaime López](https://dev.to/jaloplo) discusses the transition from SharePoint Online Lists to Microsoft Lists and its implications.

## [#powerplatform ](https://dev.to/t/powerplatform)

- [Embed Power BI Content in a Model-Driven App System Dashboard](https://dev.to/cloudstakestechnology/embed-power-bi-content-in-a-model-driven-app-system-dashboard-8ik) by [CloudStakes Technology](https://dev.to/cloudstakes) explores the process of embedding Power BI content in a model-driven app system dashboard.
- [Trigger Settings & Conditions in Power Automate](https://dev.to/wyattdave/trigger-settings-conditions-in-power-automate-2h9k) by [david wyatt](https://dev.to/wyattdave) explains the configuration of trigger settings and conditions in Power Automate workflows.
- [Effortless User Story Creation](https://dev.to/balagmadhu/effortless-user-story-creation-15hn) by [Bala Madhusoodhanan](https://dev.to/balagmadhu) discusses techniques and methods to streamline the process of creating user stories for software development projects.

That's all for this week's roundup! Thanks for tuning in, and remember to keep the discussions lively and informative in our tags. 💬 If you have any suggestions for future topics, feel free to drop them in the comments below. See you next week! 👋