DEV Community: Dunsin

Self-Hosting Jitsi Meet with Docker and Cloudflare Tunnel

Dunsin — Wed, 02 Apr 2025 12:07:07 +0000

What is Jitsi?

Jitsi is a free open source, and encrypted video conferencing platform that allows users to start or join meetings directly in their browser without requiring account creation and software downloads. Jitsi also allows you to self host on your own server.

Why should you use Jitsi?

Jitsi provides secure, high-quality video conferencing with end-to-end encryption, ephemeral meeting rooms, and no account requirement for quick access. It supports WebRTC for seamless browser compatibility without extra software. The platform is highly scalable, allowing unlimited participants without artificial restrictions. Its user-friendly interface makes setup and use easy, even for non-technical users. Jitsi also integrates with third-party services like Slack and calendars for improved workflow. Its open-source nature ensures continuous updates, transparency, and flexibility, backed by an active community offering extensive documentation and support.

Why you would want to self host Jitsi?

Self-hosting Jitsi offeres enhanced control, privacy, and customization of your video conferencing need.

Which means you get:

To own your own infrastructure: You have complete control over the server, network rules and security settings
Scalability and Performance: You can scale your jitsi instance to meet your specific needs.
Data Control: You have full control of your user data when your selfhosted version is used which enhances privacy
Vendor Lock-in: It reduces the reliance on a single vendor allowing for flexibility

How Jitsi Works Under the Hood

Jitsi consists of:

Jitsi Meet - is the WebRTC compatible JavaScript application that uses Jitsi Videobridge to provide video conferencing
Jitsi Videobridge (JVB) - is the server that is designed to route video streams amongst participants in a conference.
Jitsi Conference Focus (jicofo) - is a server component that manages media sessions and acts as a load balancer between each of the participants and the video bridge.
Jitsi Gateway to SIP (jigasi) - is a server application that allows regular SIP clients to join Jitsi Meet conferences
Jitsi Broadcasting Infrastructure (jibri) - a set of tools for recording and streaming a jitsi meet conference that works by launching a chrome instance rendered in a virtual framebuffer and capturing and encoding the output with ffmpeg
Prosody - XMPP server used for signalling

How it all comes together - Source: Architecture | Jitsi Meet

Self-Hosting Jitsi Meet with Docker and Cloudflare Tunnel

Step 1: Install Required Software

Before setting up Jitsi, you need Docker, Docker Compose, and WSL (Windows Subsystem for Linux) if you're using Windows.

Install Docker & Docker Compose
- Follow the official Docker installation guide for your OS
- Verify installation: docker -v docker-compose -v
Install WSL (Windows Users Only)

If you're on Windows, install WSL and set Ubuntu as your default distribution:

  ```
  wsl --install -d Ubuntu
  ```

Step 2: Clone the Jitsi Docker Repository

Jitsi provides a Docker Compose setup for easy self-hosting.

Clone the repository:

```
git clone https://github.com/jitsi/docker-jitsi-meet && cd docker-jitsi-meet
```

Copy the example environment file:
```
```
cp env.example .env
```
```

Step 3: Configure Jitsi Environment Variables

Open the .env file and configure the following settings:

  ```
  # Set your public domain (replace with your actual subdomain)
  PUBLIC_URL=meet.<YOUR_DOMAIN>

  # Disable automatic SSL since we will use Cloudflare Tunnel
  ENABLE_LETSENCRYPT=0

  # Enable authentication (optional)
  ENABLE_AUTH=0
  ENABLE_GUESTS=1

  # Enable WebSockets (important for mobile support)
  ENABLE_XMPP_WEBSOCKET=1
  ```

💡 Note: If you plan to restrict meeting creation, set ENABLE_AUTH=1 and configure authentication later.

Step 4: Start Jitsi Services

Run Jitsi using Docker Compose:

```
docker-compose up -d
```

Verify that all services are running:

```
docker ps
```

You should see containers for:

✅ prosody (XMPP server)

✅ web (main frontend)

✅ jicofo (conference management)

