teleren/devto huggingface dataset:
React Props
Tags: javascript, react, webdev
Published: 2023-02-05 10:35:03

In React, everything treated as component.React Components using 'Props' to communicate each others.And Every parent component can pass information to it's child components using props.Using props you can pass an object, Arrays and functions.
Let's understand by an example.

There are two ways-
1. Using Props
2. Destructuring Array
Using bith of them we pass value

1. <u>Using Props</u>

```
// App.js (Parent component)
import React from 'react'
import Child from './Child'

const App= () => {
      
  return(
    <div>
      <h1>Hello Friends, My Name is Himanshu</h1> 

      <Child/>
    </div>
      )
}
export default App

```

```
// Child.js (Child Component)
import  React from "react";

const Child= () => {
  
  return (
    <h1>I live in  'Delhi' </h1>
  )
}
export default Child

```
<u>Output:-</u>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ednj402dkz71lqatf05.jpg)

Here, we have two components one App.js (parent) and Child.js(child) and there is not passes through.Now you can see in `child.js` we print city name(in my case delhi) but if we want parent component decided city name and parent passes city name to child.js using props. Here how can we do it.


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

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

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

2. <u>Destructuring Array</u>

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


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

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

Here we don't need use props.cityName etc for everytime to pass information to child components . here we directly passes the value in child components.

**In this article I try to explain Props and how to passess information to child.One noted that using these method describe above we only passes info top to down not down to top mean parent passes info not child passes to parent component. how child component passes info to parent component, we will discuss in upcoming article.
Lastly if you like my article you can follow me for more and feel free you can give me any suggestion.
Thank You**
Increase service limits/quotas in AWS
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-02-05 10:27:49

[36/100] #100DaysOfCloud Today, I created a service quota increase request.

Your AWS account has default quotas, formerly referred to as limits, for each AWS service. Unless otherwise noted, each quota is Region-specific. You can request increases for some quotas, and other quotas cannot be increased.

Service Quotas is an AWS service that helps you manage your quotas for many AWS services, from one location. Along with looking up the quota values, you can also request a quota increase from the Service Quotas console.

AWS Support might approve, deny, or partially approve your requests.

You can try do it by yourself by following the steps from the link below: [GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/036/Readme.md)
3. All'interno di un agente: architettura e le funzioni agenti
Tags: computerscience
Published: 2023-02-05 10:21:32

Gli agenti sono costituiti da un corpo che può essere costituito da diversi elementi, concreti o meno. Quando un agente ha un corpo fisico, esso prende il nome di agente incarnato, un esempio sono i robot. Gli agenti ricevono informazioni tramite i sensori, le quali verranno elaborate e condizioneranno le azioni che l'agente effettuerà. Vi sono diversi tipi di sensori e producono delle informazioni deboli, del tipo "il sensore S ha prodotto il valore v". In ultima analisi, un agente è costituito da attuatori o effettori, mediante i quali l'agente agisce nell'ambiente. Gli agenti inviano dei comandi agli attuatori ed eseguono azioni per trovare maggiori informazioni sul mondo.

L'insieme di uno o più agenti e l'ambiente in cui operano prende il nome di sistema ad agenti. L'agente riceve degli stimoli dall'ambiente ed esegue delle azioni in esso. Un agente è costituito da un body (corpo) e da un controller. Il controller riceve delle percezioni dal corpo e risponde con dei comandi. Vi sono diversi tipi di stimoli, dalla luce al suono, fino a considerare le informazioni ottenute da un database o da un sito. Queste informazioni vengono elaborate dal controller, il quale decide le azioni che l'agente deve compiere. Possiamo considerare il controller come il cervello dell'agente.
2. Spazio di progettazione di un agente
Tags: computerscience
Published: 2023-02-05 10:19:00

