teleren/devto huggingface dataset:
Easy StackOverflow(ing) with CaptainStack and VsCode
Tags: ai, gpt4, captainstack, vscode
Published: 2023-04-10 12:48:05

If you're a developer who uses Visual Studio Code, then you know how powerful and versatile this code editor can be. And with the right set of extensions, you can take your coding experience to the next level.

The use of AI in programming has opened up a whole new world of possibilities, and we can expect to see even more innovations in the future. Using AI with your dev work is obviously an interesting prospect. The new developers will be those that have learnt how to use AI with their knowledge to performing interesting task.

If you do not feel buoyant enough to get on the GitHub co-pilot train, there are few tools that are equally useful.

I have been testing a few and found CaptainStack to be an interesting tool, however CaptainStack instead of using AI, only sends search queries to Google, gets answers from StackOverflow and Github Gist, and autocompletes them.

You can make quick searches from StackOverflow and Github Gist.


![A query for Binary search written in Rust ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfik2w7iiod2yzob168n.png)

you make a simple query by using the 
```
//find
```
 keyphrase and ending the query with a period

```
(.)
```

![searching a react solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6ilhx1ndxb6iiu2vwi9.png)
Native HTML5 Input Validation: Build Better Forms
Tags: webdev, tutorial, javascript, programming
Published: 2023-04-10 12:40:09

While basic HTML5 form validation already provides a useful way to validate user inputs, it is limited to basic validation techniques such as pattern matching, string length, or number ranges. Fortunately, there is a [HTML5 API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity) that allows you to set and trigger custom validation messages for form inputs, providing a more flexible and user-friendly native validation experience.

By utilizing `setCustomValidity()`, you can define your own error message that will be displayed before submitting. When used in combination with `reportValidity()`, it can further improve the user experience by triggering the invalid event and reporting the validation problem to the user at a certain point. 

Below I'll explain the benefits of using `setCustomValidity()` and `reportValidity()` and provide an example on how you can use them to improve your form validation process.

---

Consider a scenario where you need to set up a form to capture a start and end date for a booking request. You need to ensure that the start date is smaller than or equal to the end date while the user is still picking dates. At this point, most people will start looking for libraries, which often add lots of unneeded code to your app, to take care of the validation logic.

This is where the `setCustomValidity()` function comes in handy. You will just need to perform a check every time the `input` event is called on your inputs and then set a custom error message if the check fails.

Let's take a look at the example:

