teleren/devto huggingface dataset:
DAY 78 - Finding Kth Missing Positive Integer
Tags: leetcode, algorithms, codenewbie, coding
Published: 2023-08-20 17:54:01

Hey Guys! It's day 78 and we are going to do another binary Search question. This problem is quite easy so I won't be going in depth about problem breakdown.

## Question: [_Finding Kth Missing Positive Integer_](https://leetcode.com/problems/kth-missing-positive-number/description/)

---

### Problem Description

Given an array `arr` of positive integers sorted in a strictly increasing order, and an integer `k`.

Return the `kth` positive integer that is missing from this array.

---

**Example 1:**

**Input:** arr = [2,3,4,7,11], k = 5
**Output:** 9
**Explanation:** The missing positive integers are [1,5,6,8,9,10,12,13,...]. The 5th missing positive integer is 9.


---


### Approach Overview

_The problem can be solved efficiently using a binary search approach. The idea is to perform a binary search on the array to find the position where the kth missing positive integer should be located._

The approach involves the following steps:

1. Initialize two pointers `left` and `right` representing the search range. `left` starts from 0 and `right` starts from `n - 1`, where n is the size of the array.

2. Perform a binary search loop while `left` is less than or equal to `right`.

3. Calculate the midpoint `mid` of the search range.

4. Calculate the number of missing positive integers up to the `mid` index using `missingCount = arr[mid] - (mid + 1)`.

5. Compare the `missingCount` with the given `k`:

   - If `missingCount` is less than `k`, it means that the kth missing positive integer is to the right of the `mid` index. In this case, update `left = mid + 1`.

   - If `missingCount` is greater than or equal to `k`, it means that the kth missing positive integer is to the left of or at the `mid` index. In this case, update `right = mid - 1`.

6. After the binary search loop, the kth missing positive integer can be found at `k + right + 1`.

## Code:
```cpp
class Solution {
public:
    int findKthPositive(vector<int>& arr, int k) {
        int n = arr.size();
        int left = 0, right = n - 1; // Initialize search range

    while (left <= right) { // Binary search loop
        int mid = (left + right) / 2; // Calculate midpoint
        int missingCount = arr[mid] - (mid + 1); // Calculate missing count
        
        if (missingCount < k) {
            // If missing count is less than k, move search to the right
            left = mid + 1;
        } else {
            // If missing count is greater than or equal to k, move search to the left
            right = mid - 1;
        }
    }
    
    // The kth missing integer is found at k + right + 1
    return k + right + 1;
    }
};

```

**Complexity Analysis:**

| Complexity | Notation | Explanation |
|------------|----------|-------------|
| Time       | O(log N)  | The binary search performs a logarithmic number of iterations. |
| Space      | O(1)     | The algorithm uses a constant amount of extra space. |
Enhance the way you list Git branches with these 3 options
Tags: git
Published: 2023-08-20 17:44:59

