teleren/devto huggingface dataset:
HomeBrew un gestor de paquetes para MacOS
Tags: macos, beginners, spanish
Published: 2023-07-04 20:27:05

HomeBrew es un gestor de paquetes especialmente diseñado para desarrolladores en sistemas #MacOS que es muy sencillo de ocupar ya que te ayuda a instalar desde NodeJS hasta cambiar entre diferentes versiones de PHP.


![Pagina de HomeBrew](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8y3d1iu4frs6bu6mss0s.png)

Para instalarlo es muy sencillo solo hace falta ejecutar el siguiente comando dentro de nuestra terminal. Homebrew instala cada paquete en su propio directorio, creando enlaces simbólicos a tus archivos dentro de /opt/homebrew (en Apple Silicon)


![Instalación HomeBrew](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vl13nmp9kow9sahvvxw.png)

Para instalar por ejemplo NodeJS en su última versión estable utilizamos el siguiente comando dentro de nuestra terminal una vez que hayamos instalado HomeBrew.


![Instalacion de NodeJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r68lrv5w7szi653g8h8h.png)

Y en el caso de PHP de la siguiente manera.


![Instalación de PHP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbounw64ztxky10fe8hx.png)

Si es que quisiéramos una versión en especifico lo único que tenemos que hacer es agregar un arroba seguido del numero de la versión del paquete en este caso se instala la versión 8.0 y versión 8.1 de PHP.


![Instalando diferentes versiones](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izla0z38waespn8khuig.png)

Para cambiar entre versiones es muy sencillo ya que solo tienes que eliminar el link simbólico y volverlo a crear, con esto puedes tener diferentes versiones viviendo dentro tu misma computadora. 
Lo cual es bastante útil cuando tienes diferentes proyecto con diferentes versiones.


![Cambiar entre versiones](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4xbqtpf3uj0tlg4fepk.png)

En cuanto a la seguridad es siempre va a los repositorios oficiales y además revisa la autenticidad de los paquetes con su marca de sha256 generada para que no estés descargando software que no sea 100% legitimo.

Si este articulo te gusto o aprendiste algo nuevo te agradecería que me apoyaras dando like y compartiendo para que esto llegue a más personas.
Running Containers in AWS: A Step-by-Step Guide
Published: 2023-07-04 20:20:22

Containerized applications are a revolutionary approach to software development and deployment. They are encapsulated in containers that include their entire runtime environment, ensuring consistent performance across different environments. Containerized applications are self-contained and include all the necessary files, code, runtime, tools, libraries, and settings. This eliminates the issues of software running differently in different environments.

The main advantage of containerized applications is their consistency across environments. They run the same way regardless of the deployment environment, whether it's a local setup, testing environment, or production server. Containers are lightweight, enabling quick creation, replication, and startup. They also provide isolation, ensuring that applications and their dependencies are separated from each other and from the host system, improving security.

Containers have had a significant impact on software development by making applications more portable and simplifying dependency management. They streamline the process of building, shipping, and running applications, ensuring that they perform as expected in different environments.

Compared to Amazon Elastic Compute Cloud (EC2) instances, containers offer several advantages. Containers provide consistency across environments, efficient resource utilization, greater density, and isolation. They are also highly portable, enabling the creation of scalable, distributed applications and microservices.

AWS provides several container services to manage containers in the cloud:

1. Amazon Elastic Container Service (ECS): A high-performance and scalable service for running Docker containers. It allows you to run and manage Docker containers across a cluster of EC2 instances.

2. Amazon Elastic Kubernetes Service (EKS): A managed service for running Kubernetes on AWS. It simplifies the deployment, management, and scaling of containerized applications using Kubernetes.

3. AWS Fargate: A serverless compute engine for containers that eliminates the need to manage underlying infrastructure. It works with ECS and EKS, allowing you to focus on application development rather than infrastructure management.

4. AWS App2Container (A2C): A CLI tool to transform .NET and Java applications into containerized applications. It automates the containerization process by identifying application dependencies, creating Docker images, and generating ECS task definitions or Kubernetes pod manifests.

Additionally, Amazon Elastic Container Registry (ECR) is a fully-managed Docker container registry provided by AWS. It allows you to store, manage, and deploy Docker container images seamlessly integrated with ECS and EKS.

The choice between these AWS container services depends on your specific requirements, the complexity of your application, and your team's expertise. Consider factors such as managed vs. unmanaged services, orchestration needs, simplicity, customization, and compatibility with existing tools and workflows.
Introduction to React Bootstrap
Published: 2023-07-03 14:36:30

As we set out to build our React applications, one common challenge we face is choosing a UI library. While there are numerous libraries available to help us create beautiful, responsive user interfaces, few offer the extensive set of components and styles as React Bootstrap does.

