teleren/devto huggingface dataset:
Introduction to React: A Beginner's Guide to Understanding React and Its Core Concepts
Tags: react, beginners, webdev, tutorial
Published: 2023-07-03 03:00:11


Introduction:
React has revolutionized the way we build user interfaces by providing a powerful and efficient framework for building interactive web applications. Whether you are new to web development or coming from a different JavaScript framework, this beginner's guide will introduce you to the core concepts of React and help you get started on your journey to becoming a React developer.

What is React?
React is an open-source JavaScript library developed by Facebook. It is primarily used for building user interfaces (UIs) and focuses on creating reusable UI components. React follows a component-based architecture, allowing developers to break down complex UIs into smaller, manageable pieces called components.

Key Concepts in React:

Components: Components are the building blocks of React applications. They encapsulate the UI and logic of a particular part of the application. React components can be either class-based or function-based.

JSX: JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. It provides a concise and intuitive way to define the structure and appearance of React components.

Virtual DOM: React uses a virtual DOM (Document Object Model) to efficiently update the UI. The virtual DOM is a lightweight representation of the actual DOM, and React uses it to perform efficient diffs and updates, minimizing the number of DOM manipulations.

State and Props: State represents the data that can change within a component, while props (short for properties) are used to pass data from a parent component to its child components. Understanding how state and props work is crucial for managing the dynamic behavior of React components.

Lifecycle Methods: React components have lifecycle methods that allow you to perform actions at specific points in a component's lifecycle, such as when it is created, updated, or unmounted. These methods enable you to control the behavior and side effects of your components.

Conclusion:
In this beginner's guide, we have introduced the core concepts of React and provided a starting point for building React applications. By understanding components, JSX, the virtual DOM, state and props, and lifecycle methods, you are now equipped with the foundational knowledge to begin your journey with React.

React's popularity continues to grow, and with its vibrant ecosystem and vast community support, there are endless possibilities for building interactive and dynamic web applications. So, dive in, explore the documentation, and start building your own React projects. Happy coding!
updating compile for DevC++
Tags: cpp, developer, help
Published: 2023-07-03 02:10:21

I need to update the compiler in the DevC++ IDE. Maybe the tools/compiler options or the package manager is what I am looking for to do this task? I did look at the compilers for this IDE and they do seem to be a little bit on the older side, so it will not work with some of the newer features like supporting the string_view library! The documentation on how to update the compiler is non-existent as far as I can see!
syd/wt1v
What are the differences between tokens and stablecoins ?
Tags: stablecoin, tokens
Published: 2023-07-03 02:07:57


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

We lived in a world where everything could be called into question.

If before everything could be doubted and mistrusted, with the emergence of blockchain, people were deprived of the ability to doubt the part of information stored in the blockchain. The monopoly on trust used to belong to governmental structures, “independent” auditors, and banks. Now we have to trust stubborn numbers and impartial smart contracts.

Now anyone can create their tokens and back them with any kind of collateral or, on the contrary, declare that their tokens have no backing and only have a limited supply. And nobody has the opportunity to doubt in this. A token can soar in price simply because there are many people willing to buy it while the supply of tokens is low. The law of supply and demand still applies.

Blockchain provides transparency of numbers and algorithms, but many things need to be confirmed or disproven in real life and practice.

So what are the differences between tokens and stablecoins? Technically, there are no differences. We can take the same smart contract and deploy it on the blockchain, but name it a token in one case and a stablecoin in another.

The difference lies solely in what you declare. How you label what you have created. If you don’t say anything, it’s just tokens. If you claim that your tokens represent some real-world equivalent, then your token is called a stablecoin. And then you become the one who must confirm the claimed equivalent relationship.

As you understand, in the first case, nobody has the opportunity to doubt what has happened, but in the second case, your statement comes into play, meaning the human factor and connection to the real world. And any claims need to be verified. If the claims are confirmed, and the issuer truly backs their tokens with the declared collateral, the token ceases to be just a token and becomes a stablecoin.

