teleren/devto huggingface dataset:
Introduction to HTML: The HyperText Markup Language
Tags: html, beginners, frontend, webdev
Published: 2024-03-16 00:00:05

**HTML**, or *HyperText Markup Language*, is the standard language used for creating web pages. As a markup language, it provides the **structure** and **layout** of a **web page**, defining elements like headings, paragraphs, links, and more. From simple static websites to complex interactive web applications, HTML is the foundation upon which much of the internet is built.

### What is HTML?

HTML is a **markup language** that uses a series of **tags** to define the structure and content of a web page. These tags, written within angle brackets `< >`, are interpreted by web browsers to render the content correctly on the user's screen, and are used to create elements like headers (represented by `<h1>` through `<h6>` tags), paragraphs (`<p>`), links (`<a>`), or images (`<img>`), among others.

### The basic structure of an HTML document:

Every HTML document follows a basic structure consisting of a set of key elements:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is an example of a heading.</h1>
    <p>This is an example of a paragraph.</p>
</body>
</html>
```

- `<!DOCTYPE html>`: This declaration defines the HTML version used in the document. (In this case, HTML5).
- `<html>`: It is the root element that wraps all HTML content.
- `<head>`: It contains metadata about the document, such as the page title and links to CSS style sheets and JavaScript scripts.
- `<title>`: Defines the title of the page displayed in the browser’s tab.
- `<body>`: Contains the visible content of the page, such as headers, paragraphs, images, and more.

### Key HTML Tags:

- **Headers** (`<h1>` ,…,`<h6>`): Used to organize and hierarchize page content.
- **Paragraphs** (`<p>`): Defines a block of text.
- **Links** (`<a>`): Creates an hyperlink to other web pages or online resources.
- **Images** (`<img>`): Inserts an image into the page.
- **Lists** (`<ul>`,`<ol>`): Creates an unordered or ordered list.
    - **List item** (`<li>`): Defines a list item.
- **Tables** (`<table>`): Organizes data into a tables.
    - **Table row** (`<tr>`):Defines a table row.
    - **Table column** (`<td>`): Defines a table column.
- **Forms** (`<form>`): Creates a form to collect user information.
    - **Input** (`<input>`): Defines an input that can be filled with some information.
    - **Button** (`<button>`): Defines a button that can be pressed to send the form information.

For more information about HTML tags: https://html5doctor.com/element-index/

### Moving forward with HTML

To create dynamic and visually appealing web pages, it's necessary to complement it with [**CSS**](https://dev.to/algorodev/introduction-to-css-transforming-web-pages-with-style-22p7) (*Cascading Style Sheets*) for styling the content and [**JavaScript**](https://dev.to/algorodev/introduction-to-javascript-empowering-web-development-with-interactivity-1cla) for adding interactivity and functionality. Together, these three languages form the core of modern web programming.
Caption This! 🤔💭
Tags: watercooler, discuss
Published: 2024-03-16 00:00:00

---
published_at : 2024-03-16 00:00 +0000
---
Ready to unleash your inner wordsmith? We need your wit to crack the code behind this picture-perfect scene. Caption away!

![Plastic egg with a face on it looking concerned](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qnjfaf9jylab88awq6e.jpg)
Day 928 : Invincible
Tags: hiphop, code, coding, lifelongdev
Published: 2024-03-15 23:19:30

_liner notes_:
- Professional : Pretty productive day. Had a meeting with my manager. Added a couple of features to the side project I'm working on for work. Knocked them out pretty quickly. While I was working on cleaning up and refactoring the code, my online IDE started to crash. It's weird because the code works when deployed just fine. Going to see what happens if I load it in another online IDE.

- Personal : Last night, I loaded a bunch of tracks onto my audio player for the radio show this week. I got a new updated Astro project up and running on Netlify. Luckily, all I need to do was copy over the old code I had and things just worked.

![The photo shows a beautiful mountain lake in Lünersee, Austria. The water has a deep blue-green color and is surrounded by steep, green mountains. The sky is cloudy and there is a light mist in the air. In the foreground of the photo is a rocky cliff with some trees growing on it.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3zqz3lpi7r4hug0ts6p.jpg)

Going to finalize the radio show. Then I want to work on finishing up the side project. I saw there was a new episode of "Invincible" that came out. Maybe I'll watch that if I have time.

My weekend.
- Saturday: Radio show - https://kNOwBETTERHIPHOP.com
- Sunday: Study sessions - https://untilit.works

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube -7hwrEDjikA %}
UI Development: Stateful vs Stateless Widgets
Published: 2024-03-15 22:38:56

Let's quickly discuss stateful versus stateless widgets. If you're building screens or UI pages, start with a stateless widget—it's the best place to begin. So a widget doesn't have to be, excuse me, sorry, until you find the need for it to be stateful, which is essentially when there is a certain kind of interaction that happens with the user.

It shouldn't be, because I've seen a lot of widgets treated as stateful, but they really shouldn't be. You want more of them to be stateless. Even when you have a stateful widget that depends on a number of other stateless widgets, you can use them interchangeably.

So just create these widgets as stateless, and when the need arises for the user to interact with them—say they're making some changes, and you need those changes to be reflected—whether it's making API calls or based on the response from those API calls, your page or screen changes. Whether it's a mobile app or web app doesn't matter, and neither does the stack.

There are certain differences in how you would build a Flutter stateful widget versus a React Native widget, for instance, but fundamentally there aren't any differences, right? Because the idea is the same. Of course, when you bring other frameworks or libraries into the mix, this changes a tiny bit.

A little bit, say if you're using Redux for state management, for instance, but outside of those, just ignoring all of that, start with building a stateless widget and then make it stateful if you feel the need for it to be stateful. In my mind, I mean a good percentage of your widgets are going to be stateless, a good number of those.

I don't know what the math is, but I would imagine this is good for any product or any platform. Just don't start building them as stateful because it becomes difficult to manage them, and more often than not, they don't need to be stateful. So just keep that in mind.
Day 4 of #100daysofcode
Published: 2024-03-15 22:37:58

Today I worked on displaying the questions with its respective answers on the page. 
Also, I wanted to focus first on making sure that you can start and then play again if you want, just before focusing on other parts of the game. That is because I decided to focus on the main functionalities and then adding the little details. 
So, so far everything is working as expected: you start the game, you see some questions with possible answers and then when you start the game again, you'll see a waiting screen to make sure there are not many requests sent to the API.
How to Recover Stolen Money || Daniel Meuli Web Recovery
Published: 2024-03-15 22:22:33

Losing $35,777 worth of Bitcoin was a devastating blow for me. I had invested a significant portion of my savings, hoping to capitalize on the excitement of a big fight. However, the outcome was far from what I expected, and I found myself with an empty wallet and a sinking feeling of despair. In my search for a solution, a friend who had experienced a similar situation recommended Daniel Meuli  Web Recovery. Skeptical at first, I decided to give it a shot out of sheer desperation. After all, I had nothing left to lose at that point. To my surprise and relief, the team at Daniel Meuli Web Recovery proved to be incredibly knowledgeable and efficient in their approach. They took the time to understand my situation, asked for relevant details about the scam, and assured me that they would do everything possible to help recover my lost Bitcoin. Throughout the process, they maintained open communication, providing regular updates on their progress and offering reassurance when my anxiety peaked. Their professionalism and dedication gave me hope in what felt like a hopeless situation. After what seemed like an eternity of uncertainty, Daniel Meuli Web Recovery delivered on its promise. They successfully traced the transactions, identified the culprits behind the scam, and initiated the recovery process. I can't express the overwhelming sense of gratitude and relief I felt when I saw my lost Bitcoin returning to my wallet. It was nothing short of a miracle, made possible by the expertise and perseverance of the team at Daniel Meuli Web Recovery Hacks. I conclude by recommending, that anyone who finds themselves in a similar predicament, Give  Daniel Meuli Web Recovery A Chance. Their commitment to helping victims of cryptocurrency scams is unparalleled, and they may just be the lifeline you need to reclaim what's rightfully yours.
WhatApp.  +39,3512,013,528               Email. Danielmeuliweberecovery (@) email . com              TeleGRAM.  +39,3512,013,528              Website.  https : // danielmeulirecoverywizard . online
Git Commits: An approach that works well for a startup
Published: 2024-03-15 22:14:23

Let's talk about Git Commits and one aspect of it. So let's say you're working on a feature with 10 checklist items, right? Let's say you're working on a UI feature. There are...

We've gone through the requirements and the design, and we've identified that there are 10 development items that need to be completed for the feature to be considered done from a UI standpoint. These items are not equal in complexity or time consumption.

So one of those items could take a whole lot longer than the others, and so on. But regardless, when we go through the design, we identify as many items as we can. We certainly find others in the process of implementation, but let's say we've identified 10 of them, and we want to go about developing those items.

Here's how I would like to do it, but it's been a little difficult to implement that and follow through on that expectation, for understandable reasons, as you'll see. Ideally, I would like to take one item at a time and because we generally have them in a decent sequence, we implement the first one and then do a commit just for that one item, and then proceed to the next item in sequence, all the way through to the 10th item.

So in that ideal hypothetical scenario, there would be 10 commits that would make up that feature branch, and then a pull request is created to be merged forward to develop. I did speak about that in a different video. Then we would go through the review process.

If we don't like one item, we would like to be able to rollback that single commit, assuming that it doesn't shake the foundation of the ones above that. But the truth of the matter is the commits are not generally mutually exclusive, and we don't always get to work on them in the sequence that we had defined.

Long story short, the approach that I had suggested at the top of this video never seems to work for us. I don't know if it even works for anybody, or if anyone even intends for that approach to work. So what we do is we just take those 10 items, split them between team members, sometimes it's one person, sometimes more than one person working on it.

So those don't generally correspond to the actual checklist items. We create an intermediary branch, let's say we call it a feature merge branch, and then we do a squash merge into that branch. So that way, we don't have the history of all these 50 commits that I just mentioned.

So that's what we do. We create a merge into that particular branch, and then we deploy. And then after that, we just delete the branches as part of branch management and related activities.
Comunicación para desarrolladores. Parte 1/2
Tags: comunicacion, escucha, claridad, empatia
Published: 2024-03-15 22:05:00

---
title: Comunicación para desarrolladores. Parte 1/2
published: true
description: Atributos para una comunicacion efectiva
tags: comunicacion, escucha, claridad, empatia
cover_image: https://i.ibb.co/x8nVrsB/Captura-de-pantalla-2024-03-18-203753.png
# Use a ratio of 100:42 for best results.
published_at: 2024-03-15 22:05 +0000
---

La comunicación es una habilidad clave para un desarrollador 🔑, ya que fomenta la colaboración efectivasenio 🤝, la resolución de problemas 🕵️‍♀️ y la toma de decisiones informadas 💡 dentro del equipo de desarrollo 👩‍💻👨‍💻.

A continuación se presenta una breve descripción de algunas características de la comunicación en el ámbito de la ingeniería de software 📝

1. **Escucha activa** 👂: La capacidad de escuchar atentamente a los demás, sin interrumpir, y comprender sus ideas y perspectivas es crucial. Un desarrollador experimentado debe estar dispuesto a recibir retroalimentación y opiniones de otros miembros del equipo. 🙋‍♂️🙋‍♀️

2. **Expresión clara y concisa** 🗣️: La habilidad para expresar ideas de manera clara, concisa y directa es esencial. Un desarrollador experimentado debe ser capaz de comunicar información técnica compleja de forma comprensible para todo el equipo, evitando ambigüedades y malentendidos. 📢

3. **Empatía y respeto** 🤝: Un enfoque empático y respetuoso es fundamental en la comunicación asertiva. Un desarrollador experimentado debe ser capaz de comprender las perspectivas y preocupaciones de los demás, y expresar sus opiniones sin menospreciar o juzgar a los demás. 🙏

4. **Retroalimentación constructiva** 🔄: La capacidad de proporcionar y recibir retroalimentación constructiva es crucial. Un desarrollador experimentado debe ser capaz de dar comentarios honestos y constructivos de manera respetuosa, al tiempo que acepta críticas y sugerencias de los demás de forma abierta y sin defensas. 💬

5. **Resolución de conflictos** 🤼‍♀️: Las habilidades para resolver conflictos de manera asertiva son importantes. Un desarrollador experimentado debe ser capaz de abordar y gestionar los desacuerdos de forma constructiva, buscando soluciones mutuamente beneficiosas y evitando confrontaciones improductivas. 🤝

6. **Comunicación visual** 📈: La capacidad de comunicar ideas y conceptos a través de diagramas, diapositivas u otras herramientas visuales es valiosa. Un desarrollador experimentado debe ser capaz de presentar información compleja de manera clara y accesible para todo el equipo. 📊

7. **Adaptabilidad** 🧩: La capacidad de adaptar el estilo de comunicación según el contexto y las necesidades del público es importante. Un desarrollador debe ser capaz de ajustar su enfoque de comunicación según sea necesario para facilitar la comprensión y la colaboración efectiva. 👍

En la segunda parte de este blog post, se ampliará más cada habilidad con algunos ejemplos. ¡Espera la próxima entrega 👀!
Definindo o type certo para seu array filter
Tags: typescript, webdev
Published: 2024-03-15 21:35:52

Um problema comum que muitos desenvolvedores enfrentam ao utilizar `Array.filter` em Typescript, é a utilização de runtime ao invés de type em operações de `array.filter` com checagem de nulos.

Exemplo:

```ts
// Types
interface IFruitModel {
    name: string
    icon: string
}