✅ jvb (video bridge)

If everything works, your Jitsi server should be accessible locally via http://localhost:8000.

Step 5: Expose Jitsi to the Internet Using Cloudflare Tunnel

If you don’t have a static IP, Cloudflare Tunnel allows you to expose Jitsi without opening firewall ports.

Step 5.1: Set Up Cloudflare Tunnel

Create a Cloudflare Account
- Sign up at https://dash.cloudflare.com/
- Add your domain to Cloudflare
- Create a subdomain for Jitsi (e.g., meet.)

Install Cloudflare Tunnel (cloudflared)

```
sudo wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64 -O /usr/local/bin/cloudflared
sudo chmod +x /usr/local/bin/cloudflared
```

Authenticate Cloudflare Tunnel
```
 ```
 cloudflared tunnel login
 ```
```

- This opens a browser to authenticate with Cloudflare.
- Select your **Cloudflare domain** (e.g., <YOUR_DOMAIN>).

Create a Cloudflare Tunnel

 ```
 cloudflared tunnel create jitsi-tunnel
 ```

This generates a tunnel ID and a credentials file:

 ```
 /root/.cloudflared/<tunnel-id>.json
 ```

Configure the Tunnel

Create a config file:

 ```
 nano ~/.cloudflared/config.yml
 ```

Add the following:

 ```
 tunnel: <tunnel-id>
 credentials-file: /root/.cloudflared/<tunnel-id>.json

 ingress:
   - hostname: meet.<YOUR_DOMAIN>
     service: http://localhost:8000
   - service: http_status:404
 ```

Run the Cloudflare Tunnel

```
cloudflared tunnel run jitsi-tunnel
```

Set Up DNS in Cloudflare
- In the Cloudflare Dashboard, go to DNS Settings.
- Add a CNAME record:
  - Name: meet.
  - Target: <tunnel-id>.cfargotunnel.com

Step 6: Fix Cloudflare & Jitsi Issues

Issue 1: 405 Not Allowed Error (Nginx)

Fix: Disable Cloudflare Proxy

Go to Cloudflare Dashboard → DNS
Find the CNAME record for your Jitsi domain
Click the orange cloud icon (proxy) and disable it
Wait a few minutes, then test again

Issue 2: Mobile Devices Can’t Access `/config.js`

Fix: Bypass Cloudflare Security for `/config.js`

When using Jitsi in a mobile application (e.g., React Native or Kotlin), Cloudflare security settings might block access to /config.js, preventing the app from connecting.

To fix this:

Go to the Cloudflare Dashboard → WAF (Firewall Rules)
Create a new Custom Rule:
- If:
  - http.request.uri contains "/config.js"
- Then: Skip:
  - Browser Integrity Check
  - Bot Fight Mode
  - Security Level

This ensures that Jitsi’s configuration file is accessible to mobile clients.

Issue 3: Mobile Devices Can’t Join Jitsi Meetings

Fix: Allow WebSockets in Cloudflare

Jitsi uses WebSockets for real-time communication. If WebSockets are blocked, mobile apps won’t be able to join meetings.

To fix this:

Go to the Cloudflare Dashboard → Security → WAF
Create a new Custom Rule:
- If: URI Full equals "meet.favour.dev/xmpp-websocket"
- Then: Allow WebSockets

This allows WebSockets to pass through Cloudflare without being blocked, ensuring smooth connectivity for mobile users.

Final Steps

🚀 Your Jitsi instance is now live at meet.!

💡 If you run into problems, check logs with:

```
docker-compose logs -f
```

Let me know if you need clarifications!

Cryptography in JavaScript

Dunsin — Tue, 03 Dec 2024 13:21:57 +0000

Cryptography protects data by transforming it into a format only intended recipients can understand. It's essential for securing passwords, online transactions, and sensitive communications. Below, you'll learn about encryption, hashing, and using JavaScript to implement them.

What is Cryptography?

Cryptography transforms readable data (plaintext) into an unreadable format (ciphertext). Only authorized parties can reverse the process.