## What is React Bootstrap?

React Bootstrap is a powerful library that merges Bootstrap, a widely-used CSS framework, with React, a JavaScript library renowned for building impressive user interfaces. React Bootstrap essentially reimplements Bootstrap's components as React components, replacing the jQuery and JavaScript that Bootstrap typically relies on with state and props in React.

## Why Use React Bootstrap?

React Bootstrap has several key advantages:

1. Easier integration: Because React Bootstrap components are written in React, it simplifies the incorporation of Bootstrap in your React projects.

2. React-centric: It allows developers to use Bootstrap in a 'React way', meaning you can manipulate the UI using state and props, which aligns better with the React philosophy.

3. Modularity: React Bootstrap allows you to import only the components you need, rather than the whole of Bootstrap, leading to leaner, more efficient code.

4. Interoperability: You can use it alongside other UI libraries or with a custom-made UI, providing flexibility in design and implementation.

## Getting Started with React Bootstrap
To install React Bootstrap:

```
npm install react-bootstrap bootstrap
```
Import the Bootstrap CSS into your application:

```
import 'bootstrap/dist/css/bootstrap.min.css';
```
Then, you can import and use Bootstrap components in your React app:

```
import Button from 'react-bootstrap/Button';

// Your component
function MyComponent() {
  return (
    <Button variant="primary">Primary Button</Button>
  );
}
```

## Wrapping Up

React Bootstrap is a fantastic tool that allows us to leverage the power of Bootstrap while maintaining the React-centric approach. By offering a wide range of customizable components, it enables developers to create user-friendly and appealing UIs efficiently. React Bootstrap is truly a booster for your React projects. Happy coding!
Short note: strong types, pure, no tests, manual test scenarios, careful
Published: 2023-07-04 20:11:59

I think tests help with onboarding new developers and with guarding against mistakes that cause regressions. If you are careful enough with each PR, you should be able to discover all impacted code and regression test it manually.

If you are using pure functions and strong types, some obvious bugs will be prevented up front. I think a combination of these compiler checks   and having a collection of pages to describe common regression tests is sufficient to catch most bugs.
I was wrong about React
Tags: react, angular, nextjs
Published: 2023-07-04 20:03:29

Unless you've been living under a rock for the past year, you must have noticed the hype that was created around React, and specifically Next.js. Let's not be confused – there has been hype around React for a long time now. However, Next.js came in clutch just as people started looking for other options like Svelte or similar.

Somehow, everything that the React community creates becomes "the thing to use," even though it often already exists in a better and more stable version. But the React community always prevails. They instill this idea that you should not use anything that isn't React into the minds of many people who can't form their own opinions. These people, in turn, convince others, and that's how we end up where we are.

Or so I thought...

Despite all my preconceived notions and negative opinions about React and its community, I decided to give it a try. I initially despised the idea of writing JSX/TSX and having to use [something] for every darn thing...

It's been a few weeks into my journey, and it's difficult for me to admit, but I now actually prefer React over Angular, which I had been working with for over four years...

Here are some reasons why I changed my mind:

## It's Easy
After using React for just a week or two, I already feel very comfortable with it. Unlike Angular, I can find dozens of high-quality, well-maintained, and well-documented libraries to choose from for any task I need to accomplish.

## It's Natural
Although I used to advocate for keeping HTML and JavaScript separate, working with JSX feels surprisingly natural. In both frameworks, you can obtain a reference to a DOM node, but in React, it feels like a natural JavaScript operation rather than some magical process.

## It's Intuitive
Gone are the days of dealing with ng-content, ng-template, template outlets, and ng-containers. In React, you simply write plain JavaScript, and nothing feels like magic.

Lastly, React is not over-engineered. If you haven't worked with other technologies that utilize IoC patterns, you'll likely find Angular cumbersome and challenging to learn within the first 30 minutes of trying. While these patterns have their place, the simplicity of working without them, without experiencing any drawbacks, makes the choice easy for most people.

It's worth noting that the Angular team has likely noticed these things as well, as they've been making some great changes lately. However, one can't help but wonder if it's a bit too late?

I'd love to hear what others think about this. Please feel free to share your opinions in the comments.
AWS Fault Injection Simulator [FIS] #explained
Tags: aws, devops, chaosengineering
Published: 2023-07-04 20:01:30


- **Introduction:**

Ensuring the resilience and reliability of cloud applications is a critical aspect of modern software development. To help developers and operators test their systems' response to failures and improve their fault tolerance, Amazon Web Services (AWS) has introduced the AWS Fault Injection Simulator. This powerful tool allows users to simulate various failure scenarios in their AWS environments, helping them proactively identify and mitigate potential issues. In this article, we'll explore the capabilities of the AWS Fault Injection Simulator and provide a sample Terraform code to get you started.

