teleren/devto huggingface dataset:
Protypes en JavaScript
Tags: spanish, javascript, beginners
Published: 2023-05-21 01:01:15

Hoy toca tema un tanto complicado, el uso de prototypes en javascript, estos son bastante útiles para aumentar las capacidades de nuestros objetos, en este ejemplo veremos como es que funcionan y cómo los puedes utilizar. Lo que estamos haciendo es crear un prototype de String que nos ayude a eliminar los acentos de una cadena de caracteres para ello agregamos el nombre de la función y lo igualamos a una función anónima que recibirá un objeto con las letras a cambiar.

![Example of prototype in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dndi441aplxra8jdzn1s.png)

Dentro de la función lo que se hace es ocupar la palabra reservada this para hacer referencia a la cadena de caracteres que se va a modificar, posteriormente se separa letra a letra con la función split, como split nos devuelve un arreglo lo podemos recorrer con map. Con map recorremos las letras una a una y lo que hacemos es revisar si dentro del objeto acentos esta la letra actual si es así se regresa la letra sin acento en caso de que no sea así se devolverá la letra que va en el ciclo de map, como map devuelve tambien un arreglo.Entonces se ocupa la función join para concatenar los valores dentro del arreglo y por ultimo se convierta a una cadena de caracteres que da como resultado la cadena sin acentos. Lo interesante es que ahora eliminar acentos la podemos ocupar de manera global con cualquier cadena. También lo podemos ocupar para arreglos por ejemplo hacer un prototype que se llame cuadrado que genere el cuadrado de los elementos de un arreglo. Como se muestra a continuación.

![Example of prototype in Arrays](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bprdn4jkeeibviq9t9hl.png)

Si este articulo te ha gustado o has aprendido algo nuevo ta agradecería que me siguieras y compartieras mi contenido.
AI Powered unit testing ✨
Tags: githubhack23, githubactions, ai, gpt3
Published: 2023-05-21 00:40:59

## What I built 
AI unit Tests Generator. This project uses Github actions to write unit-tests for your code.

### Category Submission: Maintainer Must-Haves

### App Link
https://github.com/killswitchh/ai-unit-test

### Screenshots 
Source Code
![Source Code of addition.py](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwqytusyu25e8s8ylph9.png)

Generated AI Tests

![Generated AI tests containing 3 test cases](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ad1iu7ida812xg8iefe.png)

### Description 
A Github action that uses GPT to generate unit-tests for your code

### Link to Source Code 
https://github.com/killswitchh/ai-unit-test

### Permissive License 
MIT License

## Background (What made you decide to build this particular app? What inspired you?) 

Open Source projects have a lot of intricate details and new features that are getting added frequently. Unit testing is a way to make sure that the features don't have any regression impacts and will encourage the developer to make large refactors without any fear.

This tool just makes that process a bit easier, whenever a branch is forked for a new feature, upon every push to the branch. This Github action will automatically write unit-tests for the added files.

So by the time the pull request gets generated to merge to main, it will have a set of AI generated unit-tests for the feature reducing developer's time to write these tests. 

Here's a diagram to explain the flow.

![Gitflow diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7w7uirm1fhcg82q8ydv.png)

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 

I Used Github actions to run a python script that integrates with Open AI to generate unit-tests for the code files.
I learnt using Github actions and Open AI's library while building this. I was new to both of them.
The community submissions also inspired me a lot here!

### Additional Resources/Info
I would like to thank the organizers for setting up and running this event. It is brining a lot of developers together and everyone is learning something new!
How FilamentPHP Naming Resources and How to Get URL
Tags: php, filamentphp, webdev, laravel
Published: 2023-05-21 00:33:51

In FilamentPHP, resources are associated with pages. By default, these pages are named using the format `filament.resources.[RESOURCE_PLURAL_NAME].[PAGE_NAME]`. For instance, the index page of a `ProductResource` would be `filament.resources.products.index`.

