teleren/devto huggingface dataset:
Axios unable to fetch API data after deploying the React App Build.
Tags: react, redux, axios, javascript
Published: 2019-10-28 19:33:25

Axios calls are working perfectly while the react app functioning on localhost, But the calls are unable to fetch any data while the build is uploaded to the cpanel file manager directory. I even tested the same on Netlify.
Is there any solution to this? Please help!!!!

Package.JSON
```
{
  "name": "admin_panel",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-pdf/renderer": "^1.6.7",
    "@stardust-ui/docs-components": "^0.40.0",
    "@stardust-ui/react": "^0.40.0",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "history": "^4.10.1",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-filter-search": "^1.0.8",
    "react-lazyload": "^2.6.2",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "react-to-pdf": "0.0.8",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.1",
    "uuid": "^3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^6.5.1",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.4.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^2.1.2",
    "prettier": "^1.18.2"
  }
}
```

Actions.JS
```
import axios from "axios"

import {
  PRODUCT_ERROR,
  GET_PRODUCTS,
} from "./types"

// Get Products
export const getProducts = () => async dispatch => {
  try {
    const res = await axios.get(`http://hostServer/product/all`)

    dispatch({
      type: GET_PRODUCTS,
      payload: res.data,
    })
    // console.log(res.data)
  } catch (err) {
    dispatch({
      type: PRODUCT_ERROR,

      payload: { msg: err.response.statusText, status: err.response.status },
    })
    // console.error(err.response)
  }
}
```
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2019-10-28 19:13:55

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. Browser Beats

Reverse engineering, body tracking, mapping 3D coordinates, raycasting, and more! You've got it all in this post, where Charlie builds a browser version of a popular VR game.

{% link https://dev.to/devdevcharlie/playing-beat-saber-in-the-browser-with-body-movements-using-posenet-tensorflow-js-36km %}

#2. Read The Docs

Gábor dives into lesser known features of `JSON.stringify`. Did you know about all of these?

{% link https://dev.to/blacksonic/the-secret-power-of-json-stringify-393b %}

#3. Fun & Games

Andreas shares eight games for practicing CSS the fun way.

{% link https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f %}

#4. Go for it!

An encouraging post for anyone interested in speaking at conferences. Emma covers pros and cons, the logistics of speaking, and other considerations. 

{% link https://dev.to/emmawedekind/speaking-at-technical-conferences-1kkk %}

#5. You're not alone

An encouraging post for *anyone* feeling stuck in their learning process -- along with some advice.

{% link https://dev.to/blarzhernandez/just-keep-coding-a-letter-to-junior-developers-21h8 %}

#6. Algorithmic Design Paradigms

Brandon shares the bulk of their book, "Algorithmic Design Paradigms" right in this post 👇

{% link https://dev.to/brandonskerritt/a-free-ebook-on-greedy-algorithms-divide-conquer-and-dynamic-programming-1712 %}

#7. A few tricks!

Improve your development process with these handy tips and tricks -- code snippets included. 

{% link https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo %}


_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
React Conf: An Energetic Reactive Community
Tags: javascript, frontend, react
Published: 2019-10-28 18:49:37

---
title: React Conf: An Energetic Reactive Community
published: true
description: React Conf 2019 was a success! We learned, we laughed, we connected!
tags: #javascript #frontend #reactjs 
canonical_url: https://auth0.com/blog/react-conf-an-energetic-reactive-community/
---
React Conf 2019 happened!

If you found yourself in Lake Las Vegas this past weekend, chances are you saw some of the coolest new UI designs for Facebook, learned about how React Native apps are helping change world hunger, and learned loads about React Suspense. React Suspense? That is React’s system for handling the loading of things like code, data, and images. (Don’t worry, we’ll talk about all this stuff!)

[Keep reading 📖](https://auth0.com/blog/react-conf-an-energetic-reactive-community/?utm_source=dev&utm_medium=sc&utm_campaign=react_conf)

![React Conf: An Energetic Reactive Community](https://cdn.auth0.com/blog/illustrations/reactjs.png)
I created my first app!
Tags: beginners, learning, codenewbie
Published: 2019-10-28 18:48:44

Yesterday I developed my first app! I did a v0 without screens (it works only in the command line) but it records infos into database!!! A huge advance in my studies.

Last Friday and Saturday I was having a difficult time trying to learn frameworks. It was a frustrating process. I wanted so bad to create at least a minimal version of "Let's Go Out!" so I paused learning frameworks. Then with the orientation of my dev husband Vinicius Munhoz I created my first app! The picture below is the plan he made to help me develop the app. We did it all on Sunday morning.

I used Python language, a library to connect it with the database and postgreSQL using pgAdmin4. The happiness is huge. It is a big milestone for me and a bit of motivation and self confidence.

Of course I want to develop this idea, add features, do a better database structure and learn to use frameworks (I didn't give up on them!). I know there is still a lot of knowledge that I need. Little by little I will learn and grow. 🤓

See Let's Go Out v.0 on GitHub: [https://github.com/annamunhoz/letsgooutv0](https://github.com/annamunhoz/letsgooutv0)

![letsgooutv0](https://thepracticaldev.s3.amazonaws.com/i/8ys3vazyvugx3f6dl42c.jpg)*It is in portuguese.*
Heartthrob v2.0: SCSS > CSS && --jQuery
Tags: heartthrob, css, frontend, typography
Published: 2019-10-28 18:32:44

Hey there, long time we don't talk to each other right? Time to give you a quick and yet a powerful update. Today I released the new version of Heartthrob, and here is the changes:

### Redone all the code to use the latest tech (SASS)
The main focus of this update was to bring the latest tech possible to the framework, making it easy for the community to mantain, and as well to code. 

One of the problem was that all the CSS of the project was in a single file, and as the project grows, the file grew as well. Now it is easier than ever to contribute and make it happen!

And, to add more to this change, instead of using the pixels for measures, the project has now changed to use ems. 

### Better typography
After studing a little bit of typography for web, I had updated how the fonts in this project looks like. The line-height now is more confortable to read as well the font-weight used in a few places. The colors has also been changed for links, as well new behaviors like :visited for example.

Another change is that instead of using Courier New as the default font for code in you text, now it prefers to use Consolas. 

### Small yet powerful changes
Along side with that it was also allowed to use the colors yellow and green for border in a blockquote. Of course, I fixed several issues, including how menu was handled.

The Kendo UI code was also removed, this way the code is cleaner and you will get only the thing that you need the most. But if you like to use Kendo UI on your project, don't worry, will share more about how it will be handled later.

Check the repository, here: https://github.com/vtnorton/Heartthrob/releases] 
Wanna see the docs, here:  http://heartthrob.vtnorton.com/
Coding bootcamps - what they don't tell you
Tags: beginners, discuss, webdev, codenewbie
Published: 2019-10-28 18:31:44


I went to a coding bootcamp and switched careers into tech. Now I'm a software developer in Silicon Valley (web development). Was my experience worth it?

Popular bootcamps in 2019 are Hack Reactor / Galvanize, General Assembly, Lambda School, Fullstack Academy, and Flatiron School, among many others. 

Many focus on web development because it's undertaught in college currently, so there's a high demand in the market. 

My coding bootcamp experience truly changed my life for the better, BUT was it completely worth the money? You can definitely go through the same process of learning and getting your first job without a coding bootcamp (online resources like FreeCodeCamp are great)

I break down some common misconceptions about coding bootcamps, and explain why you should / shouldn't go. 

Please consider subscribing by clicking here if you found this information useful!
[YouTube - Matt Upham](https://www.youtube.com/mattupham?
sub_confirmation=1)

{% youtube A1AyjYHFW1c %}

{% youtube Cygm0EIJXjo %}
[Coding bootcamps — what are they, are they worth the cost?](https://youtu.be/A1AyjYHFW1c)

## What is a coding bootcamp?
<ul>
<li>Accelerated program to learn software skills</li>
<li>3 months to a year long</li>
<li>Smaller cohorts</li>
</ul>

## Why are bootcamps around?
<ul>
<li>Current skill gap in the industry</li>
<li>Not everyone can afford to go back to college (although a bootcamp isn’t a replacement)</li>
<li>Very High ROI</li>
</ul>

## Location?
<ul>
<li>Major Cities</li>
<li>Remote</li>
<li>Occasionally partner with universities</li>
</ul>

## What they don’t tell you:
<ul>
<li>Bootcamps really don’t teach you much, it’s very self-taught</li>
<li>There aren’t as many open jobs that you think</li>
<li>The statistics are manufactured (they employ bootcamp grads as instructors, they heavily filter in people they think can achieve it with success)</li>
<li>The job search is the hardest part of the bootcamp (seriously, people applied to ~300 jobs each)</li>
<li>Just the beginning, the learning never stops (but that’s the fun part!)</li>
<li>You can do this career transition on your own without a bootcamp</li>
</ul>

What are your thoughts on coding bootcamps? They definitely have stigmas, but the high-quality ones can also be great resources!

[YouTube - Matt Upham](https://www.youtube.com/mattupham?sub_confirmation=1)

Learning to code? Join our growing [Discord](https://discord.gg/9RGdMcF) community!

If you enjoyed this article, please consider subscribing to my YouTube Channel! I talk about tech, life in Silicon Valley, and self-improvement!
What is a Voice User Interface? (VUI)
Tags: ux, beginners
Published: 2019-10-28 18:23:24

Table of Contents:
What is a Voice User Interface(VUI)?
The Creation of  VUI 
Technology used to create a VUI
VUI vs Voice AI
VUI vs GUI
Different VUI approaches
Benefits of VUIs
Conclusion


What is a Voice User Interface?
A Voice User Interface(VUI) enables users to interact with a device or application using spoken voice commands. VUIs give users complete control of technology hands free, often times without even having to look at the device. A combination of Artificial Intelligence(AI) technologies are used to build VUIs, including Automatic Speech Recognition, Name Entity Recognition, and Speech Synthesis among others. VUIs can be contained either in devices or inside of applications. The backend infrastructure, including AI technologies used to create the VUI’s speech components, are often stored in a public or private cloud where the user’s speech is processed. In the cloud, AI components determine the intent of the user and return a given response back to the device or application where the user is interacting with the VUI.

Well known VUIs include Amazon Alexa, Apple Siri, Google Assistant, Samsung Bixby, Yandex Alisa, and Microsoft Cortana. For the best user experience, VUIs have visuals and additional sound effects to accompany them so that users know when the VUI is active, listening, processing speech, or responding back to the user. VUIs today have different ways of handling this. Benefits of VUIs include hands-free accessibility, productivity, and better customer experience.

The Creation of VUI 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bobyfb9ensqt1aulp963.png)


Read the full article at https://alan.app/blog/voiceuserinterface/
Create a JSON Crew Plugin
Tags: javascript, webcomponents
Published: 2019-10-28 18:18:03

[JSON Crew](http://jsoncrew.agney.dev) is an open source, in place editor, viewer, formatter and validator for JSON data. It is build with Monaco Editor and React. It has a support for plugins based on web components. 

Over the course of this post, we will create a web component, publish an NPM package and list it on JSON Crew with a PR.

We will start with a [starter from Github](https://github.com/BoyWithSilverWings/jc-json-utils). 

## Objective:

- Create a JC Plugin that will remove all `null` values.

Let's get started.

### 1. Clone repository

Click on _Use this template_ on Github and let it generate a fork by your name. Clone the repository locally.

### 2. Run web component

```bash
npm install
npm start
```
### 3. Input

The web component receives a `data` property from JC which would render your component with:

```html
<jc-json-utils .data='{"thing": "nothing" }'>
</jc-json-utils>
```
    As seen in the demo folder. This is the JSON that is currently entered by the user.

### 4. Transform function

Now inside the component, add a transform button inside the render function. Clicking on this button should trigger our function.

```js
 render() {
   return html`
     <pre>${this.data}</pre>
     <button @click=${this.__transformJson}>Transform</button>
   `;
 }
