teleren/devto huggingface dataset:
Add Web Push Notification to WordPress Website
Tags: wordpress, webdev, tutorial, beginners
Published: 2022-01-05 15:37:07


![Add Web Push Notification to WordPress Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33jdakihej6vxsscm9u9.jpg)
Add Web Push Notification to WordPress Website. Build more powerful, more useful customer connections with desktop and browser notifications. Push notifications allow you to send notices to customers even when they are not visiting your website. This will help you to get visitors back to your website, grow traffic, and make better money.

In this post, we will show you how to create web push notifications to your WordPress site.

##How to Add Web Push Notification to WordPress Website
Push notifications for WordPress websites can be a very useful marketing tool for your blog, as they inspire readers and users to come back to your site.

Here we'll use a simple and easy plugin to do this job done.

##Install the **Perfecty Push Notification** Plugin

First of all, install the [Perfecty Push Notifications](https://wordpress.org/plugins/perfecty-push-notifications/) plugin. Here’s how to do so:

1. Open your WordPress **Dashboard**.
2. Navigate to **Plguins** >> **Add New**.
3. Search for "**Perfecty Push Notifications**" via search bar.
4. When you find Perfecty Push Notifications among the results, then click **Install Now**.

![Perfecty Push Notifications](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr2tddescq8qpn9uqz24.jpg)

5.Once it’s installed, click the **Activate button**.

The plugin will create a new tab in your dashboard called Perfecty Push. Open it, and you'll see different pages with setting page as well.

To style the notification screen, we need to add the below code to Additional CSS.

```CSS
.perfecty-push-dialog-box{font-size:20px;width:450px auto;border-radius:10px 10px 20px 20px;text-align:left}
#perfecty-push-dialog-cancel{background:#fff;color:#0078d1;}
#perfecty-push-dialog-subscribe{background:#0078d1;border-radius:10px}
.perfecty-push-dialog-buttons{text-align:right}
.perfecty-push-dialog-icon{padding-right:5px;}
```
I shared this post from [Add Web Push Notification to WordPress Website](https://softcodeon.com/wordpress/add-web-push-notification-to-wordpress-website.htm) you can read in detail from there.

You can change the background colors, text size, border radius, etc. We hope this post supported you learn how to add web push notifications to your WordPress website. If you have any questions or suggestions please discuss below.
Meet NFTW - The NFT Marketplace
Tags: atlashackathon, mongodb, nextjs
Published: 2022-01-05 15:31:18

### Overview of My Submission
The world is witnessing a decentralized revolution with the rapid rise in the adoption of blockchain technologies accross the globe. Non-fungible Tokens (NFTs) are a great way to establish authenticity, ownership and economic value of any digital asset. I've been fascinated by crypto recently and knew I wanted to build something in this space as soon I saw the announcement.

NFTW is built on top of the Opensea API and allows users to browse and search through thousands of NFTs listed on the platform. Additionally, NFTW includes social features like liking and sharing so users can share their thoughts on any asset.

[Link to the project](https://nftw.netlify.app/)
 


### Submission Category: 

E-Commerce Creation


### Link to Code

https://github.com/amolbrkr/nftw-dev-hackathon


### Additional Resources / Info

#### Some highlights of the project:

- Powerful Search which works on multiple datapoints powered by [Atlas Search](https://docs.atlas.mongodb.com/atlas-search/) and [Database](https://www.mongodb.com/atlas/database).
- Automatic fetching & updating of asset data using [Realm Functions](https://docs.mongodb.com/realm/functions/) & [Triggers](https://docs.mongodb.com/realm/triggers/trigger-types/). This is necessary since [Opensea API](https://docs.opensea.io/reference/api-overview) is rate-limited.
- Social Features like liking & sharing (commenting coming soon)
- Frontend is done in [Next.js](https://nextjs.org/) SSR and [Bulma](https://bulma.io) deployed on [Netlify](https://www.netlify.com/).


![nftw-homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36noa3b1qg3wg6nf3p3h.png)

![nftw assets page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ws249aco3gg5sws8se3p.png)

Thanks to DEV and MongoDB for making this event happen, it was amazing to see so many good projects. I Hope you like my submission, happy to answer any questions you might have :)
Python - Data types
Tags: python, begginer, data, type
Published: 2022-01-05 15:29:31

---
title: Python - Data types
series: Python - Getting started
published: true
description: Data types in python
tags: 'python, begginer, data, type'
cover_image: 'https://raw.githubusercontent.com/campelo/documentation/master/posts/python/getting-started/assets/cover.jpg'
canonical_url: null
id: 942661
date: '2022-01-05T15:29:31Z'
---

###### :postbox: Contact :brazil: :us: :fr:

[Twitter](https://twitter.com/campelo87)
[LinkedIn](https://www.linkedin.com/in/flavio-campelo/?locale=en_US)

---

## Data types

**Python infers data types of variables**. This means that you don't need to write string, boolean, int or others to explicit declarations to work with variables. You can specify the type of a variable using cast for that. 

The basics for write a variable and its value is **variable name** + **equals sign** + **variable value**. That will create a new variable and its type will be infered by the value type.

```python
myVariableName = myValue
```

I'll show you some data types below, but you can learn more about other ones on [this site](https://www.w3schools.com/python/python_datatypes.asp)

### Integer

```python
myInteger = 3 # infered data type
```

or 

```python
myInteger = int(3) # explicitly
```

### Float

```python
myFloat = 3.5 # infered data type
```

or

```python
myFloat = float(3.5) # explicitly
```

### String

```python
myString = 'Have a nice day!' # infered data type
```

or

```python
myString = str('Have a nice day!') # explicitly
```

You can use *double quotes* **"** or *single quotes* **'** to delimit the string. When you're using the first one, it'll be easier to write single quotes inside your value string.

```python
myString = "Jhon's house"
```

Using single quotes everywhere, you should to scape **\\** all of the single quotes in the value.

```python
myString = 'Jhon\'s house'
```

### Boolean

```python
myBool = True
```

or 

```python
myBool = bool(True)
```

###### Notes

You can access this code on [github](https://github.com/campelo/Python-First-steps).

## Typos or suggestions?

If you've found a typo, a sentence that could be improved or anything else that should be updated on this blog post, you can access it through a git repository and make a pull request. If you feel comfortable with github, instead of posting a comment, please go directly to https://github.com/campelo/documentation and open a new pull request with your changes.
Revert those changes in Git
Tags: git, github
Published: 2022-01-05 15:19:37

Continuing on the theme of Git commands you should know.  Today I am looking at using **git to revert that last commit**. 

Occasionally you'll want to  undo the changes you've just made.  And there are various ways to do that either locally or remotely depending on what you need, but you do have to be careful when doing that and avoid unwanted deletions. 

The way I prefer to do this is using **git revert**.  

## Look at the logs

The first thing to do is look back at your logs and find the commit details using the command **git log --oneline**

![Git Log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyddnahw6iiew2d0q59k.png)

## Revert the change

We want the hash number that is next to your latest commits. That little number helps us revert the change we want to make. 

One we have a note of that number we want to issue the command **git revert 7270d13**

You'll be taken into a screen where you can make edits. You should be able to exit using **:wq**

You'll exit the editor and be taken back to your command line where you'll see that the commit that you reverted has been reverted. 

If you now run **git log --oneline** you'll see a new commit has been created to carry out that revert. 

![Git Revert Confirm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucfvwy4sz7gog75sfzgg.png)

## Let me know your favourite way to revert a change within Git.
How to make a Flip Card?
Tags: html, css, beginners, codenewbie
Published: 2022-01-05 15:18:22

You may have seen **Hover Cards** on which when we hover, some action happens with some effects.
So today we are going to make a flip card
:
**First of all** _What is flip card?_
A card on which when we hover it will flip and show the back side. Flip Effect can be used for cards like visiting card, etc.
## Let us get started!
**1. HTML**
```html
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>
```
**2. CSS**
```css
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This is to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move hover on container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Put the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
```
See an Example below:

{% codepen https://codepen.io/tilak6/pen/OJxEjVa %}

Hope you have made flip card successfully!
That is it for this blog.
Website Developing
Tags: html, javascript, tailwindcss, webdev
Published: 2022-01-05 15:11:01

Web Developing is so FUN! Especially when you finish it and It's works greatly on Mobile, Tablet, Laptop and PC!

[Personal Portfolio](https://zytha.github.io/profile)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wbubbk2x2lavyq79g7a.png)
5 Sources to Master CSS under $10
Tags: css, sass, frontenddev, codepen
Published: 2022-01-05 15:03:22

---
title: 5 Sources to Master CSS under $10
published: true
tags: css, sass, frontenddev, codepen
---

![Free code camp's full CSS course](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/al6d53c7hkyuhr1ex62h.jpg)    
Free code camp's full CSS course
https://www.freecodecamp.org/news/full-css-course-flexbox-grid/



![Jonas Schmedtmann's Advanced CSS course](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08rcryftgrpo5rf9s8rt.jpg)
Jonas Schmedtmann's Advanced CSS course
https://www.udemy.com/course/advanced-css-and-sass/



![Codepen.io challenges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3ny8u37gjajvr79dgq2.png)
Codepen.io challenges
https://codepen.io/challenges



![Kevin Powell's youtube channel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69im869k2tg1ih3mjf9u.jpg)
Kevin Powell's youtube channel
https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw



![CSS-Tricks blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqardb67v1vops4uivzs.png)
CSS-Tricks blog
https://css-tricks.com/



Bonus:
I create awesome CSS cheatsheets on my Instagram:
https://www.instagram.com/rajascript/
Most Popular Websites (1996 - 2020) | Based on Traffic & Popularity
Tags: datascience, database, programming
Published: 2022-01-05 14:58:25

This is a detailed, well-researched bar chart racing video of the most popular websites from 1996 to 2020 based on website traffic & brand popularity. This is a quick rewind to the history of the web industry.

> Sponsored by: [JSON to XML Converter](https://www.gadgetsgadder.com/p/json-to-xml.html)

After watching this video, you can easily understand how technology changed in the past 10 years and how we changed our behaviour for new & advanced technologies.

**Subscribe:** https://bit.ly/sub-to-souvik

**Let's talk tech:**
Facebook: https://fb.com/thesouvikpaul
Instagram: https://instagram.com/amisouvikpaul
Twitter: https://twitter.com/thesouvikpaul
FB Page: https://fb.com/amisouvikpaul
Bing: https://bing.com/public/thesouvikpaul
Blog: https://gadgetsgadder.com

© Souvik Paul 2022
Tmux Pop size
Tags: tmux, linux, bash
Published: 2022-01-05 14:42:52

---
canonical_url: https://waylonwalker.com/til/tmux-pop-size/
cover_image: https://images.waylonwalker.com/til/tmux-pop-size.png
published: true
tags:
- tmux
- linux
- bash
title: Tmux Pop size
series: til
---

tmux popups can be sized how you like based on the % width of the terminal on creation by using the flags (h, w, x, y) for height, width, and position.

``` bash
# normal popup
tmux popup figlet "Hello"
# fullscreen popup
tmux popup -h 100% -w 100% -x 0% figlet "Hello"
# 75% centered popup
tmux popup -h 100% -w 75% -x 0% figlet "Hello"
# 75% popup on left side
tmux popup -h 100% -w 75% -x 0% figlet "Hello"
```

<p>
     <video autoplay="" controls="" loop="true" muted="" playsinline="" width="100%">
      <source src="https://images.waylonwalker.com/tmux-popup-position.webm" type="video/webm">
      <source src="https://images.waylonwalker.com/tmux-popup-position.mp4" type="video/mp4">
      Sorry, your browser doesn't support embedded videos.
     </video>
    </p>
How do you regex?
Tags: discuss, regex
Published: 2022-01-05 14:38:19

I made a thread yesterday called [How do you feel about regex?
](https://dev.to/ben/how-do-you-feel-about-regex-14c2)

Lots of fun discussion. Lots of people weighed in on their tools and tactics, but I'd love to move the conversation that way.

How do you go about using regex.

- What tools do you use? (if not from full memory)
- How do you encapsulate/label/comment regex?
- What types of problems do you most solve with regex?

Looking forward to any and all comments!
Fundamentos de TypeScript 🦆| #3: Arreglos
Tags: typescript, webdev, beginners, spanish
Published: 2022-01-05 14:36:07

Los arreglos en TypeScript son ridículamente sencillos de comprender, empecemos con la sintaxis:

## **Sintaxis**

```js
const nombreVariable:tipoDeDato[] = [];
```

## **Arreglos en Javascript vs Arreglos de TypeScript**
En javascript tranquilamente podemos tener un arreglo que contenga diferentes tipos de datos, por ejemplo:

```js
const arr = [23, "Hola mundo", true, null];
```
Este arreglo no da ningún tipo de advertencia o error.

Pero en TypeScript esto cambia, debemos especificar el tipo de datos que contendrá el arreglo, por ende podemos tener arreglos como los siguientes:

```js
//arreglo de numeros
const numeros:number[] = [1,2,3,4,5];
//arreglo de strings
const nombres:string[] = ["Cris","Fernando","Pedro"];
//arreglo de booleans
const bool:boolean[] = [true, false];
```

> *Estos arreglos son solo un tipo de dato. Añadir, por ejemplo, un número a un arreglo de cadenas produciría un error.*

Es posible tener arreglos de diferentes tipos de datos, pero para ello debemos comprender el **operador de unión** primero. Esto lo veremos en posts posteriores.

---

## **Conclusiones**
- Los arreglos en TypeScript son super sencillos de comprender y escribir.
- Sintaxis clara.
- Solo permite arreglos de un tipo de dato, a menos que usemos uniones de tipos.

## **Referencias**
{% youtube BwuLxPH8IDs&t=2487s %}
Mindbending Christmas Art Created With CSS & JavaScript
Tags: css, codepen, cssart
Published: 2022-01-05 14:18:38

Holidays might be behind us, but that doesn't mean that we can't re&#8209;experience some of that wonderful holiday spirit with CSS and JavaScript.

## CSS Swinging Christmas Tree
Author: [Zed Dash](https://twitter.com/Osorpenke)
Technique: CSS

{% codepen https://codepen.io/z-/pen/xxbrEbL %}

##CSS (Cascading Style Snow-Globe)
Author: [Alvaro Montoro](https://www.alvaromontoro.com/) / @alvaromontoro 
Technique: CSS

{% codepen https://codepen.io/alvaromontoro/pen/jOGLeJV %}

##Snow Globe With CSS Animation Using even/odd Selectors
Author: [Monica Powell](https://monica.dev/)
Technique: CSS & SVG

{% codepen https://codepen.io/M0nica/pen/poWRqMd %}

##The Hidden Gifts
Author: [Maxim Belov](https://elsemeow.glitch.me/) / @maximbelyakov 
Technique: CSS & JavaScript

{% codepen https://codepen.io/elsemeow/pen/mdrrZPe %}

##Holidays Are Coming - 3D CSS Truck 🎅🎄
Author: [Jhey Tompkins](https://jhey.dev/) / @jh3y 
Technique: CSS & JavaScript

{% codepen https://codepen.io/jh3y/pen/MWjyoLY %}

##Merry Chris-Morph!
Author: [Chris Gannon](https://gannon.tv/)
Technique: JavaScript (GSAP)

{% codepen https://codepen.io/chrisgannon/pen/rNGwWdd %}

##Wavy Snowman
Author: [Ale Thomas](https://pokecoder.hashnode.dev/)
Technique: CSS

{% codepen https://codepen.io/pokecoder/pen/abLLwQM %}

##Sleeping Santa
Author: Chhavi Khandelwal / @chhavikhandelwal 
Technique: CSS

{% codepen https://codepen.io/ChhaviKhandelwal/pen/VwMYLVa %}

##Santa Was Here
Author: Paulina Hetman
Technique: CSS

{% codepen https://codepen.io/pehaa/pen/OJxgKbE %}

Have you found or created some fascinating Christmas art using CSS or JavaScript? Please share it in the comments below!

[Zoran Jambor](https://zoranjambor.com)

---

Join 33,000+ developers & designers and [subscribe to CSS Weekly](https://css-weekly.com?utm_source=Dev.to&utm_campaign=Christmas&utm_medium=web) to receive the latest news related to CSS directly into your inbox.
[UniswapV2] UniswapV2ERC20.sol
Tags: solidity, web3, ethereum, uniswap
Published: 2022-01-05 14:17:53

This is quite similar to [OpenZepplin’s ERC20.sol](https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/ERC20.sol), but with some unique features. 

---
## Variables

### nonces

To prevent replay attack. 

### constructor

Having problem understanding it...

## Functions

### permit

Give permission.

1. If time passed `deadline`, revert.
    
    ```solidity
    require(deadline >= block.timestamp, 'UniswapV2: EXPIRED');
    ```
    
2. Recover address from digest and signature. (Honestly, I don’t get it.)
    
    ```solidity
    bytes32 digest = keccak256(
                abi.encodePacked(
                    '\x19\x01',
                    DOMAIN_SEPARATOR,
                    keccak256(abi.encode(PERMIT_TYPEHASH, owner, spender, value, nonces[owner]++, deadline))
                )
            );
    address recoveredAddress = ecrecover(digest, v, r, s);
    ```
    
3. If address matches the `owner` approve it. 
    
    ```solidity
    require(recoveredAddress != address(0) && recoveredAddress == owner, 'UniswapV2: INVALID_SIGNATURE');
    _approve(owner, spender, value);
    ```
How to Install and Use Alpine Js in Laravel 8
Tags: laravel, alpinejs
Published: 2022-01-05 14:17:35

Hello Artisan,

In this Laravel alpine js tutorial, I will show you how to set up alpine js in the Laravel 8 application. We can set up alpine js in two ways in our laravel application. One is using CDN and the other is from npm or yarn.

In this Laravel alpine js tutorial, I will show you how to set up alpine js in the Laravel 8 application. We can set up alpine js in two ways in our laravel application. One is using CDN and the other is from npm or yarn.

[How to Install and Use Alpine Js in Laravel 8](https://www.codecheef.org/article/how-to-install-and-use-alpine-js-in-laravel-8)
"100 Elixir Tips" eBook
Tags: elixir, tips, programming, beginners
Published: 2022-01-05 14:15:24

---
title: "100 Elixir Tips" eBook
published: true
description: Your daily sips of Elixir knowledge
tags: elixir, tips, programming, beginner
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://blog.miguelcoba.com/100-elixir-tips-ebook
---

I wrote a book with 100 short Elixir samples

- 100 knowledge pills for you
- 100 curated examples created for you
- 100 ways to master Elixir
- 100 opportunities to increase your knowledge

**IT IS FREE TO DOWNLOAD!!!**

![100 Elixir Tips](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os3u995892ifjqcg1seo.png)
 
## [Download it now](https://store.miguelcoba.com/l/100elixirtips) 


## About

I'm [Miguel Cobá](https://miguelcoba.com). I write about Elixir, Elm, Software Development, and eBook writing.

- Follow me on [Twitter](https://twitter.com/MiguelCoba_)
- Subscribe to my [newsletter](https://newsletter.miguelcoba.com)
- Read all my articles on my [blog](https://blog.miguelcoba.com)
- Get my books:
    - [100 Elixir Tips](https://store.miguelcoba.com/l/100elixirtips) [FREE]
    - [Deploying Elixir](https://store.miguelcoba.com/l/deployingelixir) [FREE]
    - [Deploying Elixir: Advanced Topics](https://store.miguelcoba.com/l/advancedtopics)
    - [eBook Writing Workflow for Developers](https://store.miguelcoba.com/l/ebookwriting)
[UniswapV2] UniswapV2Factory.sol
Tags: solidity, web3, ethereum, uniswap
Published: 2022-01-05 14:14:58

## Variables

### feeTo

Accumulate liquidity token for protocol fee.

### feeToSetter

Address that can change the `feeTo` .

### getPair

To get the address of exchange pairs. Ex: `getPair[<tokenA address>][<tokenB address>]` .

### allPairs

Array of exchange pairs created by this factory.

---

## Functions

### createPair

1. Get consistent order of token addresses.
    
    ```solidity
    (address token0, address token1) = tokenA < tokenB ? (tokenA, tokenB) : (tokenB, tokenA);
    ```
    
2. Check if address of pair is zero. It means that there is not existing pool for `token0` & `token1` .
    
    ```solidity
    require(getPair[token0][token1] == address(0), 'UniswapV2: PAIR_EXISTS'); // single check is sufficient
    ```
    
3. Initialize the pair of `token0` and `token` . Add pair to the `allPairs` array.
    
    ```solidity
    IUniswapV2Pair(pair).initialize(token0, token1);
            getPair[token0][token1] = pair;
            getPair[token1][token0] = pair; // populate mapping in the reverse direction
            allPairs.push(pair);
            emit PairCreated(token0, token1, pair, allPairs.length);
    ```
    

### setFeeTo & setFeeToSetter

If `msg.sender` is `feeToSetter` , we can change and control the `feeTo` .