teleren/devto huggingface dataset:
How do i iterate through json data sent from backend in reactjs
Tags: react
Published: 2020-08-21 14:29:03

0


im able to receive json data in react sent as response from the backend. this is my simple reactjs code;

import React from 'react'
import axios from 'axios';

class FileUpload extends React.Component{

    constructor(){
        super();
        this.state = {
            selectedFile:'',
            responseData:[],
        }

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        this.setState({
            selectedFile: event.target.files[0],
          })
    }

    submit(){
        const data = new FormData()
        data.append('file', this.state.selectedFile)
        console.warn(this.state.selectedFile);
        let url = "http://localhost/myschool/phpApi/kar.php";

        axios.post(url, data, { // receive two parameter endpoint url ,form data
        })
        .then(res => { // then print response status
            console.warn(res);
            let myjsondata = res;
            console.log(myjsondata.data.sent);
            this.setState({responseData: myjsondata.data.sent});

        })


    }

    render(){

        return(
            <div>
                <div className="row">
                    <div className="col-md-6 offset-md-3">
                        <br /><br />
                        
                            <h3 className="text-white">React File Upload - Nicesnippets.com</h3>
                            <br />
                            <div className="form-row">
                                <div className="form-group col-md-6">
                                    <label className="text-white">Select File :</label>
                                    <input type="file" className="form-control" name="upload_file" onChange={this.handleInputChange} />
                                </div>
                            </div>

                            <div className="form-row">
                                <div className="col-md-6">
                                    <button type="submit" className="btn btn-dark" onClick={()=>this.submit()}>Save</button>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        );

    }
}

export default FileUpload;
when i console.log my response data, i see the json response sent is this;

{"Peter":"35","Ben":"37","Joe":"43"}
now i want to access the value of peter so that when i try to access this.state.responsedata.Peter i get 35.

im not an expert in react but just help me
YouTube Video | CSS3 in 10 days — Day 10
Tags: youtube, css, html, webdev
Published: 2020-08-21 14:21:08

This series contains some practical examples which you can learn and directly use CSS in your projects. We will create awesome components and other things in 10 days.

On day 10 we will start with Blurry Effect, then we will create a CSS Coffee Cup.