- **Understanding AWS Fault Injection Simulator:**

The AWS Fault Injection Simulator is a fully managed service that allows you to inject faults into your AWS infrastructure. By simulating different failure scenarios, you can evaluate how your applications and systems respond under stress and ensure they gracefully handle failures. The simulator enables you to test the resiliency of your applications, identify potential bottlenecks, and validate your disaster recovery strategies.

- **Benefits of Using AWS Fault Injection Simulator:**

**1.** Proactive Resilience Testing: 

By injecting faults into your environment, you can proactively identify weak points in your infrastructure, applications, and configurations, allowing you to make improvements before real failures occur.

**2.** Realistic Failure Scenarios: 

The AWS Fault Injection Simulator provides a wide range of pre-built failure scenarios, such as network partitioning, instance failures, and throttling errors. These scenarios closely resemble real-world failures, ensuring accurate testing.

**3.** Fine-Grained Control: 

You have granular control over the fault injection process, allowing you to select specific targets, configure fault parameters, and customize the duration and intensity of the fault injections.

**4.** Automated Fault Injection: 

The AWS Fault Injection Simulator supports automation through integration with AWS Systems Manager Automation, making it easier to schedule fault injection campaigns, run experiments, and collect data.

---
**References:** https://docs.aws.amazon.com/fis/latest/userguide/what-is.html
Run Your Code On Different Browsers.
Tags: vscode, developers, browser, webdev
Published: 2023-07-04 19:43:14

When working on the editor (VSCode), you will have to run your code to see it displayed on the browser by going live.

Therefore, the majority of individuals indicate that when going live on VSCode, it automatically switches to Safari or Microsoft Edge, but they would want it to function on "Chrome" instead.

In this article, I will teach you how to run your live server on the browser of your choice.

## The Step-By-Step Guide

In several instances, developers have encountered situations in which they needed to execute their code on Chrome, but it kept redirecting them to either Microsoft Edge or Firefox.

As developers, There is no doubt that everyone makes use of their favourite browser for work.

Here are the steps you need to take to switch to your preferred browser.

• **Open your VSCode.**

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



• **Go to your settings.**

   On your VSCode, there is a settings icon at the bottom left of 
   the editor.


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


• **Open the settings Icon.**

   After clicking the settings icon, select "settings" from the 
   menu that appears.

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


• After clicking on settings, a search box appears on top of your 
   editor, which you will type "live server" into.


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


The first drop-down menu you get when searching for live server states: "Specify custom browser settings for live server...."



Don't worry, we are getting there already!



• The final step is clicking the drop menu where you see 
   different browsers, choose your default favourite browser and 
   that is it.


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




Easy right? I know it is.

Remember, I stated at the beginning that my favourite browser would be Chrome, which is why I chose it. It is not an issue if you opt to use a different browser (everyone has different preferences).

After that, close your editor and reopen it, then go live and see your code working on Chrome or any of the default browsers you have selected.

Additionally, I made a video that clearly demonstrates how to run your code on your preferred browser. Click the YouTube link below to watch.

https://www.youtube.com/watch?v=9y0oV5h9yug

## Conclusion

As a developer, you need to run/test your code on different browsers. This is called the "Cross Browser Testing".

It is a good idea to test your websites on different versions of browsers.

Feel free to message me on my Social accounts for any help.