Key Concepts:

Encryption: Converts plaintext into ciphertext.
Decryption: Reverses ciphertext back to plaintext using a key.

Types of Encryption

1. Symmetric Encryption

Uses the same key for encryption and decryption. The key must be shared securely between sender and receiver. AES is a widely used type of symmetric encryption algorithm that secures data by converting it into an unreadable format. It relies on secret keys and supports 128, 192, or 256-bit key lengths, providing strong protection against unauthorized access. AES is essential for:

Securing Internet Communication: Safeguarding online interactions like HTTPS.
Protecting Sensitive Data: Ensuring confidentiality in storage and transmission.
Encrypting Files: Keeping personal and professional information safe.

Key Elements of AES

Key elements of AES include the key and the Initialization Vector (IV). The key is a secret value shared between parties, determining how data is encrypted and decrypted, and it must always remain confidential. The IV is a random value used alongside the key to ensure that identical plaintext encrypts to different ciphertexts, adding randomness to prevent pattern recognition. While the IV can be public, it must never be reused with the same key. Together, these elements enable AES to effectively counter cyber threats, making it a cornerstone of data security.

Example: AES (Advanced Encryption Standard)

AES encrypts data using a shared key and an initialization vector (IV) for added randomness.

const crypto = require('crypto');

const algorithm = 'aes-256-cbc';
const key = crypto.randomBytes(32);
const iv = crypto.randomBytes(16);

function encrypt(text) {
  const cipher = crypto.createCipheriv(algorithm, key, iv);
  let encrypted = cipher.update(text, 'utf8', 'hex');
  encrypted += cipher.final('hex');
  return { encrypted, iv: iv.toString('hex'), key: key.toString('hex') };
}

function decrypt(encrypted, ivHex, keyHex) {
  const decipher = crypto.createDecipheriv(algorithm, Buffer.from(keyHex, 'hex'), Buffer.from(ivHex, 'hex'));
  let decrypted = decipher.update(encrypted, 'hex', 'utf8');
  decrypted += decipher.final('utf8');
  return decrypted;
}

// Usage
const message = "Secret Message";
const encryptedData = encrypt(message);
console.log("Encrypted:", encryptedData);

const decryptedMessage = decrypt(encryptedData.encrypted, encryptedData.iv, encryptedData.key);
console.log("Decrypted:", decryptedMessage);

2. Asymmetric Encryption

To create a secure encrypted system, asymmetric encryption is often the solution. It uses two keys: a public key for encryption and a private key for decryption. This setup enables secure communication without sharing a single key.

How It Works

Key Pair Generation

A public-private key pair is generated. The public key is shared openly, while the private key stays confidential.
Encryption

The recipient's public key encrypts the data. Only their private key can decrypt it, keeping the data safe even if intercepted.
Decryption

The recipient decrypts the data using their private key.

const crypto = require('crypto');

// Generate keys
const { publicKey, privateKey } = crypto.generateKeyPairSync('rsa', { modulusLength: 2048 });

const data = "Confidential Data";

// Encrypt
const encrypted = crypto.publicEncrypt(publicKey, Buffer.from(data));
console.log("Encrypted:", encrypted.toString('base64'));

// Decrypt
const decrypted = crypto.privateDecrypt(privateKey, encrypted);
console.log("Decrypted:", decrypted.toString());

Hashing in Cryptography

Hashing converts data into a fixed-length, irreversible string (hash). It's commonly used for verifying data integrity and securely storing passwords.

Popular Hashing Algorithms:

SHA-256: Secure and widely used.
SHA-3: Newer with enhanced security.
MD5 and SHA-1: Deprecated due to vulnerabilities.

Example of Hashing a String in Node.js

const crypto = require('crypto');
const hash = crypto.createHash('sha256').update('Hello, World!').digest('hex');
console.log(hash); // Example output: dffd6021bb2bd5b0af676290809ec3a53191dd81c7f70a4b28688a362182986f

Encryption vs. Hashing