{% codepen https://codepen.io/pujux/pen/WNabKGe %}

As you can see in the example, you are also able to reset the custom error message by setting it to an empty string. At the end of the event handler you can see a call to the `reportValidity()` method on the end date field. It triggers the invalid event and displays the error message, if any, to the user directly. If not called, the error message would only be displayed when you try to submit a parent form.

In addition to providing a flexible way to validate user inputs, using `setCustomValidity()` together with `reportValidity()` can also further improve the user experience by providing informative error messages and reducing the number of validation errors. By leveraging this native browser API you can simplify your form validation process while still providing a user-friendly validation experience, without using any library.

I hope you enjoyed this article and that I could help you! Show me what you build with this browser API!

If you are already using `setCustomValidity` or have ideas for how to use it, feel free to comment below! 

---

PS: I have attached another example below which shows how you could validate if a username is already taken before the user needs to submit their request. Try 'john_doe', 'jane_doe' or 'bob_smith.

{% codepen https://codepen.io/pujux/pen/JjmoBJM %}
Prompt (Proompt) Engineering in ChatGPT.
Tags: programming, productivity, chatgpt, ai
Published: 2023-04-10 10:12:33

Since a lot of us are using the ChatGPT (3.5), copilot tools like Github Copilot and other Generative AI to easily do our tasks. It's a while now using prompt to generate content, code.

so this article is all about prompt and how to develop prompt to get desired results in the chatGPT.

I asked chatGPT itself like when you'll give correct answers 😂.
Explain me the answers like this man.

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

---
Input and Output to ChatGPT has some limits, 500 words for Input and 3000 words for Output. This is just approximate values as limit chatGPT totally depends on number of tokens.

Let's build an Ecommerce Application with ChatGPT

```sh
Create an Ecommerce Application using Web3 and machine learning.
```

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

You just need to be more informative. ℹ️

- You can talk to GPT more about the process like how to setup backend.
- how's your codebase structure.
- Which language, framework to choose.
- Data Flow of Application.

Since, output is limited to certain number of tokens you can ask chatGPT to return only code.

Prompt results vary based on previous conversations. so there is no proper way to get same response everytime.

You shouldn't ask questions about news, current affairs because it's trained on past data.


### This is Serious 👇

Recently Vector Databases like Pinecone, Weaviate is launched and can help models like GPT to improve themeselves and provide results faster. Also there is a new GitHub repo called AutoGPT [Link](https://github.com/Torantulino/Auto-GPT) that demonstrates capabilities of GPT Model, it can make GPT model to act like a person with specific configuration. It's an example of how model can improve themselves. 


Let's Connect - 
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hey%20folks%20i%20recently%20read%20this%20article%20on%20Dev.to%20by%20Kunal.py3%20do%20check%20this%20out#webdev%20#react%20#" data-size="large">Tweet Thanks</a>
https://linktr.ee/kunal.dev
Building Seamless Communication Experiences with Twilio: A Developer's Guide
Published: 2023-04-10 12:15:05

## What Is Twilio?
Twilio is a cloud communications platform that allows developers to integrate communication functionality into their software applications. It provides APIs for voice, messaging, and video, allowing developers to add features such as SMS notifications, call tracking, and in-app messaging to their applications.

## Features
One of the key features of Twilio is its flexibility. It can be used for a wide range of use cases, from customer support to marketing automation to IoT device control. Developers can use Twilio to build custom communication workflows that fit their specific business needs.

The Twilio API provides a wide range of functionality, including the ability to send and receive SMS messages, phone calls, video messages. It also includes features such as call tracking, call recording, and conferencing.

## How Twilio Can Be Used
Twilio can be used in a variety of ways, depending on the needs of the developer. For example, a developer might use Twilio to send SMS notifications to users when a new message is posted in a chat application. Another developer might use Twilio to enable in-app calling for a customer support application.

## Getting Started With Twilio
If you're interested in getting started with Twilio, it is a pretty simple process! Twilio makes it easy to navigate through the APIs console. When you register with Twilio, you instantly get a free trial credit to test out the APIs. Twilio also works with a variety of programming languages, including Python, Java, Ruby, and Node.js. Assuming your development environment is set up, you can then go through the Twilio docs and search by your specified programming language, and easily find generalized boilerplate to help you get started. Twilio offers a game-based learning platform, TwilioQuest, which teaches developers how to use Twilio through quests and challenges. TwilioQuest is a transitioning to open source as of now, but when it is available, it is definitely worth giving it a try!

## Who Is Using Twilio?
![Airbnb,Uber,Lyft](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j24sa1w1xedm0t8a9twe.png)
Twilio is used by a number of companies across a wide range of industries. Some well-known companies that use Twilio include Uber, Airbnb, and Lyft. These companies use Twilio to power their communication workflows, enabling them to provide a seamless and integrated user experience for their customers.

## Conclusion
In conclusion, the Twilio API provides developers with a powerful tool for adding communication functionality to their applications. Its flexibility and variety of features make it a popular choice for companies across a wide range of industries. Whether you are building a chat application, a customer support platform, or an IoT device, Twilio provides the tools you need to create a seamless communication experience for your users.
Getting Started with the Vue Gantt Chart Component
Tags: webdev, vue
Published: 2023-04-10 11:58:38

Learn how easily you can create and configure the Syncfusion Vue Gantt Chart using the Vue CLI command. This Gantt chart is a project planning and management tool used to display and manage tasks hierarchically with a timeline. It helps assess how long a project should take, determine the resources needed, manage the dependencies between tasks, and plan the order in which tasks should be completed. 

This video also explains how to configure a few of the control’s basic features like binding data, setting timeline views, and task dependencies. 

_Product overview_: https://www.syncfusion.com/vue-components/vue-gantt-chart

_Documentation_: https://ej2.syncfusion.com/vue/documentation/gantt/getting-started-vue

_Check out this online example_: https://ej2.syncfusion.com/vue/demos/#/material/gantt/default.html

{% youtube S1GbWmVcre0 %}
Building my first VS Code Extension
Tags: webdev, javascript, beginners, vscode
Published: 2023-04-10 11:57:57

_I recently built my first VS Code extension and published it. It consists of basic code snippets that include commonly used React packages._

**What are Code Snippets?**
Code snippets are reusable blocks of code that can be inserted into your code editor with a single command or keyboard shortcut. Snippets can be used to save time by automating common tasks, such as creating boilerplate code or filling in repetitive code patterns. Snippets can also improve code quality by ensuring that code adheres to best practices or standards.


![Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss6q04wnjj887doumu2h.png)

**Building a Code Snippets Extension**

1. Install the yo and generator-code packages using the following command:

```
npm install -g yo generator-code
```
2. Create a new code snippets extension using the following command:

```
yo code
```
3. Follow the prompts to configure your extension. When prompted, select "New Code Snippets" as the project type.

![Questions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uik5aduzu408b5lqd7go.png)
4. The VS Code snippet editor will open. Here, you can define your code snippets using a JSON format.
5. Define your code snippets in the 'prefix', 'body', and 'description' properties within the 'snippets.code-snippets' file in the 'snippets' folder
6. Test your code snippets extension using the VS Code debugger.

**Publishing VS Code extension**

1. Install vsce with `npm install -g vsce`
2. Create an account in [VS Code MarketPlace](https://marketplace.visualstudio.com/VSCode) and create an organisation
3. Add the publisher name in package.json file

```
  "publisher": "publisherName",
```
4. Run the command 

```
vsce package
```
It will create a file in .vsix.
If it warns for empty repository the add 
```
"repository": {
    "private": true
  },
``` 
and if it ask for license then add a LICENSE.md file

5. Click on "+ New Extension" and add .vsix file.

6. It will take some time for verifications and finally available in marketplace

[**Extension in VS Code Marketplace**](https://marketplace.visualstudio.com/items?itemName=AmitKRout.js-helper-code-extension-vs)

**Conclusion**

Building a code snippets extension on VS Code is a great way to share your code snippets with others and improve your own productivity. With a few simple steps, you can create a custom extension that automates common tasks and adheres to best practices.

Hope you use this extension, like it, and review it. If you want to add more code snippets, please comment on the post.

Happy Coding!
Install GNU DiffUtils on Windows
Tags: gnu, apache, age, linux
Published: 2023-04-10 11:47:28

**GNU diff** is a command-line tool for comparing the contents of two files or directories and highlighting the differences between them. It is part of the GNU Utilities software suite and is widely available on Unix-based operating systems, including Linux and macOS.

The main purpose of GNU diff is to help users identify differences between two text files or directories. It does this by analyzing the contents of each file or directory and highlighting the lines or sections that differ. Users can specify various options to customize the output of GNU diff, such as ignoring whitespace differences or suppressing certain types of changes.

GNU diff is a powerful and flexible tool that is commonly used in software development, system administration, and other technical fields. It can help users detect changes in code, configuration files, and other important data, and can be integrated into automated workflows to streamline various tasks.

[Download Gnu Diff](https://ftp.gnu.org/gnu/diffutils/)

GNU diff works by analyzing the contents of two files and identifying the lines that differ between them. It does this by performing a line-by-line comparison of the files, looking for matching or non-matching lines.

When GNU diff encounters two lines that are different, it generates a "diff" output that shows the changes between the two lines. The output can be customized using various options, such as specifying the number of context lines to include or ignoring certain types of differences, such as whitespace.

GNU diff also supports comparing entire directories, rather than just individual files. In this case, it performs a recursive comparison of the directories and generates output that shows the differences between corresponding files in the two directories.

Overall, GNU diff is a powerful and flexible tool that provides a wide range of options for comparing files and directories. It is commonly used in software development, system administration, and other technical fields to help users detect changes and manage complex data sets.

### Install on Windows 

#### Steps to follow

Step 1 Download the executable from the link:
[Download Gnu Diff](https://ftp.gnu.org/gnu/diffutils/)

Step 2 

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



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



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


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


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



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



![Image description step 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5l2zkfcicp48g0cfbmy.png)
Generating Sitemaps for SvelteKit Apps on Cloudflare Pages
Tags: javascript, sveltekit, seo
Published: 2023-04-10 11:49:05

---
title: Generating Sitemaps for SvelteKit Apps on Cloudflare Pages
published: true
date: 2023-04-10 11:47:08 UTC
tags: javascript,sveltekit,seo
canonical_url: https://www.mellen.io/generating-sitemaps-for-sveltekit-apps-on-cloudflare-pages/
---

 ![Generating Sitemaps for SvelteKit Apps on Cloudflare Pages](https://images.unsplash.com/photo-1451187580459-43490279c0fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDF8fHNpdGVtYXB8ZW58MHx8fHwxNjgxMTI3MjA2&ixlib=rb-4.0.3&q=80&w=2000)

Sitemaps are incredibly important for letting search engines know what pages are available to index. As part of my plans to improve my site that lets you [play chess against ChatGPT](https://chessvsgpt.com/?ref=dev.to), I wanted to make sure that I had a sitemap in place as I started to add new pages.

With SvelteKit you can easily generate a compliant `sitemap.xml` file as part of your build process!

## Prerequisites

- You need _some_ prerenderable routes. If your site is completely static, you can add `export const prerender = true;` to your `src/routes/+layout.js` file.
- You're using the `@sveltejs/adapter-cloudflare` adapter for SvelteKit

As long as you have these, you can easily generate your sitemap!

### Install `svelte-sitemap`

For sitemaps I like to use `svelte-sitemap` which you can install as a dev dependency:

```
npm i --save-dev svelte-sitemap
```

### Add a postbuild script

To generate your sitemap, you can do so in a postbuild script so you never need to run it manually. You can add your postbuild script in `package.json` like so:

```
{
	"name": "my-cool-project",
    "scripts": {
    	"postbuild": "npx svelte-sitemap --out-dir .svelte-kit/cloudflare --domain https://example.com"
    }
}
```

### Update your adapter

Once you've got your postbuild script set up, all you need to do now is make a few amends to your adapter in `svelte.config.js`!

```
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-cloudflare';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
- adapter: adapter()
+ adapter: adapter({ routes: { include: ['/*'], exclude: ['<all>', '/sitemap.xml'] }})
    }
};

export default config;

```

That's it!

Before you push that up, I would test it by running an `npm run build` and confirming that the file `.svelte-kit/cloudflare/sitemap.xml` is there.

As a final touch, make sure you've got a `robots.txt`, for instance in `static/robots.txt` like so:

```
User-agent: *
Disallow:
Sitemap: https://example.com/sitemap.xml
```
Crypto Payment Gateway Developments - A Short Note on Business Benefits
Tags: crypto, cryptocurrency, cryptopaymentgateway, bitcoin
Published: 2023-04-10 11:46:46



Cryptocurrencies have been the talk of the town for the past decade by having achieved phenomenal growth in spite of facing immaculate disruptions throughout market turbulences. A cryptocurrency payment gateway is a payment processing service that aids users/traders to receive payments via digital currencies like Bitcoins, Ethereum, and other Altcoins.


Cryptocurrency gateways also permit to acceptance of digital payments and receiving fiat currency in exchange with no complications. International companies such as Starbucks, Balenciaga, and Tag Heuer provide Crypto payment options to their customers. Let us check out how crypto payment gateway is a boon for cryptopreneurs. 

**Top 10 Benefits of Crypto Payment Gateway Development** 

Multiple Currency Exchange 
Crypto payment gateways allow one to accept and receive multiple currency exchanges seamlessly unlike payment processors of fiat currency

**Transparency**
Since the funds and keys are user-managed, transaction and security is assured

**OS compatibility**
The payment gateway can be integrated into an application or device without the merchants having to change any settings.
Anonymity
Users can register for the network anonymously if they are worried about privacy.

**Chargebacks reduction**
The customer must dispute their claim with the merchant directly if they want a refund.

**Two Factor Authentication**
Employing two-factor authentication to add an extra set of protection.

**No Geographical Restrictions**
Users from anywhere around the globe may pay companies with bitcoin or any other cryptocurrency of their choice.

**Auto settlement option**
One can easily connect the payment gateways to exchanges to convert cryptocurrencies into conventional currencies, stablecoins, or fiat by using a customizable auto-settlement option.

**Multi wallet facility**
Users are facilitated with the provision of adding multiple wallets to a single application.

**Instant Processing**
The processing of  Crypto payments is quick since there are no middlemen involved. 

**How Maticz can help you in choosing Crypto Payment gateway development solutions?**

Maticz develops customizable cryptocurrency payment gateway for all kinds of businesses as the best [cryptocurrency payment gateway development company](https://maticz.com/cryptocurrency-payment-gateway-development). Our specialists provide UI/UX-optimized, customized web, and mobile wallets for simple payments and exchanges. We design and develop a wide range of adaptable, multi-currency, custom wallets and decentralized payment systems that are dependable and easy to set up.
Odağı Koru
Tags: productivity, tooling, motivation
Published: 2023-04-10 11:32:21

Bilgisayar başında çalışanlar olarak, internette dikkat dağıtıcı — ve ilgi çekici yığınla içeriğe bir tık uzaktayız. Özellikle stresli zamanlarda dikkat direnciniz çok kolay kırılabiliyor ve işten kolayca uzaklaşabiliyorsunuz.

Kendi deneyimimden anladığım kadarıyla, adres alanına `youtube.com` yazıp siteye erişememeniz tahmin ettiğinizden çok daha etkili bir durdurma yöntemi. Dükkanın kapalı olduğunu görmek sizi işe geri döndürmeye yetiyor.

## Tek Tıkla Limit
Düğmeye bastığımda önceden belirlediğim sitelere erişimi kesecek uygun bir yazılım bulamadım — ücretli, ne idüğü belirsiz eklenti/uygulamaları hariç.

MacOS'un Screen Time özellikleri de kurcalayıp gördüğüm kadarıyla saat bazlı ve Safari'de geçerli seçenekler. Dolayısıyla iş başa düştü.

## Tek Komutla Limit
Terminalde çalıştırdığım tek komut ile önceden belirlediğim internet siteleri kapanıyor, kapalıysa açılıyor. Yapmak için 4 adım yeterli.

### 1. Adım
Hosts dosyanızın bir kopyasını oluşturun.
```shell
$ sudo cp /etc/hosts /etc/hosts-mode
```
### 2. Adım
Hosts dosyanızı düzenleyin.
```shell
$ sudo nano /etc/hosts-mode
```
Dosyanıza engellemek istediğiniz adresleri aşağıdaki gibi ekleyelin.
```shell
0.0.0.0 instagram.com
0.0.0.0 www.instagram.com
0.0.0.0 youtube.com
0.0.0.0 www.youtube.com
0.0.0.0 twitter.com
0.0.0.0 www.twitter.com
```
Ardından `control + o` komutu ile kaydedip `ctrl + x` komutu ile çıkın.
### 3. Adım
Terminal kısayolunuzu (alias) eklemek için profil dosyanızı düzenleyin.
```shell
# Bash kullanıcıları için
$ sudo nano ~/.bash_profile

# OhMyZsh kullanıcıları için
$ sudo nano ~/.zshrc
```

Dosyanıza aşağıdaki satırı ekleyin.
```shell
alias mode="sudo mv /etc/hosts /etc/hosts-temp; sudo mv /etc/hosts-mode /etc/hosts; sudo mv /etc/hosts-temp /etc/hosts-mode"
```
Ardından `control + o` komutu ile kaydedip `ctrl + x` komutu ile çıkın.
### 4. Adım
Profil dosyanızda yaptığınız değişiklikleri işletmek için arabirimi yenileyin.
```shell
# Bash kullanıcıları için
source ~/.bash_profile

# OhMyZsh kullanıcıları için
$ source ~/.zshrc
```

## Tamamdır 🏄‍♂️

Artık terminalde `mode` komutunu çalıştırdığınızda, belirlediğiniz internet sitelerine tüm tarayıcılardan erişiminiz kesilecek, kesikse tekrar açılacak.

```shell
$ mode
```

Odağınız keskin olsun!