teleren/devto huggingface dataset:
Listify - A Flask Todo App
Tags: python, webdev
Published: 2021-04-22 10:47:06

Assalamualaikum Warahmatullahi Wabarakatuh everyone, I have recently developed a Flask Todo List app.
**Live Deployment** - https://listify-todo.herokuapp.com/
**Repository Link** - https://github.com/manzumrahman/Listify/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j674i9vi897fgzo6jek4.png)
## Prerequsites
* Python (intermediate)
* Flask(basics)

## How I made it
So, First of all, I watched a tutorial on creating a Flask Todo List app and made the primary app. Then I watched another tutorial on Flask Authentication. After that, I added some basic user authentication to my app. And finally, I deployed it to Heroku after quickly adding some styles to it and making a homepage.

## Usage
* **1:** Clone this repository using
```bash:
git clone git@github.com:manzumrahman/Listify.git
```

* **2:** make a .env file and put this following text there
```bash:
DATABASE_URL=sqlite:///database.db
```

* **3:** Run the following commands in terminal
 ```bash:
pip install -r requirements.txt
python app.py
```
* **Done:** Your website will be live on http://127.0.0.1:5000

## Contribute
Make a pull request after fixing a bug or making your desired changes and put an appropriate description about your changes, I will merge it if I find it useful.

## Join Discord!
We have a friendly growing coding community out there in Discord named [CodeFiction](https://discord.gg/nqw65da)

> ##### Written with ❤ by [Md.Manzum Rahman](https://manzumrahman.github.io) :)
New Button for dev.to, mark article read.
Tags: javascript, technology, productivity, discuss
Published: 2021-04-22 10:44:45

---
title: New Button for dev.to, mark article read.
published: true
description: 
tags: javascript,technology,productivity,discuss
//cover_image: https://direct_url_to_image.jpg
---

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

A tampermonkey script for marking article read on dev.to. Use [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) to store your read list in your browser. So make sure your browser supports the IndexedDB feature.

Q：Why I want to write this script？

A: I often read articles on dev.to site, dev.to provides three buttons, namely like, unicorn and readinglist. But I want a button to indicate whether the current article has been read, similar to the read function of mailing lists and RSS. 

There are some articles that I don't like, unicorn, and don't want to add them to my readinglist. These articles are not useful to me. I want to know if I had read them, That's why I made this button. Just mark this kind of article as read. 

Another reason is https://dev.to/mrdulin/why-are-there-duplicate-subscription-emails-sent-to-me-461n

My mail subscription list will be repeated. Even though the subject of some mails is different, the articles pushed are the same, which makes me very inefficient. With this button, I open the article link and see if it has been read. If it's read, directly <kbd>command</kbd> + <kbd>w</kbd> to close the browser tab

The article you have not read.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/930m1ct2mqr0nwfhuxfs.png)

The article you marked as read. 

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

You can export and save the read list to your local file, GitHub Gist, etc... 

Install this script from here: https://greasyfork.org/en/scripts/425384-mark-post-read-on-dev-to

Source code: https://github.com/mrdulin/dl-toolkits/blob/master/scripts/mark-post-read-on-devto.js
Linking public_html to laravel public directory in shared hosting
Tags: laravel, linux, hosting
Published: 2021-04-22 10:35:05

Putting laravel application in public_html directory is very dangerous.

User should land on public directory.
If you can edit the document root, update it from `/home/user/public_html` to `/home/user/public_html/public`

But some shared hosting provider forbids updating document root of main domain.

Some people stores application to other directory and copies the index.php file from public directory and update path.
It works fine, but if you are serving asset like `css` and `js` files from server and try to deploy updates by git, your server will server old contents unless you copy latest assets to public_html directory.

There is another trick, to do it and your assets will remain update to original asset and no need to copy index.php file.

Let's assume that you have laravel application in `/home/user/laravel` directory.

SSH to your server and cd to home by `cd ~`.

*Back up public_html directory if you have any important file in it.*

Delete `public_html` directory by running `rm -rf public_html`.

Now create a symbolic link with name `public_html` point to your laravel applications public directory by running
`ln -s /home/user/laravel/public/ public_html`