```

### 5. Output

Now for the crux, the `transformJson` function.

   ```js
   const data = JSON.parse(this.data);
   const newData = Object.entries(data)
     .filter(([key, value]) => (value))
     .map(([key,value]) => ({
       [key]: value
     }));

   const event = new CustomEvent('json-transform', {
     detail: {
       message: newData,
     },
   });
   this.dispatchEvent(event);
   ```
   
PS: This removes only the `null` values in the first level. The rest is an assignment.

The custom event for `json-transform` is the most important part here. This is what communicates back to the JSON Crew and shows the transformation UI. The `detail` key represents the data to be transmitted back.


### 6. Publishing as npm package
 
Publishing as an NPM package is the easiest way to host the web component and provide a link to JC. From inside the web component, you can run:

   npm run release

to release component to npm.

If you are new to publishing to npm, checkout [docs](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages)


### 7. Get the URL from [unpkg](https://unpkg.com/)

If your npm package is `@agney/jc-json-utils`, then the url would be `https://unpkg.com/@agney/jc-json-utils`

### 8. Pull Request

{% github BoyWithSilverWings/json-formatter %}

Add a PR to [JSON Crew](https://github.com/BoyWithSilverWings/json-formatter/blob/master/src/components/Plugins/pluginDir.js) with your plugin details.

```
{
    name: "Remove NULL",
    description: "Remove nulls from JSON.",
    url: "https://unpkg.com/js-remove-json",
    tagName: "jc-remove-json",
},
```
The tag name has to be same as the web component name.

And you are done! :clap:

Sample:

{% github BoyWithSilverWings/jc-transform-json %}
Practices of the Python Pro is on Product Hunt
Tags: beginners, python, education, architecture
Published: 2019-10-28 18:16:57

---
title: Practices of the Python Pro is on Product Hunt
published: true
description: I launched Practices of the Python Pro on Product Hunt on October 28th, 2019
tags: beginners, python, education, architecture
---

A while ago I shared about the book I was writing on software development in Python, and received such a great outpouring of support from the DEV community! Thank you all 💖

{% post https://dev.to/easyaspython/im-writing-code-like-a-pro-software-development-in-python-39ji %}

Today, with the book nearing the finish line in production and with all content available in the early access version, I [launched the book on Product Hunt](https://www.producthunt.com/posts/practices-of-the-python-pro)! If you have the time and interest to join the discussion, leave a review (if you've read the book), or share the link around, please do! It would mean the world to me.

[![Product Hunt badge](https://thepracticaldev.s3.amazonaws.com/i/8t0co0r75b7wstgq946z.png)](https://www.producthunt.com/posts/practices-of-the-python-pro)

My availability to write online or do things for fun has been a bit stagnant for some time, but I hope that I'll be able to start getting back to it soon with a few things coming to a close. I look forward to seeing you all again in no time!
Trivia: Why 255?
Tags: webdev
Published: 2019-10-28 17:57:28

Its everywhere, 255,255,255,0 👻🎃 but why do we use 255? The answer is so short I'm not sure it needs a post but hey. 255 is the largest unsigned 8 bit interger (u8) for short,

Take the rgb colour channels at a max of 255 and you get 16,77.216 possible colors, so if you ever wondered why it's so hard to pick a pallette, thank the stars you are not using a 16bit colour space (that's probably not correct)

Anyway, 255, youll see it everywhere u8 is used.
Builtin Select2 Widget in Django Admin
Tags: django, python
Published: 2019-10-28 17:44:18

---
title: Builtin Select2 Widget in Django Admin
published: true
description: An awesome widget for ManyToManyField
tags: django, python
---

Just discovered an excellent built-in feature for Django Admin, released in version 2.0.  

Turns out, there is 

Let's say in `models.py`, you have two models: `Person` and `Problem`.  A person can have many problems..

So we build a simple `PersonAdmin`:

```python
from django.contrib import admin
from . import models


@admin.register(models.Person)
class PersonAdmin(admin.ModelAdmin):
    pass
```

and we end up with something like this:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gnzu4ws6s83985xvhnme.png)

Now, as you can see, Dave has a leaky faucet, his shoe laces are undone and he's broke.  Poor guy.

But let's be serious, this ManyToMany widget sucks.  If that list grows it's going to be a huge pain in the ass to select many items.

Select2 is a great option.. and turns out Django added it into the base install in version 2.0.  Thx guys!

Make some small modifications to `admin.py`:

```python
from django.contrib import admin
from . import models


@admin.register(models.Person)
class PersonAdmin(admin.ModelAdmin):
    autocomplete_fields = ['problems']


@admin.register(models.Problem)
class ProblemAdmin(admin.ModelAdmin):
    search_fields = ['description']
``` 

and voila:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/67ejm3h4idfyv1h1i6zh.gif)

Dave still can't tie his shoes, and he's wetting the bed now.  But at least he figured out how to have a usable ManyToMany widget in his Django Admin!

--- 

Hope this quick tip helps you out.  Follow me here on dev.to or on [Twitter @connorbode](https://twitter.com/connorbode) for more Django, Python, Linux, etc. as I build & learn.
มา Optimize docker builds ด้วย multi-stage กันเถอะ
Published: 2019-10-28 17:27:38

### Multi-stage  คือ
> เทคนิคที่ช่วยให้เราสามารถ optimize ระยะเวลาในการ build image ซ้ำ แทนที่เราจะ มา build image ใหม่ทุกครั้ง ก็เปลี่ยนมาใช้การ copy image ที่เคย build ไปแล้วมาใช้กับ stage ใหม่แทน 

**Note:** Multi-Stage  สามารถใช้งานได้กับ Docker edge version เวอร์ชั่น v17.05.0ce ขึ้นไป

หากเปรียบเทียบกับความเป็นจริง Multi-Stage ก็คล้ายกับแก้วใบหนึ่งที่เป็นเหมือน blue print(พิมพ์เขียว) ให้เราสามารถนำมา Reuse ได้ แทนจะเราจะผลิตแก้วกระดาษที่ซ้ำทุกครั้ง 

![compare with the real world](https://thepracticaldev.s3.amazonaws.com/i/p772tftgdhvfgy3s8p5x.png)

### ลองกันเลย :triangular_flag_on_post:

เริ่มต้นด้วยการสร้าง Dockerfile สำหรับ dev และDockerfile สำหรับ production
![ฺBuild without multi-stage] (https://thepracticaldev.s3.amazonaws.com/i/hjbhd6v5xqgcvoridoiy.png)

หลังจากนั้นลองสั่ง build ทั้งสอง images โดยใช้คำสั่ง
```
docker build -t demo-dev -f Dockerfile-dev .
docker build -t demo-prod -f Dockerfile-production .
```
โดยผลลัพธ์ที่ได้คือ
```
| Docker Tags     | Size   |
|-----------------|--------|
| demo-dev        | 994MB  |
| demo-prod       | 996MB  |
| Summary         | 1.99GB |

```

หลังจากนั้นเราลองมาใช้ **Multi-Stage** กันบ้าง :sparkles:
![DockerfileMuti-stage](https://thepracticaldev.s3.amazonaws.com/i/oy3e4e2soplepz0z5aym.png)

ลองสั่ง build images โดยใช้คำสั่ง
```
docker build -t demo-multi-stage -f Dockerfile-muti-stage .
```

โดยผลลัพธ์ที่ได้คือ
```
| Docker Tags      | Size   |
|------------------|--------|
| demo-multi-stage | 1.01GB |

```

จะเห็นได้ว่าขนาด image ที่ถูก build ลดลงไปถึง **0.98 GB** :tada: 

โดยวิธีการ เขียน docker multi-stage ง่ายมาก เพียงแค่ใช้คำสั่ง
```
copy --from=<index stage or stage name> <destination path> <original path>
```
![Syntax Multistage](https://thepracticaldev.s3.amazonaws.com/i/cvrwiwyfkyh25g3otoi7.png)


## Summary
Muti stage เป็นอีกหนึ่งวิธีที่จะช่วยเพิ่มทางเลือกให้กับคุณในการ ลดขนาดของ image ที่จะช่วยให้ image ของคุณ lean ขึ้นและยังช่วยลดระยะเวลาในการ build image ได้อีกด้วย


Ref:
- [github code](https://github.com/saowaluck/Demo-docker-multistage)
- https://docs.docker.com/develop/develop-images/multistage-build/
- http://www.somkiat.cc/docker-with-multi-stage-build/