teleren/devto huggingface dataset:
How to set YouTube Video as Background in the Next.JS/React.Js app with styled component?
Published: 2023-09-19 10:33:49

VideoBackground.tsx

```
import React from "react";
import styled from "styled-components";

const VIDEO_WIDTH = 1920;
const VIDEO_HEIGHT = 1080;

const VideoBackgroundWrapper = styled.div`
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;

  @media (min-aspect-ratio: 16/9) {
    --video-height: 56.25vw;
  }

  @media (max-aspect-ratio: 16/9) {
    --video-width: 177.78vh;
  }
`;

const VideoIframe = styled.iframe`
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--video-width, ${VIDEO_WIDTH}px);
  height: var(--video-height, ${VIDEO_HEIGHT}px);
  transform: translate(-50%, -50%);
`;

export const VideoBackground = ({ videoId, className }: any) => {
  const yt = `https://www.youtube.com/embed/${videoId}?autoplay=1&controls=0&mute=1&loop=1&modestbranding=1&showinfo=0&enablejsapi=1&&widgetid=3&playlist=${videoId}`;
  return (
    <VideoBackgroundWrapper className={className ?? ""}>
      <VideoIframe
        width={VIDEO_WIDTH}
        height={VIDEO_HEIGHT}
        src={yt}
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      />
    </VideoBackgroundWrapper>
  );
};

```


```
app.tsx
export default function App() {
  return (
    <div className="video-layer">
      <VideoBackground
        className="image-layer"
        videoId={data?.videoId ?? "PtDIVU_tlo0"}
      />
    </div>
  );
}
```
Bamboolib : Toolkit for Smart Data Exploration and Analysis
Tags: python, datascience, powerfuldevs
Published: 2023-09-19 10:25:54

**Introduction**:
The ability to effortlessly explore and manipulate datasets is like having the **_Kryptonite_** in your toolkit. Imagine having a tool that not only lets you dive into your data with unprecedented ease but also empowers you to quickly generate the code needed to reproduce your findings. **_Bamboolib_** is a lovely little gem available for the Python ecosystem designed to transform your data exploration experience.

**Setup**:

```
#install
pip install bamboolib
#import
import bamboolib as bam
#launch
bam
```
Lets explore the dummy dataset
![Launching Data](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExd2pnbGdvM2Y0bmluNnJoMjBrZzJiN2piOGdqazJjOTA1enFjd3RoeCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7tf2kkMudOW89mnPY7/giphy.gif)

The magic here is the code is provide 

```
import pandas as pd; import numpy as np
titanicdata = pd.read_csv(bam.titanic_csv)
```
The basic things to would be to understand the dataset. 

- **Data Structure**: Examine the size and dimensions of your dataset, including the number of rows and columns. Understanding the dataset's basic structure is crucial.

- **Missing Data**: Check for missing values in your dataset. Missing data can impact the quality of your analysis, so you need to decide how to handle them (impute or remove).

- **Data Distribution**: Explore the distribution of numerical variables. This involves looking at summary statistics like mean, median, standard deviation, and visualizations such as histograms or box plots.

- **Data correlation**: look for data correlation 

The exploring data table just does that 

![Exploring Data](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbjViMHk3MDN3MHFkZWxqbHNqMDVjN3FvY3BveXJsbTY1Zm1nZ2R5OSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/bI3t0A0TY13tw1jXYw/giphy.gif)

Create various data visualizations, such as scatter plots, bar charts, heatmaps, and histograms, to gain insights and identify potential areas of interest.


![Creating visuals](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExczRxbnNkZHg2bHNyc3BtM2NndGV0cjlvc3piN3VqMm5oNnVzdml2ZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/KVgBfagCdxQQk0xR0X/giphy.gif)

```
#### Histogram
import plotly.express as px
fig = px.histogram(titanicdata.dropna(subset=['Age']), x='Age', color='Survived', facet_row='Sex')
fig
#### Barplot
import plotly.express as px
fig = px.bar(titanicdata, y='Survived', x='Pclass')
fig