// Models
const banana: IFruitModel = {
    name: "Banana",
    icon: "🍌"
}

// Data manipulation
const fruits = [banana, null, banana]

const fruitsIcons = fruits
    .filter(fruit => !!fruit)
    .map(fruit => fruit.icon)

console.log(fruitsIcons)
```

O código acima irá gerar o erro `'fruit' is possibly 'null'.(18047)`. Isso acontece pois durante o `filter` as frutas nulas são removidas, mas o type recebido no `map` é `IFruitModel | null`.

Durante o `map`, temos certeza que não existem frutas nulas, nosso código está correto e temos um erro de tipagem que não faz sentido.

Vou listar abaixo a forma incorreta, e a forma certa de resolver este problema.

**🚨 Exemplo do que não fazer**

```ts
const fruitsIcons = fruits
    .filter(fruit => !!fruit)
    .map(fruit => fruit as IFruitModel)
    .map(fruit => fruit.icon)
```

Neste caso, é utilizado runtime para corrigir um problema de tipagem, comprometendo a performance do sistema em prol de um simples problema que poderia ser evitado, o código transpilado para JavaScript ficaria assim:

```ts
const fruitsIcons = fruits
    .filter(fruit => !!fruit)
    .map(fruit => fruit)
    .map(fruit => fruit.icon)