Gli agenti che agiscono in ambienti variano in complessità, ognuno dei quali richiederà un certo livello di complessità nella sua progettazione. Occorre definire uno spazio di progettazione in cui operare per lo sviluppo di un agente, ogni spazio avrà diverse dimensioni in cui operare. La prima dimensione è la modularità, ovvero la misura in cui un sistema può essere scomposto in moduli che possono essere studiati e sviluppati separatamente, ma che collaborano tra di loro per garantire il perfetto funzionamento dell'agente. Tramite la modularità si riduce la complessità, scomponendo in maniera gerarchica i vari moduli. In questa dimensione, la struttura di un agente può essere piatta, se non vi è alcuna organizzazione, modulare, il sistema è decomposto in moduli che interagiscono tra di loro, oppure gerarchica, nella quale i moduli sono scomposti in moduli più semplici.

In una struttura piatta o modulare l'agente tipicamente ragione a un singolo livello di astrazione, mentre in una struttura gerarchica l'agente ragiona a più livelli di astrazione in cui i livelli inferiori ragionano a un livello di astrazione più basso. Una scomposizione gerarchica è importante per ridurre la complessità della costruzione di un agente intelligente che agisce in un ambiente complesso. L'organizzazione gerarchica fa si che i moduli a livello più alto non debbano curarsi di dettagli e operazioni che vengono delegate ai livelli inferiori. Quando si progetta per attività di piccole o medie dimensioni, si potrebbe anche ignorare la scomposizione gerarchica, anche se è una buona pratica attuarla in ogni caso.
1 - Introduzione all' ingegneria della conoscenza
Tags: computerscience
Published: 2023-02-05 10:16:00

Questa serie di articoli riprende i miei appunti relativi al corso di ingegneria della conoscenza, della facoltà di informatica presso l'università Aldo Moro di Bari. Racchiudo in questi articoli non solo gli appunti derivanti dalle slide del corso condivise dal professore Fanizzi, ma anche gli appunti relativi al libro "Artificial Intelligence, founbdations of computational agents", scritto da Poole e Mackworth. Entrerei subito nel merito della materia dando una prima definizione di intelligenza artificiale, ovvero il campo che studia la sintesi e l'analisi di agenti computazionali che agiscono in modo intelligente. Ma co'è un agente? Esso può essere definito come qualsiasi oggetto presente in un ambiente e che interagisce con esso.
PostCSS
Tags: css, postcss
Published: 2023-02-05 10:07:59

---
title: PostCSS
published: true
date: 2023-02-05 10:04:57 UTC
tags: css, postcss
canonical_url: https://blog.nicm42.co.uk/postcss
---

It's been a while since I tried something new. This time I tried PostCSS. It took me a while to work out how to install it and get it working with Vite because there weren't any Vite-specific instructions for PostCSS. And then I discovered that it's already included with Vite. All I had to do was to edit the config to match their instructions, then add plugins.

## Spiffing

