teleren/devto huggingface dataset:
[AWS Experiment] 1 - Using STS Assume Role
Tags: aws
Published: 2021-12-22 07:19:00

# AWS Link
- [AssumeRole Switching Tutorial](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_use_switch-role-cli.html)

# What is AssumeRole and When to use it??

- AssumeRole Returns a set of temporary security credentials

- These temporary credentials consist of an access key ID, a secret access key, and a security token.

- You may want to use AssumeRole to access AWS resources that **you might not normally have access to.** 

# Simulation

A boss is trying to give a IAMReadOnlyAccess to interns temporarily. Currently interns' IAM accounts don't have any permission to perform.

## Steps

1. The boss needs to create a role that has `IAMReadOnlyAccess` permission (in this post, I'll name it `ForInterns_IAMReadOnlyAccess`)

2. Then edit *Trust Relationship* In this step, it is important to make sure and configure that **the role has all interns' IAM arns as trust relationships.**

```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "AWS": [
          "arn:aws:iam::185197443529:user/test-intern-01",
          "arn:aws:iam::185197443529:user/test-intern-02"
        ]
      },
      "Action": "sts:AssumeRole",
      "Condition": {}
    }
  ]
}
```

3. Give the role's arn to the interns.

4. Now interns can do:

```sh
aws configure
# Type intern's credentials
# ...
```

```sh
sudo vim ~/.aws/config
# Copy and paste following
# This will create a profile 'role-attached-intern'
# [profile role-attached-intern]
# role_arn= <ROLE_ARN_THAT_BOSS_GAVE>
# source_profile=default 
```

```sh
aws iam list-users # Won't work
aws iam list-users --profile role-attached-intern # This will work
```

# Conclusion
Props, PropTypes, JSX
Published: 2021-12-22 07:16:45

**Props:**
React allows us to pass information to components using things called props (short for properties). Because React comprises several components, props make it possible to share the same data across the components that need them. It makes use of one-directional data flow (parent-to-child components). However, with a callback function, it’s possible to pass props back from a child to a parent component.
These data can come in different forms: numbers, strings, arrays, functions, objects, etc. We can pass props to any component, just as we can declare attributes in any HTML tag. Take a look at the code below:
<PostList posts={postsList} /> 
In this snippet, we are passing a prop named posts to a component named PostList. This prop has a value of {postsList} Let’s break down how to access and pass data.

**PropTypes:**
PropTypes are a mechanism to ensure that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.

We can think of it like a fruits s being delivered to a fruit store. The pet store doesn’t want pigs, lions, frogs, or geckos — it wants puppies. PropTypes ensure that the correct data type (fruits) is delivered to the pet store, and not some other kind of fruit.

In the section above, we saw how to pass information to any component using props. We passed props directly as an attribute to the component, and we also passed props from outside of the component and used them in that component. But we didn’t check what type of values we are getting in our component through props or that everything still works.

It’s totally upon us whether to validate the data we get in a component through props. But in a complex application, it is always a good practice to validate that data.


**JSX:**
JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together. 
Take a look:
const jsx = <h1>This is JSX</h1>

This is simple JSX code in React. But the browser does not understand this JSX because it's not valid JavaScript code. This is because we're assigning an HTML tag to a variable that is not a string but just HTML code.

So to convert it to browser understandable JavaScript code, we use a tool like Babel which is a JavaScript compiler/transpiler.

You can set up your own babel configuration using Webpack as I show in this article. Or you can use create-react-app which internally uses Babel for the JSX to JavaScript conversion.
**JS in one glance**
Tags: javascript
Published: 2021-12-22 07:10:32



01. PropTypes
Ans: A prototype is a javaScript object. Every JavaScript object has a prototype. Every object has a prototype that is either null or an object. Object.prototype is upper in every prototype chain. To make a prototype ideal way is to use an object constructor. The prototype is a JavaScript inheritance mechanism. In this case object inheritance all of the prototype chain. 

02. State-props
Props
vs
State
Props is immutable but
State is mutable.

Props Passed by parent but
State Created within component.

Props Can be defaulted & validated but
state this.setState() to update.

Props Has better performance but
State Locally scoped.

 
03. JSX
Ans: JSX stands for JavaScript XML. It allows us to write directly HTML elements in React. JSX works with following some React rules like states, components, events, functions etc. It is the upgraded combination of HTML & JS. It specifies react element, scope JSX code, using dot notation, must be capitalized user-defined components, js expression as props & many other it works.

04. Component Lifecycle
Ans: React component lifecycle are-
Mounting
componentWillMount
Render
componentDidMount

Updation
Props
states

Unmounting
componentWillUnmount

Initialization
Setup props and state
 
05. hooks
Ans: Hook is a function that is used in react programming language. React hooks were introduced in react 16.8 version. 
3 rules in for a hook are-
It can only be called inside React function components.
It can only be called at the top level of a component.
Hooks cannot be conditional

06. custom hooks
Ans: If you need some activities which are not found in default hooks or not found in ReactJS hooks in this case you make a custom hook following rules. Custom hooks are component logic into a reusable function.
To make a custom hook I need to follow some steps. Like- firstly define a hook name & add some action and statement. Then fetch fake data from JSON Placeholder service. Fetch logic must be needed in components & extract that into a custom hook.
 
07. context API
Ans: Prop drilling is a method that to get permission for data access from any components. For working Props drilling firstly, you make a component in centrally/root path like context API then export from here & where you need to access import it & use it as per following required/recommendation.
 
08. Virtual DOM and diffing- algorithm
Ans: Virtual DOM is a copy of real DOM. It is more faster than real DOM. When you need any change in UI virtual DOM change specific area which need.

Virtual DOM
Updates faster
Can’t directly update HTML
DOM manipulation very easy
No memory wastage

Real DOM
Update slow
Can directly update HTML
DOM manipulation very expensive
To much memory wastage

 
09. How would you optimize a react js application?
Ans: To optimize a reactjs application have so many processes. Those are- code-splitting, memoization, useCallback, redux persistence, class functional components, componentization, clean code, debugging, & many more.
 
N.B: First post in Dev community. If I'm wrong correct me, please.
A simple python calculator
Tags: programming, python, beginners, easy
Published: 2021-12-22 07:02:58


i made a simple python calculator using while loop

```
# simple calculator


def add(x, y):
    return x + y


def sub(x, y):
    return x - y


def mul(x, y):
    return x * y


def div(x, y):
    return x / y


print("Select operation.")
print("( + )for Add")
print("( - ) for Subtract")
print("( * ) for Multiply")
print("( / ) for Divide")

while True:
    choice = raw_input("Enter the operation: ")
    if choice in ('+', '-', '/', '*'):
        num1 = float(input("Enter first number: "))
        num2 = float(input("Enter second number: "))

        if choice == '+':
            print num1, "+", num2, "=", (add(num1, num2))
        elif choice == '-':
            print num1, "-", num2, "=", (sub(num1, num2))
        elif choice == "*":
            print num1, "*", num2, "=", (mul(num1, num2))
        elif choice == '/':
            print num1, "/", num2, "=", (div(num1, num2))
    n12 = raw_input("Do u want to calculate another equation (y/n): ")
    if n12 == 'y' or n12 == 'Y':
        continue
    else:
        break


```
Advent of Code 2021 - Day 21
Published: 2021-12-22 07:00:15

---
title: Advent of Code 2021 - Day 21
published: true
description: In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
tags:
cover_image: https://i.ytimg.com/vi/w_6lGynSC1g/maxresdefault.jpg
---

{% youtube w_6lGynSC1g %}

In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
React DevTool: Components not listed
Tags: react
Published: 2021-12-22 06:39:57

I'm trying to debug react code but there's little complication in architecture of my work project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18l3fm078haaw8ni9y4p.png)

