teleren/devto huggingface dataset:
How to present Axios data as list
Tags: react, javascript, api
Published: 2022-05-19 01:27:51

I have an API request from my backend to ReactJS frontend. The results is presented in JSON format. When the user press the "submit" button, I want the JSON data only for a specific key of the array of each object to presented to the user in nice list format.

- First code snippet is the JSON code

- Second code is my AXIOS code

- Third code is my ReactJS frontend code with the button and etc.

- The picture is how it looks when the user press the button. I need it in list format. Meaning each entry on a new line. Currently it jumbos everything to one list

Any thoughts?


```
[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  }
```


```
const App = () =>{
  const [buttonTitle, setButtonTitle] = useState("User Data Prior To Change")

    const getAPI = ()=>{
      const loopList = []
      const url = "https://jsonplaceholder.typicode.com"

      axios.get(`${url}/posts`)
      .then((response)=>{
            const myValue = response.data
             myValue.forEach(myValueValues => {loopList.push(myValueValues['title'])})
             setButtonTitle(loopList)
          })
        .catch(error => console.error(`Error: ${error}`))
      }

```


```
        <h1>Click button to see list of user</h1>
        <button onClick={getAPI}>Button to press to see all info in clean format
</button>
        <ul>
          <li>{buttonTitle}</li>
        </ul>

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pb755rf163c8jiwrdjk4.png)
Interested in getting deeper into Web Components?
Tags: webcomponents, webdev, javascript, forem
Published: 2022-05-19 14:06:26

I want to highlight the launch of [The Web Components Community](https://community.webcomponents.dev/)!

This is a new Forem dedicated to anybody who wants to get deeper into the domain of Web Components. It is founded and operated by people who care deeply about Web Components and are invested in the success of this technology. It will provide a degree of depth you are not going to find elsewhere, including DEV.

{% embed https://community.webcomponents.dev %}

If you have a curiosity that Web Components _may_ be the Future of Web interfaces, this is a space you should check out.

### 👉 [Join the Web Components Community now](https://community.webcomponents.dev//enter).

Happy Web Component Coding! 🎉

***

_One last thing. You’ll notice **"Sign up with Forem"** as an option on these Forems. This is a service we now offer to most seamlessly navigate the ecosystem and manage your identity. We want you to be able to **bring your full self without having to bring your full data**, so making this distributed ecosystem as straightforward as possible in the long run is really important. Create a [Forem account](https://account.forem.com/) and connect it with your DEV account [via your settings](https://dev.to/settings)._ 🙂
Accessibility (A11y) why is it so important?🧵
Tags: a11y, discuss, webdev, beginners
Published: 2022-05-19 14:03:02

**What is "a11y" 🤔?**

A11y - ACCESSIBILITY


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5rq75bd7q0uhz1thfqx.jpg)

**Why do we write "a11y"?**

Because between the letters "a" and "y" there are 11 other letters :)

**What is network accessibility?**

Surely you've experienced the annoyance of a slow page loading, unreadable font, bad and strange navigation, blurry and overlapping colors, a page that looks bad and doesn't work on a mobile device.

These problems may be a minor inconvenience for us, but for people with disabilities, they may UNTILALLY limit the use of the Internet.

Accessibility means that websites and web applications should use tools and technologies that facilitate the understanding, navigation and interaction of a disabled person through the website or application.

Such a procedure may seem difficult and unnecessary at first, but nearly 15% of people around the world have some kind of disability (about 1 billion people).

Taking care of the accessibility of your website or application takes on a different meaning!

The problem is so big that even 98% of the best sites in the world do not offer full accessibility!

**Types of disabilities to keep in mind when designing a fully accessible website/app:**

- Visual disability
- Hearing impairment
- Disorders of the central and peripheral nervous system
- Cognitive impairment
- Motor disability

**The main assumption of A11 is that people with disabilities should have the same access to information as people without.**

**ACCESSIBILITY STANDARDS**

Level A If the page is not adapted to this level, it will be unavailable.

Level AA Increased level of accessibility for users, removes the greatest barriers and difficulties in accessibility for the user.

Leve AAA Highest level of availability desired, but not quite necessary.

**EXAMPLES OF ACCESSIBILITY**

- Alternative texts for images.
- Keyboard functionality (Using the mouse may be difficult in some cases).
- Audio transcription.

```
Happy Coding!☕​🌱
```
What are your favorite features of HTML5?
Tags: discuss, anonymous, html
Published: 2022-05-19 13:42:35

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._

***

I'm pretty new to coding, and I want to know how HTML5 is different from past versions of HTML. I feel like getting an understanding of those changes will help me become a better developer, and gain a larger understanding of how to use this specific markup language.
The small fraction of your team will do most of the work
Tags: teamlead, humanresource, highperformanceteam, projectmanagement
Published: 2022-05-19 13:32:04

###### I am always posting provoking post on my Linkedin, and I have decided to replicate those here. [Let's socialize!](https://www.linkedin.com/in/alexsandro-souza-dev)

When a company grows, competence grows linearly, and incompetence grows exponentially. That is what Price's Law suggests.

Price's Law (also known as Price's Square Root Law) states that 50% of all work will be done by the square root of the total number of people who take part in the work.

Price's Law is merely an idea/theory and not a scientific fact. It is like Pareto's Principle and is more of a rule of thumb. The underlying concept is that a small fraction of your team will do most of your work. 

With this concept in mind, we can do proactive things to identify, recognize and try to increase this small minority.

<img src="https://media-exp1.licdn.com/dms/image/C5622AQH52jTbAVusXA/feedshare-shrink_800/0/1649603642296?e=1655942400&v=beta&t=8RLYPolNr7YDSF_LXVyLfWlIf3J-iRdxCwK394XTAKw">
JS Fundamentals - Break VS Continue
Tags: javascript, beginners, programming, webdev
Published: 2022-05-19 13:29:18

Break and Continue are two methods used in Javascript to determine when/where a loop should end or skip an element.

##BREAK
Break is used in a loop where we want the loop to cease running. This is most commonly seen in switch statements where a break is usually placed at the end of the final case but it can also be used in other loops such as for loops as well. Below is an example of a break being used in a for loop.
`for(let i = 0; i <= 10; i++){
   if( i ===7)
   console.log('lucky seven');
    break;
      }`
In the above block of code, when the iteration reaches the number 7, "lucky seven" is logged to the console and the loop ends right there.

##CONTINUE
Continue is different to break in the sense that it makes the loop skip/jump at the point where a given condition is met. Below is an example of continue used in a for loop.
`for(let i = 0; i <= 10; i++){
    if(i%2 = 0) continue;
   console.log(i)
}`
The output of the above block of code will be the odd numbers (1,3,5,7 and 9). This is because *continue* tells the loop to skip every iteration where *i* is an even number.

###Summary
1. Break terminates the whole loop wherever it is placed or a condition is met.
2. Continue skips any iteration where a given condition is met in a loop.
Looking for feedback for early stage software architecture tool
Tags: showdev, architecture, dotnet, csharp
Published: 2022-05-19 13:19:07

Hey everyone! I'm a little new to this place (but it seems fantastic so far) so this is my first time posting. A friend and I are currently working on a C4 based software architecture tool, [Carbide](https://carbide.dev). We wanted to take a slightly different approach to diagramming and modelling using C4. We've recently released an alpha version and would love to hear some thoughts and opinions. We would love for you to try it out and tell us what you think.

https://carbide.dev

Cheers,
Mike
Happy Global Accessibility Awareness Day!
Tags: meta, a11y
Published: 2022-05-19 13:18:13

---
title: Happy Global Accessibility Awareness Day!
published: true
description: In the spirit of raising awareness for this celebration dedicated to raising awareness of digital access and inclusion, here are some of our favorite past a11y posts on DEV.
tags: meta, a11y, accessibility
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxllm5v71qzvqhj8vv4c.png
---

Today, (May 19, 2022) is the 11th annual [Global Accessibility Awareness Day](https://accessibility.day/) 🌐

In the spirit of raising awareness for this celebration dedicated to raising awareness of digital access and inclusion, here are some of our favorite past a11y posts on DEV. 

_Want to join the conversation? Share your accessibility-related thoughts, insights, and questions [using this post template](https://dev.to/new/a11y)._

> **Anyone who shares an a11y post on DEV between now and Thursday, May 27, 2022 @ 11:59 PM UTC will get a special limited-edition badge!**

## Not sure where to start? Start here

This primer on accessibility basics from @alenanik is explained simply and clearly.

{% embed https://dev.to/alenanik/accessibility-a-gentle-introduction-1398 %}

## A thorough digital accessibility ~~listicle~~ handbook

101 high-quality tips, no filler! Thanks to @inhuofficial for compiling this truly impressive resource 🤯

{% embed https://dev.to/inhuofficial/101-digital-accessibility-tips-and-tricks-4728 %}

## Auditing existing features for accessibility

In this informative post, @abbeyperini documents the process of making their blog’s dark mode toggle feature screen reader-accessible. Check out the whole series!

{% embed https://dev.to/abbeyperini/an-accessible-dark-mode-toggle-in-react-aop %}

## Improving the accessibility of our own code

A little over a year ago Forem introduced End to End (E2E) testing to the app using Cypress. Here are Frontend Engineer @s_aitchison’s takeaways from the process:

{% embed https://dev.to/devteam/what-cypress-e2e-testing-has-taught-us-about-our-code-5aco %}

## That “ugly” outline is actually important!

A quick tip on aesthetics and accessibility from @colabottles.

{% embed https://dev.to/colabottles/stop-removing-focus-2o7b %}

## An examination of the problems of ARIA-first development

The first rule of ARIA: “don’t use ARIA.” Confused? @steady5063 will explain:

{% embed https://dev.to/steady5063/a-tangled-web-of-aria-50nk %}

Happy GAAD, everyone! 💙🌐

Did we skip one of your faves? Share an a11y-related post that has helped you out in the comments ⤵️  And feel free to share the posts you’ve written, too!
Many-Worlds Interpretation
Tags: adventofcode, algorithms, computerscience, programming
Published: 2022-05-19 13:14:02

## [Advent of Code 2019 Day 18](https://adventofcode.com/2019/day/18)

## [Try the simulator using my puzzle input!](https://aocmanyworldsinterpretation.rmion.repl.co/)
![Animation of tunnel game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzjc2h1lpvkta821kv58.gif)

## Task: Solve for X where...
```
X = the number of steps in the shortest path that collects all of the keys
```

## Example input
```
#########
#b.A.@.a#
#########
```
It represents:
- A map of tunnels
- `@` is the entrance
- `.`s are open spaces
- `#`s are walls
- `A-Z` are doors
- `a-z` are keys that unlock the corresponding uppercase door

