teleren/devto huggingface dataset:
Debounce Method for Searching
Tags: searching, javascript, debounce, debouncing
Published: 2024-06-23 06:11:44

**What is Debounce?**

Debounce is nothing but a programming pattern for delaying the execution of a function or something...

**Why do we use it? or Why is it important?**

Look at this code.....

```<input type='text' onChange={(e) => console.log(e.target.value)} />```

and its output........

![Without Debounce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ut3w1dv3sd1tho1oqy1z.png)

We type simple 2 words but it's calling 14 times!! If we integrate Search API here our API will be called 14 times for these words. 

It will be costly for us. That is why the Debounce Method played its role in waiting some time and getting the result.

create a hook or a function for debounce 😎😎

```
const useDebounced = ({ searchQuery, delay }) => {
        const [debouncedValue, setDebouncedValue] =
            useState(searchQuery);
        useEffect(() => {
            const handler = setTimeout(() => {
                setDebouncedValue(searchQuery);
            }, delay);
            return () => {
                clearTimeout(handler);
            };
        }, [searchQuery, delay]);

        return debouncedValue;
    };
```

What do we do here...?? as a parameter we need two things searchQuery and delay time..

using useState we set our value here. and later we return it.
we use useEffect for calling this process infinite time changing searchQuery or delay value change it will be calling.

then we use a setTimeout function. its nothing just a prebuild function in javascript which is calling after a certain time.  
and clearTimeout is another function for stoping that setTimeout function.

What is the logic behind this setTimeout and clearTimeOut here? Well we want the user to type something... After he writes the first character when he writes another character between the delay time stop calling the setTimeout here. finally return it

Now its time to implement it 🤩🤩

before return your nextjs or react component add this

```
const [value, setValue] = useState('');

const debouncedValue = useDebounced({ searchQuery: value, delay: 600 });  

console.log(debouncedValue);
```

and your input field

```
<input type='text' onChange={(e) => setValue(e.target.value)} />
```
Let me explain these two things. in inputs we set our values to the state value.
Then calling that function and as parameter pass our e.target.value and a delay time. finally console.log it. 


![After Apply Debounce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j950x31epeuyqu3at2ru.png)

Now see just calling two or three times base on our typing speed this debounce method will call 😍😍
Flutter Video Tutorial
Published: 2024-06-23 06:08:12

Celebrate the fact that you don't need NASA-level experience to start your journey as a Flutter developer. It's all about launching your career after learning the essentials to contribute to a team. As a junior developer, you'll learn and grow without the need to be a master upfront, most of the learning are done on the job.
I compiled some YouTube tutorials that could help you understand some
concepts or get started with Flutter:

1. Responsive layout:
https://lnkd.in/grqM7zU2
2. DevOps in Flutter:
https://lnkd.in/dWaXcnSs
3. Error handling:
https://lnkd.in/grPmi_dv
4. Flutter State Management Tutorial:
https://lnkd.in/d9chjG_W
5. Flutter for Beginners (37 Hours):
https://lnkd.in/d3jQDZuU
6. MVC in Flutter:
https://lnkd.in/df_x5c75
7. Retrofit:
https://lnkd.in/gqPrb-8h.g
Push Notification:
https://lnkd.in/dmyi5xzkO.
Github Actions:
https://lnkd.in/dyD6_aYZ
10. Flutter Animations:
https://lnkd.in/dYwzeivG
11. Testing in Flutter:
https://lnkd.in/d6CRX4cj
12. Bloc in Flutter:
https://lnkd.in/dtnUE69T
13. CI/CD in Flutter:
https://lnkd.in/dBBaPuyC
14. Firebase using Flutter:
https://lnkd.in/dkBkJ-wY
15. Theme in Flutter:
https://lnkd.in/dTJMiqU9
16. Custom Painting:
https://lnkd.in/dS6fg_QR
17. UI Design in Flutter:
https://lnkd.in/dG8qU3wg
18. Best practices in Flutter:
https://lnkd.in/d6rWd_Zt
19. Basic crash course (playlist):
https://lnkd.in/d4yvNehr
20. Clean Architecture in Flutter:
https://lnkd.in/ds5YtUc3
21.03D in Flutter:
https://lnkd.in/g9YpVysb
22. Flutter TDD Clean Architecture:
https://lnkd.in/dtuPvigY
23. Firebase Domain Driven:
https://lnkd.in/dfVGxCJS
24. Mixins:
https://lnkd.in/dZzU4ugW
25. Proper Error Handling in Flutter & Dart:
https://lnkd.in/dy-z7Dtz
26. Flutter Firebase Course in 14hrs:
https://lnkd.in/deVwJNz2
27. Riverpod:
https://lnkd.in/ga_xdtmH
28. Riverpod code generator:
https://lnkd.in/gt7cvCpS
29. Flutter with Gemini Al
https://lnkd.in/g-pZHmW4
30. Environments (Flavors) in flutter with Codemagic:
https://lnkd.in/gqcAU3Kh

