teleren/devto huggingface dataset:
Best free images website for development
Tags: images, namangarg, development
Published: 2022-12-10 10:21:13

## Introduction
There are several websites that offer free images that can be used for coding projects. These sites offer a wide range of high-quality, royalty-free images that can be used for personal or commercial projects. It's always a good idea to read the terms of use for each website to make sure you are using the images in accordance with the license.

## Websites
1) Unsplash https://unsplash.com/
2) Pexels https://www.pexels.com/
3) Pixabay https://pixabay.com/
4) StockSnap.io https://stocksnap.io/
5) Freepik https://www.freepik.com/
6) Life of Pix https://www.lifeofpix.com/
7) Gratisography https://gratisography.com/
8) NegativeSpace https://negativespace.co/
9) Kaboompics https://kaboompics.com/
10) OpenClipart https://openclipart.org/

## Conclusion
Thanks for following along with the thread! Let us know what you think in the comments.
Also Follow me on Twitter: https://twitter.com/NamanGarg2075
What is ChatGPT and will it replace programmer?
Published: 2022-12-10 10:21:11

**ChatGPT is a large language model trained by OpenAI. It is capable of generating human-like text and holding conversational exchanges with people**

As natural language processing (NLP) technology continues to evolve, we are seeing more and more impressive developments in the field. One of the latest NLP models to make waves is ChatGPT, developed by OpenAI. In this blog post, we will take a closer look at ChatGPT and answer the question: will it replace programmers?
First, let’s define what ChatGPT is. ChatGPT is a variant of the GPT-3 model, which was developed by OpenAI and is considered to be one of the most advanced language processing systems in existence. GPT-3 is a large-scale model that uses deep learning to generate human-like responses to text input. ChatGPT is a smaller version of the GPT-3 model, designed specifically for conversational language understanding.
One of the main applications of ChatGPT is in chatbots and virtual assistants. With its ability to generate human-like responses to text input, ChatGPT can be used to create chatbots that can hold natural conversations with users. This can be useful in a variety of settings, from customer service to personal assistants.
But what about the question of whether ChatGPT will replace programmers? The short answer is no. While ChatGPT is a powerful tool that can generate human-like responses to text input, it does not have the ability to execute tasks or write code. This means that programmers are still needed to develop and maintain the systems that use ChatGPT.
Furthermore, ChatGPT is not capable of understanding the logic and functionality of a system in the same way that a programmer can. While it can generate responses based on the input it receives, it does not have the ability to understand the underlying structure and functionality of a system. In other words, ChatGPT is not capable of the kind of critical thinking and problem-solving that is necessary for programming.
It’s important to note that ChatGPT is not intended to replace programmers. Instead, it is a tool that can be used by programmers to improve the user experience of their systems. By incorporating ChatGPT into their systems, programmers can create more natural and human-like interactions with users, which can improve the overall user experience.
Additionally, ChatGPT can help programmers save time and resources. By using ChatGPT to generate responses to common questions and requests, programmers can focus on more complex tasks, rather than spending time and effort on creating responses to simple, repetitive queries.
In conclusion, ChatGPT is an impressive technology that has the potential to improve natural language processing applications. However, it is not capable of replacing programmers. While it can generate human-like responses to text input, it does not have the ability to execute tasks or understand the logic and functionality of a system. As such, programmers are still needed to develop and maintain the systems that use ChatGPT.
20 Useful lines of code that can be used for C# scripting in Unity | pt:1
Tags: unity3d, csharp, beginners, tutorial
Published: 2022-12-10 10:05:56

**_Here are 20 useful lines of code for C# scripting in Unity:_**

1.`transform.position` - This line of code allows you to access and modify the position of a game object in the scene.

2.`Instantiate(gameObject)` - This line of code allows you to instantiate (create) a new instance of a game object at runtime.

3.`Destroy(gameObject)` - This line of code allows you to destroy a game object from the scene.

4.`GetComponent<T>()` - This line of code allows you to access a component of a specific type (T) attached to a game object.

5.`Input.GetKeyDown(KeyCode.Key)` - This line of code allows you to check if a specific keyboard key (Key) has been pressed down.

