teleren/devto huggingface dataset:
How to Make your first Open Source Contribution and Get Paid
Tags: webdev, react, javascript, beginners
Published: 2023-06-04 11:16:35

✨ Open source is like an ocean where there are many gems hidden but very few people dive to find one.

![Ocean meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cifsuiqab92t2xjndph.png)

When it comes to learning "How to code or What to code" People often comes up with these problems:-

- Which language to learn first
- Which course should I take
- I am not feeling confident 
- Which projects to choose

All of these problems arises because we are not aware about the awesome things like Open Source Projects.

🔥 If someone wants to learn Programming/Development the best way to do this is:-

- Pick any language and do a crash course from youtube
- Don't spend 3-7 days on a course or videos
- Finish basics under 1-2 days and Jump to the Projects

😔 Now Problem is How to find projects? And the answer to that is, Get ideas from 

- ProductHunt
- WellBound
- Y Combinator

See, what problems people are solving and how you can take any idea from bigger problems and build a project to solve a smaller problem.

😎 **For Ex:- Instead of building a Whole Hotel Booking website, You can build a booking system only where people can login and book their dates on calender.**


😇 After Building 2-3 smaller projects which will make the Languages and Frameworks on your tips. Now, its time to do some real stuff

- Go to [Quine](https://quine.sh/) or [Good First Issues](https://goodfirstissues.com/)
- Find beginner issues in a project on which you can work
- Make sure you know Git and Github before this (Do a crash course on it too)
- Now, it's the time to Join a community which you can find in the Repository of that Open Source Project and communicate with time
- Ask doubts, and make one issue assigned to you and start working

😅 Things to Remember:-

You might feel demotivated, not able to solve an issue etc. In that case you can Join our [Discord Community](https://discord.gg/Ms4Ggc3q) and can ask doubts in the general channel.

![Discord](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvleefcmndjcp71svn8l.png)

And If you will make contributions in our Open Source Project (Beginner friendly) You will get Paid, and will get Guidance for free.

On our [YouTube](https://www.youtube.com/channel/UC09qo_osXVNMTjaxpQh3Xgg) channel. You'll get the content which will be beginner friendly and will be more aligned towards how things work.

Much more to come, Follow for more....
Легкий способ продемонстрировать свой сайт другим
Published: 2023-06-04 10:59:17

Сегодня хотел бы рассказать о такой библиотеке как [localtunnel](https://www.npmjs.com/package/localtunnel). С помощью нее вы можете показать свой сайт другим без сервера и домена. Так же с помощью нее можно работать в паре к примеру один пишет бекенд, другой фронтенд. Этот туннель полностью бесплатный, что очень радует. Я нашел его когда искал альтернативу для ngrok-free.

Чтобы установить ее на ваш пк для начала скачаем глобально эту библиотеку:

```
npm i -g localtunnel
```

Теперь просто запускаем ее в консоли

```
lt --port 3000 --subdomain kesiodev
```

Думаю по флагам тут все понятно. Теперь мой сайт работает на https://kesiodev.loca.lt/
Python script to find unused EC2 subnets
Tags: python, aws
Published: 2023-06-04 10:57:47

Recently, I was working on managing all VPC related resources using Terraform for all our AWS accounts. For one of the accounts, I stumbled upon a rather unpleasant situation where I saw a few hundred subnets in a region and I was left wondering whether all these subnets are actually in use. 

Since, I am too lazy to go through them one by one manually, I wrote a python script to check which of these subnets are actually serving a purpose i.e has an ENI attached to it.

### Step 1: List all subnets in our VPC
```python
import subprocess
import json

def list_subnets(vpc_id):
    subnets = json.loads(subprocess.getoutput('aws ec2 describe-subnets'))['Subnets']

    def _filter(subnet):
        if subnet['VpcId'] == vpc_id:
            return True
        return False

    def _map(subnet):
        tags = subnet['Tags']
        name = ''
        for tag in tags:
            if tag['Key'] == 'Name':
                name = tag['Value']
        return {
            subnet['SubnetId']: (name, subnet['CidrBlock'], subnet['AvailabilityZone'], subnet['MapPublicIpOnLaunch'])
        }

    return list(map(_map, filter(_filter,subnets)))
```


### Step 2: Check if a subnet has an ENI attached
```python
def check_if_subnet_has_enis_attached(subnet_id):
    cmd = f"aws ec2 describe-network-interfaces --filters Name=subnet-id,Values={subnet_id} --query 'NetworkInterfaces[*].Description'"
    enis = list(json.loads(subprocess.getoutput(cmd)))

    for eni in enis:
        if len(str(eni).strip()) == 0:
            enis.remove(eni)

    return enis

```

### Step 3: Find list of all unused subnets
```python
if __name__ == '__main__':
    subnets = list_subnets()

    unused = []
    for subnet in subnets:
        for k, v in subnet.items():
            if len(check_if_subnet_has_enis_attached(k)) == 0:
                unused.append(subnet)

    print(unused)
```

If you found this post helpful, CLICK BELOW 👇 <a href="https://www.buymeacoffee.com/ashiqurrahman" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Beer" style="height: 80px !important;width: 240px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
JavaScript in depth
Tags: javascript, tips, webdev, programming
Published: 2023-06-04 10:17:27

## Interesting Articles on Medium.com dealing with JavaScript

- [Web Push Notifications with JavaScript](https://medium.com/javascript-in-plain-english/web-push-notifications-with-javascript-444819d673b3)
_Step-by-step guide on implementing push notifications in web applications and websites_


- [Strange Objects in JavaScript](https://medium.com/javascript-in-plain-english/strange-objects-in-javascript-51e7ab3d273e)
_Object initializers and the unusual freedoms they allow the programmer_


- [10 Ways to Define a JavaScript Function](https://medium.com/javascript-in-plain-english/10-ways-to-define-a-javascript-function-d28805a1aa7e)
_The unusually and perhaps unnecessarily varied possibilities of creating functions in JS_


- [Enhance your website with public APIs and JavaScript](https://medium.com/javascript-in-plain-english/enhance-your-website-with-public-apis-and-javascript-7b298a603a1c)
_Discover how to integrate external APIs to enrich and improve your website’s functionality_


- [A Bit of Reactivity with Vanilla JS](https://medium.com/javascript-in-plain-english/a-bit-of-reactivity-with-vanilla-js-bde8f1a40479)
_Is reactive programming difficult with simple standard tools?_


- [Transforming JS Widgets into Web Components](https://medium.com/javascript-in-plain-english/transforming-js-widgets-into-web-components-1bde419bf706)
_A software engineering exercise showing the benefits of Web Components_


- [7+1 JavaScript Frameworks Compared](https://medium.com/javascript-in-plain-english/7-1-javascript-frameworks-compared-a58f8f16239a)
_An unbiased benchmark with a little help from AI_


- [Is the End Near for All JavaScript Frameworks?](https://medium.com/javascript-in-plain-english/is-the-end-near-for-all-javascript-frameworks-e8596b0bcea6)
_Superstructures invented to speed up large-scale development are rapidly becoming useless because of AI_


- [Five reasons not to adopt any JavaScript framework](https://medium.com/javascript-in-plain-english/five-reasons-not-to-adopt-any-javascript-framework-7e815f1073d1)
_After applying several cutting-edge javascript frameworks, I found good reasons to stop relying on them_


- [Mastering dates in JavaScript](https://medium.com/javascript-in-plain-english/mastering-dates-in-javascript-93974ebd06f6)
_How not to be frustrated by the insufficiencies of the Date object_


- [Juggle arrays like a pro with these JavaScript statements](https://medium.com/javascript-in-plain-english/juggle-arrays-like-a-pro-with-these-javascript-statements-929be25ccbd5)
_6 not-so-easy pieces with JavaScript arrays_


- [Beware of unsafe implicit globals in JavaScript](https://medium.com/javascript-in-plain-english/beware-of-unsafe-implicit-globals-in-javascript-f370ccca8fdb)
_The hidden danger of undeclared variables and how to get rid of them_
Goodbye StackOverflow
Tags: webdev, beginners, programming, productivity
Published: 2023-06-04 09:26:08

If you've been a programmer for more than two years, you're probably familiar with Stack Overflow, a popular online forum where developers can ask and answer questions about programming languages and problems. It's a valuable resource for programmers of all levels, and it's also a source of many jokes about developers who rely too heavily on Stack Overflow answers.

I've recently noticed that there is an increasing reliance on ChatGPT, Bard, and other AI platforms among up-and-coming programmers. Could this signal the end of Stack Overflow? Are these new AI tools good replacements for Stack Overflow? Is the idea of relying on a platform for debugging a good one?

In conclusion, are AI-generated codes suitable for young developers to add to their codebase without extensive refactoring? I'd love to hear your thoughts.
Download Instagram reels by scraping using NodeJS
Tags: node, webscraping, instagram
Published: 2023-06-04 09:03:16

## Introduction

Today, we are going to use web scraping in NodeJS to extract direct download links for Instagram Reels Video

## Install Required NPM Packages

**`Puppeteer`** : Puppeteer is a Node.js library which provides a high-level API to control Chrome/Chromium ( Browser )

**`Cheerio`** : Cheerio is a HTML DOM parser and helps us traverse raw HTML and XML

```bash
npm install puppeteer
npm install cheerio
```

Firs, we need get the raw generated HTML, using `Pupperteer` and then parse the HTML using `Cheerio` to extract out the direct download link.




**Note**: We are using `Puppeteer` to get the HTML because the video link is hydrated into the page using Javascript. If, we use a simple request to get the raw HTML, the video tag won't be available

## First Step (Get the raw HTML)

This is how the raw HTML looks likes when we inspect the page


![Instagram Reel Link Page Inspect Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvu4y0uz44vowrwlvivm.png)

Define a function that gets the raw HTML, including the `video` tag

```javascript
async function getHTML(url) {
  // Launch a headless browser instance
  const browser = await puppeteer.launch({ headless: "new" });

  // Create a new page
  const page = await browser.newPage();

  // Navigate to a URL
  await page.goto(url);

  // Wait for the video tag to appear
  await page.waitForSelector("video");

  // Get the HTML content
  const html = await page.content();

  // Close the browser
  await page.close();
  await browser.close();

  // Return the HTML content
  return html;
}
```

## Second Step (Parse the raw HTML)

We are going to parse the raw HTML, that we get from the `getHTML()` function

```javascript
async function getReelVideo(url) {
  const html = await getHTML(url);

  // calls cheerio to process the html received
  const $ = cheerio.load(html);

  // Searches the html for the video tag and get the src atttribute
  const videoDirectLink = $("video").attr("src");

  // returns the direct video link
  return videoDirectLink;
}
```

## Last Part

Now we can run the `getReelVideo()` function the get direct download link of a Instagram Reel

```javascript
getReelVideo("https://www.instagram.com/reel/CrQ9TvAAuRe/").then((link) =>
  console.log(link)
);
```

**Output:**

```bash
https://instagram.fccu19-1.fna.fbcdn.net/v/t66.30100-16/120641351_1702239160229021_7989127058867652451_n.mp4?_nc_ht=instagram.fccu19-1.fna.fbcdn.net&_nc_cat=105&_nc_ohc=QoyEWM5tB-AAX_8SGz5&edm=AP_V10EBAAAA&ccb=7-5&oh=00_AfAU1hwxYlztdGfqHxpNxyTBDCOzNnLwBw7KnEdj7dLAuw&oe=6463ADB1&_nc_sid=4f375e
```
Creating Leaf Browser Clone: Steps and Best Practices
Tags: webdev, browser, leafbrowser, beginners
Published: 2023-06-04 08:55:50

In today’s digital age, web browsers have become an essential tool for accessing and exploring the vast realms of the internet. With numerous browser options, developers constantly look for innovative ways to create unique browsing experiences. One such endeavour is the creation of a “Leaf Browser clone.” This article will delve into the concept of a Leaf Browser clone, its benefits, and how to create one.

So, let’s embark on this exciting journey of browser customization!

## What is a Leaf Browser?
A Leaf Browser is a unique web browser with a personalized browsing experience. It offers a range of customization options, allowing users to tailor the browser’s appearance, functionality, and features according to their preferences. From changing the colour scheme to adding extensions and plugins, a Leaf Browser clone empowers users to create a browser that reflects their style and enhances their browsing experience.

## Why Create a Leaf Browser Clone?

1. Uniqueness: Creating a [Leaf Browser](https://github.com/KingOfCoders/LeafBrowser) clone allows you to stand out by offering a different browsing experience. It enables you to cater to specific user needs and preferences that mainstream browsers might not fully address.

2. Personalization: With a Leaf Browser clone, users can personalize their browsing experience. They can customize the interface, add or remove features, and choose from various themes, thus making their browsing environment their own.

3. Branding Opportunities: A Leaf Browser clone provides an excellent opportunity for branding for businesses and organizations. By creating a custom browser, they can showcase their brand identity and logo and even incorporate exclusive features that align with their services or products.

---

Continue Reading......

This Blog is Originally Published at The Last Words

Read More from Here: [Creating Leaf Browser Clone](https://thelastwords.wiki/leaf-browser-clone/)
Python列表的性能劣势（动态数组）
Tags: python, 动态数组
Published: 2023-06-04 08:33:26

### 其实这不仅仅存在于Python，其存在于很多语言中，”动态数组“在很多语言中都有实现，在Python中叫”list“;只要是动态数组都有这个缺陷

---

- 1、空间占用冗余
  > 动态数组的实现是基于标准数组；一开始会创建个固定大小的标准数组，当满了的时候就扩容为原来等两倍（也有可能是其他倍数，通行标准是2倍，这样时间复杂度最小），这就产生了一个问题：在内存利用率上产生了较大的冗余；最极端的情况会趋近于一倍

- 2、内存碎片
  > 由于扩容的时候分配的内存空间并不是连续的，而在动态数组的生命周期内又会反复的扩容，这就可能导致大量的内存碎片的出现

  - 2.1、内存浪费：由于内存碎片过小导致这些碎片无法被分配调用，大量这样的小碎片就导致了实际有内存没用，但是应用就是无内存可分配
  - 2.2、增加分配算法的负荷：分配算法需要不断修改内存碎片的分布，这可能导致性能下降
  - 2.3、增加分配时间：为了找到一块连续的内存空间，操作系统需要在大量的内存中碎片中寻找
  - 2.4、提高CPU负载：为了管理大量的内存碎片，会占用较高的CPU资源
Introduing: Swissfolio, a free and open source landing page template.
Tags: astro, tailwindcss, opensource
Published: 2023-06-04 08:28:44

Introducing ⏤ Swissfolio

A free and open source personal landing page template with Swiss Design in mind and built with Astro &  Tailwind CSS

Includes:

✺ Hero
✺ Intro 
✺ Project 
✺ Testimonials
✺Featured work
✺ Animations with AOS
✺ Fancy color palette

GitHub ⏤ http://github.com/michael-andreuzza/swissfolio
Live ⏤ http://swissfolio.vercel.app

![header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uitppn33l9luohqr6n65.png)
![body](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/duokp5g92on2p6y7nrqr.png)
![footer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyclzabonuo29hk7r81v.png)
How to fix CORS problem when sending data with axios from React.js to Laravel.js?
Tags: javascript, react, laravel, programming
Published: 2023-06-04 08:10:59


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

i am also using sanctum and sanctum should take care of the cors but nope i get the problem ?
Tic-tac-toe Multiplayer Game
Tags: tictactoe, react, firebase, webdev
Published: 2023-06-04 07:38:20

You can see the Demo from here 👇
https://tictactoe-multiplayer29.netlify.app


For this project, I have used these libraries,
▶️ React JS
▶️ Firestore and Firebase Realtime Database
▶️ Firebase Google Authentication
▶️ Styled-Components for styling


Presentation Video
{% embed https://youtu.be/yeqmWWsdgpA %}

**Login Page**
![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ze2n99rlr9gakxqa7fww.PNG)

**Google Authentication***
![Google Authentication](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2r3h865ya0rx41vzlsq.png)

**Page after login**
![Page after login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjiiuvqdksa2fsa04ftr.PNG)

**2 Users Page**
![2 Users Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjplvfddkjt67wbz11re.PNG)

**Lobby after Entered same room**
![Lobby after Entered same room](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd62lm8b275mj58d5gwf.PNG)

**Chat in Lobby**
![Chat in Lobby](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8colslbuoehshlaz5p29.PNG)

**Game**
![Game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llaz61q0l30a6twqxqbm.PNG)

**Chat during Game**
![Chat during Game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lm0dttmyn8jkl4y5ew6r.PNG)

Any suggestions are welcomed!
**Thanks For Reading**😄
Agile and Scrum: What Are Your Thoughts?
Tags: discuss, beginners, codenewbie
Published: 2023-06-04 07:00:00

How well acquainted are you with these methodologies? Have you ever been part of a team that followed these approaches? Share your experiences, insights, and questions. How effective are they, in your opinion, in driving successful projects?

Share your thoughts in the comments!

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
How Have You Refractored or Optimized Code for Improved Performance?
Tags: discuss
Published: 2023-06-04 07:00:00

Code optimization and refactoring are crucial for enhancing the efficiency and speed of software. Share your experience of a specific instance where you had to tackle performance issues in code. What steps did you follow to improve it? We're interested to know the outcome of your efforts and any lessons learned along the way.

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}

[Image by pch.vector on Freepik](https://www.freepik.com/author/pch-vector)
How to create API keys in Supabase for roles other than "anon" and "service"?
Tags: supabase, postgressql, postgrest, rest
Published: 2023-06-04 06:32:29

#### **If you're reading this post, you may already be familiar with Supabase. However, for those who are new, let me provide a brief introduction.**


Supabase is an alternative to Firebase that utilizes PostgreSQL as its database and offers various features, including authentication, real-time capabilities, and storage.

To get started with Supabase, follow these steps:

 

1. Obtain the JWT key from the Supabase dashboard or through this [link](https://app.supabase.com/project/_/settings/api).
![Obtain Jwt token/secret from supabase dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wo4ekl59vutdk41uaj0.png)
>Never disclose your Jwt secret/token in public

2. Create a role in your SQL editor:

```sql
CREATE ROLE your_role;
GRANT your_role TO authenticator;
-- grant role privileges here 
```

3.Visit [jwt.io](jwt.io) and populate the payload field with the following information:

![Enter data in payload field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lqc2tm48hby2mespnv6.png)

```json
    {
      "iss": "supabase",
      "ref": "project ref id",
      "role": "your_role",
      "exp": 2001128702
    }
```
>Replace ref with your project reference ID from [Dashboard](https://app.supabase.com/project/_/settings/general)


4.In the "Verify Signature" field, enter the JWT Token/Secret obtained in step 1.
>Note: Default algorithm for JWT token is "HS256"
```json
//Header
{
  "alg": "HS256",
  "typ": "JWT"
}
```

![Enter your Jwt token in Verify Signature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yh3pwcdqov93ofa6b0a.png)

5.The "Encoded/Token" field will display the newly generated token. Copy this token and include it in your REST API or client code and requests as `Authorization: Bearer new_generated_token`. This token will have all the privileges you gave to your_role role from sql editor in supabase dashboard.

![Fetch/Copy newly generated token from the Encoded field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3xrap35p2h89ohclyv3.png)

>**Note: Please exercise caution when assigning sensitive data as this role will have the privileges you grant it.**


*Peace!*
A Quick Introduction to Ballerina: The Network-Aware Programming Language
Tags: ballerinalang, http, network, programming
Published: 2023-06-04 06:23:35

Have you heard of a programming language called Ballerina? As someone who works closely with the Ballerina language design and implementation team, I wanted to shed some light on this relatively young language that has a strong focus on network integration.

Why Ballerina, you ask? It was developed with the intent of making network behaviour a first-class concept within the language, simplifying tasks such as integrating with other services (i.e., HTTP, gRPC, GraphQL, Kafka, etc.), manipulating data, handling network security, and much more.

Here's a "Hello World" service example:

```ballerina
import ballerina/http;

service / on new http:Listener(9090) {

    resource function get hello(string? name) returns json {
        // name is an optional query parameter
        string target = name == () ? "World" : name;
        string message = string `Hello, ${target}!`;
        return {"message": message};
    }

    resource function get greet/[string name]() returns xml {
        // name is a required path parameter
        xml response = xml `<message>Greetings, ${name}!</message>`;
        return response;
    }
}
```

This service presents two HTTP resources (`/hello` and `/greet/{name}`), which produce a response in JSON and XML respectively.

You can check out more detailed examples of Ballerina's [use cases in network integration](https://ballerina.io/usecases/integration/).

Although the Ballerina community is currently small and largely composed of enterprise users, it's growing and openly welcoming to anyone interested in network applications development and integration. You are warmly invited to join us on [discord](https://discord.com/invite/ballerinalang)

If you're interested in diving deeper into Ballerina, I've written a [blog post](https://bal.tips/docs/introduction/basics/) covering the basics. We also have [more examples](https://ballerina.io/learn/by-example/) for you to explore.

Let me know what you think. I'm excited to hear your thoughts and answer any questions you might have!