**Remember that there's no imit to what you can learn, everything you need is with you!**
#flutter
Industry Desktop App
Tags: octograd2020, java, javaswing
Published: 2020-05-23 09:47:32

## Aureate Industries Standalone Desktop Application

## Link to Code
 <https://github.com/saurabhbazzad/Aureate-Industries-App>

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## How I built it
I built this standalone desktop application as a factory management tool. The application is written in java and has a nice and intuitive Graphic User Interface which is written in Java Swing using the Netbeans IDE. All the data was stored in a text file instead of a database because of ease of access and readability of the text files as and when needed and due to lack of technical expertise of in-house workforce to deal with issues of managing a database on the system. Further, all due to all data being stored on the computer itself, the dependency on a stable internet connection was eliminated.
I learned Java Swing while building the project along with the Drag and Drop feature of Netbeans.
The system stores information about the various parties that are involved in business with the company. The app supports operations such as addition, deletion, and editing of these parties. The app also features a calculator to calculate the final price of the product once the price of raw materials is given.
One of the challenges in the project was to efficiently add, edit, and remove data from the text file as no database was used.
## Additional Thoughts / Feelings / Stories
It was amazing to do this project and the industry also found the project useful.

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Metal Profiles Ltd
Published: 2024-06-23 06:05:20

Welcome to Metal Profiles Ltd! We are a family-owned business in Essex and London, specializing in metal cladding, aluminium copings, and custom fabrications. We offer exceptional craftsmanship and personalized solutions for fascias, soffits, gutters, planters, and more. Explore our boards for inspiration and see how we can enhance your construction projects. Let's connect and create something extraordinary together!

Phone: +447566862501
Website: https://www.metal-profiles.co.uk/
Location: Highlands Farm, Southend Rd, Chelmsford, Essex, CM3 8EB, United Kingdom
One Byte Explainer: Caesar Cipher
Tags: devchallenge, cschallenge, computerscience, beginners
Published: 2024-06-23 05:59:50

*This is a submission for [DEV Computer Science Challenge v24.06.12: One Byte Explainer](https://dev.to/challenges/cs).*

## Explainer

Caesar Cipher, or shift cipher, is an encryption technique in which each letter in the given text is replaced by a letter some fixed number of positions (e.g. 3) down the alphabet. Can you decode the following message with this method?

rqh ebwh hasodlqhu
Traditional Rugs & Carpets
Tags: carpets
Published: 2024-06-23 05:52:36

Experience the charm of timeless design with our collection of traditional rugs. Immerse your space in classic elegance and intricate patterns. Explore a curated selection of high-quality, handcrafted traditional rugs that effortlessly blend heritage and style.  Buy Premium Traditional Rugs & Carpets Online in IndiaTransform your home with the enduring beauty of traditional rug craftsmanship. Browse now for a touch of timeless sophistication. Collection of Traditional Rugs for home, Premium Traditional Rugs & Classic Carpets Online For home, Traditional Rugs showroom in Delhi ,Experience the charm of timeless design with our collection of traditional rugs
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj6ptcz0h8038uhp6jdb.png)
AWS Firewalls 101: Stateful vs. Stateless
Published: 2024-06-23 05:44:30

**AWS Firewalls 101: Stateful vs. Stateless**

Hey there, fellow cloud enthusiast! Today, let's dive into the basics of stateful and stateless firewalls in AWS. 
Firewalls are the unsung heroes of network security, keeping the bad stuff out while letting the good stuff in. 
But did you know there are different types? Let's break it down.

**_Stateful Firewalls_**
Think of stateful firewalls as the smart gatekeepers of your network. They remember past interactions. If you let someone in, they remember and let them out too without you having to tell them again. This is super handy because you set fewer rules, and it keeps things simple.

**Why They're Awesome:**