Here in above image, I'm rendering another react component under `div`.

Here `SiteAppWrapper` is a separate microservice and a component I want to get listed is also a separate microservice.

Can anyone please suggest me what to do here so that devtool inlist all components
UI Dev Newsletter #88
Tags: html, css, a11y, webdev
Published: 2021-12-22 06:25:59

## Links


[State od CSS 2021](https://bit.ly/3e6D5Q1)
Sasha Greif shares the results of the CSS 2021 survey.


[Tailwind and the Femininity of CSS](https://bit.ly/3IVmI74)
Elaina Natario tries to discover why utilities and frameworks such as Tailwind are often met with bandwagon attacks from its community.


[Consistent, Fluidly Scaling Type and Spacing](https://bit.ly/3qstLMn)
Andy Bell describes how to use the clamp() function for sizing scale.


[CSS can help improve your HTML⁉ - Ep 2: buttons and links](https://bit.ly/3J2MKVX)
InHuOfficial explores how we can use CSS to ensure (and enforce) that we are using button and anchor elements correctly.


[Select elements with pointer-events:none by holding Shift](https://bit.ly/3EePvjs)
Patrick Brosset shows how to select unselectable elements in Chrome and Edge DevTools.


[Easy Checks – A First Review of Web Accessibility](https://bit.ly/3shQ1ec)
W3C Web Accessibility Initiative (WAI) shares a guide that helps you start to assess the accessibility of a web page.


[WCAG 2 is what we have](https://bit.ly/3mhljy5)
Kilian Valkhof explains why Advanced Perceptual Contrast Algorithm is not yet implemented in the Polypane browser.


[Beacon](https://bit.ly/32gQEdd)
Calculate the environmental impact of a web page, see the breakdown and learn what measures can be taken to improve it.


## Self-promotion

[In defense of CSS](https://bit.ly/3yHJyKX)
I am here to take a stand and defend CSS, my most favorite programming language.


**Happy coding!**

[Subscribe to the newsletter here!](https://buttondown.email/starbist)
Pure CSS Hamburger Menu | Create css menu hamburger
Tags: css, html, webdev, beginners
Published: 2021-12-22 06:09:21

What is a Hamburger Menu?
Hamburger Menu is one of the specialized menus used for navigation links in a website. There are also other types of menu types like the kebab menu, popularly known as the three dots menu. These menu types help to raise the design side of a website when it is made responsive.



How to Make a Hamburger Menu?
While there are many ways to design the working of it, which includes the functions of JS, using CSS makes it more intriguing and a concept involving pseudo-classes and more CSS concepts that a developer should know.
[read full article](https://www.codewithrandom.com/2021/12/pure-css-hamburger-menu-create-css-menu.html)
Self-Taught Developer Journal, Day 22: TOP JavaScript Fundamentals Part 1 - Numbers
Tags: webdev, beginners, codenewbie, devjournal
Published: 2021-12-22 05:59:38

Today I learned...

## JavaScript Numbers
JavaScript has only one kind of number and it can be written as a decimal or not. Then extra small or large numbers can be written with scientific (exponent) notation. I thought this was interesting because usually other programming languages, like python, have specific types of numbers (integer, float) while JS groups it as one type. 

JavaScript Numbers are always 64-bit floating point or double precision floating point numbers.

Integers are accurate up to 15 digits and for decimals its 17 digits. It seems like the behavior after 15 digits is the number will round to the 15 digits and the digits after become 0.

Another short entry, but hoping to have more free time soon once I'm off work and after the holidays.

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
https://www.w3schools.com/js/js_numbers.asp
How to Work with Tooltips in Blazor Gantt Chart Component
Tags: blazor, dotnet, csharp, webdev
Published: 2021-12-22 05:49:45

Learn the available tooltips in Syncfusion [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) in a Blazor WebAssembly app. This video explains the tooltips available in Taskbar, Connector lines, baselines, event markers and in the grid cells. Also, it explains how to customize the tooltips in the Taskbars and baselines using templates.

Example project: https://github.com/SyncfusionExamples... 

Explore tutorial videos: https://bit.ly/3fAz0Ch

{% youtube xCpqtActie4 %}
Understanding CSS Specificity
Tags: css, webdev, html, design
Published: 2021-12-22 05:42:03

Have you ever had issues as to why the CSS rule wasn't being applied to your page? Well you might be facing issues with the CSS specificity or like how CSS computes which value is to be considered while the element is being rendered.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/52Fzb15SPPaE67hwnD/giphy.gif">

Let's first take a look at the definition of CSS specificity:

> Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

Let's go more in detail about how the specificity is being calculated for each element that is being rendered, so following are the selectors through which we apply CSS to various elements:

1. Inline-Styles
2. IDs
3. Classes, pseudo-classes, attribute
4. Elements, pseudo-elements



Now using the above selectors we calculate that how specific is the value or the style that is being applied to the element.

You can write the above values as - (a,b,c,d)

here, 

a - inline-styles
b - ids
c - classes, pseudo-classes, attribute
d - elements, pseudo-elements

By default when the project is created all the above values are - (0,0,0,0)

Now keep in mind that the specificity decreases from left to right (i.e "a" being the most specific and "d" being the least)

Let us now understand this with an example:

Consider the following code which contains styles applied to the same element:

Consider this code pen for the example being discussed - [Specificity Example](https://codepen.io/shasheeshpurohit/pen/QWqMoxa)

CSS
```
#main-text.main-text{
  color:orangered /*Specificity - (0,1,1,0)*/
}

#main-text{       /*Specificity - (0,1,0,0)*/
  color:purple
}

h1{
  color:red       /*Specificity - (0,0,0,1)*/
}

.main-text{
  color:green     /*Specificity - (0,0,1,0)*/
}
```

We can see the above styles along with their specificity that is in the comment.

The element renders with the color "orangered" irrespective of it being written above all other statements, because on calculating the specificity we observe that both orangered and purple have an ID whereas other styles do not, so we may not consider them further. 

Now on checking the next value we observe that for orangered we also have a class whereas for purple we do not and hence the specificity for orangered exceeds the one for purple.

Now keep in mind in case we have a 1000 classes and 1 Id for an element, then the rule written with that 1 Id will also dominate the one with even all 1000 classes combined.

>The order of CSS statement will only matter in case two rules have the same value of Specificity

So that's how specificity of CSS works. Do play around with the values to gain a better understanding.
Use environment variables in create-react-app projects
Tags: react, docker, typescript, devops
Published: 2021-12-22 05:36:39

[cra-envs](https://github.com/garronej/cra-envs) is a module that help you safely bundle server environment variables into statically served React SPA.  

## Motivation

We want to be able to do `docker run --env FOO="xyz" my-org/my-create-react-app` 
then access `FOO` in the app like `process.env["FOO"]`.  

Create react app provides no official way to inject environment variable from the server into the page.  
When you run `yarn build` create react app does bundle all the variables prefixed by `REACT_APP_`
and expose them under `process.env` ([see here](https://create-react-app.dev/docs/adding-custom-environment-variables/)).  
The problem, however, is that you likely don't want to build your app on the server.  
For this use case the CRA team suggests to [introduce placeholders](https://create-react-app.dev/docs/title-and-meta-tags/#injecting-data-from-the-server-into-the-page) in the `public/index.html` 
and do the substitution on the server before serving the app. This solution involves a lot of hard to maintain scripting.

This module abstract away the burden of managing environment variable injection as well as providing a type-safe way
to access them in your code.
Challenge #1
Tags: javascript, webdev, discuss
Published: 2021-12-22 05:33:03

Okay,

IT'SS THE LAST MONTH OF THE YEAR!!!

So all the business of the whole year comes to an end in few days. But one work left...

Challenges!
My web dev teacher gave us a challenge to complete.. And I am sure gonna complete it by today.. let's see if I can.

The challenge :- 

"Build a web page with an input field. If you type a valid css color code in the field, the background of the page should change to that color. If the color code is illegal, it should show an error message."

Note : DO NOT use input type=color.

So let's see if I can. You all also try and say in the comments if you could complete it.

I would send the code in another post someday..

Till then byee.
What Is JSX?
Tags: react, javascript, node, webdev
Published: 2021-12-22 05:15:34

JSX is a React-specific XML/HTML-like syntax that extends ECMAScript to allow for the coexistence of XML/HTML-like text and JavaScript/React code. Preprocessors (i.e., transpilers like Babel) will employ this syntax to convert HTML-like content present in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.
JSX allows you to write compact HTML/XML-like structures (e.g., DOM-like tree structures) in the same file as JavaScript code, and Babel will later convert these expressions to JavaScript code. Instead of putting JavaScript into HTML as in the past, JSX allows us to put HTML into JavaScript.
By using JSX one can write the following JSX/JavaScript code:

```
var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);

```
And Babel will transform it into this:

```
var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

```
You can think of JSX as a shorthand for calling React.createElement().
The idea of mixing HTML and JavaScript in the same file can be a rather contentious topic. Ignore the debate. Use it if you find it helpful. If not, write the React code required to create React nodes. Your choice. My opinion is that JSX provides a concise and familiar syntax for defining a tree structure with attributes that does not require learning a templating language or leaving JavaScript. Both of which are can be a win when building large applications
Solid Liquid Filters Manufacturers & Suppliers in India

Tags: cellulosefilterpaper
Published: 2021-12-22 05:11:05

[Sawant Filtech Pvt Ltd](https://sawantfiltech.com/
). Group Company of Subodh Filters in Mumbai, has specialized in Solid, Liquid Filters Manufactur
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7850tohzaioyoellsvdh.jpg)ers &amp; Suppliers in Mumbai, India.
I created My new Portfolio
Tags: beginners, html, css, javascript
Published: 2021-12-22 04:54:07

I created a new portfolio of myself. 
Here is the link...

[Subhransu Patra](https://subhransuindia.github.io/Subhransu%20Patra.html)

Previous Chapter [Chapter 2.2](https://inform-our-world.github.io/Saqha/CH%202.2)
REACT STATE AND PROPS CONCEPT
Published: 2021-12-22 04:34:11

1.What is JSX in React?
JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code). It is easy to create a template using JSX in React, but it is not a simple template language instead it comes with the full power of JavaScript.
JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. .
 
 
 
2. What is State-props in React ?
 
answer:Props are used to pass data, whereas state is for managing data. Data from props is read-only, and cannot be modified by a component that is receiving it from outside. State data can be modified by its own component, but is private (cannot be accessed from outside).
 
Example:
 
function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}
 
STATE:
React components has a built-in state object.The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
3.What are custom hooks in React?
Answer: Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated. How does a custom Hook get isolated state? Each call to a Hook gets isolated state.