Feature	Encryption	Hashing
Process	Two-way (encrypt/decrypt)	One-way
Purpose	Data confidentiality	Data integrity
Reversible	Yes	No
Example	AES, RSA	SHA-256, bcrypt

Practical Example: Asymmetric Encryption in Projects

In my project Whisper, we used asymmetric encryption to secure anonymous chat messages. Messages are encrypted with the recipient's public key, ensuring only the recipient can decrypt them using their private key.

For client-side React implementation, we used crypto-js for encryption and decryption:

const encoder = new TextEncoder();
const encryptedMessage = await crypto.subtle.encrypt(
  { name: 'RSA-OAEP' },
  importedPublicKey,
  encoder.encode('Hello')
);

Decryption uses the private key:

const decryptedMessage = await crypto.subtle.decrypt(
  { name: 'RSA-OAEP' },
  privateKey,
  encryptedMessage
);

Explore Whisper's Code for detailed examples.

Conclusion

Cryptography strengthens data security in applications. Use symmetric encryption like AES for shared-key scenarios and asymmetric encryption for public-private key systems. Hashing ensures data integrity, especially for passwords. Select the right cryptographic approach based on your application's needs.

Need more knowledge?

Thanks for reading, let me know what you think about this and if you would like to see more, if you think i made a mistake or missed something, don't hesitate to comment

Arrow functions in JavaScript

Dunsin — Mon, 19 Aug 2024 08:59:19 +0000

Introduction

Arrow functions are a type of function in JavaScript that have no name which is why they are called anonymous functions and if you want them to have a name that’s callable you would have to assign them to a variable.

Basic Syntax

Single-Line Arrow Functions

An arrow function can just be a line of code, and in arrow functions you can omit the curly bracket and the return keyword if it’s a single line. This way of returning a value in a single line arrow function is called an implicit return

if there’s a single parameter, This code snippet is a function that just returns the name. You can omit the bracket and just use the name of the parameter.

If there’s no parameter, you can omit the bracket. This code doesn't require a parameter, which means you can just use the underscore symbol ( _ )

Multi-Line Arrow Functions

Most functions you will write will fall into this category of a multi-line arrow function. Just like a regular function, we have to use the curly brackets and the return keyword to return a value. When you use the return keyword, it’s called an explicit return

Comparison with Traditional Functions

Syntax Differences

Arrow Function

In single line format

In Multi-line format

Regular Function

Behaviour Differences

Arrow functions don’t have their own context (this) so they inherit it from the part of the code they were written and not where they were called. We call this lexical scoping.

Example:

We have two arrow functions, one defined in a regular function and the other in the object's root. The arrFunc() is undefined even if it was defined in obj. That’s because arrow functions don’t have access to this context of obj so it will look for it in the global scope and since it didn’t find a name, it returns undefined.

But the arrFuncInRegFunc returns John, that’s because it’s inheriting this from the function it’s defined in and not the obj.
Arrow functions don’t have their argument object, if you try to access the argument object of an arrow function it will empty

Example in global scope:

Example in a regular function:

Here the arrow function inherits the arguments object from the regular function because it doesn’t have access to its argument object
Arrow functions cannot be used as constructors and will throw an error if used with the new keyword

Example of using constructors with regular functions:

Practical Example

Arrow functions are mostly used as callback functions to other functions, here are a few examples:

In Array Methods

Map method

Filter method

In Event Handlers

Conclusions

Arrow functions were a great introduction to ES6 they allow for concise syntax because they are shorter and more compact than regular function expressions, making them easier to read and write, and also have implicit returns for single-line functions, so you don't need to use the return keyword if the value is directly after the arrow ⇾. However, if you use curly brackets, you must have a return statement or the function will return undefined.

You can read more about arrow functions here

Thanks for reading, let me know what you think about this and if you would like to see more, if you think i made a mistake or missed something, don't hesitate to comment

Everyone keeps saying to document your code, what do they actually mean

Dunsin — Wed, 07 Aug 2024 08:28:45 +0000