```

From its runtime dataset exploration features to its ability to generate code on the fly, you'll discover how this library can empower you to be more productive, more efficient, and ultimately, more successful in your data-driven endeavors. 


**Further Read**:
[Bamboolib](https://docs.bamboolib.8080labs.com/documentation/getting-started)
Getting Started with Dart: The Essential First Step for Flutter Beginners
Published: 2023-09-19 10:25:19

Starting your journey into Flutter development is an exciting adventure. The promise of creating beautiful apps for multiple platforms is awesome. However, there's a aspect that many beginners overlook, just like I did when I first began – learning Dart, the language that powers Flutter. In this article, I'll share why mastering Dart first is crucial and introduce you to our upcoming beginner-friendly Dart tutorial series.

**The Flutter Rush:**
When you first hear about Flutter, it's natural to want to jump straight in. After all, who doesn't want to create amazing apps quickly? However, it's easy to forget that behind the magic of Flutter lies Dart, a language that you need to understand to unlock Flutter's true potential.

**Why Dart Matters:**
Dart is like the magic wand that makes Flutter work. It's the language that helps you create the logic and functionality in your Flutter apps. Before you can become a Flutter pro, you must become a Dart enthusiast.

**Learning Dart Step by Step:**
To make your journey into Dart as smooth as possible, we've designed a beginner-friendly Dart tutorial series. It doesn't matter if you're completely new to programming or just new to Dart – we've got you covered.

**What We'll Learn:**
In this series, we'll break down Dart into bite-sized pieces, so it's easy to grasp:

1: Hello dart - Here we will learn how to install and run dart, and we will write our first Dart Hello Word 😜.

2: Expressions, Variables & Constants - we will learn how to name data using variables and also get a brief introduction to Dart data types.

3: Types & Operations - In this series we will learn more about Dart data types.

4: Control Flow - In this section we’ll learn how to make decisions and repeat tasks in your programs.

5: Functions - We’ll learn how to write functions in Dart, including both named functions and anonymous functions.

6: Classes - In this section we will see a more flexible way to create your own types by using classes

7: Nullability - Ever tried to access data that's not there?, In this section we will learn and how to handle Null values.

8: Asynchronous Programming - We’ll not only learn
how to deal with code that takes a long time to complete, but along the way, we’ll also see how to handle errors, connect to a remote server and read data from a file.

**Conclusion:**
In conclusion, remember that learning Dart first is your secret weapon in becoming a skilled Flutter developer. Join us on this Dart adventure, and together, we'll unlock the full potential of Flutter. Stay tuned for our beginner-friendly Dart tutorials – we can't wait to get started with you on this exciting journey into app development! 🚀🌟
On consummating the most difficult tasks
Tags: career, beginners, productivity, development
Published: 2023-09-19 10:22:15

> Remember that the most difficult tasks are consummated, not by a single explosive burst of energy or effort, but by the constant daily application of the best you have within you.
— Og Mandino

I first heard this beautiful quote when I was a child. It turned out to be true countless times. It's by far the most profound and powerful secret I've been using to achieve my goals. While it doesn't tell me directly _what_ to do, it guides me on _how_ to approach my goals, _how_ to set my mind and prepare my body for the work. Prepare for the marathon rather than a sprint. Trust not my will and enthusiasm, but the technique and consistency.

I have a deep passion for sharing what I possess with the world and striving for mutual improvement. It's so inspiring to see that 1000 people are interested in what I'm sharing and traveling this journey together. I would like to express my gratitude to all the followers and readers for their unwavering support. And mention once again that I greatly invite Your thoughts, opinions and suggestions anytime.

Have a Great Day!
10 Key Multi-Cloud Strategies: Assessing Your Readiness for Multi-Cloud
Published: 2023-09-19 10:08:51

Author: Dave Rollins, Director of Technical Product Marketing for Cross-Cloud Services at VMware. 

One of the biggest mistakes a company can make in its multi-cloud journey is to jump in without a well-thought-out plan. In the previous post introducing the cloud smart journey, the initial phase was Cloud First. Most businesses shifted to the cloud without a thought, ultimately leading them to a state of Cloud Chaos. To create this plan, you will need to understand where you are in your cloud journey and identify any gaps with a plan on how to solve them.


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

Companies that are successful in their cloud journey focus on more than just technology; there are also people and process considerations. In addition, the cloud strategy should align with a company’s business goals. This means the right roles and responsibilities, along with the toolset to support them, are in place to support their company’s objectives.

Customers can get a clear picture of where their company is on its journey with the VMware Multi-Cloud and App Maturity Model (MCAM) tool and help drive the successful adoption of cloud technologies and services. It assesses where a company is today with multi-cloud and modern apps and what the desired future state would be. The tool utilizes a set of 30 questions across different roles in a company’s organization around the current and future state of maturity. MCAM assesses more than just the infrastructure and application aspects of a business.  

It focuses on six key domains:

- Cloud Vision and Strategy
- Business Outcomes and Goals
- Leadership, Governance, and Processes
- People, Tools, and Enablement
- Applications and Development
- Infrastructure, Data, and Platforms

MCAM calculates these details and provides two critical pieces of information:

A set of recommendations, including different services and resources, to help close the gap between where a company is today and what the desired end-state is.

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

A Gap Analysis and Heatmap to help visualize the areas that need the most attention and investment to achieve the desired maturity level.

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

The report and recommendations can be exported and shared with a VMware representative or a VMware Partner.  In addition, VMware Partners can leverage this tool and walk their customers through the assessment and recommend their own services to help close the gaps.
Different files produced in React build folder depending on machine
Tags: react, npm
Published: 2023-09-19 10:06:19

Hello Everyone, 

I have a React project on a private Git Repository.
If I clone the source code on my laptop and run `npm run build` I get a list of file like the example below:

```txt
  345.32 KB  build\static\js\vendor.js
  95.31 KB   build\static\js\services-test.js
  93.54 KB   build\static\js\cross.js
  24.11 KB   build\static\js\main.js
  23.96 KB   build\static\css\styles.css
  22.03 KB   build\static\js\a.js
  7.27 KB    build\static\js\b.js
  7.12 KB    build\static\js\c.js
  7.1 KB     build\static\js\d.js
  893 B      build\static\js\manifest.js
