teleren/devto huggingface dataset:
I had to create a Guest Mode mechanism in React.JS
Tags: webdev, beginners, react, learning
Published: 2024-06-06 21:34:22

## Introducing
As usual, in all of my previous projects I had to use some auth provider to do the authentication mechanism, but this case would be different, besides the usual case using an auth provider, I'd create a guest mode mechanism.

## My Use Case

if you are a logged user you can save a lot of projects into the app, but as a guest user can save only 1 project, also if guest users wants login, his project can be stored on DB.

## What solution did I apply?

I choose indexedDB to save all guest users data in the browser, and I counted with Dexie(https://dexie.org/docs/Tutorial/React) to helpe me.
Basically I created a hook to instance my indexedDB, and all of methods like add, update and remove, and then can use it anywhere.


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


the thing is, all data will be deleted if the user does or programatilly, this is amazing :)))))
Managing your GoDaddy domain with Route53
Tags: dns, route53, godaddy, aws
Published: 2024-06-06 21:13:42

This post explains how to use AWS Route53 to manage your external domain, such as GoDaddy. Simply follow these steps:


## Select your domain in GoDaddy

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

Verify the domain you own. The domain name is important, for example: **my-daddy-o.org**


## Create your Hosted Zone in Route53

Log in to the AWS Console and navigate to the Route53 service console. Then, go to the "Hosted Zone" section and click on "Create hosted zone".

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

Type your Domain name here (my-daddy-o.org) and select "Public" type.

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

After setting up your Hosted Zone, review the records and double-check the default NS and SOA records, especially the "NS" type record.

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

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


## Update your Nameservers on GoDaddy

Go to your GoDaddy domain, navigate to the "DNS" section, update the "Nameservers," and then click "Change".

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

In the new window, enter the values from your "NS" record in Route53. Be careful to not include the last dot. For example: `ns-777.awsdns-11.com.` → `ns-777.awsdns-11.com`

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


## Verify your domain

You can verify the complete application of your Name Server change by checking its propagation. This may take some time (minutes to hours). Use [whatsmydns](https://www.whatsmydns.net/#NS) to check for correct propagation.

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


## Validate a record

As an additional step, you need to create a new record on Route53 to validate its functionality.

In my case, I created an S3 Bucket to test a simple website. After configuring the bucket as a static website, I created a new record pointing to the website endpoint.

For this, I created a new record "www.my-daddy-o.org". Please verify that the URL resolves to your bucket.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipabjmxhqzb2ihlfl9mb.png)
Rails and Postgres
Tags: rails, postgres
Published: 2024-06-06 21:10:09

I'm slowly grasping the connection between Rails and Postgres. I'm starting to feel like this is the key to the Model-View-Controller system, but I'm still working on fully wrapping my head around this bad boy.