When we talk about documenting, we're not just talking about explaining every line of code using a comment. In this blog, I will be talking about what developers should do to have well documented codes. Before we get into how to document your code, let's see why it's important.

Documenting your code helps other developers (and you) understand what your code does, how it works, and why you did it that way. Good documentation covers the WHAT, WHY, and HOW of your code.

Now, let's talk about how to document your code:

Use Git Effectively

Many developers don't realize how much Git can help with documentation. Use commit messages to summarize what changes you made and why you made them. Avoid vague messages like "made some changes." Instead, be specific about what you did and why, include why in the Pull Request for that issue as well as tag the issue number that the code aims to solve. Proper use of Git helps track changes and makes debugging easier.

Create a Detailed README

A well-documented README is important for anyone who needs to understand your project. It should explain what the project is about, what tools were used, how to run it, the folder structure, and versioning. Make sure the README is in the main/master branch of the project.

Write Everything Down

The real power of documentation is in noting down as much as you can. Use a text file, Notion, or any note-taking app. For example, when you start a new project, document the libraries you install and any configuration files you set up. If you encounter errors, write them down along with their solutions. Document all features or changes you make, explaining what each feature does and why you chose your approach.

In conclusion, documenting your code is very important. It helps others understand your work and helps you solve future problems.

Thanks for reading, let me know what you think about this and if you would like to see more, if you think i made a mistake or missed something, don't hesitate to comment

Why index in programming starts from 0

Dunsin — Mon, 29 Jul 2024 13:44:20 +0000

Introduction

Have you ever wondered why we start from 0 in programming? And no, it’s not because 0 would be lonely if we didn’t. Well, I did wonder why, so I did a little research about it. Enjoy!!

We use indexing in a lot of places in programming with almost every language using it except for Lua, MATLAB etc, but it’s mostly used in data structures.

Historical Context

One of the earliest programming languages, assembly language, which is a low level language. In assembly, arrays and other data structures are often accessed by calculating offsets from a base address, this means the number of positions away from the base address. The first element of an array is at the base address itself, which corresponds to an offset of 0. This naturally leads to 0-based indexing.

It can be traced back to key figures and milestones that shaped its adoption. Edsger W. Dijkstra, a pioneering computer scientist, was a prominent advocate for zero-based indexing. He argued that it aligned naturally with the mathematical concept of sequences and offsets, enhancing clarity and reducing errors in programming. The milestone of the introduction of the C programming language in the early 1970s, developed by Dennis Ritchie and Brian Kernighan, was pivotal in popularizing zero-based indexing. C’s design, heavily influenced by its predecessor, B, and its system-level orientation, reinforced the efficiency and logical simplicity of starting arrays at zero. Another significant milestone was the development of assembly language, where memory addresses naturally start at zero, further justifying zero-based indexing in higher-level languages. These contributions and historical milestones collectively established zero-based indexing as a standard, influencing many subsequent programming languages and shaping modern computer science education and practices.

Technical Explanation

Memory addressing and how it relates to indexing
When you use an array in programming, think of it like a row of lockers. Each locker has a number, starting from 0, that tells you where it is. The first locker is 0, the second is 1, and so on. This numbering system is called 0-based indexing.

The reason we start counting from 0 is because of how computers handle memory. Imagine each locker is a spot in the computer's memory. The first locker (0) is exactly at the starting point of this memory space. So, when you want something from the first locker, you don’t need to move; you’re already at the right spot.

This way of numbering makes it easier for the computer to find things quickly and efficiently. If you want to get something from the 3rd locker, the computer just moves 3 steps from the starting point. Starting from 0 helps everything line up perfectly with the way the computer’s memory is organized.
Comparison with one-based indexing
One-based indexing is more intuitive for beginners because it aligns with how we typically count things in everyday life. For example, when we count people, we start with "one, two, three," not "zero, one, two." This simplicity can make it easier to understand and remember, especially for those new to programming.

