teleren/devto huggingface dataset:
Deconstructing props and nested data
Tags: webdev, beginners, react, programming
Published: 2022-12-09 18:44:31

Hi all, I'm here with another post to take you through when I released how useful constructing props. I built a react web app where I used an API to fetch Video Games from RAWG API and I ran into some road blocks. This was my first project in react and I had previously worked with worked with an external API so I thought I wouldn't have an issue. 

I was wrong.

I first started with fetching my data and storing it in a [State Hook](https://reactjs.org/docs/hooks-state.html). My goal was to make a single page application that populated data in to the DOM and be able save the games that you want to play.


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

I created a fetch request for my data and initial returned an a nested object so I used dot notation to to get to what I actually needed. (_Data.results_) I put it in state because I knew that I would need it to change what was display at some point. I passed it down to another component that functioned as a container for my data because I wanted to map over it. Data.results returned an array so I could iterate through it in my container.


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

I could dot notate through each item in the array at the container level and pass down props off the information that I wanted. However I also wanted to create another component that contained the information this same information on a separate component. I created a function that would post this information to another database and pass it down to to the card component as props.


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

This function would take in a specific item and post it to a db.json file that I created with [JSON-server](https://www.npmjs.com/package/json-server).

My component that only had the saved games would fetch the object that I saved to the db.json. The issue I ran into was that once it was posted into my db, it now had it's own id and key assigned to it. Initial I was going to make a new component that only rendered the games in the db and not reuse the initial game card component. After a little guidance, research, understanding of how props work. I realized that prop can be anything. You can pass props to a component that represents different things. My card component doesn't need to know what it exactly is it just needs to be the same type to do the same thing or behave the same way. I had 2 come contains that pass similar things and a function that did similar thing. One function posted to my internal db.json and another my set the state what appear on the DOM. I deconstructed what everything was in the parent function before passing it down.

Thank you for reading my blog! I'll post a part 2
Installing POETRY - the intuitive python dependency manager
Tags: python, management, tutorial, beginners
Published: 2022-12-09 18:17:59

**Poetry** is a tool for dependency management and packaging in Python. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you. Poetry offers a lockfile to ensure repeatable installs, and can build your project for distribution.

---

### INSTALL on Linux  &  macOS 
```bash
curl -sSL https://install.python-poetry.org | python3 -
```

---

### VERIFY Installation
```shell
poetry --version
```

---

### UPDATE Poetry itself
```bash
poetry self update
```

---

### UNINSTALL Poetry
```bash
curl -sSL https://install.python-poetry.org | python3 - --uninstall
```

---

### Setup NEW Project
```bash
poetry new poetry-demo
```
PS: `poetry-demo` should be the name of your project

...the command creates a directory `poetry-demo` with the following content:

```
poetry-demo
├── pyproject.toml
├── http://README.md
├── poetry_demo
│   └── __init__.py
└── tests
    └── __init__.py
```

PS: `pyproject.toml` is the most important file here. And it looks like this:

```toml
[tool.poetry]
name = "poetry-demo"
version = "0.1.0"
description = ""
authors = ["JJOKAH <jjokah.pm.me>"]
readme = "README.md"
packages = [{include = "poetry_demo"}]

[tool.poetry.dependencies]
python = "^3.9"

[tool.poetry.dev-dependencies]
black = "^21.9b0"

[build-system]
requires = ["poetry-core>=1.0.0"]
build-backend = "poetry.core.masonry.api"
```

---

### INTIALISE  a pre-existing project
```bash
cd pre-existing-project
```
```bash
poetry init
```

PS: this interactively creates a `pyproject.toml` file in the directory - `pre-existing-project`

---

### SPECIFY and ADD dependencies

...in the `pyproject.toml` file under the `tool.poetry.dependencies` section, specify your package like this:

```toml
[tool.poetry.dependencies]
pendulum = "^2.1"
```

...OR use this command:
```bash
poetry add pendulum
```

---

### VERSION constraints

...in the example above  `pendulum="^2.1"`  means 
install the pendulum package with a version greater than 2.1.0 and less than 3.0.0 (>=2.1.0 <3.0.0)

---

### DEV dependencies
specify with ` --dev ` to add a package for the development environment only and not in Production:

```bash
poetry add black --dev
```

... black package will be added to the `tool.poetry.dev-dependencies` section

```toml
[tool.poetry.dev-dependencies]
black = "^21.9b0"
```

---

### INSTALL dependencies 
```bash
poetry install
```

---

### UPDATE dependencies
```bash
poetry update
```

---

### ACTIVATE the virtual environment
```bash
poetry shell
```

---

### DEACTIVATE / exit the environment
```bash
exit
```

---

**_Now, we are all set with #python poetry 🥂._**
Share your Netatmo station data on your website
Tags: webdev, typescript, netatmo, library
Published: 2022-12-09 18:09:20

Netatmo is a beautiful weather station we can install in our houses.
I tried some libraries to fetch data from my weather station and show results on my web page, but often I found old versions or some things that didn't corresponds to my needs.
So, I tried to write a library that helped me to achieve my goals.
I simply wrote a Typescript client for Netatmo APIs.

The library is very simple; First, you we'll find a method for authentication, that accepts an object contains mandatory properties to authenticate on Netatmo API.
If authentication process have done, response object contains 
access token, refresh token and expiration timestamp. 
Now, with this data you can call one of the "core" methods exposed by Netatmo:

getMeasure, getPublicData and getStationData.

# Authentication : 
`const meteoData:StationDataResponse = {} as AuthRequest;
 authRequest.client_id = 'your_client_id';
        authRequest.client_secret = 'your_client_secret';
        authRequest.username = 'your_username_netatmo';
        authRequest.password = 'your_password_netatmo';
        authRequest.scope = 'read_station';
 const lib:NetatmoLib = new NetatmoLib();
 const auth:AuthResponse = await lib.authenticate(authRequest);
`
and then extract from response object the data you'll need: 
`{"scope":["read_station"],"access_token":"sdqweqweqw","refresh_token":"sadsadasdasdasdas","expires_in":10800,"expire_in":10800}
`
# getStationData:
 `let datiStazioneMeteo:StationDataResponse;
 const dataStation:StationDataRequest = {} as 
 StationDataRequest;
        dataStation.access_token = auth.access_token;
        dataStation.device_id = 'YOUR_DEVICE_MAC_ADDR';
        datiStazioneMeteo = await 
 lib.getStationData(datiStation);
`
And now datiStazioneMeteo object returns a Promise of type StationDataResponse, contains all of data returned from your weather station.

This library is released under the GPLv3 License, feel free to contribute, improve code, and share suggestions.

At [this link](https://www.meteofiumicino.live) you will find a working example of usage of this library

Repository: [https://github.com/Federico-Rinaldi/netatmo-ts-api](https://github.com/Federico-Rinaldi/netatmo-ts-api)

Docs : [https://federico-rinaldi.github.io/netatmo-ts-api/index.html](https://federico-rinaldi.github.io/netatmo-ts-api/index.html)
Dynamic loading of angular components
Published: 2022-12-09 18:03:40

Usually when we load angular components in normal angular application, we used to call its selector name  from component html template. So its clear in run time as well as in compile, which component is going to be rendered in that particular section in the DOM.


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



Above given is a sample which we use normally for loading an angular component inside another component or calling it from a root component.

Other than this we also could use router outlet, hence we could mentioned the component name in the route path based on the route name in the URL.


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



Once if we call this in the template, we can specify component name in **RouterModules.ForRoot([path:'test',component:TestComponent])**

So above given are the possible 2 ways of loading a component in common.

But based on the requirements and scenarios we face in our work life, situations may arise to load components dynamically. 

It means, in the compile time, the angular compiler will not know which component is going to be rendered in the DOM.

we can take samples such as drag and drop. Suppose we have a requirement to create a widget dynamically. Given that there will be a blank <div> section and we need to drag and drop the template we need to that section in run time.

In such case, we need to specify component name dynamically within the drag and drop event and the component need to be rendered based on the template selection. Here consider each template means we drag and drop loads different angular components.

In angular/core node package, we do have a class called **ComponentFactoryResolver**, using which we can render a component at run time.

Below is the sample code of how we can render/load component dynamically. Here TestComponent is loaded dynamically and will be rendered inside the div element as shown in the HTML element.


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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lrwrvtia90qp8dibtxu.png)
Tips for building Scalable Web Applications in AWS
Tags: aws, programming, cloud, cloudskills
Published: 2022-12-09 18:01:09

# AWS Tips for building scalable web applications 

1. Scale out and up. Use a machine whose properties and resources are a good fit for your workload (monitoring Cloudwatch metrics to do this). Make your application as redundant as possible, Multi-Region and Multi-Availability Zone 

2. Leverage Serverless services like S3, Lambda, SQS, Fargate, and SES

3. Cache information using API Gateway, Redis, and CDN

4. Make your components Stateless. Your application should be agnostic about which server handles it 5. Embrace asynchronous communication with SQS and SNS. DynamoDB streams are a great way to notify and handle DB events

6. Fault isolation, avoid cascade failure, and make your system reliable by implementing circuit breakers, timeouts, and bulkheads. etc

7. Make your system Observable, implement metrics, tracing, and good logging

8. Split your business logic by domain, compose your business logic with functions, and your application with components

9. Embrace immutability in your code (Avoid concurrent issues) and infrastructure (Terraform)
Straight-forward steps to installing docker on an Ubuntu machine
Tags: ubuntu, docker, linux, tutorial
Published: 2022-12-09 18:00:36

## **Step 1**: Uninstall Old Versions

```plaintext
sudo apt-get remove docker docker-engine http://docker.io containerd runc
```

* * *

## **Step 2**: Update apt package and install dependencies

```plaintext
sudo apt-get update
```

```plaintext
 sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release
```

* * *

## **Step 3**: Add Docker's official GPG key

```plaintext
sudo mkdir -p /etc/apt/keyrings
```

```plaintext
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
```

* * *

## **Step 4**: Setup the repository

```plaintext
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```

* * *

## **Step 5**: Install Docker Engine

```plaintext
sudo apt-get update
```

```plaintext
sudo apt-get install docker-ce docker-ce-cli http://containerd.io docker-compose-plugin
```

* * *

## **Step 6**: Test the Installation

```plaintext
sudo service docker start
```

```plaintext
sudo docker run hello-world
```

* * *

## **Step 7**: Add your user to the Docker group

```plaintext
sudo usermod -aG docker $USER
```

*PS: when you log out and back in, you should be able to run docker commands without* `sudo`

* * *

**Now Docker has been successfully installed on your Ubuntu system 🍻**
Controlled Forms - Why do we need them?
Tags: javascript, react, webdev, beginners
Published: 2022-12-09 17:09:36

With learning react over the past three weeks, there was a lot of discussion about controlled forms vs. uncontrolled forms, and a big emphasis on why we should use controlled components instead. Let's first break down exactly what the difference is between the two..

## Forms -

Traditionally forms store & maintain their own state, and it will get updated when you query the DOM and pull the current value. React takes a different approach by taking the current value through props, storing the values to state inside the component, and monitoring any changes through the `onChange` callback. The main difference is that a *controlled* component is all handled completely by react. Take a look and this screenshot of what a controlled form looks like, the key indicators are having the input value set to the state, and having an `onChange` attribute on the input as well. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dilfbmbho5x79rkoetrw.png)
 
notice we attached the `onChange` callback to the input, and every time there is a change on the input it is triggering a helper function, which will be taking in that value and setting it to state, which is either declared inside the component or passed down from a parent component. We then take the `value=` attribute and assign our state to it. So now every time a change happens, it updates state, which is then assigned back to the value of the form in almost this looping type of way. This is what truly makes a controlled form, everything is handled within react and not pulled from the DOM. 

There is very little reason to ever choose an uncontrolled form compared to a controlled one, in most cases you will always want it to be controlled with React. It allows you to have more flexibility with managing state inside the components, you can also have several inputs for one piece of data, and also allows you to have dynamic inputs as well. 

If you are interested in learning more about [controlled forms](https://reactjs.org/docs/forms.html) take a look at the documentation from react.js.
Typescript my new java
Published: 2022-12-09 17:03:21

It was 1997 at that time we made web pages with CGI/Perl, i learned about javascript this year and for many years we never used it much: it was cumbersome.

Years latter with the advent of jQuery and Ajax we gave it more importance, still we used it only when it was necessary, i used to say: “the least javascript possible”. 

I had this ideas mainly for it’s typeless nature and the consecuent maintenance problems: the mix javascript + html was some kind of water and oil thing. 

For this time we replaced Perl by Java, from typeless to full typed.. prejudices keep us avoiding Java for years.

With the appearance of Angular 1.0 we smell something was going on, and when we meet React it made our heads explode, we were motivated to enter this new way of making Web: Front and Back separated completelly, moreover Mobile Applications. 

But when typescript appeared we avoided it… we avoided everything that smelled like Microsoft, same for vscode, our React tooling continued to be plain js + Atom and React for years, it was not rational, the free software licences of these technologies and its adoption were a signal that they were becoming good options.

On the other hand, when nodejs appeared and became known, my expression was “seriously ? how are they going to program server code with javascript: one thread and no types ? Just as in the previous case, it took us years to consider node.

In every human task, there is a lot of ignorance and prejudice, i was no exception to this.

Actually we've replaced of our Java backends by node + typescript ones, React + typescript for the front, ts for everything.

It sounds a little too much, i know, but, here is where we are now, ant it is fun.

To end our cake we have discovered the NX framework that mixed with vscode makes a very explosive mix; our primary complements are typeorm for databases and antd as a React component kit.

Of course the above using only Linux.

Thanks for reading.
EscrowByAgent Smart Contract Module in Bunzz
Tags: webdev, blockchain, programming
Published: 2022-12-09 16:50:17

We are excited to announce our new EscrowByAgent Module available in Bunzz and created by Yano.

With the Escrow smart contract freelancers can receive payments that are being put on hold until their work is finished and the service beneficiary approves the payment to be released.

This escrow module is intended for a freelancer service operated by agents. The sender deposits money for the recipient and sets agent for the payment. If the sender wants to release the payment, then he can ask the agent to release the payment for the recipient.

Deployer will set the owner fee percent and agent fee percent. The fee percent and cancelLockTime are fixed values.

With the Escrow contract you can create and manage Escrow pool payments. This contract is reviewed, it works on all EVM-chains and it’s available as OSS too.

You can access this Module [here](https://bit.ly/3VQQdgE).

## How to use

1. Deploy this contract. (Anybody can deploy this contract for an escrow service and make money from this service)

2. Create an escrow pool with recipient, agent and amount
   a) call depositByETH function to deposit ETH
   b) call deposit function to deposit ERC20 token

   _*You can't use the same address for recipient and agent. _

3. Once you (sender) allow the agent to release the payment 
(this option is outside of blockchain), the agent will release the payment.
   - call the release function by agent

 _*ownerFee will be transferred to smart contract owner
 *agentFee will be transferred to the agent_

4. Approve to cancel the payment when you want to cancel it.
   - call approveCancel function

_*sender, recipient and agent will approve for canceling_

5. Cancel the payment
 
_*call cancel function to cancel the payment_

This function works for these cases:
a) recipient and sender accepted.
b) sender accepted and recipient didn't 
_*needs agreement of agent_


## Functions

**#WRITE**

- release
- transferOwnership
- renounceOwnership
- depositByETH
- deposit
- cancel
- approveCancel


**#READ**

- refundStatusList
- feePercent
- pools
- owner
- poolCount
- cancelLockTime
- cancelable
- agentFeePercent

You can access this Module and the code [here](https://bit.ly/3VQQdgE).

If you still haven’t signed up to Bunzz, what are you waiting for?

Sign up [here](https://app.bunzz.dev/signup) and get your smart contracts deployed in 5 minutes through our great GUI.
Testing GraphQL
Tags: graphql, testing, api
Published: 2022-12-09 15:59:18

Testing a GraphQL API can seem intimidating at first, but it's actually quite simple. In this post, we'll go over the basics of testing a GraphQL API using the popular testing library Jest.

First, let's make sure we have Jest installed. If you're using npm, run the following command:

```
npm install --save-dev jest
```
Next, let's create a test file for our GraphQL API. In this example, we'll create a file called `graphql.test.js` in our project's `__tests__` directory.

In this file, we'll need to import the `request` method from the `jest-gql` library, which is a helper library for testing GraphQL APIs.

```
import { request } from 'jest-gql';
```
Next, let's define our GraphQL query. In this example, we'll be testing a simple query that fetches a user's name and email address:

```
const query = `
  query User($id: ID!) {
    user(id: $id) {
      name
      email
    }
  }
`;
```
Now, we can write our test. In this example, we'll test that the query returns the expected data for a user with an `id` of `1:`

```
test('fetches user data', async () => {
  const variables = { id: 1 };
  const { data } = await request(query, variables);

  expect(data.user.name).toEqual('John Doe');
  expect(data.user.email).toEqual('johndoe@example.com');
});
```
That's it, short but sweet! With just a few lines of code, we've written a test that will verify that our GraphQL API is working as expected.

Of course, there are many other things you can test with Jest, such as the response time, error handling, and more. For more information on testing with Jest, check out the [Jest documentation](https://jestjs.io/docs/getting-started).
Luos & Zephyr integration
Tags: microservices, github, luos, opensource
Published: 2022-12-09 16:31:36

🎉 One of the Luos users uLipe integrated Luos with a Zephyr RTOS module, allowing Luos to be used with an operating system instead of bare metal.

You will soon be able to check out his project and use it for your own applications.

Zephyr is an open-source software OS that provides secure and reliable functionalities for running applications on embedded systems.
Hyperiondev - Web Dev bootcamp - day 5
Tags: codenewbie, webdev, javascript, beginners
Published: 2022-12-09 16:01:51

**I hear the weekend calling**

Final live lecture for the week. Another marathon session but the number of unrelated questions is dropping or at least being fielded to the end of the session.
Clocking in at just of 12hrs "live" teaching time this week, plus the 15min mini-video tutorials for each Task. Add in the pdf teaching & task sheets, then the time solving the tasks. This may be down as a part-time bootcamp but I'd struggle to see many full-time workers being able to cope with this workload unless they're going to dedicate the weekend to study.
Being freelance myself I had already snagged myself a couple of weeks free-time to get a good head start on this course and boy oh boy am I glad I did.

Today I've knocked out tasks 9 & 10.

Task 9 - for loops.
Everyone's favourite flavour, we all love a good for loop to get things going right. 

Task 10 - Defensive programming / Debugging.
Intro to error types and some basic ways of dodging the most common early errors (syntax, runtime & logical). Nothing too advanced just read the messages, check the code, check variable names, spelling etc.

So far no rubber ducks.
CodeAtlas – The new hub for your developer team
Tags: codeatlas, github, productivity, showdev
Published: 2022-12-09 16:01:42

Announcing the Early Preview of our amazing new hub for software developers...

* Knowledge Bases to keep technical knowledge up-to-date.

* Catchups to keep everyone in-sync.

* Developer Tools at your fingertips which you will love to use.

It is early days and we have a clear, ambitious and exciting vision focused on powerful features and simple UX.

If you have a GitHub account, you should connect to CodeAtlas with one click... ↘ ↘ ↘ ↘ ↘ ↘

[https://codeatlas.xyz](https://codeatlas.xyz )