teleren/devto huggingface dataset:
How to pass props object from child component to parent
Tags: react, hack, trick, webdev
Published: 2021-10-08 17:28:29

Before starting the topics let me tell me this is a ***hack*** I just found this today when I am doing my project.I facing a problem when I am trying to change data from child to parent .I remember I only know pass props from parent to child but I need to pass props from child to parents..Let's get started !

![dancing ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prow3uqi3wczecww308o.gif)

## Requirements need to understand

- What is props

>  Props are arguments passed into React components. Props are passed to components via HTML attributes. props stands for properties.

[Source](w3schools.com)

- What is state

> State is similar to props, but it is private and fully controlled by the component.You can make dynamic data using state.
[source](reactjs.org)


Okay Now! Let't go into code .....

```jsx
import { useState } from "react";
import Child from "./child";
const App = () => {
  const [Name, setName] = useState("Parent");

  return (
    <>
      <h1>{Name}</h1>
      <Child Changedata={(Name) => setName(Name)} />
    </>
  );
};

export default App;


```

** In this parent component we have set initiate state value to  "parent" and pass a function  to the child component using props.

```jsx

const Child = (props) => {
  return (
    
   <button 
   onClick={() => props.Changedata("Child")}>
   Change</button>
  
  )
};

export default Child;



```
In child component we called that function using props.Changedata("child") and set a value inside the function parameter that value gonna effect to the state of parent's state and its turn into this value.
.