6.`Random.Range(min, max)` - This line of code generates a random number between the minimum (min) and maximum (max) values specified.

7.`Time.deltaTime` - This line of code returns the time in seconds since the last frame was rendered.

8.`Mathf.Clamp(value, min, max)` - This line of code clamps (restricts) a value (value) to be between the minimum (min) and maximum (max) values specified.

9.`Vector3.Lerp(a, b, t)` - This line of code performs a linear interpolation (lerp) between two 3D vectors (a and b) by a factor (t).

10.`Quaternion.Euler(x, y, z)` - This line of code creates a new quaternion representing a rotation around the x, y, and z axes.

11.`rigidbody.velocity` - This line of code allows you to access and modify the velocity of a rigidbody attached to a game object.

12.`collider.isTrigger` - This line of code allows you to enable or disable the trigger behavior of a collider attached to a game object.

13.`AudioSource.PlayOneShot(clip)` - This line of code plays a one-time audio clip (clip) using an AudioSource attached to a game object.

14.`Application.LoadLevel(name)` - This line of code allows you to load a new level (name) from the build settings.

15.`Screen.width` and `Screen.height` - These lines of code allow you to access the current width and height of the game screen.

16.`GUILayout.Label(text)` - This line of code displays a text label (text) using the GUILayout system.

17.`PlayerPrefs.SetInt(key, value)` - This line of code allows you to save an integer value (value) using a key (key) in the PlayerPrefs storage.

18.`Physics.Raycast(origin, direction)` - This line of code performs a raycast in the specified direction (direction) from the origin (origin) and returns the first hit.

19.`Debug.Log(message)` - This line of code outputs a message (message) to the console for debugging purposes.

20.`coroutine = StartCoroutine(method)` - This line of code starts a new coroutine (method) and stores the reference in a variable (coroutine) for later use.

**_Thanks for reading..._**

