teleren/devto huggingface dataset:
Kill Blocked Ports
Tags: gatsby, react, commandline
Published: 2019-07-22 21:25:40

---
title: Kill Blocked Ports
published: true
description: 
tags: gatsbyjs, reactjs, commandline
---
So you are working hard on your new [Gatsby](https://www.gatsbyjs.org/) site and fire up the development server.

**FAIL!**. You are presented with the console error message:

```
Something is already running at port 8000
Would you like to run the app at another port instead? [Y/n]
```

The cause is that a process did not fully close, or you terminated a terminal window without exiting the command.

## What To Do

_FYI. The fix below is geared toward MacOS or Ubuntu/Linux. It might work on Windows._

The workaround is simple.

- Exit the startup.
- Enter the following at the command prompt:

`kill -9 $(lsof -t -i:8000)`

Cool all fixed. But, do you want to search out this command every time this happens?

**NO**, of course not.

**Solution**: Create a command alias in your favorite terminal. In [ZSH](https://ohmyz.sh/) open your `zshrc` file and add the following alias:
`alias k8="kill -9 $(lsof -t -i:8000)"`

Now, the next time this happens, escape out of the develop script and enter `k8`. All done.

## All fixed, sort of.

The alias command only responds to one situation, and one port number. What about the Gatsby serve command (port 9000), or Create-React-App (port 3000)? You will have to create an alias for each situation. There has to be a more productive way.

The answer is to create a shell script.
Create the below script:

```
#!/bin/bash

#styles
VP_RED='\033[01;31m'

# Update default core install
echo -e "${VP_RED}KILLING the SPECIFIED PORT"
kill $(lsof -t -i:$1)
```

A couple of note:

- The styles line `VP_RED='\033[01;31m'` only makes the command red in the terminal window.
- The `echo` line initiates the style.
- The most import part is the last line, which is the command that kills the port.
- The name of the file will be the command you type. In my case, `kport`.
- Make this file executable: `chmod +x kport`
- Place in the user's path.

In my case, I have added to `/bin` and named the file `kport`.
So, when you execute the file, remember to include a port number which you want to kill, as an argument (i.e.):
`kport 8000`

DONE! I hope this helps. Have a great day.
Why We Should Embrace the Development of Deep Fakes
Tags: deepfake
Published: 2019-07-22 21:23:59

---
title: Why We Should Embrace the Development of Deep Fakes
published: True
description: 
tags: DeepFake
---

We should embrace the development of deep fakes because not doing so will be much worse. In the near future, deep fakes will be able to replicate someone near-perfectly enough that the average person will not be able to tell the difference between the real person and the deep faked person. While convincing CGI humans have been created by large animation studios for high budget films, deep fakes open up that power for users with a small budget and thus opening it up for abuse. 
Potential abuse can come in all kinds of different forms, from propaganda and fake news to altering or creating footage of a crime and also creating or editing porn with someone who didn’t consent to. 
	To combat this we need to let developers continue making deep fakes because if we push them underground, we won’t know enough about them to fight them.

In the next few blog posts these next few weeks I’ll be exploring different aspects of deep fakes and their applications, good or bad, so stay tuned.
UPDATE: Microsoft Flow: Posting to LinkedIn
Tags: development, flow, linkedin, powerautomate
Published: 2022-06-15 17:24:57

---
title: UPDATE: Microsoft Flow: Posting to LinkedIn
published: true
date: 2019-07-22 21:12:00 UTC
tags: Development,flow,LinkedIn,PowerAutomate
canonical_url: https://barretblake.dev/2019/07/update-microsoft-flow-posting-to-linkedin/?utm_source=rss&utm_medium=rss&utm_campaign=update-microsoft-flow-posting-to-linkedin
---

In a previous post, I showed how to post to LinkedIn about a blog post. The connector available at that time used V1 of the LinkedIn API. That version no longer works. Thankfully, Flow already has added support for the LinkedIn V2 API, and it's a simple swap of steps to replace V2 for V1.

The post [UPDATE: Microsoft Flow: Posting to LinkedIn](https://barretblake.dev/2019/07/update-microsoft-flow-posting-to-linkedin/) first appeared on [Barret Codes](https://barretblake.dev).
Are you your worst enemy?
Tags: webdev, mentalhealth, work, stress
Published: 2019-07-22 20:30:28

---
title: Are you your worst enemy? 
published: true
description: I am often my worst enemy, stressing myself out for imaginary reason based off of assumptions from work.
tags: webdev, mentalhealth, work, stress
---

Are you your own worst enemy? I know I can be more than often.

I spent the whole weekend working to keep up to date on my work load. Mind you, we have two kids. This last month has been crazy because we just finally adopted my daughter, then we took placement of our current son who's 3. We foster. 

Here we are trying to balance a new family schedule to make things work, and I'm stuck working to try and keep up with the insane amount of work that we agreed on this iteration. 

So I worked all weekend on it every minute that I could break away from the family. I don't like ditching my family.

I come in today and during standup they ask how I'm doing. Well I tell them about how I spent all weekend working to make sure we can try and keep up with our workload. 

Not a single blink of an eye. No thanks, no great job. Nothing. 

So why did I even bother to work all weekend?

Because I am my own worst enemy. Stressing myself out over a work load and fear of getting in trouble if I don't get it done. Well I work on a team of two. 

My coworker is out Monday and Tuesday this week so I feel like it's all on me to finish. But why? I did my fair share and we are still behind. I verbalized my fears of us taking on to much work at the beginning of the iteration. 

Yet I took it upon myself to feel all the responsibility for it. No one asked me too. My coworker never yelled at me. Never told me he felt like he was doing all the work.

He's our team lead so it's in position to take the fallback if we don't meet our work. Perhaps I felt like i wanted to protect him? Us?

Either way, I lost out on time with my family just to get no thanks. No more. I keep saying it. 

NO MORE WORKING OUTSIDE OF WORK HOURS! Yet, I'm sure next week I'll be doing the same thing. I'm my own worst enemy. 

how many of you do the same? or use to? how did you over come it?
component #7 - Tabs
Tags: react
Published: 2019-07-22 20:10:46

---
title: component #7 - Tabs
published: true
description: This is a part of *30 components / month* challenge.
tags: #react
---
{% codesandbox 0tqxo %}

## What I have learned?

- How to make a simple tabs using React :D

## What are the main challenges?

  Making it complex later... 🤔🤔

## Why am I doing this anyway?

- To learn.
- To have fun.
- To future Joimee (for reference).

Resources:
[IMDB](https://www.imdb.com/)



Salamat.
Parallax scroll, Folding receipt, Feature form | Module Monday 48
Tags: showdev, webdev, javascript
Published: 2019-07-22 19:52:50

---
title: Parallax scroll, Folding receipt, Feature form | Module Monday 48
published: true
description: Module Monday 48
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1563645925/parallax_idiymw.gif
canonical_url: https://guide.anymod.com/module-monday/48.html
---

## Everything below is open source 
It's free to use on any website, web app, or anywhere else. There are hundreds more like these built & shared by developers on [AnyMod](https://anymod.com).

Click a mod to see it along with its source code.

## Parallax
A classic that you can quickly drop in anywhere.
<a class="btn btn-sm" href="https://anymod.com/mod/parallax-call-to-action-section-nkonao?preview=true&lorem=true">View mod</a>
<a href="https://anymod.com/mod/parallax-call-to-action-section-nkonao?preview=true&lorem=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1563645925/parallax_idiymw.gif"/>
</a>

## Folding receipt
Expands to display the items on your list. Automatically sums the total, too.
<a class="btn btn-sm" href="https://anymod.com/mod/folding-receipt-dkdblr?preview=true">View mod</a>
<a href="https://anymod.com/mod/folding-receipt-dkdblr?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1563644895/receipt_rctepc.gif"/>
</a>

## Caminar card
A full-width content section from the Caminar theme, by Templated.
<a class="btn btn-sm" href="https://anymod.com/mod/caminar-large-card-orddmk?preview=true">View mod</a>
<a href="https://anymod.com/mod/caminar-large-card-orddmk?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1563645924/large-card_xlz5oq.png"/>
</a>

## Feature form
Contact form with all your business info too. Let them reach you.
<a class="btn btn-sm" href="https://anymod.com/mod/elegant-contact-form-with-contact-details-llknoo?preview=true">View mod</a>
<a href="https://anymod.com/mod/elegant-contact-form-with-contact-details-llknoo?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1563645922/form_st8uep.gif"/>
</a>

## Simple footer
Add and reuse on any page. Saves you the hassle of messing with footers.
<a class="btn btn-sm" href="https://anymod.com/mod/footer-ordmnn?preview=true">View mod</a>
<a href="https://anymod.com/mod/footer-ordmnn?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1563645922/footer_ba2tld.png"/>
</a>

<hr>

I post new mods from the community [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
component #6 - Scroll Table
Tags: react
Published: 2019-07-22 19:24:49

---
title: component #6 - Scroll Table
published: true
description: This is a part of *30 components / month* challenge.
tags: #react
---
{% codesandbox xlk29 %}

## What I have learned?

- Improve the UX for table using [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller).

## What are the main challenges?

  Can't set the height directly to the table element so I try to search in stackoverflow for answers and I've found that you can use a wrapper for the table and add the `max-height` to that wrapper not the table itself.

## Why am I doing this anyway?

- To learn.
- To have fun.
- To future Joimee (for reference).

Resources:
[Set Max-Height in HTML Table](https://stackoverflow.com/questions/20293492/max-height-in-html-table)
[react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller)



Salamat.
What does the 'EOL' stand for in 'SyntaxError: EOL while scanning string literal'
Tags: beginners
Published: 2019-07-22 19:09:24

I'm playing a game where I break my code and study the errors. I got this idea from "Learn Python the Hard Way." I know why I got the error: I deleted the quotation at the end of a string. What I don't know is what EOL stands for. I assume it stands for something? A cursory googling just brought up obscure examples of people being surprised to get this error.
And while we're at it, what does 'literal' mean in this context?
Thanks,
Erik

If you're curious, here's the broken code:
~~~~
do_not = "don't
~~~~
Learning to code is easier now. Should older developers be afraid?
Tags: career, beginners, discuss
Published: 2019-07-22 18:57:28

---
title: Learning to code is easier now. Should older developers be afraid?
published: true
description: I am a 31 years old designer, transitioning to frontend developer. Am I late to the game? Are you?
tags: career, beginners, discuss
---

**Context**
I was born in 1988, and got my first PC at 10 years old.
Even though I grasped some programming concepts at 14, I later decided I was not good at maths, and therefore should choose a more design-oriented career (ended up building my career around multimedia and then graphic design). However while I got hired to design stuff, I really wanted to code said stuff - bring it to life! - and have been focusing on frontend development for the last 3 years.

**Question**
Do you think I am at a disadvantage against any person born after the year 2000, considering their energy, earlier access to the internet/information, and "digital-nativeness", who wants to be on my line of work too?

**Slightly related bonus question**
Is there an age you think a developer would seem less hirable?
Csv to chart with Pandas
Tags: python, pandas
Published: 2019-07-22 18:44:16

---
title: Csv to chart with Pandas
published: true
description: python, pandas
tags: python, pandas
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--g6Pm4t_c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ajv784n75th5vaxqqpv1.png
---
Any computer uses data all the time. Sometimes thats in databases, sometimes on the web, sometimes from sensory input and sometimes office data like excel or csv.  

So you probably know you can easily <a href="https://pythonprogramminglanguage.com/read-csv/">parse a csv file</a> with Pandas. But did you know you can quite easily create plots directly from the csv data?


### Data set

A csv data set is simply data. It could come from an office suite like GSheets or Open Office. You can save a file a csv, comma separated value. As the name defines, every value is separated by a comma. 

Any data set will work, but the example below uses <a href="https://raw.githubusercontent.com/DeathReaper0965/Movie_ratings_prediction/master/IMDB-Movie-Data.csv">this csv dataset</a>. 

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2F3o7rc0qU6m5hneMsuc%2Fgiphy.gif&f=1">

This data set is about movies. 
For every movie it saves these values:

* Rank 	
* Title 	
* Genre 	
* Description 	
* Director 	
* Actors 	
* Year 	
* Runtime (Minutes) 	
* Rating 	
* Votes 	
* Revenue (Millions) 	
* Metascore 

So that's a lot of information. It's a small data set of 1000 records.

### Pandas 

We first load the pandas module, matplotlib for plotting and numpy for number crunching. Then uses matplotlib to plot the data.  Load the csv data and create the figure.

    #!/usr/bin/python3
    import pandas as pd
    import matplotlib.pyplot as plt
    import numpy as np
    
    movie = pd.read_csv("IMDB-Movie-Data.csv")
    
    movie["Rating"].mean()
    movie["Rating"].plot(kind="hist", figsize=(20, 8))
    
    plt.figure(figsize=(20, 8), dpi=80)
    plt.hist(movie["Rating"], 20)
    plt.xticks(np.linspace(movie["Rating"].min(), movie["Rating"].max(), 21))
    plt.grid(linestyle="--", alpha=0.5)
    plt.show()

<img src="https://thepracticaldev.s3.amazonaws.com/i/ajv784n75th5vaxqqpv1.png">

So that shows you the movie rating data. Mind you, there are a lot of records in the csv file and pandas does is instantly.

Related links:
* <a href="https://pandas.pydata.org/">Pandas module</a>
* <a href="https://pythonprogramminglanguage.com/">Learn Python</a>
* <a href="https://pandas.pydata.org/pandas-docs/stable/">Pandas documentation</a>
Serverless Framework in 2019
Tags: serverless, aws, javascript, node
Published: 2019-07-22 18:34:04

The [Serverless Framework](https://www.serverless.com) enables everyone to build applications with radically low overhead and cost.

**And by low cost, I mean as cheaply as 0.0000002¢ each time your code runs.**

The Framework does this by building applications on new cloud infrastructure, like AWS Lambda, that auto-scales and only charges you when it runs. Meaning, your application will not cost you a penny when it's not being used.

The Serverless Framework has become the leading tool for building serverless applications.  This year, we're expanding it to be more than just a tool for development.

The Framework now includes monitoring, testing and security features to help you operate your serverless applications, for free!

**Here's a quick video overview:  https://www.youtube.com/watch?v=-Nf0ui3qP2E**
Load Website table into Python 
Tags: python, web, pandas
Published: 2019-07-22 18:14:04

---
title: Load Website table into Python 
published: true
description: python, web
tags: python, web, pandas
cover_image: https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fcesshereandthere.com%2Fwp-content%2Fuploads%2F2014%2F10%2FRed-2BPanda-2B2.jpg&f=1
---
On the web you can find countless of tables. Those tables (and any webpage) is defined in HTML. So you need to parse HTML right?

Not exactly, there's a module called Pandas which parses the data for you. That data is then stored in a data structure named data frame.

Say you grab the table from https://www.fdic.gov/bank/individual/failed/banklist.html

    #!/usr/bin/python3
    import pandas as pd
    import numpy as np

    url ='https://www.fdic.gov/bank/individual/failed/banklist.html'
    res2=pd.read_html(url)
    print(res2)
    print("+"*50)
    print(res2[0]["Bank Name"])

So the line

    res2=pd.read_html(url)

gets the whole table and puts it in a pandas data frame. That easy! 

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.8gmEsSh01otUQ9u9Ek4izAHaFi%26pid%3DApi&f=1">

This line shows the whole table

    print(res2)

for a specific column

    print(res2[0]["Bank Name"])

So you can easily grab data from a webpage, without having to parse html language yourself.


* <a href="https://pandas.pydata.org/">Pandas Data Analysis module</A>
* <a href="https://pythonprogramminglanguage.com/">Learn Python programming</a>
* <a href="https://pythonprogramminglanguage.com/read-csv/">Read CSV data (instead of HTML)</a>
* <a href="https://pandas.pydata.org/pandas-docs/stable/">Official pandas documentation</a>
X test-users Y times
Tags: showdev, discuss, webdev, devops
Published: 2019-07-22 18:09:06

Hi!

Imagine you have 5 users test your website (or a specific feature for your website) and you can repeat that e.g. 3 times. This would be a relatively simple service that helps you to iterate your development before you fully publish your project. Get feedback & adapt in a loop. Check it out at:


https://launchpropeller.com/#/?ref=dev
Discord Bot Tutorial - Make a Bot in under 10 minutes
Tags: javascript, tutorial, beginners, webdev
Published: 2019-07-22 18:07:28

##Making a Discord Bot isn't hard!

In fact, it's a pretty fun way to improve your coding skills.

In this video I'll show you how make your own bot in less than 10 minutes. In future tutorials I'll be making stuff like

* basic commands with prefixes
* advanced commands with arguments
* word filter bots
* auto moderator bots
* sound effect bots
* basic leveling system using a database

## If you have any ideas or requests for bots I'd be happy to make a video covering those too if you leave a comment on the video!

{% youtube Klhu7mqsmwU %}
react-devto: React Hooks for Dev.to
Tags: showdev, react, reactnative
Published: 2019-07-22 17:54:56

Hello dear dev.to community!

A few days ago I pushed my React hooks library for dev.to which can be used to fetch articles and user information.

You can find it over [here](https://github.com/bdbch/react-devto).

[Demo](https://bdbch.github.io/react-devto/)

### Installation

```sh
npm i @d2k/react-devto --save
```

### Usage:

```js
import {
  useArticles,
  useFollowSuggestions,
  useTags,
  useUser
} from "@d2k/react-devto";

const MyComponent = () => {
  // useArticles(page, tag, username)
  const { articles, loading, error } = useArticles();

  // useFollowSuggestions()
  const { suggestions, loading, error } = useFollowSuggestions();

  // useTags(page)
  const { tags, loading, error } = useTags();

  // useUser(username, id)
  const { user, loading, error } = useUser("bdbch");
};
```
What React team is working on? (part one): SuspenseList component
Tags: react, suspenselist, reactcore
Published: 2019-07-22 17:01:30

About one month ago, I saw some interesting commits on the master branch of the React repository.
_Sebastian Markbage_, chief-developer of React team, was working on something called `SuspenseList`: a component that is supposed to direct and orchestrate several other `Suspense` components.

[\<SuspenseList\> Demo](https://eddie-cooro.github.io/suspense-list-together-demo/)

Through the first commits, the basic functionalities of the `SuspenseList` component are completed, which gives us an API like this:
![](https://thepracticaldev.s3.amazonaws.com/i/r4rfvggp0hxgflu26xon.png)

Let’s suppose we have two components in this example: The **FirstSuspendingComponent** and the **SecondSuspendingComponent**.
These components will throw a promise in their first render and will be suspended then.

So after the first render pass, we will see both “`loading first`” and “`loading second`” spans on the screen.
Now the **FirstSuspendingComponent** resolves its promise and tries to display its content, but it cannot. That is because the **SecondSuspendingComponent** is still suspended and the "revealOrder" property of their first `SuspenseList` parent component is equaled to "`together`."
Therefore, the **FirstSuspendingComponent** still shows its fallback (the "`loading first`" span) and waits for the **SecondSuspendingComponent** to finish its work. After that, they both will be displayed at the same time.

https://github.com/facebook/react/pull/15902
Let's talk about the Epic Games Store features [project update]
Tags: discuss, beginners, project, ideas
Published: 2019-07-22 17:00:11

---
title: Let's talk about the Epic Games Store features [project update]
published: true
description: Talking about the features lacking from the Epic Games Store and choosing the ones I would like to include in my project
tags: discuss,beginners,project,ideas
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0xvuuaey8vxplh4t28ol.jpg
series: Remaking The Epic Games Store as a graduation project
---

Hey guys! 👋

As always, I have a video, but this one is a bit longer and totally unprepared and spontaneous. In it, I'm going deep into the store features, choosing the ones I would like to include in my project (on the spot), and explaining in detail why and how I'm choosing them.

{% youtube qS3aQNFmFVI %}

But if you're not into that, here's a TLDR (TLDW?):

I divided the features by priority / importance into these yummy categories:

### The Cake ###
* **Search** - through Game titles, Devs / Publishers, Usernames, etc. (instead of just game titles)
* **Filters / Tags** (Combinable) - Should be able to choose (or search) tags, as well as click, to list the games that have that tag
* **Shopping Cart** - with multiple items
* **Wishlist**
* **Login / sign-up** - with 2-3 required fields max

### The Frosting ###
* **Autocomplete for Search** - as you type

### The Cherry ###
* **Dev / Publisher** info / contact
* **Sorting** - by name, price, year?
* **Ratings**

### The Sprinkles ###
* **Comments / Reviews** ?
* Showing **games owned** and/or ratings or reviews on users' profiles


I don't wanna overextend myself and bit off more than I can chew, so I think this is plenty! 

Considering the fact I'm basically going to be learning full stack (MERN most likely) for this, I think I have my hands more than full.


Until next time! 





P.S. I'm still not sure how to name this project? I'm thinking maybe something like "The Legendary Games Store"? Send me suggestions :)