teleren/devto huggingface dataset:
How to get information of an Element to the console on click in JS
Tags: javascript, beginners, tutorial, productivity
Published: 2022-07-09 20:24:08


**`document.addEventListener("click", (e) => console.log(e.target))`**



So let me begin with this: I am by no means an expert on javaScript(_not yet anyway_), this is simply a neat little trick I learned and found useful, so if I don't make something clear or don't use the right verbiage I apologize, I'm still learning and this explanation here is to help me better understand how everything works and hopefully you. Now that being said, I'll try and explain what this code is doing. 

First, "document" is simply setting the scope of the command, basically within your whole document you want the command to happen.
 
Next, we use "addEventListener" which is one of the commands javaScript uses to interact with events in the real world, it "listens" for the event that you specify and runs the code you set in response. 

The next part within the parentheses is "click" in quotations, here you are setting what event your addEventListener function is listening for (i.e. "submit","keydown","mouseover", ect.) followed by a "," which separates one parameter from another.
 
Next, we add an anonymous function with "e" as a variable within parentheses, normally these could be empty if you just want to run your code on click or whatever you set for your event but we need to reference the event variable later, this function variable could be named anything we want "e" is just short for event in this case. 

Then, we use arrow function syntax to target the last bit of the code, which is console.log(), console.log simply outputs whatever you specify in the parentheses to the console (usually a variable or a string) this is very useful for debugging. 

Finally, in console.log we have "e.target" which is the variable we just set in the anonymous function followed by "target" using dot notation, which is just saying to target whatever event is pointing to when the event is triggered (whatever you click on). 

Lastly, so what this code is saying is "Within the scope of my document, listen for a click and when that click is triggered, whatever was clicked on we want its information printed to the console". 

I have found this pretty useful for locating the spot I want something to show up on my webpage within the HTML code without having to scroll through each element until it highlights or for just finding an ID of an element without having to search for it.
 
I hope this helps!
AWS - Identity and Access Management Basics
Tags: aws, todayilearned, cloudskills, cloud
Published: 2022-07-09 20:08:22

Considering that the root user of the account and the trusted AWS account are the same and have full access.

However, if you need to enable the group, team, or organization with restricted access, one must use the IAM AWS service. Giving the only or least amount of permission necessary to complete the mission or accomplish the task is the advised course of action.

If only one user or identity is associated with an AWS account, and they compromised the password, the malfunction of the account as a whole result. For example, We cannot restrict the permission of the root user of the AWS account.

IAM must provide three distinct identity categories.
- IAM User - Applications and users require access to AWS services.
- IAM group -  A group of related users who needs access to AWS services.
- IAM roles - AWS services or external access to control use IAM roles. Grant your account access to AWS services.

Roles are mostly used when there is uncertainty. As an illustration, use a Simple Storage bucket for all EC2 instances.


IAM aws service offers three main jobs.
1. An identity provider(IDP) let you create, modify, and delete your identity.
2. Authenticate - IAM authenticate the user who login. Prove who you claim to be.
3. Authorise - Allow or deny access to the AWS service.

With all, to use this AWS service there is no cost associated with it.