To generate a URL, you can utilize the `route` helper as follows:

```php
route('filament.resources.products.index')
```

However, I would recommend using the approach preferred by FilamentPHP, which is:

```php
ProductResource::getUrl('edit', ['record' => $record])
```

This ensures consistency with FilamentPHP's conventions.

Let's make an "Go To Product" action button with this:

```
Tables\Actions\Action::make('go_to_product')
    ->icon('heroicon-o-pencil-alt')
    ->url(fn (Model $record): string => ProductResource::getUrl('edit', ['record' => $record])),
```

This button will be redirect user to product's edit page.
New Ai project
Tags: webdev, javascript
Published: 2023-05-21 00:15:52

I am excited to share with you all a project I have been working on recently. It's a web application that allows users to record their voice and convert it into an AI-generated voice. The primary aim of this project is to provide a user-friendly platform for individuals to experiment with voice modification and explore creative possibilities.

Key features and functionalities:
The web application incorporates several key features:

Recording Capability: Users can record their voices directly through the application using their device's microphone.
AI Voice Conversion: The recorded voice is then processed using AI algorithms, transforming it into an AI-generated voice.
Customization Options: Users have the ability to customize the AI voice output by adjusting parameters like pitch, tone, and speed.
Download and Share: The converted voice can be downloaded as an audio file or shared directly through social media platforms.

Benefits and potential applications:
The voice conversion web application has various potential benefits and applications, such as:

Accessibility: The application can be helpful for individuals with speech impairments, enabling them to communicate using an AI-generated voice.
Language Learning: Language learners can practice pronunciation by comparing their voice with the AI-generated voice and making necessary adjustments.

Voiceover Testing: Voiceover artists and content creators can utilize the application to test different voice styles and tones before finalizing their recordings.

I would appreciate your thoughts, ideas, and suggestions regarding the project. Feel free to ask any questions or share your initial impressions. Your input can help me refine the application and make it more user-friendly and beneficial.
Tic-Tac-Toe python project
Tags: python, programming
Published: 2023-05-20 23:25:13

This is my implementation of the tic-tac-toe project in python may contain bugs but I will refactor it and post it here in another post 

Here's a sneak preview
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/murvx2o6wdu01cyjdnge.png)

Here's also my github link :
https://github.com/faizela/tic-tac-toe/blob/main/tic_tac_toe.py
How to create a Save Button Action in FilamentPHP
Tags: php, filamentphp, webdev, laravel
Published: 2023-05-20 23:19:15

In my project, I need an action button that saves the form located below it. This is necessary because my form is too long to scroll through comfortably. As a solution, I have added a save button to the header actions.

So add this code to your resource's create or edit page actions:

```php
Actions\Action::make('save')
    ->keyBindings(['command+s', 'ctrl+s'])
    ->icon('heroicon-o-save')
    ->action(function () {
        $this->save();
    }),
```

This action uses form's `save` method. Also you can use `keyBinding` method to add some shortcuts.
25 SQL tricks for beginners.
Tags: database, sql
Published: 2023-05-20 22:20:39

Certainly! Here are 25 SQL tricks for beginners:

1. SELECT Statement: Retrieve data from a database table using the SELECT statement.

2. WHERE Clause: Filter data based on specific conditions using the WHERE clause in conjunction with the SELECT statement.

3. DISTINCT Keyword: Retrieve unique values from a column using the DISTINCT keyword.

4. ORDER BY Clause: Sort the result set in ascending or descending order using the ORDER BY clause.

5. LIMIT Clause: Limit the number of rows returned by a query using the LIMIT clause (syntax may vary across different database systems).

6. JOIN: Combine rows from multiple tables based on a related column using JOIN operations such as INNER JOIN, LEFT JOIN, RIGHT JOIN, or FULL JOIN.

7. GROUP BY Clause: Group rows based on a specific column(s) and perform aggregate functions like COUNT, SUM, AVG, MAX, or MIN on grouped data.