Now the public_html is just a symbolic link of your applications public directory.

If anything change in your applications public directory, it will immediately available for user. 

Have Fun 🎉 !!!
How to fix - Sourcetree diff tool (FileMerge) doesn't launch on Mac
Tags: sourcetree, filemerge, mac
Published: 2021-04-22 10:19:11

On Mac, Sourcetree, by default is configured to use FileMerge that comes with Xcode for both Visual Diff Tool and Merge Tool.

In most cases when you update Xcode, it can lead to the potential issue of Sourcetree not launching FileMerge when resolving merging conflicts.

To resolve this issue, follow these steps:

* Open Xcode

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

* Go to preferences

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

* Go to the Locations tab, the Command Line Tools option will be empty

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

* Select Xcode from the dropdown list, it might prompt for the password

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

* Enter the password and click OK button, the final result should look like this

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

* Close Xcode and restart your merge, this time FileMerge tool will open correctly.
Marketing For Developers: 10 Must-Hear Podcasts
Tags: podcast, tmetric, blogging
Published: 2021-04-22 10:04:24

The popularity of audio content🎧🎶 including podcasts continues to surge. Today, we discuss why listening to podcasts is a great way to save time⏳ for developers that aim at expanding their marketing skills, and what podcasts are the top choice🌟🌟🌟 recommendations.
https://blog.tmetric.com/marketing-for-developers-10-must-hear-podcasts/
Deploy private git repository to shared hosting
Tags: deployment, git, cpanel, ssh
Published: 2021-04-22 10:01:35

Using git in shared platform, developer can deploy latest update easily to shared hosting.

If the repository is private, you need to do some extra work to deploy.

Before setting up git repository in server, you need to import passwordless SSH key to your server.

To generate SSH key run `ssh-keygen -t rsa -b 4096 -f id_rsa`
Press enter twice to generate passwordless key pair.

It will generate two file, `id_rsa` and `id_rsa.pub`

Log in to cpanel and navigate to **SSH Access** under **SECURITY** category.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yddqugqg5vdwz1saqol6.png)

Now click to Manage SSH Keys button.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euseyv1pyfr333m9qdhy.png)

To import your generated SSH key, click on Import Key button.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81dvhjhulqy8h0vz3d19.png)

Now copy the content of `id_rsa` file generated before and paste it to the textbox labeled with, **Paste the private key into the following text box:**.

Now copy the content of `id_rsa.pub` file generated before and paste it to the textbox labeled with, **Paste the public key into the following text box:**.

Leave the password field empty and click on **Import** button.
 
Now we need to tell GitHub about our public key.

Go to repository setting and navigate to **Deploy keys** section and click **Add deploy key** button to import your generated public key.

A for will appear, give this key a Title as you want and paste content of `id_rsa.pub` file in key textbox.

Deploy keys always have pull access by default. If you like to push changes from your server, check **Allow write access** checkbox.

Click **Add key** button to add this key as deploy key.

Now your server can pull from this private repository.

To deploy your repository to your server. Go to cpanel and navigate to **Git™ Version Control** under **FILES** category.

Click on Create button, copy SSH clone url from GitHub and paste it to **Clone URL** textbox.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21fi95o9xt4sp0hylqm1.png)

Give a **Repository Path** where you want to clone the repository and **Repository Name** as you like.

Click on Create button to create the repository.

Your server will clone the repository to the Repository Path you have given during repository creation.

Have Fun 🎉
Step-by-Step Guide for Effective Project Control and Management
Tags: projectmanagementsoftware, projectcontrol, projectrackertool
Published: 2021-04-22 09:48:28


Project Management App
As a project manager, you know very well that often things do not go as they are planned. It is, therefore, necessary to keep all factors in mind that can affect your project. Simply put, a backup solution or a Plan B should be ready to keep control of your project and accomplish it properly. Here, project controls come into the picture. Before moving to the procedure of project controls, let’s have a glimpse of quick facts on the importance of project management app. 

Quick Facts
1. For every $1 billion invested in the US, $122 million was wasted simply because of a lack of project performance