Thankyou [adriancantrill](https://twitter.com/adriancantrill)

I like this blog from [spacelift.io](https://spacelift.io/blog/aws-iam-roles) on the same concept, I hope you would also like it
“this” keyword in javascript
Tags: webdev, javascript, node, beginners
Published: 2022-07-09 20:04:50

Understanding about “this” keyword in javascript saves you a lot of time debugging the code later. So, let’s start with understanding what’s a global  context.

## What is this global context?

The global context refers to the global object that contains all the default functions and fields. In browser the global context is the window object. By default the “this” keyword refers to the global object when used outside of the function.

## Function Invocation vs Function definition

Function invocation means the instant when the function is called with arguments.`Test()`

Function definition means creating a function and assigning it to a variable but not calling it. A function which is not assigned to a variable is also a definition but we can only invoke it later if it’s assigned to a variable. There is a way to invoke a function immediately when defining it, but I won’t confuse you with those details now. This is `const Test = function(){}` function definition.

## this inside a function

Inside a function the this keyword is used to refer to the caller of the function. Let’s assume that an object has a key “data” and a function definition as a value. If the data function is called from the object, then this keyword will point to this object inside the data function.
`obj.data()` here the this keyword will refer to obj. However, when the same data function is referenced by another variable and invoked like this `var t = obj.data; 
t()`. Then the value of this will be the window object or the global context inside the data function.
The above example is the common way of passing callbacks and major source for bugs if the callback has this keyword in it.

This is my first post and I don’t want to go on ranting about this anymore. Hope someone finds this useful 😉.
Getting Started with AWS Sagemaker
Published: 2022-07-09 18:09:09

**What is Sagemaker**
Amazon SageMaker is a cloud machine-learning platform enables developers to create, train, and deploy machine-learning models in the cloud. SageMaker also enables developers to deploy ML models on embedded systems and edge-devices.

To get a free account of amazon SagaMaker visit 
https://aws.amazon.com/pm/sagemaker

Get your self registered
Fill out the required details and you are good to go. After getting logged in you will be having a view something like this 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry4h2us72s7yv0h4f14x.png)
 
On the top Left corner you will find the services Tab from that tab you can select any service you need or you want to work on 
but today we are completely focused on Machine Learning so we fill be focusing that. After clicking the Services Tab you will be having a view something like this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j88apnokj5rtkiw4x1dt.png)

Scroll down and find Machine Learning after Selecting Machine Learning you are again Left with many choices scroll down and find Amazon SageMaker.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g82f0vghk4yjs25s787q.png)

Now Click on Amazon SageMaker
After that you will be having a navigation Panel on your left from there select Studio
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqhmhxhnlw09g8ys1rd0.png)

Now you will Observe the a button Launch SageMaker Studio click on that now you are in SageMaker Control Panel Define your Role and click on Launch app Button

Boom now you are having your own Cloud Hosted Jupiter Notebook where you can Train, Test and deploy your Model, you can label your data and can do much more just you have to figure it out 

Finally you will be observing something like this 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk22148gmcp118hkg92y.png)
If you have a hard time to say something, let maw say it.
Tags: pwa, productivity, showdev
Published: 2022-07-09 19:57:38

Maw (แมว) in Thai means cats, and they are special organism. When you did anything stupid, just blame the cat and you will become innocent. When you are filming a boring video for your Youtube channel, just add a cat, and it will become viral.

So when you want to say something difficult, let's use [mawsay](https://mawsay.littlepawcraft.com/). Like cowsay, but maw.

> Credit: the cat ascii art is from https://ascii.co.uk/art/cats

![mawsay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p32ajjdc36ggwpxkpe3n.png)

1. Edit your text.
2. Click here capture the image and share it to your Facebook.

![how to](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90u0kngc3ombror8rmlb.png)
How I am bringing OSS contributing to Twitch, taking everyone with me and more...
Tags: opensource, programming, discuss
Published: 2022-07-09 19:56:04

