teleren/devto huggingface dataset:
🚀Animated Loading Spinner | HTML & CSS💯
Tags: html, css, beginners, webdev
Published: 2022-10-07 13:53:56

## Learn how to build an Animated Loading Spinner Tutorial using HTML and CSS !

{% youtube m5dgXyT0nIc %}

**Source Code:**

**Content and Structure:**
```html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Animated Loading Spinner</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="spinner">
    Loading...
    <div class="spinner-sector spinner-sector-red"></div>
    <div class="spinner-sector spinner-sector-blue"></div>
    <div class="spinner-sector spinner-sector-green"></div>
    <div class="spinner-sector spinner-sector-orange"></div>
</div> 

</body>
</html>
```

**Layout and Design**
```css
*{
   box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.spinner{
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    overflow: hidden;
    position: relative;
    animation: text-fading 2s ease-in-out infinite alternate;
}

@keyframes text-fading {
    0%{
        color: rgba(0,0,0,1);
    }
    50%{
        color: rgba(0,0,0,0.5);
    }
    100%{
        color: rgba(0,0,0,0.1);

    }
}

.spinner-sector{
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: red;*/
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 15px solid transparent;
    mix-blend-mode: overlay;
    animation: rotate var(--duration) var(--timing) infinite;
}

@keyframes rotate {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}

.spinner-sector-red{
    border-top-color: #cf2c20;
    --duration: 1.5s;
    --timing: ease-in-out;
}

.spinner-sector-blue{
    border-left-color: #2454df;
    --duration: 2s;
    --timing: ease-in;
}

.spinner-sector-green{
    border-right-color: #258342;
    --duration: 2.5s;
    --timing: ease-out;
}

.spinner-sector-orange{
    border-bottom-color: #f0a204;
    --duration: 3s;
    --timing: ease-in-out;
}
```
🛴Follow us for more content like this:
https://bit.ly/WDevMadeEasy
I made a dark mode CSS download
Published: 2022-10-07 13:48:56

Hey I just made a dark mode CSS download. Here are the steps to run it:

