teleren/devto huggingface dataset:
Underrated Articles on Dev.to last Week
Tags: top7, webdev, meta, bestofdev
Published: 2019-05-10 01:01:31

---
title: Underrated Articles on Dev.to last Week
published: true
description: 
tags: icymi, webdev, meta, bestofdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7l5i09l2smncaclvc3go.png
series: Underrated Articles
---

Hey folks! I'm back with another installment of underrated posts of last week! Let's check them out and see what the community has been up to.
 
## 1. Learning Finances Principles from Books

In this article, Max writes financial principles from books which he read. Explained principles are: Pay yourself first, Invest in yourself and focus on cost, not on price.
{% link https://dev.to/steelwolf180/personal-finances-principles-i-learnt-from-books-2g6o %}

## 2. Check Availability of Username

In this article, Gaurav writes about his cool project in which we can check whether our favorite username is available or not. 
{% link https://dev.to/grv19/a-service-that-allows-you-to-check-the-availability-of-your-favorite-username-across-140-webapps-2gam %}

## 3. Importance of Creating Solid Schedule

If you want to be productive, you must embrace the power of scheduling your tasks.
In this article, Thomas shares why he decided to create and follow a schedule.
{% link https://dev.to/thomcord/how-creating-a-solid-schedule-of-study-helped-me-to-learn-more-and-effectively-2k46 %}

## 4. Design skills 

Paramanantham writes that UI and UX design skills are important skills to build better products and help product teams with efficient feedbacks early on the UI and UX designs.
{% link https://dev.to/paramharrison/how-design-skills-help-developer-to-contribute-better-to-the-products-5bc9 %}

## 5. Breaks are Important

Without taking small breaks from work, employee productivity, and overall work performance begin to suffer. In this article, Ashlee suggests that taking short breaks is important to do your job effectively.
{% link https://dev.to/ashleemboyer/don-t-forget-to-take-breaks-3o6c %}

## 6. Team Communication During the Project

Team communication is necessary during the project. communication allows team members to understand their roles and the roles of everyone else on the team. In this article by Django Stars, benefits of communication are well explained. 
{% link https://dev.to/djangostars/team-communication-during-the-project-why-it-s-so-important-2ala %}
---
*That's all for now. These were my personal favorite underrated posts from last week. I hope you liked this post. Tell me in the comments about your favorite posts of last week that you think went underrated!* ❤️
Why not a DEV TV?
Tags: community, programming, code
Published: 2019-05-10 03:19:19

---
title: Why not a DEV TV?
published: true
description: 
tags: community,programming,code
---
#DEV TV

###A strong community must have a TV channel. How-to-do shows, live tutorials, new technologies, app talks, Miss Python, The JS Horror Weekend, Java zombies, a marketplace like Facebook and so on... We don't need YouTube nor Vimeo. We're all here. Let's do it, please. Comment:
Let People Have Emotions
Tags: emotions, breaks, life, stress
Published: 2019-05-10 02:55:52

---
title: Let People Have Emotions
published: true
description: I think it's time to stop making people hide in bathrooms in fear of looking unstable for healthy and normal behaviors.
tags: emotions, breaks, life, stress
cover_image: https://thepracticaldev.s3.amazonaws.com/i/benyqxlu508z9rv7np79.jpg
---

Work (hopefully) doesn't consume our entire lives. Every single one of us comes from a different background and we're also all in very different stages. Despite this obvious fact, there's still a ridiculous stigma against people expressing emotions at work. We aren't robots, so what's the deal?

Let's first think about what people consider "emotional" behavior based on gender biases&mdash;I think it's important. If someone says a woman is being emotional at work, they might think she's angry or aggressive when disagreeing with a statement or correcting someone if they interrupt her. These same people think this is normal behavior for men and don't call them emotional for it. Come to think of it, do men ever degradingly get called emotional for any of their behavior at work? I've never seen it in my own personal experiences.

But what if we all could show some emotions at work without it being seen as a bad thing? Our jobs are frustrating. Software is frustrating. Clients are frustrating. *So what* if someone gets mad at their desk for 30 seconds because the bug they've been working on for a few days or a week is still not fixed? As long as they aren't being disruptive to their teammates, I don't see a problem.

If someone is going through something in their personal life, such as losing a loved one, let them have some space when for a while. They're probably going to be really quiet for a few days. They might cry at their desk or hide in the bathroom. If you see them do either, just be supportive. It's not hard and it doesn't have to be awkward. Also, keep it to yourself if they confide in you. It's not your place to chit-chat about someone else's situation.

So, let's normalize people being human at work. I get that it's a society-wide issue, but I can't think of a better place to start fixing it than at your work, with people you interact with on a daily basis.

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).

---

*[Image](https://unsplash.com/photos/VIO0tyzXL4U) by [Verne Ho](https://unsplash.com/@verneho) on [Unsplash](https://unsplash.com).*
How to Save $1,000,000 Building AI Edge Solutions
Tags: machinelearning, openvino, edgecomputing, ai
Published: 2019-05-10 01:00:28

---
title: How to Save $1,000,000 Building AI Edge Solutions
published: true
description: How to Save $1,000,000 Building AI Edge Solutions
tags: machinelearning, openvino, edgecomputing, ai
---

https://medium.com/sugarkubes/how-to-save-1-000-000-building-ai-edge-solutions-92989314625c
Taking the leap: Poker player turned aspiring developer
Tags: newdev, beginners, javascript
Published: 2019-05-10 00:49:46

---
title: Taking the leap: Poker player turned aspiring developer
published: true
description: 
tags: #newdev #beginners #javascript
---

Playing poker has been a passion for over a decade, and a profession for the past 5 years. I finished grad school in 2014 and decided to chase a long time dream and become a professional poker player. Poker is an amazing game. It can be extremely fun one second and equally frustrating the next. The swings always keep it interesting, and there's nothing like going on an upswing and winning piles of money. 

I made a living playing online poker for the first 3.5 years. The online poker market in the US has taken a turn for the worse. Dealing with unregulated sites and playing against bots really cut into profitability. I turned towards live poker and it has proven very successful. Over time, the casino lifestyle has taken its toll. I just don't enjoy being in a casino 5 days week at all hours of the night. Poker will always be a hobby, but it's time to try something new.

I went to school for finance/business. I could look for jobs in that area, but I went towards poker because I wasn't finding jobs I was excited for. After reading Haseeb Qureshi's blog post, https://haseebq.com/cracking-the-coding-bootcamp-the-definitive-guide/, it inspired me to give coding a try. I went through the Codecademy Javascript tutorial. It was difficult, but also a lot of fun. I am hooked! Coding and poker are very similar. At their core, they are both problem-solving. 

For now, I am still playing poker. In my free time, I am going through coding tutorials. After Codecademy, I finished Gordon Zhu's Watch and Code. My next plan is to go through a few freecodecamp certifications and create a portfolio. My ultimate goal is to land a developer job. I am excited to create. I am excited to build. I am excited to join a supportive community here. I am excited to learn.

Thanks for reading, and if you have any helpful tips let me know!
PHP in 2019
Tags: php, programming
Published: 2019-05-13 08:08:18

---
title: PHP in 2019
published: true
tags: php, programming
canonical_url: https://stitcher.io/blog/php-in-2019
---

Do you remember the popular "[PHP: a fractal of bad design](https://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/)" blog post? The first time I read it, I was working in a crappy place with lots of legacy PHP projects.This article got me wondering whether I should just quit and go do something entirely different than programming.

Luckily for me I was able to switch jobs shortly thereafter and, more importantly, PHP managed to evolve quite a bit since the 5.* days.Today I'm addressing the people who are either not programming in PHP anymore, or are stuck in legacy projects. You can read about it on [my blog](https://stitcher.io/blog/php-in-2019)
Use Vim as a C/C++ IDE
Tags: vim, spacevim, c, cpp
Published: 2019-06-23 14:32:10

---
title: Use Vim as a C/C++ IDE
published: true
tags: ["vim", "SpaceVim", "C", "CPP"]
canonical_url: https://spacevim.org/use-vim-as-a-c-cpp-ide/
---

# Use Vim as a C/C++ IDE

This is a general guide for using SpaceVim as a C/C++ IDE, including layer configuration and usage. Each of the following sections will be covered:

<!-- vim-markdown-toc GFM -->
- Enable language layer
- code completion
- alternate file jumping
- code running
- code format
- REPL support
<!-- vim-markdown-toc -->
### Enable language layer

To add C/C++ language support in SpaceVim, you need to enable the `lang#c` layer. Press `SPC f v d` to openSpaceVim configuration file, and add following configuration:

```
[[layers]]
  name = "lang#c"

```

for more info, you can read the [lang#c](https://spacevim.org/layers/lang/c/) layer documentation.

### code completion

By default the autocomplete layer has been enabled, so after loading `lang#c` layer, the code completionfor C/C++ language should works well.

### alternate file jumping

To manage the alternate file for a project, you may need to create a `.project_alt.json` file in the root of yourproject.

for exmaple, add following content into the `.project_alt.json` file:

```
{
  "*.c": {"alternate": "{}.h"},
  "*.h": {"alternate": "{}.c"}
}

```

with this configuration, you can jump between the alternate file via command `:A`

### code running

The default code running key binding is `SPC l r`. It will compile and run current file asynchronously.And the stdout will be shown on a runner buffer.

![c-cpp-runner](https://user-images.githubusercontent.com/13142418/58743787-db2bee80-846a-11e9-9b19-17202ac542c9.png)

### code format

The format layer use neoformat as default tool to format code, it will format current file.And the default key binding is `SPC b f`.

```
[[layers]]
  name = "format"

```

### REPL support

Start a `igcc` inferior REPL process with `SPC l s i`. After the REPL process being started, you cansend code to inferior process, all key bindings prefix with `SPC l s`, including sending line, sending selection or evensend whole buffer.

![c_repl](https://user-images.githubusercontent.com/13142418/58744043-28aa5a80-846f-11e9-94c1-e6927696e662.png)
IIFEs in JavaScript and how to avoid this common mistake
Tags: javascript, node
Published: 2019-05-09 23:21:40

> Originally posted at [michaelzanggl.com](https://michaelzanggl.com/articles/javascript-iifes). Subscribe to [my newsletter](https://michaelzanggl.com/) to never miss out on new content.

Since JavaScript doesn't support top level await quite yet, the typical node index file might look something like this

```javascript
const http = require('http')

(async () => {
  // await ...
})()
```

We require the http library and then have an immediately invoked function expression(IIFE) just so we can use async await.

With IIFEs we write functions and immediately execute them. This is so everything that is happening within the function stays within the function and is not accessible from outside of it. It is also **the** way to use await at the top level as of now.

# Problem


I am sure many of you have fallen into this trap, as the above code actually breaks.

> `Uncaught TypeError: require(...) is not a function`

The reason it crashes is because JavaScript tries to execute this (try formatting the above code in your editor to get the same result)

```javascript
const http = require('http')(async () => {
  // ...
})()
```

It expects the `require` method to return a function, in which we pass an asynchronous function and then we execute the result of that. 🤯

The error becomes especially hard to catch when you have two IIFEs in a row.

> `Uncaught TypeError: (intermediate value)(...) is not a function`

# Common workarounds

There are common workarounds for this, which are all about telling JavaScript that the IIFE is indeed a new statement, most notably

```javascript
const http = require('http')

void (async () => { // < note the void at the beginning

})()
```

or 

```javascript
const http = require('http'); // < note the semicolon

(async () => {

})()
```

or even

```javascript
const http = require('http')

!(async () => { // < note the exclamation mark

})()
```

# Labels

The above workarounds are nothing new, but here is something you might have not seen yet.

```javascript
const http = require('http')

IIFE: (async () => {

})()
```

Yup, labels work as well. You can put labels before any statement. We can replace `IIFE` with anything we want at this point as long as it follows the syntax. If it works as a variable name, it works as a label identifier.

```javascript
一か八か: 1 + 1
```

[Labels](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) are actually quite interesting. Look at the following code snippet taken from MDN.

```javascript
foo: {
  console.log('this will be executed');
  break foo;
  console.log('this will not be executed');
}
console.log('this will be executed as well');
```

# Conclusion

Since labels are not so well known, it is probably better to stick with semicolons or void, but it is nonetheless interesting. I like how they add some documentation to IIFEs. Well, let's just wait a little more for top level await.
Ruby Gem debug_helper
Tags: ruby, debugging, programming
Published: 2019-05-09 22:09:24

---
title: Ruby Gem debug_helper
published: true
description: 
tags: ruby, debugging, programming
---
I know we have a steady stream of new DEVs, so for them, I'm linking again to my Ruby gem <code>debug_helper</code>:

- [Gem](https://rubygems.org/gems/debug_helper)
- [Documentation](https://github.com/BurdetteLamar/debug_helper#debug-helper)
What is the standard way to keep UI state and backend state synced during updates? (React and Node)
Tags: help, react, node, discuss
Published: 2019-05-09 22:07:57

---
title: What is the standard way to keep UI state and backend state synced during updates? (React and Node)
published: true
tags: help, react, node, discuss
---

Let's say i have a Node-Express backend with a REST API and a React frontend that has some editable Card. On App load, I fetch an *items array* and do a setState

```javascript
componentDidMount() {
    axios.get('/items').then(() => {
        this.setState({ items: res.data })  // res.data is array of items
    })
}
```

When user updates the card, I send a PUT or POST request to the backend, 
which updates the card details (with or without DB doesnt matter, just assume backend state is updated). good.

My question is, what's the best way to update the UI ?
Is there a standard way when doing REST?

Here are the ideas I could come up with:


- On my server PUT/POST route handler, i could return *items array*, including the one updated. On UI, I could then do a simple `setState({ items: res.data })`. Returning the entire items array seems expensive though, considering only one item is updated.

    - At least backend is source of truth, if update fails, i could easily tell UI error happened.

- On my server Put/POST route handler, i could return *only updated item*. 
I would then have to find and replace the updated item in my state and  do a `setState({ items: res.data })`

    - Simple enough, but it feels like i'm doing extra work.  
But since my data structure is an array, I have to replace entire array in UI state. 

    - Or is there a better way to update only one item in an array in state, or maybe better to change my data structure to an object, so setState is optimal.


- On my server Put/POST route handler, i could return a *status code/message* to signal UI that operation succeeded and now I can update UI state.

- On UI side, I do the update first, then send the updates to backend.
For some reason if it fails in backend, then I rollback UI changes (might be tricky?)

- Use localStorage in between?

any other ideas?


This is probably handled better in GraphQL and using state management like Flux, 
but if i'm doing it really vanilla Node and React, what's the best way?


Let me know if my question isn't clear enough, i could elaborate

Thanks!
How does react communicate with the back end?
Tags: react, vscode, springboot
Published: 2019-05-09 22:03:06

---
title: How does react communicate with the back end?
published: True
description: Currently in a training course provided by WozU and am having a hard time finding answers. They are continually providing code samples without explaining their inner workings. I need some help understanding the way React communicates with the back end. Currently using VScode for the front end and spring boot for the back end.
tags: React, VScode, springboot
---

Currently in a training course provided by WozU and am having a hard time finding answers. They are continually providing code samples without explaining their inner workings. I need some help understanding the way React communicates with the back end. Currently using VScode for the front end and spring boot for the back end.
Google I/O 2019 in 10 pictures
Tags: conference
Published: 2019-05-13 19:37:16

---
title: Google I/O 2019 in 10 pictures
published: true
tags: Conference
canonical_url: https://maxkatz.org/2019/05/09/google-i-o-2019-in-10-pictures/
---

This week I attended my very first [Google I/O conference](https://events.google.com/io/). I was there only one day, for the product and developer keynotes. It was a lot of fun and an awesome experience. Here is my day at Google I/O 2019 in ten pictures.

![googleio-shuttles](https://katzmax.files.wordpress.com/2019/05/googleio-shuttles.jpg?w=1024&h=768)<figcaption id="caption-attachment-10411">Shuttle buses to take attendees to/from the event. Google I/O is a parking free event (which is really nice)</figcaption>

![googleio-keynote-start](https://katzmax.files.wordpress.com/2019/05/googleio-keynote-start.jpg?w=1024&h=768)<figcaption id="caption-attachment-10399">Sundar Pichai, Google CEO, is staring the product keynote</figcaption>

![googleio-prod-panorama](https://katzmax.files.wordpress.com/2019/05/googleio-prod-panorama.jpg?w=1100)<figcaption id="caption-attachment-10402">Shoreline Amphitheatre in Mountain View, CA</figcaption>

![googleio-bigio-letters](https://katzmax.files.wordpress.com/2019/05/googleio-bigio-letters.jpg?w=768&h=1024)<figcaption id="caption-attachment-10397">Big I/O letters at the entrance</figcaption>

![googleio-android](https://katzmax.files.wordpress.com/2019/05/googleio-android.jpg?w=768&h=1024)<figcaption id="caption-attachment-10396">Hello, Android!</figcaption>

![googleio-prod-shark](https://katzmax.files.wordpress.com/2019/05/googleio-prod-shark.jpg?w=1024&h=768)<figcaption id="caption-attachment-10403">Shark on stage! You can place an AR image into any scene, even on a desk at home</figcaption>

![googleio-prod-livescribe](https://katzmax.files.wordpress.com/2019/05/googleio-prod-livescribe.jpg?w=1024&h=768)<figcaption id="caption-attachment-10401">New Live Caption feature adds real-time subtitles to a audio or video playing on your Android phone</figcaption>

![googleio-prod-aisoftwarehardward](https://katzmax.files.wordpress.com/2019/05/googleio-prod-aisoftwarehardward.jpg?w=1024&h=768)<figcaption id="caption-attachment-10400">Google believes that the biggest breakthroughs are happening at the intersection of AI + Software  + Hardware</figcaption>

![googleio-dev-start](https://katzmax.files.wordpress.com/2019/05/googleio-dev-start.jpg?w=1024&h=768)<figcaption id="caption-attachment-10398">Google’s new cloud leader Thomas Kurian starting the developer keynote</figcaption>

![googleio-dev-firebase](https://katzmax.files.wordpress.com/2019/05/googleio-dev-firebase.jpg?w=1024&h=768)<figcaption id="caption-attachment-10410">Firebase team is showing its new AutoML Vision Edge capability: to simplify the workflow of building and training custom TensorFlow Lite models to classify images</figcaption>

And a few bonus pictures:
![](https://thepracticaldev.s3.amazonaws.com/i/8p79gr47gaib942vfpf9.png)
ELI5: Git Rebase vs. Merge
Tags: beginners, webdev, explainlikeimfive, git
Published: 2019-05-09 21:13:18

---
title: ELI5: Git Rebase vs. Merge
published: true
description: Rebasing and merging are extremely similar but what exactly are the differences?
tags: beginners, web development,  explainlikeimfive, git
---

Up until now, I had only merged branches into one another but recently I discovered another option -- rebasing! Rebasing and merging are essentially doing the same thing so what exactly goes on behind the scenes for each?

### Merge

![Example of Git Merging](https://thepracticaldev.s3.amazonaws.com/i/avav87r6f6fdpn4nh569.png)

Git merge combines multiple commits into one history. It will look at the two branches you want to combine and finds a common commit between them. Next, it takes the content of the feature or source branch and integrates it with the target (in our example, master) branch by creating an entirely new commit. This new commit holds the history of both of your branches. Because of that, you'll see all of the commits in chronological order.

### Rebase

![Example of Git Rebase](https://thepracticaldev.s3.amazonaws.com/i/pe2f9ka3dq7eejrl6dlu.png)

Rebasing is a bit different. Instead of merging the history of your two branches together from one base commit, you're actually making it seem like you created your branch from a different commit than you originally did. This allows you to keep a linear project history. This makes it a lot easier in the future to revert a change if you have a bug because you won't have to dig through to where the commit was made in the timeline. 

So, which do you prefer? Rebase or merge? I'd love to hear in the comments below! 

--- 

Be sure to follow me on [Twitter](https://twitter.com/karaluton) for lots of tweets about tech, and if I'm being honest, lots of tweets about dogs too.
If you enable "lazy loading" in chrome://flags, your DEV browsing experience will be moderately more efficient 😄
Tags: webdev, webperf, chrome, html
Published: 2019-05-09 21:11:36

_Update: Lazy loading shipped in Chrome recently_

{% link https://dev.to/yashints/native-lazy-loading-is-landed-in-chrome-2kli %}

I just merged this PR, which adds `loading="lazy"` to a bunch of images around [dev.to](/).

{% github https://github.com/thepracticaldev/dev.to/pull/2776 %}

This functionality is expected to ship with Chrome 75 in early June, but this flag will let you play with it right now.

Will this have a major affect on anything in your life? No. You probably won't notice anything. But some images will defer loading until you are close to needing them—which is nice.

This was an easy change and we'll now be guaranteed to have the functionality ready the first day it ships generally.

Happy coding!