teleren/devto huggingface dataset:
Consume a REST API With Axios Client React
Tags: react, beginners
Published: 2020-11-17 20:43:15

APIs are what we can use to feed our React applications with data. APIs consist of a set of data, that is often in JSON format with specified endpoints. When we access data from an API, we want to access specific endpoints within that API framework. We can also say that an API is a contractual agreement between two services over the shape of request and response. The code is just a byproduct. It also contains the terms of this data exchange.

Axios is an easy to use promise-based HTTP client for the browser and node.js. Since Axios is promise-based, we can take advantage of async and await for more readable and asynchronous code. In this example, I'm going to show a list of crops that the user must water and how I get that list from an API.

First, we are going to import [Axios](https://www.npmjs.com/package/axios) in our project, in this case, I use npm  
```
npm install axios
```
Next, we define a service file where we are going to define the call to the service.
```javascript
import axios from 'axios';

let urlBase = 'https://back-project.herokuapp.com/';
//Obtener informacion feedback
async function getCrops(code) {
  return await axios.get(`${urlBase}crops/list/${code}`)
    .then((response) => {
      return response.data;
    });
}

export const PrincipalService = {
  getCrops
}

```
And in the component file, we call our service from a function and set our list of crops in the state to use the times we need.
```javascript
getAllCropsByUser() {
      PrincipalService.getCrops(user).then(response => {
           //setIsLoading(false)
           this.setState({
              crops: response.crops
           });
        });        
    }
```
Axios also provides a set of shorthand method for performing different HTTP requests. The Methods are:
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Thank you soo much for reading and I hope this information will be helpful for all of you
HTML Crash Course
Tags: html, beginners, showdev, webdev
Published: 2020-11-18 15:08:48

---
title: HTML Crash Course
published: true
date: 2020-11-17 20:22:00 UTC
tags: html, beginner, showdev, webdev
canonical_url: https://web-crunch.com/posts/html-crash-course
---

{% youtube FPxlppwnNeI %}

Welcome to my first beginner crash course. We're starting with the basics here and `HTML` (Hypertext Markup Language) is one of those languages that make the internet possible. What you're reading right now is in fact built with HTML (and some CSS for the aesthetic qualities).

Learning HTML can enable you to build your own custom website or use a no-code tool with a little more understanding of the conventions of the browser, code, and more.

This course is about 1.5 hours long and is targeted at absolute beginners. Some courses out there like to tie all the pieces together into one resource and I think that's a good second step. As you understand HTML more you can start to branch into more languages of the web such as CSS or JavaScript.

I'll be following up with a CSS crash course to complement this one so expect that soon! Additionally, I'll be starting a new theme of beginner content to help appeal to a wider audience.

P.S.

If you're interested in putting both HTML & CSS to real practice I invite you to check out my new upcoming course called [Hello HTML & CSS](https://hellohtmlcss.com). Be sure to review that page and subscribe to get notified when the course launches. I'm working hard behind the scenes to get it ready!
Super Powerful File Organizer
Tags: python, linux, news, showdev
Published: 2020-11-17 19:58:51

Hello all! Today I released `nought` a command-line file organizer. It's super easy to use, and it's VERY customizable.

For example, you could sort all screenshots into folders by year/month/day! Or, you could sort all of your files into folders based on their extension, or size, or location, or many more options!

Contributions/suggestions/questions welcome. **Please let me know what you think!**

You can install it by typing `pip3 install nought` in your terminal. Documentation is available on the [GitHub page](https://github.com/cole-wilson/nought).
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-11-17 19:57:46

---
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 Tuesday, 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. ❤️

### Smell that? It's the React components.

@awnton put together a super enlightening post on the things he considers to be code smells in React components. Definitely worth a read!

{% link https://dev.to/awnton/7-code-smells-in-react-components-5f66 %} 

### Learn by doing

Want to learn more about webpacks? @jasmin has a practical approach: start with the core concepts and then build your own custom webpack plugin:

{% link https://dev.to/jasmin/learning-webpack-concepts-and-creating-your-custom-webpack-plugin-gal %} 

### Readable code is maintainable code!

@joachimzeelmaekers has some trusty rules you can use to improve your code, starting with removing unnecessary code comments... 

{% link https://dev.to/joachimzeelmaekers/clean-up-your-code-by-applying-these-7-rules-35ee %}

### The "API economy" and why it matters 

In this fascinating read, @swyx explains why it's crucial that devs don't to underestimate the importance of the API economy in their own careers, and investigates the upsides and down
{% link https://dev.to/swyx/the-light-and-dark-side-of-the-api-economy-2m2 %}

### Ready, Set... Docker!

Questions about why you should learn more about Docker, even if it's not necessarily used everywhere? Leave it to @flippedcoding!

{% link https://dev.to/flippedcoding/getting-started-with-docker-5gib %}

### "Your own code could be used globally"

Wise words from @mhatvan about the beauty of contributing to the open source ecosystem and why you should start as soon as possible!

{% link https://dev.to/mhatvan/why-you-should-start-contributing-to-open-source-software-right-now-3mp0 %}

### The mindset shift of becoming an engineering manager

Going from software engineer to engineering manager is a _transition_, says @eisabai. Here's how to do it smoothly.


{% link https://dev.to/eisabai/how-to-transition-from-being-a-software-engineer-to-an-engineering-manager-225a %}

_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 Tuesday!_
PolandHeist hack this eth contract and earn some rewards
Published: 2020-11-17 19:49:00

https://i.redd.it/p1ayfsqxmsz51.png

See the contract here
https://etherscan.io/address/0x46CA2bf8188303887d6AF76ddD316AFa233b2ec9

the constructor is given with this data
5746fe8ae2bf9fb24bcdf4972ea78c0211211e23c376461956d46d8d8a6519ba
Git push results in “Authentication Failed”

Published: 2020-11-17 19:37:38

If you enabled two-factor authentication in your Github account you won't be able to push via HTTPS using your accounts password. Instead you need to generate a personal access token. This can be done in the application settings of your Github account. Using this token as your password should allow you to push to your remote repository via HTTPS. Use your username as usual.

https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/

You may also need to update the origin for your repository if set to https:

git remote -v 
git remote remove origin 
git remote add origin git@github.com:user/repo.git
How do I Skip the Default Policy in Vault?
Tags: hashicorp, vault, identity
Published: 2020-11-17 19:34:48

---
title: How do I Skip the Default Policy in Vault?
published: true
description: This will tell you fools how to remove the default policy from a Vault Auth Method with an external Identity Provider.
tags: hashicorp, vault, identity
---


So here's something youze guyze ain't gonna know off the top of your balding pates...

When Vault set up with external identity provider like LDAP/OIDC/JWT/XYZ, if a user logging into Vault does not have a group definition that mapped to a policy, then it will be logging in as “default” policy

Is way to limit even the default policy, so that the domain user cannot even login and see the cubbyhole at all? Unless they are part of a group that have a policy mapped


Well, you can modify the default policy, of course. 

But I suspect that's not gonna help most of you. 

This flag in the API, `token_no_default_policy`, might help, at least for the JWT/OIDC auth method with its various providers: https://www.vaultproject.io/api-docs/auth/jwt#token_no_default_policy

And a quick quack of the ol' DDG shows that it seems they slapped this sucker on most of the other auth methods: 

https://duckduckgo.com/?q=token_no_default_policy+site%3Avaultproject.io&t=h_&ia=web

So, there you go! If it works, you may express your gratitude for my generosity in the comments. 

If it doesn't work, you may express your boundless rage for my imbecility in the comments.
Using Quill editor with Javascript and Rails API backend
Tags: javascript, quill, rails, api
Published: 2020-11-17 19:06:34

Recently, I have been putting together code for my Javascript/Rails portfolio project. During my coding, I realized I wanted to have a rich text editor for my user’s experience. Rails has ActionText built-in, but after some reading, I realized that there was no good way to implement this if I was to use Rails as an API backend.
This is where the Quill rich text editor comes in. I don’t know if I’m the only one that came across issues in implementing this, but I would like to share my journey if in case someone else ran into this issue as well. So after following the quick start documentation provided by Quill, I had to build a form, so my code looked like this:

{% gist https://gist.github.com/ting682/92dbeb9ba5a82de5c3e443f728c2bb8d %}

After building the form, I had to store the contents into the database. There wasn’t as much documentation on the website that showed how this was to be done. I started off by finding some articles like this one that explains that you should store it by taking the quill instance and saving it to the database as shown below

{% gist https://gist.github.com/ting682/92370bd8bd7ff6726995a0150d0c9c78 %}

Quill’s contents are stored in a format called Delta. This means that when storing then retrieving this from the database, you need to then convert the stringified Delta back into an object.
At least for me, the problem with this method was the part where I used JSON.stringify to store the contents into my PostgreSQL database. Once I retrieved it from the database, I needed to use JSON.parse to convert this back to an object like below:

```javascript
quill.setContents(JSON.parse(“{“ops”:[{“insert”:”example text\n”}]}”))
```

The problem was that JSON.parse would not convert it back to an object. If you read the Delta documentation it tells you that you can stringify and then parse the data. That did not happen for me. This became very troublesome. For my project, I not only wanted to submit and retrieve the contents from the database, I also needed to edit the form. After some digging, I realized I could simply store this line of code stringified into the database:

```javascript
Topic.quill.root.innerHTML
```

I would store this into my topic.content JSON object like so:

{% gist https://gist.github.com/ting682/f35998dd623fc64013917f60686b872f %}

By doing this, I was finally able to store the raw HTML into the database and retrieve it! Also, I found out for the edit form, all I needed to do was pre-populate the editor form after retrieving it from the database

```javascript
document.getElementsByClassName(‘ql-editor’)[0].innerHTML = topic.content
```

This solved a lot of headaches for me and I hope this was helpful. Happy coding!
Full Python Course For Beginners [FREE] 🎉 🆕
Tags: python, programming, career, tutorial
Published: 2020-11-17 19:06:25

Hi Welcome to Amigoscode. Intuit QuickBooks and I joined forces to help you kick start your career in tech. 

In this python tutorial for beginners you will learn python programming language. This is your change to kick off your career in technology. Learn python today and change your career.

In this tutorial you will learn how to code and understand what programming is all about.

Python is a great language for beginners as its not difficult to learn. In this course I will teach you the basics of Python and at the end you will build a Python program that will ask you a series of questions in text and voice and then will generate a CV that you can use to show case your portfolio.

There are lots of career opportunities in tech and this is the right time.

I am super excited to help kick start your career in tech.

**Watch video here**
{% youtube mJEpimi_tFo %}

# Table Of Contents
* Intro
* Quick Word
* What is Python
* Installing Python
* Text Editors
* Installing VsCode
* Creating Python Project
* Your First Python Program
* Variables
* Strings
* Working with Numbers
* Python Booleans
* Python If Statements
* Lists
* Loops
* While Loops
* Functions
* Built In Functions
* Python Classes
* Classes Behaviours and Objects
* Project
* Create Documents
* Writing Paragraphs
* Adding Pictures
* Heading and Sections
* Experiences
* More Experiences
* Exercise
* Exercise Solution
* Text To Speech
* Requirements.txt
* Lets Build a Portfolio
* Github
* Thank You

# Useful Links

► Join Q&A -   https://forms.gle/PgrKRKafjceygy7r7
► Join Private Facebook Group - https://www.facebook.com/groups/456035171490753/
► Join Discord (python-quickbooks-youtube-course) - https://bit.ly/2wL029v 
► Courses Available for free here - https://amigoscode.com/courses
My Open-Source Beginnings with Mozilla
Tags: developer, mozilla, opensource
Published: 2020-11-17 19:01:24

**“There are years that ask questions and years that answer.”**

I am fond of asking questions and used to ask many questions to myself as well as other people.

**My questions mostly revolves around :**

`How could I start contributing to open-source ?`

`I know these languages, are these enough for me ?`

`Am I ready to create hype in open-source ?`

`How to choose the project on GitHub that sounds interesting to me (because I don’t know where my interest actually lies) ?`

`What are the beginner-friendly communities?`

Whenever I used to meet new people on meetups, hackathon or conferences, my first question always revolve around these only. Sometimes I felt how stupid questions am asking, a feeling of inferiority, fear and hesitation got developed within me. I used to keep myself underrated. Moreover, once I got so frustrated, I just chucked my laptop.

##Happened with you, also?

We might think sometimes `I am unable to understand my own code, how am I supposed to read and then make changes to someone else’s code ?` Until last year, the same thing goes in my mind, too. Reading and understanding someone’s else code and writing your own code on top of that can be a daunting task, but with the right resources and guidelines, it is not as difficult as we might think.

Before stepping ahead into open-source, we should atleast know any programming language and have working knowledge of GitHub. Once you start making efforts, be more mindful to your activities, the more appreciation and results could be discovered. I don’t want to tire you people by telling the definition of open-source and all. Go-ahead and search by yourself 🙂

The first open-source project with which I started the contribution is [Debugger](https://github.com/firefox-devtools/debugger) from [Firefox Devtools](https://github.com/firefox-devtools)🔥🦊🛠

A brief explanation about project : [Debugger](https://github.com/firefox-devtools/debugger) is a hackable debugger for modern times, built from the ground up using `React` and `Redux`. It is designed to be approachable, yet powerful. And it is engineered to be predictable, understandable, and testable. Mozilla created this debugger for use in the Firefox Developer tools.

There’s ton of things that I like about the Mozilla Community. Being a beginner, we need proper guidance and help from the community on how to get involved and perform certain tasks, that could be best extracted from Mozilla. I felt the people in this community are not only contributing to the development of their own but others too.

For more detailed Information, visit the [site](https://github.com/firefox-devtools)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ro7r02jd5nv26n1gjc1s.png)
<center><sub>Debugger Project</sub></center><br/>

If you need any help or want to ask any question, shoot mail at **soniasingla.1812@gmail.com** or [twitter](https://twitter.com/soniasinglas).

---
Best Wishes and Happy Coding 😉
---
The CSS Series - Part 4: Properties
Tags: css, beginners, html, 100daysofcode
Published: 2020-11-17 18:59:47

## Introduction
This tutorial provides the definition of the CSS property and provides various examples and resources to find out more.

## Prerequisites
A basic understanding of HTML

##Understanding CSS Properties
CSS properties define a design or functionality aspect that will apply to the HTML element defined by a [CSS selector](https://dev.to/vetswhocode/the-css-series-part-3-selectors-49b8). Every CSS property has a list of predefined CSS property values that apply to it. In the following CSS syntax, the selector is used to define an HTML element to which the { property: property value } pair, or declaration, applies.  

```css
selector {
  property: property value;
}
```
In the below example, we have placed div in the selector position, meaning the { property: property value } pairs, or declarations, that follow apply to all div elements within the linked HTML file. The CSS property here is "background," and its property value of "red" will change the background to the color red. 

```css
div {
 background: red
}
```

In the above example, we've assigned a background color of red to all div elements within the linked HTML file. 

## Harnessing the Power of CSS Properties
CSS properties can change almost every design aspect you can imagine. You are only limited by your knowledge of what's possible, so it is important to familiarize yourself with the CSS properties available for your use.

Some of the ways CSS properties allow you to change the HTML design:
- Coloration
- Shape and size
- Font manipulation
- Orientation (left, centered, right, custom)
- Movement
- Spacing between HTML elements
- Opacity
- And countless other ways.

## Exploring CSS Properties

The following [link](https://www.w3schools.com/cssref/) leads to a list of CSS properties with brief descriptions. It's important to familiarize yourself with this list so you know what's available to you.

## Conclusion
You just learned about CSS Properties and gained some familiarity with the ways in which they can change HTML elements. Continue to the next tutorial to learn about the CSS Box Model.
Everybody Struggles
Tags: opensource, internships, mozilla, outreachy
Published: 2020-11-17 18:56:50

In this blog post, I am going to share my experience as an [Outreachy](https://www.outreachy.org/) Intern with [Mozilla](https://www.mozilla.org/en-US/) 🦊 till now, the time I got stuck(current or past struggles) and how am working to overcome to my struggles. These kind of **confessions** are hard to write but I tried to explain everything in the simple way.

In the first three weeks, I along with [Dennis](https://schub.wtf/), worked on the planning of working on the actual reporter prototype, and currently, working on the implementation of prototype. As I have never worked with web-extensions before, my mentor shared some good [resources](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) to help me getting started with. I made two simple [web-extensions](https://github.com/soniasingla) and after that, started working on the prototype implementation.

Working on this project has been so much fun and I have had a lot to learn every single day. Without bumps, cracks and obstacles, there is no perfect journey but in the end, it gets you somewhere 😈

Digging into the task, whenever i write a piece of code, i immediately delete it. It sounds to be crazy but it is easy to assume that you might be mistaking. `Did I misunderstand how this or that works? Maybe I completely misunderstood the task, I am not supposed to?` Sometimes, I also even felt that I’m annoying my mentor by asking the same questions again and again 😕. Personally, I am little hesitant to reach out for help.

Always remember, there is nothing annoying about asking questions and the earliest, we share our problems with mentor and the community, the quickest we will have an idea about what we were doing wrong, or we will have another approach to try.

I have been contributing in the open-source from past few months and I have never seen such patience in the mentor(asking same questions again and again mostly annoys other person). [Dennis](https://schub.wtf/), explained everything very well in the most easiest and systematic way, even after asking same repeated questions. This is the Christmas time and my mentor never took more than an hour to reply. In the second week, we had team meeting where [Dennis](https://schub.wtf/) introduced me with other mentors, testing team, and other team members of [webcompat](https://webcompat.com/). I am glad to meet them all 🤓

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x1y6cxbvu8uyiyqc4dyg.jpg)
<center><sub>Yeyyeye, full speed ahead 🐣</sub></center>

---
There is no perfect path or journey, and it is fine to get stuck 😉
---