teleren/devto huggingface dataset:
My First Bug
Tags: bug, watercooler, discuss, learning
Published: 2023-03-01 03:41:33

---
title: My First Bug
published: true
description: A story about my "first" bug
tags: bug,watercooler,discuss,learning
canonical_url: https://alvaromontoro.com/blog/68030/my-first-bug
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3c6lb0f3poj4n913orw.png
---

I had done coding before. I don't know if the little I had done in MS-DOS batch files and command line menus qualified as "programming" or "development" beyond just "coding." And I had made mistakes but didn't consider them bugs (at least I didn't call them that way.)

My first bug (although some people may not consider it as such) was during Programming I in college. And it was the silliest thing that you could imagine. Still, it stuck, and I still remember the error because of the lesson that came with it.

We were learning Turbo Pascal (I just aged myself with that, but I have to say, it is a phenomenal language to learn because it uses a more "natural English" than most others I've learned since). During our first lab, we had to create a small program, I don't remember what it was, but the general idea was to read some input, run some math calculations, and show the results on the screen.

After fixing a couple of missing semi-colons, the program compiled and ran! It could read the inputs, pass the arguments to a function, run the calculations, and return the value... but the result would not display on the screen. I ran the program again and again—no problem reading the inputs. Still no result.

After including some writeln I could confirm that the function ran just fine, but the result was not on the screen for some weird reason.

I called the professor, who checked the code. It was not long, but longer than it should be –at the time, we enjoyed having the program with the highest number of lines possible, like that proved we were "more of a developer."

I guess he expected a compilation error or something typical from new developers, but to his surprise, he couldn't find an obvious mistake.

Then he did something that blew my mind (considering that I was a first-year CS student): he ran the debugger and executed the program step by step. We saw how the process ran as it should, observed the values being calculated correctly, exiting the function, the value was correct outside of the function... and no result on the screen.

He rolled his eyes and looked at me, "_Alvaro... where are you writing the result on the screen?_" And as I pointed to the last line of code, I could see my error: I forgot to output the variable with the result!

```
writeln('The result is ');
```

The professor was unhappy about losing 5-10 minutes looking at such a ridiculous issue. Or maybe he was a little ashamed about not realizing sooner.

Either way, he spent the last 20 minutes of the lab explaining how to debug in Turbo Pascal... and asking to please, please, please not ask him for help unless we had debugged the code before. A request that we ignored most of the time.

Still, that was a great lesson and a great lab. And I remember it as one of the days that I fell in love with coding.
Paito Warna Hongkong | Tabel Paito HK
Published: 2023-03-01 03:22:15

**[Paito Warna HK](http://167.99.66.68/)** Merupakan sebuah situs web Tabel Paito Warna Hk yg mengeluarkan keluaran angka HK tercepat dan terupdate
Merge Sort On Array
Tags: javascript, leetcode
Published: 2023-03-01 02:53:58

```js
/**
 * @param {number[]} nums
 * @return {number[]}
 */

var merge = (arr1,arr2) => {
    let res =[];
    let i=0, j=0;
    while(i<arr1.length && j<arr2.length){
        if(arr1[i] <= arr2[j]){
            res.push(arr1[i]);
            i++;
        }else{
            res.push(arr2[j]);
            j++;
        }
    }

    while(i<arr1.length){
        res.push(arr1[i]);
        i++;
    }

    while(j<arr2.length){
        res.push(arr2[j]);
        j++;
    }
    return res;
}

var sortArray = function(nums) {
    if(nums.length <= 1) return nums;

    let mid = Math.floor(nums.length/2);
    let left = sortArray(nums.slice(0,mid));
    let right = sortArray(nums.slice(mid));

    return merge(left,right);
}
```
Improving your React Native code using Path Aliases
Tags: javascript, reactnative, mobile, refactorit
Published: 2023-03-01 02:38:53

When we develop an application with many folders the import paths are often too large and this affects the readability of your code as per the example below:

```
import Input from '../../../src/components/Input';
import HomeSvg from '../../../src/assets/home.svg';
```
To solve this problem we will have to make some settings:

## 1º Step: Libs Install

- Install metro-react-native-babel-preset and babel-plugin-module-resolver as devDependencies

```
npm install metro-react-native-babel-preset --save-dev
yarn add metro-react-native-babel-preset -D
```

```
npm install babel-plugin-module-resolver --save-dev
yarn add babel-plugin-module-resolver -D
```

## 2º Step: Babel Configuration

- **alias**: In will have the paths and the name that will be used when calling the specified path.

- **extensions**: Extensions to the files that will be used

```
module.exports = function(api) {
  api.cache(true);
   return {
     presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset'],
     plugins: [
       "module-resolver",
       {
         alias: {
           // This needs to be mirroned in tsconfig.json/jsconfig.json
          components: "./src/components",
          svg: "./src/assets",
         },
         extensions: ['.js', '.jsx', '.tsx'],
       },
     ],
   };
};
```

## 3º Step: tsconfig/jsconfig configuration

- Access the tsconfig.json or jsconfig.json file

- If neither of these files exist, create them in the project root

- **paths**: Add the same paths added in babel.config.js, if the called folder does not have an index calling all files it is necessary to put "/*"

- **baseUrl**: Tell the typescript where to start importing

```
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      // This needs to be mirrored in babel.config.js
      "components": ["./src/components"],
      "svg/*": ["src/assets/*"],
    }
  },
  "extends": "expo/tsconfig.base"
}
```

## Final Result
```
import Input from 'components/Input';
import HomeSvg from 'svg/home.svg';
```
Stop Using Express.js in 2023
Tags: javascript, express, webdev, typescript
Published: 2023-03-01 02:10:25

For years, express.js has been the standard choice for building REST APIs with JavaScript or TypeScript. It has around 30 million weekly downloads (twice as much as React), and nearly all beginner tutorials recommend it. However, in today's landscape, there are now alternatives that offer better developer experiences and performance. In this post, we'll explore some of these alternatives and why you should consider them over Express.

## What's wrong with Express?

### 1. It's Unmaintained

Express hasn't seen any major updates or new features in years, with its website last being updated in 2017.

### 2. It's Slow

Since Express is primarily written in pre-ES6 JavaScript, it misses out on years of performance-enhancing updates and concepts.

### 3. It doesn't work well with TypeScript

Express wasn't designed with TypeScript in mind and requires a separate types package to work with it. Despite this, you will still encounter lots of `any`s.

## Alternatives to Express

### Fastify

Fastify is a modern alternative to Express. It's significantly faster and has a vast ecosystem of plugins. It shares a similar syntax with Express, so most of your Express knowledge will still apply to Fastify. With `@fastify/express` package, you can even use any express middleware module with fastify. Fastify is the most similar to express out of these alternatives, and It's the easiest to switch to. Use Fastify instead of Express for your next API to get instant performance and DX improvements.

[Learn more about Fastify](https://www.fastify.io/)

### Hono

Hono is a simple and minimal web framework that is even faster than Fastify. Although it lacks many of plugins, it can still handle most use cases. The primary selling point of Hono is that it can be used with runtimes other than Node.js, like Deno, Bun, or Cloudflare Edge Workers. Using Hono with these runtimes can make it even faster, cheaper and easier to host.

[Learn more about Hono](https://hono.dev/)

### tRPC

If you're building an API solely to consume it in a TypeScript client application (such as a React app), consider using tRPC. With this library, you can declare a function on your backend, and after a simple setup, call it on the frontend. tRPC automatically infers the input and return types of the function, resulting in TypeScript error messages and IntelliSense.

[Learn more about tRPC](https://trpc.io/)
BTOPRO WEEK 7
Published: 2023-03-01 02:09:49

##Write a follow up response on dev.to from the perspective of a new developer in the field

## What is confusing about platforms?
To me as a new dev I am confused about the differences that every platform has. It would make much more sense if there was a standard.

## How could web components and Vanilla JS standards be taught in a way that is more approachable?
They should have heavy focus on why they work. When learning a new system it is important to know why something behaves the way it does instead of having to guess.

## What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it)
React worked the best for me the first time. Everything was easy to slot in and it just worked.

## Think back on the tooling. What parts were confusing? What clicked with you immediately?
Figuring out how to implement my code was easy. Getting npm to play nice took some work.

## What additional readings did you have to do in order to make sense of things.
* https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/
* https://kinsta.com/blog/web-components/
Daily UX Writing Challenge Day 1
Tags: uxwriting, ux, beginners
Published: 2023-03-01 01:57:16

I signed up for the Daily UX writing Challenge on https://dailyuxwriting.com/

I should be posting my solutions on their facebook, but since I dont have facebook I'm posting them here. 

**Day 1 challenge:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpp192xdnkso3b9kewtq.png)

**How I came up with my solution:** 
 Firstly, the heading should be clear and concise at conveying the message to the user explaining to them what the problem is. 
The body text helps give the user a solution to their problem. By letting them know that the next flight is scheduled it takes the biggest worry away from the user. Lastly, providing lounge access/food vouchers will indirectly guide the user to either eat or rest instead of hanging around the customer service area. 

The hardest part of this challenge was the character restriction forcing me to be clear and concise with my words but also having to be empathetic to the user. I also understand that the solution is something that not all airlines are able to provide (and can cause overcrowding in the lounge) but as we all know, when a flight is cancelled there's really not much the airline is able to do so some sort of compensation is better than nothing.
The Step-by-Step Guide for Transferring a Repository to an Organization on GitHub
Tags: github, organization, repo, git
Published: 2023-03-01 01:56:01

GitHub is a popular platform for hosting and sharing software development projects. Whether you’re a software developer, a team lead, or a business owner, you may find yourself in a situation where you need to move a repository from an individual account to an organization account. This can happen for many reasons, such as changes in project ownership, team collaboration, or company restructuring.

In this post, we’ll walk you through the steps for transferring a repository from an individual account to an organization account on GitHub.

Step 1: Create the Organization
The first step is to create the organization on GitHub, if it doesn’t already exist. To create a new organization, follow these steps:

Log in to your GitHub account.
Click on your profile picture in the top-right corner of the screen.
Select “Your organizations” from the dropdown menu.
Click on the “New organization” button.
Follow the prompts to create the organization.
Step 2: Transfer the Repository
Once you’ve created the organization, you can transfer the repository to it by following these steps:

Log in to your GitHub account.
Go to the repository page you want to transfer.
Click on the “Settings” tab.
Click on the “Transfer” button.
Follow the prompts to select the organization and transfer the repository.
Once the transfer is complete, the repository will now be owned by the organization account.
Step 3: Update Local Clones
After transferring the repository to the organization, you will need to update any local clones of the repository to point to the new URL. This can be done by running the following command in your local repository directory:

`git remote set-url origin new-url`

Step 4: Update Links and Documentation
Finally, you will need to update any links to the old repository URL in any documentation, websites, or other places where the repository is referenced. This is important to avoid broken links and ensure that people can find the repository in its new location.

In conclusion, transferring a repository from an individual account to an organization account on GitHub is a straightforward process that can be completed in just a few steps. By creating an organization and transferring the repository to it, you can centralize ownership and management of your projects and make it easier for teams to collaborate on them. Just remember to update your local clones and links to the repository to ensure that everything works as expected.

We hope you found this post helpful. If you have any questions or feedback, feel free to leave a comment below!
Use the json module to easily serialize and deserialize JSON data in Python.
Tags: python, json, serialize, deserialize
Published: 2023-03-01 01:27:26

use the `json` module to easily serialize and deserialize JSON data in Python. JSON is a widely-used data format that's easy to read and write, and the `json` module makes it simple to work with JSON data in Python. Here's an example:

```python
import json

# serialize a Python object to JSON
data = {'name': 'Alice', 'age': 25}
json_data = json.dumps(data)
print(json_data)

# deserialize JSON data to a Python object
json_data = '{"name": "Bob", "age": 30}'
data = json.loads(json_data)
print(data)
```

This will output:

```plaintext
{"name": "Alice", "age": 25}
{'name': 'Bob', 'age': 30}
```

In this example, we used the `dumps` method to serialize a Python object (`data`) to a JSON-formatted string (`json_data`). We then used the `loads` method to deserialize a JSON-formatted string (`json_data`) to a Python object (`data`). This makes it easy to work with JSON data in Python, whether you're reading from or writing to a file, or sending data over the web.
Create your perfect space to focus on your daily tasks
Tags: showdev, productivity, nextjs, react
Published: 2023-03-01 00:37:39

Hi everyone!, I want to share my lastest project: [daily.place](http://daily.place/)

The objective of [daily.place](http://daily.place/) is to have within reach of a single page the necessary tools to be able to have a space for concentration. Thats include:

- Music list with different ambient modes (rain, forest, lo-fi, coffee shop, etc.)
- Pomodoro timer with short and long pause, fully configurable.
- To-do list with progress ring.
- ☀️ Light and 🌑 dark mode.

Everything is saved and available in your browser under a name of your choosing.

Some updates in the last changes:

- 🔃 Support to re-order tasks.
- Added button to restart daily pomodoro's.
- Vaporwave/Lofi/Synthwave sound added.
- ▶️⏸️ Play/pause controls added.
- Transform .gif to .webm to reduce size and load times.
- Add move done tasks down icon in To-Do.
- Add scroll support in To-Do to prevent a long list of tasks.

Any feedback is welcome! enjoy it!

[https://www.daily.place/](https://www.daily.place/)
Overview of the React.js framework
Tags: react, webdev, javascript, beginners
Published: 2023-03-01 00:30:54

## Introduction


- React is a popular [JavaScript](
https://www.youtube.com/watch?v=9EZ0TpuHYvI) library for building user interfaces. 

- It has become increasingly popular in recent years due to its ability to create fast and efficient web applications.
 
- React allows developers to quickly develop complex user interfaces with minimal code, making development faster than ever before.

- One of the reasons why React makes development faster is because it uses components instead of templates or HTML markup when developing an application’s interface. 

- Components are reusable pieces of code that can be used over and over again throughout the application, reducing overall coding time significantly compared to using traditional methods such as templates or HTML markup which require more manual coding each time they need updating or changing.

- Additionally, since components are written in [JavaScript](https://www.youtube.com/watch?v=9EZ0TpuHYvI) rather than HTML they can be easily updated without having to rewrite large portions of existing code which further speeds up development times by allowing developers to focus on other tasks. 

- At the same time, their changes take effect automatically within minutes rather than hours or days like with traditional methods. 

- Finally, React also offers many helpful tools such as debugging devices that allow developers to identify errors quickly so that solutions can be implemented much quicker than if done manually through trial-and-error testing alone - saving valuable developer resources and speeding up the process even more! 

- With all these features combined with its growing community support from experienced professionals and newcomers alike, there's no doubt why so many people choose to React when it comes to speedier software development times!


###### 7 Tools for Faster 🚀 Development in React 🔥

🎥 {% youtube U2C9I3hjh5Y%}


#### Bonus

###### 7 programming tools 🔧 you should be using in 2023 👩‍💻💡 

🎥 {% youtube djONtv0TM_E%}


### Connect with Me 😊

#### 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Mahmoud42275)
The Benefits of Using Dark Mode on Twitter: A Dark Theme Template Example
Tags: webdev, javascript, tutorial, beginners
Published: 2023-03-01 00:03:24

Berikut adalah contoh template Twitter dengan tema gelap (dark mode) beserta keuntungan-keuntungannya:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitter - Tema Gelap</title>
    <style>
        body {
            background-color: #15202B;
            color: #D9D9D9;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 1rem;
        }
        .tweet {
            margin-bottom: 1rem;
            padding: 1rem;
            border-radius: 5px;
            background-color: #192734;
        }
        .tweet h3 {
            margin: 0;
            font-size: 1.5rem;
        }
        .tweet p {
            margin-top: 1rem;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="tweet">
            <h3>Ini adalah judul tweet</h3>
            <p>Ini adalah isi dari tweet.</p>
        </div>
        <div class="tweet">
            <h3>Ini adalah judul tweet lainnya</h3>
            <p>Ini adalah isi dari tweet lainnya.</p>
        </div>
    </div>
</body>
</html>
```

Keuntungan menggunakan tema gelap di Twitter adalah sebagai berikut:

Mengurangi kelelahan mata: Terutama jika pengguna Twitter menghabiskan banyak waktu di depan layar, tema gelap dapat membantu mengurangi kelelahan mata karena warna yang lebih gelap dan tidak terlalu kontras.

Menyimpan daya baterai: Jika pengguna Twitter menggunakan perangkat mobile, tema gelap dapat membantu menghemat daya baterai karena layar tidak perlu menampilkan warna putih yang cerah.

Estetika: Tema gelap memberikan tampilan yang lebih modern dan elegan daripada tema putih yang standar.

Fokus pada konten: Tema gelap dapat membantu pengguna Twitter untuk lebih fokus pada konten yang mereka baca atau tulis, karena warna yang tidak terlalu mencolok.

[Jasa Epoxy Lantai](https://putrapandawa.com/jasa-epoxy-lantai/)

Kesimpulannya, template Twitter dengan tema gelap dapat memberikan beberapa keuntungan bagi pengguna. Ini termasuk mengurangi kelelahan mata, menghemat daya baterai pada perangkat mobile, memberikan tampilan yang lebih modern dan elegan, serta membantu pengguna untuk lebih fokus pada konten yang mereka baca atau tulis. Namun, keuntungan ini mungkin tidak berlaku untuk semua orang dan tergantung pada preferensi individu masing-masing. Oleh karena itu, Twitter memberikan opsi untuk memilih tema yang paling sesuai dengan preferensi pengguna. [Pesonaepoxy.id](https://pesonaepoxy.id/)
Comentários de códigos são ruins?
Published: 2023-03-01 18:43:43

---
title: Comentários de códigos são ruins?
published: true
date: 2023-03-01 00:00:00 UTC
tags: 
canonical_url: https://mariosouto.com/posts/comentarios-de-codigos-sao-ruins
---

Bom pra quem leu clean code, meio que essa pode parecer uma verdade máxima da programação. Eu discordo fortemente dessa afirmação.

Minha discordância vem do fato de que essa discussão passa próxima da discussão sobre documentação, em ambos os casos as pessoas vão dizer "ahhh mas isso vai mofar e ninguém vai atualizar".

Um ponto que muda tudo é você ter ciência do motivo da documentação: Você ta documentando O QUE o código faz ou POR QUE ele faz isso?

Convenhamos que O QUE o código faz é algo que você pode ver no próprio código, e se você não consegue entender o código, você não vai entender a documentação.

O POR QUE é algo que você não consegue ver no código, e que é muito importante para entender o código. E é aqui que entra a documentação.

Vira e mexe você cria uma função que combina objetos ou alguma coisa e existe um motivo pra isso ser do jeito que é. Pra mim esses são casos ótimos de documentação, e pra vocês?

Em resumo, comentários de códigos não são ruins em si, o que é importante é a qualidade e relevância da informação documentada. Documente o POR QUE, não apenas o QUE. #programação #documentação

E o que você acha sobre? Mandai que eu to curioso \o

<iframe width="560" height="315" src="https://www.youtube.com/embed/lTjwm1CghDY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

https://www.youtube.com/embed/lTjwm1CghDY
O que é um site? E Como é feito um site?
Published: 2023-03-01 18:44:14

---
title: O que é um site? E Como é feito um site?
published: true
date: 2023-03-01 00:00:00 UTC
tags: 
canonical_url: https://mariosouto.com/posts/o-que-e-um-site-e-como-e-feito-um-site
---

Eai, tem uma explicação mais curta? pra como fazer um site e o que tem por tras de um?

<iframe width="560" height="315" src="https://www.youtube.com/embed/KYk3RBdqGgk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

* * *

- YouTube - Link para assistir direto e compartilhar: [https://youtu.be/KYk3RBdqGgk](https://youtu.be/KYk3RBdqGgk)
- [Linkedin](https://www.linkedin.com/feed/update/urn:li:ugcPost:7036715156852097025/)
- [Tiktok](https://www.tiktok.com/@devsoutinho/video/7205596135203917062?lang=pt-BR)
- [Twitter](https://twitter.com/omariosouto/status/1630949530001702913)
- [Instagram](https://www.instagram.com/p/CpQDmFdgOau/)

* * *