Luckily, I took copious notes during most Postgres/Rails lesson, and you can [read them here](https://github.com/brvarner/dpi-notes/blob/main/june5.md).

## Getting Started
You must first download [PostgreSQL](https://www.postgresql.org/), and follow the prompts to learn its console line commands.

You must start by initializing a database and then creating a table. 

When you create a table, you must include the fields and data types that all of your entries will have. Here's an example from the exercise in the course, where we created a contact book:

```
CREATE TABLE contacts (
  id SERIAL PRIMARY KEY,
  first_name TEXT,
  last_name TEXT,
  date_of_birth DATE,
  street_address_1 TEXT,
  street_address_2 TEXT,
  city TEXT,
  state TEXT,
  zip TEXT,
  phone TEXT,
  notes TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
```
The id field will always be a SERIAL PRIMARY KEY to indicate it should auto-increment and that this will be the primary key of your table. 

After creating your table, you can launch it to prime it for editing/access with the psql command, or by using rails db. 

To link your Rails project with your database, you have to edit your `database.yaml` file. Change `rails_template_development` on line 27 to your database's name and it'll find it on your computer. 

Also, you can access Rails' built-in database GUI by launching bin/server and navigating to `rails/db` in your project. From there, you can perform CRUD operations on data or observe.

### Models
You must interface with your database via a Model, which Rails provides as an easy way to structure your database actions. Models are Ruby classes that "talk to the database, store and validate data, perform the business logic, and otherwise do the heavy lifting".

These models inherit methods from Rails's built-in ActiveRecord class, which lets them do many different moves. Each model represents a single row of data, so they're named singularly after the name of the table (i.e. a model named Contact for a table named contacts). This naming convention helps Rails automatically locate the table that the model represents.

We can operate on the data several ways once we complete setup, but I'm calling it on Rails/Postgres until we do it next week as a class.
Identifying a typosquatting attack on "requests," the 4th-most-popular Python package
Tags: opensource, security, python, typosquatting
Published: 2024-06-06 21:01:46

An attacker published a Python package to the PyPI (Python Package Index) registry named requestn, a name that's very similar to the very popular PyPI requests library. This user even tagged the same latest version of 8.0, so this was clearly a typosquatting attack.

[Trusty](https://www.trustypkg.dev/) is a free-to-use software supply chain security monitoring platform that gives you insight into the safety of your open source dependencies. Trusty looks for certain patterns such as the proof of origin / source provenance mapping of a codebase to a package; the activity of the project and its authors; and the advanced textual / binary analysis of a package contents to discover malware, CVEs, and malicious code.

It came to our attention earlier today that a 3-day-old account, "Dmitry2001," published a Python package to the PyPI (Python Package Index) registry named `requestn`, a name that's very similar to the very popular PyPI `requests` library. The [requests library](https://pypi.org/project/requests/) has more than 30 million downloads a week. It is a hugely popular library in Python that simplifies making HTTP requests to interact with web services.

Trusty's threat analysis system, developed by Stacklok, was able to interpret the `requestn` package as suspicious, due to its close proximity to the popular `requests` library...

Read the full article by Luis Juncal & Luke Hinds [here](https://stacklok.com/blog/identifying-a-typosquatting-attack-on-requests-the-4th-most-popular-python-package)
Core Architectural components of Azure
Published: 2024-06-06 20:08:45

*Introduction* 
*Azure* is a cloud computing platform powered by Microsoft that helps to build business solutions to meet organizational needs. Azure enables businesses and developers to build, deploy, and manage applications and services through Microsoft’s global network of data centers.
It offers a wide range of cloud services, including computing power, storage, databases, machine learning, networking, analytics, and more.
Organizations can leverage Azure services to innovate, enhance efficiency, and achieve scalability based on pocket strengths.

**Core Architectures**  

The architecture of Microsoft Azure includes components such as compute, storage, networking, databases, identity and access management, security, and monitoring.

The architecture of Microsoft Azure comprises data centers housing physical servers, virtualized hardware, and a complex network infrastructure, facilitating the deployment and operation of cloud-based applications and services.

Azure architecture adopts a distributed, scalable, and elastic approach, allowing for on-demand resource allocation and dynamic scaling, unlike traditional IT infrastructures that often rely on fixed hardware configurations.

With Microsoft Azure, the hardware instructions are emulated by mapping of software instructions, this way, virtualized hardware can perform functions like “real” hardware by the use of software and the architecture of Microsoft azure is run on a server collection which is huge and networking hardware which are capable of hosting a collection of applications that are complex and can control the software operation and configuration on these servers.
FastAPI Beyond CRUD Part 7 - Create a User Authentication Model (Database Migrations With Alembic)
Tags: fastapi, api, python, programming
Published: 2024-06-06 20:07:21

In this video, we create the user authentication model using SQLModel but we approach this by using Alembic. This video demonstrates the steps to set up database migrations with Alembic when working with Async SQLModel.
{%youtube jPTJ0i1JM3I%}
> Dynamic SVG in Vue with Vite
Tags: codecapsule, vite, vue
Published: 2024-06-06 20:06:31

Let me show you a super useful implementation of Vite's [Glob Imports](https://vitejs.dev/guide/features#glob-import): creating a wrapper component for displaying SVGs.

---


This Vue 3 component below imports all files that
- are located in `/src/assets/svg` folder, and
- have `.svg` extension

```
// BaseSvg.vue

<template>
  <div v-html="svg" v-if="svg"></div>
</template>

<script lang="ts" setup>
import { computed } from "vue";

const props = defineProps<{
  name: string;
}>();

const modules = import.meta.glob("/src/assets/svg/*.svg", {
  query: "?raw",
  import: "default",
  eager: true,
});

const svg = computed(() => {
  return modules["/src/assets/svg/" + (props.name ?? "") + ".svg"] ?? null;
});
</script>

```
Here's what we need to do when we add a new SVG to the project:
1. Drop the file in the /svg folder
2. Import the BaseSvg component and use it in the template
3. Pass the filename we want to display, as the `name` prop.

```
// script
import BaseSvg from "@/components/BaseSvg.vue";

// template
<BaseSvg name="heart-icon" class="w-12 text-slate-500" />
```

---

💡**TIP**: Set each svg file's `width` and `height` to "100%", and `fill` (or `stroke`) to "currentColor". This will help with adding styles to the component. Eg.:

```
// heart-icon.svg

<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z" fill="currentColor"/>
</svg>
```

---

So, there you have it. This wrapper component comes really handy in projects that use many custom icons. It helps DRYing up the code and keeping maintenance at a minimum.

Good luck, and have fun using it!
What is Open Source Software (OSS)?
Tags: linux, opensource
Published: 2024-06-06 20:00:31

## What is open source software?
Open source software (OSS) refers to software that is distributed with its source code made available to the public. This allows anyone to view, modify, and distribute the software.
Sharing of software has gone on since the beginnings of the computer age. In fact, not sharing software was the exception, and not the rule. The concepts of open source software (OSS) long predate the use of the term.

This software are open for all. For instance it is **Free.** In English the word **FREE** has two meanings:
* Free as in free speech, freedom to distribute
* Free as in no cost, or as is often said, like "Free beer"
 
Use of OSS means source code is made available with a license which provides rights to examine, modify and redistribute, without restriction on the user's identity or purpose.

## Why use open source software?
The purpose of OSS is Collaborative Development. enables software projects to build better software. When progress is shared, not everyone has to solve the same problems and make the same mistakes. Thus, progress can be made much faster and costs can be reduced.
Having more eyeballs viewing code and more groups testing it leads to stronger and more secure code, as well. It is often hard for competitors to get used to the idea of sharing, and grasping that the benefits can be greater than the costs. But experience has proved this to be true over and over again.
Competitors can compete on user-facing interfaces (e.g. internal plumbing that everyone needs) so that end users still see plenty of product differentiation and have varying experiences.

## Successful OSS Projects:
* **Linux Kernel:** It is the basis of almost all of the world’s computing infrastructure, from the most powerful supercomputers to the largest number of mobile devices, based on Android, built on a Linux kernel.

* **Git:** Git is a distributed version control system that is used worldwide for an astounding number of collaborative products. It is also the basis of GitHub, which hosts more than one hundred million of open source projects repositories; GitLab, another easily available host, handles quite a few projects as well.

* **Apache:** Work on the Apache HTTP Server began in 1995. Today it is the most widely used web server with roughly one third of the market share (another open source project, nginx, has almost as many users).

* **Programming Languages:** Many computing languages are developed using open source methods. Examples of these languages include: Python, Perl, Ruby, Rust etc

* **GNU:** The GNU Project has provided many essential ingredients for virtually all modern computer technologies, under various versions of the GPL (General Public License). Some of the most prominent products emanating from the GNU are GCC, GBD, GLIBC, BASH, COREUTILS.
Callbacks vs Promises vs Async/Await Concept in JavaScript
Published: 2024-06-06 19:53:51

JavaScript (JS) provides several ways to handle asynchronous operations, which are crucial for tasks like fetching data from an API, reading files, or performing time-consuming computations without blocking the main thread. Let's explore the three main approaches: Callbacks, Promises, and Async/Await.


**What is a Callback ?**
A callback is a function passed into another function as an argument and is executed after some operation has been completed. Callbacks are one of the oldest ways to handle asynchronous operations in JavaScript

```
function fetchData(callback) {
    setTimeout(() => {
        const data = { user: 'John Doe' };
        callback(null, data);
    }, 1000);
}

fetchData((error, data) => {
    if (error) {
        console.error(error);
    } else {
        console.log(data);
    }
});

```

In this example, fetchData takes a callback function as an argument. After a delay of 1 second, the callback function is executed with the data.

**What is a Promise ?**
Definition: A promise is an object representing the eventual completion or failure of an asynchronous operation.It provides a cleaner way to handle asynchronous code, avoiding nested callbacks.

```
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { user: 'John Doe' };
            resolve(data);
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

```

**What are Async/Await ?**
Async and await are syntactic sugar built on top of promises. They provide a more straightforward way to work with asynchronous code, making it easier to read and write.


```
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { user: 'John Doe' };
            resolve(data);
        }, 1000);
    });
}

async function fetchUser() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

fetchUser();

```

**Conclusion**
Choosing between callbacks, promises, and async/await depends on your specific use case and the complexity of your asynchronous code. For simple tasks, callbacks may suffice. For more complex scenarios involving multiple asynchronous operations, promises or async/await offer better readability and maintainability.
DIGITAL ASSET FRAUD EXPERT KNOWN AS GEARHEAD ENGINEERS
Published: 2024-06-06 19:47:29

Growing up on a farm instilled in me a strong work ethic and a deep appreciation for the simple, yet demanding, rhythms of rural life. However, my aspirations always lay beyond the fields and barns of my upbringing. I yearned for something different, something that blended the new-age economy with the values I held dear. That path led me unexpectedly into the world of cryptocurrencies. I began my journey with an intense period of self-education. As a farmer's son, resources were not handed to me; I had to cultivate them myself. This drive to learn and adapt was pivotal when I chose to skip college, a decision that weighed heavily on my parents but felt right to me. Instead, I meticulously built and maintained a perfect credit score, which eventually allowed me to secure a $50,000 loan from the bank to start my own business. Rather than pursue a traditional route, I invested the entire sum into Bitcoin. This was in the early days of crypto's surge, a time both ripe with opportunity and fraught with risk.Remarkably, within just six months, my investment blossomed into $200,000. It felt like a vindication of my risky strategy and a testament to the potential of cryptocurrencies. Yet, as often happens in the volatile world of digital finance, my initial success caught the attention of less scrupulous parties. I was scammed out of $20,000, a severe blow that not only threatened my financial stability but also my confidence in the venture I had embarked upon. The situation worsened when I realized that the rest of my funds were also at risk.In my search for solutions, I stumbled upon GearHead Engineers experts. Skeptical yet desperate, I reached out to them, hoping that they could help secure what was left of my digital assets. The team at GearHead Engineers was incredibly professional and deeply understanding of the nuances of cryptocurrency security. They guided me through the process of securing my accounts and recovering what could be salvaged from the scam. Thanks to GearHead Engineers, not only was I able to secure my existing wallets, but I also implemented enhanced security measures to protect against future attacks. The experience was sobering but ultimately educational, reinforcing the importance of security in digital transactions and the need for vigilance in an increasingly connected world. This ordeal has taught me more than I could have learned in any classroom. It tested my resolve, challenged my understanding of digital finance, and forced me to confront the realities of engaging in high-risk investments. With my accounts now secure, I am cautiously optimistic about the future. My journey from a farmer’s son to a crypto investor has been unconventional but is a testament to the power of resilience and the importance of adapting to new opportunities while safeguarding one's investments.
Looking to hire talented Blockchain developers for building Crypto Betting Platform
Tags: web3
Published: 2024-06-06 19:44:17

Currently, we are working on crypto betting website development that is called Reject Rumble.
We just started Front-UI development but our previous Blockchain developer left from our team so we are looking for developers who has experience in Blockchain development.
Current platform supports only Solana network and can play only Dice game.
Therefore, we are planning to extend this platform that receive all cryptocurrencies and also add some betting games.
For this project, you need to have proven experience in React, TypeScript, Node.js and Web3.js.
If you are interested, then we can discuss more details.

Thanks Regards.
Async/Await keeps order in JavaScript;
Tags: asynchronous, javascript, api, react
Published: 2024-06-06 19:41:57

JavaScript is a single-threaded synchronous language, meaning it goes through the statements in the order they are written and processes one at a time.
```
console.log("cook!");
console.log("eat!");
console.log("clean!");

// cook!
// eat!
// clean!
```
If before the _cook!_ operation there was an asynchronous operation like fetching the recipe from an API, the program might not wait for it to complete before moving on to the _cook!_, _eat!_, and _clean!_ operations. This can result in out-of-order execution, like so:
```
fetchRecipeFromAPI(); // Assume this is an asynchronous function
console.log("cook!");
console.log("eat!");
console.log("clean!");

// Output might be:
// cook!
// eat!
// clean!
// (sometime later) Recipe fetched!
```
Well, we definitely need to get the recipe first, and then cook based on it!
To ensure the steps are executed in order, even if one of them is asynchronous, we can use **async** and **await** keywords. These little friends can help us write asynchronous code that appears synchronous, making it easier to understand and maintain.

There are 2 steps to use them:

1. Define the asynchronous function with the **async** keyword before it.
2. Use the **await** keyword inside your asynchronous function to pause the execution until the operation is completed.

In the following example:

- **fetchRecipeFromAPI** is an asynchronous function simulating a recipe fetch operation with a delay.
- **cook** is an asynchronous function that waits for fetchRecipeFromAPI to complete before continuing.
- **main** is an asynchronous function that ensures cook, eat!, and clean! happen in order.

```
async function fetchRecipeFromAPI() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("Recipe fetched!");
            resolve("recipe");
        }, 2000); // Simulate an API call with a 2-second delay
    });
}

async function cook(recipe) {
    console.log("start cooking with", recipe);
}

async function main() {
    const recipe = await fetchRecipeFromAPI(); // Wait for the recipe to be fetched
    await cook(recipe);  // Wait for the cooking to complete
    console.log("eat!");
    console.log("clean!");
}

main();

// Output:
// Recipe fetched!
// cook!
// start cooking with recipe
// eat!
// clean!
```
By using **async** and **await**, you ensure that the asynchronous _cook_ function completes before moving on to _eat!_ and _clean!_. This maintains the logical sequence of operations.

**Note:** If you try to get the value of an asynchronous function outside of it, It's always gonna be _Promise { <pending> }_, because JavaScript has no way of knowing what the result will be outside of that asynchronous process.

You can find the actual code in this [SandBox](https://codesandbox.io/p/sandbox/get-advice-app-react-7d2k9f?file=%2Fsrc%2FTest.js)