teleren/devto huggingface dataset:
How to Dynamically Render Components in React
Tags: react, javascript, webdev, tutorial
Published: 2020-05-02 13:07:22

Sometimes we need to dynamically render React components. For example let's say we are building a drag and drop website builder.

Customer A wants their website to consist of `Navbar2`, `Content1`, and `Footer3`.

```js
<div>
  <Navbar2 />
  <Content1 />
  <Footer3 />
</div>
```

Customer B on the other hand wants a slightly different website.

```js
<div>
  <Navbar1 />
  <Content3 />
  <Footer1 />
</div>
```

If we have a lot of components, we are going to end up creating a component for every single possible combination...or we can use dynamic rendering.

First, we need a mapping of our components.

```js
// i.e. const Navbar1 = () => <div>Navbar1</div>

const componentMapping = {
  Navbar1,
  Navbar2,
  Navbar3,
  Content1,
  Content2,
  Content3,
  Footer1,
  Footer2,
  Footer3
};
```

Then we can render the website for Customer A

```js
const customerA = ['Navbar2', 'Content1', 'Footer3'];
```

and for Customer B 


```js
const customerB = ['Navbar1', 'Content3', 'Footer1'];
```

with the same dynamic component.

```js
// <Website config={customerA} />
// <Website config={customerB} />

const Website = (props) => {
  return (
    <div>
      {config.map((componentName) => {
        const Component = componentMapping[componentName];
        return <Component />;
      })}
    </div>
  );
};
```
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine
Tags: node, javascript, webdev
Published: 2020-05-02 12:49:01

"Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It uses an event-driven non-blocking model that makes it lightweight and efficient."

Do you think, the above statement is a bit uneasy?
Do you find, the above statement to be a bit difficult to understand?

Well!! Let's take a look at something simple.

The above statement simply means - 

Node.js is actually a platform that allows us to run JavaScript on a Server.
It also saves us from learning various different programming languages, such as for frontend and backend, eg. when building applications with PHP, etc. But with JavaScript, we can use the same language on both client and server side.

Some other things about node.js are -

- It uses JavaScript, so no need to learn various programming languages for client and server side programming.
- Very fast (runs on the V8 engine & uses non-blocking code)
- Huge ecosystem of open source packages (npm), which we can easily install in our projects and use them.
- Great for real-time services (like chats), because we can utilize web sockets.
Did my Computer Science degree help me?
Tags: computerscience, career, beginners
Published: 2020-05-02 12:33:44

First, let me tell you a bit about myself. I am an undergraduate in Computer Science and currently, it's my 6th semester. These days I am doing the #100DaysOfCode challenge and learning CSS and JavaScript(there's a semester break going on due to the Corona Virus). Why am I writing this post if my degree isn't even complete yet? Well, I would like to share some thoughts with you.

I saw some posts debating whether you really need a CS degree to build a career. My answer? Well yes, but actually no.
![Alt text of image](https://i.kym-cdn.com/entries/icons/facebook/000/028/596/dsmGaKWMeHXe9QuJtq_ys30PNfTGnMsRuHuo_MUzGCg.jpg)

Let's have a look at both aspects, shall we?

###Benefits of Computer Science Degree:
* They teach you the very basics i.e. the bits and bytes of the computer. Knowing this tremendously improves your understanding of how the computer works.
* There's a great focus on Data Structures and Algorithms(They're very important).
* The course material is great.
* The assignments and quizzes make you feel accountable and force you to do hard work.
* There's a whole batch of students with you and it improves your teamwork skills.
* There's always a professor or a mentor that can answer all of your questions and help you out when you're stuck.

###Not so great aspects of Computer Science Degree:
These are very few but the thing is: they matter!
* You learn a lot of stuff that you wouldn't even need at your job.
* You have to study some courses that are totally irrelevant.
* It takes FOUR YEARS!

The reason I'm telling you all of this is that I want to make a point: __Learning on your own is also beneficial given that you stay disciplined and committed.__