1: [Download](https://replfiles.dillonb07.studio/Analyze185/Dark%20Mode%20Download)
2: Upload it to the files to your website
3: Add this to the `<head>` of your `html` file:

```
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Fira Code' rel='stylesheet'>
``` 
to add the fonts
3: Last, add 

```
<link href="style.css" rel="stylesheet" type="text/css" />
```
to connect the `style.css` file to your `html` file!

That's it!
New Navigation Bar Component just Released 🎉
Tags: react, tailwindcss, uiweekly, news
Published: 2022-10-07 13:39:00

Make your website pop with the new fully accessible and fully responsive Navigation Bar components with 4 diverse variations!

[https://wind-ui.com/components/navbars/](https://wind-ui.com/components/navbars/)

Have a look and tell us what you think!
Follow Friday: Hacktoberfest Edition (7 Oct 2022)
Tags: meta, writing, hacktoberfest, opensource
Published: 2022-10-07 13:30:39

---
title: Follow Friday: Hacktoberfest Edition (7 Oct 2022)
published: true
description: 
series: Follow Friday
tags: meta, writing, hacktoberfest, opensource
---

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

Hacktoberfest is in full swing, folks! Maintainers are maintaining, contributors are contributing, and developers everywhere have made their Twitter names a little spookier 👻

So, devs! Whose Hacktoberfest content should we all be following along with? Repos, experts, communities, newbies — all are welcome and celebrated during this hallowed month!

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite author to follow this Hacktoberfest (and letting us know why you love their posts!) ⤵️
XSS: Problem with letting users upload SVG
Tags: security, javascript, webdev, beginners
Published: 2022-10-07 12:51:38

Allowing user to upload stuff is cool. One customer facing app I was working on, allowed users to upload files. 

These are some of the file extensions we allowed:

````
const acceptedFileTypes = [
  '.jpg',
  '.jpeg',
  '.png',
  '.svg'];
```

We later found how that could be a problem with regards to security for our users.

This is how a simple svg file looks like:

![A black circle](https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg)

I just got it online after a simple google search. Here is the [link](https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg).

This is how it looks like when you download and open the same file in VS code:

````
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
</svg>
```

This looks like XML code. SVGs can have animations and for that they allow [scripting](https://www.w3.org/TR/SVG11/script.html). So the above file could be easily changed to something like:

````
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
<script type="text/javascript">
//Harmful JS here
</script>
</svg>
```

Here is a simple [demo](https://82cj6t.csb.app/). Try to open the image in new tab and you will see javascript running.

Imagine the possibilities of allowing hackers to run any script on another user's device. 

This is an [XSS attack](https://owasp.org/www-community/attacks/xss/), a stored one. This did not directly affect the app we made, but definitely could affect our users.  Anyone opening the image in a new link could be vulnerable.

That is why it is always recommended to to only allow `svg`s from trusted sources.
How to add Routing in React.JS
Tags: react, routing, javascript, webdev
Published: 2022-10-07 12:45:56


Learning new things is hard and cumbersome, i recently started learning React and find it hard to understand some concepts but then i researched on how to keep motivating my self-learning and One helpful tip i get was it to share what you learn and you will find it easy.

So in the past few days, I wrapped my head around React.js and understand the core concept of react which was Routing, Routing helps us navigate different pages on our website without reloading the whole website, i found out that there are many routing libraries out there but the best one was " React-Router-Dom ". 

In this Blog, i will share my understanding of React Routing using React-Router-Dom.

First, we need to create a small app/website, which at least has 3 pages for navigating, i will not fill the whole website with text and images just the main part so i can distinguish different pages.

I am calling my website Lofi Academy, i was listing Lofi Music when i came up with this idea and so name it after it.

I started the project by creating a react app by running "create-react-app lofi-academy", it take few seconds to load all the files, and then i opened vs code and started cleaning boilerplate stuff like in "App.js" file, and then i Install 2 libraries from NPM, React-Router-Dom, and SASS.

after the setup complete mean after i set up the development environment for my project, i created 2 folders "Components" and "Pages", in the component folder i will store the components like the navbar and in the page, i will keep my all pages which are Home, About and Contact.

In the image below you can see i have built the front-end of the website, it's simple, not look nice but will work for learning. 

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3t62n1jzggvikarhka3.png)

Now comes the part for which i wrote this blog, i imported "Browser Router" from "react-router-dom" and place it in an index.js file around App.js,  and then imported "Route and Routes" inside App.js and wrapped them around the Home Page, About Page and Contact Page.

See the Code below for a better understanding...

App.js
![Screenshot of App.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvpzv4csgg6gzeti1q9x.png)

Navbar.js
![Screenshot of navbar.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kll3efgpedk0x2yqm1xp.png)

Index.js
![Screenshot of Index.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1qmfqtlz25onwcbnoxv.png)
I then imported "Link" and "Outlet" in my Navbar component and placed "Link" around the nav links and "Outlet" at the bottom after the Nav Div end but before closing the <Fragment>.

And this is how i React-Routing Work,
The Secret Behind Every Successful Software Development Project [Best Methods & Tools]
Tags: webdev, saas, programming, management
Published: 2022-10-07 12:40:25

67% of projects fail because of undervaluing project management.
 
Project management is an obligation for a successful implementation of a software development process.
 
“Don’t let poor project management become a barrier to your success."
 
So, let us catch on with the ideology of project management in software development that helps elevate business.

What is Involved in Project Management for Software Development?
A successful project is not only one that gets completed within the designed timeline and specified budget. It should also fetch the expected benefits. Thus, Project Management Institute imparted the concept of the four phases of typical project management to accomplish the derived project.

**Methodologies to Manage Software Development Project**
1) Waterfall
2) Agile
3) Hybrid

**What is the Project Management Tools for Software Development?**
1) Trello
2) Jira
3) Monday.com
4) Smartsheet
 
To keep going strong it is necessary that leaders throughout the organizational hierarchies trust and observe this process of project management in software development.
Analyze stolen NFTs that been marked by opensea
Published: 2022-10-07 12:31:38

## Overview
This is a hackathon data analytics project. I analyze the top 2300 nfts sort by volume。 You can find the detail list from my GitHub repo. Or you can click here。
https://github.com/coffiasd/hackathon-data-analytics/blob/main/data/RankNFTS.csv

## CSV Data
Below is all csv file that i collect.RankNFTs.csv is the top 2300 NFTs list. tokenIds/{contract}.csv is stolen NFTs tokenID list.lastSalePrice/{contract}.csv is the last sale price of each tokenId.

- RankNFTs.csv
- tokenIds/{contract}.csv
- lastSalePrice/{contract}.csv

## Python script

You can get the all scripts my github repo above.
- getNFTsRankTopVolume.py(get top volume NFTs && stolen NFTs list)
- getNFTsDetail.py(get NFT’s last sale price)
- caculateStolen.py(caculate Result)
```python
def getNftsRankTopVolume(page):
    url = "https://api.traitsniper.com/v1/collections?page=" + \
        str(page)+"&limit=100&sort_total_volume=desc"

    headers = {
        "accept": "application/json",
        "x-ts-api-key": TraitsniperApiKey
    }

    response = requests.get(url, headers=headers)
    resp_dict = json.loads(response.text)

def caculateContractItem(contractAddress, table):
    # get collection detail
    item = getCollectionDetail(contractAddress)

    # read stolen nfts list
    data = pd.read_csv("../data/stolen/lastSalePrice/" +
                       contractAddress+".csv", header=None)
    # caculate items
    num = data.count()
    sum = 0
    for index, row in data.iterrows():
        if row[1] > item["floor_price"]:
            sum += row[1]
        else:
            sum += item["floor_price"]
    table.rows.append([item["nft_name"], contractAddress, item["total_volume"],
                       sum, sum/item["total_volume"], num[0]])
```

## Fetch Collections
First and foremost we need to get the list of each collection and then get the list of stolen nfts.

How to calculate the price of each stolen nft?
- If this item has a history price && the latest_price>floor_price take the latest_price as worth.
- If latest_price<floor_price take the floor_price as worth.
- If this item does’t has a history price then take the current floor price as worth.

```python
# worth
# latest_history_price
# floor_price
var worth = 0

if(item_has("latest_history_price")){
    if(latest_history_price> floor_price){
	worth = latest_history_price
    }else{
	worth = floor_price
    }
}else{
	worth = floor_price
}
```

## Calculate
I analyze each marked as stolen contract to find out the stolen volume and the numbers of stolen NFTs.Below is the output after i run caculateStolen.py you can get source code from my github repo above.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48uwa7uk7a9n45sck07i.png)
In One Minute : Jenkins
Tags: beginners, programming, oneminute, tutorial
Published: 2022-10-07 12:11:48

Jenkins is an open source automation server. 
It helps automate the parts of software development related to building, testing, and deploying, facilitating continuous integration and continuous delivery.

{% embed https://youtu.be/CwOk6xjJtYI %}

It is a server-based system that runs in servlet containers such as Apache Tomcat. 

It supports version control tools, including AccuRev, CVS, Subversion, Git, Mercurial, Perforce, ClearCase and RTC, and can execute Apache Ant, Apache Maven and sbt based projects as well as arbitrary shell scripts and Windows batch commands.

The Jenkins project was originally named Hudson, and was renamed in 2011 after a dispute with Oracle, which had forked the project and claimed rights to the project name. 

With hundreds of plugins in the Update Center, Jenkins integrates with practically every tool in the continuous integration and continuous delivery toolchain.

Official Website : https://www.jenkins.io/
Streaming Fatigue is Real: We Surveyed 1K People To Confirm It
Tags: datascience, ux
Published: 2022-10-07 11:58:37

We surveyed 1005 people about their video streaming services subscriptions and learned that subscription fatigue is, in fact, a real thing: about 2 out of every 3 people surveyed have canceled at least 1 service in the last year.

This research was originally published at Blue Label Labs — [you can read the full research and check the methodology we used here](https://www.bluelabellabs.com/blog/subscription-fatigue/).

## 1 / Nearly 2 out of 3 people canceled a video streaming service in the last year
We can confidently say that we’ve found concrete evidence of streaming fatigue:

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

## 2 / The most expendable service reported was Amazon Prime

Amazon Prime is the only other service that could be considered on the toes of Netflix with 200 million subscribers compared to the market leader’s 221.8 million subscribers .

Despite offering a variety of perks, Amazon reportedly canceled the most from all respondents with 9.46% giving the ax to not just streaming but free shipping and access to rotating free content on their streaming gaming service, Amazon Luna .


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

## 3 / People cancel streaming subscription services because they go unused and/or are too expensive

Most people don’t cancel service because of problematic experiences or politics: the biggest reason almost 2 out of 3 people canceled streaming subscription services boils down to the price.

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

## 4 / Most people will deal with ads, especially Gen X

Almost 50% of people indicate that they’re happy to deal with ads in exchange for a better price for a video streaming service.

And this number goes up to 62% if we consider people older than 41 years old.


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

---

This is just a small sample of what we discovered.

And if you want to read the complete study, you can check it out right here:

https://www.bluelabellabs.com/blog/subscription-fatigue/

Then, leave a comment to let me know what you think.
Magento 2 Extensions To Boost And Implement Additional Functions To Magento Store
Tags: magento, magento2, magentoextensions, magentodeveloper
Published: 2022-10-07 11:57:52


Whoever is familiar with Magento knows about Magento Extensions too. Extensions are software that provides additional flexibility and performance to stores. with extensions, stores perform better than without extensions. Extensions have their own advantages. Extensions were added to the store to give more functions and extra features which stores can't perform without it. After adding extensions, there was a huge jump in-store performance. Both store owners and Customers feel a new experience and better engagement than without extensions. 

To perform well store it is always recommended by Magento Developers to add more flexibility, shortcuts, and functions by installing stores needs' extensions. There are different extensions according to e-commerce store requirements. Always install extensions required by stores, and never install unnecessary extensions that will not utilize by both store owners and customers. just add according to customers' requirements and store owners' requirements.  

**Kinds of Magento Extensions**
- Themes
- Modules
- Interfaces

**Benefits of Magento extensions**
- You can manage real-time delivery and track it
- Reduce store loading time
- Increase the backend efficiency 
- Better Inventory management
- No barrier language to reach a wider audience
- 24/7 hours customer support by adding chat extensions
- Save extra cost while building a Magento store by adding only needy extensions

**Summary**
eCommerce store owners are started to use [Magento Extensions](https://magentobrain.com/magento2-extension.html) to fulfill consumers' wants and expectations in every possible way. The competition between many eCommerce stores is one of the reasons for it. For a successful e-commerce store, it is now recommended to both attract new customers and hold onto current ones. To do this, you need to work with [Magento Developers](https://magentobrain.com/hire-magento-developer), who can provide you with Magento extensions that will add a new look and feel to your eCommerce store by adding the newest features and functionality. Present time there in no any Magento store without extensions. Mostly Store owners prefer [Custom Magento Extensions](https://magentobrain.com/magento-2-custom-extension-development).
Learn Python #9 - Yeah Dictionary🐍
Tags: programming, web, webdev, python
Published: 2022-10-07 11:33:12

Today we are going to deep dive into the main data structure in Python known as Dictionary.
>Not a dictionary of words

## What is Dictionary?💡

In Python, a dictionary is a list of key-value pairs.
Ok, let's take an example.

### Creating a Dictionary💡

```
dictionary_1 = {
  'name': 'Nitin',
  'age': 34,
  'country': 'India'
}
```

In the above example
`name`, `age`, and `country` are the keys with the corresponding values as `Nitin`, 34, and `India`.

Also, we can create a nested dictionary

```
dictionary_1 = {
  'name': 'Nitin',
  'age': 34,
  'address': {
    'street': 'Keshav'
    'country': 'India'
  }
}
```

### Easy to understand?💡

A dictionary contains

- unique keys
- key can have different types of values like `number`, `string`, `boolean` etc.

>This would look similar to an object in JavaScript

### Accessing a key's value💡

```
dictionary_1 = {
  'name': 'Nitin',
  'age': 34,
  'country': 'India'
}

dictionary_1['name']
// Nitin


dictionary_2 = {
  'name': 'Nitin',
  'age': 34,
  'address': {
    'street': 'Keshav'
    'country': 'India'
  }
}

dictionary_2['address']['street']
// Keshav
```

To access any value in a dictionary, we need to enclose the `key` in square brackets `[]`


![think](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90k17yodt8z9s7n2l9rq.jpg)

## Conclusion 📗

There are more posts on the way related to the tuples...So keep reading.

Thanks in advance for reading this article...🚀

*I am more than happy to connect with you on*

- [@twitter](https://twitter.com/_nitinreddy3)
- [@LinkedIn](https://www.linkedin.com/in/nitinreddy3/)

*You can also find me on*

- [@Github](https://github.com/nitinreddy3)
- [@DEV](https://dev.to/nitinreddy3)
- [@Medium](https://medium.com/@nitinreddy3)
How to show only last 4 digits of credit/debit card in Bubble app development
Tags: nocode, webdev, beginners, tutorial
Published: 2022-10-07 11:31:57

One of the most common setups while building apps/websites is to have payment methods set. But, how does one do this, if the end goals require one to look like the image below: 

![Bubble nocode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8loopal56adml09rtxrc.png)

### Here’s How to do it with Mangopay through Bubble API connector

MangoPay provides an endpoint to which you could connect - [Card Object](https://docs.mangopay.com/endpoints/v2.01/cards#e181_the-card-object) endpoint. This Alias parameter will return a partially obfuscated version of the credit card number as a string.

On the design side, you just look it up and display it as in the image itself and can use it in the workflow as something like the result of the step and get the alias :[truncate from end to](https://manual.bubble.io/core-resources/data/operations-and-comparisons#truncated-from-end-to) and write it to the current user.

Here’s an example of the UI side: [https://atomicfusion.io/asset/text-credit-card-last-4-94100?view=explore](https://atomicfusion.io/asset/text-credit-card-last-4-94100?view=explore)


![Bubble nocode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7afzw3txomc94ygli55q.png)

### You can also do it with Stripe via the API connector

Stripe does it in a similar way. You could use the API connector to make an API call to Stripe’s [Retrieve a Card endpoint](https://stripe.com/docs/api/cards/retrieve). It returns a JSON object containing a field with just the card’s last 4 digits, so you can use them in your UI as required.

It’s way easier to use a plugin that does this for you since it requires you to pass the customerID and the cardID while making this API call.

Here's the link to the thread - https://forum.bubble.io/t/how-to-show-only-last-4-digits-of-credit-debit-card/225139/3 

Hope this helped. 🔓

-----------------------------------------------------------------
Coach App with Next.js & Supabase in 56 minutes
Tags: codenewbie, javascript, nextjs, supabase
Published: 2022-10-07 10:51:38

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

Hey developers!

Here's a new quick tutorial that I did on how to create a basic coach app with Next.js and Supabase.

It's super basic — but it's a good overview on how to use Supabase to create a SaaS.

Hope you'll enjoy & don't forget to subscribe !

Best,

Guillaume