```

Perceba que o primeiro map não faz nada a não ser retornar a própria fruta, é um desperdício de processamento.

**✅ Exemplo do que fazer**
A forma mais adequada de se resolver este problema, é definindo o predicado.

Em um `array.filter(predicate: () => boolean)`, o predicado é a função que é passada por parâmetro e sempre retorna um booleano.

Podemos modificar este predicado para injetar um valor de saída no `array.filter` da seguinte forma:

```ts
const fruitsIcons = fruits
    .filter((fruit) : fruit is IFruitModel => !!fruit)
    .map(fruit => fruit.icon)
```

Deste modo a fruta que entra no filter ainda é `IFruitModel | undefined`, mas o retorno será um array de `IFruitModel`. Viabilizando o `map` que vem em seguida.

O código equivalente em javascript seria:

```js
const fruitsIcons = fruits
    .filter(fruit => !!fruit)
    .map(fruit => fruit.icon)
```
Cadê meus zeros? Sobre tipos em banco de dados.
Tags: javascript, braziliandevs, bancodedados, testing
Published: 2024-03-15 21:25:00

Estava eu codando, mais um dia comum, quando de repente acontece um erro.

O valor que deveria ser salvo aparece na interface diferente do valor que eu digitei, nesse momento apertei ctrl+c para parar a execução do código, e rodei ele outra vez com npx expo start.

O banco de dados recarregou e ali estava outra vez o valor errado, eu estava testando a inserção de um código e como teste usei "0000000000" porém o que aparecia na lista era apenas 0.


![Meme algo de errado não está certo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uehnavs1sekkfj3rsem7.png)



Depois de reiniciar a segunda coisa que pensei foi que em algum lugar do código deve está convertendo para inteiro (Sim, eu estava usando [JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion)), mas ao analisar o código parecia tudo ok.



Até lembrar do tipo que estava usando no banco de dados, os Ids eram do tipo inteiro. Então tudo fez sentido! Não posso salvar dados que tenham zeros a esquerda dessa forma:

```
tx.executeSql(
'CREATE TABLE IF NOT EXISTS Machine (id INTEGER PRIMARY KEY, is_available INTEGER)',
[], 
()=>{console.log("successful create Machine")}, 
()=>{console.error("error: create Machine")})

