teleren/devto huggingface dataset:
Diary - 2018.09.29
Tags: productivity, learning, journey, javascript
Published: 2018-09-29 08:37:34

---
title: Diary - 2018.09.29
published: true
tags: productivity, learning, journey, javascript
---

# Read the Docs

I'm currently doing many small projects, today I'm working on a [TV series finder](https://github.com/miku86/react-tv-series-finder). The user can input something and the React App outputs some data from an API.

The app worked, but there was an infinite loop, because `componentDidMount()` fetched some data and updated the state, so it started again...

```js
componentDidUpdate = async () => {
  const series = await getAllSeries(this.props.searchWord);
  this.setState({ series });
};
```

I searched for some time, but couldn't find a good solution.

So I headed over to the [React Docs](https://reactjs.org/docs/react-component.html#componentdidupdate) and there it was:

`You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you’ll cause an infinite loop.`

So I changed my code to:

```js
componentDidUpdate = async (prevProps) => {
  if (this.props.searchWord !== prevProps.searchWord) {
    const series = await getAllSeries(this.props.searchWord);
    this.setState({ series });
  }
};
```

and learned something new: **read the docs**.
Computer science
Tags: help, computerscience, beginners, career
Published: 2018-09-29 08:19:29

---
title: Computer science
published: true
tags: help,computerscience, beginner, career
---
Hi, 
My name is Arsen, I'm 15 years old.
I want to start studying the computer science, but I don't know where to start. Can anyone recommend books/websites/courses in this area? 
Also, I want to start to learn c++. What resources would you recommend?
I want to invite you to the Caribbean Dev Conference
Tags: event, caribbean, conference
Published: 2018-09-29 02:44:46

---
title: I want to invite you to the Caribbean Dev Conference
published: true
description: A wonderful event for developers in the Caribbean
tags: event, Caribbean, conference
---

I'm going to the Caribbean Developer Conference and I want to see you there! The Caribbean Dev Conference is a brand new event in the Caribbean where hundreds of developers will gather to meet new people, learn new things and have a great time in one of the best places of the Caribbean. This is an event where everyone is welcome.

## Yes, but who's going??

The event will have speakers from several companies, countries and backgrounds:

![](https://thepracticaldev.s3.amazonaws.com/i/t8qwhemkqf6rwssene0q.png)
![](https://thepracticaldev.s3.amazonaws.com/i/iswpj2gdgyhgaxkbn3ev.png)
![](https://thepracticaldev.s3.amazonaws.com/i/dex3hts9mvcc1y00311w.png)
![](https://thepracticaldev.s3.amazonaws.com/i/n7qr8ycsugcqjn8kwej6.png)

The full list is available [on their site](https://caribbeandevconf.com/) so you can read more about everyone of them.

## Where and WHEN?!

The event will be held from October 24th to October 27th, on Hard Rock Cafe Hotel y Casino Punta Cana. It's a 5-star hotel and one of the most visited hotels in the Caribbean:

![](https://thepracticaldev.s3.amazonaws.com/i/3868w4qfalanrjbauk61.jpg)
![](https://thepracticaldev.s3.amazonaws.com/i/355aix2hql2phy3urt4a.jpg)


The event will not only have talks but also two workshops, where you can learn about Ethereum for Web Developers and Angular.

-------------

The event supports [diversity](https://caribbeandevconf.com/diversity-inclusion/) and has [financial aids](https://caribbeandevconf.com/financial-aid/) for people who don't have the means to attend. 

It's sponsored by Microsoft, Google, Github, EBM, Twilio Netflix, Google, Transferwise and more!

[You can learn more or buy tickets on their website.](https://caribbeandevconf.com/)
[You can also check it out on Eventbrite.](https://www.eventbrite.com/e/caribbean-developers-conference-tickets-43894403342)

Hope to see you there! I'll take my DEV T-Shirt with me :)

###### Disclaimer: I am not affiliated with the organizers of this event nor its sponsors. This is not a paid ad and no one asked me to write this
Streams in Java
Tags: java
Published: 2018-09-29 00:55:49

---
title: Streams in Java
published: true
description: 
tags: java
---

Hi everyone.

This year I worked on learning more Javascript, but I continue to work with Java for my desktop works.

This week I needed to develop a small functionality extending the ERP we work with, to export a text file for compliance with a government agency.

In order to do this, and trying to use a more "functional" approach, I explored the Stream object.

This is a new functionality in the language. A Stream is a collection, that allows data processing declaratively. For instance, I needed to do a sum over an array of items. In the old days of ArrayList, this was my code:

```java
BigDecimal total = BigDecimal.ZERO;
Iterator iterator = listOfValues.iterator();
while (iterator.hasNext()) {
    TotalSsn currentElement = iterator.next();
    if (currentElement.isChildrenOf(account)) {
	total.add(currentElement.getImporte());
    }
}

```

With a little help of the Stream object, the code looks like this:

```java
BigDecimal total = BigDecimal.ZERO;

Optional<BigDecimal> totalOptional = listOfValues.stream().filter(y -> y.isChildrenOf(account)).map(TotalSsn::getImporte).reduce((a, b) -> (a.add(b)));
if (totalOptional.isPresent()) {
	total = total.get();
}

```

In the second approach, I'm using:

# stream()

This method returns a stream. It's a method of the List interface, so getting a Stream to work with is pretty straightforward on legacy code.

# filter()

This method takes a functional interface as a parameter and returns a new Stream with the results of applying this function to the original stream's elements.

# map()

This method allows you to generate a new Stream whith another generic type. In this case I'm converting my TotalSsn to BigDecimal.

# reduce()

Allows the calculation, in this case, of a sum of the Stream values.

This whole API, I think, is worthy to be explored.

Saludos,
A good reason not to use OAuth only accounts in your apps
Tags: facebook, oauth, security
Published: 2018-09-28 21:53:59

---
title: A good reason not to use OAuth only accounts in your apps
published: true
description: Another reason why Facebook is a piece of shit company
tags: facebook, oauth, security
---

*Or at least, not to use Facebook auth.*

As you probably know Facebook just disclosed a [data breach of at least 50 million accounts](https://techcrunch.com/2018/09/28/everything-you-need-to-know-about-facebooks-data-breach-affecting-50m-users/) (likely many, many, more than that). 

Amid of all the info that's coming out something caught my attention:

{% twitter 1045784383536300033 %}

{% twitter 1045786217713786880 %}

Which reminded me of this post by @michael:

{% link https://dev.to/michael/when-signing-up-or-logging-into-an-app-do-you-prefer-oauth-authentication-wsocial-media-account-or-email-sign-upsign-in-23p6 %}

There are advantages on using OAuth delegation to login your users, unfortunately this means that if such account is breached all those apps linked to it are vulnerable.

Although I haven't seen Facebook only apps/websites in a while, if you don't really trust the login provider (who trusts Facebook nowadays?), please provide an alternative path for your users's authentication.

ps. Facebook took three days to disclose this to the public
What traits matter the most for Sr. Level Web Developers?
Tags: discuss
Published: 2018-09-28 21:36:02

---
title: What traits matter the most for Sr. Level Web Developers?
published: true
tags: discuss
---

Do you hire/manage Senior-Level Web Developers? What traits matter the most in who you choose to hire or promote?

I put together [a list of responses](https://blog.planetargon.com/entries/the-top-traits-tech-leaders-look-for-in-senior-web-developers) to this query on a post on my company's blog, but I thought after writing it that I would like to ask here on dev.to as well!

P.S. I'm happy to add any helpful answers to the post with a link back to your site (or careers page if you're hiring!) Just note in your answer if you'd like me to include it.
How you communicate matters
Tags: communication, history
Published: 2018-09-28 20:26:02

---
title: How you communicate matters
published: true
description: 
tags: #communication #history
---

I happened to run across an interesting bit of [AI history](https://en.wikipedia.org/wiki/Hubert_Dreyfus%27s_views_on_artificial_intelligence). I found it relevant with recent events, such as the Linux code of conduct discussions. Learning from history is faster than repeating it.

The linked article is worth a read, but the TLDR goes like this. In the 60s, computer scientists were betting on symbol processing as the path to strong AI -- human-like machine intelligence. An MIT philosophy professor named Hubert Dreyfus quickly realized that their aspirations were misguided. And so he set about torpedoing their ideas. History shows that he was correct for the most part, but nobody learned from his critiques simply because of the way he went about them. The industry independently arrived at the same conclusions through trial and error at a later time. Dreyfus might have advanced AI research significantly if he had expressed his criticisms differently. To quote the conclusion of the article...

> McCorduck wrote, "His derisiveness has been so provoking that he has estranged anyone he might have enlightened. And that's a pity." Daniel Crevier stated that "time has proven the accuracy and perceptiveness of some of Dreyfus's comments. Had he formulated them less aggressively, constructive actions they suggested might have been taken much earlier."

Simply being correct is not enough. **How** I communicate with people directly affects whether they hear what I am saying. If the goal really is to improve things, spending personal effort to keep it above the flames is essential.

_Note to self: work on this._

/∞
Scraping HTML with PHP Node and Puppeteer
Tags: softwaredevelopment, howto, php, scrape
Published: 2018-09-28 19:58:21

---
title: Scraping HTML with PHP Node and Puppeteer
published: true
tags: software-development,how-to,php,scrape
canonical_url: 
---

## Scraping in 2018

Interestingly enough I receive decent amount of hits on an earlier blog related to web scraping. Not much has changed except that phantomJS is not the most common tool for web scraping. With the Google Chrome team creating headless chrome Puppeteer and similar tools have come around to providing a better experience. I personally do not use PHP as much as I did in the past but a lot of people still use it.

Today I started with spinning up a Ubuntu Linux virtual machine in Azure running the below command to get everything headless chrome required for install.
```
sudo apt install -y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
```

Then installing php, composer and nodejs, which I recommend going to the nodejs website and using their steps
```
sudo apt install -y php composer php-mbstring
```
I found a nice wrapper for Chrome called PuPHPeteer. and ran composer require nesk/puphpeteer and then npminstall @nesk/puphpeteer.

Then I wrote my script using a website I made with VueJS that renders list elements from a json blob.

```
<?php
require("vendor/autoload.php");
use Nesk\Puphpeteer\Puppeteer;
use Nesk\Rialto\Data\JsFunction;
use Nesk\Puphpeteer\Resources\ElementHandle;
use Sunra\PhpSimple\HtmlDomParser;

$puppeteer = new Puppeteer;
$browser = $puppeteer->launch();

$page = $browser->newPage();
$page->goto('https://alanmbarr.github.io/HackMidWestTimeline/');

$data = $page->evaluate(JsFunction::createWithBody('return document.documentElement.outerHTML'));
$dom = HtmlDomParser::str_get_html( $data );
$browser->close();

foreach($dom->find('span') as $element) {
echo $element->plaintext."\n";
}

$dom->clear();
?>
```

Personally I would rather do most of this in NodeJS but if you're pretty used to PHP and not JavaScript this should be a pretty workable solution.
How to change the author of all your commits
Tags: git, tips, howto
Published: 2018-09-28 20:21:16

---
title: How to change the author of all your commits
published: true
description: 
tags: git, tips, howto
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2vc5up5zj7auijpyddzg.jpg
---

As a wise man once said:

> _"With great power comes great responsibility"_ - Benjamin Parker character from the Spider-man comics.

This should not be a stranger when dealing with Git, specially when rewriting your commit history.

Anytime you encounter a `--force` when looking for answers on how to do something with Git you should be _really_ careful and read all the details about it before pushing changes to `master` or any other branch that is being worked in collaboration with others.

But this time I had a specific need, I had been working on a side project that had around 10 commits already and while I was checking what I had done with the `git log` command, I soon realized that the author had the same username but different emails. I had a mix of commits coming from my work and personal emails.

I don't think this would cause any real problem since I was just making a prototype, but I also noticed that my profile's contributions graph was not displaying any information about those commits because of my email issue.

This led me to think about the most rational solution, saying:

> _"Oh crap!"._

Followed by a Google search about how can we do this, which led me to [this](https://stackoverflow.com/questions/8480365/changing-git-authorship-after-git-push) StackOverflow page that had a [comment](https://stackoverflow.com/a/40485261/4156794) by [Tarandeep Singh](https://stackoverflow.com/users/2754038/tarandeep-singh) that did just what I needed.

Which is:

```
git filter-branch -f --env-filter "GIT_AUTHOR_NAME='yourname'; GIT_AUTHOR_EMAIL='youremail@example.com'; GIT_COMMITTER_NAME='yourname'; GIT_COMMITTER_EMAIL='youremail@example.com';" HEAD;
```

<center>**Note: make sure to change the placeholders to what you need them to be.**</center>

And after a quick double check using `git log` then I would have to run:

```
git push --force origin master
```

This would make sure to rewrite all my remote's `master` branch commits to display my personal email and username.

**Bear in mind, you should be really careful when using `git push --force`, I did it because I know I'm the only one working on that project, but using this command in other situations might cause other problems.**

Hopefully this can help others when they find themselves in this sort of situation :)

## Alternative

Thanks to [Rob](https://dev.to/hoelzro) for sharing this alternative down in the comments!

{% devcomment 5obp %}
Quick CSS Quiz #1
Tags: challenge, css, quick, quiz
Published: 2018-09-28 18:45:38

---
title: Quick CSS Quiz #1
published: true
description: A quick CSS quiz, can be solved under 5 minutes.
tags: challenge, css, quick, quiz
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yuimjjz7e65sh4xjjt37.png
series: quick css quiz
---
CSS might be a total mystery to you or a topic that’s near and dear to your heart. Whether you think of CSS as a "necessary evil" or think of it as the power to control the world of technology, CSS is a must-have for anyone working on web applications. A deep knowledge of CSS can be the difference between a beautiful, polished web application and one that just feels like "meh".

In this series, I try to focus on CSS weird parts, throw quiz and its answer, hoping to give a better understanding of how CSS works in depth.


## Problem:
Having the following code snippet, for two adjacent siblings divs, `#div1` has a margin of 50px, `#div2` has a margin of 20px.
what is the distance between those two div?


```html
<div id="div1" style="margin: 50px;">A</div>
<div id="div2" style="margin: 20px;">B</div>
```

## Options:
* 20px
* 30px
* 50px
* 70px


## The answer:
you can find the answer below, but please give yourself a couple of minutes to think about it, to make sure you benefit from this quiz.


---
---
---
---
---
<center>👇👇👇</center>
---
---
---
---
---

The correct answer is: **`"50px"`** 🎉🎉
If you wonder why this is the correct answer, please read the discussions below.

Cover image original artwork by: [Sergi Delgado](https://sergidelgado.com/lab/pq8vpy36hf820g4mbx1v0uaagmkgil)
Websocket Counter Button
Tags: javascript, websocket, node, vue
Published: 2018-09-28 17:59:09

---
title: Websocket Counter Button
published: true
description: A Counter Button made using NodeJS, Websocket and VueJS.
tags: javascript, websocket, node, vuejs
---

So I have created a button that increment a number when clicked 🎉

Yup, that's about it 😂

Well it's kinda more complicated than this, what I actually made is a button that increment a number when clicked but that number is global so that anybody clicking the button will add to the same number.

It's just a side project that I built to try some technologies that I've wanted to try for sometime now like websocket and vuejs.

I also added some stats to the mix to make the whole thing a little more interesting.

You can start clicking using the following link:

[WS Button](https://button.mohsh.com)

I think there is room for improvement in my implementation so if you have the time please check it on my github and give me feedback on ways to improve it.

{% github linkinmedo/ws-counter %} 

Thank you and have a nice day 😁
A Twitter bot that manages your to-do list
Tags: showdev, bot, node
Published: 2018-09-28 17:52:47

---
title: A Twitter bot that manages your to-do list
published: true
description: It's open-source, of course
tags: showdev, bot, node
---

![_Tudubot announcement](https://thepracticaldev.s3.amazonaws.com/i/53z4bbkw7dcc2cn7wdql.PNG)

[_Tudubot](https://twitter.com/_tudubot) is a public to-do list that you manage by tweeting at it. How does it work?

{% tweet 1045713434984083456 %}

See it in action in the following thread:

{% tweet 1045713033446576128 %}

It was built with Node.js, PostgreSQL, and the Twitter API. It took two days to hack together. It runs on Heroku's free tier. And all the code is [here](https://github.com/isaaclyman/tudubot). Contributions are welcome, including from first-time contributors and junior devs.

Special thanks to [Omar Sinan](https://dev.to/omarhashimoto) and his article [How to build a simple Twitter bot in 17 lines of code](https://dev.to/omarhashimoto/how-to-build-a-simple-twitter-bot-in-17-lines-ofcode-2aan) for getting me started.

Any questions? Let me know in the comments. I'm happy to share what I've learned.
Explain DOM Like I'm Five    
Tags: explainlikeimfive
Published: 2018-09-28 14:36:31

---
title: Explain DOM Like I'm Five    
published: true
description: Explain the DOM to me like I'm five.
tags: #explainlikeimfive 
---

I know that DOM stands for "Document Object Model", and it has something to do with transferring code to a browser....but that's about it. 

I keep encountering it as I'm learning React, but I have yet to find a nice, concise description of what it is and what it does. Anyone have any good articles to link to for this? Or a short, snappy description that will help me understand its importance?

Thanks!
What's yours biggest IT (programming) fuckup?
Tags: programming, fuckups, discuss, errors
Published: 2018-09-28 13:41:23

---
title: What's yours biggest IT (programming) fuckup?
published: true
description: If you're an ideal programmer and you're not making any mistakes in your code, it's not a thread for you ;) But... if you've even forgot about semicolon once or did something more fateful in your IT-related work, feel free to share your story with us to also let us learn from each other's mistakes! DEV.TO FUCKUPS THREAD :)
tags: programming, fuckups, discuss, errors
---
Are you interested in reading about this?
Tags: discuss
Published: 2018-09-28 13:31:39

---
title: Are you interested in reading about this?
published: true
tags: discuss
---

![Facebook](https://thepracticaldev.s3.amazonaws.com/i/cvh8lvjqwkbzfrnzh22j.jpg)

Hey, folks!

I like startups and like analytics startup.
I would like to write you about it here.

About tech side, retention, revenue, MAU, DAU in startups.

I like analysing and to understand why one startup took off and the other fell and crashed.

What do you think about this ?
Dispose redux-observable interval when Hot Module reload
Tags: rxjs, reduxobservable, redux, javascript
Published: 2018-09-28 13:27:44

---
title: Dispose redux-observable interval when Hot Module reload
published: true
description: 
tags: rxjs, redux-observable, redux, javascript
---

In case of use `interval` in redux-observable's epic, this observer is not remove when reload with HMR working.

This observable is not effect store, but it is feel bad.

# Solution: Use Subject to fire with `module.hot.dispose` and stop

FYI:　If you use typescript, @types/webpack-env includes `module.hot` type.

```js
import { combineEpics } from "redux-observable"
import { interval, Subject } from "rxjs"
import { map, takeUntil } from "rxjs/operators"

const disposer = new Subject() // Setup subject for dispose.

export const timerEpic = () => {
  return interval(1000).pipe(
    takeUntil(disposer), // stop when dispose subscribed.
    map((time) => ({
      type: "TIMER",
      value: time
    }))
  )
}

if (module.hot) {
  module.hot.dispose((data) => {
    disposer.next() // send dispose when fire HMR dispose event
  })
}

```


### Split HMR part

You can split related HMR code like this.

```ts
// hotReload.ts
import { Subject } from "rxjs"
import { takeUntil } from "rxjs/operators"

const hmrDisposer = new Subject()

export const registerDisposeHandler = (module) => {
  if (module.hot) {
    module.hot.dispose(() => hmrDisposer.next())
  }
}

export const takeUntilHotReload = () => takeUntil(hmrDisposer)
```

Attention, you need call dispose hook on rootEpic file.

```ts
export const rootEpic = combineEpics(pingEpic)

// DO WRITE with ROOT EPIC.
registerDisposeHandler(module)
```
Java 11's Future
Tags: discuss, java, backend
Published: 2018-09-28 12:55:44

---
title: Java 11's Future
published: true
description: Discussion about developers feelings on the new licensing terms
tags: discuss,java,backend
---

Hey guys, I am sure you all would've heard of the new JDK 11. Oracle has released it under the LTS banner. It has new features and improvements.

If you have heard of JDK 11 I am pretty sure you guys would've heard about the new licensing terms. In a nutshell it says "Hey, you can use JDK 11 for free during your development and testing but when you are deploying it to production you are supposed to pay Oracle".

Considering that Java is one of the integral part of the Open-Source community what are your feelings about Oracle changing the licensing terms? 

Will OpenJDK which wasn't given much attention beat Oracle JDK to be the first choice of developers?
Explain Change Postmortem Like I'm Five
Tags: explainlikeimfive
Published: 2018-09-28 11:30:23

---
title: Explain Change Postmortem Like I'm Five
published: true
tags: explainlikeimfive
---

Hi,

Our new I.T. Contractors keep talking about a Change Postmortem and no one is explaining to us what this actually means, or what it benefits. Can someone explain simply what it is and why it's important to the change request process?

Edit: I've also heard this being called a "Change Moratorium"