{% embed https://dev.to/rizmyabdulla/20-useful-lines-of-code-that-can-be-used-for-c-scripting-in-unity-pt2-h4i %}
Flex with Tailwindcss
Tags: webdev, javascript, beginners, css
Published: 2022-12-10 10:02:55

{% embed https://www.youtube.com/watch?v=eyBUOf7cHAA %}

## Flex CSS With TailwindCSS: A Quick Overview
Flex CSS has quickly become one of the most popular ways to create responsive and mobile-friendly web designs. With the rise in popularity of TailwindCSS, the powerful and versatile CSS framework, it's no surprise that Flex CSS has become popular for TailwindCSS users. Flex CSS allows TailwindCSS users to easily create responsive layouts without having to write complex code. In this article, we'll take a quick look at what Flex CSS is and how it can be used with TailwindCSS.

## What is Flex CSS?
Flex CSS is a CSS layout module that allows developers to create flexible and responsive layouts. It is an alternative to the traditional grid-based layouts, and it provides a more efficient way to create complex, responsive designs. Flex CSS is a great choice for TailwindCSS users because it allows them to quickly and easily create responsive layouts without having to write complex code.

## Using Flex CSS With TailwindCSS
Using Flex CSS with TailwindCSS is quite simple. All you need to do is add the Flex CSS classes to your TailwindCSS declarations. TailwindCSS provides a wide range of Flex CSS classes, such as flex-grow, flex-shrink, flex-basis, and more, which you can use to quickly create responsive layouts. With TailwindCSS, you can also combine Flex CSS with other TailwindCSS features such as breakpoints, spacing, and more, to create more complex responsive layouts.

Flex CSS is a great choice for TailwindCSS users who want to create responsive and mobile-friendly designs quickly and easily. With the wide range of Flex CSS classes available in TailwindCSS, you can quickly create complex, responsive layouts without having to write complex code. If you're looking for a way to create responsive designs quickly and easily, then Flex CSS with TailwindCSS is definitely worth looking into.

Guillaume Duhan
React Query - Data Fetching
Tags: programming, webdev, react, tutorial
Published: 2022-12-10 09:48:45

React Query is a data fetching library for React that makes data fetching, caching, and synchronizing easier. Now let's take a look at how we can fetch data using React Query.

**Providing query client:**

The first and foremost method of using React Query is to provide a query client to your application.


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

As we see above, we are importing QueryClientProvider and QueryClient from React Query. We are using QueryClient to handle the global data caching. The QueryClientProvider component can be used to provide a QueryClient to our application.


**Creating query functions:**

Query functions are those that are used to fetch data from the server.


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

As we see above, getPosts is a query function that fetches all the posts. In our case, we are using Axios to fetch the data.

**Using the useQuery hook to fetch data from the network and cache it:**



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



As we see above, we are importing useQuery from React Query. The useQuery hook accepts two parameters. The first one is key; in our case, it is "posts." Keys are generally used to uniquely identify a particular HTTP request. The second parameter for useQuery is a query function, which in our case is "getPosts". Query functions are used to fetch data from the server. useQuery always returns some of the most useful properties which are as listed below.

-    data
-    dataUpdatedAt
-    error
-    errorUpdatedAt
-    failureCount
-    isError
-    isFetched
-    isFetchedAfterMount
-    isFetching
-    isIdle
-    isLoading
-    isLoadingError
-    isPlaceholderData
-    isPreviousData
-    isRefetchError
-    isRefetching
-    isStale
-    isSuccess
-    refetch
-    remove
-    status

In our case we are using only isLoading, isError and data properties.The data that is fetched from the server is always stored in the data property returned by the useQuery hook. isLoading is a boolean property value that is set to true when data fetching is in progress. isError is also a boolean property value that is set to true when there is an error while fetching data from the server.
Chunk mechanism in laravel
Published: 2022-12-10 09:29:11

صديقى العزيز مطور لارافيل اهلا بيك مره اخرى فى مقالاتى المتواضعة جدا انهارده هنتعرف  عن كيفية عمل ال 
Chunk
وازاى هى بتشتغل قبل ما نبدأ سريعا كده هى اصلا الفانكشن دى بتعمل ايه هى ببساطه لو عندك استعلام هيرجع بداتا كتيره من الداتابيز فا هى بتقسم الاستعلام ده لاستعلامات صغيره على حسب عدد معين انت بتبعته كا براميتر أول فى الفانكشن 

وده مثال عليها 

```php 
DB::table('users')->orderBy('id')->chunk(5, function ($users) {
      foreach($users as $user){
         echo $user->name . "<br>";
      }
});

```

خلينا الاول نشرح الكود ده واحده واحده هنا لو انا عندى 100 مستخدم فى الداتا بيز فا هيعمل 20 استعلام لانها واخده رقم 5 كا براميتر أول فا 100\5 = 20  طبعا هنا المثال على مستخدمين قليلين لكن لو عندك الافات فا اكيد مش هتعمل جلب ل 5 فى كل مره  المهم هنا اللى بيحصل ايه بقا ان اول مره بيروح ينفذ الاستعلام ده 
```sql
select * from `users` order by `id` asc limit 5 offset 0  
```
هنا بقا اللى حصل اخد الرقم 5 اللى انا بعته مع الفانكشن كا اول براميتر وكتبها عند ال 
limit 
وبدأ ال 
offset 0 
هيرجع بقا يكتب تانى استعلام ويبدأ من ال 
offset 5  
بالشكل ده 
```sql
select * from `users` order by `id` asc limit 5 offset 5 
```

فى الاستعلام الثالث نفس الكلام لكن هيبدأ من ال 
offset 10
```sql
select * from `users` order by `id` asc limit 5 offset 10
```
وهكذا للنهايه وطبعا هنا لازما اكتب ال 
orderby id 
علشان يرتبهم ويعرف ال 
offset 
ماشى ازاى 

وبس كده عزيزى مبرمج اللارفيل 
متنساش اللايك والفولو الجميل وشير بقا والحاجات الحلوه دى 
سلام عليكم
ente Auth
Tags: showdev, security, opensource
Published: 2022-12-10 09:22:38

_Free and Open source E2EE Authenticator app by the makers of ente Photos_

ente Photos was born out of our own needs, as casual photographers who like to cherish memories.

Over the last year, while developing our infrastructure, we had a hard time finding a place to preserve our two-factor secrets.

Given that ente already had a platform for reliably storing and syncing data, encrypted end-to-end, we decided to leverage that to cure this itch.

Introducing,

### ente Auth

![Screenshots of the Authenticator app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bun83t7hdfkxi25p24v4.png)

ente Auth is an open-source authenticator app that will let you backup and view your 2FA secrets. You can find more information about the project here: [github.com/ente-io/auth](https://github.com/ente-io/auth#readme)

In an attempt to give back to the community who have helped us build all that we have, this service will be offered free of cost.

If in the future we convert this to a paid service, existing users will be grandfathered in. So please sign up @ [ente.io/auth](/auth)

Now back to building the best photos app :)
Introducing Fouita Widgets
Tags: fouita, marketing, staticwebapps, news
Published: 2022-12-10 09:22:15

Simple Widgets designed to overcome the challenge of capturing leads and engaging customers.

The website: [fouita.com](https://fouita.com)
Explore widgets: [fouita.com/explore](https://fouita.com)

One challenge that many website owners face when trying to capture leads is that visitors may not always be ready to provide their contact information or commit to a purchase. This can be due to a variety of reasons, such as a lack of trust in the website or product, a lack of understanding of the value proposition, or simply not being at the right stage in the buying process.

To overcome this challenge, website owners can use various tactics to encourage visitors to provide their contact information or make a purchase. Some examples of these tactics include:

- Offering a valuable and compelling lead magnet, such as a free e-book or webinar, in exchange for the visitor's contact information
- Providing clear and concise information about the value proposition of the product or service, and highlighting the benefits and features that the visitor will receive
- Using persuasive and persuasive language and design elements on the website to influence the visitor's decision
- Creating a sense of urgency or scarcity by offering limited time discounts or promotions

By using these tactics, website owners can increase the likelihood that visitors will provide their contact information or make a purchase, and thus capture more leads.

### Embeddable widgets that can help:

- [Promotion widgets](https://fouita.com/explore/promotion/popup-shop-promotion)
- [Feedback widgets](https://fouita.com/explore/feedback/inline-feedback)
- [Contact widgets](https://fouita.com/explore/contact/popup-contact)
- [Subscription widgets](https://fouita.com/explore/subscription/popup-subscription)
- [Cookies widgets](https://fouita.com/explore/cookies/popup-cookies)
- [Content widgets](https://fouita.com/explore/content/content-features)



Hope you like it!
Thank you!
Plugin "react" was conflicted between "package.json..." and "BaseConfig..."
Tags: react, webdev, javascript, programming
Published: 2022-12-10 09:17:09

I tried to start my react app by starting my server - `npm start`
But I kept on encountering the error above on my browser.

**Here is why:**

I was running my project on the right folder, but canonically the wrong one. (The capitalization of the path to the folder should be correctly capitalized as it is in your directories)

**For example**
D:/dev/projects/react-app-1 

D:/Dev/Projects/React-app-1

The above paths are not identical.
What is Subnet on AWS VPC?
Tags: subnet, vpc, security, network
Published: 2022-12-10 09:08:19

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

Amazon Web Services (AWS) Virtual Private Cloud (VPC) is a cloud computing service that allows users to create and manage their own virtual network in the cloud. This allows users to have complete control over their network and resources, including the ability to customize subnetting for their VPC.

Subnets in AWS VPC are used to divide a VPC into multiple logical networks. This allows users to isolate resources and control access to those resources. Subnets can be either public or private, with public subnets having access to the internet and private subnets not having access to the internet.

Creating subnets in AWS VPC is easy and can be done through the AWS Management Console. First, the user must select their VPC and then click on the “Subnets” tab. From there, the user can select “Create Subnet” and enter the name, VPC, and availability zone for the subnet. They can also specify whether the subnet is public or private.

Once the subnet is created, the user can then add resources to the subnet, such as EC2 instances or RDS databases. The user can also control access to the subnet through the use of security groups and network ACLs.

One important consideration when creating subnets in AWS VPC is the CIDR block. CIDR (Classless Inter-Domain Routing) blocks are used to specify the range of IP addresses that can be used in a subnet. The user must specify a CIDR block when creating a subnet, and the CIDR block must be within the VPC’s CIDR block range.

Another important consideration is the availability zone for the subnet. AWS VPC allows users to create subnets in multiple availability zones within a region. This provides high availability and redundancy for the subnet and its resources.

Subnetting can also be useful for segmenting a VPC into different environments, such as development, staging, and production. This allows users to isolate resources and control access between environments.

There are also additional benefits to using subnets in AWS VPC. For example, users can create a NAT gateway in a public subnet and use it to enable internet access for private subnets. This allows resources in the private subnet to access the internet without having a public IP address.

Users can also use VPC peering to connect two VPCs together and share resources between them. This can be useful for creating a more complex network architecture, such as connecting a VPC in one region to a VPC in another region.

**Conclusion**

Subnets in AWS VPC provide users with the ability to customize and control their virtual network in the cloud. Subnetting allows users to segment their VPC into multiple logical networks, isolate resources, and control access to those resources. It also provides benefits such as high availability and redundancy, and the ability to connect VPCs together. Overall, using subnets in AWS VPC can greatly enhance the flexibility and functionality of a cloud-based network.
Script to init aws cdk in a non empty directory
Tags: aws, cdk, powershell, cloud
Published: 2022-12-10 08:58:44

Recently I tried to run the `cdk init` command using the aws cdk command line interface, and I came to realize that aws cdk does not allow one to initialize a cdk app in a non-empty directory. Upon conducting a quick google search, I came across this [stackoverflow post](https://stackoverflow.com/questions/63348336/aws-cdk-init-for-an-existing-project) where I learned that the solution is to initialize in an empty directory and manually merge that directory with the project directory.

Hence, I decided to run this simple powershell script that tries to automate this process. I hope you find this useful and please do let me know your thoughts on this :-). The code for the powershell script is shown below:

```
$project_location = Get-Location
$temp_app_dir_name = 'infra'
$temp_app_location = Join-Path -Path $project_location -ChildPath $temp_app_dir_name
# Write-Output -InputObject $project_location\requirements.txt

mkdir $temp_app_location

Set-Location -Path $temp_app_location
cdk init app --language python
Set-Location -Path $project_location

# Rename folder so its easier to move out content later
$temp_app_dir_renamed = 'infra_temp'
$temp_app_location_renamed = Join-Path -Path $project_location -ChildPath $temp_app_dir_renamed
Rename-Item -Path $temp_app_location -NewName $temp_app_location_renamed

Get-Content -Path $temp_app_location_renamed\requirements.txt >> $project_location\requirements.txt
Get-Content -Path $temp_app_location_renamed\.gitignore >> $project_location\.gitignore

Remove-Item -Path $temp_app_location_renamed\requirements.txt
Remove-Item -Path $temp_app_location_renamed\.gitignore
Remove-Item -Path $temp_app_location_renamed\README.md
Remove-Item -Path $temp_app_location_renamed\.venv -Recurse

Move-Item -Path $temp_app_location_renamed\* -Destination $project_location

Remove-Item -Path $temp_app_location_renamed

cdk synth
```
[How to] add decorative content through CSS using pseudo-elements
Tags: css, webdev, beginners, tutorial
Published: 2022-12-10 08:58:31

The :before and :after pseudo-elements allow you to add content to an element, without actually adding any HTML markup to the document. This can be useful for adding decorative elements, such as icons or borders, to an element without having to add additional HTML elements.

Here is an example of how you can use the :before and :after pseudo-elements to add content to an element:

```css
.my-element:before {
  content: '\f00c'; /* Add a font awesome icon */
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 0;
  color: #00b8d4;
}

.my-element:after {
  content: ''; /* Add a border */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #00b8d4;
}
```

In this example, **the :before pseudo-element is used to add a font awesome icon to the .my-element element**, and **the :after pseudo-element is used to add a border around the element**. The content property is used to specify the content that will be added by the pseudo-elements, and the other CSS properties are used to position and style the added content.

By using the :before and :after pseudo-elements, you can easily add content to an element without having to add additional HTML markup, and you can control the position and style of the added content using CSS.