2. 75% of business and IT executives expect that their projects will fail for multiple reasons

3. Fewer than a third of all projects were accomplished on time and on budget 

4. Low-performing companies can complete only 36% of their projects, whereas high-performing companies complete 89% of projects

These stats are sufficient to show the importance of project management and control in your organization. Project controls or a project control system can assist you to serve this objective effectively. Even if you have a detailed project plan and a proper budget estimate, then also project controls are essential to keep an eye on your budget when different aspects keep on changing. Project controls can give a robust solution for accomplishing projects on time in this challenging time when the competition keeps on increasing. 

Let’s understand the concept of project controls before understanding its procedure. 

Introduction and Importance of Project Controls
PMI (Project Management Institute) has mentioned that a project control system is aimed at minimizing the gap between planning and execution of the project to achieve project goals, i.e. cost, time, and content. In other words, project controls are the affirmative actions along with a detailed documentation to keep projects on track and successfully deliver them. They are one of the crucial parts in a project management lifecycle. 

Though project controls are not that visible, they have a great impact on the structure and flow of your project. You can easily anticipate all upcoming opportunities and hurdles with the help of project controls. Every project manager has to act as a project controller as well, and it is possible for you as a project controller that you need to buy some time from the client and apply changes in the project. However, this comes with more budget cuts. 

Original Source: https://www.taskopad.com/blog/guide-for-project-control-and-management/
Laravel 8 User Roles and Permissions from Scratch 
Published: 2021-04-22 09:34:07

Today's leading topic is creating laravel 7/6 roles and permissions tutorial from scratch. we will create laravel 7/6 acl using spatie laravel-permission package. i written step by step tutorial of laravel 7/6 user roles and permissions authentication module.

You just need to follow few step to done laravel 7/6 roles and permissions auth. so let's follow this tutorial step by step.

Spatie role permission composer package provide way to create acl in laravel 6. they provide how to assign role to user, how to assign permission to user and how to assign permission assign to roles. i will write step by step creating roles and permissions in laravel 6 application.

I also posted on tutorial for ACL User Roles and Permissions using entrust package, you can see here

[you can see here](https://www.codecheef.org/article/user-roles-and-permissions-tutorial-in-laravel-without-packages)
Learn Structuring React Projects with a Dogs App [⚛ + 🐶]
Tags: react, webdev, tutorial, productivity
Published: 2021-04-22 09:31:22

This week, I decided to focus more on Youtube, since that’s a channel which is growing without any direct inputs from me. There are several topics I can create videos on which viewers would be interested in.

Today’s video was on “Learn Structuring React Projects with a Dogs App [⚛ + 🐶]” in which I build a Dogs app from scratch in NextJS and also explain the various parts of the project structure in it.

It was fun to make, but took a lot of time to record + edit. Hopefully, it pays off in the long run ;)

The article version of this video can be found on dev.to itself: https://dev.to/thewritingdev/a-better-way-to-structure-react-projects-4ci6

You can check out the video here:

{% youtube lViIdphWTwY %}
Setup external modules with React Context
Tags: react, context, frontend, javascript
Published: 2021-04-22 09:29:35

(story originally appeared at [kardys.dev](kardys.dev))

A pattern that is helpful when you use external modules in your app.

