teleren/devto huggingface dataset:
Arrow Function
Published: 2023-02-08 20:54:39

One of the things I like most about JavaScript is the arrow function. I find it to be a more concise way of writing functions, and I prefer it over the traditional function syntax. I think makes code easier to read and understand, and it can help make your code more concise. When working with async code, one of the most important concepts is the async function. An async function is a function that returns a promise. The async function can be used to make asynchronous requests to an API. In order to use an async function, you must first create a function that returns a promise. The promise can be created using the Promise object, or by using a function that returns a promise. Once you have a function that returns a promise, you can use the async function to make asynchronous requests.

The async function takes two arguments: a function that returns a promise, and a callback function. The callback function is called when the asynchronous request is complete. The callback function takes two arguments: an error object, and the data that was returned from the API. If the asynchronous request is successful, the data that was returned from the API is passed to the callback function. If the asynchronous request fails, the error object is passed to the callback function. The async function is a powerful tool that can be used to make asynchronous requests to an API. When used correctly, it can make working with async code much easier.

In order to understand what fetch post is, we must first understand what fetch is. Fetch is a promise-based API for making network requests. It is similar to XMLHttpRequest (XHR) but uses Promises instead of events.

Fetch post is simply making a POST request with fetch. In order to do this, we must pass in an object as the second argument with the correct properties. The first property is the url, which is where we are making the request to. The second property is the options object. This is where we set the method to POST and also set the body. The body is the data that we are sending with our request. Once we have made our fetch POST request, we can then do something with the response. The response object has a few different properties that we can use. The most important ones are the ok property and the json() method. The ok property is a Boolean that tells us if the request was successful or not. The json() method parses the response body as JSON. So, to sum it up, fetch post is simply making a POST request using the fetch API. We pass in the url and an options object with the correct properties set. Once we have made the request, we can check the ok property on the response object to see if it was successful. If it was, we can use the json() method to get the parsed JSON data from the response body.
O Gerenciamento de Memória no JavaScript
Tags: javascript, beginners
Published: 2023-02-08 20:19:29

A incrementação de mais variáveis e objetos num sistema, normalmente é um bom sinal. Pois possivelmente significa que está criando algo que pode ser utilizado por diversas pessoas. Mas ao mesmo tempo, o mal uso pode gerar muitos problemas. Com isso chegamos ao objetivo deste artigo, onde veremos mais a respeito de um processo do javaScript,mas que é essêncial um desenvolvedor saber o básico.


O Gerenciamento de memória é uma tarefa importante em programação, pois permite otimizar o uso dos recursos do sistema, evitando o desperdício e garantindo a eficiência e estabilidade do software.

Há um processo em segundo plano no mecanismo JavaScript chamado coletor de lixo . Ele monitora todos os objetos e remove aqueles que se tornaram inacessíveis. Mas é importante que os desenvolvedores tenham um entendimento básico sobre o funcionamento desse processo, para escrever códigos mais eficientes e estável, além de também evitar o vazamentos de memória.

O Garbage Collector é responsável por identificar quais objetos e variáveis não estão mais sendo utilizados no código e liberar a memória alocada para esses objetos. Isso é feito de forma periódica, mas pode ser forçado a acontecer a qualquer momento utilizando a função gc() do JavaScript.

Por exemplo:

```
function marry(man, woman) {
  woman.husband = man;
  man.wife = woman;

  return {
    father: man,
    mother: woman
  }
}

let family = marry({
  name: "John"
}, {
  name: "Ann"
});
```

Imagine que retiremos as referências:

`delete family.father;
delete family.mother.husband;`


O que vai acontecer? Retirando as duas referências que indicam o marido, ele é retirado.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy99z9qhlu91134qlu0y.png)
Com a imagem, talvez seja mais nítido como o processo ocorreu.

Na nova passagem do Garbage Collector ele apresentará apenas:

`family: objeto global`->`mother: objeto` -> `objeto: nome = An`


_Vale adicionar que gc() e rm() são diferentes: `gc` não exclui nenhuma variável que você ainda está usando, apenas libera a memória para aquelas às quais você não tem mais acesso (sejam removidas usando rm()ou, digamos, criadas em uma função que já retornou)_.

