teleren/devto huggingface dataset:
Announcing MintGate’s Widget
Published: 2021-05-14 14:15:34

Create exclusive access to your content, on your own platform, by integrating our token gated system.

Currently, it’s possible to integrate MintGate through public API calls, deep links (auto-filling of token gating setup form), and now, our widget component libraries.
We created a simple React drop-in widget of our token-gated form that anyone can embed on their site. Once it’s added, users can create a token gated link without ever leaving your site.
Creators, collective DAOs, or any community can use their tokens as a key mechanism to gate exclusive access to live streams, inside data, videos, pre-released songs, and more.

**How to Add it:**
1. Your site must be built with React. We plan to offer widgets/APIs for any site built on any tech stack soon.
2. Log into the MintGate Site: https://www.mintgate.app/login​
3. Go to https://www.mintgate.app/token_api or https://www.mintgate.app/developer and click on the Get Token Keys button.
4. You will need to copy your Widget Token.
5. Go to our widget component library on NPM.
6. Follow the instructions to add the widget to your React app.

**Uses of it**

For your own token, whether it is an ERC-20 or an NFT, you can create token gated access for:

* Tiered proposals within a DAO, so only members of a certain tier can access to vote
* Tokenized games with unlockable areas, events, or items for any token
* Access to live streams
* NFT redemptions for physical items, like exclusive drops or limited items
* Metaverse access for a specific parcel in Cryptovoxels
* Video content or downloadable files
* API endpoints exclusive to your community of token holders
How I can allow user's browser to actually leave page once beforeunload event is fired?
Tags: help, javascript
Published: 2021-05-14 14:10:40

As I ask upon stackoverflow:
https://stackoverflow.com/q/67535677/4706711

I want  once user confirms that wantr to leave a page to actually leave. The code so far is:

```
                    window.beforeunload = function(e){
                        var confirmAction = confirm("Wanna leave? This will BREAK the page.");
                        if(confirmAction){
                            //leavePage
                        }
                    };
```

But I do not know how I can allow user to leave once user accepts. Do you have any idea why?
[Video] Introduction to Git and GitHub Crash Course + Giveaway ⭐
Tags: github, linux, codenewbie
Published: 2021-05-14 14:10:29

# Introduction

Hello everybody! Welcome to this Introduction to Git and GitHub video series, where you will learn the basics of Git and start using it for your day-to-day tasks.

My name is Bobby and I've been working as a Linux system administrator for the past 7 years and a few months ago I wrote an opensource eBook on how to get started with Git and GitHub.

You can find a link to the GitHub project where you can Download the eBook for free here:

**[Opensource eBook on how to get started with Git and GitHub](https://github.com/bobbyiliev/introduction-to-git-and-github-ebook)**

In this video series we are going to cover the following:

* Introduction to Git
* Version Control
* Basic Shell Commands
* Git Configuration
* Introduction to GitHub
* Initializing a Git project
* Git Status
* Git Add
* Git Commit
* Git Diff
* Git Log
* Gitignore
* SSH Keys
* Git Push
* Git Pull
* Git Branches
* Git Merge
* Reverting changes
* Git Clone
* Forking in Git
* Git Workflow
* Pull Requests
* Wrap up

{% youtube UpdhourKi3c %}

# Playlist

[Introduction to Git and GitHub video crash course playlist](https://www.youtube.com/watch?v=UpdhourKi3c&list=PLY7SzAmnEqp7P6KHmBKBVNIjZkXMKh_fn)

# Giveaway

I've got those awesome stickers here:

![Free stickers](https://dev-to-uploads.s3.amazonaws.com/i/jcd2ao7925c258inutip.jpg)

One way to support me is by clicking the subscribe button! I will send out a sticker to everyone who does so! 🙏

# Conclusion

As I am very new to the whole video creation process any feedback will be appreciated 🙌

Useful links:

* [The Introduction to Git and GitHub Opensource eBook](https://github.com/bobbyiliev/introduction-to-git-and-github-ebook)

* [Free $100 Credit For DigitalOcean](https://m.do.co/c/2a9bba940f39​)

* [Website with interactive training](https://git.bobby.sh​)
My Portfolio
Tags: portfolio, react, css, html
Published: 2021-05-14 14:09:58

Hello! thanks for entering.

I wanted to share my first version of my portfolio, made with React.js and Styled-Component. I would love if you could give me feedback no matter what it is, to improve it.

www.alonsodiaz.dev

Thank you!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1foi2hz5hcefgzljchq5.png)
Welcome to MintGate
Tags: react
Published: 2021-05-14 13:56:37

MintGate is a platform that allows anyone to create an off-chain token (soon NFTs on Ethereum and Polygon) and use them to gate content on the web. Anyone can also set up a gate on content using an ERC-20, ERC-721, or ERC-1155 token minted elsewhere, on different platforms.

To get started, go to https://www.mintgate.app/create and log into Twitter. You can review our docs here: https://mintgate.gitbook.io/mintgate-docs/.

To create an off-chain token, click on Create an NFT Access pass, Upload image, Input the token name, description, and the number of users you want to claim the token on the public feed.

To create a token gated link, click on Gate links with any token. Input the link and add the details of the token that you would like to gate the content with. If you want to test how an end-user will access the links, check out these test token gated links here: https://www.notion.so/List-of-Compatible-Platforms-95d19bd624ea4c72b6cc42bda0d60d93
Flutter Image Parallax Scrolling Effect
Tags: flutter, parallax, animation
Published: 2021-05-14 13:54:10

Parallax scrolling is when the user scrolls images in the app, the images move on the screen to match the movement during scrolling. Used sparingly it can provide a nice, subtle element of depth that results in a distinctive and memorable app.

🔴Youtube Tutorial: https://youtu.be/8Rl47Eb0rjg
⭐Source Code: https://github.com/MahmoudHesham099/Flutter-Parallax
📖Resources: https://fidev.io/tickets-challenge-parallax/

📢Remember to
Subscribe🔴, Like👍, Share↗️ this video, and Star the repo on Github⭐
https://youtube.com/channel/UCGfgbWRrFj-yy8UQQalA1Iw?sub_confirmation=1
Top-Notch Features that your Web Applications Should be Integrated

Tags: webapplicationdevelopment
Published: 2021-05-14 13:44:01


If you have decided to develop a web application for your business, you have certainly taken a decisive step. But, you need to also delve into some necessary works to know several features that make a web app successful, apart from hiring <a href="https://www.webomindapps.com/web-application-development-company.html">web application development</a> companies.
Let’s discuss here some top-notch features that your web applications should be integrated with.

<b>Social Integration</b>

Social integration plays a crucial role for users when it comes to interaction with your business. It helps your customers in sharing everything be it reviews, wishlist, placement of orders, etc. It helps you in improving brand visibility and thus, makes your business successful.

<b>Mobile-First Interface</b>

It’s certainly important for you to integrate the UI design into your app that is in trend. It’s also important for your developers to align certain unique features of your mobile devices to ensure your web application is highly responsive. Developers also need to ensure that the app can load quickly no matter which device users use to access it.

<b>Push Notification</b>

Push notification is one of the emerging features for a web application that has a direct role in customer engagement. It is also known as a handy feature and can provide indeed a personal channel for connecting with clients in real-time.

<b>Data and Analytics</b>

Your web application needs to be integrated with a data analytic tool as it is necessary to get a clear insight into customer interaction, most engaging products, etc. It lets you get details of how customers interact with your application and which product they prefer to purchase the most.

<b>Security</b>

Your web application should have high-end security to prevent unauthorized access. Your developers should implement security features like HTTPS. Developers need to ensure that online users should have a highly secured connection.
How to design habit-forming UX?
Tags: ux, psychology, design, blog
Published: 2021-05-14 13:24:20

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llnxi8f9idwovxd0f49z.jpg)

https://medium.com/yudiz-solutions/how-to-design-habit-forming-ux-1cd367b10dad 

No one will be shocked if I say that people are hooked to smartphones and mobile apps more than anything else! But if we use this thing positively and create something keeping Users in center, we can design better user experiences.

Understanding habit-forming cycle can help you get a better idea about User Behaviour and how they take action, as well as help you gain knowledge on what you should think before creating a User Experience and how much it will affect your product.

Here I have tried to merge habits, behavior, and user experience altogether. Share it if you guys find it interesting and helpful ;)
Adding Syntax Highlighting
Tags: programming
Published: 2021-05-14 13:23:22

##To add a code block with the corresponding syntax highlighting

'''(ProgrammingLanguage)
Your code here
'''

##So, it would look like this when you're creating the post
<pre>
```python
print("Hello world")
```
</pre>

##And the final result would be this:
```python
print("Hello world")
```
Structures and Unions
Published: 2021-05-14 13:22:23

#structures
To define a structure, you must use the struct statement. The struct statement defines a new data type, with more than or equal to one member.
syntax:
struct [structure name]
{
member definition;
member definition;
...
member definition;
};
>example:
struct Person
{
char name[50];
int citNo;
float salary;
};
#Unions
To define a union, you must use the union statement in the same way as you did while defining a structure. The union statement defines a new data type with more than one member for your program.
syntax:
union [union name]
{
member definition;
member definition;
...
member definition;
};
>example:
union car
{
char name[50];
int price;
};
1)Both are user-defined data types used to store data of different types as a single unit.
How to Fix Rails Flash Rendering When Using Hotwire
Tags: hotwire, rails, turbo
Published: 2021-05-15 05:03:30

---
title: How to Fix Rails Flash Rendering When Using Hotwire
published: true
date: 2021-05-14 13:06:31 UTC
tags: Hotwire,RubyonRails,Turbo
canonical_url: 
---

I added [Hotwire](https://hotwire.dev/) to a [Ruby on Rails](https://rubyonrails.org/) application I’ve been working on and discovered some issues when rendering flash messages. Yesterday I [wrote about problems related to CORS error using OmniAuth](https://dev.to/rbazinet/hotwire-fix-for-cors-error-when-using-omniauth-3k36).  Today’s is not as exciting but still as annoying.

## Problem

I was in the process of testing some validation changes I implemented and realized errors were not being displayed. I went through the typical debug scenarios and found that errors were being returned but just not displayed.

The code consists of just trying to create a user:

```
def create
  @user = User.new(user_params)
  if @user.save
    redirect_to root_path, notice: “User created successfully“
  else
    render :new
  end
end
```

When creating a user, the _new_ form rendered but errors were not displayed.

## Solution

The reason the messages were not being displayed is because of [Turbo](https://turbo.hotwire.dev/) and Rails UJS conflicting. Solving the problem can be done in one of two ways.

1. It appears Turbo expects form submissions to redirect to a new location. When there is an error, we are staying on the same page. Adding status: :unprocessable\_entity to the render fixes the problem.

```
def create
  @user = User.new(user_params)
  if @user.save
    redirect_to root_path, notice: “User created successfully“
  else
    render :new, status: :unprocessable_entity 
  end
end
```

2. A similar solution from [yesterday’s post](https://dev.to/rbazinet/hotwire-fix-for-cors-error-when-using-omniauth-3k36) also works. Adding

```
data: { turbo: false }
```

The form declaration disables turbo and lets Rails UJS handle as desired.

I hope future versions of Turbo handle this better.

The post [How to Fix Rails Flash Rendering When Using Hotwire](https://accidentaltechnologist.com/ruby-on-rails/how-to-fix-rails-flash-rendering-when-using-hotwire/) appeared first on [Accidental Technologist](https://accidentaltechnologist.com).
Data Wrangling Techniques
Tags: python, datascience
Published: 2021-05-14 13:06:16

#To drop certain irrelevant columns when analyzing a dataset
```python
df.drop(['ColumnX', 'ColumnY', 'ColumnZ'], axis=1, inplace=True)
```

#To count the number of values in a column
```python
df['Column_name'].value_counts()
```

#To change the value to numeric
```python
df['Column_name'] = pd.to_numeric(df['Column_name'])
```

#To replace certain values in a column to other values of choice
```python
df['Column_name'] = df['Column_name'].replace(['Initial_value'], 'New_value')
```
I was asked about extracting a subarray from an array of objects...
Tags: javascript
Published: 2021-06-06 15:29:18

---
title: I was asked about extracting a subarray from an array of objects...
published: true
date: 2021-05-14 12:58:00 UTC
tags: JavaScript
canonical_url: https://drmsite.blogspot.com/2021/05/i-was-asked-about-extracting-subarray.html
---

The function needed to be compliant with ES5, and the data was in this format:

```js
const bob = [
  {
    "bob": {
      "1.1": 11,
      "1.2": [
        {
          "1.2.1": 121
        }, {
          "1.2.2": 122
        }
      ],
      "list": [
        {
          "bob.1.1": 121
        }, {
          "bob.1.2": 122
        }
      ]
    }
  }, {
    "bob": {
      "2.1": 11,
      "2.2": [
        {
          "2.2.1": 121
        }, {
          "2.2.2": 122
        }
      ],
      "list": [
        {
          "bob.2.1": 121
        }, {
          "bob.2.2": 122
        }
      ]
    }
  }, {
    "bob": {
      "3.1": 11,
      "3.2": [
        {
          "3.2.1": 121
        }, {
          "3.2.2": 122
        }
      ]
    }
  }, {
    "fred": {
      "4.1": 11,
      "4.2": [
        {
          "4.2.1": 121
        }, {
          "4.2.2": 122
        }
      ],
      "list": [
        {
          "bob.4.1": 121
        }, {
          "bob.4.2": 122
        }, {
          "bob.4.3": 122
        }
      ]
    }
  }, {
    "bob": {
      "5.1": 11,
      "5.2": [
        {
          "5.2.1": 121
        }, {
          "5.2.2": 122
        }
      ],
      "list": [
        {
          "bob.5.1": 121
        }, {
          "bob.5.2": 122
        }, {
          "bob.5.3": 122
        }, {
          "bob.5.4": 122
        }
      ]
    }
  }, {
    "bob": {
      "6.1": 11,
      "6.2": [
        {
          "6.2.1": 121
        }, {
          "6.2.2": 122
	      }
      ],
      "list": [
        {
          "bob.6.1": 121
        }
      ]
    }
  }
]

```

Only the `list` was required from objects called `bob`.

I was restricted to using ES5, so I came up with this:

```
const bobs = bob.reduce(function(a, c) {
  if (!!c.bob && !!c.bob.list) {
    Array.prototype.push.apply(a, c.bob.list)
  }
  return a
}, [])
console.log(bobs.length)

```
Structures and Unions
Published: 2021-05-14 12:57:11

#structures:
To define a structure, you must use the struct statement. The struct statement defines a new data type, with more than or equal to one member.
syntax:
struct [structure name]
{
member definition;
member definition;
...
member definition;
};
>example:
struct Person
{
char name[50];
int citNo;
float salary;
};

#Unions
To define a union, you must use the union statement in the same way as you did while defining a structure. The union statement defines a new data type with more than one member for your program.
syntax:
union [union name]
{
member definition;
member definition;
...
member definition;
};
>example:
union car
{
char name[50];
int price;
};
1)Both are user-defined data types used to store data of different types as a single unit.
What are your tools for keeping dependencies and plugins versions up-to-date?
Tags: webdev, tooling, security, help
Published: 2021-05-14 12:37:44

Hi everyone!

I rarely post here but today I decided to ask the community about some tooling.

One thing that I find daunting in today's web dev ecosystem is how to keep track of dependencies and plugin versions in all layers of our apps and, say, not miss a lot of versions for one tool or the other.

For example, in the project I'm working on, we have a front-end app made with React, a Java/Spring Boot back-end, a Keycloak authentication system, and so on.

So I was asking myself: is there some kind of tool to subscribe to new versions of packages/libs, get warnings about end of life, and such? 

I do know there are tools like Maven versions plugin for Java or npm packages to be run manually to get info on possible updates.

My actual question is: how do you guys regularly check for those? Do you have like a calendar reminder to launch a bunch of tools manually (my current "solution" as of today), or something else that I don't know about?

Waiting for your feedback 😊
Benefits of Using Express.js for Developing Enterprise Applications
Tags: express, javascript, node
Published: 2021-05-14 12:21:54

Benefits of using Express JS

Express JS mobile enterprise app development has become quite popular among developers due to its simplicity, flexibility, performance, and extensibility. And these are all for the right reasons. Express JS happens to be an integral part of JavaScript-powered MEAN stack, unlike other stacks.

As a result, the developers can create software on the server-side by making use of JavaScript. Express JS, along with Node JS, can be employed for creating APIs for multi-page, single-page, and hybrid mobile plus web applications. In the subsequent paragraphs, we will focus on the main benefits of using Express JS for creating enterprise apps.

 
1. Quick app development

Express JS enables you to use the identical language, which happens to be JavaScript on the back-end and the front-end. It enables JavaScript developers to become full-stack. Consequently, the process of development is much simpler and quicker since one individual can manage data access and the presentation layer.

 
2. I/O request handling

Express JS will be fantastic for apps that can handle plenty of notifications and requests from the users. Uber has selected node JS because of this reason. Express JS, along with Node JS, can support lots of simultaneous actions.

 
3. Reducing the costs spent for hiring the developers

The process of creating mobile applications becomes simplified while using Node JS and it becomes more efficient. You can use the identical language for developing your mobile app and server.

 
4. Open-source community

Express JS happens to be amongst those Node JS frameworks which are widely supported. It comes with an open-source community that implies that the code is reviewed and improved at all times.

 
5. Simple integration of middleware and 3rd-party services

Being a minimalist framework, Express developers have created middle ware packages using this framework for solving various development issues. These consist of sessions, URL parameters, security headers, POST data, libraries, and so on.

Express JS happens to be an unopinionated framework that implies no stringent regulation on how to deal with specific tasks or which particular components to select. You can use any middle ware according to your convenience. Moreover, you will be able to decide how to structure the application since there isn’t any correct way to do it.

 
6. Simple to learn

According to most developers, it is not difficult to learn Express JS. Being properly documented, it is supported by a large community. Furthermore, if you are already acquainted with Backed Architecture and JavaScript, there will be no problem for you to start with it.

Learn more here: https://www.rlogical.com/blog/what-are-the-benefits-of-using-express-js-for-developing-enterprise-applications/
How to Choose The Best Outdoor Basketball
Tags: basketball, nba, outdoor
Published: 2021-05-14 12:21:23

Assuming you're pondering about picking the <a href="https://outdoorbasketballguide.com">best outdoor basketball</a>, you have gone to the perfect spot. Having Durable balls is consistently a wish of expert players. So today, you will be guided about the first-class purposes of picking the correct ball. instruction to pick the correct b-ball 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hx4gmtvkoroj2acqlnv0.jpg)

The absolute initially is to check sturdiness. In the event that the ball is tough and comprised of elastic material that will long last. In any case, a few b-balls are comprised of engineered and composite cowhides yet we like to utilize them inside simply because they are not sturdy as the elastic is. 

The following primary concern is skipped. Ensure the skip of the b-ball is predictable when you shoot the b-ball it ricochets back to you in a preferred manner over that b-ball we would recommend would be the best b-ball. 

The following central matter is material and cover. The cover should be thick and having profound channels on a superficial level will give you the best hold while shooting or dunking. 

The following point is the cost. Modest balls may have low break-in time you can go with Spalding road b-ball outside at an extremely low cost. Wilson has the expert ball that is Wilson advancement b-ball. be that as it may, the Wilson ball is costly yet is the firmest b-ball 

the following point is the heaviness of the ball. the light the b-ball the more shoot your responsive be. so prior to buying check its net weight. indeed, even some balls may come swelled or some may come collapsed. 

Conclusion

So we depicted the best b-ball picking primary concerns we trust that you comprehended the central matters of the b-ball on the off chance that you have any question with respect to the picking of the b-ball you can ask us we made an honest effort to portray the primary concerns. feel glad and begin playing your number one game.
Shopping Cart Laravel 8: part 03
Tags: laravel, php, webdev
Published: 2021-05-14 12:14:45

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tiqk6lduwh8bgunh0l2d.jpg)

#Source Code
[Github](https://github.com/Remonhasan/ecommerce-laravel8)

#Add to cart

Now we have to pick the add to cart of product by using wire bind as like:

` wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})"`

Additionally, we can use the method of count() for checking there is any product or not! For that we can use the loop like:

` @if(Cart::count()>0)
// go for product
else
No Products
@endif`

#Fetch product image from database

`src="{{asset('assets/images/products')}}/{{$item->model->image}}"`

#Route action 

`href="{{route('product.details',['slug'=>$item->model->slug])}}"`

#Rest of the functions of building cart package
1. Subtotall
2. Total
3. Tax

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2syjwg0jvbw0uloxst32.png)