The problem lies only in the lack of guarantees that the issuer will always fulfill the stated obligations.

However, over time, the same thing starts to happen with stablecoins as we see in the traditional fiat world with money when the obligations of the issuer are delegated to those who accept these currencies (as payment or salary). Stablecoins, like money, begin to live their own lives and often do not return with demands for their backing to their issuer. To be precise, with money, there is a complete delegation of requirements to those willing to accept them, as their issuers — central banks — have completely relinquished responsibility for their backing.

That’s why regulators are not fond of stablecoins because it replicates the functioning of modern money and payment systems.
🚀 Using ReactJS with Laravel!
Tags: laravel, react
Published: 2023-07-03 01:44:50

Hi Everyone!

1 Let's create a new laravel project.

```
composer create laravel/laravel app
```
2 Now we need to configure the server-side and client-side. First install InertiaJS, this is where the magic happens.
```
composer require inertiajs/inertia-laravel
```

```
npm install @inertiajs/react
```

3. Create a root template file named `app.blade.php`, in `resources/view` folder. Put the flags `@inertiaHead` and `@inertia`, like this

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.jsx')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>
```

> Remember to rename `resources/js/app.js` to `resources/js/app.jsx`

4 Speaking of app.jsx, let's get edited.

```javascript
import React from "react";
import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
        return pages[`./Pages/${name}.jsx`];
    },
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />);
    },
});
```
5 Next we need to setup the Inertia middleware. Type this command.

```
php artisan inertia:middleware
```

6 Let's register that middleware, go to `app/Http/Kernel.php` and put this as the **last item** in your "web" middleware group.

```php
'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],
```
7 That's all! Create a file named `Home.jsx` at folder `resources/js/Pages`

```javascript
export default function Home() {
    return (
        <h1>ReactJS with Laravel? Awesome!!</h1>    
    );
}
```
8 Don't forget to edit the route file in laravel, `routes/web.php`

```php
...
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home');
});
```

I hope you enjoy, bye!
LB
Unlocking JavaScript Magic: A Beginner's Guide to Closures
Tags: javascript, beginners, closures, flatironschool
Published: 2023-07-03 01:42:38



Closures in JavaScript are one of those concepts that can seem a bit elusive when you're just starting out. Yet, once understood, they unlock a whole new level of possibilities and make JavaScript a truly powerful and dynamic language. So, let's dive into the magical world of closures and demystify them!

## What is a Closure?

At its simplest, a closure is a function bundled together with references to its surrounding state, the so-called lexical environment. Put in other words, a closure gives you access to an outer function’s scope from an inner function. The term "closure" refers to the act of closing the function and its environment, encapsulating everything needed to execute the function later on.

## An Example of a Closure

Let's look at a simple example:

{% codepen https://codepen.io/Michae1Tanaka/pen/qBQjbXO %}


In the example above, if you click on the `JS` tab, `innerFunction` has access to `outerVariable` even after `outerFunction` has finished execution, thanks to closures.

## Why are Closures Important?

Closures are everywhere in JavaScript. Every time we create a function inside a function, we are potentially creating a closure. Here's why they are important:

1. **Data Privacy:** Closures allow variables to be kept private, creating a scope that’s inaccessible from the outside world.
2. **Function Factories:** We can create multiple functions using closures and not only encapsulate data but also behavior.
3. **Asynchronous JavaScript:** Closures are widely used in JavaScript for asynchronous tasks, callback functions, and event handlers where we need to maintain the state.

## Things to Remember About Closures

As powerful as closures are, it's important to remember a few key points:

- Closures have access to variables from three separate scopes: their own scope, the outer function's scope, and the global scope.
- Closures cannot access the arguments of outer functions.
- Be aware of the memory implications. Since closures capture and hold onto their outer scope, they can consume more memory than other functions.

## Wrapping Up

Closures may seem complicated, but once you understand the basic principle of how functions in JavaScript remember their lexical scope, you've grasped closures. They are one of the many ways JavaScript allows for flexible, powerful programming patterns.
如何在 elementary OS 安裝 Firefox Beta
Tags: firefox, linux
Published: 2023-07-03 00:52:43

## Firefox Beta

Firefox 除了一般的版本之外，還另外有 Beta、Developer、Nightly 版，這些額外的預覽版本是用來供應給網頁開發者等等的早期用戶，這些早期用戶可以透過預覽版的 Firefox 來測試新的網頁技術，當然既然是預覽版那麼它們的穩定性一定是不如一般版的，喜歡嚐鮮或工作上對新的網頁技術有需求的朋友可以斟酌安裝。

## elementary OS

elementary OS 是以 Ubuntu Desktop 為基礎，再改用 elementary OS 自己的桌面環境而來，提供了比原本 Ubuntu Desktop 更美觀也更友善的桌面體驗，並且依然保留了 Ubuntu 的系統架構與沿用 Debian 流派的套件管理系統 APT，所以網路上對 Debian / Ubuntu 的文章大多也可以適用於 elementary OS。

## PPA

前面提到過 elemantary OS 是基於 Ubuntu 的，並且也是用 APT 作為套件管理系統，因此若要安裝普通版的 Firefox，則只要一行簡單的指令：

```sh
$ sudo apt install firefox
```

因為普通版的 Firefox 有被收錄在 Ubuntu 的套件庫內，而 elementary OS 也是有沿用 Ubuntu 的套件庫，才能安裝的這麼輕鬆寫意。

然而如果想嘗試 Firefox Beta，你會發現好像有難度，在 Firefox Beta 的下載頁雖然有列出 Linux 版的下載包，但是它只提供 .tar.bz2 的壓縮包，雖然解開免安裝就可以用，但並未整合入 elementary OS 的 app 選單內，有點像以前 Windows 上的綠色軟體，但這不是我想要的，本人還是較偏好與 OS 能夠做到整合的做法，因此我們必須手動把 Firefox Beta 的 PPA 套件庫加入系統內。

PPA，即 Personal Package Archive，是讓任何大眾可以寄存自己的 DEB 套件的平台，最大的 PPA 平台 Launchpad 也是由 Ubuntu 背後的公司 Canonical 所營運的。

[Firefox Beta PPA 的專案頁面](https://launchpad.net/~mozillateam/+archive/ubuntu/firefox-next)。裡面的說明有教導我們如何把這個 PPA 套件庫加入我們的 elementary OS 之內，依照頁面的指示加入 PPA 套件庫：

```sh
$ sudo add-apt-repository ppa:mozillateam/firefox-next
```

然後重整套件庫清單：

```sh
$ sudo apt update
```

最後安裝 Firefox Beta：

```sh
$ sudo apt install firefox
```

注意到，套件的名稱還是 `firefox`，也就是說這個 PPA 內的 Firefox Beta 的套件名稱還是 `firefox`，並且取代了原本 Ubuntu 套件庫的那個普通版的 `firefox`。

安裝完之後我們的系統內的 Firefox 應該就會被取代成 Firefox Beta。
Solutions Architect – Professional Certification Preparation for AWS
Published: 2023-07-03 00:33:55


![AWS Certification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoyznyyln3to18iwfx27.png)

More informations coming soon ...


**Reference**

https://aws.amazon.com/pt/certification/
https://d1.awsstatic.com/training-and-certification/docs/AWS_certification_paths.pdf
https://aws.amazon.com/pt/certification/certified-solutions-architect-professional/?ch=tile&tile=getstarted
https://aws.amazon.com/certification/certified-solutions-architect-professional/?nc1=h_ls

**Exam guide**	

https://d1.awsstatic.com/training-and-certification/docs-sa-pro/AWS-Certified-Solutions-Architect-Professional_Exam-Guide.pdf

**Sample questions**
	
https://d1.awsstatic.com/training-and-certification/docs-sa-pro/AWS-Certified-Solutions-Architect-Professional_Sample-Questions.pdf

**Training**

https://explore.skillbuilder.aws/learn/course/external/view/elearning/14951/exam-prep-aws-certified-solutions-architect-professional-sap-c02

https://explore.skillbuilder.aws/learn/course/external/view/elearning/13270/aws-certified-solutions-architect-professional-official-practice-question-set-sap-c02-english
Formatting Node.js codebase with Prettier
Tags: javascript, node, typescript, prettier
Published: 2023-07-03 00:24:19

---
title: Formatting Node.js codebase with Prettier
published: true
tags: ['javascript', 'node', 'typescript', 'prettier']
canonical_url: https://sevic.dev/notes/formatting-prettier/
---

Formatting helps to stay consistent with code style throughout the whole codebase. Include format script in pre-hooks (pre-commit or pre-push). This post covers Prettier setup with JavaScript and TypeScript code.

Start by installing the `prettier` package as a dev dependency.

```bash
npm i prettier -D
```

Specify rules inside the `.prettierrc` config file.

```json
{
  "singleQuote": true,
  "trailingComma": "all"
}
```

Add `format` script in the package.json file.

```json
{
  "scripts": {
    // ...
    "format": "prettier --write \"{src,test}/**/*.{js,ts}\""
  }
}
```

### Notes

If you use Eslint, install the `eslint-config-prettier` package as a dev dependency and update the Eslint configuration to use the Prettier config.

```json
{
  // ...
  "extends": [
    // ...
    "prettier"
  ]
}
```

Using Visual Studio Code, you can install a `prettier-vscode` extension and activate formatting when file changes are saved.

### Boilerplate

Here is the [link](https://sevic.dev/nestjs-starter) to the boilerplate I use for the development.
is_expected RSpec ActiveRecord matcher
Tags: rspec, rails, ruby
Published: 2023-07-03 00:01:07

Hi, it's a super short and however helpful post about custom RSpec AR matcher. Do you like the conciseness of the code like me?

I like tests that use the simple `is_expected` method. Take a look at the differences:

```
subject { 1 == 1 }
```

```
it { is_expected.to be_true }
```

instead of

```
expect(subject).to be_true
```

Maybe in this example, the problem is not so evident, but take a look at the following example:

Suppose we have validation on Post.title presence

```
subject { Post.new }
```

```
expect(subject.errors.of_kind?((:title, :presence))).to be_true
```

https://api.rubyonrails.org/classes/ActiveModel/Errors.html#method-i-of_kind-3F

Looks weird? So it would be cool if we could make it more expressive, right, for example like this:

```
it { is_expected.to has_errors(:title, :presence) }
```

To do this way is super simple. Take a look at custom matchers: https://rspec.info/documentation/3.0/rspec-expectations/RSpec/Matchers

As a reference, you may copy code from my open-source project:

https://github.com/woto/hub/commit/c45db2b33e85cec3fbbb69dfb3fac23a53d28051#diff-426a7f720d57b5501d595e6b1be7cb844598ebe8a4b584d32f1268b6056f3d2bR57

What do you think? May be I should even create gem with this feature? Or may be it's already exists and I don't hear about it?!
a secret code, try to crack it :D
Published: 2023-07-02 15:26:08

startstartE48AzrHPJ3E9KiRMI43SwE6A0MzGk/hxMfsYAVg4uscsNt1js+3SVXSa+Qw7NFQQ5qzHUrm76fsjrDn9JdXMz5tZgmqxPlJRJwuaSo6tzB+4oekC9E9//a8gr+hADdh5HYLUODrvDYRZslnZAMTCBPqjZJ0yLCjurZzZ7z15yTgdgyuKNsUsFNbHtfuQ5RVG/CGIZmEfhN/unf7nUUhf9AKV6QTCzGvUknTA9mpkNWrih0p3RrsVVyGnMmax05PFUUVe+FJtTVaGAncV1xk2fKYvF7s6QJ/dAVGFBvObNGqH3PnpXKu9FZVnYWzkIFrscBtXhowWFlYJQe0LZby7uo8k2/VOKk908d4lxoztZeBhLNbBtZaFyN1nspu5R7c1Pqnc4rr50aRy4kvx/U2V+1ypAoX4p4ABHKfOACpkmio1en2dsGPy8R7B7ZyqpRHQaTbNb08BYdzpHEulUpS6X5mcO3zA8RLgs/p3uGZIi99CoBc1UMgxZOIHCEpFpqxdRJvDxmCaxaDYhxFrFSkTRxc9fSw+2P/wCrr3/i+mVDGgPsNLsghJtUtr5dY1riPnYOilMAoPugzWgMS3cXrkkeQYIH98vZe/DfgHRfb/mwSDSvci3yDNMCZpZGIIV8zd/ILNODam6um1fWLx8LzSt+9bCzny0T4EFYIfZAnC6JOt0qA7HJwYp9OPH64i/FyawBoFApYn3CbuLcMQIk9Ba+I7xZM/RFWWrkpALw4urqnzSXTybeeo5cTNnXhYaehNoPU7i/Cw74ZFnfjzDL7p0+VE7JoRtUDBX9gdYjzC/TnlCnQQ4bk7Qi4d3mo/dp9KHVGcF0ykSrt9Xl4/RglmB5eS3134oV0Nehf0gJZFIaaomtU4XPa2bA5HLhcILt0PsOjPyzGJOpQvekbTUulcfMoAvYEFz0pcbqR5m0o4IGODe/mHwq/5AUbFmDZKurzlXJdRdOCo2sHSJqjOxdAHaY5BQGjw18DMlX76dsZ0UcCIif5Ck2rV0VY/FwjeZK3exim2RqTFqqEEltRf3Wf7MNcQSxz1nWelq27K+tkNAEo3cVMfC2MihKd02yqyB/qk2DoS3Eg7t+YJKIIhHpKsiNYN7bakTjiCxB6DIOjHOC3qK4OYNIiFJxy+ktwuezlGbua7tSN+ZsW5toHChqfc4VirnqtbRei5seBMFVX0RtvBLF7eXjWHn+HDlqr+qP9pPf5ZecYY+tSDCBs2PLAK00JUO0A8D5QDR1iWqV5zLHhqj3LqxsHAgKd/DmlMoZnOY2CZsu2ADWeO8HUcuHZFJCzTM0X2bMKVe0DmBz32GgM=endend
What information do you need when looking for a developer tools?
Tags: tooling, programming, coding
Published: 2023-07-02 23:19:13

Hi everyone.
Would love to ask..
"What information do you need when looking for a developer tools ?".

I built a list of developer tools site around 1 year ago at https://finddev.tools/

I normally bookmark the tools I want to take a look later, but I guess it's more useful when I share it to the public.

Currently listing site like ProductHunt, G2, alternativeto , etc..
are focusing on general websites/apps.

So I create a site that focus for developer only.

Right now I'm showing this info:

pricing
features
Since that two things what I would normally compare between tools before deciding what to use for my project.

I need a feedback, to make it more useful for fellow developers
What would you like to add when looking for alternative/comparison for a programming tools?

Thanks for your time and suggestion!

[Link: List of developer tools](https://finddev.tools/)
🚀 Descifrando el Enigma de la Memoria en Programación con python
Tags: beginners, python, programming, development
Published: 2023-07-02 22:36:49

¡Hola de nuevo, amantes de la programación! 🎉

Hoy, vamos a adentrarnos en el fascinante mundo de la memoria en la programación. Te sorprendería cuánto podemos optimizar nuestros programas simplemente comprendiendo cómo funcionan las cosas bajo el capó.

La memoria en una computadora es donde se almacenan todos los datos mientras tu programa se está ejecutando. Cuando creas una variable en tu código, estás solicitando un pequeño espacio en la memoria para almacenar un valor.

### Variables y Asignaciones

Comenzaremos con lo básico. Mira el siguiente código en Python:

```python
a = 10
b = a
```

Aquí, cuando decimos `a = 10`, estamos almacenando el valor `10` en la memoria y `a` es básicamente una referencia a ese lugar en la memoria. Cuando decimos `b = a`, `b` ahora apunta al mismo lugar que `a`. Así que, si cambiamos el valor de `a`, `b` permanecerá como está, porque estamos creando un nuevo espacio en la memoria para el nuevo valor de `a`.

```python
a = 20
print(a) # Imprime: 20
print(b) # Imprime: 10
```

### Listas

Las cosas se ponen más interesantes con las estructuras de datos como las listas. Mira el siguiente código:

```python
lista1 = [1, 2, 3, 4, 5]
lista2 = lista1
```

Aquí, `lista1` y `lista2` apuntan a la misma lista en la memoria. Así que, si cambias un elemento de `lista1`, ese cambio se verá reflejado en `lista2` también.

```python
lista1[0] = 10
print(lista1) # Imprime: [10, 2, 3, 4, 5]
print(lista2) # Imprime: [10, 2, 3, 4, 5]
```

Si quieres que `lista2` sea una copia de `lista1` pero no apunte al mismo objeto, necesitas crear una copia de la lista, lo cual puedes hacer con el método `.copy()` o cortando la lista (`[:]`).

```python
lista2 = lista1.copy()
# o
lista2 = lista1[:]
```

### Funciones y memoria

Cuando pasas una variable a una función, Python pasará ese valor, creando una nueva referencia a ese lugar en la memoria. Para variables simples como enteros o flotantes, esto no tiene mucho efecto. Pero para las listas, si modificas la lista dentro de la función, esos cambios se verán reflejados en la lista original.

```python
def agregar_elemento(lista):
    lista.append(6)