```

If I try to build the same exact code in another machine (it's a docker machine in this case) I get one more file (services-react.js):

```txt
  345.32 KB  build\static\js\vendor.js
  95.31 KB   build\static\js\services-test.js
  93.54 KB   build\static\js\cross.js
  24.11 KB   build\static\js\main.js
  23.96 KB   build\static\css\styles.css
  13.97 KB   build/static/js/services-react.js
  22.03 KB   build\static\js\a.js
  7.27 KB    build\static\js\b.js
  7.12 KB    build\static\js\c.js
  7.1 KB     build\static\js\d.js
  893 B      build\static\js\manifest.js
```

I know webpack do part of the job but I don't understand why this may happen.

I checked the node and npm version on both machines and they are the same. The only difference is the Operating System (Windows 10 in the first case).

Any idea on how to find why this is happening?

**EDIT**: as far as I can see, if i do the build on linux, the services-react.js file is generated. If I build on Windows, it isn't.
Transform your any images into icons for your projects🚀
Tags: flutterflow, flutterflowdev, techtips, icons
Published: 2023-09-19 09:38:22

Turn dull images into dazzling icons for your projects. Say goodbye to the never-ending, icon conversion struggle! 

🔗 Dive right in and start exploring: [https://www.flutterflowdevs.com/blog/convert-images-into-icons-for-your-flutterflow-projects]

👉 Follow us on Dev.to for more developer tips and tricks! Don't miss out on the latest updates. 🔥💎🚀
Compiled 100s of useful learning resources for developers, using a tool i built
Published: 2023-09-19 09:26:07

####Over 1000+ collections of resources are publicly available to discover on [linkcollect.io](https://linkcollect.io), 

####I compiled 15 that i liked and are helpful for developers. 


![Preview of collection on linkcollect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t35sjczb320ahiwwp393.png)

checkout all of them (in above image) [- here](https://linkcollect.io/askwhyharsh/c/647c3dac129194f5ff6deefd)

---

WEB3 learning resources - [checkout](https://linkcollect.io/linkcollect.io/c/644e495a8427532461e4bcc4blockchain )

Blockchain development - [checkout](https://linkcollect.io/footballstarsstudio.cr7/c/644e78c78427532461e4e468)

MERN stack resources - [checkout](https://linkcollect.io/siddharthy123456/c/649c746a7018a7c77e3af389)

DSA resources - [checkout](https://linkcollect.io/askwhyharsh/c/64c1a32fd6d49001ddeacba8)

Leetcode ? - [checkout](https://linkcollect.io/askwhyharsh/c/64a301c27018a7c77e3b0c33)

ML resources - [checkout](https://linkcollect.io/lokeshwarlakhi/c/647214e7129194f5ff6d84ae)

Learning Docker ? - [checkout](https://linkcollect.io/dkarthik315/c/64a6dd3d7018a7c77e3b1e99)

building chrome extension in react ? - [checkout](https://linkcollect.io/honisingh2003/c/6474de94129194f5ff6d98f8)

---

some tech blogs ( i will add more , comment if you know any more) - [checkout here](https://linkcollect.io/askwhyharsh/c/65020874e7cc11eddc4db628)

learning git and github ?  - [checkout this](https://linkcollect.io/dkarthik315/c/64a64cbf7018a7c77e3b1ab7)


---

**Languages**
 Golang ? - [checkout here](https://linkcollect.io/askwhyharsh/c/64988745129194f5ff6eb8e7)
 Rust ? 1 - [checkout here](https://linkcollect.io/alekarshivam23/c/644cf944015501c19cce1b91) 
 Rust ? 2 - [checkout here](https://linkcollect.io/askwhyharsh/c/64f38995db6c0c791664e5d1)


---
**In general (non-tech specific)**


some random notion resource - [checkout](https://linkcollect.io/korivideekshith/c/65081c98b222960e4544b29b)

Learn to ideate, build, launch and grow side projects - [checkout](https://linkcollect.io/honisingh2003/c/64f77faff7e8442238fd8099)

some good blogs about personal journey building business - [checkout](https://linkcollect.io/michelle.sokol/c/64f0c2018759f8484b635be6)

---
 <br>


####checkout more here [linkcollect.io/explore](https://linkcollect.io/explore)


##Do comment if you need more, i will curate add :)
Using filter() Array Method to Keep Targets in an Array
Tags: webdev, javascript, beginners, programming
Published: 2023-09-19 08:50:22

If you need to implement a function to remove all values from an array that are not the same as the target value you want to return, you can use the filter() Array method like this:

<code>

var filter = function (arr, target) {
  // Write your code below
  

 var equalTarget = arr.filter(function(number) {
  return number == target;
});

  
  
  
  return equalTarget ;
}

var numbers = [1, 3, 5, 7, 5, 3, 1];
var only3 = filter(numbers, 3);
console.log(only3);
// -> [3, 3]
console.log(numbers);
// -> [1, 3, 5, 7, 5, 3, 1]

</code>
TASK - 5
Tags: guvi, task, testing
Published: 2023-09-19 08:49:27

1) string = "ABUL HASAN!"
vowels = "aeiouAEIOU"
 
count = sum(string.count(vowel) for vowel in vowels)
print(count) 

2) def printPattern(n)
    for i in range(1, n + 1):
        for j in range(i, n):
            print("\t", end = "")
        t = i
        for k in range (1, i + 1):
            print(t, "\t", "\t", end = "")
            t = t + n - k
print()
n = 6
printPattern(n)

3) def rem_vowel(string):
    vowels = ['a','e','i','o','u']
    result = [letter for letter in string if letter.lower() not in vowels]
    result = ''.join(result)
    print(result)
  
4) def countDis(str):
 
    # Stores all distinct characters
    s = set(str)
 
    # Return the size of the set
    return len(s)
 
 
# Driver Code
if _name_ == "__main__":
 
    # Given string S
    S = "ABUL_HASAN"
 
    print(countDis(S))
5) def isPalindrome(s):
    return s == s[::-1]
 
 
# Driver code
s = "malayalam"
ans = isPalindrome(s)
 
if ans:
    print("Yes")
else:
    print("No")
6) def LCSubStr(X, Y, m, n):
    LCSuff = [[0 for k in range(n+1)] for l in range(m+1)]
 
    # To store the length of
    # longest common substring
    result = 0
 
    # Following steps to build
    # LCSuff[m+1][n+1] in bottom up fashion
    for i in range(m + 1):
        for j in range(n + 1):
            if (i == 0 or j == 0):
                LCSuff[i][j] = 0
            elif (X[i-1] == Y[j-1]):
                LCSuff[i][j] = LCSuff[i-1][j-1] + 1
                result = max(result, LCSuff[i][j])
            else:
                LCSuff[i][j] = 0
    return result
 
print('Length of Longest Common Substring is',
      LCSubStr(X, Y, m, n))
7) def getMaxOccurringChar(str):
    # create dictionary to store frequency of every character
    mp = {}
 
    # to store length of string
    n = len(str)
 
    # to store answer
    ans = ''
 
    # to check count of answer character is less or greater
    # than another elements count
    cnt = 0
 
    # traverse the string
    for i in range(n):
        # push element into dictionary and increase its frequency
        if str[i] in mp:
            mp[str[i]] += 1
        else:
            mp[str[i]] = 1
 
        # update answer and count
        if cnt < mp[str[i]]:
            ans = str[i]
            cnt = mp[str[i]]
 
    return ans
str = "sample string"
print("Max occurring character is:", getMaxOccurringChar(str))
Manual Testing , Benefits & Drawbacks
Published: 2023-09-19 08:48:39

## Manual testing

 Its a type of software testing where doing a human tester with a software application to identify bugs and defects. The tester executes test cases, which are a set of steps designed to verify the functionality and performance of the application. Manual testing can be used to test any aspect of a software application.

**Benefits**
1.Easy to use : it doesnt need any special tools to testing an application.just need a application and related system only to complete the testing task
2.Easy to Change : Its easily to modify and any other changes in the test case scenario.
3.Human Operated : its completely done the job through human related work.so we can easily identifies an defect . 

**Drawbacks**
1.Time: Its take so much of time consuming with difficult software applications
2.Human Error: Manual testers are making mistakes, defectes are being missed due to some urgent timing issues
3.Cost : Manual testing is costly for some large software projects

**Example**

A manual tester could check a website should work each and every pages of the website are working with correct scenario whatever we need.
Object.GroupBy functionality
Tags: javascript, groupby, mdn
Published: 2023-09-19 06:45:52

---
title: Object.GroupBy functionality 
published: true
description: New Javascript method supported to group elements by type.
tags: javascript, groupBy, MDN
# cover_image: 
# Use a ratio of 100:42 for best results.
# published_at: 2023-09-19 06:12 +0000
---

## Still Experimental Feature

Following [Browsers](https://caniuse.com/?search=Object.groupBy) has supported this feature  in Chrome, Edge, Safari 117 version.

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



Before it was Introduced in browser following implementations were done using:

#### Using Array.reduce method

```js
function groupBy(array, callback) {
  return array.reduce((result, item) => {
    const key = callback(item);
    if (!result[key]) {
      result[key] = [];
    }
    result[key].push(item);
    return result;
  }, {});
}

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 },
  { name: 'David', age: 30 },
]

// Using Reduce Method
const groupByAge = groupBy(people, ({age})=> age);
```


#### Using Object.prototype method


```js
 Object.groupBy(people, ({age})=> age);
```

**Benefits:**

- Implementation is more Abstracted and provided by browser API's
- Noise reduction from developers POV and reducing adding custom support for this method


#### Important Notes:

- _The return value of groupBy is an object that does not inherit from %Object.prototype%._

- groupBy calls `callbackfn` once for each element in items with `callbackFn(groupItem, index)` just like normal callback functions e.g `map`, `filter`. 

- Make sure browser supports this method and it is not recommended for production env as it still needs to be supported by major KEY players by web browsers

- It is still not supported in Firefox, Opera, IE refer always [caniuse](https://caniuse.com/?search=Object.groupBy)to see supported versions.


Let me know your thoughts via comments and feedback. 💬

Happy coding and Happy Learning! :tada: