teleren/devto huggingface dataset:
How to Clean Gmail Inbox Easily 
Tags: beginners, google, gmail, inbox
Published: 2022-01-29 17:52:25

What if I say there is a way to clean your inbox and environment at same time. Sending 65 emails is roughly equivalent to driving 1 km in a car, each mail generates 0.4g of CO2. Follow these simple steps to keep your gmail clean.

1. Click on the checkbox and select ALL for options. You will see a text in blue color eg: ‘Select all 1234 conversations in promotions’. We will have a lot of unwanted mails in promotions and social sections. So, this option will be helpful to clean bulk numbers of mails.
Delete BULK numbers of emails at a time.
![Image with sample example for above description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0pf91fyr4bayp0r9a0r.jpg)

2. To delete mails in primary section mails, select UNREAD option from checkbox options. 
![Image with sample example for above description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufjpc5cjqmc3jbe1ftdc.jpg)
3. We can always unsubscribe to unwanted mails and empty the trash.

![Image with sample example for above description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hegmtkx87s2d0nqeo43k.jpg)
![Image with sample example for above description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwcl1g393dynsll99mtb.jpg)
[ Theme ] How to customise Termux terminal
Tags: termux, linux, termuxtheme, hacking
Published: 2022-01-29 17:49:47

**What is Termux ?** 

Termux is an Android terminal emulator which is based on linux environment.
You can perform many attacks ( ex - openport attack , ddos , mitmf , sql injection , etc )

Termux support both rooted and unrooted devices
You can termux as a root to perform extra attacks which requires root access .

**Usage :**

Open the app , you will see graphical interface 
Click on install packages , it will download some basic packages ( make sure you are connected with internet )
Now you can use termux
Before using it ( make sure you are connected with internet )

**what can you do with termux  ?**

1. we can perform different attacks 
2. Pentesting
3. Vulnerability Scanning
4. Ethical Hacking

We can do most of things using termux 

How to install Termux 
we can normally install termux using F-Droid

After installing we have to run some command

apt update && apt upgrade -y

**Termux-os:**

[+] Based on Zsh Shell !

[+] Pure Termux Look !

**Features:**

- Added Termux Extra Keys
- Added Banner
- Added Own made Advance zsh theme
- Added Highlight / Autosuggestion


**Installation :**

git clone https://github.com/h4ck3r0/Termux-os

cd Termux-os

bash os.sh

{% embed https://youtu.be/VSG2glraCws %}.
Using Python for Contributing to Open Source
Tags: python, beginners, opensource, help
Published: 2022-01-29 17:39:30

Hi everyone,

I'm into **Python** for round about a year. I've tried my best to go through all basic concepts and also done some projects.

Now I'm planning to contribute to Open Source and also planning to appear on GSoC 2022.

## Can you please guide me that how can I use python - count my level as intermediate - for GSoC.

I'm also sharing my GitHub for better idea: [GitHub](https://github.com/Muhammad-Ahsan-Rasheed)
⭐🌟new schema builder and data validation library⭐🌟
Tags: testing, javascript, npm, webdev
Published: 2022-01-29 17:34:10


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

last day `alguerocode` publish new schema builder and data validation, it's very useful for user login validation. **it's volder**.

visit [volder.vercel.app](https://volder.vercel.app) to see more

volder is powerful Object schema validation, it lets you describe your data using a simple and readable schema and transform a value to match the requirements, it has custom error messages, custom types and nested schemas.

#### example
```js
import { Volder, Email } from 'volder';


const userSchema = new Volder({
    username: {
        type: [String, 'username must be in string'],
        alphanumeric: [true, 'username should only contain letters and numbers'],
        minLength: [4, 'username at least 4 characters'],
        maxLength: [16, 'username at most 16 characters'],
        required: [true, 'username is required'],
        trim: true
    },
    email: {
        type: [String ,'email must be in string'],
        pattern: [Email, 'not valid email'],
        maxLength: [150, 'email be at most 150 characters'],
        required: [ true,'email is required'],
        trim: true
    },
    password: {
        type: [String , 'password must be in string'],
        minLength:[8, 'password should be at least 8 characters'],
        maxLength: [30, 'password should be at most 30 characters'],
        required: [ true, 'password is required'],
        matches: ["^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]$", 'password must contain numbers and letters']
        
    }
})

const { valid, errors, value } = userSchema.validate(input);
```
This is a sample project in learning tyme.
Tags: javascript, html, css
Published: 2022-01-29 17:13:47


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx9xxf8z7p95x5jivxwn.png)This is my personel page iam happy i wiil completed in this project.
check the link.
https://athifbinu.github.io/loging.page/
I Created a List With Everything You Need to Build Your Next React Native App
Tags: beginners, reactnative, javascript, mobile
Published: 2022-01-29 17:01:20


After working with React Native for 2 years, I made a [list](https://github.com/chefk5/react-native-start-guide) with the most useful libraries, documentations, tools and resources to learn and build your next react native app.

Please feel free to contribute to this list by opening a PR.
Centering a div made easy with Tailwind CSS
Tags: tailwindcss, html, beginners, javascript
Published: 2022-01-30 03:38:28

---
title: Centering a div made easy with Tailwind CSS
published: true
date: 2022-01-29 16:54:33 UTC
tags: tailwindcss, html, beginners, javascript

canonical_url: https://khazifire.hashnode.dev/centering-a-div-made-easy-with-tailwind-css
---

Somehow centering a div is a problem that most people face, especially beginners getting started with web development. I have been working with Tailwind CSS and I wanted to quickly show you how to center a div using Tailwind.

## Introduction

We will be exploring two methods of centering a div with Tailwind CSS. There is no right and wrong choice, so feel free to use whichever method you feel most comfortable using. Lets dive in!

## 1. Centering a div using Flex in Tailwind

We will start by using flex to center a div vertically and horizontally on a page. But before that, if you have not integrated Tailwind within your html project, check my [previous article](https://dev.to/khazifire/how-to-add-tailwind-css-to-your-html-project-g66) for a quick run through on how you can add tailwind to your html project.

```
<div class="flex justify-center items-center h-screen">
      Centered using flex
</div>

```

Lets break down what we just did:

- **Flex:** adds the CSS flex property (display:flex).
- **justify-center:** used to center the div horizontally
- **items-center:** used to center the content vertically
- **h-screen:** not necessary but it sets the height of the div to 100vh (height:100vh).

That was easy right ? Lets move on to the second way of centering a div with Tailwind CSS.

## 2. Centering a div using Grid in Tailwind

A second option of centering an html element is by using Grid. This approach is very similar to flex, but with a few changes.

```
<div class="grid place-items-center h-screen">
  Centered using Grid
</div>

```

Lets break down what we just did:

- **Grid:** give the element a CSS grid property (display:grid).
- **place-items-center:** places grid items on the center of their grid areas [learn more](https://tailwindcss.com/docs/place-items) 
- **h-screen:** sets the height of the div to 100vh (height:100vh).

## Conclusion

I hope you can now center a div using either grid or flex😊. Thank you for reading. If you have any questions, feels free to reach me through twitter [@khazifire](https://twitter.com/khazifire). And don't forget to follow for more similar content.
Heroku error /node_modules/node-sass: Command failed
Tags: heroku, rails, node
Published: 2022-01-29 16:36:07

If during build you are getting: `error /tmp/build_1bb645c1/node_modules/node-sass: Command failed.`

On 16 December 2021, Heroku [changed](https://devcenter.heroku.com/changelog-items/2306) the Node version to 16.13.1 (which was previously 12.16.2). Since we have dependencies such as `node-sass v4.14.1` which requires Node v14, we need to specify the Node version Heroku should use.

* First, we need to use multiple buildpacks, which will specify to install Node first then install Ruby ([Read more from Heroku](https://devcenter.heroku.com/articles/ruby-support#installed-binaries)).

**Please make you install them in the order below**

> ```
> $ heroku buildpacks:add heroku/nodejs
> $ heroku buildpacks:add heroku/ruby
> ```

* Verify that the buildpacks are installed

> ```
> $ heroku buildpacks
> ```
> \>>>
> 1. heroku/nodejs
> 2. heroku/ruby

* If buildpacks are not in the order above, remove each of them and add them again. If, for example, `ruby` comes first, you can just remove it, then add it again as below.

> ```
> $ heroku buildpacks:remove heroku/ruby
> ```
> Add it again
> ```
> $ heroku buildpacks:add heroku/ruby
> ```

> Now you should have the correct ordering.

* Specify correct Node version in `package.json` ([As referenced on stackOverflow](https://stackoverflow.com/a/70396981/8050183))

> ```
> {
>   ...
>   "engines": {
>     "node": "14.x"
>   },
>   ...
> }
> ```

* Make sure to run `$ yarn install` to update your dependencies based on the new Node version.

> This happens because your application contains a Yarn lockfile `yarn.lock` which does not match the dependencies in `package.json`. This can happen if you use npm to install or update a dependency instead of Yarn.

* If applicable commit to Git and Deploy!

I'm new here, follow me for more solution oriented articles.
Writing Scrum Toolkit #0 - The good, the bad and the ugly
Tags: javascript, typescript, webdev, devjournal
Published: 2022-01-29 15:45:53


![Clint Eastwood](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ishm83mvg7wea3cjo3wy.png)

A few days ago with a friend, we decided to create a unified (all-in-one) tool for scrum masters which will be able to connect the most important features for leading retrospective, kudos giving and planning.

The idea came from my team experience with tool called Scrumlr. It's a great tool but it's missing a lot of features such as voting lock, avatars managment for people without account, better to use grouping-ungrouping cards. Also we are using planning poker and recently decided to start giving kudos - the way to say "thank you". Various processes and ceremonies with various tools. All of the tools we have been using, are generic as possible to match many common problems of corporates over the world but not matching our problems in details.

This series is intend to show process of work on the side project mentioned in the title. I'll be explaining mechanics and more tricky or fancy code or design aspects. So stay tuned! 🚀
Looking for Admin Panel built with Laravel 8, Vue.js 3 & Tailwind CSS?
Tags: laravel, vue, tailwindcss, admin
Published: 2022-01-29 15:44:23

A Complete Full Stack Starter Kit for Web Developers to quickly deliver your next client project!

Vana Admin offers tons of built-in features that significantly reduces your effort & time of development.

Check out the live demo at https://ui.scriptmint.com

{% youtube Fnn9O9O2ueg %}

## Starting a new project is NO LONGER a pain!

A new project consumes a lot of time to build core features. Whether you are individual or a team, you need to take care of core features in the frontend as well as backend.

Vana Admin can significantly reduce your development time to quickly build & deliver your next web project.

Checkout some of the core features you get with Vana Admin:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643463253396/rmmGyFrPT.png)

### Why Vana Admin?

- Always Up-to-date
- Built as SPA
- Support REST API
- Elegant Syntax

Lets understand the Concepts, Design Pattern used to build Vana Admin & Know what's in the bucket for Future.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643463192893/AXyis4z0Y.png)

Check how easy it is to create a sample form:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643463513025/KVWGJxjjj.png)

Visit https://scriptmint-website.test/vana-admin to know more about Vana Admin.

Do let us know what extra features & functionalities you wish to have in Vana Admin!
How to deploy FA2 contract for NFT on Tezos.
Tags: tezos, smartp, contract, web3
Published: 2022-01-29 15:41:26

Let's see.

## Writing the code.
```py
import smartpy as sp
fa2 = sp.io.import_script_from_url("file:./fa2.py")

class Token(fa2.FA2):
    pass

admin = sp.address("tz1Qd55E9faDRDUWVbFTv4GXe7mA46NPctLx")
sp.add_compilation_target("Token", Token(
    config = fa2.FA2_config(
        non_fungible=True,
        assume_consecutive_token_ids = False
    ),
    admin = admin,
    metadata = sp.big_map({
        "": sp.utils.bytes_of_string("tezos-storage:content"),
        "content": sp.utils.bytes_of_string("""{name: "LOL"}"""),
    })
))
```

## Deploying the code
Since, we're not noob here, let's create a makefile.
```
SP=~/smartpy-cli/SmartPy.sh
SHELL := /bin/bash

nft:
	$(SP) compile ./nft.py ./output --html
	$(SP) originate-contract \
	--code ./output/Token/step_000_cont_1_contract.tz \
	--storage ./output/Token/step_000_cont_1_storage.tz \
	--rpc https://hangzhounet.smartpy.io
```

Then write the following command to deploy the code to testnet.
```bash
make nft
```

Got any question, leave in the comments.
`form_with` option change from `local: false` to `local: true`
Published: 2022-01-29 15:26:56

---
title: `form_with` option change from `local: false` to `local: true`
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

## Introduction

`form_with` was [introduced in Rails 5.1](https://guides.rubyonrails.org/5_1_release_notes.html#unification-of-form-for-and-form-tag-into-form-with) to avoid the confusion of having `form_for` and `form_tag` having similar roles.

`form_with`, was to have by default forms submitted with AJAX, xhr, rather than the standard HTTP request. The difference is that with a HTTP request, the current window is cleared, and the server response is loaded into the window. While an AJAX request, the current window is unaffected and the page can be updated depending on the results of the request.

## Rails changes to `form_with`

Rails 5.1 documentation of `form_with` options [described the situation as](https://apidock.com/rails/v5.1.7/ActionView/Helpers/FormHelper/form_with):

> :local - By default form submits are remote and unobstrusive XHRs. Disable remote submits with local: true.

However, by Rails 6.1 the situation has reversed as `form_with` was now local by default. [This is described in the documentation as:](https://apidock.com/rails/v6.1.3.1/ActionView/Helpers/FormHelper/form_with):

> :local - By default form submits via typical HTTP requests. Enable remote and unobtrusive XHRs submits with local: false. Remote forms may be enabled by default by setting `config.action_view.form_with_generates_remote_forms = true`.

### Verify

With all this confusion, it's good to verify that what you think you're doing is actually happening. In the code we add `local: false` meaning this is a remote form to be submitted by AJAX.

#### Example Code ([from 5.1 release notes](https://guides.rubyonrails.org/working_with_javascript_in_rails.html#form-with))

```erb
<%= form_with(model: @article, local: false) do |form| %>
  ...
<% end %>
```

#### Produced code
If we view the HTML of the page the produced code includes `data-remote="true"`. We have an AJAX form.

```html
<form action="/articles" ... data-remote="true">
  ...
</form>
```


### Motivation for writing
I keep getting confused about what happened when, and I'm writing this as reference to me. I do like the [api dock](https://apidock.com/rails/v5.1.7/ActionView/Helpers/FormHelper/form_with) which makes it easier to see what happened. Obviously, if I've misunderstood something, please feel to correct me. I wouldn't want to make the situation any worse!!

### Reading
[2.8 Unification of form_for and form_tag into form_with](https://guides.rubyonrails.org/5_1_release_notes.html#unification-of-form-for-and-form-tag-into-form-with)
Automatic periodic backups from PostgreSQL to S3 using Cron
Tags: postgres, s3
Published: 2022-01-29 15:04:42


If you're managing your own databases you'll need to make sure you database is backed up properly. A good option is to store your backups in an S3-compatible object storage.

1. Install `s3cmd`:

```
sudo apt install s3cmd
```

2. Configure it:
```
s3cmd --configure
```

It will ask you several questions, consult your S3 providers docs for more information.

3. Write a bash script to create a postgresql dump and upload it to S3:

```bash
DIR=$(dirname "${BASH_SOURCE[0]}")
DB_NAME=my_db
DUMP_PATH="$DIR/$DB_NAME_$(date +"%Y-%m-%d@%H-%M").dump"

# DUMP the database
pg_dump --encoding utf8 --format c --compress 9 --file $DUMP_PATH $DB_NAME

DUMP_KEY=$DUMP_PATH | cut -c 3- # Remove the ./ from the path

# Upload the dump file to S3
s3cmd put $DUMP_PATH s3://$DB_NAME-db-backups/$DB_NAME/$DUMP_KEY

# Remove the dump file from disk
rm $DUMP_PATH
```

For more information about taking PostgreSQL backups, checkout [my previous post](https://mazeez.dev/posts/backup-and-restore-in-postgres).

4. Write a crontab job to run your script periodically:

```
crontab -e
```

```
0 */3 * * * path/to/your/script/job.sh
```

**Note:** This expression means the job will be run every 3 hours. You can change it to whatever your want.
I Made a Free Programming Puzzle Inspired by Escape Rooms
Tags: programming, challenge, codenewbie, codingmystery
Published: 2022-01-29 14:50:08

I made a free escape-room-inspired mystery that is packed with immersive coding puzzles and programming challenges.

[Check Coding Mystery out here.](https://codingmystery.com)

Coding Mystery is supposed to be an enjoyable past-time activity, similar to completing an escape room or a challenging coding problem. At the same time, it can be a fun and great way to learn programming, both for beginners who are just starting out, or for the more experienced who want to practice their problem-solving abilities.

I would love to get your feedback on this project!
The impact of security in FOSS projects and the future
Tags: opensource, security, programming, javascript
Published: 2022-01-29 14:40:30

All of us have either heard of the `Faker.js` debacle or have used the package in your repositories/projects. Faker JS has been very useful and convenient that one of the Amazon SDKs used them in some level. Unfortunately, due to the _rogue_ actions of the maintainer(who actually had control over their repository and were legally entitled to do so) the package got impacted. This incident has become a turning point in the history of FOSS and security


## Stop forking Open-Source software disgracefully

It is of high importance that we address the concern of Big Tech companies using FOSS software without any contribution. Maintainers are really tired of maintaining large repositories when there are big tech companies who swoop in and take the projects for free. Elastic (the company behind the infamous Elastic Logstash and Kibana stack) had recently amended their license to prevent one of the major cloud provider(s) from using their open-source projects and it clearly reflects on the mentality of the maintainers who are tired of seeing this happen. It is clear that the Open source repository maintainers are expecting major tech companies to back them instead of forking without any contribution. 

The mentality of maintainers have evolved into :
###### Contribute to FOSS in any and all possible forms, Forking without contribution is disgraceful

## Open Source is not equal to Secure
The idea of open-source applications being `s3cure` because of it being transparent has been disproved by this debacle and it can clearly be understood that, more time, attention, effort and money needs to go towards the security of Open Source applications. GitHub (which pioneers Open Source work) has rolled out useful features like `dependabot` but let us address the reality, is dependabot enough to maintain repositories? Certainly not. All of us can agree that dependabot is amazing for small repositories but for the scales of applications like Firefox, VLC Media player or even Kubernetes, it is certainly not enough.

This part of the story has a better ending than the previous part, Various tech giants have come together and committed 10 Million US  dollars to fund the OpenSSF organization which works and strives to ensure the security of Open source projects. As developers, I think we should also start contributing to the projects and initiatives of OpenSSF to have a more harmonious  tech-world.

Post-Script: What the maintainer of `faker.js` did was totally unacceptable and unfair though they were legally entitled to do so. It must be duly noted that they are not the only part of the community but their actions reflect the mindset of the community which runs the world. With that being said, there are FOSS projects which bring bread and butter to plates of the contributors and maintainers, it'd be really unfair for me(as the author) to not mention that perspective as well. Open Source community works on good-faith and acts of bad faith is detrimental to every stake holder of the community, including but not limited to itself.
Paracetamol.js💊| #36: Explica este código JavaScript
Tags: javascript, spanish, webdev, beginners
Published: 2022-01-29 14:29:35

## **Explica este código JavaScript**

```js
let num = 10;

const increaseNumber = () => num++;
const increasePassedNumber = number => number++;

const num1 = increaseNumber();
const num2 = increasePassedNumber(num1);

console.log(num1);
console.log(num2);
```

-     A: `10`, `10`
-     B: `10`, `11`
-     C: `11`, `11`
-     D: `11`, `12`

Respuesta en el primer comentario.

---
Day 5/100 Java
Tags: 100daysofcode
Published: 2022-01-29 14:14:57

Afternoon!

Day 5/100

**Language:**
JAVA

**Time Period Spent:**
2hrs

**Course Taken:**
Udemy: Java Programming Masterclass - Tim Buchalka

**Todays Learning:**
- Method Overloading
- Code Challenges:

	- Leap Year Calculator
	- Decimal Comparator
	- Equal Sum Checker
	- Teen Number Checker
	- Method Overloading (Measurement Converter)

**Additional Notes:**
Easing my way through the course. I have realised that I enjoy to overcomplicate my solutions, I do this in hope to incrementally  cut down on the amount of code written. I guess that this is a way of allowing me to visually see what I can improve on and what needs changing.

While learning method overloading, I realised that it can be useful to overload methods by applying different parameters to go into it but, I still question the use-case. Why overload the method when you can rewrite it in a different method and make your code easier to read?

Understandable that we want to use a method overload to be able to have different implementations of the same method but It seems to make the code harder to read in my eyes. I write this knowing that I will most likely look back and say I can live without them.

If anyone has an explanation for this, I would very much like to talk on it!