teleren/devto huggingface dataset:
Free Tailwind Components Collections(sample)
Tags: css, javascript, html, react
Published: 2023-02-28 19:55:09

## Table of Contents

[Accordion](https://github.com/unlight/tailwind-components#accordion)

[Alert/Notification](https://github.com/unlight/tailwind-components#alertnotification)

[Avatar](https://github.com/unlight/tailwind-components#avatar)

[Badge](https://github.com/unlight/tailwind-components#badge)

[Breadcrumb](https://github.com/unlight/tailwind-components#breadcrumb)

[Button](https://github.com/unlight/tailwind-components#button)

[Call to Action](https://github.com/unlight/tailwind-components#call-to-action)

[Card](https://github.com/unlight/tailwind-components#card)

[Dashboard Widgets](https://github.com/unlight/tailwind-components#dashboard-widgets)

[Slider/Carousel](https://github.com/unlight/tailwind-components#slidercarousel)

[Cookies](https://github.com/unlight/tailwind-components#cookies)

[Date/Time](https://github.com/unlight/tailwind-components#datetime)

[Dropdown](https://github.com/unlight/tailwind-components#dropdown)

[Form](https://github.com/unlight/tailwind-components#form)
- [Contact](https://github.com/unlight/tailwind-components#contact)
- [Login](https://github.com/unlight/tailwind-components#login)
- [Register](https://github.com/unlight/tailwind-components#register)
- [Search](https://github.com/unlight/tailwind-components#search)
- [Upload](https://github.com/unlight/tailwind-components#upload)

[Footer](https://github.com/unlight/tailwind-components#footer)

[Hero](https://github.com/unlight/tailwind-components#hero)

[Loading/Spinner](https://github.com/unlight/tailwind-components#loadingspinner)

[Modal](https://github.com/unlight/tailwind-components#modal)

[Navigation/Header](https://github.com/unlight/tailwind-components#navigationheader)

[Page](https://github.com/unlight/tailwind-components#page)
- [404](https://github.com/unlight/tailwind-components#404)
- [Pricing](https://github.com/unlight/tailwind-components#pricing)
- [Testimonial](https://github.com/unlight/tailwind-components#testimonial)

[Pagination](https://github.com/unlight/tailwind-components#pagination)

[Progress Bar](https://github.com/unlight/tailwind-components#progress-bar)

[Skeleton](https://github.com/unlight/tailwind-components#skeleton)

[Sidebar](https://github.com/unlight/tailwind-components#sidebar)

[Comment](https://github.com/unlight/tailwind-components#comment)

[Step](https://github.com/unlight/tailwind-components#step)

[Switch](https://github.com/unlight/tailwind-components#switch)

[Tags](https://github.com/unlight/tailwind-components#tags)

[Tooltips](https://github.com/unlight/tailwind-components#tooltips)

[Table](https://github.com/unlight/tailwind-components#table)

[List](https://github.com/unlight/tailwind-components#list)

[Tab](https://github.com/unlight/tailwind-components#tab)

[Timeline](https://github.com/unlight/tailwind-components#timeline)

[Other](https://github.com/unlight/tailwind-components#other)
Rice Purity Test
Published: 2023-02-28 19:53:43

The [Rice Purity Tes](https://testofpurity.com)t is a fun quiz that measures your level of innocence based on a series of questions. The quiz is popular among high school and college students as a way to bond and compare experiences.
The goal of the test is not to shame or judge anyone, but rather to promote self-reflection and awareness. It can be a helpful tool for young people who are exploring their boundaries and making decisions about their behavior.

Taking the Rice Purity Test can be a lighthearted way to connect with friends and share stories. It can also be a way to challenge yourself and see how far you've come in terms of personal growth and maturity.

It's important to remember that the Rice Purity Test is not a measure of your worth or character. Everyone has different experiences and backgrounds, and no one should be made to feel ashamed or embarrassed about their past.

In fact, the test can be a great way to learn from others and gain perspective on your own experiences. By taking the test and discussing the results with friends, you can gain insight into different lifestyles and make more informed decisions about your own behavior.

Overall, the Rice Purity Test is a fun and harmless way to explore your own experiences and connect with others. As long as you approach it with an open mind and a positive attitude, it can be a valuable tool for personal growth and self-discovery.
Exploratory Data Analysis
Tags: python
Published: 2023-02-28 19:51:00


Exploratory Data Analysis (EDA) is the process of analyzing and summarizing a dataset to understand its main characteristics and to detect patterns, trends, and relationships between variables. More of often than not EDA is usually the first step in any data analysis since it helps to identify potential problems and insights, and informs subsequent analysis and modeling.
The main goals of EDA include:
1.	Identifying patterns and relationships between variables 
2.	Identifying the distribution and shape of the data
3.	Visualizing the data in meaningful ways to aid interpretation
4.	Formulating hypotheses and identifying potential explanatory variables
5.	Assessing the quality and completeness of the data
6.	Detecting outliers and anomalies 
It usually involves both graphical and numerical techniques. This could be graphical techniques include scatter plots, histograms, box plots, and heat maps.
For numerical techniques include summary statistics such as mean, median, standard deviation, and correlation coefficients.
EDA is an iterative process, and often involves going back and forth between different techniques and visualizations until a clear understanding of the data is obtained. Ultimately, the insights gained from EDA can inform subsequent modeling and analysis, and can help to guide the development of hypotheses and research questions
Exploratory Data Analysis
Published: 2023-02-28 19:47:37

Exploratory Data Analysis is the process of investigating and visualizing data to highlight its key features, patterns and relationships.

**
## Steps in EDA 
**

1. Data Cleaning
This involves the process of identifying or removing discrepancies, inconsistencies and missing values in the dataset. The dataset format may be JSON, CSV or even TXT file. Data cleaning ensures the accuracy of the analysis. This corrects the three types of errors namely; missing values, bad values and duplicates.

2. Data Visualization
Data visualization applies graphs, charts and other visual tools to represent the data. This step basically helps make the patterns and relationships in the data presentable. Thus it eases communicating insights to stakeholders.

3. Descriptive Statistics
With descriptive statistics basic calculations of statistical measures such as mean, median, mode, standard deviation, and variance is performed. These measures can provide insights into the central tendency, spread and skewness of the data.

4. Data Distribution
Data distribution involves the pattern of data points across a range of values. Once the distribution of data is understood,  outliers are identified, the spread of the data is understood, and trends are identified.

5. Correlation
Correlation refers to the degree of association between two variables. Identifying correlations between variables can provide insights into their relationships and potential causal factors.

EDA Techniques
EDA may be executed with the help of various tools and techniques. This depends on the nature of the data and the research questions. Some of the frequently applied techniques include:

1. Histograms
They are used to visualize the distribution of a single variable. They show the number of data points that fall into each bin or range of values.

2. Box Plots
Box plots are used to picture the distribution of a variable and identify outliers. They show the median, quartiles, and outliers of the data.

3. Scatter Plots
Scatter plots are used to evoke the relationship between two variables. They can identify correlations(positive and negative), patterns as well as outliers in the data.

4. Heatmaps
Heatmaps are used to visualize the correlation between multiple variables. They can identify patterns and relationships in the data.

5. Principal Component Analysis (PCA)
PCA is a dimensionality reduction technique used to identify the underlying structure of complex datasets. It reduces the number of variables while retaining the most important information.

EDA is therefore pivotal in the data analysis process. By using various techniques such as data cleaning, data visualization, descriptive statistics, data distribution, and correlation analysis, data analysts can identify insights and patterns in the data.
Swift tips and tricks for beginners
Published: 2023-02-28 19:16:31

Swift is a powerful and modern programming language used to build applications for Apple’s platforms. In this article, we’ll explore some tips and tricks for programming in Swift that can help you write better code and improve your productivity.


## 1. Use guard statements

Guard statements are a great way to improve the readability and maintainability of your code. They allow you to exit early from a function if certain conditions are not met, which can help you avoid nested if statements and improve the flow of your code.

```
guard let param1 = param1, let param2 = param2 else {
  print("Missing parameters")
  return
}
```


## 2. Use optional binding wisely.

Optionals are a core feature of Swift that allow you to represent values that may or may not be present. While optionals can be powerful, they can also be a source of confusion and bugs if not used properly.

```
if let optionalValue = optionalValue {
  // Code that uses optionalValue
}

let length = optionalValue?.count ?? 0
```



## 3. Use Extensions to Organize Your Code.

Use extensions to add functionality to existing types without subclassing them.

```
extension String {
  func capitalizeFirstLetter() -> String {
    return prefix(1).uppercased() + dropFirst()
  }
}

let myString = "hello world"
print(myString.capitalizeFirstLetter()) // Output: "Hello world"
```



## 4. Use Enums to Represent Finite States

Enums are a great way to represent finite states in your code. They can make your code more expressive and less error-prone by ensuring that only valid states are used.


```
enum NetworkState {
  case loading
  case loaded(data: Data)
  case error(error: Error)
}

func handleNetworkState(_ state: NetworkState) {
  switch state {
  case .loading:
    print("Loading...")
  case .loaded(let data):
    print("Data loaded: \(data)")
  case .error(let error):
    print("Error occurred: \(error)")
  }
}
```


## 5. Use closures to simplify your code and make it more readable.

```
let numbers = [1, 2, 3, 4, 5]
let doubledNumbers = numbers.map { $0 * 2 }
print(doubledNumbers) // Output: [2, 4, 6, 8, 10]
```
These are just a few tips and tricks to help you write better Swift code. With practice and experience, you’ll discover many more ways to improve your coding skills and create amazing apps.

Reach me out [here](https://marwanayman.com/)
Startup 1/10
Published: 2023-02-28 19:13:32

Hello, I am participating in a challenge to create a startup every month. This month I decide that I would make a college/program tracker. 

## What is this website? 
- A university tracker based on majors and minors 
- A way to organize the universities that offer the programs that you like 
- This can also be used towards boarding schools, camps, and more

## What was the inspiration? 
- My cousin is going away to college, and I remember how hard it was for her to manage the colleges 
- She tried to use excel but it wasn't easy to use, so I made this website 
- At the moment, you can only put the school's name and select majors and minors that it provides

## What will I be doing to it in the future? 
- You will be able to put what type of school it is (Liberal Arts, HBCU, etc.)
- You will be able to select if they offered a scholarship
- You will be able to choose whether it is a safety, target, or reach

[Link to Website](https://college-tracker.vercel.app/)
Brief Overview of the Evolution of Mobile Networks from From 1G to 6G
Tags: blog, 5g, wireless
Published: 2023-02-28 19:07:26

Sure! Here's a brief overview of the evolution of mobile networks from 1G to 6G:

<h3>1G (First Generation)</h3>
1G (First Generation): This was the first generation of mobile networks, which used analog technology to transmit voice signals. 1G was introduced in the 1980s and had limited capacity and poor call quality.

<h3>2G (Second Generation)</h3>
2G (Second Generation): This was the second generation of mobile networks, which used digital technology to transmit voice signals. 2G was introduced in the 1990s and provided improved call quality, capacity, and security. 2G also introduced SMS (Short Message Service) which allowed for text messaging.

<h3>3G (Third Generation)</h3>
3G (Third Generation): This was the third generation of <a href="https://propagationtools.com/wireless/free-space-path-loss-calculator-with-api/" title="Free Space Path Loss Calculator with API">mobile networks</a>, which introduced mobile data services and enabled faster data transmission. 3G was introduced in the early 2000s and offered data speeds of up to 2 Mbps, which enabled features like mobile internet, video calling, and mobile TV.

<h3>4G (Fourth Generation)</h3>
4G (Fourth Generation): This was the fourth generation of mobile networks, which introduced even faster data transmission speeds and improved network efficiency. 4G was introduced in the mid-2000s and offered data speeds of up to 100 Mbps, which enabled features like high-quality video streaming, online gaming, and cloud services.

<h3>5G (Fifth Generation)</h3>
5G (Fifth Generation): This is the fifth generation of mobile networks, which offers even faster data speeds and lower latency. 5G was introduced in the early 2020s and offers data speeds of up to 10 Gbps, which enables new features like augmented reality, virtual reality, and self-driving cars. From 5G Onwards, the <a href="https://propagationtools.com/wireless/building-significant-factors-affect-5g-propagation-modelling/" title="Building Significant Factors Affect 5G Propagation Modelling">propagation</a> of radiowave has been studied a lot as it plays an important role in 5G+ network planning and optimisation.

<h3>6G (Sixth Generation)</h3>
6G (Sixth Generation): This is the upcoming sixth generation of mobile networks, which is expected to offer even faster data speeds and lower latency than 5G. 6G is expected to be introduced in the late 2020s or early 2030s and is expected to enable new technologies like holographic communications, brain-computer interfaces, and advanced artificial intelligence.

Blog Post [Brief Overview of the Evolution of Mobile Networks from From 1G to 6G](https://propagationtools.com/wireless/brief-overview-of-the-evolution-of-mobile-networks-from-from-1g-to-6g/)
Learn and programming mind of developer
Tags: javascript, typescript, algorithms, webdev
Published: 2023-02-28 18:49:00

Learning oops principles.
Learning basic sysntax of any language.
Understanding the basics principles of the language you skilled at and worked mostly. 
Understanding the principles of architecture and coding principles of SOLID principles.
Understanding the naming of variables and structures the code in smaller reusable blocks.
Basic understanding of data structures such as sorting,arrays ,objects and binary search, linked list .Pick one language and worked for years in one language you picked . Core principles of writing clean code and naming variables naming should be prority . Playing of arrays and objects and solving problems will improve your understanding of how coding principles works. Deep understanding of private and public methods of class or functions .
Developing a understanding of principles of OOPS concepts.
Learn to google if you are stuck in something and take help from stack overflow or join free communities in facebook . Understanding the basics of es6 syntax and why it is introduced instead of regular javascript.Concept of local and global variables and also the problems solved with the help of closures. Debugging issues more than writing code so that it can help your understand of basic structure of the system which you are building.
Solving puzzles and solving complex problems which can make you think like what you are building for so long.
Reading principles of solving problems of senerios which can give you abilities to solve problems.
Reading principles of javascript and clear all the possible solutions to solve the problem.
Writing reusable code to maintain and manage for long run.
Make a habit of learning for at least 1 hour a day.
Learning from past mistakes and experiences will be the best thing to learn from,yet i preferred reading books instead of traditional courses in online.
Well it all depends on the person to person,resources can be anywhere but understanding the process of learning is very important for one’s life.
Cheers,live long and stay healthy and strong.
How to bind html in Vue.js
Tags: vue
Published: 2023-02-28 18:45:04

Binding html means, you can bind dynamic html inside of your template. But if you try to render content of dynamic html using mustache syntax or v-text (text binding) you will render the complete html and inner text as a complete string. 
Here is the exmaple:

```
<script>
  export default {
    data(){
      return{
        text: `Check the difference?`,
        html: `<p>I am p tag with <b>bold</b> </p>`
      }
    }
  }
</script>

<template>
  <h1>How to Bind html in Vue.js?</h1>
  <div>{{ html }}</div>
</template>

<style>
</style>
```
Then what is the solution? You can use v-html binding in vue.js. Here prefix v is reserve for vue.js. You have to use v-html attribute with a empty html tag. The value of the v-html property will be the data property that you have declared in data method. 

Here is the example:

```
<script>
  export default {
    data(){
      return{
        text: `Check the difference?`,
        html: `<p>I am p tag with <b>bold</b> </p>`
      }
    }
  }
</script>

<template>
  <h1>How to Bind html in Vue.js?</h1>
  <div>
    <p v-html="html"></p>
  </div>
</template>

<style>
</style>
```
스포츠티비
Published: 2023-02-28 18:42:54

사이드 선택:

* Line Value - 독자적인 방법을 사용하여 생성된 숫자 비용은 야구 핸디캡에서 레크리에이션에 대한 진실된 가격을 나타내는 것으로 여겨집니다. 실제 베팅 라인이 이 범위를 벗어나면 한 팀이 라인 가격을 가진 것으로 간주됩니다.
스포츠티비

* 모멘텀 - 현재 폼은 팀별로 정해져 있습니다. 그룹은 국내/어웨이 및 "모든 비디오 게임" 조건에서 좋은 또는 나쁜 모멘텀을 가진 것으로 간주됩니다.
**_[스포츠티비](https://www.bb-tv24.com/)_**
* 독점 상황 분석 - 야구 핸디캡의 경우 모멘텀, 라인 요금 및 "라이브" 평판이 상관 관계가 있는 가장 최근 3년 동안의 효과를 확인하는 것이 포함됩니다. 때때로 이것은 직관적이지 않은 결과를 초래하고 긍정적인 조건에서 가치를 정량화하는 데 도움이 됩니다. "실시간" 인기는 약자가 이 게임을 이길 수 있다는 우리의 평가를 말합니다.

* 전통적 상황 분석 - 홈/어웨이, 좌/우 패스 선발 투수, 주/야 시간 및 잔디/잔디 통계를 포함하는 상황에 대한 팀 통계 및 통계 확인을 수반합니다. 다른 통계에는 투수 이력 외에도 상황에서 득점한 타율과 득점이 포함됩니다.

* 여론 - 금전에 가까운 게임을 중심으로 압도적인 여론이 야구 핸디캡에도 고려됩니다.

오버/언더 대안:

* 총 점수 라인 값 - 수학 모델과 비교.

* 오버/언더 모멘텀 - 최근 실적 대 오버/언더 라인.

* 상황 분석 - 홈/어웨이, 주야간, 플라이볼/그라운드볼 투수, 구장 고유 통계 및 심판 기록의 모든 팀에 대한 오버/언더 데이터를 포함하는 기록 확인으로 구성됩니다.

* 날씨 - 바람(강도 및 방향), 온도 및 상황.

핸디캡 야구에 대한 추가 생각:

그러나 매년 12개월 동안 야구의 최종 순위를 조사하는 동안 그룹의 승률이 66.6%를 넘지 않는 경우가 많고 드물게 33.3% 미만인 것을 관찰할 수 있습니다. 2009년에는 두 범주에 속한 그룹이 없었습니다. 2002년 시즌부터 지금까지 어떤 팀도 시즌 동안 0.666 이상을 얻은 팀이 없으며 가장 간단한 것은 2003 Detroit Tigers와 2004 Arizona Diamondbacks가 0.333 미만의 게임을 얻은 것입니다. 마지막 네 시즌 동안 가장 간단한 세 팀은 비디오 게임에서 최소 .600점을 얻었습니다. 지난 5년 동안 그룹의 93% 이상이 비디오 게임에서 40%와 60% 사이에서 받았습니다. 그룹이 3개의 게임 시리즈를 플레이하는 것이 훨씬 표준적이기 때문에, 이는 지난 몇 년 동안 그룹이 3개 중 2개 이상, 3개 중 1개 미만으로 승리하는 것은 드문 일임을 의미합니다.

이제 단순히 개별 매치업이 필수적이지만 거의 모든 팀이 40%에서 60% 사이에서 승리한다면 1.50 이상의 현금 라인을 놓기 전에 확실히 어렵게 생각해야 합니다. 좋아하는 승률이 60%일 때 -1.50은 스매시 짝수입니다. 예를 들어 10개 선택 샘플의 경우 승자에게 6개의 장치(6 x 1)를 더 잘 따고 패자에게 6개의 장치(4 x 1.50)를 잃습니다.

내가 이 분석에서 제외하는 것은 내 야구 핸디캡에 대한 욕구가 -1.50보다 더 많은 레이를 놓는 것이 아니며 +1.50보다 큰 송곳니를 거의 사용하지 않는다는 것입니다.

라인업, 부상 및 휴식 중인 선수:

주요 선수가 쉬는 날은 스포츠 핸디캡 글로벌 내에서 주장을 전달하는 라인으로 처리되는 마일입니다. 나는 그러한 움직임이 과장되는 경향이 있다고 생각합니다. 한 시즌의 방향에 따라 팀이 주요 게이머가 없는 경우보다 주요 게이머가 있는 경우 더 많은 비디오 게임에서 승리하는 것은 사실이지만, 우리의 시간 범위는 하나의 스포츠에서 가장 효과적입니다. 야구는 8명 또는 9명의 선발 투수(더 이상 투수 제외)가 최종 결과에 영향을 미치고 결과적으로 한 스포츠에 대한 한 선수의 효과를 희석시키는 레크리에이션입니다. 여러 번 벤치에서 떨어진 배고픈 참가자가 기여할 것입니다. 그러나 또한 쉬고 있는 유명인이 계속해서 벤치에서 돌아와 콘테스트에서 기한이 지난 핀치 히트 홈런을 칠 수 있다는 점을 고려하십시오. 핵심 선수가 부상을 당하고 장기간 결장할 수 있는 경우 이를 고려하는 것이 좋습니다.
Learning Babel
Tags: javascript, babel, programming
Published: 2023-02-28 18:34:35

[Babel](https://babeljs.io/) is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Learning Babel can be daunting at first, but it is an essential skill for any JavaScript developer who wants to ensure their code is compatible with a wide range of devices and browsers. In this article, we'll explore the basics of learning Babel and how to get started with this tool. Before you start learning Babel, it's essential to have a good understanding of JavaScript and ECMAScript. You'll also need to have a solid understanding of Node.js and the command line interface.

The first step to learning Babel is to install it. You can install Babel using Node.js, which is a JavaScript runtime environment that allows you to execute JavaScript code outside of a web browser. To install Babel, you'll need to use Node Package Manager (npm), which is a package manager for Node.js.

```
npm install --save-dev @babel/core @babel/cli @babel/preset-env
```

This command installs the core Babel package, the command-line interface (CLI), and the preset-env package. The preset-env package is a set of plugins that allow you to transform your code to the appropriate syntax depending on your target environment.

To use Babel, you need to create a configuration file called .babelrc. This file tells Babel how to transform your code. Create this file in the root directory of your project and add the following code:

```
{
  "presets": ["@babel/preset-env"]
}
```

Next, create a new JavaScript file and add the following code:

```
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

greet('World');
```

To transform this code using Babel, run the following command in your terminal:

```
npx babel myfile.js --out-file output.js
```

This command tells Babel to transform the myfile.js file and output the result to output.js. The transformed code will now be compatible with older browsers.

Happy coding!
How to read external post request in vuejs?
Tags: vue
Published: 2023-02-28 18:32:59

Hi, 

I've use case to implement identity-broker for the web-clients to authorize and obtain access token. This requires to read external POST request in vuejs and return JSON response. 

Example

Request

`Endpoint - /oauth/token
Method - POST
Form Data
grant_type=authorization_code
&code=xxxxx
&client_id=xxxx
&redirect_uri=xxxxx
&code_verifier=xxxx`

Response

`{"access_token":"xxxxx","id_token":"xxxxx","refresh_token":"xxxxx","token_type":"Bearer"}`

Thanks in advance.
Managing Feature Flags with Unleash - Flutter - Setting Env Vars
Tags: flutter, featureflag, mobile
Published: 2023-02-28 18:27:22

Setting up Environment Variables(Env Vars) is a strategy to avoid exposing sensitive information. Usually we use a file name `.env` containning fields with sensitive information.

To not expose the data we put `.env` in the *.gitignore*. Pretty net right ?

Using the [unleash package](https://pub.dev/packages/unleash) for Dart we need to pass two arguments: `instanceId`, `unleashApi`.

Like is done in this [Unleash POC in Flutter Project](https://github.com/GeoSales-Evolution/unleash-multi-tenant-flutter-poc/pull/12/files#diff-dd8d160935565b40db44872c86b7fa07b0c8a4247b1abc8bd03ed89aa9850ed7R75)

If you're using gitlab you can find this two informations in:  
Your Project > Deployments > Feature Flags > Configure

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


Copy the fields values and put in the `.env`. One-liner below to easy your work:  
```bash
printf "URL_API=<URL_API>\nINSTANCE_ID=<INSTANCE_ID>" > .env2   
```