teleren/devto huggingface dataset:
📡 MiroTalk Live Broadcast
Tags: javascript, webdev, opensource, node
Published: 2023-05-30 12:41:59

**MiroTalk Live Broadcast**

Live demo: https://bro.mirotalk.com
GitHub: https://github.com/miroslavpejic85/mirotalkbro

_Note: Unlimited time, unlimited rooms each having a broadcast and many viewers._

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

Description:

WebRTC (Web Real-Time Communication) is a technology that enables real-time communication between web browsers and applications. It supports peer-to-peer (P2P) connections, allowing direct communication between browsers without the need for intermediate servers. WebRTC is commonly used for various applications, including live broadcasting.

MiroTalk live broadcasting with WebRTC involves the real-time transmission of audio, video, and data streams from a broadcaster to multiple viewers. Instead of relying on a centralized server to distribute the stream to viewers, WebRTC enables a direct connection between the broadcaster and each viewer. This approach offers several advantages, such as lower latency, and reduced infrastructure costs.
The MiroTalk live broadcasting process typically involves the following steps:

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

1. Broadcasting Setup: The broadcaster initiates a WebRTC connection by capturing audio and video from their device, encoding the media into a suitable format, and creating a WebRTC stream. This stream is then distributed to the viewers.

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

2. Viewer Connection: Viewers who want to watch the live broadcast establish a direct connection with the broadcaster using WebRTC. They access the broadcast URL or join a signaling channel that facilitates the exchange of connection details.

3. Peer-to-Peer Connection: Each viewer connects directly to the broadcaster's stream and establishes a P2P connection. This connection allows the viewer to receive the audio and video streams in real-time.

4. Media Streaming: The broadcaster continuously sends the audio and video data to each viewer using the established P2P connections. This data is typically transmitted using the Real-Time Protocol (RTP) over User Datagram Protocol (UDP) or Transmission Control Protocol (TCP).

5. Decoding and Playback: Each viewer's browser receives the audio and video data and decodes it for playback. The decoded media is then rendered on the viewer's device, allowing them to watch the live broadcast.

6. Data Channels: WebRTC also supports data channels, which enable the exchange of additional information between the broadcaster and viewers. This feature can be used for chat functionality, synchronized interactions, or any other application-specific data exchange.

We welcome feedback and suggestions!
How to use Emojis in a Python + Django + MySQL project
Tags: python, django, mysql, emoji
Published: 2023-05-30 12:30:00

---
title: How to use Emojis in a Python + Django + MySQL project
published: true
description: If you want to support Emojis, you have to change the database and application charset to utf8mb4
tags: #python #django #mysql #emoji
cover_image: https://1.bp.blogspot.com/-EEczYUHrWv0/V5Hb7BfLWVI/AAAAAAAABBk/MbgGULc4eS48Sz0p5L49dY4v3nYgHZScwCEw/s1600/whatsapp-apple-emojis.jpg
# Use a ratio of 100:42 for best results.
published_at: 2023-05-30 12:30 +0000
---

Did you ever received an error like this while saving some text containing Emojis to the database?
```
DataError at /admin/myapp/mymodel/1/change/
(1366, "Incorrect string value: '\\xF0\\x9F\\x99...' for column 'text' at row 1")
```

To overcome this problem you have to change the database and application charset to `utf8mb4`:

## MySQL

- Backup your database

- Edit `MySQL` conf and add/set the charset settings: 
```bash
nano /etc/mysql/mysql.conf.d/mysqld.cnf
```

```
#
# * Character Set
#
character_set_server = utf8mb4
collation_server = utf8mb4_unicode_ci
```

- Update database tables character-set to `utf8mb4`:
```mysql
SELECT CONCAT('ALTER TABLE ', table_name, ' CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;') AS alter_statement
FROM information_schema.tables
WHERE table_schema = 'mydatabasename';
```

- Run the generated `ALTER` statements

- Restart `MySQL`:
```
/etc/init.d/mysql restart
```

## Django
- Add the `charset` option with `utf8mb4` value to your database settings:
```
DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.mysql",
        # ...
        "OPTIONS": {
            "charset": "utf8mb4",
        },
    },
}
```

- Restart your application server

---

*Done, now you can store Emojis in your database!* :rocket:
How to access a local service over the internet using bore
Tags: tunnels, selfhosting, reverseproxy, ngrok
Published: 2023-05-30 12:26:54

[Bore](https://github.com/ekzhang/bore) is a modern, simple TCP tunnel written in Rust that exposes local ports to a remote server, bypassing standard NAT connection firewalls. 

The advantage of Bore over some popular services such as [ngrok](https://ngrok.com/) is that it can be hosted on your own server. The CLI is also very straightforward and intuitive.

Installing Bore is very easy:
```
cargo install bore-cli

# On your local machine
bore local 8000 --to bore.pub
```

This command gives you a public URL that points to your local port 8000. No need for opening ports on your router or using dynamic DNS!

Instead of using bore servers you can use your own VPS to route traffic to your home.

Self-hosting bore is as simple as installing it on your server and running:

```
bore server
```
Now if my server's ip address is 2.2.2.2 this is what I need to run on my home computer to access a service running on port 9981 of my home PC through my VPS:

```
bore local 9981 --to 2.2.2.2
```
Bore server assigns a random port to this tunnel. Now I can access my local service running on port 9981 of my home PC using 2.2.2.2:PORT
Using CSS Modules how to style components according to their props
Published: 2023-05-30 12:22:36

Certainly you as a Frontend Developer will need style some component according to the props that your component assume.

Often it's a button which could assume different possibles: success (green), error (red), default (default color), but you can apply for all types of components.

Using CSS Modules React Components are styled with classes, in React classNames:


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

And the CSS archive:


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

But what to do when the component can assume different background-colors?

Lets improve our code using literals string!

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

Above the component Button could assume: primary, secondary, success and danger. And according the color props value, the background needs change!


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

Now we have a base className which defines the width and the height of the button, and also a second className to set the background color.

This is possible because styles it's a object which get our classes like your properties. And we can access their values using the traditional syntax "styles.button" or "styles[color]".

I hope help you writing this small text!



**Yale Araújo**
Frontend Developer
Connection Refused
Published: 2023-05-30 12:20:22

**Hi Guys**, I have a problem in my Api gateway container. I'm working on a microservices project using Spring Boot Cloud. First of all, I created a service registry using Eureka, then a config server, then an Api gateway (my microservices entry point). the problem is that before containerizing those services, All worked fine, but after containerizing with Docker, I got a connection refusal when I ran Api Gateway (to be registered in Eureka Registry).
**------------------**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/re6470gggerh9f5y3n9o.PNG)
**------------------**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbcsb4wrszqqpevof14o.PNG)
**------------------**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q85y26rmunb66f0mje0j.PNG)
How to Create an eCommerce Website in Magento 2
Tags: magento, magento2, magento2tutorial
Published: 2023-05-30 12:10:42

If you're considering venturing into eCommerce but are unsure about which platform to choose, Magento 2 can be an excellent option for you. As a popular open-source eCommerce platform, Magento 2 provides a wide range of features and functionalities that can assist you in establishing a professional online store with ease. Whether you intend to sell products or services, Magento 2 can help you build a robust online presence and drive sales.

In this blog post, I will walk you through a step-by-step process of **_How to Create an eCommerce Website in Magento 2_**. To ensure simplicity and clarity, I have divided the process into straightforward and easy-to-follow steps that will enable you to swiftly create a comprehensive online store. By the end of this article, you will have the necessary tools to launch your eCommerce website and commence selling your products or services to customers worldwide. So, let's delve into it and learn how to create an eCommerce website in Magento 2!

For more information , please visit this :- **_[https://webguru.dev/how-to-create-an-ecommerce-website-in-magento-2/](https://webguru.dev/how-to-create-an-ecommerce-website-in-magento-2/)_**
The Knowledge Academy Review
Published: 2023-05-30 12:04:15

Continuous improvement and current industry expertise are what set The expertise Academy distinct. The course materials were painstakingly selected, reflecting the most recent developments and industry standards. I felt confident that the training I was receiving was in line with current industry norms and trends because of this commitment to relevancy.

Finally, [The Knowledge Academy's](https://youtu.be/-djP9LbP1AI) post-course support was priceless. They offered additional resources, including reference materials and access to a vibrant community of professionals in my field. This larger support system has shown to be a very valuable source for continued education and networking possibilities.

**Click below for more information :**
https://youtu.be/-djP9LbP1AI
Simplify your Laravel & Blade ifs: @pro, @free and @guest
Tags: laravel, blade, saas, webdev
Published: 2023-05-30 11:49:23

Custom if tags to clean up your Blade templates.

If you're building a SaaS, you'll eventually start accumulating a lot of `if` statements that display one version of content for pro users (your paying subscribers), your free uses (if you have a free tier), and your guest users (those not logged in).

You can use `@if` directives in your Blade templates for this, but eventually it starts getting ugly, especially if the conditions are long and complex. 

```
    @if (auth()->user()->isProUser())
        <button>Click here</button>
    @endif

    @if (auth()->user()->isFreeUser())
        <button>Upgrade</button>
    @endif

    @guest
        <button>Sign up</button>
    @endif
```

It'll be better if it can look like this instead.

```
    @pro
        <button>Click here</button>
    @endpro

    @free
        <button>Upgrade</button>
    @endfree

    @guest
        <button>Sign up</button>
    @endguest
```

Well you can do that with Blade's [custom if statements](https://laravel.com/docs/10.x/blade#custom-if-statements). 

Just add the following to your `AppServiceProvider`'s boot method:

```
    public function boot()
    {
        Blade::if('pro', function () {
            if (auth()->guest()) {
                return false;
            }
            return auth()->user()->isPro();
        });

        Blade::if('free', function () {
            if (auth()->guest()) {
                return false;
            }
            return auth()->user()->isOnFreeTier();
        });
    }
```

-----
More on growing my indie SaaS business at https://farez.substack.com.
Mindfulness
Tags: hbr, mindfulness
Published: 2023-05-30 11:19:11

Process of actively noticing new things

- You start with uncertainty, then you make a decision, if you make a mistake it's a calamity, but the path you are following is just a decision, you can change it at any time and maybe an alternative will turn out better.

- When you are mindful, mistakes become friends, you become less judgmental.

- Seek work life integration, not balance.

- Make not knowing okay.

- Mindfulness is more important than ever, but the chaos makes it harder to be mindful, but chaos is just a perception.

- There is no more information now than there was before.

- Life only consists of moments - make the moment matters, it all matters.


Ref. : [Mindful in the age of complexity - Ellen Langer Interview, HBR](https://www.audible.in/pd/Harvard-Business-Review-Emotional-Intelligence-Collection-Audiobook/1663710716)
What is Magento Commerce Cloud
Tags: magento, magento2, magento2tutorial
Published: 2023-05-30 11:18:23

**_What is Magento Commerce Cloud?_** Well, it's a comprehensive e-commerce platform that is hosted in the cloud and offers a range of features including integrated performance optimization, disaster recovery capabilities, and more. When we talk about the "cloud," we're referring to online services that securely and reliably host data such as documents, images, files, and websites.

There are two main categories of web hosting for online stores: on-premise and cloud. On-premise hosting gives you full control over your website's infrastructure but can be quite expensive, especially for small businesses.

Magento Commerce Cloud, on the other hand, is a Platform-as-a-Service (PaaS) solution that operates on servers provided by Amazon Web Services. It serves as an automated hosting platform specifically designed for Magento Commerce software and can accommodate merchants of all sizes, regardless of their sales volumes.

for more information , please visit this :- **_[https://webguru.dev/what-is-magento-commerce-cloud/](https://webguru.dev/what-is-magento-commerce-cloud/)_**
The Fundamentals of HTML: A Beginner's Guide #1
Tags: html, css, beginners, programming
Published: 2023-05-30 11:17:24

**Introduction** - HTML (Hypertext Markup Language) is the backbone of the World Wide Web. It is a markup language used to structure and present content on the internet. Whether you're an aspiring web developer or simply curious about how websites work, this article will provide you with a basic understanding of HTML.

**HTML Document Structure** - Every HTML document follows a specific structure. It begins with a doctype declaration, which informs the browser about the version of HTML being used. The HTML document is then wrapped within opening and closing `<html>` tags. Within the document, we have the head section enclosed in `<head>` tags, where meta-information and the document's title are placed. The body section, delimited by `<body>` tags, contains the visible content of the webpage.

**Elements and Tags** - HTML uses elements and tags to define and structure content. Elements are the building blocks of HTML, while tags act as containers for those elements. Elements are marked by opening and closing tags, such as `<element>content</element>`. For instance, the `<h1>` tag defines a heading, the `<p>` tag represents a paragraph, and the `<img>` tag embeds an image.

**Attributes** - HTML elements can also have attributes, which provide additional information about an element. Attributes are placed within the opening tag and consist of a name and a value. For example, the `<img>` tag uses the "src" attribute to specify the image source file. The "href" attribute is used in the `<a>` tag to define the URL for a hyperlink. Attributes enhance the functionality and appearance of elements, allowing developers to customize their webpages.

**Basic Structure Example** - Here's a simple example of the basic structure of an HTML document:

`<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph of text.</p>
    <img src="image.jpg" alt="An image" />
  </body>
</html>
`

**Conclusion** - Understanding the basics of HTML is essential for anyone looking to create or modify web content. With the knowledge of document structure, elements, tags, and attributes, you can begin crafting your own webpages. HTML is a foundational language that opens the door to a wide range of possibilities in web development.
React Native vs Flutter — which one to choose for your project?
Published: 2023-05-30 11:02:24

As the demand for mobile applications continues to grow rapidly, developers are constantly seeking efficient and effective ways to create high-quality, cross-platform mobile applications. Two of the most popular frameworks for building mobile apps are React Native and Flutter. While both of these frameworks have their unique strengths and weaknesses, choosing the right one for your project can make all the difference in its success. In this article, we will compare React Native and Flutter, discussing their features, benefits, and drawbacks to help you make an informed decision on which one to choose for your project.


Watch or read the article at [Frontend House](https://likims.com/blog/react-native-vs-flutter-which-to-choose-comparison-pros-and-cons-use-cases).
Simple Python Library with Usage
Tags: python, library, module
Published: 2023-05-30 11:00:40

Here's an example of a simple library that calculates the area and perimeter of a rectangle:

1. Create a new Python module named `rectangle.py`.

2. Write the following code inside `rectangle.py`:

```python
def calculate_area(length, width):
    """Calculate the area of a rectangle."""
    return length * width

def calculate_perimeter(length, width):
    """Calculate the perimeter of a rectangle."""
    return 2 * (length + width)
```

3. Create another Python file named `main.py` to demonstrate how to use the library.

4. Write the following code inside `main.py`:

```python
# Importing the library module
import rectangle

# Using the library functions
length = 5
width = 3

area = rectangle.calculate_area(length, width)
perimeter = rectangle.calculate_perimeter(length, width)

print("Rectangle Area:", area)
print("Rectangle Perimeter:", perimeter)
```

5. Save both `rectangle.py` and `main.py` in the same directory.

6. Run `main.py` using the Python interpreter:

```
$ python main.py
```

Output:
```
Rectangle Area: 15
Rectangle Perimeter: 16
```

In this example, we created a library module (`rectangle.py`) that defines two functions: `calculate_area()` and `calculate_perimeter()`. These functions perform calculations based on the given length and width of a rectangle.

In the `main.py` file, we imported the `rectangle` module and used its functions to calculate the area and perimeter of a rectangle with a length of 5 and width of 3. The results were then printed to the console.

By following this approach, you can create your own libraries/modules and import them into your code to reuse the defined functionality.
What exactly is ES6? 🤔
Tags: javascript, webdev, react, frontend
Published: 2023-05-30 10:23:46

**What is ECMA?**

ECMA, short for European Computer Manufacturers Association, is an international standards organization that develops and publishes standards for information and communication systems. It was established in 1961 and is based in Geneva, Switzerland.

**What is the relation between ECMA and JS?**
ECMAScript is a standardized scripting language that defines the syntax, semantics, and features of the language. ECMAScript is developed and maintained by ECMA International. JavaScript implements the ECMAScript specification, meaning it follows the rules and features defined by ECMAScript.

JavaScript **ES6** (also known as **ECMAScript 2015** or **ECMAScript 6**) is the newer version of JavaScript that was introduced in 2015. ECMAScript is another official name for Javascript. Therefore, ES2015 is often called **ES6**. ECMAScript provides the specification on how JavaScript programming language should work.

**Features of ES6:**

1. Arrow functions
2. Template literals
3. Block-scoped variables
4. Enhanced object literals
5. Destructuring assignment
6. Modules for better code organization
7. Promises for asynchronous programming
8. And much more!

**Why Learn ES6:**

- Modern JavaScript Features
- Increased Productivity
- Improved Code Readability
- Better Module Management
- Asynchronous Programming Made Easier
- Working with React

---
👉 Follow my IG for regular frontend tips: [Rafi Kadir](https://www.instagram.com/i_am_rafikadir/)
👉 Make a connection on Linkedin: [Rafi Kadir](https://www.linkedin.com/in/rafikadir/)
6 Ways To Improve As A Developer
Tags: webdev, programming, productivity, coding
Published: 2023-05-30 10:17:33

While reflecting on the ongoing 2nd quarter, I decided to list my routing as a Developer 👩‍💻 , these steps have continually supported me every single time.

📚 Learn & Re-learn -> Read books, blogs, articles and online resources.

📽 Solve Coding Challenges -> Platforms like Leetcode Challenge, HackerRank, or CodeSignal.

👩‍💻 Good coding practices -> Clean code, documentation, use version control systems.

🎯 Collaborate and Network -> Conferences, workshops, and meetups physically or virtually

🔌 Code Review and Collaboration -> Constructive criticism helps to identify areas for improvement and best practices.

🚀 Personal Projects -> Challenge and apply what you've learned.

Listed above are a few ways you can improve yourself as a developer.
How to expose Vite local instance to the network, Eg. Mobile Device
Published: 2023-05-30 10:17:02

![Vite logo](https://miro.medium.com/v2/resize:fit:640/format:webp/1*rO43wl8fR91WzCnEkZD7ng.png)

## What is Vite?

Vite (the French word for “fast”) is a new build tool for frontend web development.

Vite **promotes a faster development experience** by setting up a development environment for frameworks like Vue, TezJS, and React and even for Vanilla JavaScript apps with a dev server.

[Learn more about Vite here …](https://vitejs.dev/)

## Vite local instance exposition

When you configured your web application development using Vite, your `package.json` file scripts look like this :

```json
{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    }
}
```
Now when you run the command :

```bash
npm run dev
```
Here’s what the output might look like :

![Image without local instance](https://miro.medium.com/v2/resize:fit:720/format:webp/1*hIyOVAyIMCPPuypGbVCdBw.png)

The local instance is now running on http://localhost:5173/,

Note that it shows also the **Network: Use** `— host`

**What’s that?** Vite gives way to expose the local instance to the local network in cases where you would like to test or view your web application on another device, let’s say, on your mobile device.

## There are 3 ways to do it:

1. **By adding `--host`** option to the scripts section in `package.json` as shown below :

```json
{
    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "preview": "vite preview"
    }
}
```
2. By adding the following configuration in the vite.config.js file like so:

```json
server: {
    host: true
}
```
3. Lastly, you can use the --host option with the `npm run` dev command like so.

```bash
npm run dev --host
```
Now the output should look like this :
![Image with vite local instance exposed](https://miro.medium.com/v2/resize:fit:640/format:webp/1*7isO4rIYMp76_cIHEKq6MA.png)

Now the Vite local instance is available on the network address provided.

_Hope you found this article helpful,_ 👏👏👏.

**_Thanks for reading!_**