I have spent the last 80 days learning HTML, CSS, and JavaScript on my own from online courses and I am more confident in coding than ever before. Because previously I spent so much time delving into the theory(I didn't have a choice, did I?). In university, you do learn how to code and build stuff, but you have to spend so much time learning other things as well and you can't focus on a single subject. And of course, you don't get to decide your own pace.

Let me summarize these benefits for you:

###Benefits of learning on your own:
* You learn at your own pace.
* You only have to focus on a single path, it may be Data Science, Web Development, Game Development, etc.
* It can still take you more than a year to get there but still there's no minimum limit of 4 years.
* You can start working as soon as you're confident and keep learning alongside it.

In the end, it's just your own choice and it depends on the kind of person you are. Neither way is easier. It requires hours of hard work and consistency.
So did my Computer Science degree help me? Yes, it did!
Use componentWillUnmount with React Hooks
Tags: react, codewithghazi, reacthooks
Published: 2020-05-02 12:30:56

Hello everyone, today we will see how can we use componentWillUnmount with react hooks. So as you all know that with React Hooks we don't have lifecycle methods that are present in React Class Component, on the other hand, we have pre-built hooks provided by React some of them are useState, useEffect, useRef, useContext etc. Today we will now look into how can we use useEffect to work as componentWillUnmount.

### Why use componentWillMount?

First we will discuss why we need componentWillUnmount lifecycle method in react app development. As per official documentation of ReactJS "componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount()." Read Official Documentation for Lifecycle Methods

So basically we do all the cleanup tasks inside and canceling of all the subscriptions when a component is mounted or updated. Let's take an example you have added an event listener in your component for any task and that should be removed before the component is destroyed. In this case we can add event remove handler in componentWillUnmount lifecycle method and get our work done.

### How to use componentWillUnmount with react hooks?

For this task, we will useEffect hook provided by React JS and call our subscription for event or API inside useEffect and do the cleanup of that particular task inside useEffect hook itself. 

Let's take an example of we are using an event for handling click outside for our popover element and we have to add an event on component initialization and also have to remove it before the component is destroyed. Below we can see how we have added our event at the time of component initialization.

[Read full Article Here](https://codewithghazi.com/componentwillunmount-with-react-hooks/)
Learn Python: Getting user input
Tags: python, input, tutorial, beginners
Published: 2020-05-02 12:26:51

---
title: Learn Python: Getting user input
published: true
description: Introduction to getting user input in Python
tags: python, input, tutorial, beginners
series: [Learn Python]
cover_image: https://images.pexels.com/photos/4050296/pexels-photo-4050296.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940
---

# `input()`
`input()` prompts the user for an input then passes the captured value(s) to a variable as a `string`.

```python

question = "Hello, what is your name?"
print(question)

username = input("Enter your name: ")

welcome_message = f"Hello {username}, Welcome!"
print(welcome_message);
```
![](https://i.imgur.com/1JBIGBd.png)


## Formatting input
By default, the input is of type string.
If we attempt an arithmetic calculation on this input (string multiplied by an integer), we'll end up having an 'interesting' result 😂
```python
age = input("Enter your age: ")
message = f"You have lived for {age * 12} months."
print(message)
```
![](https://i.imgur.com/NfRWwBU.png)


To avoid this we'll need to convert the string into an integer.

```python
age = input("Enter your age: ")
age_number = int(age)
message = f"You have lived for {age_number * 12} months."
print(message)
```
![](https://i.imgur.com/SYH1wBs.png)


Simplifying... but not good practice.
```python
age = int(input("Enter your age: "))
message = f"You have lived for approximately {age * 365} days."
print(message)
```
![](https://i.imgur.com/MWhEScl.png)

It is good practice to keep the calculations separate from the message template.
It makes the code easier to understand, debug & maintain.

```python
age = int(input("Enter your age: "))

# constants
DAYS_IN_YEAR = 365
HOURS_IN_A_DAY = 24
MINUTES_IN_AN_HOUR = 60
SECONDS_IN_A_MINUTE = 60

#calculation
age_in_seconds = age * DAYS_IN_YEAR * HOURS_IN_A_DAY * MINUTES_IN_AN_HOUR *  SECONDS_IN_A_MINUTE

message = f"You have lived for approximately {age_in_seconds} seconds."
print(message)
```
![](https://i.imgur.com/pIvxNwK.png)

<hr>
{% replit @rishiabee/learnpygettinguserinput %}
reading-time-estimator
Tags: typescript, estimator
Published: 2020-05-02 12:04:16

## What I built
A small library that parses a text and estimates how long it would take to read it with i18n support. Written in TypeScript, you get typing for free!

### Usage
```ts
import { readingTime } from 'reading-time-estimator';

const text = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`


// default options
const result = readingTime(text, 10);

output:
{
  "minutes": 10,
  "words": 97,
  "text": "10 min read"
}


// with french locale
const result = readingTime(text, 10, 'fr');

output:
{
  "minutes": 10,
  "words": 97,
  "text": "10 min de lecture"
}
```


## Demo Link
 Here's a demo [link](https://lbenie.github.io/reading-time-estimator/try/)

## Link to Code
Here's the repository [link](https://github.com/lbenie/reading-time-estimator)
Finally built a portfolio/personal website. Can I get a review?
Tags: portfoliio, webdev, javascript, career
Published: 2020-05-02 12:03:29

Hello everyone! I decided to put some time away this week and build a solid personal website and blog for myself and here's the final result: https://kartikn.me. It's built using Next.js and hosted on Vercel, [the code for it is also open-source](https://github.com/kartiknair/kartikn.me).

I just needed some advice because currently I'm a university student (in my first year) and I was considering getting a job over the summer break or working freelance. Would this be a good idea? Am I ready?
Daily Developer Jokes - Saturday, May 2, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-05-02 12:00:11

---
title: "Daily Developer Jokes - Saturday, May 2, 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%20May%202%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/5e1259ce87a7e.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:
___Q:___ What did the Network Administrator say when they caught a nasty virus?

___A:___ It hurts when IP
 -->
Video: How to use Twitter Streaming API in Node.js
Tags: node, webdev, twitter, javascript
Published: 2020-05-02 10:18:52

---
title: Video: How to use Twitter Streaming API in Node.js
published: true
description: Video: How to use Twitter Streaming API in Node.js
tags: node.js, WebDev, twitter, javascript
---

In this video, We are going to learn how we can use Twitter Streaming API with node.js. 

It is very easy. First, you need to create API Credentials from the twitter developer portal and then install express and twit npm package and use in the code. You can see the complete explanation of code written and How I have created it in the below video.

{% youtube axobUeRpO3c%}

Source Code for this video is available on - https://github.com/JalpeshVadgama/NodeTwitterStreamApi




If you like this video and wanted to see a similar kind of video then, please subscribe to my youtube channel at - http://bit.ly/codewithjv.

Also, Do let me know what more content you wanted to see in for node.js.
Learn Python: Formatting strings
Tags: python, formatting, tutorial, beginners
Published: 2020-05-02 11:39:41

---
title: Learn Python: Formatting strings 
published: true
description: Introduction to string formatting in Python
tags: python, formatting, tutorial, beginners
series: [Learn Python]
cover_image: https://images.pexels.com/photos/4050296/pexels-photo-4050296.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940
---

# f-strings
Available in Python version 3.6 and above.
To avoid string concatenations, we can use `f-string` to 'inject' values within a string via variables.

Pre-pending an `f` before a string will cause the variable between `{}` to be evaluated.

```python
# f-strings
year = 2020
print(f"The year is {year}")
print(f'The year is {year}')

question = f"Which year comes after {year}?"
print(question)
```
![](https://i.imgur.com/SuJuZNd.png)

### Updating the variable after 'f-string' has been evaluated.
Since the `f-string` has been evaluated with the variable `year` set to `2020`. Re-assigning it to a new value `9999` afterwards will not update the `f-string` automatically.

```python
# f-strings
# Updating variable value after assignment.
year = 2020
message = f"The year is {year}."
print(message)

year = 9999
print(message)
```
![](https://i.imgur.com/MAN3JKO.png)



## Using `string.format()`
Another way of formatting a string is by using `string.format()`.
Passing the variable `name` to `format(name)`, will inject its value into the `{}` of the variable `template`.
 
```python
name = 'Rishi'
template = 'How are you {}?'
fomatted_greeting = template.format(name)
print(fomatted_greeting)

name = 'Abee'
fomatted_greeting = template.format(name)
print(fomatted_greeting)
```
![](https://i.imgur.com/85nUvcn.png)


### Using named variables
Using named variables makes the template more readable.

```python
name1 = 'Rishi'
name2 = 'Abee'
template = 'How are you {x} {y}?'
fomatted_greeting = template.format(x=name1, y=name2)
print(fomatted_greeting)
```
![](https://i.imgur.com/0baAz9E.png)

## `f-strings` v/s `string.format()`
`f-strings` is very common in Python.
But if you have a template and you want to re-use it, `string.format()` comes in very handy.

<hr>
{% replit @rishiabee/learnpyformattingstrings %}
Design Challenge | You only have 10 mins to make a Website Design
Tags: ui, design, frontend, challenge
Published: 2020-05-02 11:00:03

This was a very cool design challenge posted by [Dev Ed](https://twitter.com/developedbyed).

The goal is to create an entire website design in 10 minutes or less. It really pushes you to the limits of what is possible. There is no time to really consider UX, and you have to develop a true MVP in less than no time. 

I was able to complete it and here is the [Figma Design.](https://www.figma.com/file/aWUbpbHyYSPJ9hVtB2Apgs/Coffee-to-Go?node-id=0%3A1)

If you want to see the whole process, you can check out my video here, using Figma and how I created this layout in 10 minutes or less! What I learnt includes:
* 10 mins means bare essentials
* Don't overthink colors, spacing, etc, it exists = good enough
* It's easy to under-estimate how much works is involved in making designs
* Accept that not all things have to be perfect
* Spending 10 minutes to design something is better than spending 1 hour thinking about it and not doing it.

{% youtube R48wGVKj2a0 %}
<center>[Youtube: Website Design in 10 mins](https://youtu.be/R48wGVKj2a0)</center>

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)
* [💬 Discord](https://discord.gg/nGdThpE)
* [❤ Patreon](https://www.patreon.com/adriantwarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Using Python 3 with Poetry
Tags: python, poetry
Published: 2020-05-02 10:36:41

This was originally posted on my [Hashnode blog](https://www.codegabru.com/using-python-3-with-poetry-ck9phmvuu02i4hjs1vz5vyg2a).

Install Poetry:

```
curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python3
```

The only problem is that for some reason Poetry doesn’t use Python version 3 by default for any project that you create using it and it doesn't run virtual environment shell using Python 3 even if the min required version of python is set to `3.x` for the project.  See [issue](https://github.com/python-poetry/poetry/issues/721) for more details.

A quick, safe *and* dirty (because you will have to do this every time you update Poetry version) way to fix this is given below.

Open  `~/.poetry/bin/poetry`  in editor of your choice. I’ll use nano :

```
nano ~/.poetry/bin/poetry
```

Top line of the file will be:

```
#!/usr/bin/env python
```

Update it to:

```
#!/usr/bin/env python3
```

Now Poetry should work as expected i.e run virtual environment shell using Python 3 etc. 

> Note: I think this will probably break things when you set min required version of Python to `2.x` for your project. I have not tested this for Python 2. Python 2 has been deprecated anyway. Let me know in the comments if there is a better way to do it.
What does Full Stack mean to you?
Tags: discuss, career, webdev
Published: 2020-05-02 10:25:10

I've seen many different flavours of what companies think a Full Stack role includes, here are a few I've seen:
* Frontend, Backend
* Frontend, Backend, DBA
* Frontend, Backend, UX, Mobile
* Frontend, Backend, DBA, DevOps
* Frontend, Backend, DBA, DevOps, QA, Business Analyst
* and the list goes on...

What do you think a Full Stack Developers responsibilities are? Does it need some uniformity or is it ok to have different flavors?
Let's share some python snippets?!
Tags: python
Published: 2020-05-02 10:23:56

---
title: Let's share some python snippets?!
published: True
description: Learning python by reading code
tags: python
---

# I share one piece of code and you comment something on it and share another snippet.

I have stumbled upon some code challenges out there and one of them is to draw this picture:

``` txt

    *
    * *
    * * *
    * * * *
    * * * * *
    * * * *
    * * *
    * *
    *
```

## My solution

``` python
x = 1
operation = lambda x:x+1

while x >= 1:
    print( x *  "*  ")
    x = operation(x)
    if x >= 5:
        operation = lambda x:x-1
``` 

## A more pyctonic way of doing the same. 

``` python
for i in (list(range(1,6)) + list(reversed(range(1,5)))):
    print(i * "* ")
```
By the way, it was only possible thanks to [@Elscio's](https://dev.to/elcio) interaction, and this my friends, is the beauty of a great community.

And of course, if you want to generate the picture with different sizes we can introduce a limit, as Elcio has done:

``` python
limit = 8
for i in (list(range(1,limit+1)) + list(reversed(range(1,limit)))):
    print(i * "* ")
```

## Another form

``` markdown
     *
    * *
   * * *
  * * * *
 * * * * *
```

Solution:

``` python
for i in reversed(range(5)):
    print(f'{i*" "}{(-i+5)*" *"}')
```

## And what about this:

```python
def rightriangle(x):
    x+=1
    for i in range(1,x):
        print((x-(i+1))*' ' + i * '*')
```