[Twitter](https://twitter.com/tech_Olaide)

[LinkedIn](https://www.linkedin.com/in/oluwatobiloba-olaide-15102a200/)

olaideoluwatobiloba1@gmail.com
Python SDK for the Uniswap Universal Router - Latest Version just Released
Tags: python, blockchain, ethereum, web3
Published: 2023-07-04 19:34:45

Decode and encode easily swap transactions to the **Uniswap Universal Router**.

The latest version (v0.9.0) of this open source library has just been released and provide support for more features.

[Source on GitHub](https://github.com/Elnaril/uniswap-universal-router-decoder)

[Packaged on PyPI](https://pypi.org/project/uniswap-universal-router-decoder)

What functions of the UR would you like to see in the next release?
Typescript Library Template
Tags: webdev, javascript, programming
Published: 2023-07-04 19:33:07

# TLDR

I've created a Typescript library template that has some pre-configured boilerplate, you can find it here: https://github.com/komyg/library-template.

# The Template
This template uses:
 
- Rollup for bundling.
- ESLint and Prettier for linting and formatting.
- Jest for testing.

It is structured as a monorepo, with a `lib` package for the library and a `runner` package that is meant to call the library and thus enable manual testing during the development.

Please note that you must build the library (`npm run build -w lib`), before using it on the runner.

The library itself does not have any dependencies, and it can be imported in a browser or in a node application.
Editing a model in much with example
Tags: webdev, programming, productivity, aspdotnet
Published: 2023-07-04 18:58:59

To edit a model in MVC, you typically follow these steps:

1. Retrieve the existing model data.
2. Display the edit form populated with the current model values.
3. Accept the form submission and update the model with the edited values.
4. Save the updated model data.

Here's an example of how to edit a model in MVC:

1. Retrieve the existing model data:
```csharp
public class PersonController : Controller
{
    public ActionResult Edit(int id)
    {
        // Retrieve the existing person object from the database using the provided ID
        var person = GetPersonById(id);

        // Pass the person object to the view
        return View(person);
    }
}
```

2. Display the edit form:
Create a view called "Edit.cshtml" and populate it with the HTML form elements to display the person's properties. Use the Razor syntax to bind the form fields to the corresponding properties of the model.

```html
@model Person

@using (Html.BeginForm("Edit", "Person", FormMethod.Post))
{
    @Html.HiddenFor(m => m.Id)

    <label for="Name">Name:</label>
    @Html.TextBoxFor(m => m.Name)

    <label for="Age">Age:</label>
    @Html.TextBoxFor(m => m.Age)

    <input type="submit" value="Save" />
}
```

3. Accept the form submission and update the model:
```csharp
public class PersonController : Controller
{
    [HttpPost]
    public ActionResult Edit(Person updatedPerson)
    {
        if (ModelState.IsValid)
        {
            // Update the model with the edited values
            var person = GetPersonById(updatedPerson.Id);
            person.Name = updatedPerson.Name;
            person.Age = updatedPerson.Age;

            // Save the updated model data (e.g., update the database)

            return RedirectToAction("Details", new { id = person.Id });
        }
        else
        {
            // If there are validation errors, redisplay the edit form
            return View(updatedPerson);
        }
    }
}
```

4. Save the updated model data:
In the `Edit` action method, you retrieve the existing person object by its ID. Then, you update the person's properties with the edited values submitted through the form. Finally, you save the updated model data (e.g., update the database) and redirect to a different action or view, such as the person's details page.

This example assumes the existence of a `GetPersonById` method that retrieves a person object from the database based on the provided ID.

Note: Remember to handle validation errors appropriately. In this example, if there are validation errors (`ModelState.IsValid` is false), you redisplay the edit form, allowing the user to correct the errors.
Preventing unintended updates in MVC With Example
Tags: webdev, programming, productivity, aspdotnet
Published: 2023-07-04 19:27:47

To prevent unintended updates in MVC, you can implement various measures to validate and restrict the properties that can be updated. Here's an example that demonstrates some common techniques:

1. Use View Models:
Instead of binding directly to the actual model, use view models that only contain the properties required for editing. This allows you to have fine-grained control over the properties that can be updated.

```csharp
public class PersonEditViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}
```

2. Apply Model Binding Whitelisting:
Explicitly specify the allowed properties during model binding to restrict the properties that can be updated. This can be done using the `[Bind]` attribute in the action method parameter.

```csharp
[HttpPost]
public ActionResult Edit([Bind(Include = "Id, Name, Age")] PersonEditViewModel viewModel)
{
    // Rest of the code...
}
```

By specifying the included properties in the `Include` parameter, you explicitly whitelist only those properties that are allowed for binding.

3. Use Input Validation:
Apply input validation to ensure that the submitted values are valid. You can use data annotations, such as `[Required]`, `[Range]`, or custom validation attributes, to validate the properties of the view model.

```csharp
public class PersonEditViewModel
{
    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    [Range(1, 150)]
    public int Age { get; set; }
}
```

By applying validation attributes, you can enforce constraints on the submitted values and prevent unintended updates due to invalid data.

4. Retrieve the Original Model from a Trusted Source:
When updating the model, retrieve the original model object from a trusted source, such as the database, rather than relying solely on user-submitted data. This ensures that the model's sensitive properties are not modified unintentionally.

```csharp
[HttpPost]
public ActionResult Edit(PersonEditViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        var person = GetPersonById(viewModel.Id); // Retrieve the original model from a trusted source

        // Update only the allowed properties
        person.Name = viewModel.Name;
        person.Age = viewModel.Age;

        // Save the changes to the database

        return RedirectToAction("Details", new { id = person.Id });
    }

    // If there are validation errors, redisplay the edit form
    return View(viewModel);
}
```

By retrieving the original model from a trusted source, you ensure that only the intended properties are modified.

Implementing these techniques collectively helps to prevent unintended updates by validating user input, restricting the properties that can be updated, and retrieving the original model from a trusted source.