However, zero-based indexing offers several benefits that make it preferred in many programming languages. One key advantage is that it aligns better with memory addressing in computers. In low-level programming, arrays are often represented as blocks of memory, and the index corresponds to an offset from the start of that block. Using zero-based indexing makes these calculations more straightforward and efficient.

Zero-based indexing also leads to simpler and more consistent code in certain situations. For example, when slicing arrays, it's more natural to specify the start and end indexes as 0 and the length of the slice, respectively. With one-based indexing, this would require adding or subtracting 1, introducing potential off-by-one errors.

Common Misconceptions

One common misconception about zero-based indexing is that it is an arbitrary choice made by programming languages. Some may think that starting counting from 0 is just a convention without any deeper rationale. However, as we discussed earlier, zero-based indexing has roots in computer science and memory addressing, making it a practical choice rather than arbitrary.

Another misconception is that zero-based indexing is more error-prone than one-based indexing. While it's true that off-by-one errors can occur when transitioning between zero and one-based indexing, with proper understanding and care, these errors can be minimized. In fact, some argue that zero-based indexing reduces off-by-one errors in certain scenarios, such as array slicing, compared to one-based indexing.

Lastly, some may believe that zero-based indexing is less intuitive than one-based indexing, especially for beginners. While it may take some time to get used to, particularly for those new to programming, many programmers find that zero-based indexing becomes natural with practice. Understanding the rationale behind zero-based indexing can help dispel this misconception and showcase its efficiency and consistency in various programming contexts.

Conclusion

Indexing in programming is a fundamental concept used to access elements in arrays or lists. While most languages use zero-based indexing, some languages like Lua and MATLAB use one-based indexing. Zero-based indexing has historical roots in early computer science, particularly in assembly language, where arrays are accessed by calculating offsets from a base address, starting with 0. This approach is efficient for memory addressing and aligns with how computers handle memory, making it easier to find and manipulate data.

Thanks for reading, let me know what you think about this. If you think I made a mistake, missed something or want to add something, don't hesitate to comment

6 JavaScript features to improve your productivity

Dunsin — Sun, 28 Jul 2024 12:35:15 +0000

Arrow Functions

Arrow functions provide a concise syntax for defining functions, reducing boilerplate code and making your code more readable.
Destructuring

Destructuring enables you to extract values from objects or arrays easily, making your code cleaner and more efficient.
Template Literals

Template literals allow you to embed expressions within strings, simplifying string concatenation and enhancing readability.
Default Parameters

Default parameters let you provide fallback values for function parameters, reducing the need for conditional checks.
Spread Operators

Spread operator simplifies array manipulation, enabling you to spread elements.
Map and Filter

Map and filter functions simplify array transformations and filtering, resulting in cleaner and more expressive code.

Thanks for reading, let me know what you think about this. If you think I made a mistake, missed something or want to add something, don't hesitate to comment

The Ultimate beginners guide to open source – part 4: Why you should contribute to open source projects

Dunsin — Sun, 09 Jun 2024 11:32:20 +0000

Intro
Getting involved in open source projects is a great way to improve your coding skills and work on real-world projects. By contributing to these projects, you can gain valuable experience that will make you a better developer. This blog will explore the benefits of contributing to open source, such as building your resume, connecting with other developers, and learning new technologies.

Benefits

Contributing to open source projects allows you to gain hands-on experience with real-world projects and a variety of programming languages. As you encounter and solve many code challenges, you will get practical experience that will help you become a better developer.
Contributions to open source serve as real evidence of your skills. These contributions can be listed on your resume, portfolio, or LinkedIn profile, which will impress potential clients or employers and boost your chances of getting contracts or employment offers.
You can connect with other developers, maintainers, and industry experts. These contacts can lead to mentorship opportunities, collaboration on interesting projects, or even freelance work referrals.
Open source projects come in a variety of sizes and shapes, covering a wide spectrum of technologies and tools. Participating exposes you to new libraries, frameworks, and development approaches, broadening your knowledge and keeping your skills current.
Many open-source projects have challenging problems that must be resolved. This allows you to handle hard problems, troubleshoot code, and come up with creative solutions. Such experiences can greatly improve your troubleshooting and debugging skills.
Contributing to open source is a method for developers all over the world to give back. You contribute to open-source software, making technology more accessible and enhancing it for users worldwide. This sensation of achievement can be extremely fulfilling.
You may be recognized for your contributions depending on your level of contribution. This can include badges on platforms like as GitHub, references in project documentation, or invites becoming a core contributor, all of which can help you build your reputation in the community.
Contributors from all over the world are frequently involved in open source projects. You will have the opportunity to collaborate with people from various origins, cultures, and perspectives if you participate. This global engagement has the potential to extend your horizons, strengthen your communication skills, and foster a greater understanding of global teamwork.

Thanks for reading, let me know what you think about this and if you would like to see more, if you think i made a mistake or missed something, don't hesitate to comment

Check out Part 3 on ways to find open source projects to contribute to, Part 2 on how to contribute to a project without feeling scared and Part 1 on the basics of open source.

The Ultimate beginners guide to open source – part 3: ways to find open source projects to contribute to

Dunsin — Sat, 01 Jun 2024 10:06:38 +0000

Most people have no idea where to look for open source projects to contribute to. In this blog, I'll discuss the methods I utilize and play around with to find projects on GitHub.

First way: Go to github.com/search to find specific repositories on GitHub. There, you can organize repositories by stars, language, forks, and most recently updated date. Simply click on the “prefixes” option in the Page to get a list of search prefixes for more advanced searches.

Example:

This provides projects written in JavaScript, has between 300 and 1000 stars, and was last updated on September 1st, 2023. If you want to find react projects or with a keyword that isn’t a language, you can use “topic:react”.

Second way: You can also find projects through GitHub issues. Go to github.com/issues and, similar to the search function, you can filter all issues ever created on GitHub based on whether they are open, have a specified label, and the language they are written in.

Example:
input the following: is:open is:issue archived:false label:Hacktoberfest language:typescript -author:[your-github-username]

Third way: go to github.com, click on filter, and then select repositories and recommendations. GitHub will recommend repositories that they think you will be interested in. If you also select repository activity, you will be able to see what the people you follow on GitHub are contributing to, and you can then check out those projects.

Thanks for reading, let me know what you think about this and if you would like to see more, if you think i made a mistake or missed something, don't hesitate to comment

Check out Part 2 on how to contribute to a project without feeling scared and Part 1 on the basics of open source.

The Ultimate beginners guide to open source – Part 2: Defeating the fear of contributing

Dunsin — Thu, 30 May 2024 14:23:15 +0000

Contributing and finding repositories to contribute to is scary. If you are one of those people, I have a hack for you that is sure to help you overcome that fear.

Pick a project you want to contribute to, click on the “watch” button.

Click on _custom _ and pick the following: issues, pull request (optional) and discussions (optional).

This allows you to get notifications on any issue, pull request or discussion created in the project.

Here’s what you should do with every type of notification you get:

Issue: When you get an issue notification and you are interested in solving that issue, you will be among the first to view it and decide if you want to work on it, but what if you don't know how to work on that issue?

You can wait until it's allocated to someone else and then ask that person if you can collaborate; you'll make a new friend, learn, and have someone lead you through how the project works. Believe me, the open source software community is really kind.

Pull Request: You can review other people's work and that teaches you how to read code, which is a really useful ability to have as a programmer. You also get to view the corrections/suggestions that the maintainers have made to the code, which shows you the project's code practices and a better way of solving and doing things.
Discussion: You get to talk to people, ask/answer questions, and discuss the next steps needed for the project. This also gets you friends, and you get to network and better share your expertise on the knowledge you have.

The goal of picking a project to contribute to isn't to try to participate right away; instead, you should familiarize yourself with the project.

Another little tip if you are just starting with open source is to not contribute to big projects, go with projects with 20–1000 stars.

Looking for a project to practice? Try this Practice Project

See you in part 3 and check out part 1 here.