![Animation](https://res.cloudinary.com/dxkxvfo2o/image/upload/v1598018837/css3-day10.1_d81xry.gif)*Animation*

This is the tenth part of the series.

{% youtube 6u_qhFg1aY4 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | CSS3 in 10 days — Day 9
Tags: youtube, css, html, webdev
Published: 2020-08-21 14:18:50

This series contains some practical examples which you can learn and directly use CSS in your projects. We will create awesome components and other things in 10 days.

On day 9 we will first do a cool 3D Layering Effect, then we will create a dropdown menu.

![Animation](https://res.cloudinary.com/dxkxvfo2o/image/upload/v1598018349/css-day9-anim_nybfmt.gif)*Animation*

This is the ninth part of the series.

{% youtube D87qgFPqMoc %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
What is the best way to make nested api calls with React hooks?
Tags: react, discuss
Published: 2020-08-21 14:13:55

### I'm using the following approach

useApi hook
```react
import { useState, useCallback } from 'react';

const useApi = (path) => {
  const [data, setData] = useState(undefined);
  const [loading, setLoading] = useState(false);

  const makeRequest = useCallback((params = '') => {
      setLoading(true);
      fetch(`https://apiexample.com${path}${params}`)
        .then((res) => res.json())
        .then((data) => setData(res))
        .catch(() => {})
        .finally(() => setLoading(false));
  }, [path, setData, setLoading]);

  return [{ data, loading }, makeRequest];
};

export default useApi;
```

use of useApi hook
```react
import React, { useEffect } from 'react';
import useApi from './use-api.js';

const MyPage = () => {
  const [{ data: post }, loadPost] = useApi('/posts/1234');
  const [, loadComments] = useApi('/comments');

  useEffect(() => {
    loadPost();
  }, [loadPost]);

  useEffect(() => {
    if (post) loadComments('?postId=1234');
  }, [post, loadComments]);

  return <h1>Content</h1>;
};

export default MyPage;
```

But the more nested api calls, more complex the code gets... So, how to avoid this scenario?
BFE.dev coding #2 implement curry() with placeholder support
Tags: javascript, challenge
Published: 2020-08-21 14:11:30

> https://bfe.dev is like a LeetCode for FrontEnd developers. I’m using it to practice my skills.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yirk0xdbyytnlh5yzhjv.png)

This article is about the coding problem [BFE.dev#2. implement curry() with placeholder support](https://bigfrontend.dev/problem/implement-curry-with-placeholder)

Different from the [BFE.dev#1. implement curry()](https://bigfrontend.dev/problem/implement-curry), placeholder support is required this time.

```js
curriedJoin(1, 2, 3) // '1_2_3'
curriedJoin(_, 2)(1, 3) // '1_2_3'
curriedJoin(_, _, _)(1)(_, 3)(2) // '1_2_3'
```

General idea is the same, yet when judging whether arguments are enough, we need to filter out placeholders, like this.

```js
const expectedArgLength = func.length
const isArgsEnough = args.length >= expectedArgLength &&
  args.slice(0, expectedArgLength)
    .every(arg => arg !== curry.placeholder)
    
if (isArgsEnough) {
  return func.apply(this, args)
} else {
  // TODO
}
```

If arguments are not enough, we need to do as before to store the arguments for next call.

Problem is that `Function.prototype.bind` just concatenate two argument list. What we need is to place new arguments into the placeholder.

So for this case, we return a new function, which merges the old & new argument list by ourself rather than `bind()`.

```js
if (isArgsEnough) {
  return func.apply(this, args)
} else {
  return function(...newArgs) {
    // we need merge two arg list,  newArgs and args
    const finalArgs = []
    let i = 0
    let j = 0
    while (i < args.length && j < newArgs.length) {
      if (args[i] === curry.placeholder) {
        finalArgs.push(newArgs[j])
        i += 1
        j += 1
      } else {
        finalArgs.push(args[i])
        i += 1
      }
    }

    while (i < args.length) {
      finalArgs.push(args[i])
      i += 1
    }

    while (j < newArgs.length) {
      finalArgs.push(newArgs[j])
      j += 1
    }
     
    // then just call the curried function again
    return curried(...finalArgs)
  }
}
```

Ok, passed!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/snfx58o73q2xa2af2pir.jpg)

It is much more challenging than [BFE.dev#1. implement curry()](https://bigfrontend.dev/problem/implement-curry)
Hope it helps. See you next time.
Why you should be a "Night Owl"
Tags: motivation, watercooler, jokes, productivity
Published: 2020-08-21 14:11:16

###1. You get more time in the day
OK, the amount of time you are awake, and in the day would be roughly equal. But your productive hours are when everyone else is asleep.

###2. You get a sense of achievement
Knowing that you use the hours best for you, regardless of what "office hours" generally are.

###4. You get a proud feeling that while most of the world is sleeping, you are working. This feeling is really good for your morale💯

###5. 🌸You'll feel better about yourself🌸
If you are a night owl, being on your schedule is great! Going grocery shopping at 10pm or 6am is a great experience!

###6. You’ll Have a Better Chance at Completing your tasks💯
A happy well rested self, is going to get more done with a higher degree of quality.

###7. You can also just take it slow
With all the morning plebs sleeping, you can buckle down and write code, strategize, and not get sucked into as meetings.

###8. 💝Some health benefits 💝
Ok, the science here isn't great for us night owls. Hopefully it's correlative. But the Gym is generally empty between 11pm and 4am!

And although studies say our health tends to be worse, we also tend to have more creativity, endurance, and better reasoning skills!

###9. 😆Some funny (and possibly sarcastic) reasons 😆
You can talk about it on social media.
Internet speed is usually faster in the middle of the night.

You can brag about being awake all night, getting stuff done.

#Serious Talk

This is a joke of a response to: https://dev.to/nirbhayvashisht/waking-up-early-in-the-morning-how-and-why-1eem

Us night owls get a lot of crap for our chronotype. It isn't easy being tired all day, and then once the sun sets getting a burst of energy. 

Unfortunately, when the world was figuring out how to run businesses, factories, and schools; some jerks with money and power chose to slot us all into the great lie about the greatness of early risers. Multiple shifts would be better IMO.

My suggestion: Do what works for you, if you can. And always push for flexible hours. Even if you are a morning person!

And finally, Nirbhay Vashisht offers some great advice for us all! Whatever your schedule is, make it a schedule. A consistent bedtime and wake-time each day will help your route immensely. For me, the perfect bedtime is about 7am (when my real life allows it)
Why do I think Dot NET is Better Than Java?
Tags: webdev, java, dotnet, development
Published: 2020-08-21 13:51:27

There are a lot of resemblances among <a href="https://codersera.com/blog/reasons-why-dot-net-is-better-than-java/"> Dot Net and Java</a>, but there are some significant differences that make me want to discuss where and when Dot Net is the best choice for your desktop, web, and mobile software development project. When we talk about Java, it is a programming language while Dot Net is a framework supported by Microsoft.

.NET and Java both seek to enhance application creation through the availability of a range of defined modular components and services. Developers can focus on business requirements instead of programming basic services with standard components and services at their disposal. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/slzayc6hsoqylxbngz34.jpg)

Java and .NET have been built to allow programmers to build Web applications that are "steady." A 3-stage framework consists of a client level, server level, and database level. Dot NET and Java both provide transactions that allow business processes and data in databases to be triggered.

<h2>Why Dot NET is better than Java? </h2>

<b>It is the most secure</b>- In Dot Net, safety issues have been properly handled and the new innovations have been applied. For open-source projects such as Java, lack of infrastructure, and qualified assistance is hardly feasible. Consequently, Java Runtime's regular updates and other elements ruin user interactions and cause distractions to others.

<b>It supports cross-platform web development</b>- Dot NET promotes the development of cross-platform applications that allow the user to create Windows, Linux, and Mac applications. The whole backend will use the same C# code in much clearer terms.

<b>It provides better performance</b>- The huge achievement that Dot NET has acquired is its brilliant performance. All the new updates and improvements lead to an optimized code that in return boosts the performance. The most important thing is that you don't have to change the code in reality.

<b>It has a mature runtime as CLR</b>- In many technical details, the Common Language Runtime (CLR) is superior to JRE or JVM. It is because JVM is a compiler and simply translates Java Byte code into an extensive instruction for, and not directly for the computer. This is also still sluggish and needs daily updates to accommodate further operating systems. In comparison, the CLR of Dot Net is not the case.

<h2>Bottom Line</h2>

If you trust in Microsoft's strengths and its ASP.NET framework, it's time to join in, rather than wander around dangerous open-source environment, where you have to go extra miles to achieve something significant. Of course, a team of seasoned Dot Net developers is needed to make the most out of it and give remarkable results.
GitHub's Open Source support
Tags: opensource, github, discuss
Published: 2020-08-21 13:37:28

There's already 2 years since [Microsoft has acquired GitHub][MaG], and now, it's not really news that the most used private OS owner are involved with great open source software development, even releasing some [Windows compatibilities with the Linux kernel][WSL2]

Even though, it has been very recurent to see GitHub's moves for this cause. They raised this flag and are working hard to show support of OSS communities.

After their participation on [Arctic Vault Program][AVP] (with what I also got my badge), they wrote a [rich guide][OSSg] for OSS maintainers and now came with this new [ReadME project][ReadME] to share "stories of personal growth, professional challenges, and lessons learned—the journeys you might not see behind projects you probably use every day"

[[GitHub's Blog original post]][Post]

I always got glad to watch *Open Source philosophy* growing and hope to see it trancending boundaries of software universe, reaching other society experiences soon!

  [Post]: https://github.blog/2020-08-20-readme-project/
  [OSSg]: https://opensource.guide/
  [AVP]: https://archiveprogram.github.com/
  [MaG]: https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux?wprov=sfla1
  [ReadME]: https://github.com/readme
  [WSL2]: https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux?wprov=sfla1
Need advice to create e-commerce website and application with python and react
Tags: help, python, django, machinelearning
Published: 2020-08-21 13:36:09

#### Hey follow Developers,

 I want to create e-commerce website and application for a client. It will include all services including recommendation system.

I am quite good in Python, Django and some basic react.

I want to use Django rest framework in backend and React website frontend and react-native for mobile-application. 

![](https://media.giphy.com/media/kEdBEtNgSD36ufdgJr/giphy.gif)

Is It a Good idea to create e-commerce app and website like this. or I should use flutter or something else. I want to use python only so I can use my machine learning models with Django. 

Thanks for Your Suggestions.
Datatable with almost all functionality- Codepen
Tags: javascript, tutorial, showdev, css
Published: 2020-08-21 13:28:08

DataTables is a powerful jQuery plugin for creating table listings and adding interactions to them. It provides searching, sorting and pagination without any configuration. In this article we’ll see some useful , good looking datatables.

Earlier, I used a datatable that would only be responsive to a horizontal scroll for a table with many columns. To get rid of the scroll bar, the child row was a option. But at the same time, I was trying to export my table to excel, pdf etc.

This datatable example has almost all functionality- searching, sorting , export to pdf, excel, pagination, column visibility, copy to text and super responsive by creating child row. You can use it for any project.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jnyqp5ogf4nynho2kl0u.jpg)

{% codepen https://codepen.io/manishfoodtechs/pen/NWNbwBO %}


######***IMP REQUEST:***

###### You are most welcome to join my team 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qhbvg5fsrh3nt7anh36.png)

[ Click here for joining my team ]
(https://forms.gle/pSCALuEWHus3pg9F6).

###### *Also you are most welcome to join OPEN SOURCE INTELLIGENT SYSTEM (OSINT) if you can help in open source project regarding safeguarding humans from various diseases like CORONA outbreak*
######https://github.com/Manishfoodtechs/OSINTHRH/wiki

Contact email: Manishfoodtechs@gmail.com. 

If you have any problem, our team is also engaged in professional consultancy and delivery.

![](https://media2.giphy.com/media/oNrPzIy3OhHm7zrvA3/source.gif)

Imagecredit: Pixabay, manishfoodtechs,giphy
Combined Revenue Of 4500 MRR
Published: 2020-08-21 12:54:05

Reached a combined revenue of 4.5k MRR between Proxies API, TeraCrawler(https://teracrawler.io/) and my fully managed service business. 
All 3 streams compliment each other and I am happy with this even though the work load is a little overwhelming at first. I am feeling very good and confident. 
It completely immerses me in the field of web crawling/scraping and the services business keeps me real because I am dealing with real challenges and it is never easy.
Kill Your Web Dev Portfolio ☠️
Tags: career, beginners, codenewbie, freelancing
Published: 2020-08-22 17:20:05

---
title: Kill Your Web Dev Portfolio ☠️
description: You're ready to dump dozens of hours into building a perfect web development portfolio. Before you do, though, take a few minutes to watch this video. Is a portfolio really the best way to get clients?
published: true
date: 2020-08-21 12:54:00 UTC
tags: career, beginners, codenewbie, freelancing
canonical_url: https://raddevon.com/articles/kill-your-web-dev-portfolio/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zks3l1wk2oj7lqygftgf.jpg
---
In this video, I share **why I don’t have a web development portfolio** and **how I’m able to get gigs despite that**. We’re hard wired to want to build things, and the desire to spend hours and hours crafting a portfolio plays right into that. Resist the urge, and take the advice in this video instead.

{% youtube KaTLsg_-2Nk %}

This is primarily from the perspective of a freelance web developer, but there’s some truth here if you’re looking for a full-time gig as well. Sure, the company is probably going to want to see a portfolio, but it’s not nearly as important as other means of building trust.

If you are looking for full-time work and having trouble breaking into the industry, try freelancing first! You’ve probably noticed that even junior gigs require a couple of years of experience. How can you get that if you can’t get hired? Freelancing is the way to get experience before you get hired. Head over to [this post on Rad Devon](https://raddevon.com/articles/kill-your-web-dev-portfolio/) to get started with my three best freelancing tips!
Install macOS Mojave virtual image file
Published: 2020-08-21 11:41:54

macOS mojave is famous all around due to its some greater functions. Including Dark mode and sidecar. Therefore, most of people on non mac system also want to install macOS mojave on their system. But unfortunately, if is impossible to directly install macOS Mojave on non mac devices including, Windows, Linx etc.

However, today there  are always solutions for the digital problems. Similerly, there is a fully secure and ligit way to install macOS on non mac system. But for that you require a software by the name of Virtualbox or VMware workstation. These two are the reknown software for the virtualization of desktop. These software are used for create and run multiple operating system on one hardware.

Between these two software, virtualbox is more used . Bacuse, it is an open source and free software by Oracle Inc.
However, to install macOS on non mac system, you require the image files of the operating system. For example. For the macOS Catalina. You need the image file of macOS Catalina. And more Mojave you need the image file of macOS Mojave.

Therefore, we have brought to download the image file of  macOS Mojave. You can visit the following article to download the macOS Mojave image file for virtual machines.

https://techvatan.com/download-macos-mojave-image-file-for-virtualbox-and-instal


Moreoever, if you want to read some more knowledgeable up to date content. Please visit the following article.

https://techvatan.com/how-to-create-macos-11-big-sur-bootable-usb-on-mac/
Filter tags in feed?
Tags: meta
Published: 2020-08-21 12:50:46

Is there a way to NOT show posts that contain certain tags. In my case it would be #javascript because I don't use Javascript, I don't like Javascript, I don't care about Javascript, I don't want to learn about Javascript, I already know what I need to know about Javascript, I know it has weird inconsistencies, and 1 in 3 posts here is about Javascript, so...

Thanks
Finished 20 Videos
Tags: saas
Published: 2020-08-21 12:45:22

I just finished uploading the 20th video on youtube for my SAAS app ProxiesAPI.
Proxies API(https://www.proxiesapi.com/) does what it says in the name. It is a rotating Proxy API for web scrapers. We pass webpage fetch requests through a network of over 2 million high speed, residential proxies and render pages, solve CAPTCHAs, handle sessions, cookies and other issues so you never get blocked. 
The videos barely have views but I am happy I stuck to what I set out to do. Honestly I am prepared to play the long term game. I know it takes time but I enjoy teaching and sharing my knowledge of web scraping.
Django views/paths to home.html and about.html
Tags: django, python, templates, web
Published: 2020-08-21 12:44:26

How do I create paths to load a home.html and about.html for templates? 
What do the urls.py look like? 

urlpatterns = [
    path('admin/',admin.site.urls),


Below are the 2 I made, but it’s a error......

    path('about/',views.home)

    path(r'about/',views.about)
]
August 21st, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-08-21 12:43:31

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![It’s time to get your learn on](https://media.giphy.com/media/a7NBvg3Ss8UYo/giphy.gif)

</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/graciegregory/what-was-your-win-this-week-2926 %}

<center>

![Someone feeling like "Yaaas!"](https://media.giphy.com/media/zBhZiVNNQjfTG/giphy.gif)

</center>

Photo by [Rainier Ridao](https://unsplash.com/@rainierridao?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/learn?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
The Day Before Launch. Nervous Nelli
Tags: saas
Published: 2020-08-21 12:26:52

I am going to open up EdgeNet(https://edgenet.app/) to the public tomorrow. 
Some of you already signed up for the beta and I am grateful. All that feedback and testing 100s of websites later, here I am. I don't want it to be a big launch I just want it to be a little quiet one where it works for whoever signs up. 
Lets hope that happens EdgeNet is going to be a SAAS service that converts your website into a static one and deploys it on a world wide CDN automatically. It also detects content changes and automatically syncs it. 
I am developing this because I needed a way to increase the page speed for many of my websites but wanted to retain the control that a CRM gives me.