lista1 = [1, 2, 3, 4, 5]
agregar_elemento(lista1)
print(lista1) # Imprime: [1, 2, 3, 4, 5, 6]
```

Entender cómo funciona la memoria puede ayudarte a escribir código más limpio y eficiente. Te permite prever cómo se comportarán tus variables y funciones, especialmente cuando trabajas con estructuras de datos más grandes. Recuerda, un buen programador no solo hace que las cosas funcionen, sino que también se esfuerza por hacer que su código sea fácil de leer y eficiente. 

¡Hasta la próxima, y feliz codificación! 👩‍💻👨‍💻💻`
Nextjs my first opinions
Tags: react
Published: 2023-07-02 21:26:57

We didn’t get along, I’ve tried and tried to enjoy react and nextjs and I just can’t shake the idea that I’ve had a better time developing in sveltekit or vite which detracts from the fact that every job right now wants this framework 🤒 it worries me. Perhaps it’s the level of prescription and magic or the fact that as soon as you start to tinker it becomes quite unstable and not productive… I have need of a little wiggle room I wasn’t asking for much.

Anyway that’s just my opinion right now I’ll try again next week with some more training under my belt.
The 23rd Day of the 100 Days of Code challenge
Published: 2023-07-02 21:15:30

Today, I took the day a bit easier. I tested all the different ways I used to implement Speaker Diarization in my real-time transcription app and I decieded to use the approach that made use of the deep-speaker library as it was the most accurate. Surely there are more things I could do to achieve better accuracy, but there's a working demo now that improves upon itself.

I also made it so that it's possible for the user to request real-time transcription without diarization, which I made use of right there and then. I reduced the minimum buffer time (accumulated audio chunks) to one second before transcription and it looks good.

By made use of, I mean that I implemented it in my project that makes restaurant reservations over the phone. It still doesn't have the actual calling functionality, but it will connect to the server, stream the audio and receive real-time transcription as the waiter taking the reservation is speaking. I believe that this will allow for reduced latency, but only actual testing will show. I still have to check when the waiter starts speaking and when they stop speaking so that I can move on and finalize the transcription. For now, it looks promising.

Tomorrow, I'll upload a final demo along with the code for the restaurant project and the real-time transcription app itself which requires a lot of re-factoring.

That's it for today in which I didn't time myself with pomodoro sessions, just worked as it went on! That's what taking it easy is for me.

Happy coding everyone!
See y'all tomorrow!