Thanks for reading, let me know what you think about this and if you would like to see more, if you think i made a mistake or missed something, don't hesitate to comment

The Ultimate beginners guide to open source – part 1

Dunsin — Wed, 29 May 2024 13:38:49 +0000

An open source project is one where the source code is visible to everyone and where developers are welcome to contribute. React(made by facebook), WordPress, and Node.js are two instances of open source projects.

People who engage in open source projects include the following:

Owner: Who created or launched the initiative; this could be a company or a person.
Contributor: A person who asks for changes to the project in order to improve it.
Maintainer: Someone who makes decisions for the project, such as whether a pull request is acceptable or an issue is valid, and who generates ideas; this is most frequently a contributor and the owner.
Users: This group of individuals that use the project, as the name implies.

Myths in Open source:

You must be familiar with every tool used: If a project uses React, Redux, and Tailwind it you can know react and just redux, you can contribute with what you know until you master the rest.
You must be a programmer: You can contribute to design and documentation without having any programming experience.
You must be an expert: There is always something you can contribute to the project, regardless of the degree of your expertise.

Ways to contribute to a project:

Fix a bug you found
Read the documentation and if anything is confusing, help improve it
Propose a feature you want added
Help improve the design
Translate the documentation to your language

How to contribute to a project:

Fork the project
Read the readme file
Use the project by going to the url or downloading the app and suggest improvement, this gives you first hand experience on what users may need as you're putting yourself in their shoes

Look at existing issues and see what you can work on.

Looking for a project to practice try this Practice Project

Thanks for reading, let me know what you think about this and if you would like to see more, if you think i made a mistake or missed something, don't hesitate to comment

check out part 2

DEV Community: Dunsin

Self-Hosting Jitsi Meet with Docker and Cloudflare Tunnel

What is Jitsi?

Why should you use Jitsi?

Why you would want to self host Jitsi?

How Jitsi Works Under the Hood

Self-Hosting Jitsi Meet with Docker and Cloudflare Tunnel

Step 1: Install Required Software

Step 2: Clone the Jitsi Docker Repository

Step 3: Configure Jitsi Environment Variables

Step 4: Start Jitsi Services

Step 5: Expose Jitsi to the Internet Using Cloudflare Tunnel

Step 5.1: Set Up Cloudflare Tunnel

Step 6: Fix Cloudflare & Jitsi Issues

Issue 1: 405 Not Allowed Error (Nginx)

Fix: Disable Cloudflare Proxy

Issue 2: Mobile Devices Can’t Access /config.js

Fix: Bypass Cloudflare Security for /config.js

Issue 3: Mobile Devices Can’t Join Jitsi Meetings

Fix: Allow WebSockets in Cloudflare

Final Steps

Cryptography in JavaScript

What is Cryptography?

Types of Encryption

1. Symmetric Encryption

Key Elements of AES

Example: AES (Advanced Encryption Standard)

2. Asymmetric Encryption

How It Works

Hashing in Cryptography

Encryption vs. Hashing

Practical Example: Asymmetric Encryption in Projects

Conclusion

Need more knowledge?

Arrow functions in JavaScript

Introduction

Basic Syntax

Single-Line Arrow Functions

Multi-Line Arrow Functions

Comparison with Traditional Functions

Syntax Differences

Arrow Function

In single line format

In Multi-line format

Regular Function

Behaviour Differences

Practical Example

In Array Methods

In Event Handlers

Conclusions

Everyone keeps saying to document your code, what do they actually mean

Why index in programming starts from 0

Introduction

Historical Context

Technical Explanation

Common Misconceptions

Conclusion

6 JavaScript features to improve your productivity

The Ultimate beginners guide to open source – part 4: Why you should contribute to open source projects

The Ultimate beginners guide to open source – part 3: ways to find open source projects to contribute to

The Ultimate beginners guide to open source – Part 2: Defeating the fear of contributing

The Ultimate beginners guide to open source – part 1

Issue 2: Mobile Devices Can’t Access `/config.js`

Fix: Bypass Cloudflare Security for `/config.js`