## Origin Story
A little over a year ago I started a community ([OSRG](osrg.t3.gg)) that I wanted to build into a new way of approaching Open Source Contributing, emphasizing on gamification, crowdsourcing & mob programming as some main pillars. Very quickly we realized the power of this when we knocked out a MONSTER of a repository in 30 days converting it from Enzyme to React Testing Library, not long after I burned out from many different things. 
{% embed https://twitter.com/JacobMGEvans/status/1350089186175553537 %}

## What now?
Well during that time something I realized was a platform & system needed to be built for all this! Great! We also needed a community! We have one! Cool we are chugging along, people starting wondering "Why gamification? It is so much effort, who cares!?" Valid questions, well now I have a [Twitch channel](https://www.twitch.tv/jacobmgevans) where I am merging my Nerddoms!! The plans are to take the channel building on the community, introduce more people to my passion for games like Dungeons & Dragons, coding, Open Source Contributing and combine them in the channel. Ideas like having streams with panels of people mob programming with me live on Twitch w/ people helping in chat, interacting on Discord, and even building the platform together in the open that will change how people approach coding!
Git & GitHub Tutorial For Beginners
Tags: github, git, vscode, beginners
Published: 2022-07-09 19:17:47

In this course, I’ll walk you step-by-step about Git and GitHub.

The complete playlist of Git & GitHub Tutorial For Beginners gives you basic setup knowledge to advance usage of the tool.

{% embed https://www.youtube.com/playlist?list=PL3IwAics3J0eGFoJzD38ZFEh2mnKRXbbr %}

**We will be covering the following topics:**

1. What is Git | How to download Git | How to install Git - https://www.youtube.com/watch?v=xSsqGDjj9uM
2. How to check Git Version | How to set Git Username and Email - https://youtu.be/8Y8bzAdq9zk
3. How to initialize Git repository - https://youtu.be/gyMUvcZyUUQ
4. How to checkout code - https://youtu.be/SgTcNle4uBs
5. How to check git log - https://youtu.be/d5NV41qOeCU
6. How to check git diff - https://youtu.be/GSIPNtUlkdU
7. How to remove the file from Git - https://youtu.be/ctppTTN_o-U
8. How to add .gitignore file - https://youtu.be/bywxx6eqz8g
9. How to create git branch and merge code - https://youtu.be/CkiWWz-2NQg
10. How to delete a git branch - https://youtu.be/u3yuQyH1m5U
11. Introduction to GitHub  - https://youtu.be/dcutaVfIWCc
12. Push an existing repository from the command line to GitHub - https://youtu.be/w1eKbfvAu0I
13. Git Fetch and Git Pull Command - https://youtu.be/i78nYE9NAyk
14. How to clone Git Repository - https://youtu.be/hq1CNUioSA8

👍 You can follow my content here as well -

[Website](https://www.codewithmmak.com/)
[GitHub](https://github.com/codewithmmak)
[LinkedIn](https://www.linkedin.com/company/codewithmmak)
[Twitter](https://twitter.com/codewithmmak/)
[Facebook](https://www.facebook.com/codewithmmak)
[Instagram](https://www.instagram.com/codewithmmak/)

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

[Buy me a coffee](https://www.buymeacoffee.com/codewithmmak)

You can also support me by liking and sharing this content.

Thanks for reading!
State Management in React
Published: 2022-09-19 15:09:30

---
title: State Management in React
published: true
date: 2022-07-09 19:16:03 UTC
tags: 
canonical_url: https://chrisdevcode.hashnode.dev/state-management-in-react
---

A state is the current data passed in React components. State management in React enables you to dynamically update data in Components.

This post will take you through creating an initial state and an event to trigger a state update in Reactjs.

## Prerequisites:

- NodeJS Installed
- Knowledge of React

## Source Code and Demo

[GitHub Repo Link](https://github.com/achingachris/state-management-react-demo)

**Creating A New React App** :

```
# create a new react app
npx create-react-app state-management-demo
# move into the new app's directory
cd state management-demo
# start the app to see if everything is okay
npm start

```

For the Demo, clean the `App.js` to have the following:

```
const App = () => {
  return <div>My React Application</div>
}

export default App

```

We will create a simple counter button to demonstrate state management.

At the top of the `App.js` file, import `useState`:

```
import { useState } from 'react'

```

Inside the `App()` function, we will set our default state, `0`. Then once a user clicks a button, the number increases by `1` per click.

```
const [count, setCount] = useState(0)

```

We will add a function, that will fire up when the button is clicked:

```
  const handleClick = () => {
    setCount((count) => {
      return count + 1
    })
  }

```

Update the return function to the following:

```
  return (
    <div className='container'>
      <h1>Counter</h1>
      <p>{count}</p>
      <button className='btn btn-outline-secondary' onClick={handleClick}>Click Me!</button>
    </div>
  )

```

Run the development server and open the browser on port 3000: `http://localhost:3000/`

![Screenshot from 2022-07-09 22-06-26.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657393644309/wXhPSpoTF.png)

The full code:

{% embed https://gist.github.com/achingachris/e3e85f714b5f0921450f0ce480322140 %}

Here is a demo:

{% embed https://codesandbox.io/embed/tender-lewin-yiw2pz?fontsize=14&hidenavigation=1&theme=dark] %}

## Conclusion:

We created a component and added a button that shows the number of times it's been clicked, using the `useState` hook. Cool isn't it?

## References:

- [React Hooks and State](https://reactjs.org/docs/hooks-state.html)
Portals
Tags: codepen, avengers
Published: 2022-07-09 18:53:24

<p>Inspired by Dr Strange Portals from Marvel movies, this pen will show to you a random pic inside the portal. You will go inside them? or not? Make you choice.</p>

<p>Thanks &lt;3</p>

{% codepen https://codepen.io/paulogmello/pen/bGvpvzJ %}
How were you affected by COVID in your daily routine, and what changes did you notice in your productivity?
Tags: discuss, career, productivity
Published: 2022-07-09 18:36:43


I’m really curious to know and explore this tabu topic as I have friends that write software for a living and seem somewhat affected by the disease. 

I mentioned the software field because I can quickly recognise some exact tiny bits that bubble up in conversations and just don’t add up. Things like gaps in explaining some intricate code piece, or gaps in knowledge for language features or simple things the individual used to know really really well. 

Some examples I captured in my mind during conversations around the subject: “having trouble focusing”, “hard to recollect shortcuts for tool X”, “things I once knew extremely well seem sort of blurred now”, “hard to enter into flow”.

The list goes on and on, but it touches the same idea: some degree of degradation in focus and/or ability to recollect simple things. 

Mental health is still a complicated topic to navigate in most social circles - that’s why I’m asking you.

Would love to know if you can share your any bit of experience or any kind of resource that can help ease or overcome or revert these effects - thanks.
7 Mind-blowing websites that you as a developer will not hate.
Tags: javascript, webdev, beginners, programming
Published: 2022-07-09 17:39:00

Without wasting your time! 

💡 1. [Witboard ](https://witeboard.com/)

Witeboard is the fastest real-time online whiteboard for your team. Share with your team and view on mobile, tablet, or desktop. No sign ups, no installations.

![Homer.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fe0uxfs1ypaycfwewdlf.png)


💡 2. [Blush ](https://blush.design/)

Blush is a free online design tool that gives you control on every little piece of the artwork. You can mix-and-match different components until you get the perfect doodle. No matter what you want to create, Blush allows you to do it.

![Blush.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqeu53ctb3111em3i275.png)

💡 3. [Carrd](https://carrd.co/) 

There's a simple and easy-to-use tool called Card which allows users to create "fully-responsive one-page sites for pretty much anything" - says the Carrd team. .

 ![Portfolio.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bx8ytslj1ulnw07o3t6x.png)

💡 4. [Coverr](https://coverr.co/)

Coverr video is a completely free stock footage website that allows you to download and use high-quality stock videos anywhere. And there is no catch!

![Coverr.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54i5mbly26l2umxghq7m.png)

💡 5. [Flourish](https://flourish.studio/)

Flourish can be used to scale and manage any kind of interactive content. Developers can easily add bespoke private templates to your account. Think of it as your CMS for interactive content.

![Flourish.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqi6fkirfhnbag0a5amx.png)

💡 6. [Untools](https://untools.co/)
Untools helps you make better decisions and solve problems with proven thinking tools.

![Untools.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3vigny952wd5ncy7irf.png)

💡 7. [Lumen5](https://lumen5.com/)

Lumen5 is a video creation platform powered by A.I. that enables anyone without training or experience to easily create engaging video content within minutes.

![Lumen5.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o28u2rv47ajpxmy26k8h.png)
 
So...Which one are you going to use in your next project?😊
Tell me all about it in the comments 👇
npm build / npm run build trows an error
Tags: react
Published: 2022-07-09 17:23:12

**Thing I've tried:**

- Tried running `npm run-script build`

- Tried doing `npm cache clean --force`

- Tried deleting node_modules folder then using `npm cache clean --force` and then doing `npm install`

- i even tried installing run-script after i got "'run-script' is not recognized as an internal or external command" error

Nothing worked, i have no idea why i'm getting this error. if anyone can tell me the reason that'd be great. sorry for the trouble

**Error i'm getting:**
'run-script' is not recognized as an internal or external command,

operable program or batch file.

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! react-portfolio@0.1.0 build: `run-script build`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the react-portfolio@0.1.0 build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Introduction
Tags: beginners
Published: 2022-07-09 17:14:25

Good Afternoon,

This is my first time writing a blog post so wanted to use this opportunity to introduce myself and explain a little about me.

I am Steve from Oxford in the United Kingdom and have been working in front-end web design on and off for over 10 years although not too seriously.

I have just had a baby and so have decided it is time for a career change to give me back a bit more time with the little one so I am going back into web design.

My experience is in HTML, CSS, JavaScript and MySQL but I am at this time trying to learn react although it is taking a little more time than I would have hoped (prob age related lol).

I have designed and built a skills by shift web site for my work in the Highways sector that is still up and running and being used and thought this would be an excellent project to transform into react.

Anyways that's a little about me and hopefully I will have to regular posts to update you on anything I learn and can pass on to the community.

Thank you for your time.
Insomnia - an Open Source, Developer-Friendly API testing client
Tags: productivity, api, tooling, webdev
Published: 2022-07-09 16:16:49

Hello devs!

Testing APIs is a huge pain in the ass. If you aren't careful then you can easily get lost in the 'API-jungle' of your back-end application. So, using a tool to document and test the APIs goes a long way to make the development process smoother.

---

### Why use Insomnia?

Before you ask 'Why not Postman?', let me say that I have used Postman for a very long time. I recently shifted to Insomnia for testing my APIs and really love the experience so far. This post isn't meant to be a comparison between the two software. Each one has its own pros and cons. You should use the tool which you find to be the best to work with.

---

### User friendly Interface

![Insomnia UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h27xlsoz9qzfp2isf7lm.png)

What I love the most about Insomnia is its simple and intuitive UI. You got the Method Tabs on the far left, the request and body part in the middle and the response preview on the right. Although you can't see as many options on the page like Postman, in this case less is more.

---

### Crucial features for Development

Some cool features that I like about Insomnia:

- Environment variables

You can load custom variables in the environment. This is helpful in cases like when you are creating routes and want to use the same base url. You can also have multiple environments (like for development or production).
![Environment variables in Insomnia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1lmuq1dqkg5uy1kc53p.png)

- Organizing requests

The requests are neatly organized on the left sidebar.
![Organizing requests in Insomnia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/113ce6qe86lyh48vmloy.png)

- Timeline tab

You can check the timeline of the request by clicking on the timeline tab on the right side. This is very useful if you want to track the time of request, headers, what was the response, etc.
![Timeline tab in Insomnia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gfaoblkk543oqqklqac.png)

- Use data from other responses

You can also use data from other responses. Insomnia suggests many options for the placeholder.
![Data from Other Responses in Insomnia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynzj0kkuzvfpypcliiuj.png)

- API Design and Sync with Git

When you are designing your API Document, you can use Sync with Git feature to set up a remote repository and commit changes to it.
![API Design and Sync with Git in Insomnia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1ihpwr6stjrcw5rqdtj.png)

---

### Excellent themes and community plugins

Insomnia has a nice collection of themes to choose from. You can also install various community plugins to enhance your experience.

![Themes in Insomnia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9q4a8h87ktx7fq23loc.png)

![Community plugins in Insomnia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu1i10acc1h4mr6z1xax.png)