## Part 1
1. I can't solve it manually or algorithmically
2. But I can make it a game!

### I can't solve it manually or algorithmically
- Perhaps if my puzzle input were the same scope as the examples: less than 10 keys and doors within a 20x20 area
- But my puzzle input is a 40x40 area with the full alphabet of keys and doors

I'm not motivated enough to attempt to identify even a single possible way to solve the puzzle...
...let alone the shortest path!

And I'm still not educated on pathfinding algorithms to write one capable of solving this puzzle.

### But I can make it a game!
- And that's exactly what I did!
- To make it even harder, but fit on a screen without requiring scrolling, I limited the field of vision to roughy 6 spaces in all directions from the player

The result is a masochistic game that I challenge you to play!

[Try the simulator using my puzzle input!](https://aocmanyworldsinterpretation.rmion.repl.co/)
![Animation of tunnel game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzjc2h1lpvkta821kv58.gif)

## Short and sweet
- I couldn't solve Part 1, so I didn't even see Part 2
- But I repurposed my code from an earlier Intcode computer simulator to make today's puzzle into a game
Different ways to create an Object in Javascript
Tags: javascript
Published: 2022-05-19 13:00:30

There are several ways to create an object in Javascript. Let's go through one by one. 

## Object literal

Often used to store one occurrence of data

```javascript
const person = {
  name: "John",
  age: 50,
  birthday() {
    this.age++
  }
}
person.birthday() // person.age === 51
```

## Constructor

Often used when you need to create multiple instance of an object, each with their own data that other instance of the class cannot affect. The `new` operator must be used before invoking the constructor or the global object will be mutated. 

```javascript
function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.birthday = function() {
  this.age++
}
const person1 = new Person("John", 50)
const person2 = new Person("Sally", 20)
person1.birthday() // person1.age === 51
person2.birthday() // person2.age === 21
```

## Factory function

Creates a new object similar to a constructor, but can store private data using a closure. There is also no need to use new before invoking the function or the this keyword. Factory functions usually discard the idea of prototypes and keep all properties and methods as own properties of the object.

```javascript
const createPerson = (name, age) => {
  const birthday = () => person.age++
  const person = { name, age, birthday }
  return person
}
const person = createPerson("John", 50)
person.birthday() // person.age === 51
```

## Object.create()

Sets the prototype of the newly created object

```javascript
const personProto = {
  birthday() {
    this.age++
  }
}
const person = Object.create(personProto)
person.age = 50
person.birthday() // person.age === 51
```

A second argument can also be supplied to Object.create() which acts as a descriptor for the new properties to be defined.

```javascript
Object.create(personProto, {
  age: {
    value: 50,
    writable: true,
    enumerable: true
  }
})
```

## Conclusion 

- Prototypes are objects that other objects inherit properties and methods from.
- Factory functions offer private properties and methods through a closure but increase memory usage as a tradeoff, while classes do not have private properties or methods but reduce memory impact by reusing a single prototype object.
A new tool for recon Office365 users
Tags: azure, pentest, go, security
Published: 2022-05-19 12:59:52

A few days ago, I created a tool called [o365discover](https://github.com/owlinux1000/o365discover) to reconnaissance Office 365 users for **penetration testing**. Using this tool, you can easily check whether a lot of users exist or not on Office 365. Off course, I know there are some similar and famous tools like [o365creeper](https://github.com/LMGsec/o365creeper). However, most of these tools are slow because they does not support parallel execution. Therefore, I have implemented paralell execution by goroutine of golang. However, I'm not familiar with golang. Please feel free to advise me!

Next, It's time to explain how to use. However, the way to use is very simple. If the given username does not exist, this tool does not display any result. This tool displays only valid usernames.
```
$ o365discover -u valid@example.com
valid@example.com
$ o365discover -u invalid@example.com # nothing
$ o365discover -f emails.txt
```

Finally, You can download the binary from this URL
https://github.com/owlinux1000/o365discover/releases/tag/v1.0.1

Also you can install with `go` command.
`go install github.com/owlinux1000/o365discover@latest`

Please try it!

## Note
This tool is offered with no warranty and is to be used at your own risk and discretion.
🎉 After 2 years I finally finished my portfolio🎉
Tags: javascript, react, career, showdev
Published: 2022-05-19 12:59:03

Hi guys!👋 How are you? 
My name is **Nicolás Biondini**, I’m 23 and I'm a Front-End Developer. 

I've always been **passionate about technology** and tech companies, that's why I started to study business models, finance, and marketing but I knew I still needed the third leg of the table: **learn how to code**. It was frustrating to understand things and try to contribute to the real world but be limited because **you don't understand how tech works**.

After finishing my third year of university, I decided (after much thought) to drop Economics and start learning how to code. All that happened just at the beginning of 2020 so, as you know, pandemic times. I stayed home and started learning to code **10 hours per day from Monday to Friday**.

I started with a Python book, but after I finished it I felt lost. Then I found a **web dev roadmap** and started with Harvard’s CS50 course, an HTML and CSS book, Free Code Camp certifications, and so on.

And here I am today. After all this path I’m confident in myself, with all the **energy, hunger, and ambition** to make things and to continue **learning and improving** every day.

And after two years **I finally finished my portfolio!**
Two weeks ago I just finished my project **Beat** (I'm going to talk about it in the next few days) and I felt ready to start looking for a job.

I know, **it's going to be difficult**, it's a long trip, but I trust myself and I'm patient so we will see 😅.

Wish me luck and if you know about some **Frontend developer positions available** let me know. If you have **any advice or opinion** about my portfolio/projects **let me know too**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf7jmrcyubqf7w1b6x3f.gif)

The portfolio was made it with Next js and Framer Motion.

Here is the link to my portfolio: <a href="https://nicolasbiondini.com/" target="_blank">nicolasbiondini.com</a>.

Thanks to this community for all the support over the years, dev really is a beautiful place full of **wonderful people**.
I promise to start writing much more here.

See you soon! 😊👋
Full Backend Apps on AWS Lambda?
Tags: discuss
Published: 2022-05-19 12:45:46

---
title: Full Backend Apps on AWS Lambda?
published: true
description: 
tags: discuss
//cover_image: https://direct_url_to_image.jpg
---

Is anyone hosting a full CRUD type app with routing and persisting as an AWS Lambda? 

And if so, how is that going?

Since you can run a container as a lambda, and you get built in scaling up and down it seems like it might be a good fit.
AFSP.org | Made with Gatsby JS
Published: 2022-05-19 11:55:22

![AFSP.org | Made with Javascript | Gatsby JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1652798415/large_american_foundation_for_suicide_prevention_072d8faf93.png "AFSP.org | Made with Javascript | Gatsby JS")


### Learn about suicide, how you can help prevent it, and resources for those affected, from the American Foundation for Suicide Prevention.

> Learn about suicide, how you can help prevent it, and resources for those affected, from the American Foundation for Suicide Prevention. Our mission: save lives and bring hope to those affected by suicide

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [AFSP.org on Twitter](https://twitter.com/withjavascript/status/1527255065236471810?s=20&t=fiSdllr4zUncHum4y3Aqbw)
 |
| Medium | [AFSP.org on Medium](https://medium.com/@madewithjavascript/afsp-org-made-with-gatsby-js-b6560c4ab1cb)
 |
| Facebook | [AFSP.org on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0zooo5oxKaJ5qnk5RzPVaZNJF4GUBwtYtA1bZmZ8nTfgg3fb6v6Xh91LjXDyCozFpl)
 |
| Tumblr | [AFSP.org on Tumblr](https://madewithjavascript.tumblr.com/post/684679297387085824/afsporg-made-with-gatsby-js-learn-about)
 |
| LinkedIn | [AFSP.org on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6933020920622043136)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
    
 - [Made with Gatsby JS](https://madewithjavascript.club/categories/gatsby-js)
    

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
10 Years of Elixir
Tags: elixir, beam
Published: 2022-05-19 11:32:13

Did you know that Elixir turns 10 years old this Tuesday, May 24th, 2022?

And that me and Gustavo Oliveira, from ELX PRO, are organizing an event to celebrate the birthday of our favorite programming language?

Didn't know? Then click https://bit.ly/10YearsOfElixir and find out how to attend!

It will be at 13:00 (EST) and should last about an hour. If all goes well, we will have testimonials from people all over the world!

See you there!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuz47qjr1bs8t7u2w0p4.jpeg)