teleren/devto huggingface dataset:
DEV Showcase v7
Tags: showdev, beginners, help, codenewbie
Published: 2023-07-08 15:41:00

Welcome to the DEV Showcase - a weekly thread where you can share what you've been working on and get feedback and encouragement from the DEV community.

This is your chance to show off your latest project, share a cool hack or technique you've learned, or ask for advice and feedback from other developers. Whether you're a seasoned developer or just starting out, this is the place to connect with others and get inspired.

Here are a few questions to think about if you're stuck:

- What have you been working on lately?
- What tools or resources have you found helpful?
- Have you learned any new skills or techniques recently?
- What challenges have you faced, and how can the community help you overcome them?
- What are your goals for your project or your career moving forward?

Remember, this isn't a competition or a challenge - it's just a space to share and connect with others. So don't be shy! Share your work and get feedback and encouragement from the DEV community.

We're excited to see what you've been working on, and to support you as you continue to grow and develop your skills.
alternatives for react-native-maps
Published: 2023-07-08 15:36:15

Hi!
I’m building my first serious app. it’s an audioguide aggregator. one of the screens will feature a map with markers. i was planning to use react-native-maps for that, but it turned out the app needs a fully functional web version. and expo’s MapView doesn’t support that. any recommendations on what library i should use to make eveyrthing work with Expo?
Youtube Script Generator [Refine Hackathon]
Tags: refinehackathon, news, beginners, refine
Published: 2023-07-08 14:41:27

## What I built ❔

**A Youtube Script Generator on top of OpenAI API.**

### Category Submission:

- Best Project built using Material UI as the main UI framework for the refine app.
- Most Technical Impressive