_Connection Savvy_ - They track ongoing connections, making life easier by allowing return traffic automatically.
_Less Work_ - Fewer rules to manage means less hassle.

In AWS, **Security Groups** are your go-to stateful firewalls. It allows incoming traffic on port 80 for your web server, and the return traffic flows back out without additional configuration.

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



**_Stateless Firewalls_**
On the flip side, stateless firewalls are like diligent security guards checking every single packet without any memory of the past. They need explicit instructions for everything, both coming in and going out.

Why They're Cool:

_Super Fast_ - They can handle lots of traffic quickly because they don't track connections.
_Detailed Control_ - You get to set detailed rules for everything, giving you granular control.

**AWS Network ACLs (Access Control Lists)** are your typical stateless firewalls. You'll need to write specific rules for both inbound and outbound traffic, which gives you precise control but requires more setup.

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


In a nutshell, most AWS setups use a combination of both. Security Groups manage traffic to your instances, while Network ACLs add an extra layer of subnet-level control.

Let's have a quick demo on the next blog post about the concept of stateful and stateless firewalls.
Boost Your AWS Development Workflow with LocalStack!
Tags: webdev, aws, devops, beginners
Published: 2024-06-23 05:42:50

🔹 What is LocalStack?
LocalStack is an open-source tool that allows you to test and develop your AWS cloud applications locally. It emulates a variety of AWS services such as Lambda, S3, DynamoDB, and many more, providing a seamless local development experience.

🔹 Why Use LocalStack?

Cost-Efficient: Save on AWS usage costs by running services locally.
Speed: Rapidly iterate and test your applications without the latency of cloud interactions.
Flexibility: Work offline and test your applications anywhere, anytime.
🔹 Key Features:

Supports over 30 AWS services
Easy integration with CI/CD pipelines
Seamless setup with Docker
Active community and frequent updates
🔹 How to Get Started:

Install Docker.
Pull the LocalStack Docker image.
Start using LocalStack to emulate AWS services.

Explore More
https://devopsden.io/article/how-to-install-aws-local-stack
Backend Developer | Laravel, PHP
Tags: job, laravel, php, backenddevelopment
Published: 2024-06-23 05:28:37

Hello, I am Taofeek Adekunle offering these services:

• Backend Development
• REST API Development
• Open AI Integration 
• E-commerce Development 
• Web Application Development 

EXPERIENCE:
• 5 years experience generally as a Web Developer 
• 3 years experience as a Backend Developer 
• Built CRMs, ERPs, Restful APIs, Custom Web Applications, Websites

SKILLS:
• Frameworks - Laravel, Gin
• Programming Languages - PHP, GoLang 
• Database - MySQL, PostgreSQL
• E-commerce - Wordpress, Shopify
• Artificial Intelligence - OpenAI API

RECENT PROJECTS:
• Exams registration portal registering over 30k student
• Multi tenant results management system over 7k students
• Online learning management system 
• Warehouse tool inventory system 
• E-commerce systems
• Rap generating AI system

- I provide innovative ideas and solutions on improving businesses by leveraging AI and other technologies 

Here is my website - https://www.taufiq.ng
GitHub - https://github.com/taufiq-cancode
Solar-Powered Security: The Future of Surveillance Trailers
Tags: solar, surveillancetrailer
Published: 2024-06-23 05:12:57

What exactly is Solar-Powered Security



Solar-powered protection is a variety of surveillance trailer that uses energy that is solar power cameras lights and other security features 

Designed to provide protection that is maximum remote locations without relying on external power sources or electricity grid 

The solar surveillance trailer uses energy through the sun to keep watch over things 

Has cameras and lights to help keep things safe 

Works even in places where there's no charged power or electricity available 



Advantages of Solar-Powered Security



Solar-powered security trailers have numerous advantages over traditional security systems including:

Better than regular safety systems because they can go anywhere without needing a charged power socket 

Use energy through the sun which is free so they really're cheap to run 



Innovations



The innovation of solar-powered security trailer has revolutionized the global globe of security surveillance 

The surveillance trailer is equipped with advanced technology that enhances their effectiveness and performance 

New and distinctive from regular security systems 

Utilize the latest services and products technology to exert effort better and keep things safer 



Just how to make use



Using a solar-powered security trailer is not hard and simple 

Park the trailer in an area that is strategic it could provide maximum surveillance coverage 

Switch on the cameras alarms and other protection features 