_This post is part of my ["Shorts"](https://poddarayush.com/shorts) series, where each post is concise and hyper-focused on a single concept._

As a developer, you may already be aware of the `git branch` command which is used to list all the branches in your repository. The sample output of a `git branch` command looks like this:

```text
* color-hidden-files
  main
  show-abs-path-xargs
  size-in-bytes
```

Here, the asterisk (`*`) sign represents the current branch, i.e., the branch that the [HEAD pointer](https://dev.to/ello/did-you-know-a-git-branch-is-essentially-a-41-byte-file-4po2) points to.

In this [short](https://poddarayush.com/shorts) post, I intend to list some of the most used command line flags that can be used with the `git branch` command. These flags will help you:
1. View the last commit in each branch
2. List only merged/non-merged branches

## View the last commit in each branch
If you use the `--verbose` (`-v`) flag, you can view the last commit in each branch. The sample output of running `-v` flag looks like this:

```text
* color-hidden-files  305e248 refactor: split into two methods
  main                28c188b Merge pull request #594 from ayushpoddar/show-abs-path-xargs
  show-abs-path-xargs 44c370b Revert "version bump"
  size-in-bytes       5f3b880 spec fix: not more than 3 lines in the spec output
```

## List only merged branches
If you want to see only those branches which have been merged into the current branch, then you need to use the `--merged` command line flag. The output of running the command with the `--merged` flag is similar to the output of a simple `git branch` command. However, it filters out all the branches whose work is pending to be merged into the current branch.

> You can delete the branches whose commits have been merged into the current branch because the work done in those branches is available in the current branch.

## List only non-merged branches
Similar to above, if you want to list only those branches that have some commits which are not part of the current branch, then you can use the `--no-merged` command line flag.

## References
- [https://git-scm.com/book/en/v2/Git-Branching-Branch-Management](https://git-scm.com/book/en/v2/Git-Branching-Branch-Management)
A.B.O.M.N.S (A Based on My Needs System) - Dangerous Illegal Self-Designed Proton Mail Bulk Automation in 5 Days.
Tags: fuckingawesomejsdetecti
Published: 2023-08-20 17:19:29

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

DEMO: Multiprocessing, 2 Proton CAPTCHAs, 1 Hcaptcha
{% youtube bbkgL2c9lBI %}



Like more? 
[Lemin CAPTCHA Two Hours Domination Showcase](https://jjxxgalaxy.wordpress.com/2023/07/28/js-detection-2-hours-conquer-lemin-captcha/)
Day 5/100- Progress and Weekend Adventures
Tags: beginners, programming
Published: 2023-08-20 17:10:53


Hello everyone,

Day 5 of this coding adventure has been an interesting mix of coding progress and weekend enjoyment. 🌟

Today, I focused on refining my hotel management project, and while it might sound like a small step, I'm excited about the one function I managed to create. Sometimes, it's these incremental victories that lay the foundation for greater achievements.

As I delve deeper into the project, I'm figuring out the best way to proceed further. The beauty of coding lies in the puzzle-solving aspect—breaking down complex challenges into manageable pieces.

Speaking of weekends, I also made sure to enjoy some quality time with my family. Movie binge-watching was on the agenda, and it was a fantastic way to unwind. But here's the twist—I didn't let the weekend stop me from coding. Yes, I managed to sneak in some coding amidst the relaxation.

Balancing work and leisure is key to maintaining our enthusiasm and energy. As this journey continues, I'm determined to keep the momentum going and make the most out of every day, whether it's about coding or creating memorable moments.

Wishing you all an amazing day,
Sivaraghavi
Detect QR codes in videos using Python
Tags: python, coding, programming
Published: 2023-08-20 17:00:34

## Hi 🙂🖐

In this post, i will show you how to Detect QR codes in videos using Python

## step 1

You need any video that contains a QR code.


## step 2

import libraries

```python

from pyzbar.pyzbar import decode
from PIL import Image

import moviepy.editor as mp

```

## step 2

Write Qrcode Detector

```python


from pyzbar.pyzbar import decode
from PIL import Image

import moviepy.editor as mp


def decode_image(image_array):
    result = decode(Image.fromarray(image_array))
    return result

def get_frames():
    video = mp.VideoFileClip('test.mp4')
    for i, frame in enumerate(video.iter_frames()):
        result = decode_image(frame)
        if result:
            print(f' Qrcode code detected in frame : {i} 🙂')
            print(f'Qrcode date : {str(result[0][0])}')
    


get_frames()

```

## Result :

```
 Qrcode code detected in frame : 149 🙂
 Qrcode data : b'123'
 Qrcode code detected in frame : 150 🙂
 Qrcode data : b'123'
 Qrcode code detected in frame : 151 🙂
 Qrcode data : b'123'
```



**Now we're done 🤗**

**Don't forget to like and follow 🙂**

**Support me on PayPal 🤗**
https://www.paypal.com/paypalme/amr396
Data Structures #1: Stack - Introduction
Tags: programming, architecture, computerscience, softwareengineering
Published: 2023-08-20 16:54:05

## What is Stack
Stack is a linear type data structure that follows LIFO (last in, first out) system. The system implies that the last item inserted into a stack is the first item to be removed.
![Push operation is stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lakkjmg1l9r3yufmc94e.png)

## Implementation of Stack in Real Life
Many real-life examples of a stack, an example is a stack of plates. When you clean dirty plates, you will pick the top plate.
![Stack of dirty plates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8h73se1p74nzbbn9h4s.png)

## Stack Operations
Generally, there are 6 operations in Stack data structure:
### 1. Push
Push is the operation of inserting an item into a stack.
### 2. Pop
Pop is the operation of removing the top-most item from a stack.
### 3. Peek
Peek is the operation of peeking the top-most item of a stack without removing it.
### 4. Is Empty
Is Empty is the operation to check if the stack is empty or not.
### 5. Is Full
Is Full is the operation to check if the stack is full or not.
### 6. Size
Size is the operation to get the size of the stack.

---

There you go, it is a little introduction from me about stack data structure. Next post, I will begin to implement it to a programming language. Thank you for reading this article, and stay tune!
God Shri Hanuman Ji
Tags: hanuman
Published: 2023-08-20 16:46:35

[Hanumanji ](https://www.hanumangi.com)is one of the most powerful deities in the world. It is the time to praise Hanuman, the great god of Hinduism. He has many names and forms and is worshiped by millions of people all over the world. Hanuman Temple is a particularly sacred place for Hindus where they perform certain activities like chanting, prayer and offering food and flowers to Lord Hanuman. Here we have the explanation and information of Hanuman, to introduce you to the legend
How to decode QR code in Python
Tags: python, coding, tutorial
Published: 2023-08-20 16:28:44

## Hi 🙂🖐

In this post, I will show you how to decode QR code in Python using a library called pyzbar.

## step 1

install pyzbar `pip install pyzbar`

## step 2

Generate qrcode 

```python

import pyqrcode

qr = pyqrcode.create('123')
qr.png('test.png', scale=6)

```

Now we have a qrcode image for the test

## step 3

Write decoder script

```python

from pyzbar.pyzbar import decode
from PIL import Image

result = decode(Image.open('test.png'))
print(result)

```

## Result :

```
[Decoded(data=b'123', type='QRCODE', rect=Rect(left=24, top=24, width=126, height=126), polygon=[Point(x=24, y=24), Point(x=24, y=150), Point(x=150, y=150), Point(x=150, y=24)], quality=1, orientation='UP')]
```

**Now we're done 🤗**

**Don't forget to like and follow 🙂**

For more information 
https://pypi.org/project/pyzbar/
Generate audio using python 😎
Tags: python, coding, programming
Published: 2023-08-20 16:10:45

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

## **code**

```python

import winsound
import random

winsound.Beep(frequency = random.randint(10, 1000), duration = 300)

```
🚀 Futuristic Sci-Fi Card with Mind-Blowing Hover Effects using HTML and SCSS 🌌
Tags: codepen, webdev, css, ui
Published: 2023-08-20 15:55:39

{% codepen https://codepen.io/Smit29/pen/BavyNNp %}

I've always been attracted to the futuristic and science-fiction aesthetic. The sleek lines, bold colors and interactive elements in sci-fi movies and games hold an irresistible allure. I wanted to capture that essence in a web component.

**Using clip-path for the Futuristic Design**
The futuristic design of the card is achieved through the clip-path property. The polygon value of clip-path allows us to create custom shapes. In this case, it's used to give the card its unique, angled appearance.

Feel free to check out the full code and a live demo of the sci-fi card on [CodePen](https://codepen.io/Smit29/pen/BavyNNp).
Record Audio From Computer Speaker on [ Not from the microphone
Tags: python, code, programming
Published: 2023-08-20 15:51:00

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



## step 1

install sounddevice `pip install sounddevice`

## step 2

Go to sound device setting and Enable Stereo Mix


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

## step 3

```python

import sounddevice as sd
from scipy.io import wavfile

sd.default.device[0] = 0

def record():
    duration = 10
    frames = 44100
    rec = sd.rec((frames * frames), samplerate = frames, blocking=True, channels=1)
    wavfile.write('test.wav', frames, rec)
    

record()


```

**Now we're done 🤗**

**Don't forget to like and follow 🙂**

**Support me on PayPal 🤗**
https://www.paypal.com/paypalme/amr396


**Source**: https://www.tutorialexample.com/python-record-audio-from-computer-speaker-on-win-10-python-tutorial/
Next.js App Router Dynamic Sitemap & SEO Metadata
Tags: react, nextjs, seo
Published: 2023-08-20 15:50:22

---
title: Next.js App Router Dynamic Sitemap & SEO Metadata
published: true
description: We'll add a dynamic sitemap and metadata to our blog using Next.js and the App Router.
tags: react, nextjs, seo
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-20 15:45 +0000
canonical_url: https://codebushi.com/nextjs-app-router-dynamic-sitemap-seo-metadata
---

{% youtube 581Rqs7W3xc %}

Let's add a dynamic sitemap.xml file to our Next.js blog, built using the new Next.js App Router. We'll also add some helpful metadata tags including the canonical url tag, the Open Graph protocol og tags, and twitter cards.

Key Takeaways:

1:02 - A sitemap.xml file is essential to any website's SEO. It signals to search engines, like Google, that your site and pages exist.

3:34 - You can create a sitemap.ts page under the /app directory to generate a sitemap with Next.js

5:41 - To make a sitemap that is dynamic, you'll need to add or re-use code that loops through all of your blog posts or website pages, and get the url for each post or page.

9:44 - Once your sitemap.xml is created, you'll want to submit this to Google Search Console so that it can start crawling and indexing your website's pages and blog posts.

11:32 - We take a look at how metadata and meta tags work with the Next.js App Router. We also start to add other meta tags

14:09 - The canonical url will help search engines know which url you want to be the "source of truth" for a particular page. This is the url that Google will want to index in the case of duplicate or near duplicate pages or links.

15:36 - The Open Graph protocol tags will help show a nice picture and title when sharing your website with social media platforms such as Facebook and LinkedIn.

17:56 - Twitter, or X, has specific meta tags it will look for when displaying your website on its platform. The twitter card metadata will make sure things look the way you want. You can preview these by going to any open graph preview site, such as https://www.opengraph.xyz/

19:37 - We add semi-dynamic metadata tags to our blog posts, and create a helpful function to generate the Next.js Metadata object.

Here are some code gists for the code seen in the video:

Sitemap.ts - https://gist.github.com/ChangoMan/824daa0b4fbd6f824d2e8a2ab1532006

Layout.tsx with Metadata - https://gist.github.com/ChangoMan/a0754b24464cace64126d684bb45a812
Disabling ESLint in Firebase Cloud Functions using Node
Tags: reactnative, tutorial, programming, mobile
Published: 2023-08-20 15:37:20

Hola hola,

I was working inside of a Firebase Cloud Functions project and my builds were failing because ESLint didn't like me using `any`. 

Ideally, we're not using `any` in our code but it's not a real priority for an early stage product.

## Problem

If you're receiving an ESLint error then you can copy and paste the warning(s)/error(s) listed.

```
/Users/matthewruiz/github/golfassistai/golf-assist-ai-cloud-functions/functions/src/api/firestore/DocumentRetriever.ts
   63:13  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
   92:13  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  250:10  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  278:18  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
```

## Solution
Add to `rules` object of `.eslintrc.js` along with a `off` value.

```
"@typescript-eslint/no-explicit-any": "off"
```

Hope that helps.

-Matt
Flicker free HTML forms using Go templates
Tags: webdev, go
Published: 2023-08-20 15:30:44

When it comes to creating and populating HTML forms, there are many choices. The pivotal question: Should the form be crafted on the server or the client side? After some considerations, I've chosen a different approach. Something like "SSR Hybrid method."

How It Works:

1. The Go render a HTML template form.
2. During the rendering, data injected into the form. 
3. Labels are translated to the user's language.
4. The page is then send to memory buffer
5. Injected into the HTML body.
6. The form is fetched and integrated into the innerHTML.

The Go func that make this possible sending REST string from  Javascript fetch() **tsk/view/1**

```
// write form to buffer an send to html body
func get_card(w http.ResponseWriter, module string, mode string, val string) {
	page := module + "_" + mode // form name
	data := json2map4id(module, val) // call the API
	var buf bytes.Buffer 
	tpl.ExecuteTemplate(&buf, page, data) // Render to buffer
	fmt.Fprint(w, buf.String()) // write to html body
}
```

Benefits of the SSR Hybrid Approach:

**Safety** The hybrid approach enhances security by reducing exposure of APIs to the internet directly, thanks to Go's compiled nature.

**Speed & Flicker-Free Experience** By optimizing initial page load times with Server-Side Rendering and subsequently employing JavaScript for seamless updates, users experience fast interactions without flickers.

**Maintenance Simplified** Combining related forms into single HTML templates streamlines maintenance and curbs complexity, even as your project grows.

**Translation** Go's HTML templating makes multilingual support simpler. All translations are handled server-side, ensuring global accessibility.

**Seamless Form Switching** The hybrid technique facilitates dynamic switches between forms, delivering a polished and uninterrupted user journey.

Check the ["SSR Hybrid method" here](form.go4webdev.org/howto) in action. Code snippets attached.
Creating A Virtual Machine Using CLI in Azure
Published: 2023-08-20 14:18:41

**1.** The first step would be logging into your Azure portal account.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1n71rloqufv8yglqps0g.png)

**2.** The second step would be opening the opening the command line interface on the portal.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzkwux9ba95iq5n2u3hj.png)

**3.** For the purpose of this particular session, we will be using Powershell instead of Bash. Use the dropdown button to switch to Powershell.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34leg0xdew80ah3nblsx.png)

**4.** After switching to Powershell, it should look like similar to the image below.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12y8h0daqwxu55fmh5sj.png)

**5.** Create a Resource Group using the syntax below.
`New-AzResourceGroup -Name 'myCoolerRg' -Location 'EastUS'`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdnfnk2r6epfjfxq0yri.png)

**6.** Create the virtual machine using the syntax below.

```
New-AzVm `
-ResourceGroupName "myCoolerRg" `
-Name "myVMps" `
-Location "WEST US" `
-VirtualNetworkName "myVnetPS" `
-SUbnetName "mySubnetPS" `
-SecurityGroupName "myNSGPS" `
-PublicIpAddressName "myPublicIpPS"

```

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

**7.** Notice that the code snippet specified above is a multi-line code. This is achieved with the use of the backtick symbol
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf7piju0jmewfq80fiul.png)

**8.** After running the code, you will be prompted to enter the username and password that will later be used to access the virtual machine.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpu9k62ic7k3terjz9r1.png)

**9.** Ensure that the password created follows the guidelines specified below otherwise it may not work.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6opmkhcwp9vl347twijo.png)

**10.** After inputting the username and password, you should get the prompt below signifying that the Virtual Machine is being created.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfr7u6ms1u7vh5jugpef.png) 

**11.** Once successfully created, you will see a message indicating the creation of the Virtual Machine and the attributes that you had earlier specified.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3i8ix1jx94x0kyzfp3hm.png)