### App Link 🔗
You can access the website [right here](https://youtube-script-generator-ivory.vercel.app/).

### Screenshots 🖼️

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

### Description 📔

A Project that generates youtube scripts working on top of OpenAI API.
This project is built as an example of how OpenAI's ChatCompletion API can be used in projects using NextJS.

### Link to Source Code 🧑‍💻

The source code can be found on my Github [right here](https://github.com/iAkashPattnaik/YoutubeScriptGenerator).

### Permissive License 🪪

This Project uses the [MIT License](https://github.com/iAkashPattnaik/YoutubeScriptGenerator/blob/main/LICENSE).

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

I was exploring new projects on twitter and dev.to when I stumbled upon a post in which he had developed a simple site with vanilla-js and it's sole job was generate twitter bios with the help of OpenAI API key. This inspired me to make this youtube script generator which is much more useful and also this marks the repository as a template/base for new developers that come along and see how it's done with Next.js!

### How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)  🏫

This Project is built using the following resources...

- [**NextJS**](https://nextjs.org/)
- [**Refine**](https://refine.dev/)
- [**Material UI**](https://mui.com/)
- [**OpenAI API**](https://openai.com/blog/openai-api)
- [**Tailwind CSS**](https://tailwindcss.com/)

Honestly speaking, I didn't know Material UI was sooo great till now. After making this project I've see it's true potential and I'm gonna use Material UI in all my next projects.
Writing a Telegram bot with SvelteKit and Vercel
Tags: svelte, sveltekit, telegram, vercel
Published: 2023-07-08 14:29:11

Let's write a Telegram bot with SvelteKit. The bot will run in Vercel, which provides zero-configuration support for SvelteKit.

Assume we already have a Telegram bot registered. Its token is in the BOT_TOKEN environment variable.

Our bot will use a webhook type of deployment, not polling.

The heart of the Telegram bot operating with the webhook is the POST endpoint, receiving callbacks from the Telegram servers. After the POST endpoint receives the request and deserializes the payload from JSON, it passes it to the "node-telegram-bot-api" library to handle.

Our bot will be trivial only to demonstrate how to handle the requests from Telegram in SvelteKit. It will echo back the received text messages.

After creating a project with "npm create svelte", install the Telegram library with "node-telegram-bot-api" and add the following configuration to "svelte.config.js":

```javascript
const config = {
        ...
        kit: {
            ...
            csrf: {
                checkOrigin: false,
            }
       }
};
```

let's create a "+server.ts" file in the "./routes" directory.

```typescript
import { bot } from "./bot";

export async function POST({ request }) {
    try {
        bot.processUpdate(await request.json());
        return new Response("", { status: 200 });
    } catch (e) {
        console.error(e);
        return new Response("", { status: 500 });
    }
}
```

The "bot.ts" file implements the echoing of incoming messages.

```typescript
export const bot = new TelegramBot(BOT_TOKEN);
console.log("bot", BOT_TOKEN);

export const history: any[] = [];
bot.on("message", async (msg) => {
    try {
        await bot.sendMessage(msg.chat.id, msg.text + ", and?");
        history.push({ when: new Date(), msg });
    } catch (e) {
        console.error(e);
    }
});
```

That's it.

Once the code is pushed to a git repo and deployed by Vercel, for example, on "https://sveltekit-bot.vercel.app", we need to set a webhook allowing Telegram to deliver the updates to the bot.

It needs to be done just once:

```bash
curl -X POST https://api.telegram.org/bot$(BOT_TOKEN)/setWebhook \
    -H "Content-type: application/json" \
    -d '{"url": "https://sveltekit-bot.vercel.app"}'
```

After that, we can start chatting with the bot!

NOTE: It is important to understand that this bot deployment to Vercel is stateless. When there is no traffic, Vercel stops the endpoint and kicks it off again when the traffic is coming. There is no data persistence
in the bot with this implementation. In a real bot, we may use external storage, like a database, to persist the bot's state.

The full source of the project is available at
https://github.com/begoon/sveltekit-bot/.

In the project, there is a trivial in-memory storage for messages and a page to print them for demonstration purposes. After the inactivity period, the deployment restarts by Vercel, and the message storage resets.
Alternative to Hangfire in Azure world
Published: 2023-07-08 14:28:32

0

i'm using from several time Hangfire with SQL and i don't have any problem.

Classic use cases that i will have are:

From a web app, user enqueue an operation and can check all pending operations. Where operation ends he has a notification via SignalR and can check output of a job. An example is the same Azure Portal, where every operation is enqueued and status is visible in the bell on top right.
Recurring job that runs every few seconds to perform scheduled operations indipendent from user's interaction. Jobs must have a lock concept, so until one is running, nothing else of the same type should start for that user.
Recently i'm moving to Azure, using k8s for some microservices. I think that i will use a microservice with Hangfire, do you thiks that Hangfire and microservices can coexist?

If i don't use Hangfire i have to replicate something similar using Azure Function (high cost), manage a storage for job's state, so will worth it using something different?

How do you manage these scenario in microservice architecture? Bye

I'm working on running Hangfire in a dockerized microservice.
HTTP vs WebSockets
Tags: javascript, webdev, programming, react
Published: 2023-07-08 14:28:23

## HTTP
Whenever you type any URL in the browser, say `https://google.com` and hit enter, a request goes to the DNS server in order to get the IP address behind the domain name. 
When the client gets the IP address, it establishes a TCP connection with the server on the cloud.

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

HTTP is based on client-server architecture, ie client requests for some data from the server, the server responds and then the connection is terminated. 


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

HTTP is stateless. ie every time client wants to send data to server, it has to explicitly specify all the headers like cookie, authorization etc headers, so that the server can recognize it.
Benefit of being stateless is that the request by the client can be served by any server in our backend as there is no state established among the server and the client. This enables us to easily scale the system horizontally.

HTTP connections start with `http://yoursite.com`.

HTTP is an application layer protocol built on the top of TCP/IP.

## Websockets

The Websocket protocol is stateful. It also used TCP under the hood. 
Here, the connection is not terminated after request-response process, but it exist until one of the party has not closed the connection explicitly.


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

Websockets have low-latency, that is why they are used for realtime communication, chat applications, gaming etc.

Websocket connections start with `ws://yoursite.com`

Drawback: If a connection is established, we can't transfer the next request to other server because if we do so the state will be lost. Hence it creates problems while scaling.
New Start
Tags: webdev, javascript, beginners, programming
Published: 2023-07-08 14:22:34

`_EPIC MUSIC STARTS_`Today is the day when I start a new journey, a new chapter, a path that I am not sure will take me to my destination but I am ready to roll the dice. From today onward I will write something on this website everyday which will force me to do something to write about every day. Most of the time I will write about the project that I am working on or the new skill that I am learning and other times I will say shit that will sound DUMB. One more thing I am not doing this for **YOU** or for **ANYONE** NOR to seek any **VALIDATION** from others I am doing this for **MYSELF** and **MYSELF ALONE**.`_EPIC MUSIC ENDS_`
Build a Single Source of Truth by Using Daxus!
Tags: react, webdev, javascript, typescript
Published: 2023-07-08 13:37:12

I'm excited to introduce Daxus I've developed to the community. In this article, I would like to simply share with everyone the motivation behind creating [Daxus](https://github.com/jason89521/daxus).

First of all, Daxus is a server state management package that make developer have full control over their data such that they can build a single source of truth by themselves.

Someone may ask: why don't you just use React Query or SWR?

In my company, we use redux with async thunk to manage the server state and implement single source of truth by ourselves. Take post as example, suppose there are two lists contain the post with the same id. This post share the same reference in the redux. That is, if the user update this post, the two posts will update simultaneously, and we don't need to make an extra request to refetch the whole post lists.

React Query encourages us invalidate the query if we have some data updated, which means that we need to refetch the whole list. However, refetch the two list just because we update a single post seems wasteful. We hope that we don't need to refetch the lists, but the same post in the both list should update also.

That is why I develope Daxus. You can find more details about the motivation in the readme also. Feel free to see it. https://github.com/jason89521/daxus#development-motivation

If you find this project interesting, also welcome to give it a star. It would be a tremendous encouragement to me. At the same time, I also hope that I can persuade my colleagues to adopt Daxus to our codebase. Thanks for your reading!

There is a question that I'm often asked:

Q: Why don't you just use queryClient.setQueryData?
A: In the pratical cases, we have not only two lists of the posts. If we consider update all these lists, it may be a disaster. Someone may ask, how about queryClient.setQueriesData? The answer is that the type is too dynamic. For more information, you can read this [article]( https://tkdodo.eu/blog/using-web-sockets-with-react-query#partial-data-updates).

If you have any question, I recommend read the motivation first. It provide more detail of why I want to develope Daxus. Thanks for reading!
pyenv - manage python versions
Tags: 100daystooffload, python, programming, pyenv
Published: 2023-07-08 13:35:18

I wish that I new about [pyenv](https://github.com/pyenv/pyenv) when I started to programming in Python.

This tool makes it easy to manage and switch between different Python versions and environments.

To install it make sure that all [prerequisites](https://github.com/pyenv/pyenv/wiki/Common-build-problems) are met. Then use the [pyenv-installer](https://github.com/pyenv/pyenv-installer) project like this to get the tool installed:

```bash
curl https://pyenv.run | bash
```

When `pyenv` is available on your machine you can easily create a new virtual Python environment for your next project:

```bash
pyenv virtualenv 3.10.0 my_new_project
```

This will create a new environment named, `my_new_project`, that is using the version 3.10.0 of Python.

And to activate the environment:

```bash
pyenv activate my_new_project
```

There are many more features provided by the `pyenv`-tool that can be explored, read more at [GitHub](https://github.com/pyenv/pyenv).
Fast guide, creating a ssh key pair for the user in Linux
Tags: tutorial, security, linux, ssh
Published: 2023-07-08 13:16:22

## Pre reqs

For this very short tutorial, you need to have installed the ssh client and server on your linux.
To install on Ubuntu: 
`$ sudo apt install openssh-client
 $ sudo apt install openssh-server`
On Arch
`$ yay -S openssh` or `$ sudo pacman -S openssh`

## Getting Started

To create your key pair run this command:
`$ ssh-keygen -o -a 100 -t ed25519 -f ~/.ssh/id_ed25519 -C "{your_email}"`

After this will appear a message to enter a passphrase like this:
`Enter passphrase (empty for no passphrase):`

You can just press Enter or write your passphrase and confirm.

![Return of the commands example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85sh08zrkna4zg28d5mi.png)

To get your pub key type:
`$ cat ~/.ssh/id_ed25519.pub`

![Get pub key return example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l005txw0rae6rfrb96xs.png)

Now you can copy your pub key and register on the ssh client of the service you want, like Github or Amazon.

So you don't have to type the passphrase all the time, your machine needs to have the ssh-agent service. You check if is running with this command:
`$ eval "$(ssh-agent -s)"`
The command will return the agent pid of the process.

If it is running, you can add your new key to the agent, just type: 
`$ ssh-add ~/.ssh/id_ed25519`.
Then it only will ask for your passphrase once.

Well done! Now you're a cryptographically identifiable citizen in our society.
Create React UI Lib 1.1: Ladle and ESLint
Tags: typescript, react, node, opensource
Published: 2023-07-08 13:13:20

Recently I've released [Create React UI Lib](https://dev.to/topcat/create-react-ui-lib-component-library-speedrun-25bp): a CLI tool that helps you set up and start building your own UI React component library in no time.

Give it a try!
```shell
npm create react-ui-lib@latest
```

Great news! I've just updated it with cool features:

- You can now pick [Ladle](https://ladle.dev/) over Storybook (shout out to @insulineru for this [cool idea](https://dev.to/insulineru/comment/27bn2)),
- You can also add ESLint now (props to @femincan for the [suggestion](https://dev.to/femincan/comment/27do7)).  It comes with recommended settings for these plugins: [typescript](https://typescript-eslint.io/), [prettier](https://github.com/prettier/eslint-plugin-prettier), [react](https://github.com/jsx-eslint/eslint-plugin-react), [react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks), [jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y).

Here's what it looks like: 

![CLI example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qh2l5uq82ua8nr3ejvz.png)

Do let me know in the comments what you'd like me to add next. Your ideas are always welcome!

If you're liking my work, support me by giving my [project](https://github.com/mlshv/create-react-ui-lib) a few stars on GitHub. Also, feel free to [point out any issues](https://github.com/mlshv/create-react-ui-lib/issues/new) you come across.

--- 

If you enjoyed this update, give it a like and stay tuned for more.

Also follow me on [Twitter](https://twitter.com/mishgun_eth) and connect on [LinkedIn](https://www.linkedin.com/in/mikhail-malyshev-030395237/). Let's keep in touch!
Unleashing the Power of Microservices: Exploring the Pros and Cons
Tags: microservices, monolithic, architecture
Published: 2023-07-08 13:04:36

Microservices have gained popularity as an architectural style for building complex and scalable applications. By breaking down monolithic applications into smaller, independent services, microservices offer several advantages. However, they also present certain challenges that need to be considered. In this blog post, we will explore the world of microservices and discuss their pros and cons.


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

## Pros of Microservices

1. **Flexibility**: Microservices promote flexibility by enabling individual services to be developed, deployed, and scaled independently. This allows for easier maintenance and updates without affecting the entire application.

2. **Scalability**: With microservices, you can scale specific services independently based on their demands. This results in better resource utilization and improved performance.

3. **Fault Isolation**: Since microservices are decoupled, issues in one service are less likely to impact the entire application. Faults can be isolated and resolved quickly, improving system reliability.

4. **Technology Independence**: Microservices allow for the use of different technologies and programming languages within the same application. This gives developers the freedom to choose the best tools for each service's specific requirements.

## Cons of Microservices

1. **Complexity**: As the number of services increases, so does the complexity of managing and coordinating them. Inter-service communication, data consistency, and deployment orchestration can be challenging tasks.

2. **Operational Overhead**: With multiple services to deploy, monitor, and manage, the operational overhead of a microservices architecture can be significant. This includes handling service discovery, load balancing, and fault tolerance.

3. **Distributed System Challenges**: Microservices operate in a distributed environment, which introduces additional complexities such as network latency, data synchronization, and dealing with failures.

4. **End-to-End Testing**: Testing a microservices architecture requires testing each service independently as well as testing the interactions between services. This can be time-consuming and complicated.

## Conclusion

Microservices offer numerous benefits in terms of flexibility, scalability, and fault isolation. They enable developers to build complex applications using the best tools for the job. However, they also introduce challenges related to complexity, operational overhead, and testing. It is crucial to carefully consider the trade-offs before adopting a microservices architecture for your application.

Thank you for reading this blog post on microservices. We hope you found it informative and helpful in understanding the pros and cons of this architectural approach. If you have any questions or comments, feel free to reach out.
What you learning about this weekend?
Tags: codenewbie, discuss, learning, beginners
Published: 2023-07-08 13:00:00

Heyo 👋

What ya been learning on?

Whether you're sharpening your [JS](https://dev.to/t/javascript) skills, making PRs to [your OSS repo of choice](https://github.com/forem/forem) 😉, sprucing up your portfolio, or [writing a new post](https://dev.to/new) here on DEV, we'd like to hear about it.

You got this! 

![Bill Murray in a tux with a drink in hand points at us and the words "you got this" appear on the screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1q24c3ly0bk3umshprhh.gif)
Trabalhando com funções de agregação no SQL
Tags: datascience, sql, beginners, tutorial
Published: 2023-07-08 13:00:00

Olá a todos! Hoje, quero mostrar como você pode extrair informações de seus dados usando funções de agregação.

Mas, o que são as funções de agregação? São funções usadas para realizar cálculos em um conjunto de valores e retornar um único valor. São essenciais quando estamos lidando com grandes volumes de dados e queremos resumir informações.

Vamos começar com uma das mais básicas: COUNT. Esta função retorna o número de linhas que correspondem a um critério. Por exemplo:

```
SELECT COUNT(*) FROM Alunos;
```

Isto retornará o número total de alunos em nossa tabela.

A função SUM retorna a soma de todos os valores de uma coluna específica. Se quisermos somar todas as idades na tabela Alunos, usamos:

```
SELECT SUM(Idade) FROM Alunos;
```

A função AVG retorna a média de um conjunto de valores. Assim, para encontrar a idade média dos alunos, usamos:

```
SELECT AVG(Idade) FROM Alunos;
```

As funções MAX e MIN retornam o maior e menor valor de um conjunto de valores. Podemos usá-las para encontrar a idade do aluno mais velho e mais novo:

```
SELECT MAX(Idade), MIN(Idade) FROM Alunos;
```

Por fim, podemos usar a cláusula GROUP BY em conjunto com funções de agregação para agrupar nossos resultados. Por exemplo, podemos querer saber a média de idades por curso:

```
SELECT Curso, AVG(Idade) 
FROM Alunos 
GROUP BY Curso;
```

No final das contas, as funções de agregação são incrivelmente úteis e necessárias para seu dia a dia trabalhando com dados. Espero que este artigo tenha dado a você uma visão clara de como elas funcionam e como podem ser aplicadas em suas próprias análises. Lembre-se, o segredo está em praticar!
Learning Javascript
Published: 2023-07-08 12:57:39

Started my coding journey by learning MYSQL to solve a logic I built through excel faster. Now here I am learning javascript to prepare for coding bootcamp. 

There are so many resources out there to learn! It's awesome.

I am trying out the free course on linkedin.com - pretty cool! - https://www.linkedin.com/learning/javascript-essential-training/practice-build-a-new-object

- The goal is to build my own app with an algorithm I created. At first I tried outsourcing developers, but that was a fail. I am determined to learn it myself! Happy Saturday DevTeam!