[postcss-spiffing](https://github.com/HashanP/postcss-spiffing) was the reason I wanted to use PostCSS in the first place. It lets you use British English spellings (eg colour and centre) and changes some other words. The thing that amuses me most about it is that it uses `!please` instead of `!important` which is pretty much what I'm saying when I use it.

The thing I used it on was only small so I only used colour and centre. Which was not as useful as I thought it would be. VS Code underlined them because it didn't recognise them. And when I started writing _back_ it would offer me the option of `background-color` which wasn't quite what I wanted.

But I also used it because it looked like it would be fun and I did have fun with it.

There are other similar plugins for other countries. I particularly like that the [Canadian one](https://github.com/chancancode/postcss-canadian-stylesheets) has replaced `!important` with `!sorry`

## Hocus

I wanted to see what other plugins there were, so I looked at the ['Fun' section of plugins on the website](https://www.postcss.parts/tag/fun). There were a few things that looked amusing, but one that was particularly interesting: [postcss-hocus](https://github.com/kilian/postcss-hocus).

It is a lot of typing/annoying to write:

```css
something:hover,
something:focus {
    /* Some CSS in here */
}

```

What hocus does is to replace the hover and focus with `:hocus`. Much less typing. There's also an option to use `:pocus` which includes `:active` as well as hover and focus.

## Conclusion

Using PostCSS was fun and judging by the number of plugins I can see that you can do a lot with it. Including making your CSS like Sass - there's literally a whole section of plugins for that. Which makes me wonder if it wouldn't just be simpler to use Sass in the first place.

But there are other plugins I looked at where I can see the use for them. There's even one that will do a click event for you, so you don't have to break out the JavaScript. The only trouble is that you could use so many that your CSS becomes indecipherable if other people/future you looking at it aren't familiar with the plugins you've used.

Aside from that, I loved it and would absolutely be up for using it again.
HTTP Methods and REST APIs
Tags: rest, api, http, designpatterns
Published: 2023-01-31 04:22:01

HTTP methods, also known as HTTP verbs, are a core part of REST API design. They represent the different actions that can be performed on a resource. The following are the most common HTTP methods used in REST APIs:

**GET**: retrieves a representation of a resource
**POST**: creates a new resource
**PUT**: updates an existing resource
**DELETE**: deletes a resource

HTTP methods in REST APIs are crucial to their design, allowing clients to interact with resources clearly and consistently. The HTTP method in a request indicates the intended action, and the server can respond accordingly.

For example, a GET request to /users/{id} would retrieve a representation of the user resource, while a DELETE request to /users/{id} would delete the user resource.

This combination of resource-oriented URIs and HTTP methods is a significant improvement over the older Simple Object Access Protocol (SOAP) APIs. In SOAP APIs, the intended action was determined by the structure of the request rather than the HTTP method used. SOAP made it harder for clients to understand the API, and adding new API functionality even harder.

In contrast, REST APIs use standard HTTP methods and well-defined URIs to provide a clear and straightforward way for clients to interact with resources. HTTP methods make REST APIs easier to understand, easier to use, and easier to extend, making them a better choice for modern web services.

In conclusion, HTTP methods play a crucial role in REST API design, and their use in combination with resource-oriented URIs provides a clear and straightforward way for clients to interact with resources. The use of HTTP methods in REST APIs is a significant improvement over older SOAP APIs, and provides a more scalable and maintainable solution for modern web services.
why export default not accepting in const
Published: 2023-02-05 09:55:46

**Uncovered part to javascript 1**

`const` is a javascript keyword for decalring variable,
`const a = 3`
you can declare multiple vatiable in const like

```
const a = 4;
      b = 9;
```
This work well but when you used `export` and `default` javascript does not support `export` and `default` together.

If you want to assign export in const you need to do the fellowing.
```
export const = [
name: 'jim',
work: 'FBI'
]
``` 

> Bonus: when you writing json last value and array should not end with `,`.

If you want to use export and default in javascript means then you should used

`function sum(a, b) {
   return a + b;
}`

javascript throw error when you write the export default in const.


**Happy Learning**
setState in Functional component
Tags: react, webdev
Published: 2023-02-05 09:54:29

When you use Functional Component to develop your ReactJS application. Sometime, you need to use state in your component, and it maybe cause somethings like this:
```tsx
const [error, setError] = useState<string | undefined>(undefined);
const [value, setValue] = useState<Record<string, any>>({});
// and n lines to declare states...
```

### Basic
So, to reduce these lines, I recommend you should use another solution to declare states for your component. That is `useReducer` :)

And this is my solution when use it in my component:
```tsx
type tComponentState = {
  error: string | undefined;
  value: Record<string, any>;
  // ...n state's type
}

const [state, setState] = useReducer((
  prev: tComponentState,
  after: Partial<tComponentState>,
) => ({ ...prev, ...after }), {
  error: undefined,
  value: {},
});

// update new value for any state
setState({ value: { field: '123' }});
// or update n states together
setState({
  value: { field: '456' },
  error: 'Invalid format',
});
```

And now, your code will easier to read, or maintenance, or add some states :)

### High level
Yep, sometimes, you will need to verify your data before update your state, and now, you can do it inside your `useReducer`, like this:
```tsx
const [state, setState] = useReducer((
  prev: tComponentState,
  after: Partial<tComponentState>,
) => {
  const stateNeedUpdate = { ...prev, ...after };
  if (!value || !value.field || Number.isNaN(value.field)) {
    stateNeedUpdate.value.field = '';
  }
  return stateNeedUpdate;
}, {
  error: undefined,
  value: {},
});
```
DynamoDB - Local Secondary Indexes and Global Secondary Indexes
Published: 2023-02-05 09:47:00

**Introduction**:
DynamoDB is a NoSQL database provided by Amazon Web Services. One of the key features of DynamoDB is its ability to create indexes, which enable faster querying of data. In this article, we will discuss the two types of indexes available in DynamoDB - Local Secondary Indexes and Global Secondary Indexes.
 
Local Secondary Indexes (LSI) are indexes that use the same partition key as the original table but a different sort key. LSIs are created when the table is first created and can only be used for querying specific data columns.

Global Secondary Indexes (GSI) use a different partition key and sort key from the original table. This allows for a different view of the data and gives greater flexibility to the user as GSIs can be created at any time after the table is created.

**Conclusion**:
In conclusion, DynamoDB indexes provide a faster and more efficient way of querying data. LSIs are useful for specific data columns and must be created at the same time as the table, while GSIs offer greater flexibility as they can be created at any time and use different partition and sort keys. Understanding the differences between these two types of indexes is important in order to effectively utilize DynamoDB's capabilities.


🌎🙂😎 Let's Connect!
My Twitter: [@muzeyrozcan](https://twitter.com/muzeyrozcan)
[My Substack ](https://muzeyr.substack.com/)(here I will publish more in-depth articles)
creating a window in SFML
Published: 2023-02-05 07:12:51

**step 1**
first of all you need to [install SFML](https://www.sfml-dev.org/download.php). I am using [ubuntu](ubuntu.com) and i found the linux installation guide [here](https://www.sfml-dev.org/tutorials/2.5/start-linux.php).

**step 2**
next, you need to create a window you can do this by doing:

```cpp
#include <SFML/Graphics.hpp>

int main()
{
    // create the window
    sf::RenderWindow window(sf::VideoMode(800, 600), "Hello window!");

    // run the program as long as the window is open
    while (window.isOpen())
    {
        // check all the window's events that were triggered since the last iteration of the loop
        sf::Event event;
        while (window.pollEvent(event))
        {
            // "close requested" event: we close the window
            if (event.type == sf::Event::Closed)
                window.close();
        }

        // clear the window with black color
        window.clear(sf::Color::Black);

        // draw everything here...
        // window.draw(...);

        // end the current frame
        window.display();
    }

    return 0;
}
```
this will give us a black window named hello window!

**step 3**
to compile we cannot just do g++ main.cpp. We have to include some library's we can compile this by doing:

```sh
g++ main.cpp -o main -lsfml-graphics -lsfml-window -lsfml-system
```

**step 4**
you can run it by doing: `./main`

**step 6**
enjoy and have a good day
JS Range Function
Published: 2023-02-05 09:26:02

const range = (start, end, step = 1) => {
  let output = [];

  if (typeof end === 'undefined') {
    end = start;
    start = 0;
  }

  for (let i = start; i < end; i += step) {
    output.push(i);
  }

  return output;
};
Mulaiweb.com Choosing a Website Development Service
Published: 2023-02-05 09:09:41

Mulaiweb.com Choosing a [Website Development Service](https://mulaiweb.com/): What to Consider

- Experience and Expertise: Look for a service with a proven track record of delivering high-quality websites and the expertise to build a website that meets your specific needs.

- Portfolio and Case Studies: Review the portfolio of the service to see examples of their previous work and check for case studies that demonstrate their ability to deliver results for clients in your industry.

- Customization Options: Make sure the service offers customization options that allow you to create a unique and personalized website that reflects your brand and meets your specific needs.

- Responsiveness and User Experience: A website that is easy to navigate and use is essential for a positive user experience. Look for a service that offers responsive design and prioritizes user experience.

- Technical Support and Maintenance: The service should provide technical support and ongoing maintenance to ensure the website is functioning properly and remains up-to-date.

- Cost and Budget: Determine your budget and look for a service that offers competitive pricing while still delivering high-quality work.

- Project Timeline: Make sure the service has a clear project timeline and can deliver the website within your desired timeframe.

- Communication and Collaboration: Good communication and collaboration are essential for a successful website development project. Look for a service that values transparency and open communication throughout the project.

- Search Engine Optimization (SEO): A website that is optimized for search engines will be easier for customers to find and can drive more traffic to your site. Look for a service that offers SEO services to help improve your website's visibility.

- Referrals and Recommendations: Ask for referrals and recommendations from friends, colleagues, and industry contacts to help you find a reliable and 
trustworthy website development service.

By considering these factors, you can choose a [website development service](https://mulaiweb.com/jasa-pembuatan-website/) that meets your needs and delivers a high-quality website that will help grow your business.
By Mulaiweb.com [Jasa Pembuatan Website](https://mulaiweb.com/) di Indonesia
GitHub Copilot Labs blew my mind with the Custom brush
Tags: vscode, programming, ai, webdev
Published: 2023-02-05 09:04:06

{% embed https://youtu.be/sEW1BriD-u4 %}

Sorry about the mouse cursor not showing up in this video! If you're not already using the GitHub Copilot Labs extension for VSCode then you missing out on some awesome features. In this video I show you one feature that blew my mind.

You can install Github Copilot Labs here https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-labs

Find out all the details about Github Copilot Labs Here: https://githubnext.com/projects/copilot-labs/#how-to-use-copilot-labs
AWS Mobile and Web apps Cheat-sheet/Write-up
Tags: aws, analytics, techlead, solutionsarchitect
Published: 2023-02-05 09:00:00

---
title: AWS Mobile and Web apps Cheat-sheet/Write-up 
published: true
series: AWS Solutions Architect Associate Certificate Cheat-sheets 
description: Cheat-sheets about services and tools for mobile and web application development for Solutions Architect Certification (but not only)
tags: #aws, #analytics, #techlead, #solutionsarchitect
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izf0drrulz2xno0zol3h.png
published_at: 2023-02-05 09:00 +0000
---

Another very short write-up about some of the services that might appear in the exam certification.

# Amplify

It provides tools and features for building full-stack applications on AWS (even with no or very little backend experience)
Amplify Studio is a visual interface to define data model, user authentication and file storage. 
Broad sets of Amplify libraries for iOS, Android, Flutter, React Native and Web
Amplify Hosting is a fully managed CI/CD and hosting service


I had used [Amplify](https://aws.amazon.com/de/amplify/) in the past just to set up authentication in a React application and to get S3 signed urls, but not much more.  personally, as much as I find Amplify studio useful for "getting stuff done quickly" I don't find that much interesting for production workloads in big teams

# AppSync
is a fully managed service that makes easy to develop GraphQL APIs, so that application can access, manipulate and receive real-time updates from multiple data sources ( resolvers will grab and aggregate sources like Elasticsearch, DynamoDb,  Lambda)
it automatically scales, provides server-side data caching ( without need of managing cache clusters )

AWS Serverless Hero Yan Cui has [some very interesting articles](https://theburningmonk.com/2020/07/how-i-scaled-an-appsync-project-to-200-resolvers/) ( and courses ) about AppSync, defenetely worth a look!

[![amplify and appsync](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j11ydyntn0jnsqslfy9.png)]()


#AWS Device Farm

is an app testing service that lets you test and interact with Android, iOs and web apps on many devices at once.

> No need to purchase and maintain a collection of devices for you dev and qa testing anymore. 

you can perform **automated testing** and **manual testing with through remote access** to interact with a real device through the browser.

Devices are non-rooted and any appropriate app can be installed.
you can simulate real world environments, selecting languages, locations and so on.

#AWS Pinpoint
Amazon Pinpoint allow to deliver customer communications across channels, segments, and campaigns at scale.

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

- collect app usage data
- built in analytics
- import data from s3 or redshift ( or csv files ) to build segments
- build campaign messages and schedule campaigns
- analyse campaigns 
- funnel analytics