Using a protection is not hard 

You just park it in an area that is good turn on the cameras and alarms 



Quality and Service



Made with high-quality materials and come with excellent customer care and service 

Maintenance and service need to regularly be provided to make sure that the trailer is working correctly 

Made utilizing the solar surveillance tower that is best and come with excellent consumer help 

You need to keep the trailer working well by checking it usually 


Source: https://www.univtower.com/application/solar-surveillance-tower
Aladdin138
Published: 2024-06-23 05:06:47

[Aladdin138](https://wiganutc.org/)

Aladdin138 hadir dalam format terbaru untuk menikmati game slot gacor dengan teknologi baru untuk menjaga kenyamanan dan keamanan, Aladdin138 memakai teknologi server terbaru dari eropa yang sudah mendukung openAI generasi terbaru yang dikembangkan oleh google, aladdin138 sebagai situs slot gacor terpercaya dengan garansi kekalahan dan RTP slot tertinggi memiliki fitur scatter hitam dengan perkalian x1000 temukan semua itu hanya di aladdin138 situs judi slot online resmi no 1 di indonesia
Bytes: The Meal That Makes Your Computer Feast Like Crazy
Tags: devchallenge, cschallenge, computerscience, beginners
Published: 2024-06-23 04:27:23

__This is a submission for [DEV Computer Science Challenge v24.06.12: One Byte Explainer._](
https://dev.to/devteam/introducing-our-first-computer-science-challenge-hp2)_

## Explainer

A byte is a basic unit of info made of 8 bits. These are like crumbs for your computer.  Bits come together and become complex files like ingredients in a recipe becoming a tasty meal. Overall, bytes give your computer a digital feast every single time! :)
MY NEW PROJECT IS NOW ON GITHUB : NOSHII
Tags: aspnet, programming, webdev, opensource
Published: 2024-06-23 04:02:11

**What is Noshii** ? It’s a website for a virtual Chines restaurant, Where you can order Chinese Food, Drinks, Desserts.

PROJECT STACK : 
- ASP.NET WEB API
- BLAZOR
- HTML & CSS


NOSHII V1 :
in this version the main features are added successfully, disocver the menu and add items to the cart and place orders for the clients , and for the administration, get the latest accounts created and get the orders pending / accepted , and adding new plate feature , Name, Bio, Price and image.


![Home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c1siofw98u7pbu6g0ns.png)


The menu page is simple, just the Plates in unique cards.

![Menu page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhbe589g2ypzcp1v93zq.jpeg)

The cart has a nice design and simple, which is what i want .

![Cart page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbjlmoqij3dwyowhb3om.jpeg)

How many days it costed?
actually the API was finished in 5 days , 6 to 8 hours daily.
For the designing it took me 4 days to implement the components.

**NOTE : THIS PROJECT IS THE INITIAL VERSION , NEW VERSION IN PROCESS**

The next version **V2** is in process right now in time writing this article, new features will be added and Ordering Logic will be improved hopefully, Profile settings😉, For the design 90% i won't change it 😁

I hope you guys like and support my first project <3
The project is open source ;)
You can easily reach it from my github :
{% embed https://github.com/Hamza-Bek?tab=overview&from=2024-06-01&to=2024-06-23 %}
AI Chatbot for the personalized feedback and recommendations
Tags: devchallenge, twiliochallenge, ai, twilio
Published: 2024-06-23 03:47:42

*This is a submission for [Twilio Challenge v24.06.12](https://dev.to/challenges/twilio)*

## What I Built
I have built a chatbot system using Twilio WhatsApp API and the Gemini API key. The user can ask for any feedback and they will get proper feedback and recommendations through WhatsApp.

## Demo
The demo can be seen after running the repo https://github.com/mahupreti/twilio-gemini-whatsapp-bot/tree/master
I have included the screenshots

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


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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mzeoo0cqmzbsw6kibrm.png)
## Twilio and AI
Twilio has so many products in its list that we can integrate API with third-party API and then build something better out of it. In my case, I connected the Gemini API with the Twilio WhatsApp API. Now we don't have to go to the AI official website. Also, the best feature of adding the third-party AI API from WhatsApp is that we can even upload an image or PDF in WhatsApp and generate insights from it. 

## Additional Prize Categories

I guess my project falls under the Impactful Innovators. 

Team Member: Mahesh Upreti

Thanks for participating!
Mengatasi masalah OR-CBAT-15 di GCP dengan Cloudflare
Tags: cloudflare, gcp
Published: 2024-06-23 03:41:36

Halo semuanya! Kali ini saya ingin berbagi cara mengatasi pesan error OR-CBAT-15 saat mencoba mengaktifkan akun Google Cloud. Untuk trik ini, kita membutuhkan akun Cloudflare dan domain aktif yang sudah terhubung ke Cloudflare. Saya mendapatkan trik ini dari [artikel ini](https://ariq.nauf.al/blog/solving-or-cbat-15-gcp-free-trial-problem/). Terima kasih banyak kepada Mas Ariq Naufal yang telah membagikannya!

Langsung saja, berikut langkah-langkah untuk mengatur Cloudflare:

1. Masuk ke akun **Cloudflare** dan pilih domain kalian. Lalu, pilih **Email**> **Email Routing** > **Get Started**. ![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebtu5u70md9b20kfomsi.png)

2. Isi form dengan data berikut:
   - **Custom Address**: (isikan dengan email custom kalian)
   - **Action**: Send to an email
   - **Destination**: (isi dengan email utama kalian yang biasa kalian gunakan untuk menerima pesan email)

    Kemudian klik `Create and continue`.
![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc1f71hy8xf2ky0zgons.png)

3. Cek email kalian untuk melakukan verifikasi alamat email routing. ![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c50jovzrejgoejbu8amv.png)

4. Kembali ke halaman email routing, pilih Enable email routing dan ikuti instruksinya. ![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofs8du3qlo31r9hmand7.png)

5. Edit bagian Catch-all address dengan data seperti di langkah kedua dan pastikan statusnya Active. ![5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ic63qgahbj9dc64toao8.png)



Dengan mengatur Cloudflare, semua email yang masuk ke email tersebut (contoh1@domainkalian.my.id) akan diteruskan ke email utama kalian. Email ini akan kita gunakan untuk mendaftar ke Google Cloud.

Berikut langkah-langkah untuk mengatur Google Cloud Identity:

1. Buka [Google Cloud Identity](https://console.cloud.google.com/cloud-setup/organization). 
![6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p4dsv6407l7qv0f55h7.png)

2. Isi dengan email routing kalian. ![7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lvj1estxgiehebgub8m.png)

3. Isikan domain kalian. ![8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zris610ctp1yffktifyj.png)

4. Langkah selanjutnya yaitu setting email dan password kalian kemudian login.

5. Klik lindungi untuk verifikasi domain. ![9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1xpjr3a4jfvf2sxtxkr.png)

6. Klik `Siapkan Google Cloud Console sekarang`. ![10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn38gqb9upmy1yy4xtoc.png)

7. Login ke Google Cloud menggunakan email routing dan lakukan aktivasi free trial seperti biasa. 
![11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbsdclxo2o9ib4g0pskh.png)

8. Selesai
![12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpkloh70pb5cl3j22qtf.png)

Itulah cara mengatasi pesan error OR-CBAT-15 saat mengaktifkan akun Google Cloud. Semoga bermanfaat!
React Supabase Auth Template (With Protected Routes)
Tags: react, webdev, javascript, supabase
Published: 2024-06-23 03:41:34

I've done all of the underlying stuff so you can just focus on creating the app and not having to go through the hassle of authentication

### 🔭 [Github Repository](https://github.com/mmvergara/react-supabase-auth-template)
### 🌐 [App Demo](https://react-supabase-auth-template.vercel.app/)


## Features

- 🚀 Protected Routes
- 🚀 Supabase Session Object in Global Context via `useSession`
- 🚀 User Authentication
- 🚀 Routing and Route Guards


It's also blazingly fast 🔥 No really, [try it out for yourself.](https://react-supabase-auth-template.vercel.app/)

## Getting Started
1. Clone the repository
2. Install dependencies: `npm install`
3. Create `.env` using the `.env.example` as a template
```
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
```
 Run the app: `npm run dev`

## What you need to know

- `/router/index.tsx` is where you declare your routes
- `/context/SessionContext.tsx` is where you can find the `useSession` hook
  - This hook gives you access to the `session` object from Supabase globally
- `/Providers.tsx` is where you can add more `providers` or `wrappers`

{% embed https://github.com/mmvergara/react-supabase-auth-template %}

[We also have a similar template for FIREBASE 🔥](https://github.com/mmvergara/react-firebase-auth-template)