8. HAVING Clause: Filter the result set based on conditions applied to the groups created by the GROUP BY clause.

9. INSERT Statement: Insert new data into a table using the INSERT statement.

10. UPDATE Statement: Modify existing data in a table using the UPDATE statement.

11. DELETE Statement: Remove data from a table using the DELETE statement.

12. IN Operator: Check if a value exists within a set of values using the IN operator.

13. BETWEEN Operator: Check if a value falls within a specific range using the BETWEEN operator.

14. LIKE Operator: Perform pattern matching using the LIKE operator with wildcard characters (% and _).

15. NULL Values: Handle NULL values in the database using IS NULL or IS NOT NULL operators.

16. COUNT() Function: Count the number of rows in a table or the number of occurrences of a specific value using the COUNT() function.

17. SUM() Function: Calculate the sum of values in a column using the SUM() function.

18. AVG() Function: Calculate the average of values in a column using the AVG() function.

19. MAX() Function: Retrieve the maximum value from a column using the MAX() function.

20. MIN() Function: Retrieve the minimum value from a column using the MIN() function.

21. Alias: Assign a temporary name to a table or column using the AS keyword to improve readability.

22. Subqueries: Use a query within another query to perform complex operations or retrieve data from multiple tables.

23. EXISTS Keyword: Check the existence of specific data in a subquery using the EXISTS keyword.

24. UNION Operator: Combine the result sets of multiple SELECT statements into a single result set using the UNION operator.

25. CASE Statement: Perform conditional logic within a query using the CASE statement to create custom columns or apply specific operations based on conditions.
5th day of the 100 days of code challenge
Published: 2023-05-20 21:57:20

Technically, yesterday was the 5th day, but I couldn't work on any programming due to personal reasons.

Today, I finished the Models and Prompts lectures, part of the "Takeoff School" by Mckay Wrigley.

I was starting to feel more and more lost as to what I should be doing to get into this field of AI and creating projects making use of all these different projects out there.

I asked ChatGPT some questions, a recommendation for a project and what he thinks I should do in order to make it. I'm now seeking some guidance from some people I know in the industry and hoping to settle on a direction for the rest of this challenge.

The amount of information there is to learn is intimidating but I'm hoping to get through it and stay productive.

Edit:

Dedicated 10 mins of reading to Atomic Habits as it's really late at night, and I love being consistent even if it means not dedicating much time to it. Loved reading about how we perform things automatically following this structure: Cue, Craving, Response, Reward.

Other than that, there's not much else.

Happy coding y'all!
AWS VPC Flow Logs
Tags: aws, cloudcomputing, vpc, monitoring
Published: 2023-05-20 20:41:51

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

[3/30] #30DaysOfAWS Today, AWS VPC Flow Logs.

**AWS VPC Flow Logs** is a feature provided by Amazon Web Services (AWS) that enables you to capture information about the network traffic within your Virtual Private Cloud (VPC). It allows you to monitor and analyze the flow of traffic at the subnet, network interface, and VPC level.

When you enable VPC Flow Logs for your VPC, AWS captures metadata information about the IP traffic flowing in and out of the network interfaces. This includes details such as source and destination IP addresses, ports, protocol, packet count, byte count, and timestamps. The flow log data is then stored in an Amazon S3 bucket, and you can choose to deliver it to Amazon CloudWatch Logs for real-time analysis and monitoring.

By enabling VPC Flow Logs, you gain visibility into the network traffic patterns, which can be helpful for troubleshooting, security analysis, and compliance audits. It allows you to identify potential issues, monitor network activity, and detect any unauthorized access attempts or suspicious behavior within your VPC.

VPC Flow Logs can be used to:

- **Troubleshoot connectivity and performance issues**: By analyzing the flow log data, you can identify any network-related issues, such as packet rejections, network congestion, or misconfigured security groups.

