teleren/devto huggingface dataset:
'Switch' is not exported from 'react-router-dom'
Published: 2024-03-06 04:11:34

##| error message |
SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=0634216f' does not provide an export named 'Switch'

##| tech |
Vite as the local server with TypeScript

##| solution |
In react-router-dom v6, "Switch" is replaced by routes "Routes". Here are the related updates you should make to your code:
update:

```
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
```
to:

```
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
```
update:

```
<Route path="/" component={Home} />
```
to:

```
<Route path='/' element={<Home/>} />
```

Other steps you may take to resolve this issue:

1) Check react-router-dom Version: Make sure that you're using the up-to-date version for 'react-router-dom'

2) Verify Import Statement: Double-check your import statement for the "Routes" component. 

3) Check node_modules Directory: Verify that react-router-dom is installed in your node_modules directory. You can navigate to your project directory and check if there's a react-router-dom folder inside the node_modules folder.

4) Check package.json: Open your package.json file and ensure that react-router-dom is listed as a dependency. It should look something like this:

```
"dependencies": {
    "react-router-dom": "^X.X.X",
    ...
}
```
Happy coding!
Eva

Reference: [https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom](https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom)
More recouce:
[https://reactrouter.com/en/main/upgrading/v5](https://reactrouter.com/en/main/upgrading/v5)
What is a Mechanical Comparator?
Tags: electronics, news
Published: 2024-03-06 03:14:04

Typically, comparators are utilized for linear measurements, and currently, there exists a plethora of types, each distinguished by their approaches to amplification and recording of measured discrepancies. Modern engineers strive to categorize comparators into high and low amplification groups, reflecting the complexities of the underlying technology. These categorizations are based on the amplification and recording principles employed, encompassing mechanical, mechanical-optical, electronic, electrical, pneumatic, as well as other variants like multi-check and projection comparators. These diverse comparator options afford users the flexibility to choose an appropriate and cost-effective solution tailored to specific metrological needs. This article offers an insight into a mechanical comparator, elucidating its functionality and practical applications.

Click [What is an Mechanical Comparator?](https://blikai.com/blog/components-parts/what-is-an-mechanical-comparator) to learn more
Thoughts about "keys" on React lists
Published: 2024-03-06 02:53:27

It's been a while... a LONG while....

This is a really short post about the `key` property on React components that are lists (i.e. arrays)...

I really like to get rid of all the React warnings about unique keys on lists.  You really want everything to have a unique key when it is part of a list so that things update reliably.

But when you get the warnings sometimes it can be difficult to work out which component in which list is the offender.

What I have found useful is to search anywhere you are using iterators (like `map` or `reduce`) and make sure you are composing a unique key on any component the iterator might return.

The other place to look is for any `.push` calls that might be creating the array with a component as the thing you are pushing and make sure they have unique keys.

Generally, I compose the `key` from part of the data and an index from the iterator.  If that is not unique enough, then I might also add a prefix or suffix to the `key` as well.

I like my keys to have a reasonably consistent format to them and separate sections of the `key` with a dash (hyphen).

Doing this should ensure you have consistent key generation and keep the keys all unique.
Which Industries That Benefit From A Warehouse Management System
Tags: webdev, devops, discuss, node
Published: 2024-03-06 02:46:28

The text you provided is a well-written and informative piece about the industries that benefit from a [Warehouse Management System](https://www.aegona.com/software-development/which-industries-benefit-warehouse-management-system) (WMS).

Here's a breakdown of its key points:

Businesses in various industries can significantly improve their warehouse operations and gain a competitive edge by implementing a WMS.

Specific Industries and Benefits:

- **Manufacturing**: WMS integrates with ERP systems for efficient production planning, precise inventory control, and optimized picking & packing.
- **Retail & Consumer Goods**: WMS facilitates omnichannel fulfillment, manages inventory across various locations, and optimizes picking routes for swift order fulfillment.
- **Food & Beverage**: WMS ensures proper storage and handling based on specific product needs, minimizing waste, maintaining accurate inventory, and enabling efficient traceability & recall management.
- **3PL**: WMS empowers 3PLs to manage diverse client inventories, provides real-time visibility for informed decision-making, and optimizes warehouse space utilization.
- Wholesale Distributors: WMS streamlines picking & packing for bulk orders, tracks inventory movement across distribution centers and allows for data-driven stock allocation decisions.

Additional Benefiting Industries:

- **Chemicals**: Ensures regulatory compliance and safe handling of hazardous materials.
- **Pharmaceuticals**: Upholds strict quality control measures and tracks sensitive inventory.
- **E-commerce**: Handles high order volumes efficiently and ensures fast, accurate deliveries.

Implementing a WMS can significantly improve efficiency, accuracy, and cost-effectiveness for businesses across various industries, ultimately strengthening their competitive edge in the evolving market.

**>> Read more:**

- [Software Development Based On InvenTree Open-Source](https://www.aegona.com/software-development/software-development-based-inventree-open-source)
- [Top 5 Inventory Management Software Development Companies In Vietnam](https://www.aegona.com/software-development/top-5-inventory-management-software-development-companies-vietnam)
9 Tips to Design An Eye-Catching Zine Cover
Published: 2024-03-06 02:22:32

When buying the zine, people always read the cover at first, so as to know the content of the zine. Once the cover successfully grabs the reader’s attention, that means your [cover design](https://chinaprinting4u.com/9_tips_to_design_an_eye-catching_zine_cover-472.htm) is useful. Some covers look mysterious, while others clearly show the message they want to convey. Some look attractive, while others look ordinary but still attractive.
The Bubble Sort Algorithm
Tags: programming, beginners, tutorial, learning
Published: 2024-03-05 22:46:27

## Intro

I recently took a data structures and algorithms course as part of my pursuit to learn lower level programming and computer science concepts. As the saying goes, the best way of solidifying your knowledge in something is to teach it, and since I've already filled my quota for boring my partner with coding talk for the month (probably the year), I thought I'd write a series of posts with some of the things I've learned. This is one such post.

## What is the Bubble Sort Algorithm

The Bubble Sort algorithm is typically applied where simplicity is favoured over efficiency. It has a time complexity of `O(n^2)` which is less than ideal when dealing with larger lists.

## How does it work

To explain how it works, here's some pseudo-code:

```
for pointer1 in list
	for pointer2 in list
		if list[j] > list[j + 1]
			swap list[j] and list[j + 1]
		pointer2++

	pointer1++

```

The idea of this algorithm is to 'bubble up' the larger items in the list to the end. We can think of this with 2 pointers, `pointer1` and `pointer2`. We start by setting both pointers to the first item in the list. We then go through the entire list with `pointer2` and swap the item at `pointer2`'s position if the item at position `pointer2 + 1` is greater in value. We keep repeating this process until we reach the end of the list. We then move `pointer1` up by 1 and we start the process again with `pointer2`.

You may have noticed that we need a way of avoiding checking items that we have already sorted. Seeing as the aim of each iteration is to move the larger items to the end of the list, we can do this by limiting the boundary of `pointer2` by the value of `pointer1 + 1`.

## How do we implement it

Here's a heavily commented implementation in Typescript:

```typescript
function bubbleSort(arr: number[]): void {
    // pointer 1
	for (let i = 0; i < arr.length; ++i) { 
       // pointer 2 + limit iterations by pointer1 + 1
		for (let j = 0; j < arr.length - 1 - i; ++j) {
			// check if current item is larger than the next item
			if (arr[j] > arr[j + 1]) {
				// temporarily store the current item so we don't lose it
				const tmp = arr[j];
				// swap the items in the array
				arr[j] = arr[j + 1];
				arr[j + 1] = tmp;
			}
		}
	}
}
```

## Sorted

This isn't a likely go-to algorithm in most cases, but I think it's a nice and easy one to get started. I hope you found it useful or, at least, a little bit interesting!
# 5 Estudos: Qual a diferença entre arquitetura de software e design de software?
Tags: software, designsystem, architecture, code
Published: 2024-03-06 02:16:43

Quando usamos esses termos pode parecer que se tratam da mesma coisa, mas fazendo uma analogia ao mundo real, podemos entender melhor essas diferenças.

Imagine que você é um arquiteto encarregado de projetar um prédio. Sua responsabilidade é criar o plano geral do edifício, decidindo quantos andares terá, onde estarão os elevadores e escadas, como será a distribuição dos espaços e como o prédio se integrará ao ambiente urbano ao redor. Você projeta a estrutura básica do prédio, considerando fatores como segurança, eficiência e funcionalidade. 

Isso equivale à arquitetura de software, onde envolve decisões sobre a estrutura básica do sistema, como a escolha da linguagem de programação, o estilo arquitetural (por exemplo, MVC, cliente-servidor, microservices), a distribuição de responsabilidades entre os diferentes componentes (por exemplo, front-end, back-end, banco de dados), a escalabilidade e a segurança do sistema.

Por exemplo, ao desenvolver um sistema de e-commerce, o arquiteto de software pode decidir usar uma arquitetura cliente-servidor, onde o cliente (o navegador da web do usuário) faz solicitações para o servidor, que por sua vez processa essas solicitações e retorna as respostas adequadas. O arquiteto também decide como os dados serão armazenados, como os diferentes módulos do sistema se comunicarão e como o sistema será escalável para lidar com um grande número de usuários simultâneos.

Agora, imagine que você é um designer de interiores contratado para decorar os interiores desse prédio. Sua tarefa é decidir como cada ambiente será organizado, escolher os móveis e acessórios, selecionar as cores das paredes e os tipos de iluminação para criar uma atmosfera agradável e funcional em cada espaço. Você se preocupa com os detalhes de cada sala, garantindo que seja confortável, esteticamente agradável e atenda às necessidades dos ocupantes. Isso representa o design de software, onde envolve detalhes específicos sobre como os diferentes componentes do sistema serão implementados e interagem entre si para alcançar os objetivos definidos na arquitetura.

Continuando com o exemplo do sistema de e-commerce, o design de software envolveria decidir como a página de produtos será exibida, quais informações serão exibidas em cada página, como o processo de checkout será implementado, como as informações do usuário serão validadas e como os pedidos serão processados e armazenados no banco de dados.
Cada componente do sistema, como o carrinho de compras, a página de perfil do usuário e o sistema de pagamento, seria cuidadosamente projetado para garantir que seja eficiente, seguro e fácil de usar para os usuários.

Em resumo, enquanto a arquitetura de software define a estrutura geral e as diretrizes de comunicação do sistema, o design de software se concentra nos detalhes de implementação e na aparência das interfaces do usuário. Em conjunto, a arquitetura e o design de software desempenham papéis complementares na criação de sistema.
21 Days of DevOps Interview - Day 9- How to secure your Linux system
Tags: linux, security, devops
Published: 2024-03-06 01:46:31



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mol0v683nte0krhfybgo.jpg)
Securing a Linux system involves a combination of good practices, configuration changes, and ongoing maintenance. Here are some key steps to securing a Linux system:
1️⃣ Regular Updates: Apply security patches with apt-get or yum to keep the system updated.
2️⃣ Minimal Installation: Only install the necessary packages to reduce vulnerability exposure.
3️⃣ Secure SSH: Increase security by changing the default SSH port, disabling root login, implementing key-based authentication, and adding two-factor authentication.
4️⃣ Disable Unused Services: Use systemctl to manage and disable unnecessary services.
5️⃣ Firewall Configuration: To secure service access and manage inbound and outbound traffic using iptables or ufw.
6️⃣ SELinux: Employ Security-Enhanced Linux to enforce access control policies.
7️⃣ Regular Backups: Secure your data with regular backups using rsync and tar, and ensure they are stored securely.
8️⃣ Vulnerability Scanning: Utilize scanning tools like OpenVAS and Nessus to identify and address vulnerabilities.
9️⃣ File Integrity Checkers: Monitor system files with AIDE or Tripwire for unauthorized changes.
🔟 Monitor System Activity: Use tools like top, ps, netstat, and ss to monitor your system in real time.
1️⃣1️⃣ User Privileges: Implement the principle of least privilege with appropriate user account management.
Securing a Linux system involves many components working together, and it's a continuous process. Following these steps can provide a good level of security, but it's also important to stay informed about new vulnerabilities and threats and to adjust your security practices as necessary.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/443niyy6o6r4boakesp8.jpg)

📚 If you're interested in more in-depth explanation of these topics, please check out my new book "Cracking the DevOps Interview"
https://pratimuniyal.gumroad.com/l/cracking-the-devops-interview
📚 content: https://github.com/100daysofdevops/Cracking-the-devops-interview-code/blob/main/book-content
To learn more about AWS, check out my book "AWS for System Administrators"
https://www.amazon.com/AWS-System-Administrators-automate-infrastructure/dp/1800201532/?_encoding=UTF8&pd_rd_w=xI51B&content-id=amzn1.sym.d0ebfbb2-6761-494f-8e2f-95743b37c35c%3Aamzn1.symc.50e00d6c-ec8b-42ef-bb15-298531ab4497&pf_rd_p=d0ebfbb2-6761-494f-8e2f-95743b37c35c&pf_rd_r=QP32TXADHZCEEW0GVVM3&pd_rd_wg=3LIjA&pd_rd_r=7d15b19d-2da7-4d1e-8782-5880812cc2a4&ref_=pd_gw_ci_mcx_mr_hp_atf_m
Differences Between AWS EC2 Instance:Start, Stop, and Restart Operation
Tags: aws, ec2, devops, cloud
Published: 2024-03-06 01:15:15


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

Many of us who use AWS often stop, start, or restart instances. However, only some realize differences in how these operations work.

🔄 Instance Reboot:
A reboot is equivalent to a restart operation on a traditional physical machine. It keeps the instance on the same host machine unless the host is unhealthy or has other problems. The instance keeps the same public and private IP addresses, and any data on the instance store volumes and Elastic Block Store (EBS) volumes remains intact.

❓How does it work
When a reboot command is initiated, the hypervisor sends a signal to the guest operating system to perform a soft reboot, which is a more graceful way to restart the system. The operating system will stop all running processes, flush any cached data to disk, and restart.

⏹️ Instance Shutdown (Stop):
Stopping an instance is like shutting down a physical machine. The instance is powered down and no longer running, so you're not billed for additional instance hours. The instance retains its instance ID, but all data in the instance store volumes is lost. The public IP address is released when the instance is stopped (unless associated with an Elastic IP), but the private IP address remains associated. When the instance is started again, it might be run on a different host machine.

❓How does it work
When a stop command is initiated, the hypervisor sends a signal to the guest operating system to perform a soft shutdown, which is a more graceful way to shut down the system. All the processes will be stopped, and any cached data will be written to disk. After that, the hypervisor will deallocate the previously allocated resources to the instance.

🏁 The key difference is that a reboot keeps the data on the instance, which will run on the same host (unless the host is unhealthy), while a shutdown stops the instance and deallocates its resources. Data in instance store volumes is lost, and when the instance is restarted, it may run on a different host machine.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8owkzdfh37q89263k1cg.jpg)

📚 If you're interested in more in-depth explanation of these topics, please check out my new book “Cracking the DevOps Interview”

https://pratimuniyal.gumroad.com/l/cracking-the-devops-interview

📚 content:  https://github.com/100daysofdevops/Cracking-the-devops-interview-code/blob/main/book-content
Spending a cozy time with Flexbox Froggy
Tags: beginners, productivity, learning, codenewbie
Published: 2024-03-06 01:12:05

Actually, I'm a CS student focused on web development with a full-time job. Sometimes, it's pretty hard to arrive home after long eight hours working in customer service and sit in front of a PC and study or even stay awake. In an attempt to relax my thoughts but keep my studying progress, I'm spending time playing [Flexbox Froggy](https://flexboxfroggy.com/), a cozy game to practice flexbox skills. I'm pretty recommend it!
Real-time text to speech conversation about friends and Ray Bradbury with my computer
Tags: ai, llm, stablediffusion, python
Published: 2024-03-06 00:36:19

---
title: Real-time text to speech conversation about friends and Ray Bradbury with my computer
published: true
description: Improvements to AI Runner (in-dev preview)
tags: ai,llm,stablediffusion,python
cover_image: https://img.itch.zone/aW1nLzExMTkwNjU1LnBuZw==/original/jeBT8%2F.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-03-06 00:26 +0000
---

{% embed https://www.youtube.com/watch?v=WyqbsoBvsL8 %}

## About this update

This video shows a conversation between myself and the AI. It uses SPD in order to achieve real-time text to speech generation. Previous videos have showed off TTS using Bark and SpeechT5 which sound more natural but take more processing power. Sentences generate fairly quickly with those models, but they can take upwards of 19 seconds to generate in the case of Bark or 2 seconds in the case of SpeechT5. This causes the conversation to lag and sound less natural.
spd is a build in system speech synthesizer so it sounds robotic, but its very fast. This makes the conversation feel more natural even though it sounds less-so.

This video also showcases updates to the drawing tools and I talk about over all performance improvements which I have made to the app.

---

## More information about AI Runner

AI Runner is an application that I have been developing for over a year. It is a multi-modal AI app which uses Huggingface libraries to serve up AI models locally from your own computer (no internet connection required after you've downloaded the models).

It gives you a ton of control over the content you can generate, uses Stable Diffusion for AI Art and more. 

The upcoming 3.0.0 version has been in development for around 7 months and aims to evolve the app from a Stable Diffusion art application into a multi-modal AI assistant.

AI Runner is free. The compiled 2.2.0 version [can be downloaded here](https://capsizegames.itch.io/ai-runner).

The [source code is here](https://github.com/Capsize-Games/airunner)

---

[Supporting me on Patreon will help to ensure development of AI Runner continues into the future.](https://www.patreon.com/w4ffl35)
A UITextView implementation for React Native that allows for full text highlighting/selection
Tags: reactnative, highlighting
Published: 2024-05-15 14:30:42

---
title: A UITextView implementation for React Native that allows for full text highlighting/selection
published: true
date: 2024-03-06 00:36:00 UTC
tags: ReactNative,Highlighting
canonical_url: https://reactjsexample.com/a-uitextview-implementation-for-react-native-that-allows-for-full-text-highlighting-selection/
---

## React Native UITextView
 ![A UITextView implementation for React Native that allows for full text highlighting/selection](https://reactjsexample.com/content/images/2024/03/Code_2024-03_15-31-27.jpg)

The Text implementation in React Native uses UILabel on iOS. Unfortunately, this prevents the user from being able to highlight text for selection. The only copy behavior that is possible is to copy the entire block of text.

UITextView however allows a user to highlight portions of the text block for copying, translation, or other native capabilities.

React Native UITextView takes advantage of UITextView to allow for both types of copying on iOS: highlight and copy or the current, UILabel behavior to just copy the entire block of text.

[View Github](https://github.com/bluesky-social/react-native-uitextview)

## License

MIT