teleren/devto huggingface dataset:
Remote learning apps to help you acquire new skills while you’re stuck at home
Tags: learning, covid19, workfromhome
Published: 2020-06-28 12:40:37

- Udemy (https://www.udemy.com/)
- SimpliLearn (https://www.simplilearn.com/)
- edX (https://www.edx.org/)

- The one with the familiar faces: Masterclass (https://www.masterclass.com/)

- Speaking in public: TED Masterclass (https://masterclass.ted.com/)

- Coding: Encode (https://upskew.com/)

- Coding: SoloLearn (https://www.sololearn.com/)

- Content creation: Skillshare (https://www.skillshare.com/)

- Math and science: Brilliant (https://brilliant.org/)

- Languages: Duolingo (https://www.duolingo.com/)

- College replacement: Coursera (https://www.coursera.org/)

- For your kids: Khan Academy (https://www.khanacademy.org/)
16 Things Everybody Should Stop Doing In Order To Be Successful
Tags: successful
Published: 2020-06-28 12:31:35

1. Stop caring what other people think
2. Stop doing so much
3. Stop meddling in other people’s affairs
4. Stop seeking pleasure, seek purpose
5. Stop filling your mind with garbage
6. Stop deciding outcomes
7. Stop being hurt
8. Stop stalling
9. Stop babying your ego
10. Stop trying to do it all alone
11. Stop worrying about the future
12. Stop comparing yourself to others
13. Stop putting off what’s most important
14. Stop being anywhere but here
15. Stop losing control
16. Stop acting surprised
Daily Developer Jokes - Sunday, Jun 28, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-06-28 12:00:25

---
title: "Daily Developer Jokes - Sunday, Jun 28, 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=Sunday%2C%20Jun%2028%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"
 -->
hsl() and hsla() in css
Tags: css, webdev
Published: 2020-06-28 11:43:55

<i>hsl</i> stands for hue, saturation and lightness. An extra <i>a</i> in <i>hsla</i> function represents an alpha channel that defines the opacity of the color.

In CSS, these functions can be used anywhere, where color value is required. For example, backgroud-color, color etc.

<b>Color Wheel:</b>
Color wheel is a simpler way to look at the CSS colors. It works in clockwise direction. Starting it's journey from color red.
I will be using the example of color wheel from this [site](https://www.canva.com/colors/color-wheel/)

![hsl dimnensions on color wheel](https://dev-to-uploads.s3.amazonaws.com/i/5zkceofkmps0jdxfjmx8.png)
Sorry for using comic sans :P, I still don't know why people hate it so much.

<b>Components: </b>

1. hue: hue ranges from 0 to 360<sup>o</sup>. O represents red; 120 represent green and; 240 represents blue.
2. Saturation: It is represented in percentage and it represents the intensity of the hue. In simpler words, how much grey or dullness you want in the color. 0 saturation means all grey color. 100% means pure color. In the color wheel, if you will draw a line for the given hue(let's say 120), then saturation will be equivalent to moving onto a line drawn for the degree 120. 
<sub>I will highly recommend trying out the color wheel</sub>
![Hue and Saturation for Green color](https://dev-to-uploads.s3.amazonaws.com/i/b7nj0ehzz4s00jroisx3.png)
3. Lightness: Lightness decides how much percentage of black or white is required. 0% means no white, 25% means 25% white and 75% black; 100% means 100% white. This is useful in creating the shades of a color, that can be used for example, in shadowing. So moving the outer circle dot will create the shades of chosen color.
<p>In <i>hsla()</i>, we have another parameter for opacity;
4. Opacity: Opacity varies from 0 to 1. 0 being transparent and 1 is completely opaque. So an <i>x</i> value of opacity will define the degree of visibility on a given background.

<b>Some Examples:
`#p1 {background-color: hsl(120, 100%, 50%);}   /* green */`
`#p2 {background-color: hsl(120, 100%, 75%);}   /* light green */`
`#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */`
`#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
`

Thanks for reading!
World of WoqlCraft - Ep.13 Continue building movies data graph
Tags: python, database, graph, tutorial
Published: 2020-06-28 11:35:27

---
title: World of WoqlCraft - Ep.13 Continue building movies data graph
published: true
description: Using the new Python client for the most powerful TerminusDB 2.0, we continue building a knowledge graph with the IMDB movies data by loading the data from the csv.
tags: python, database, graph, tutorial
---
Using the new Python client for the most powerful TerminusDB 2.0, we continue building a knowledge graph with the IMDB movies data by loading the data from the csv.

Find the source code from our [tutorial repo](https://github.com/terminusdb/terminus-tutorials).

Join the TerminusDB community at [Discord](https://discord.gg/Gvdqw97)
How to implement user mentions in React chat app without react-mentions and drafts-js library?

Tags: react, help, javascript
Published: 2020-06-28 11:32:04

I've implemented a user tag functionality while pressing @ and it's working fine.But i couldn't able to highlight the tagged user because i'm using input field..While using libraries like react-mentions and draft-js , I couldnt integrate them into the codebase because of some weird issues..Any idea of implementing the highlighting part in this code would be really helpful..Thanks..https://codesandbox.io/s/charming-pike-bzhzn?file=/src/AutoCompletedText.js
15 React JS Project Ideas: Beginner to Expert [With Free tutorial]
Tags: react, tutorial, codenewbie, beginners
Published: 2020-06-28 10:59:21

React js is an amazing library to learn for frontend. I really love this library. I am a full-stack MERN developer and I really enjoy coding with react js. Learning React is not that hard. Documentation is really cool too. You just need to have a little determination to learn it. I've listed a total of 15 projects and one bonus project that will make you an expert in react js. Still, it will be not enough to call a senior developer, because a senior developer is not just only technical knowledge. But if you build this all projects by yourself, I'm pretty sure you'll skill will be really good! Now the check the projects - 

# Starter

## Todo List
{% youtube nUl5QLkVdvU %}

City Tours
{% youtube HfJjzmSaLuQ %}

Quizz App
{% youtube aq-fCtg_gG4 %}

Recipe App
{% youtube U9T6YkEDkMo %}

# Intermediate Project ideas

## Beach Resort
{% youtube ScDWrogElmo %}

## Live Chat
{% youtube hiiaHyhhwBU %}

## Movie Search
{% youtube bqSSLr8A8PU %}

## Corona Tracker
{% youtube khJlrj3Y6Ls %}

# Advanced Project ideas

## Portfolio
{% youtube iOmHEbMexqI %}

## Dashboard
{% youtube tNsveb6RRGA %}

## Youtube UI Clone
{% youtube VPVzx1ZOVuw %}

## Twitter Clone
{% youtube f1R_bykXHGE %}

# Expert project ideas

## Ecommerce
{% youtube Fy9SdZLBTOo %}

## Travel Blog 
{% youtube 5pQsl9u_10M %}

## Pet Hotel
{% youtube MMOvx38dXz4 %}

## Airbnb Clone
{% youtube kuswGIH-Xj8 %}

I know it’s a huge list but thanks for reading this whole thing! Share this with your friends to help them!

Here Instagram version of the post –

{% instagram CB-cfJIA72m %}

I’ve started a programming community on discord. Click to join [Discord Channel](https://discord.gg/uDj2JtH)

I've two free PDF for you
- [Learn JavaScript in 30 Days](https://blog.nerdjfpb.com/javascript-in-30-days-free-pdf/)
- [Node JS In 30 Days](https://blog.nerdjfpb.com/node-js-in-30-days-free-pdf/)


Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/project-ideas-for-react-js-beginners-to-expert/).

You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) or [instagram](https://www.instagram.com/nerd_jfpb/)  !
Road to Genius: advanced #32
Tags: javascript, beginners, computerscience
Published: 2020-06-28 10:06:19

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function test(xval) {
  var n = xval.length, i = 0;
  while (++i < n)
    if (xval[i - 1] >= xval[i])
      return false;
  return true;
}
let A = test([2,6,6,9])

// A = ? (boolean)
```

This seems like an easy challenge, I hope we can finish it quickly. It starts with a call to an unknown function `test` that takes an array as sole argument. We have no clue what this function does so we'll have to analyze it:

```JS
var n = xval.length, i = 0;
while (++i < n)
```
These first two lines basically just iterate over each element in the array, but it's slightly different because it skips the first element.

The final 3 lines are:
```JS
while(...)
   if (xval[i - 1] >= xval[i])
      return false;
return true;
```
The if-condition checks if the previous value is greater than or equal to the current value. If so, it immediately returns false. If this if-condition never passes, the function returns true.

Basically this function checks if each value in the array is strictly greater than the previous one. The input used in this challenge is `[2,6,6,9]`, it has a duplicate 6 so the array does not have strictly greater ascending values.

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/5saiysa17chu9r9jz77p.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Join me on the Road to Genius and upgrade your programming skills, at https://nevolin.be/codr/
Tkinter  - Disable Resizing- 
Published: 2020-06-28 10:01:33

While typically users are given the option to resize GUI windows at will, there may be times where you wish to disable the resizing feature for a Tkinter window. For instance, your GUI window may not support resizing. If you weren’t careful with how you packed/placed the objects into the window, resizing will ruin your set up.

Luckily, there is an easy one line fix to this issue.

 

```
import tkinter as tk

root = tk.Tk()
root.geometry("200x150")
 
label = tk.Label(root, text = "Hello World")
label.pack(padx = 5, pady = 5)
 
root.resizable(False, False) 
root.mainloop()
```

Since the user has the option to resize the Tkinter window for both the X ad Y axis, we too have the option to disable resizing individually for the X and Y axis. Passing two False arguments into the resizable function will disable both.

Remember to call the resizable function before the mainloop() function but after the tk.Tk() function.



See more Tkinter related tit bits below.
List of [Tkinter Widgets](https://coderslegacy.com/python/list-of-tkinter-widgets/)
How to [improve Tkinter screen resolution](https://coderslegacy.com/python/problem-solving/improve-tkinter-resolution/)?
How to [change font type and size in Tkinter](https://coderslegacy.com/python/problem-solving/change-font-in-tkinter/)?
Npm Package Library with Demo app
Tags: angular, typescript
Published: 2020-06-28 09:55:51

In our previous article we showed how to create a library project. Now it's time to create an application and use our own NPM Published Library.

**Create an application**

We are going to create an Angular application within our library project named "demo". Its goal is to demonstrate the use of our new library "parts".  

```
// from the projects folder
ng generate application demo

```

*Demo Application Folder Structure**

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

This is what the internal folder structure looks like (a normal Angular application) within our multi-project scheme.

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

```
// we had not signed out of npm yet.
// but package names are required to be unique
// this means we are pulling from the free public side

cd demo
npm i projecty@0.0.1

```
Results in this:

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

**Demo App Module**

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

**Demo App Component HTML**

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

**Serve the Demo App**

```
// from the demo folder, we ran an init
// a lot of new installs happened

npm init 
ng serve

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

**Summary**
If we are building a component library that becomes an NPM Package, we want the demo application as well. In the demo we show how to use our library!

Other tests are important too, however, we didn't include that in this article.

We've also learned the the NG Module system is for Angular only.  It follows the JavaScript module pattern but has nothing to do with it.  The NG modules tell Angular how to load components, directive, pipes and inject-able items. The Angular runtime loader, jitter, compiler and render-er all work together to make this happen.

The number of json configuration files necessary for this is huge. It's easy to be confused. Over time the fog lifts to some degree but confusion is still bound to crop up. 

Peer dependencies cause the messages after NPM Installs 'Peer dependencies detected,user is responsible for installing them'. 

NPM Init after loading the NPM Install appeared to find all requirements of the library. We were surprised to see the number of packages installed.  


JWP 2020 Angular Library Folder Structure
Power of Box-shadow in CSS
Tags: css, webdev
Published: 2020-06-28 08:06:57

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

If you want to add any shadow effect around any html element you can use box-shadow. In this Blog we will just see, How it works for different values.

Let's create a card using basic properties.
```
.card {
    background: white;
    padding: 80px 40px;
    margin: 0 30px;
    font-family: sans-serif;
    color: rgba(0,0,0,0.2);
    font-size: 24px;
    position: relative;
    width: 300px;
}
```

Let's understand the basic layout of box-shadow.

```box-shadow: x y blur color;```

.shadow1 {
    box-shadow: 10px 10px red;
}

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

now let's just add blur property to box-shadow.

.shadow2 {
    box-shadow: 10px 10px 10px red;
}

Now you can see the shadow become little blur. you can modify the blur pixel and you would understand different shades of it.

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

Let's try to give box-shadow to card so, it looks little nice.

```.shadow1 {
    box-shadow: -30px 30px 30px rgba(0, 0, 0, 0.3);
}```

Below, you can see card has little popped up.

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


All these box-shadows are outside of the element, you can give box-shadow inside as well.

```
.shadow1 {
    background:  #00bdb4;
    border-radius: 15px;
    box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2),
                15px 15px 15px rgba(0,0,0,0.1),
                inset -50px -50px 50px rgba(255, 255, 255, 0.2),
                inset 50px 50px 50px rgba(0,0,0,0.1);
}
```

In Result, You can see below result.

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

Checkout different shaded of box-shadow here
https://codepen.io/__akash__19/pen/vYLJMqM
Using password from a dictionary is bad. But what if I combine words from different dictionaries from different languages?
Tags: security, password, codenewbie
Published: 2020-06-28 09:35:47

Let's say using "password" as your password is bad. What if I combine it with different words from different languages?

What do u mean by it?

For example:
In English "password" means "password"
In French "password" means "mot de passe"
In Danish "password" means "adgangskode"

My password would then be:
password1MotDePasse2adgangskode

So, these words are all words from a dictionary but from different languages. Does it make it more secure?
Learn Basics of Markdown
Tags: markdown, developers, students, productivity
Published: 2020-06-28 09:34:46

##**What's Markdown and Why so popular ?**

**Markdown** is one of the most popular mark-up language. It's lightweight markup language that you can use to add formatting elements to plain text documents. Markdown is popular because you can use it for everything like- to create Websites, documents, e-mail messages, presentation, books, technical documents. 

##**Where to use ?** 

We can use **Markdown** everywhere it's fast and easy to take notes, create contents for website, from email messages to grocery list we can format using Markdown.

##Let's learn Markdown

These are some elements all Markdown application support these elements.

**Basic Markdown Syntax** 

**Heading**: We use # for headings
for H1 we use - #
for H2 we use - ## 
and for H3 we use -  ###

![Heading](https://miro.medium.com/max/1400/1*GmdBSicFuhO4eGnLVR4IFA.png)


**To format in bold we use -** ** **

**To format text in Italic we use -**   *  *


![](https://miro.medium.com/max/1400/1*5Lx9_j-lrN3m2EDOhUZq9Q.png)

**Line Break** : We use **br** for line break

![](https://miro.medium.com/max/1400/1*XAW4kGGDmXioX0kO_kWrow.gif)


**For Ordered List we use**: For ordered lists we use the numbering 1., 1., 1.. Wait — no consecutive numbers? No! Markdown takes care of the correct numbering automatically which is very useful if you want to add an additional element within your list at some later point. See the example below.

![](https://miro.medium.com/max/1400/1*4upZn9DocBbZoWPU9jvxDw.gif)


**For Unordered List we use -**: With Markdown it is very easy to create bulleted (unordered) and numbered (ordered) lists. For bulleted lists we use *, + or - for each bullet point.

![](https://miro.medium.com/max/1400/1*lLpbwQCjMTxy_HTAsNfiYg.gif)


**For check-boxes we use**: If you want to check a box just add x in the square brackets.

![](https://miro.medium.com/max/1400/1*F-8baEJXZu4XFYdxYg1zyA.gif) 



**For Quotes**: By using > Text a quote will be inserted. Blockquotes can be nested (i.e., a blockquote-in-a-blockquote) by adding additional levels of >:

![](https://miro.medium.com/max/1400/1*THtRi1c3ozmwMbftODPiqw.png)


**For Link we use** : In [] we write title and in () we write the link url 

Reference-style: Instead of providing the link in parenthesis you give a reference name in square brackets and the link later on in the text or in a reference 

To add a clickable email address in your text just put angle brackets around the email address: <>.


**For Image we use** : !_[]_()

Example of an inline-style image:

![](https://miro.medium.com/max/1400/1*SYUZgSdCPaO3GEj-pBDdMg.png)
A simple way to debug PHP applications.
Tags: php, debugging, consolelogger
Published: 2020-06-28 09:08:45

---
title: A simple way to debug PHP applications.
published: true
description: 
tags: PHP, debugging, consolelogger
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4n8glcvnk4jkrxmbn01e.png
---
## The Problem:

Debugging can be irritating sometimes and when it comes to debugging server-side code, it's can be daunting. Printing the variable values, stopping the execution, and then continue, sometimes it takes hours. In Client-side languages like Javascript, it's pretty simple, you just do a `console.log` and wait for the complete page to render without stopping.

## Solution:

That was my inspiration behind creating [console-logger](https://github.com/akshaykhale1992/console-logger).
A simple PHP library that can be installed using composer and get you started with logging details in your browser console.

## How to use it?

1. Install the package using composer

```
composer require akshaykhale1992/console-logger
``` 

2. Start using it...

Simple Example:

```
<?php
include './vendor/autoload.php';
use consoleLogger\Logger;
(new Logger())->emergency("This is from Server Side");
```

Available Functions:

| Logger Function                   | Equivalent Console Log |
| :-------------------------------: | :---------------------:|
|  `(new Logger())->emergency`      | `console.error`        |
|  `(new Logger())->alert`          | `console.warn`         |
|  `(new Logger())->critical`       | `console.error`        |
|  `(new Logger())->error`          | `console.error`        |
|  `(new Logger())->warning`        | `console.warn`         |
|  `(new Logger())->notice`         | `console.log`          |
|  `(new Logger())->info`           | `console.info`         |
|  `(new Logger())->debug`          | `console.debug`        |
|  `(new Logger())->group`          | `console.group`        |
|  `(new Logger())->groupEnd`       | `console.groupEnd`     |

The `consoleLogger\Logger` class follows [PHP PSR-3: Logger Interface](https://www.php-fig.org/psr/psr-3/) standards and implements all the functions for your specific needs.

I hope it will be useful for you and it's an open-source project so please feel free to tag along by creating issues or by adding new features.

Best.
React Hooks Video | Create Youtube Player -1
Tags: react, youtube, webdev, showdev
Published: 2020-06-28 08:53:33

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel.

We had earlier converted the YouTube player to use Redux. I am changing the project to use React Hooks instead of the class based components.

And here is my Second YouTube video.

{% youtube OEccBVD_duY %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.

You can also read the complete blog here -

https://thewebdev.tech/youtube-hooks-2
How to read CSV file in Python?
Tags: python
Published: 2020-06-28 08:47:13

#It's a simple way to read CSV file in Python.

##1. Read csv

 filename: example.csv

```python
import csv
with open('example.csv', newline='') as csvfile:
  rows = csv.reader(csvfile)
  for row in rows:
    print(row)
```


##2. Read csv in Dictionary

If there are data of following format:
Date ,Open, Close
2020/01/01, 100, 200
2020/01/02, 120, 200
You can fetch specific column by csv.DictReader.
```python
import csv
with open('example.csv', newline='') as csvfile:
  rows = csv.DictReader(csvfile)
  for row in rows:
    print(row['Date'], row['Close'])
```
Android apps API version managing problem.
Tags: android, api, versioning, help
Published: 2020-06-28 08:36:27

I have a android apps version 1.0.1. Now api and feature changed, current version would be 2.0.1. So I have to force the user to upgrade the apps. But at first I have to submit the apps to playstore and update the api to server for new features.

My question:
1. Playstore needs time to review my apps, at that time, How I will mange my existing users(version 1.0.1), Because my api and database changed.
2. How I will test version 2.0.1 at live before app update approval ?

I am waiting for your response. Thanks in advance.