teleren/devto huggingface dataset:
🤖 How to Integrate BotPress Bot into Next.js 13 | 🚀 Step-by-Step Guide!
Tags: botpress, ai, nextjs, webdev
Published: 2023-08-09 20:48:42


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


## 🍕 Get the code here: 

[https://github.com/XamHans/botpress-nextjs](https://github.com/XamHans/botpress-nextjs)

⛔ Make sure that your bot is deployed! 

📹 Video Tutorial: 
https://www.youtube.com/watch?v=zUTFqEeA0NI&ab_channel=HayerHans

## 📚 Key Steps Covered:

- 🔗 Clone the repo with: `git clone https://github.com/XamHans/botpress-nextjs.git `

-  📁 cd into the folder and install the dependencies with yarn install

- 💻 start the application with yarn dev

- 📝 get the Botpress Webchat Snippet from botpress website

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

-  🧩 Navigate to the layout.tsx file. In the head section use the Script Component to init botpress

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

```
<Script
          src="https://cdn.botpress.cloud/webchat/v0/inject.js"
          onLoad={() => {
            initBotpress();
          }}
        />
```


---

```tsx
const initBotpress = () => {
    window.botpressWebChat.init({
      composerPlaceholder: "Chat with bot",
      botConversationDescription:
        "This chatbot was built surprisingly fast with Botpress",
      botId: "<YOUR_BOT_ID>",
      hostUrl: "<YOUR_BOT_HOST_URL>",
      messagingUrl: "https://messaging.botpress.cloud",
      clientId: "<YOUR_CLIENT_ID>",
    });
  };
```

- 🛠️ make sure that you type on top of the layout.tsx "use client" to make it a client component.

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

You have successfully integrated your bot into your next.js 13 app! 🎉
Programmatically generate files in Cypress tests
Tags: cypress, javascript, testing
Published: 2023-08-09 20:10:39

---
title: Programmatically generate files in Cypress tests
published: true
description: 
tags: cypress, javascript, testing
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-09 19:48 +0000
---

The Cypress documentation recommends using fixtures for file uploads, but cluttering up a repository with fixture files can feel gross. Ideally, the test suite could programmatically generate files on the fly that match the needs of a particular test.

You can use Cypress's `selectFile` method and a `Blob` to create file testing stubs that don't require an underlying fixture.

```js
cy.get('[data-testid="file-input"]').selectFile({
  contents: Cypress.Blob.createBlob([]),
  fileName: "picture.png",
  mimeType: "image/png",
  lastModified: Date.now(),
});
```

This code stubs out a basic file that can be used by a file input. The only property that Cypress requires is `contents`, but the other properties can be used on an as-needed basis. For example, the `mimeType` can be used if the input field has an `accept` attribute, and the browser will use the `mimeType` from the stub and behave accordingly.
A beginner's guide to RxDart
Tags: dart, flutter, beginners, programming
Published: 2023-08-09 20:07:46

**RxDart** is a reactive programming library for Dart and Flutter that provides a way to handle asynchronous and event-based programming using the principles of ReactiveX.

It brings the power of observables, observers, and operators to simplify the management of asynchronous streams of data.

If you are new to RxDart, here are some key concepts and tips to get started:

##Understanding Observables and Observers

**Observables** are sources of data that emit values over time. They can represent streams of events, user inputs, network requests, or any other asynchronous data source. **Observers**, on the other hand, listen to these observables and react to the emitted values.

##Key Concepts in RxDart

###Streams

In RxDart, an Observable is represented by a Stream. A Stream is a sequence of asynchronous events that can be listened to and processed.

###Subscriptions

When you listen to a Stream, you create a Subscription. A Subscription allows you to control the flow of events by canceling or pausing the subscription.

###Operators

RxDart provides a rich set of operators that allow you to transform, filter, combine, and manipulate streams of data. These operators provide powerful and expressive ways to handle complex asynchronous scenarios.

##Getting Started with RxDart

To use RxDart in your Dart or Flutter project, you need to add the rxdart package to your pubspec.yaml file and import it into your code.

```yaml

dependencies:
  rxdart: 
```

Once you have imported the package, you can start using RxDart in your project. Here's a basic example to help you understand the usage:

```dart
import 'package:rxdart/rxdart.dart';

void main() {
  final numbers = Stream.fromIterable([1, 2, 3, 4, 5]);

  final doubledNumbers = numbers.map((number) => number * 2);

  final subscription = doubledNumbers.listen(print);

  // Output: 2, 4, 6, 8, 10

  subscription.cancel();
}
```

In the above example, we created an Observable from an iterable of numbers. We then applied a transformation using the map operator to double each number in the stream.Finally, we listened to the resulting stream and print the doubled numbers. Don't forget to cancel the subscription to release resources when you're done with the stream.

##Further Learning and Resources

To deepen your understanding of RxDart, here are some recommended resources:

Official RxDart GitHub repository: https://github.com/ReactiveX/rxdart
RxDart documentation: https://pub.dev/documentation/rxdart/latest/
ReactiveX documentation: https://reactivex.io/intro.html

By exploring these resources and experimenting with RxDart in your own projects, you'll quickly grasp the power and flexibility that reactive programming with RxDart brings to your Dart and Flutter applications. Remember, practice and hands-on experience are key to mastering any new technology. 

Happy coding!🚀
Top 7 Next.js Animation Libraries in 2023
Tags: nextjs, react, productivity, devops
Published: 2023-08-09 19:57:47

Modern web applications demand captivating user interfaces that employ animations and transitions to engage users. Developers are continuously seeking innovative methods to implement UIs with dynamic elements, prompting the emergence of specialized animation libraries and tools. In this article, we will delve into the world of React animation libraries, discussing seven exceptional options to empower you in selecting the perfect fit for your project's needs.

**1. Framer Motion**

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

**2. react-spring**

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

**3. React-Motion**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w47fedhrxfgbst7pv2d.jpeg)
[](https://www.npmjs.com/package/react-motion)

**4. Remotion**

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

**5. React Move**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9qvq77jfcc6nntot0o4.png)
[](https://react-move-docs.netlify.app/#/)

**6. react-anime**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/duaa1nlkzthey0e5yk35.jpg)
[](https://www.npmjs.com/package/react-anime)

**7. React Awesome Reveal**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/945fo534rk7wr1hr07fn.png)
[](https://react-awesome-reveal.morello.dev/)

you can see more about next.js [Next.js 13.4 Fonts Optimization Step by Step 🔥](https://www.medcode.dev/blogs/nextjs-fonts-optimization)
The Significance of Log Management with ClearInsights.io
Published: 2023-08-09 19:00:17

ClearInsights offers a powerful solution for effective [log management](https://clearinsights.io/logging/), enhancing the benefits mentioned earlier:

**Security and Compliance:** ClearInsights aggregates logs, enabling rapid detection of security issues and simplifying compliance reporting.

**Troubleshooting:** The platform's advanced analytics help pinpoint errors, facilitating quicker issue resolution and system optimization.

**Forensics:** ClearInsights aids in detailed event reconstruction, assisting forensic investigations with comprehensive log data.

**Real-time Monitoring:** The platform provides real-time alerts, allowing proactive responses to anomalies, bolstering security measures.

**Optimization:** ClearInsights identifies performance bottlenecks, enabling fine-tuning of resources for optimal application functionality.

**Planning:** Through trend analysis, the platform assists in capacity planning by predicting resource needs based on [log data](https://clearinsights.io/logging/).

**Accountability:** ClearInsights centralizes logs, ensuring a complete audit trail of user activities and system changes.

With ClearInsights, organizations can streamline [log management](https://clearinsights.io/logging/), bolster security postures, and achieve operational excellence through data-driven insights.
CREATING A VIRTUAL MACHINE
Tags: azure, cloud, cloudcomputing, simpleproject
Published: 2023-08-09 18:59:38

The Microsoft Azure portal is what i'm going to employ.
**Step 1:-**

- Visit the Azure portal with the link [https://azure.microsoft.com/en-us/get-started/azure-portal] 

- Then i signed in with an already created account.

- Entered "virtual machine" in the search box on the Azure portal.


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


**STEP 2:-**

- Then i clicked on create after clicking virtual machine.

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


**STEP 3:-**

- I chose my subscription and created my Resource group, then filled in the instance details which required the virtual machine name i was trying to create.

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


**STEP 4:-**

- 
Then i left on default everything else while i provided a username and password of my choice.
 Also inbound port rules was selected as RDP and HTTP.

I left the remaining settings as default too, i then selected Review+create

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

It would take a few moments, then after a while the virtual machine would be deployed. Then i clicked on _GO TO RESOURCE_


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

Virtual machine was created. Then i clicked on connect; RDP; 
Then download RDP FILE

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

**STEP 5:-**

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


THEN FINALLY VIRTUAL MACHINE CREATED BELOW. 


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


THANK YOU
Bandit Level 10 Level 11
Tags: bandit, ctf, overthewire, writeup
Published: 2023-08-09 18:54:07

### Introduction

Bandit11 is the twelfth level of the OverTheWire Bandit wargame. In this level, we will learn how to decode base64 encoded data to retrieve the password for the next level.

### Steps

1. Open your terminal application.
2. Enter the following command to ssh into the remote server:

```
ssh bandit10@bandit.labs.overthewire.org -p 2220
```

1. You will be prompted to enter a password. Enter the password obtained from the previous level: `G7w8LIi6J3kTb8A7j9LgrywtEUlyyp6s` and hit enter.
2. You are now connected to the remote server and are able to execute commands.
3. To retrieve the password for the next level, enter the following command:

```
cat data.txt | base64 -d
```

1. The output of the command is the password for the next level `6zPeziLdR2RKNdNYFNb6nVCKzphlXHBM`.

Congratulations! You have successfully decoded the base64 encoded data and retrieved the password for Bandit12.
cwtune - CloudWatch alarm optimizer
Tags: aws, opensource, monitoring, devops
Published: 2023-08-09 18:35:38

{% embed https://www.youtube.com/embed/DzZH_EcHHqE %}

I'm excited to share our latest open-source tool, cwtune. If you're using AWS and struggling with multiple loud Cloudwatch alarms, this tool is designed to help. cwtune aids in refining your alarm settings, enabling you to efficiently detect issues while reducing unnecessary noise.

We're committed to giving you a better user experience and more restful nights. If we succeed in making your life easier, we'd appreciate a star on our GitHub page as a sign of your support. ⭐️

[github](https://github.com/availabl-co/cwtune)
Ruby on rails
Published: 2023-08-09 18:26:08

Here's a simple example of using Ruby on Rails in just a few lines:

```ruby
# Gemfile
source 'https://rubygems.org'
gem 'rails', '6.1.4'

# Terminal
bundle install
rails new MyApp
cd MyApp
rails generate scaffold Post title:string content:text
rails db:migrate
rails server
```

These commands set up a basic Ruby on Rails application, create a Post model with a title and content, and start a local server. Remember, this is a minimal example, and a real application would require more configuration and code.
How to add Firebase CLI to your Flutter Project- Fast Steps
Tags: flutter, firebase, flutterfire, macbook
Published: 2023-08-09 18:21:51

First of all a  quick _disclaimer_ this will be quick and short as well directly targeted at macOS users.
 What motivated me  to do this because I needed a TLDR version of doing this and it took time and various tabs to achieve. So this might help and save you some time

 
**Create and app** on [firebase](https://console.firebase.google.com/) enter your name of choice.

**Add firebase to your PATH** like so:
   on your terminal enter `nano ~/zshrc`
   add this to the list `export PATH="$PATH":"$HOME/.pub-cache/bin"` quit and save
 
**Install firebase tool with command**
   on your terminal enter `curl -sL firebase.tools | upgrade=true bash`

**Enter password(if any)**
**Login to firebase** 
 on your terminal enter `firebase login` this open your browser and ask for access to your firebase account.
 
**Activate firebase on your app**. On the directory of your flutter project.
on your terminal enter `flutter configure`
This configures all requirement onto your app. Confirm installation with  firebase --version 

**Add flutter_core package** to you app.


Thats it. Short right?? Now you can use most firebase services such as Firebase app distribution, realtime database etc.

Connect with me on [linkedIn](https://www.linkedin.com/in/chibueze-felix-ab0a0477/) and [twitter](https://twitter.com/) 😋
How Fast Does Your Website Need to Be?
Tags: devops, programming, datascience
Published: 2023-08-09 18:21:04

Hi, Devs!

We've published a [resource](https://newrelic.com/resources/white-papers/how-fast-does-your-website-need-to-be?utm_source=devto&utm_medium=community&utm_campaign=global-fy24-q2-How-Fast-Does-Your-Website-Need-to-Be?) on "How Fast Does Your Website Need to Be?" to better understand data, rules, and methodologies to help benchmark and improve web and mobile performance. 

👀 **To read the entire free recourse, [click here](https://newrelic.com/resources/white-papers/how-fast-does-your-website-need-to-be?utm_source=devto&utm_medium=community&utm_campaign=global-fy24-q2-How-Fast-Does-Your-Website-Need-to-Be?).**

_-Daniel_
Format on save with IntelliJ Idea using macro and code style
Tags: intellijidea, java, codestyle, productivity
Published: 2023-08-09 18:19:26

Una de las características útiles de IntelliJ IDEA es su capacidad para formatear automáticamente el código al guardar un archivo. Esta función no solo mantiene el código limpio y legible, sino que también ahorra tiempo valioso al eliminar la necesidad de realizar ajustes manuales constantes. En esta guía, aprenderemos cómo configurar esta función mediante el uso de macros.

Antes de comenzar, opcionalmente puedes seguir estos pasos:

1. Abre IntelliJ IDEA y navega a "Settings" (Configuración).
2. En la sección "Editor", selecciona "Code Style" (Estilo de código).
3. Luego, en la pestaña "Java". Modifica el numero maximo de lineas en blanco el formateador eliminara las lineas en blanco de mas.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yh3m2t60c5vrscgf0k6.png)
4. Tambien puedes modificar las llamadas a metodos encadenados para que tambien sea formateado.

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

## Creando la macro y asignandole un atajo
{% embed https://www.youtube.com/watch?v=qtGOtY9AzUg&ab_channel=JonathanMarceloRuizSilva %}
Navigating a Standard .NET API Service: A Real Estate Example
Tags: dotnet, api, tutorial, github
Published: 2023-08-09 18:15:35

The Buenos Aires Real Estate API Service is a a cutting-edge .NET 7 / EFCore supported API that offers easy access to apartment complex and apartment unit information.
 
{% embed https://github.com/tigerbluejay/Buenos-Aires-Real-Estate-API %}

This API is meticulously designed to cater to a diverse range of services and applications, but it can also work stand-alone with Swagger UI integration, making it an ideal tool for demonstrations and learning.


![Swagger UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75owh941fzuojc5g7a2r.jpg)

The API's endpoints are crafted to enhance user experience. The ApartmentComplex controller, boasts two distinct Get methods catering to both general apartment complex retrieval and specific complex retrieval by ID. The controller further opens avenues for basic Create, Update, and Delete operations. 


![Swagger Endpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1opz9gmyigwn3hyi8nh.jpg)

Diving deeper, the ApartmentUnit endpoints, mirror common HTTP verbs – allowing the client to fetch all units and specific units by ID, creating, updating, and deleting units.

A highlight of this API is the UsersController, which facilitates seamless user interaction. With the power of .NET Identity and Swagger integrations, effortlessly register and login, and obtain JWT Bearer Token for authorization. With this token in hand, you can unlock restricted actions defined within the API. 


![Program.cs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbgkyv1yzbrvto030a47.jpg)


![Get Action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kp9hr3sisd3dfhumbcg.jpg)

The solution's beginner-to-intermediate friendly design, punctuated with annotations, ensures developers of varying expertise can easily work with it. 

For a comprehensive understanding of the application's structure, the GitHub Repo's Readme file offers a detailed breakdown. Suffice it to say here that the Solution is comprised of four distinct projects – the Core API, the Data Access Layer, the Models and Data Transfer Objects Layer, and a Utilities Addendum.


![Solution Explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7rk8347pun4qqo67qdd.jpg)
TIL (Ruby) Each
Published: 2023-08-09 18:09:14

I feel that the array and each sections were the most difficult for me, but when they clicked, they really clicked!

For example, I initially struggled with figuring out how to count and compare the number of characters to the word they were a part of, as seen in lesson 76 for the letter count activity:

```
word = ["photo", "like", "commenter"].sample
sample_word = word.to_s

sample_word.split("").each do |sns_component|
	pp sns_component + " appears " + sample_word.count(sns_component).to_s + " times"

end
```
This is my completed code, and it works, but I found it necessary to write out my understanding for future reference.

When I used `sample_word.split("")` in the `do` loop, the word was split into a new array consisting of individual letters. This new array needs to have its' elements individually counted in order to complete the activity.

So when I went to print the statement and used `.count()`, adding `sns_component` into those parentheses allowed the code to look at the number of times each of the new elements in the new array (individual letters) occur in `sns_component` (which concerns the original array at the start of my code, and contains whole words for elements).

This was a great example of understanding what I needed to do, but not being entirely sure how to do it until I went, "what if I tried this?" with `.count(sns_component)`. It feels rather obvious in hindsight, but these exercises were very similar to a recent interview I had (and struggled with) so being able to talk myself through it on my own was a great breakthrough.

 At the very least, I hope that's the correct way to speak about it - maybe I'll look back and wonder why I thought of things in such a complicated matter when I improve!
React useState queue
Tags: react, javascript
Published: 2023-08-09 18:05:21

I have a doubt about React the flow of one React code. In React documentation, says that "React processes state updates after event handlers have finished running. This is called batching.". But the same docs have an example that the state is set, wait a timeout, then apply the others state update in queue.

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

In my mind, React will see the first setState request a new render to update the state after all code in event run, then await 3000ms and queue the rest of the setStates. In this case, React should wait 3000ms, render and update all queued states.
But, the code flows differently that i though. the first setState run, render, wait 3000ms, then render again. Why?

codesandbox : https://codesandbox.io/s/sue2hu?file=/App.js&utm_medium=sandpack
Wagtail: check for user root page in admin panel (for menus & PageChooser etc.)
Tags: wagtail, django, python, webdev
Published: 2023-08-09 18:02:02

Wagtail navigation through pages is not very intuitive. If you have users with permissions per page, it's better to set PageChooser root to their root pages and add a menu link to easily edit their root pages.

### 1. Create a function for checking user root:

`app/helpers.py`:

```python
from wagtail.permission_policies.pages import PagePermissionPolicy
from django.urls import reverse

def get_root_page(user):
    root_page = PagePermissionPolicy().explorable_root_instance(user)
    # we can also get edit_url link and other things…
    root_page.edit_url = reverse('wagtailadmin_pages:edit', args=[root_page.id])
    return root_page
```

### 2. Register a hook to set PageChooser to user root:

`app/wagtail_hooks.py`:

```python
from wagtail import hooks
from wagtail.admin.menu import MenuItem
from app.helpers import get_root_page

@hooks.register('construct_page_chooser_queryset')
def show_my_pages_only(pages, request):
    print(vars(get_root_page(request.user)))
    pages = pages.descendant_of(get_root_page(request.user),inclusive=True)
    return pages
```

### 3. Register a hook to add menu item that allows to easily edit user root page (if his root is not main Wagtail Root):

`app/wagtail_hooks.py`:

```python
@hooks.register('construct_main_menu')
def change_menu_items(request, menu_items):

    # let's get root page
    root_page = get_root_page(request.user)
    
    # we can also exclude some menus
    exclude = [
         "help",
         "reports",
    ]

    menu_items[:] = [item for item in menu_items if (item.name not in exclude) ]

    # now we add edit user root page menu item (if it's not main ROOT)
    if (root_page.id and root_page.id!=1):
        menu_items += [MenuItem('Main: '+root_page.title, root_page.edit_url, classnames='icon icon-home', order=-99999)]
```