- **Monitor and analyze network activity**: VPC Flow Logs provide insights into traffic patterns, allowing you to understand how your applications and services communicate within the VPC. You can use this information for capacity planning, optimizing network architecture, and identifying any abnormal network behavior.

- **Enhance security and compliance**: By analyzing VPC Flow Logs, you can detect potential security threats, unauthorized access attempts, or unusual traffic patterns. It helps in monitoring compliance with network security policies and regulatory requirements.

Overall, VPC Flow Logs is a useful AWS feature that enables you to gain visibility and control over the network traffic within your VPC, helping you to better understand and secure your AWS environment.

**Step-by-step tutorial** for how to make VPC Flow Logs. You can download it using this [URL](https://lasantha-fileshare-s3-932747549174-v1.s3.us-east-2.amazonaws.com/AWSVPCFlowLogsCreation.pdf).

Thanks for reading the Article.
Created a Fully Automated Daily Trivia Podcast with ChatGPT - It's a Blast!
Tags: chatgpt, ai, podcast, trivia
Published: 2023-05-20 20:35:36

Hey, fellow developers!

I'm excited to share my latest project with you all: I used ChatGPT to create a fully automated daily trivia podcast, and it's turning out to be an absolute blast! We're three episodes in so far, and I'm loving the results. I'll make sure to post an update later this week with full stats on the podcast's performance.

One of the coolest aspects of this project is that it really showcases the vast and generalized trivia knowledge embedded within the ChatGPT LLM. I think you'll be pleasantly surprised by the trivia questions and answers it generates.

You can find this podcast on all the usual platforms, so feel free to give it a listen. To make things easier, I used Buzzsprout for podcast hosting. If you're ever thinking about starting your own podcast, I highly recommend them – they made it incredibly simple to get started and host on all platforms for free. Here's the link to my podcast: https://www.buzzsprout.com/2185630/share

For the first 20 episodes, I used Wondercraft AI, but I'm currently developing my own code for the next set of episodes. I'm using Eleven Labs and PyDub for this, and I'll definitely share the results when everything is ready.

So, check out the podcast, and let me know what you think! I'd love to hear your feedback and any suggestions you might have. Happy listening!
Convert a Subreddit into a Podcast with AI
Tags: ai, chatgpt, gpt4, elevenlabs
Published: 2023-05-20 20:33:26

Hey all,

Wanted to share this code I co-wrote with ChatGPT.

[https://github.com/AdmTal/crowdcast](https://github.com/AdmTal/crowdcast)

It’s a script that converts a subreddit into a podcast.  Pretty neat!

I made it specifically for my new sub /r/crowdcast

I thought it would be neat to make a crowd sourced podcast using AI - so there it is!

Here’s how it turns out:
[Listen to Xrowdcast podcast](https://www.buzzsprout.com/2188164/share)

There are two episodes so far.

I hope some of you leave some comments and are part of next week’s cast!

Thanks for reading, please reach out with any questions or feedback you might have
How I made an AI-powered query language with ChatGPT
Tags: javascript, programming, ai, chatgpt
Published: 2023-05-20 20:18:42

So I had recently picked up ChatGPT prompt engineering, and I wanted to make something sort of practical. So I thought of making something like GraphQL, but with natural language. So I whipped up the OpenAI playground, and started writing a prompt in the format that I usually use. It took a long while to get it to do what I wanted, but I eventually got it to work more than half the time.

## How the prompt works

The prompt works by taking in 2 things. The natural language query and your API schema. (Your API schema should also be natural language) I took advantage of the system message by appending the schema to the system message, right under the the section labeled “Schema”

I instructed the AI to respond with this JSON format:
```json
{
	"headers": { node-fetch-style headers here },
	"body (optional)": { body here },
	"url": "[api endpoint]",
	"method": "POST",
    "pipe (OPTIONAL)": 
    { 
		"url": "url to pipe to",
		"method": "request method",
		"headers": { node-fetch-style headers here },
		"pipeTo" : "pipe items from body to body, here is an example of syntax: "message=>username;status=>password""
    }
}
```

This, with the exception of the pipe key allows me to just plug in the values into a fetch request. I also added the ability to pipe the response of one request to another request, but it’s quite buggy.

Finally, to coax the AI into responding with just JSON, I added a small example conversation I had with the AI and sent that with the system message.

## The UI

I made a simple UI in figma but I didn’t like it so I asked my friend @bddy to improve it. He did a really awesome job with the UI and you should check him out! I also hooked up the UI to the backend for him so he wouldn’t have to do that lol.

## Demo
{% embed https://replit.com/@EnZon3/AI-Powered-Query-Language-Tech-Demo?v=1 %}
🚀 Docker init 🐳
Tags: docker
Published: 2023-05-20 20:08:24

🆕💡With Docker Init, you can initialize your projects effortlessly by creating the necessary Docker-related files with just a single command. Whether you're starting a new project or containerizing an existing one, Docker Init has got you covered.

Docker init automates the creation of essential Docker assets, such as Dockerfiles, Compose files, and .dockerignore files, based on your project's characteristics. By executing the docker init command, you can quickly containerize your projects without the hassle of manual file creation. It's a game-changer for developers who want to experiment with Docker, learn about containerization, or integrate Docker into their existing projects.

To use docker init, simply upgrade to Docker Desktop version 4.19.0 or later and run the command in your project folder. Docker init will intelligently detect your project's definitions and generate the necessary files to run your project in Docker effortlessly.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vz7njpuv2xrb8031dyr.png)
100 Days Coding Challenge - Day 1: FreeCodeCamp Web Design
Tags: webdev, programming, css, 100daysofcode
Published: 2023-05-20 19:47:54

## Day 1
Hi! My name is Alexander. I'm **starting** with this challenge, today i was coding at www.freecodecamp.org, I'm practicing html and css to work on my personal web portafolio :D
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4qh9j76xe4booicjqst.png)
Customizing Theme in VS Code || VS Code Best Dark Theme🦄💫🦄
Tags: beginners, webdev
Published: 2023-05-20 19:47:40

#### Most of the time we install many extensions which we don't need all of the time. And So many extensions at that time, we don't notice our software running much less smoothly. So we should minimize the extension as much as possible😓. 

#### All those who are regular coders use some comfort-type theme extension for eye comfort. But if you want, you can easily change the theme of your VS Code according to your mind without any extension😉.
#### So let's see👀, how easily you can change the VS Code theme to your liking🕵️‍♀️.
---
- Step one ➣ Open VS Code👍.
- Step two ➣ go to the setting and select Themes and Color Theme.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rng9tppnhufqiaiopvda.png)
- Step three ➣ Select Monokoi Theme.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axls9ivw2qr2e3sqhe9e.png)
- Step four ➣ Now go to the settings and select the User and also select Workbench or Appearance and also click Edit in settings.json
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3mrklzkei0ycrsonxxv.png)

- Step five ➣ When clicking Edit in settings.json you will get the format like this picture ➜↓

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

- Step six ➣ And now enter this format also you can change whatever you want.

```
{
    "terminal.integrated.fontSize": 18,
    "editor.fontSize": 18,
    "editor.wordWrap": "on",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.colorTheme": "Monokai",
    "workbench.colorCustomizations": {
    
        "[Monokai]": {
            "editor.background": "#000",
            "editorGutter.background": "#111",
            "sideBar.background": "#000",
            "activityBar.background": "#111",
            "statusBar.background": "#111",
            "editor.selectionBackground": "#222",
            "editor.lineHighlightBackground": "#333",
            "tab.activeBackground": "#111",
            "tab.inactiveBackground": "#222",
            "terminal.foreground": "#ff0080",
            "terminalCursor.foreground": "#51ff00"
        }
    },
}

```
#### 【Here I also added a terminal color format if need then use otherwise delete it.】
### Now Enjoy 🥳🎉......