Demo [link](https://codesandbox.io/s/pass-data-from-child-to-parent-ddt4i)

Thus all for today If you found useful please share it to someone and  I am waiting to see your feedback.Follow me on [twitter](https://twitter.com/hareom284)

PS: I am just starting writing articles if any mistake feedback are welcome.
Revue-generator: React & Vue Component Generator.
Tags: javascript, npm, showdev, node
Published: 2021-10-08 17:26:46

I'm learning Node JS so I thought it'd be better to make some projects which will help me understand Node JS better. So I did.

####Here it is:
###Revue-gen: The React and Vue component generator.

If you've worked with React or Vue, you might have came across this situation where your app needs a lot of components and you have to create them all manually. It's a pain, right? So I thought why not make it a little easier. And I did. (Hopefully).

####I built a Command line tool that makes this process easier. All you have to do is install it using NPM, cause it's an NPM package.
```
npm i -g revue-generator
```

run this using
```
npx revue-generator
```
and boom:

![image](https://user-images.githubusercontent.com/44538497/136579331-3d04c283-5ed7-4629-a80c-21f635aa1c09.png)

![image](https://user-images.githubusercontent.com/44538497/136579454-10c1279b-1d28-4bdb-9b6d-eefc0e79b6e9.png)


It just makes the process easier.
You can give it a try too:
https://www.npmjs.com/package/revue-generator
OSD600 - Week 5 - Lab 4
Tags: opensource
Published: 2021-10-08 17:16:03

# Introduction
==============
This week, I work with Gus to implement the --config feature to add .json file on our SSG. We work on the same language C++, which makes us easier to talk about the project.

The structure of my ssg and his ssg is quite different. I implement several classes for each specific task. Otherwise, he has only one main file and a header file. It is quite long to read.

# Adding Features
=================
### gasHeader.h

1/ Adding prototypes for 2 new functions getJsonValue() and processJsonFormat().
2/ Changing prototypes for processText() and newFolder() to receive default arguments. If no arguments provided, the default values for stylesheet, lang would be empty string and default values for outputFolder would be "./dist". This changes would not affect the current structure of current program.

### gasMain.cpp

1/ main function: slightly change the structure. If the command argument is either "-c" or "--config". It will go to an if statement and go to process processJsonFormat(). Otherwise, it is go to an else statement and process the program as before.

2/ processJsonFormat() function: Retrieve information of input file, output file, stylesheet and lang. If there is no arguments provided in the json file, it is empty string. Then program will process the same way as it performs before except providing arguments for possible output, stylesheet or lang. If there is no arguments provided, it processes the default values as I mentioned above. So there is no conflicts.

3/ getJsonValue() function: Support processJsonFormat() to concatenate values from JSON attributes.

4/ processText() and newFolder() functions: slightly change to make them receive accepted arguments or default arguments.

### Other features: 
The program would ignore if there are any contents provided in .json file except input, output, stylesheet and lang. Or still process if output/stylesheet/lang is not provided.

If json file is missing or cannot open, appropriate messages are displayed.

# Links:
========
Gus's Repo: [Github Repo](https://github.com/gusmccallum/GAS-ssg)
My Repo: [Github Repo](https://github.com/kiennguyenchi/GAS-ssg)
My Issue: [Issue #19](https://github.com/gusmccallum/GAS-ssg/issues/19)
My Pull Request: [PR #20](https://github.com/gusmccallum/GAS-ssg/pull/20)

# Git 
=====
The concept of git remote is interesting to use. It is convenient for both the owner and people who folk our repo and review and change the code. I can fetch the code from folked repo to my local machine, so I can review it without affecting to my original code. It is also easy to update new changes from folked repo by git pull. Finally, I can do git merge to merge the successful tasks done by other to my repo.

Overall, Git is a powerful and useful tool to use if you truly understand how it works.
Logo Design Services
Published: 2021-10-08 17:06:51

 In the world of logo design there is a single rule that will never change and it's always the same: Logo Cravings. When you've created a logo that's straightforward enough and memorable it's a good logo. Logos are a signifying element of a brand. Therefore, it's crucial to keep it simple and memorable. There is no way for a consumer to remember an intricate logo while he is in a hurry. Also, people pay attention in a short period when they look at a logo, so logos with lots of information are a huge "NO". In terms of <a href="https://www.logocravings.com/logo-design.php">logo design services</a>, simple is the best.

A logo's shape and an unforgettable word for the logo's name. The logo's text is all rhymed. This is a reference to their pursuits and their spirits. It's impossible to be more succinct. Even a young person can understand the point from the first glance at an emblem. A simple logo can speak for the company and its products. Convinced! Where is your innovation seen in the first place? Your logo design! The company's creativity is pretty well measured by the way in which it is representing itself to its potential customers. It is also measured through a logo design since it is the first thing a business is acknowledged by and also happens to be its property as well.

What is your unique selling point? In the first place, it is your logo's design, later comes the product or the services you are offering. Thus ensure that you attract more customers, develop a reputation within the marketplace. You should ensure the product or service you offer your business is innovative and demonstrates it in every way possible and when you've built such a good will in the market, then the design of your logo will represent you. Customers are waiting for you to make contact with them however, what makes them want to stick with them after they've made a purchase? It's true that a great merchandise or service will be your most effective way to market and if a company succeeds in developing the kind of thing that will become an expectation of customers, then this indicates that there is a greater chance of you being in great demand. The design of your logo is what you are recognized by but it can also be in positive or negative ones. This means that having a good logo design in itself isn't enough. What is important is how your customers perceive you once they have been able to experience your product or service.
React Router Dom v4 -- 以前の書き方をまとめておく
Tags: react, javascript, reactrouterdom
Published: 2021-10-08 17:06:11

## what is this

v6 以前の書き方のまとめ。
  BrowserRouter as Router,
  Switch,
  Route,
  Link
の使い方

v6 からは大きく異なる。

## CRA でプロジェクト作成

[https://reactrouter.com/web/guides/quick-start:embed:cite]

```
npx create-react-app react-router 

Success! Created react-router at /Users/kaede0902/code/react-router
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

```

create-react-app で作って

```
npm start

Compiled successfully!

You can now view react-router in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.3.61:3000

Note that the development build is not optimized.
To create a production build, use yarn build.
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nry7vgxtgzgr45j3ued.png)
 
npm start で　React 本体の動作確認

------

## react-router-dom を入れる

```
npm i react-router-dom

added 13 packages, changed 6 packages, and audited 1721 packages in 31s
```

----

## Router, Switch, Route, Link, を import する

App.js で

```javascript
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
```

これらを import する

----

## App で Route を組む

```js
export default function App() {
  return (
    <Router >
      <li>
        <Link to='/'>Home</Link>
      </li>
      <li>
        <Link to='/about'>About</Link>
      </li>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}
```

App で Router で囲って、最初に 共通部分として Link を置いておく

その下に Switch で 

/about の時は `<About />`

/ の時は `<Home />`

をスイッチさせる

----

## Home と About のコンポーネントを書く

```js
function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

```

Home と About が呼ばれた時に出すものは下に書く。

----

## 実際に `/` と `/about` にアクセスしてみる

これで 

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

`/` の時は `<Home />`

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

`/about` の時は `<About />`

これらの URL と 呼び出される components の切り替えを書ける。

----

## まとめ

react-router-dom を使い、URL と Component を対応させるには

```js
<Router >
  <Switch>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/">
      <Home />
    </Route>
  </Switch>
</Router>
```

このように Router に Switch を仕込んで、
その中に Route で URL の path と、それに対応する コンポーネントを結びつける。

```js
function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}
```

これで Route path の URL にアクセスしたときに、これらのコンポーネントが呼び出される。
How to create same height div as parent height
Tags: beginners, html, javascript, css
Published: 2021-10-08 17:02:55

Hello artisan,
Today in this blog post I am going to show you how to create same height as parent height div's.

In most of the cases we need to create a div with same height, because if the div has paragraph of unequal length the div will look so wierd which is not good. So make the div of same height we will refer the following code.

Before going further follow me for more posts {% user snehalkadwe %}

Now, lets see the code
```html
 <h3>Example of same height div with its respective parent height </h3>
 <div class="container">
    <div class="child-div-1"><p>Div 1</p></div>
    <div class="child-div-2"><p>Div 2</p></div>
    <div class="child-div-3"><p>Div 3</p></div>
 </div>
```
Create a css file and add the below css code
```css
.container {
  display: flex;
  background: #ffc;
  height: 50vh;
}
.child-div-1 {
  background: #000;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-1 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: #fff;
}

.child-div-2 {
  background: #ee6;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-2 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: #000;
}

.child-div-3 {
  background: #fdd;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-3 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: brown;
}
```
You can also refer code pen for result

{% codepen https://codepen.io/snehalkadwe/pen/WNjmeWK default-tab=js,result %}

Thank you for reading :lion: :unicorn:
Hacktoberfest Week 1
Tags: opensource, hacktoberfest, osd600, rust
Published: 2021-10-08 16:49:29

This is my first time participating in hacktoberfest! Here's a small recap of my first PR :)

### Repo

This year I have been getting into [Rust](https://www.rust-lang.org/) so I used github search to find any issues in a rust repository with the hacktoberfest label. This lead me to [Scion](https://github.com/grzi/scion) which is a 2d game library written in Rust. 

### Issue

The problem I had to solve was being able to pivot a rectangle about the center. The relevant issue can be found [here](https://github.com/grzi/scion/issues/193)

### Solution

The first thing I did was the implement the new_with_offset function which creates a new rectangle with the passed offsets. At first I only had 1 offset parameter but that is wrong because a rectangle might have different width and height unlike a square
```Rust
pub fn new_with_offset(
        width: f32,
        height: f32,
        uvs: Option<[Coordinates; 4]>,
        x_offset: f32,
        y_offset: f32,
    ) -> Self {
        let a = Coordinates::new(0. - x_offset, 0. - y_offset);
        let b = Coordinates::new(a.x(), a.y() + height);
        let c = Coordinates::new(a.x() + width, a.y() + height);
        let d = Coordinates::new(a.x() + width, a.y());
        let uvs_ref = uvs.unwrap_or(default_uvs());
        let contents = [
            TexturedGlVertex::from((&a, &uvs_ref[0])),
            TexturedGlVertex::from((&b, &uvs_ref[1])),
            TexturedGlVertex::from((&c, &uvs_ref[2])),
            TexturedGlVertex::from((&d, &uvs_ref[3])),
        ];
        Self { width, height, vertices: [a, b, c, d], uvs: Some(uvs_ref), contents, dirty: false }
    }
```
then I called this function from a newly defined pivot function
```rust
pub fn pivot(self, pivot: Pivot) -> Self {
        let (x_offset, y_offset) = match pivot {
            Pivot::TopLeft => (0., 0.),
            Pivot::Center => (self.width / 2., self.height / 2.),
        };

        Rectangle::new_with_offset(self.width, self.height, self.uvs, x_offset, y_offset)
    }
```
I also called use it in the new function 
```rust
pub fn new(width: f32, height: f32, uvs: Option<[Coordinates; 4]>) -> Self {
        Rectangle::new_with_offset(width, height, uvs, 0., 0.)
    }
```
The relevant PR can be found [here](https://github.com/grzi/scion/pull/198)

### Thoughts

It was really fun contributing to Scion. I am not really into game development so it was an interesting change of pace to contribute to something I am not familiar with. The experience was fun overall and I am looking forward to contributing to more repos this month :)

Thanks for reading!
JavaScript Short Circuiting
Tags: javascript, beginners
Published: 2021-10-08 16:34:48

## What is Short Circuiting in JavaScript? 
### The `||` Operator

When working with logical operators such as AND `&&` and OR `||`, they are typically used with [Boolean values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) (truthy and falsy), and return `true` or `false`. When using the `&&` Operator, both sides of a conditional must evaluate to `true` for it to return true. If one side evaluates to false, then it returns false. When working with the `||` Operator, only one side needs to evaluate to `true` for it to return `true`. 

```
true || true 
// returns true 

true || false 
// returns true 

false || false 
// returns false
```

But, logical operators can be used with any kind of datatype. If for example, a number and a string were used in a logical operator, rather than return `true` or `false`, it would return the value itself. 

` 100 || 'North' `

Returns `100` rather than `true` or `false`. 

## Why does this happen? What does Short Circuiting even mean? 

In the above example, short circuiting means essentially that the expression is not evaluated. If the first value is truthy, then it will just return the true value, and stop evaluating. 

If the first value was false however, it continues to evaluate, and then returns the value again with the second expression. 

```
null || 'Hello'
// returns 'Hello'
``` 

## Short Circuiting with the `&&` Operator 

Short circuiting works in the complete opposite manner when it comes to the AND operator. 

```
true && true 
// returns true 

true && false 
// returns false 

false && false 
// returns false
```

With the AND operator, it short circuits when the first operand is Falsy. 

```
O && 'Fall'
// returns 0
```

A longer example chaining together multiple `&&` evaluations works the same. 

`console.log('Goodbye' && 100 && undefined && 'halloween')`

Will short circuit on `undefined` and automatically return `undefined`.

Using a practical example, it's possible to take advantage of short circuiting, and to shorten an if statement. 

Rather than writing: 

```
function a() { 
   console.log('a'); 
   return false; 
}

if (a()) { 
   console.log('Foobar') 
}
// returns a 
```

We can write it as:

```
a() && console.log('Foobar')
// returns a 
```

As `a()` evaluates to false, it will short circuit, cease executing, and return only a, not continuing on to the other side of the Operator. 

However, it's not necessarily always a good idea to use short circuiting in the place of the longer code of an `if` statement, because someone else coming in to read the code, might not understand what's going on. Sometimes it's better to keep things readable, rather than short. Brevity isn't always the answer. 

## Further Reading 
Here is a really great, and long example explaining short circuiting in JavaScript from [stack overflow](https://stackoverflow.com/questions/12554578/does-javascript-have-short-circuit-evaluation)

[Codeburst.io JavaScript: What is Short-circuit Evaluation?](https://codeburst.io/javascript-what-is-short-circuit-evaluation-ff22b2f5608c)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-10-08 16:28:47

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Cleaning up your space... or whatever else might spark joy ❤️ 

---

Happy Friday! Hope you all have a great weekend 🎊 

![Happy weekend graphic](https://media.giphy.com/media/k5rRowdiPTrNLVZnmd/giphy.gif)
OpenAQ - My first open source PR :)
Tags: opensource
Published: 2021-10-08 15:21:06

I've always had an interest in how software and programming can be used to make a difference in the world (socially, environmentally). When researching an issue to work on for my **VERY FIRST CONTRIBUTION**... I wanted to pick something to do with climate change. That led me to stumble upon this website regarding [Sustainable Tech](https://opensustain.tech/). 

Most of the repositories on the list are Python and C++ but I managed to find OpenAQ-API which is the data source (or used to be) for their API which is written in JavaScript. Since I want to work on JavaScript I picked [This Repository](https://github.com/openaq/openaq-api). Initially, I wanted to fix an issue about their "adapters" returning location names with spaces at the end. However when I went to ping their API, it no longer seemed to be an issue and maybe wasn't closed on the repo.

To begin I forked the repository, and cloned my fork. Next, I made a branch for the issue called "issue-467" to make the changes.

What I picked was an issue to remove unused commented code from one of their files. The issue can be found here [Issue 467](https://github.com/openaq/openaq-api/issues/467). The commented code consisted of older methods the developer team used for querying the databases. The PR for this change can be found [Here](https://github.com/openaq/openaq-api/pull/482/commits/9e23cb4ca8a0187dc33621bff8d45041deeacada). An example is this chunk of code that I removed ![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nygffs7oievzxr8tklim.png)
 
It appears to be a way to build the base SQL query. However, in the /lib/utils folder of the project there is newer code to handle all the SQL query building and payload sorting. For example in this code, it checks if payload exists and runs through each of the query params the user could enter, and "sanitizes" the payload or result based on what is asked for (date ranges, locations, etc). ![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m891s69w3v4fdsop50mb.png)

The purpose of the change I made is to increase readability of the codebase. There is not a purpose of having code that isn't relevant to the application if there is a newer way things are being done. In terms of addressing reviewer comments, my PR has yet to be reviewed, but since it was removing commented code and not messing with functionality I believe it will be okay.

It was an interesting experience contributing to such a large project because it takes a while to get a feel of how things are done and which functions are in which folders. Overall once I got going it was fun though!!!
Top 10 trending github repos of the week💜.
Tags: hacktoberfest, javascript, selfhosted, hacktoberfest2021
Published: 2021-10-08 16:08:15

---
title: Top 10 trending github repos of the week💜.
published: true
description: Most popular trending Github repos in this week.
cover_image: https://source.unsplash.com/featured/?coding
tags: hacktoberfest,javascript,selfhosted,hacktoberfest2021
series: Weekly Github top 10
---
GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and features, power your CI/CD and DevOps workflows, and secure code before you commit it.

Here is the most popular repos published on this platform.
{% github microsoft/Data-Science-For-Beginners %}

{% github appsmithorg/appsmith %}

{% github louislam/uptime-kuma %}

{% github public-apis/public-apis %}

{% github sindresorhus/awesome %}

{% github ryanmcdermott/clean-code-javascript %}

{% github appwrite/appwrite %}

{% github HashLips/hashlips_art_engine %}

{% github facebook/flipper %}

{% github remoteintech/remote-jobs %}
Enjoy these repos.
Follow me for more articles.
Thanks 💖💖💖