teleren/devto huggingface dataset:
Feature that can rock your chat app project🙌
Tags: react, node, mern
Published: 2020-08-15 13:09:20

Recently i am working on a realtime chat app using mern stack. 
So i thought to make it bit interesting while adding some production level features like deleting a sent message in realtime like whatsapp or Instagram. And a feature to tag a message for new reply.
These feature will make my project really impressive and will increase chances of getting a developer job.
Any online tutor doesn't teach features like this and they will not teach us. 
And i am not able to find these features anywhere online.

So i have to implement them by myself.
1. Real time message deletion 
2. Tag a message for new reply
How to Set Responsive Breakpoints in Swiper React
Tags: responsive, carousel, react, swiper
Published: 2020-08-15 12:22:50

I’ve been [asked on YouTube](https://youtu.be/l4kFO6VQPfA) how to use breakpoints in the new [react version of Swiper](https://swiperjs.com/react/), so here it is.

<img src="https://github.com/valnub/swiper-react-responsive-breakpoints-demo/raw/master/demo.gif">

[Download Source Code](https://github.com/valnub/swiper-react-responsive-breakpoints-demo)

First, you have to set breakpoints in jsx:

```
<Swiper
  breakpoints={{
    // when window width is >= 640px
    640: {
      width: 640,
      slidesPerView: 1,
    },
    // when window width is >= 768px
    768: {
      width: 768,
      slidesPerView: 2,
    },
  }}
>
  {slides}
</Swiper>
```

Then, add custom media queries to your css:

```
.swiper-container {
  width: 480px;
}

@media screen and (min-width: 640px) {
  .swiper-container {
    width: 640px;
  }
}

@media screen and (min-width: 768px) {
  .swiper-container {
    width: 768px;
  }
}
```

Hope this was helpful to you, don’t forget to checkout my [working demo on GitHub](https://github.com/valnub/swiper-react-responsive-breakpoints-demo). Leave a comment here if you have any questions. Happy coding!

Twitter
https://www.twitter.com/timo_ernst

Blog
https://www.timo-ernst.net

YouTube Channel
http://www.timoernst.tv
SwiperJS React Video Tutorial | 2020
Tags: swiper, carousel, react, swiperjs
Published: 2020-08-15 12:16:42

After many years of being tied to 3rd party React versions of SwiperJS the official team has now created its own version of SwiperJS for React. In this tutorial I will explain how to use it.

{% youtube l4kFO6VQPfA %}

Find source code here:
https://github.com/valnub/swiper-react-demo

Twitter
https://www.twitter.com/timo_ernst

Blog
https://www.timo-ernst.net

YouTube Channel
http://www.timoernst.tv
Simple Layout Challenge #3
Tags: challenge, html, css, beginners
Published: 2020-08-15 12:15:54

## About

Hi everyone 👋

A few days ago I asked a question about creating a documentation page for your projects and got a lot of great answers and tips, it was awesome 🤩 But to develop documentation for [Keukenhof.js](https://github.com/Alexandrshy/keukenhof) I decided to go the other way and develop the page myself using the stack - HTML & CSS & JS, why I went this way I plan to write in a separate note 😉 By the way, [here's](https://keukenhof.netlify.app/) what I got

Today I offer you a small challenge to create part of this documentation, namely the header 🎩

## Task

This is how the design looks, you can find all the necessary resources [here](https://github.com/Alexandrshy/keukenhof/tree/master/docs/src). A prerequisite is to implement responsive. How the design should behave at small screen sizes is up to you, the main goal is to make the content easy to read

{% youtube OkFZUi3JX8g %}

___

![Expected Result](https://dev-to-uploads.s3.amazonaws.com/i/xwo5wc6j6n5d3tmvusye.jpg)

___

I hope this challenge will be of interest to you, I'm waiting for your links and ready to conduct a code review 🤗
Can You Code on iPad Pro?
Tags: ipad, javascript, webdev, ios
Published: 2020-08-15 12:12:45

In this video I’m looking at various IDE apps for iPad OS and test if you can actually code on an iPad Pro with mouse and keyboard. For the future I am thinking about creating an in-depth video about PlayJS IDE app for iPadOS – it’s pretty cool. Would you be interested to watch it? Lemmi know :-)

{% youtube _vuR9_LFFsA %}

Twitter
https://www.twitter.com/timo_ernst

Blog
https://www.timo-ernst.net

YouTube Channel
http://www.timoernst.tv
How to pass environment variable into react apps created using cra (create-react-app)
Tags: react, beginners, webdev
Published: 2020-08-15 12:08:03

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

Follow on Instagram @codedrops.tech for daily posts.
Daily Developer Jokes - Saturday, Aug 15, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-08-15 12:00:06

---
title: "Daily Developer Jokes - Saturday, Aug 15, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Aug%2015%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259a6b60d2.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
What's the best tool for automatically ignoring long email threads about tech buzzwords?

"Block-chain"
 -->
Practical Front End Development Part 2 - CSS
Published: 2020-08-15 11:47:42

# CSS 
Welcome to the second series of Practical Front End Development walk through.
today we want to style out the web page for it to look more prettier
.
Open up `main.css` from your code editor and
.
remember our folder structure is still like this.
![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/i/r2bea01a8f1ii229roxx.png)
.
## Table Of Content
1. [Step 1](#step1)
2. [Step 2](#step2)
3. [Step 3](#step3)
4. [Step 4](#step4)

.
.

## Step 1: <a name='step1'></a>
inside `main.css` we want to set the margin of our form 
```css
main {
	margin: 20px;
	padding: 5px;
	display: block;
}
.section-con {
	display: flex;
	justify-content: center;
}
```
.
## Step 2: <a name='step2'></a>
still inside your `main.css`, for the upper table we only want the left,top, right border to appear, while for the lower border bottom we want the left, bottom, right border to appear. the header text should be centralized

```css
.table-con{
	margin-top: 8px; 
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	border: none;
	border-left: 2px solid #4caf50;
	border-right: 2px solid #4caf50;
	border-top: 2px solid #4caf50;
}

.table-con-result{
	margin-top: 8px; 
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	border: none;
	border-left: 2px solid #4caf50;
	border-right: 2px solid #4caf50;
	border-bottom: 2px solid #4caf50;
}

.table-con > thead, .table-con-result > thead {
	text-align: center;
	padding: 16px;
}
``` 
.
# Step 3: <a name='step3'></a>
still inside `main.css`, we style the input element, and the select element to all have the same width when viewed from the front end
```css
.code-input {
	width: 80px;
	padding: 5px;
	border: 1px solid #4caf50;
	margin: 5px;
}

.result-input {
	width: 120px;
	padding: 5px;
	border: 1px solid #4caf50;
	margin: 5px;
}

.select {
	width: 80px;
	padding: 5px;
	margin: 5px;
	border: 1px solid #4caf50;
}
```
.
# Step 4: <a name='step4'></a>
still inside `main.css` we style the button and the footer respectively 
```css
button {
	background-color: #4caf50; /* Green */
  	border: none;
  	color: white;
  	padding: 10px 30px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
  	margin-left: 10px;
  	margin-top: 5px;
}

.footer {
	color: #4caf50;
	text-align: center;
}
```
.
.
Now save your file `main.css`, then open up `index.html` in your browser to see the changes
.
In other to implement our functionalities we need to code some javascript function in `main.js`. follow in the next series to see how when the add button is been clicked and a new row is inserted into the page, you will learn how to access the DOM(Document Object Model) of and HTML file through javascript
.
Github repo
{% github https://github.com/mdjibril/spya-dev-crash-course %}
. Happy Coding
Java developer's,Look here you can find a Java Magic. just look on the given statement.
Tags: java, codenewbie, codepen, codequality
Published: 2020-08-15 11:37:17

can you guess the output of the given statement?
I'm not testing your knowledge so don't hesitate to comment,

       What is the output of 

       System.out.println(0123);
If you are able to give the correct answer, I'm very sure that you had faced this question before.
If not then surely you'll learn some really cool concept of Java 😄🤗.

click here

https://bit.ly/3fYSXmm
Have you expertise in java?just do comment on the output of the below statement.
Tags: java, codequality, codepen, codenewbie
Published: 2020-08-15 11:25:52

Are you a Java expert?
can you guess the output of the given statement?
I'm not testing your knowledge so don't hesitate to comment, 

     What is the output of 

     System.out.println(0123);

If you are able to give the correct answer, I'm very sure that you had faced this question before. 
If not then surely you'll learn some really cool concept of Java 😄🤗.
Who is using ETC in 2020?
Published: 2020-08-15 11:24:08

I'm curious about it, I don't see anything to do with Ethereum Classic coins but on the Ethereum (ETH) blockchain I see a lot of things going on, Dapps, libraries, oracles. 
It's even hard to keep up with it and having an ETH wallet becomes an essential when building the so-called Web 3.0

It doesn't seem to be the case with ETC, is there any holder in here? What is your usage of it?

Recently there were [this 51% attack on ETC](https://elevenews.com/2020/08/09/ethereum-classic-news-today-headlines-for-august-9/), any thought about it?
How to optimize time in your team? 💡
Tags: discuss, productivity
Published: 2020-08-15 11:19:18

Let's be honest, no big project can be completed without teamwork and without having a good team communication. Your individual success is pointless if you don't achieve team goals.

Having big teams can also lead to miscommunication or misunderstandings. 

## How to deal with it?
I am really curious to know what have you tried to implement, and what were the things that really helped you optimize teamwork & collaboration.

👇 **Comment below** 👇
My thoughts are in the comments below. Let me know your ideas.

Leave a 🧡 & 🦄. For more interesting content also check out my [Twitter](https://twitter.com/alexandrudanpop).
What is NP hardness?
Tags: explainlikeimfive, computerscience, datascience
Published: 2020-08-15 11:09:13

I saw [this](https://en.wikipedia.org/wiki/NP-hardness) when learning about [k-means clustering](https://en.wikipedia.org/wiki/K-means_clustering), but why NP-hard? What about [P](https://en.wikipedia.org/wiki/P_(complexity))?

Also,

> The P versus NP problem is a major unsolved problem in computer science.

Why?
Simple MEAN-Stack deployment by AWS CloudFormation & Docker 🐳
Tags: aws, devops, docker, angular
Published: 2020-08-15 11:06:03

Deploying AWS apps mainly over the AWS homepage takes much time, we can reduce this time a lot by using code-as-infrastructure principles by using the great AWS-CLI and AWS CloudFormation! 🚀

This guide is mainly for beginners which wants a quick & simple overview 🙂 All the code regarding our deployment you can also find here:
https://github.com/TGotwig/devops

We take usage of an very nice and simple MEAN-Stack project which comes from Brad Traversy 🤗

Download the sample repo and cd into it:

```bash
git clone git@github.com:TGotwig/devops.git
cd aws-cloudformation/solutions/simple/mean-stack
```

## ⚙️ Setup awscli

Install the `awscli` from somewhere and login:

```bash
aws configure --profile <YOUR_AWS_ACCOUNT_NAME>
```

You will be asked for two IDs, you can get them through:

![Click on your name at the top right corner and then on `My Security Credentials`](https://dev-to-uploads.s3.amazonaws.com/i/2m1ne5vu0ld2f3ugpgfs.png)

![Open the tab `Access keys (access key ID and secret access key)`](https://dev-to-uploads.s3.amazonaws.com/i/4gn2acj7xt2jwmn0lodf.png) 

![Let it create two keys for you for later use](https://dev-to-uploads.s3.amazonaws.com/i/x16gkhxd0gnlvzasi2p5.png)

## ⚙️ Setup ssh

Create a file called `parameters.json`:

```bash
[
  {
    "ParameterKey": "KeyName",
    "ParameterValue": "<KeyName>"
  }
]
```

Replace `<KeyName>` by your SSH key under `EC2 / Key Pairs`:

![Screenshot_2020-10-10 Key pairs EC2 Management Console(1)](https://dev-to-uploads.s3.amazonaws.com/i/q9bo1ahkuq87e3yagttg.png)

## ⚙️ Setup Makefile

Create a file called `.env` for the `Makefile`:

```bash
stack-name=simple-mean-stack
profile=<YOUR_AWS_ACCOUNT_NAME>
region=YOUR_AWS_REGION
```

## 🚀 Run it!

Start it by running `make up`, an EC2 machine should boot up:

![Created EC2 machine with public IPv4 address](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ej8ywt3mpc8z9apgten4.png)

From that, surf towards `http://3.70.190.17` to see it 👀

![Hosted app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0p7p3fbn8q0440r2qj3.png)

You can remove the entire stack by running `make rm`! 🔥 

I really hope you enjoyed this story and wish you happy coding! 🤗🖥
Nudity detector
Tags: actionshackathon
Published: 2020-08-15 10:54:51


### My Workflow

Works for node 8.x, 10.x, 12.x

uses: actions/checkout@v2
name: Use Node.js matrix.node-version
uses: actions/setup-node@v1 with: node-version:matrix.node-version
run: npm install
name: run loop run: for filename in images/*; do node app.js "$filename" ; done


### Submission Category: 

Activity Tracker

### Yaml File or Link to Code

https://github.com/anishagg17/node-action
JavaScript
Published: 2020-08-15 10:54:00

JavaScript helps you build amazing websites features and how it makes interactive websites such as Maps, 2D/3D animations, etc. it works with CSS and HTML in making complex websites, recently JS released ES6 version which has replaced ES5 in a better way Some of the built-in functions in ES6 helps in making the code short and simple to read, for instance, Arrow Function which is a comprehensive way to write function expressions that have a lot of details but are brief. 

You can write an arrow function like this,(=>). Below I will show a very simple example of an arrow function which will show the difference between ES5 and ES6 and you will see how it makes everything so easier. 
ES5 syntax: const add = function(x,y) { return x + y; }; 
ES6 arrow function: const add = (x,y) => { return x + y; }; 
Or even simpler: const add = (x,y) => x + y; 

This is just one example that I wanted to share but there is so much to learn about JavaScript and create really cool websites. APIs is an exciting functionality that is ready-made blocks of codes built to use in this client-side language allowing developers to implement programs that harder to implement. Browser APIs are already built in your web browser that can be useful to make complex things, for example, The DOM (Document Object Model) API allows you to handle HTML and CSS, creating, removing, and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on the page or some new content displayed, that's the DOM in action.

Finally, I want to talk about something which I have experienced myself and I am sure so many people go through it and that is, getting stuck on choosing a way of learning, I personally think every way of learning is helpful it all depends on the person. I prefer watching videos and then implementing what I have watched.
Config Error with Mongodb-Atlas and flask-MongoAlchemy 
Tags: flask, python, mongodb
Published: 2020-08-15 10:50:43

I did put password of that user in the field and i have tried all possible combination with dbname.I dont know which dbname it is referring to. I have searched many places, didnt get any answers. Can some one please help me how to configure.

app.config['DEBUG']=True
app.config['MONGOALCHEMY_CONNECTION_STRING']='mongodb+srv://user: 
<password>@test.usvae.mongodb.net/<dbname>?retryWrites=true&w=majority'
db=MongoAlchemy(app)
This is my configeration. This is the error i am getting

raise ImproperlyConfiguredError("You should provide a database name " flask_mongoalchemy.ImproperlyConfiguredError: You should provide a database name (the MONGOALCHEMY_DATABASE setting)

Thanks in advance
Node JS modules and connect Mongodb
Tags: node, mongodb, npm, vscode
Published: 2020-08-15 10:35:58

dependencies in package.json
"body-parser": "^1.19.0",
    "ejs": "^2.7.1",
    "express": "^4.17.1",
    "express-validator": "^6.2.0",
    "mongoose": "^5.7.3

## in cmd
* npm init
* npm i body-parser@1.19.0
* npm i ejs@2.7.1
* npm i express@4.17.1  ..

create filename.js  => (to connect and create database inserting documents in collection. you could see  in https://dev.to/saurabh37414118 , this => https://dev.to/saurabh37414118/crud-mongodb-500d)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jwutyqupku8mwrhuyqzq.png)

* node filename
Juggling git branches
Tags: git, beginners, todayilearned
Published: 2020-08-15 10:34:12

Anyone had this kind of experience? Juggling between git branches, where ignored (and included) files are different.

The answer is indeed [git-clean](https://git-scm.com/docs/git-clean); however, I have just learned that I can add `-e <FILENAME>`.

```sh
git clean -xdn -e .env
git clean -xdn -e .env [...[-e <ADDITIONAL_FILES>]]
# finally
git clean -xdf -e .env [...[-e <ADDITIONAL_FILES>]]
```

Additional files can include wildcards, and if start from the root directory, prefix with `/`.
Why I decided to start blogging and why we all should 🙌
Tags: writing, sharing, branding
Published: 2020-08-15 10:26:28

Just a short post talking about why I started blogging and why I think we all should as developers 😁

## What's the point ❓

There are a lot of reasons why someone would start writing blog posts. Personally, for me, I think a blog carries many benefits as a software developer that I'll talk about below. Moreover, I think **it's amazing to share our knowledge with other developers out there and also learn from them** 📚

## Benefits of writing blog posts ✏️

I would absolutely recommend all developers to start blogging. Some of the benefits I can think of are (if you have more, please feel free to comment):

- Allowing you to connect and potentially meet incredible developers. We have a **great community** here so let's all share knowledge with each other and interact 👋

- Blogging can help **boost confidence in both writing ability and your skills as a developer**. Trying to explain the knowledge and concepts you know is important as you become a more experienced developer, blogging can help with that

- **Social wise**, it acts as another place to **build a profile** and get your own name out there. You can form valuable connections through blogging and allow employers to see your engagement and passion being a developer. More ways to showcase your knowledge to employers never hurts! 👌

## Go for it! ✌️   

If anyone is reading this and is afraid of posting in case you think someone has already talked about it or you're scared of what people may think, please **take the leap and go for it!** 😊 

Even if it has already been talked about before, someone will be able to take something out of the stories and knowledge you share. 

As for me, I will do my best to share my knowledge with you all so we can all progress as developers! 💪
Make Flappy Bird Game With Bolt under 20 min!
Tags: unity2d, visualscripting, bolt, game
Published: 2020-08-15 10:10:51

In this video I'll go through the basics of Bolt visual scripting asset for Unity in this tutorial, by making a Flappy Bird like game, We will go through state and flow machine and variables
Enjoy :)

{% youtube 6z4KV-Ti07A %}

> Like this post? 
> Consider Support me via [Patreon](https://www.patreon.com/eranelbaz)
> Or Subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCVUNeBGM5wZJKcOx0QwAaTA?sub_confirmation=1)
> You can also follow me on [Twitter](https://twitter.com/elbaz_eran)
Juggling Balls Animation
Tags: codepen
Published: 2020-08-15 09:58:00

<h3>Hello guys.<br /> <b>My work got featured/picked by @CodePen.</b> This is a motivation-boost for me.</h3>
<p>A slider container, carrying 3 juggling balls. <b>HTML & CSS</b> only. Slider and body are composed of striped colors.</p>
<p>My first post here, by the way.</p>

{% codepen https://codepen.io/osaroDEV/pen/zYqqKwL %}
Visualizing a 3D plot in Matplotlib
Tags: datascience, datavisualization, matplotlib, 100daysofcode
Published: 2020-08-15 09:26:24

In real-world data science problems we always have datasets with multiple dimensions or features.

In such cases, we can perform univariate visualization or multivariate visualization, where we may plot 2 or 3 attributes together.

We will use the mplot3d toolkit provided by matplotlib.

Visualizing a 3D plot in Matplotlib - https://www.asquero.com/article/visualizing-a-3d-plot-in-matplotlib/
Joe Schmoe API
Tags: javascript, webdev, css, html
Published: 2020-08-15 08:58:51

#####Joe Schmoes are colorful characters illustrated by Jon&Jess that can be used as profile picture placeholders for live websites or design mockups.

_Let's explore there API and make something cool. So Fire up your PC and let's code. Check the API endpoint [Here](https://joeschmoe.io/api/v1/joe)_ 


###<u>How To</u>
**Step 1** - Open VsCode or any other text editor.
**Step 2** - Create a file <code>index.html</code>

**Include this external library in your html file** <code>https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css</code>

```html
<main>
  <div class="container border border-primary mt-5 px-2 py-2">
		<center>
		<h1>API DEMO, Enter Name To Get A Cool Profile Image</h1>
	
		<label for="name" class="bmd-label-floating">Input Your Name</label>
		<input type="text" class="form-control" id="name">
		<button class="btn btn-primary btn-raised">Submit</button>
		<br>
	<img src="https://placehold.it/120x120?text=profile" width="120" height="120" class="imgchange">
	</center>
</div>
</main>
```
**Step 3** - Now create a <code> style </code> tag and put this code in it.
```css
body {
font-family: "Avenir Next";
background-color: #daf7a6;
 }
```
**Include jQuery in your html file** <code>https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js </code>
**Step 4** - Now create <code>Script</code> tag and put this javaScript code. This is the main code which fetch image for you.

```js
 $(document).ready(function(){
  $('button').click(function(){
   const name = $('#name').val();
   alert(name);
   $('.imgchange').attr('src',`https://joeschmoe.io/api/v1/${name}`);
   const b = $('.imgchange');
   console.log(b);
  });
 });
```

**Step 5** - Now save your file and double click to open it in the browser. You will see something similar. 
**Check this working demo below**


{% codepen https://codepen.io/saxenaudit/pen/dyMoQqx %}

Now you can use this API anywhere you want.

_We will be covering many topics related to Web Development and Data Science so stay updated with us._