Some time ago Dan Abramov posted this tweet:
[Dan Abramov's tweet](https://twitter.com/dan_abramov/status/1363134687250636800)

```
<Context.Provider value={<RenderedComponent />}>
  <Something />
</Context.Provider>
```

This pattern is neither necessary nor common, yet it is useful at certain times.

## What are use cases?

The pattern is helpful when external modules arise. What exactly do I mean by external module?

See, chat. Let's assume you have SPA and you want to add Intercom-like chat to your app.

Should you setup it somewhere down in your render-tree? 

It is an option.

```
FloatingButton.jsx
//...
<Chat
	prop1={prop1}
	flag
	anotherFlag
	/>
	
```

Yet,
## What if you need a change?

* You might need it in 2+ places:
    * under a floating button
    * or when user selects 'help' section
    * so, you instantiate 2 some components 2 times?
* You might want to keep all external configs in one place
    * to have an eye on dependencies
    * to slowly replace all externals with your internal code
    * would looking for all of these usages be simple? It might

...but there's another way

## Setup external component with context

What if instead of:

```
FloatingButton.jsx
//...
<Chat
	prop1={prop1}
	flag
	anotherFlag
	/>
	
HelpSection.jsx
//...
<Chat
	prop1={prop1}
	flag
	anotherFlag
	/>
```

you do:
```
ExternalModules
export const ExternalChatProvider = (props) => <Context.Provider value={<Chat
	prop1={prop1}
	flag
	anotherFlag
	/>}
	{...props}
	/>
export const ExternalChatConsumer = (props) => <Context.Consumer {...props}/>
  
Main
//...
<ExternalChatProvider>
	<SPA/>
</ExternalChatProvider>

FloatingButton
//...
<ExternalChatConsumer/>

HelpSection
//...
<ExternalChatConsumer/>

```

It:

* has single point of config
* follows DRY rule
* clearly signals that module is external (read: possibly unsafe)
* rendered once

I've simplified code, but you could:

* add memoization,
* parametrize it,
* etc.

This technique is useful not only for external modules, but for using shared components in general.

A word of caution: do not overuse

* context is additional component,
* it causes jumps in logic and
* it is harder to read app flow with to many contexts.

**How do you manage external components?**
Safer (and fast) refactoring in React
Tags: frontend, javascript, react, refactoring
Published: 2021-04-22 09:26:14

(story originally appeared at [kardys.dev](kardys.dev))

How snapshot testing is great for refactoring

## Simple process

* Snapshots work for things like data structures (as regular tests).
* Refactoring is another great use case.

Here, I'm talking about refactoring.

## To refactor, you need stability.

You work on SaaS app's frontend. New features flow in. You (or your teammates) develop new pieces of code.

What comes next?

At one point you need to refactor "little piece of code". And here you feel like you go through gates of hell.

* you edit `X` - component `A` breaks down
* you fix it, `A` works now - but suddenly `Y` fails

The deeper you go, the more problems arise. Even, when you try to edit just "one thing".

Does it often has to be like this?

Yes, I've exarregated situation (have I?).

Yet, we need to be sure if our refactoring works as before.

Otherwise we blow up part of the system and we are not aware of that.

How to refactor code safely without too much hassle?

## Snapshot testing stabilize your code

Snapshots have had its 5 minutes.

When these arised, I've seen articles about snaps everywhere. People praising simplicity were most common.

The simplicity came with its' hidden cost. At one point I've made the same mistake.

It is:

* too many snapshat tests.
* too many and too fragile.

Tests have indicated changes in structure. Most often the change was meaningless (for instance, autogenerated class name change).

It builds insensitivity to further warnings. A good reason to avoid these.

But, there's great use case for snapshot testing which I learned some time ago.

Refactoring.

## Refactoring with snapshot tests

The process is:

1. You make snapshot of a component you want to refactor. (don't commit these)
2. You refactor the code
3. If snapshot test passes after refactor, delete test.

Test is temporary. You don't have to push it anywhere.

It is just your helper, so you are certain that after refactoring, result looks exactly the same


## Check it out.

It's:

* simple
* fast
* easy

**How do you refactor your code?**
Redirect emails to webhook.
Tags: email, saas, webhook, api
Published: 2021-04-22 09:22:28

---
title: Redirect emails to webhook.
published: true
description: The idea behind Mailhook is to generate an unique email address, just for you. Once you have received any email, it gets redirected to the chosen webhook url.
tags: 
  - email
  - saas
  - webhook
  - api
cover_image: https://i.imgur.com/olslKO2.png
---
Hey,

I've been working the last few days on a sideproject to redirect emails to webhook.
The idea behind Mailhook is to generate an unique email address, just for you. Once you have received any email, it gets redirected to the chosen webhook url.

Here is what the JSON sent to the webhooks looks like :
{% gist https://gist.github.com/CamTosh/1b9ee959bc712be40cba9e39e9d2c3ba %}



There is a free but not time limited plan to try.

Let me know what you think 😄

The website : https://mailhook.app
ProductHunt : https://www.producthunt.com/posts/mailhook-app
React.JS in a Nutshell
Tags: react, javascript, beginners
Published: 2021-04-22 09:15:26

React, A JavaScript Library for Building Beautiful User Interfaces.

It was developed by Facebook and was released in the year of 2013. 

ReactJS has been one of the most influential libraries of recent times.

We use it to build components that represent logical and reusable parts of the UI.

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

The beauty of React is the simplicity of creating a component.

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

You can use JavaScript Functions with HTML Code inside it to render the components. This is known as JSX. It compiles HTML and JavaScript together.

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

As an added bonus, you can easily jump into React Native and start building mobile apps.

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

It's no surprise that this UI Library is one of the in-demand skills for many developers today.

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

Thanks For Reading this Blog. If you enjoyed it, smash the like button and share it with your friends.

Remember...

# Keep Coding Y'All 👨🏻‍💻
Laravel Custom ENV Variables Tutorial
Tags: laravel, php, tutorial, env
Published: 2021-04-22 09:13:39

Today,I will learn you how to add custom env variables in laravel. We will example of laravel custom env variables. i explained simply about how to add custom env variables in laravel. i would like to share with you add new custom env variables laravel. Let's get started with laravel create new env variable.
more...
https://itwebtuts.blogspot.com/2021/04/laravel-custom-env-variables-tutorial.html
Jquery UI Nested Tabs Tutorial
Tags: jqueryui, jquery, tutorial, javascript
Published: 2021-04-22 09:05:11

This post will give you example of jquery ui nested tabs example . Here you will learn jquery ui sub tabs example. This tutorial will give you simple example of example of jquery ui tabs with subtabs. This tutorial will give you simple example of jquery ui tabs with subtabs.
more....
https://itwebtuts.blogspot.com/2021/04/jquery-ui-nested-tabs-tutorial.html
🌍📍 Building an Interactive Dot Density Map in JS
Tags: datascience, webdev, beginners, javascript
Published: 2021-04-22 09:04:47

Dot density maps may seem to be difficult to build, especially for those taking their very first steps in interactive data visualization development. But the truth is, they are not.

Shachee Swadia, a data designer and storyteller, made a compelling tutorial showing how to create a beautiful interactive JavaScript-based dot map in four steps.

To illustrate the process, in the article, she is visualizing data about all shipping ports across the world, first making a basic map in just a few lines of code and then improving it in several more.

Check out the [JS dot map tutorial](https://www.anychart.com/blog/2021/04/20/js-dot-density-map/) 🔥

🚢⚓️🌐
Make an Instagram Bot Using Python
Tags: python, programming, beginners, watercooler
Published: 2021-04-22 08:30:06

[![Instagram Bot](https://res.cloudinary.com/marcomontalbano/image/upload/v1619079848/video_to_markdown/images/youtube--Dru-c8LrH0s-c05b58ac6eb4c4700831b2b3070cd403.jpg)](https://www.youtube.com/watch?v=Dru-c8LrH0s "Instagram Bot")

Source Code: [GitHub](https://github.com/larymak/Python-project-Scripts/tree/main/InstagramBot)  

Connect With me at [Twitter](https://twitter.com/larymak1) | [Insta](https://www.instagram.com/nextgencoders/) | [YouTube](https://www.youtube.com/channel/UCrT1ARRZfLOuf6nc_97eXEg) | [LinkedIn](https://www.linkedin.com/in/hillary-nyakundi-3a64b11ab/)  | [GitHub](https://github.com/larymak)
Login and SSH to Magento Cloud
Published: 2021-04-22 08:22:53

Install the magento-cloud CLI.
```
curl -sS https://accounts.magento.cloud/cli/installer | PHP
```
Add magento-cloud CLI to the bash profile.
```
export PATH=$PATH:$HOME/.magento-cloud/bin
```
Consult operating system documentation for details.

Reload the updated bash profile.

```
. ~/.bash_profile
```
To initiate the CLI, call magento-cloud and enter your Cloud account credentials when prompted.

Run:
```
magento-cloud login
```

SSH

```
magento-cloud ssh 
```