```

Para resolver essa questão bastava modificar o tipo para texto.

```
tx.executeSql(
'CREATE TABLE IF NOT EXISTS Machine (id TEXT PRIMARY KEY, is_available INTEGER)',
[], 
()=>{console.log("successful create Machine")}, 
()=>{console.error("error: create Machine")})

```

Agora sim o app consegue adicionar itens com zeros a esquerda:


![Interface com o item 000000000 adicionado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u77ubjc7fw07axzbyy5.png)

## Concluindo

- É sempre importante verificar os tipos de dados que está usando no banco de dados, para não ocorrer erros como este e perder seus zeros ou pior.
- Apesar parecer intuitivo usar um tipo numérico como inteiro prefira usar texto quando o número que for usar não for usado para cálculos ou seja que não precisem necessariamente ser um número.
- Façam testes.
Running Ruby Scripts in ChatCraft with Python-WASI
Tags: opensource, typescript, wasi, ruby
Published: 2024-03-15 21:17:55

This week I began to integrate Python support into [ChatCraftFunction](https://github.com/tarasglek/chatcraft.org/blob/b12cd3056c5bbc0d551db846d04f8e00ead45739/src/lib/ChatCraftFunction.ts#L162), a feature that promised to enhance the platform's versatility and appeal. However, after careful consideration and exploration, we changed it.

The Initial Python Proposal
The idea to support Python in ChatCraftFunction was driven by the language's popularity and its wide range of applications, from web development to data analysis. Python's simplicity and readability made it an attractive option for our platform, aiming to empower users with the ability to run Python scripts seamlessly within ChatCraft. I tried to revise part of ChatCraftFunction and found I need create a package which is similar to typescript2openai and require user to add the parameter types into python comments also considered about adding a 'language' into function DB.



A Shift in Focus
As the development process unfolded, discussions among team members and feedback from the community prompted a reevaluation of our priorities. The niche nature of ChatCraft functions at the time, coupled with the desire to concentrate on other features such as custom OpenAI-compatible providers and sharing improvements, led to a strategic pivot. The decision was made to hold off on Python integration, opting instead to wait and see how demand for such functionality would evolve over time.

Embracing Ruby
In this period of reflection and exploration, I tested more wasi file and add Ruby into the run-code. Ruby, known for its elegance and productivity, offered a compelling alternative that aligned well with our platform's goals and the needs of our community. The journey of integrating Ruby into ChatCraftFunction has been similar to integrate Python I did last weel

Conclusion
The development of ChatCraftFunction is a continuous journey of learning, adapting, and evolving. As ChatCraft continues to grow and evolve, we remain excited about the possibilities that lie ahead and are committed to exploring new ways to empower our users.