Alguns cuidados são importantes para evitar problemas de gerenciamento de memória no JavaScript. Por exemplo, evite criar referências cíclicas, ou seja, situações em que dois objetos se referem ao outro, pois isso impedirá que o Garbage Collector libere a memória alocada para esses objetos. Além disso, evite manter referências desnecessárias para objetos e variáveis, pois isso também pode levar a problemas de gerenciamento de memória.

Em resumo, o gerenciamento de memória é uma tarefa importante em programação, e no JavaScript ele é realizado pelo Garbage Collector. Entender como esse processo funciona e seguir boas práticas na escrita do código pode ajudar a evitar problemas como vazamentos de memória e garantir a eficiência e estabilidade do software.
Why Use React JS for Website Development
Published: 2023-02-08 20:06:17

A JavaScript library called React.js has revolutionized website creation. Due to its numerous benefits, it has grown to be a preferred option among developers. In this blog article, we'll go through the advantages of using React.js for website development.

1. **Simple to learn:** React.js is simple to learn, especially if you are familiar with JavaScript. It has a low learning curve and offers novice developers a soft introduction.

1. **Reusable elements:** Because React.js is a component-based framework, you can build reusable elements that you can use all around your website. This speeds up and improves the effectiveness of development.

1. **Document Object Model (DOM) virtualization:** React.js employs a virtual DOM (Document Object Model), a compact in-memory approximation of the real DOM. Due to the fact that just the essential modifications are done, updates to the DOM become quicker and more effective.

1. **Performance:** React.js has a reputation for being fast. React.js is a fantastic option for high-performance webpages because of the virtual DOM and fast updates.

1. **Large community:** The React.js developer community is sizable and expanding, and it is continually producing new tools and plugins. As a result, it's simple to locate resources and assistance when you need them.

1. **SEO-friendly:** React.js is SEO-friendly, which is crucial for any website that wants to be quickly identified by search engines.

1. **Flexibility:** React.js is versatile and may be utilized for a range of website development tasks, from simple websites to substantial online apps.

In addition to the numerous advantages of utilizing React.js for website creation, it's important to note that many well-known websites use this framework. Just a few instances are shown below:

- [Facebook](https://facebook.com): React.js was developed and is used extensively by Facebook.

- [Netflix](https://netflix.com): The popular video streaming service uses React.js for their website.

- [Airbnb](https://airbnb.com): The popular travel and lodging website uses React.js for their user interface.

- [Dropbox](https://dropbox.com): The popular file hosting service uses React.js for their web interface.

- [PayPal](https://paypal.com): The online payment giant uses React.js for their website.

These are only a few of the several well-known websites that make use of React.js. The widespread adoption of React.js attests to its adaptability, effectiveness, and simplicity. Therefore, React.js is a fantastic option if you're seeking a strong and popular framework for website building.

In conclusion, React.js is a strong and adaptable toolkit that has a lot to offer those creating websites. React.js is a fantastic choice for your next project, regardless of whether you are a novice or a seasoned developer. So give it a shot and see the impact it has on your website.

To get started: [React.Js](https://reactjs.org/)
Setup Prisma database ORM layer with NestJS in less than 10 mins...
Tags: nestjs, prisma, database, node
Published: 2023-02-08 20:04:58

Next video i am going to make on Setting up Prisma ORM layer with NestJS. 
Kindly watch my channel for more updates and videos related to nestjs and microservices. 

[My Channel](https://www.youtube.com/channel/UCj940L692xQtU-ngtFIqfNQ)
Google Launches Bard: The ChatGPT RIVALRY
Published: 2023-02-08 19:49:30

Google has announced the introduction of Bard, a conversational AI service that utilizes the company's Language Model for Dialogue Applications (LaMDA). 

CEO Sundar Pichai highlighted AI as a focus for the company, and the advent of Bard means that its AI features will be integrated into Google Search, assisting billions of daily searches. 

Unlike OpenAI's ChatGPT, Bard can provide information on recent events. A lightweight model version of LaMDA will be released first, with more AI tools to come in the coming months. 

Currently, Bard is only accessible to trusted testers.
Simple and fast tutorial write to optimize your task in development
Tags: development, docker, django, postgres
Published: 2023-02-08 19:42:59

I write this tutorial in linkedin profile but want share by here. 
The text are in portuguese brazilian, the next version i will write in english here.
https://www.linkedin.com/pulse/aplica%25C3%25A7%25C3%25A3o-django-docker-e-postgresql-carlos-andr%25C3%25A9-dantas-de-lima/?trackingId=JY9FwyyHRT6j2%2B0b7Yt%2BrQ%3D%3D
Python console interactivo (Ipython)
Tags: python, programming, tutorial, spanish
Published: 2023-02-08 19:21:31

Utilizar el prompt en python tiene varias formas utiles y su forma de interactuar mediante ella es dinamica. Existen varios entornos que pueden ser ejecutado el prompt de python.

IPython, viene ser un shell muy versatil, en la que puedes cambiar, regresar a funciones o clases completas creadas anteriormente ; al contrario de los otros solo se visualiza por cada linea.

Para poder utilizar este shell interactivo, instalaremos en un entorno.

```python -m venv .venv```

- instalar ipython

```
pip install ipython
```
- insertamos el nombre de shell


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

Otras cosas que puedes realizar es guardar todo el script que escribiste en un archivo.


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

El cual se visualiza de esta forma

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

En resumen, solo doy a conocer otra forma de programar o realizar pequeñas por el shell de python interactivo. Para mas informacion visite a la documentacion de ipython [command-line](https://ipython.org/ipython-doc/rel-0.11/interactive/reference.html).
Effortless Floating Labels for Inputs in Vue.js
Tags: webdev, tutorial, vue, javascript
Published: 2023-02-08 19:13:52

---
title: Effortless Floating Labels for Inputs in Vue.js
published: true
description: FormKit now ships with a 1st-party plugin for enabling floating labels in your project.
tags: webdev, tutorial, vue, javascript
cover_image: https://s3.amazonaws.com/cdn.formk.it/web-assets/articles/floating-labels-plugin-2.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-03 20:06 +0000
---

Have you ever seen those fancy floating label treatments on form inputs? They look something like this:

![FormKit floating label](https://s3.amazonaws.com/cdn.formk.it/web-assets/articles/floating-label.gif)

Wouldn't it be great if you could do that in your Vue projects in just a few lines of code? 

Well — you can!

## Setting up floating labels in your Vue Project

In order to quickly set up floating labels in our Vue project we'll be reaching for `@formkit/vue`, it's default theme from `@formkit/themes` and its floating label plugin from the `@formkit/addons` package — it's all free and open-source.

```sh
npm install @formkit/vue @formkit/themes @formkit/addons
```

Then in our Vue project, we'll install the supporting FormKit package and its floating label plugin.

```js
// main.js
import { createApp } from 'vue'
import App from 'App.vue'
// FormKit imports
import { plugin as formKitPlugin, defaultConfig } from '@formkit/vue'
import { createFloatingLabelsPlugin } from '@formkit/addons'
import '@formkit/themes/genesis'
import '@formkit/addons/css/floatingLabels'

createApp(App)
  .use(formKitPlugin, defaultConfig({
    plugins: [createFloatingLabelsPlugin({
      // set to true to have floating labels be the default.
      // otherwise, use the `:floating-label` prop
      useAsDefault: true
    })]
  }))
  .mount('#app')
```

That's it! Now when we create a `<FormKit />` input in the text family (things like `text`, `textarea`, `number`, `url`, `date`, etc) we will automatically have floating labels!

You can see it action and try it for yourself on the interactive FormKit playground: 

https://formkit.link/9d2b7db47b0ed4eb1f6f49e545779101

![FormKit floating labels across input types](https://s3.amazonaws.com/cdn.formk.it/web-assets/articles/floating-label-inputs.gif)

# Learn more about FormKit

FormKit is a free and open-source form framework for Vue.js.

Want to learn about FormKit and how it can help with form structure, validation, accessibility, and more?

- Check out the floating label plugin docs at https://formkit.com/plugins/floating-labels
- Join the FormKit Discord community for support, chat with the maintainers, and meet others using FormKit in their own projects: https://discord.gg/2q3UZkUQbR
Paracetamol.ts💊| #07: Explica este código TypeScript
Tags: spanish, webdev, typescript, programming
Published: 2023-02-08 18:40:26

## **<center>Explica este código TypeScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark> </center>

¿Cuál de las siguientes sintaxis de arreglo es la correcta?

```ts
const numeros: number[] = [1,2,3];
const nombres: Array<string> = ["Carlos", "Juan"]
```

- A. `Solo numeros`
- B. `Solo nombres`
- C. `Ninguna es correcta`
- D. `Ambas son correctas`

Respuesta en el primer comentario.

---
How to generate shareable link examples from GitHub to open in the DataWeave Playground
Tags: dataweave, github, mulesoft, programming
Published: 2023-02-08 18:32:30

This is intended as a short guide. For detailed instructions + video, please see [this article](https://www.prostdev.com/post/how-to-generate-shareable-link-examples-from-github-to-open-in-the-dataweave-playground).

## Prepare your GitHub repo

Inside the folder of your example, make sure you have the following folder structure:

```
folderExample/
  - inputs/
    - payload.json // or any other input files
  - transform.dwl // with your main script
  - // Add more .dwl files for custom modules
```

## Generate the link

Take this base URL to base your own link in:

```
https://dataweave.mulesoft.com/learn/playground?
projectMethod=GHRepo&
repo=<github-username>%2F<github-repo>&
path=<path-to-the-example>
```

> **Note:**
> 
> The `%2F` character is used to replace `/` to make the link url-safe.

Let's say that this `folderExample` was located in my `alexandramartinez` username and a `dw-scripts` repo. Then my URL would look like this:

```
https://dataweave.mulesoft.com/learn/playground?
projectMethod=GHRepo&
repo=alexandramartinez%2Fdw-scripts&
path=folderExample
```

## Real example

If you want to compare your link to a real example, take a look at this URL: https://dataweave.mulesoft.com/learn/playground?projectMethod=GHRepo&repo=alexandramartinez%2Fdataweave-scripts&path=functions%2FmaskFields

Which is based on this folder: https://github.com/alexandramartinez/dataweave-scripts/tree/main/functions/maskFields
Fix Symfony tests with PHPUnit 10
Tags: symfony, phpunit, testing, tests
Published: 2023-02-08 18:25:25

Maybe, In your Symfony project, you tried to run something as:

```terminal
$ php bin/phpunit
```

and you had as result this ugly message (or similar):

> PHP Fatal error:  Uncaught Error: Class "PHPUnit\TextUI \Command" not found in /var/www/html/yourproject/bin/phpunit:12
> Stack trace:
> \#0 {main}
>  thrown in /var/www/html/yourproject/bin/phpunit on line 12

Don't worry. Edit your bin/phpunit file and rewrite it with the following content:

```php
#!/usr/bin/env php
<?php

if (!ini_get('date.timezone')) {
    ini_set('date.timezone', 'UTC');
}


if (is_file(dirname(__DIR__).'/vendor/phpunit/phpunit/phpunit')) {
    define('PHPUNIT_COMPOSER_INSTALL', dirname(__DIR__).'/vendor/autoload.php');
    require PHPUNIT_COMPOSER_INSTALL;
   
exit((new \PHPUnit\TextUI\Application())->run($GLOBALS['argv']));
} else {
    if (!is_file(dirname(__DIR__).'/vendor/symfony/phpunit-bridge/bin/simple-phpunit.php')) {
        echo "Unable to find the `simple-phpunit.php` script in `vendor/symfony/phpunit-bridge/bin/`.\n";
        exit(1);
    }

    require dirname(__DIR__).'/vendor/symfony/phpunit-bridge/bin/simple-phpunit.php';
}
```

Happy codding!

------------


- Thanks to [simonjamain](https://dev.to/simonjamain/comment/25ien) for fixing my code.
6502 Code I wrote running on an actual NES.
Tags: nes, 6502
Published: 2023-02-01 02:29:24

---
title: 6502 Code I wrote running on an actual NES.
published: true
description: 
tags: NES, 6502
---

As I mentioned in my [December](https://tyrel.dev/blog/2022/12/advent-of-code-2022-end-of-year-updates.html) post on my own blog, I'm doing a 6502 course on [Pikuma.](https://pikuma.com/courses/nes-game-programming-tutorial)

I'm about 75% of the way done, and I think I need to circle back to some earlier stuff about how the PPU works, but it's super fun.

Over the holidays I was able to stop at my father's and pick up my old NES.
I swapped out the ZIF connector for a new one, and cleaned up some contacts on the RCA ports, and it works great!
Once I found out that it was working - I played Sesame Street ABC 123, as that's the only one I had up in my office - I ordered an EverDrive N8.
That came last week.

The pictures are tall due to how I took them, so sorry I'll attach them at the end of the post.

Once I got the [EverDrive N8](https://krikzz.com/our-products/legacy/edn8-72pin.html) I made sure it worked by playing a Battletoads ROM.
Battletoad tested - I then copied Atlantico.NES to my Everdrive.
Atlantico is the game that Gustavo is walking us through making in the current part of the course - not a real published game.
I loaded it up and HOLY COW - something I actually wrote in Assembly is running on real hardware.

If you want to watch the video, it's very simplistic at the 75% mark, this was before the Collisions chapter, and no sound yet.
[I posted about it on my Fediverse server](https://social.tyrel.dev/notice/ARxKt0GNrC0KJwvNsO>).

The feeling of getting something running, locally, and seeing it working on screen, despite being a programmer for ~~20 years, is AMAZING.
Writing code that executes on the system you grew up playing the early 90's, wow.

I do wish the CRT TV my wife had was square, things get cut off on it.
I even got a remote, so I could try to fix that in the menu, alas, only picture option is brightness.
(Not that I realistically thought I could scale it, CRT Pixels are only Pixels.


![A CRT TV screen with a game running on it. In 8bit graphics, the game is a ship sailing to the right, with planes flying to the left. Some missiles are shooting up.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifru2myc4uyruv7pcfer.png)

![An NES Console with the flap opened up. On top is a Zapper gun with another controller, both with cables neatly wrapped up. On the floor, plugged in, in front of the NES, is another controller. The Power LED is on.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xezd4y7q8vsu7aplicn.png)
airbox.dev is launched
Tags: developer, tools, programming, productivity
Published: 2023-02-08 18:15:27

After a month effort, I finally launched https://airbox.dev today. airbox is a developer productivity platform for finding the required tools and utilities for your programming needs.

airbox is 100% free and no registration is required. I am sure this will help reducing your time to find the right tools for your programming requirements.

This is a simple beginning. Lot more tools are on the way. Keep supporting me and suggests the tools that you require!

![airbox home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k69hkcvcax3f6zbd3jym.png)

> [www.airbox.dev](https://www.airbox.dev)

> Happy Coding
How to move your code from the DataWeave Playground to Visual Studio Code
Tags: dataweave, visualstudiocode, programming, tutorial
Published: 2023-02-08 18:15:14

This is intended as a short guide. For detailed instructions + video, please see [this article](https://www.prostdev.com/post/how-to-move-your-code-from-the-dataweave-playground-to-visual-studio-code).

## Set up Visual Studio Code

1. Install [Visual Studio Code](https://code.visualstudio.com/Download).
2. Install [Java 8](https://www.oracle.com/ca-en/java/technologies/javase/javase8-archive-downloads.html) and [Maven](https://maven.apache.org/download.cgi) (3.6.3 or higher).
3. Install the [DataWeave extension](https://marketplace.visualstudio.com/items?itemName=MuleSoftInc.dataweave) for Visual Studio Code.

## Export/open the code

1. From the [Playground](https://dataweave.mulesoft.com/learn/playground), click on **Export**.
2. Extract the .zip file.
3. Open this folder from VSCode **File > Open Folder**.

## Configure the layout

1. Open the input file from `src/test/resources/main/Playground/inputs`.
2. Open the `main.dwl` file from `src/main/dw`.
3. From the `main` file, click **Run Preview**.
4. Drag-and-drop the layout as you wish.
5. From the `main` file, right-click on the canvas and select **DataWeave: Enable AutoPreview** for the same functionality as the Playground.
The misery of Hacktoberfest's reward merch
Tags: hacktoberfest
Published: 2023-02-08 17:52:42

As you may know, one of the rewards you can choose from for participating in Hacktoberfest is the merch.

As some of you may also know, in the EU (or at least in France), there's a customs' tax for products coming from the US (and a few other countries).

And instead of ticking the "Gift" box (which makes sense, as that's what this essentially is), they always tick the "Others" box, which forces you to pay Customs Taxes for something you got for free, which is annoying af.

That's two years in a row, who knows if I'll want to keep this going.