teleren/devto huggingface dataset:
Como armazenar credenciais como uma chave de api no Rails
Tags: rails, ruby, webdev, api
Published: 2023-06-24 16:45:57

Quem aqui nunca quis armazenar credenciais como uma variável de ambiente para usar na sua aplicação. Então seus problemas acabaram. O Rails nos disponibiliza uma ferramenta para armazenar nossas credenciais usando criptografia. Sem mais delongas, vamos ao que interessa.

Uma vez que você já tem seu projeto Rails criado, use essa linha de comando em um terminal que está rodando na pasta raiz do seu projeto Rails.

`EDITOR="nano" rails credentials:edit`

Se você está rodando essa linha de comando pela primeira vez, ela irá criar um arquivo chamado master.key, a qual é uma chave para criptografar e descriptografar suas credenciais.

Depois de rodar esse comando, ele abrirá o editor que você escolheu dentro do parametro EDITOR na linha de comando, o editor será aberto no arquivo onde são armazenadas as credenciais, então você pode guarda-las aqui com a sintaxe do yml, como por exemplo: 
```
api_key: 7647hddggsadasb-afdafd-nfs
aws: 
   access_key_id: 123
   secret_access_key: 345
```
Então salve o arquivo com o seu editor e suas credenciais serão armazenadas com sucesso.

Para acessar essas variáveis no seu código siga esse exemplo:

```
Rails.application.credentials.api_key
Rails.application.credentials.aws.access_key_id
Rails.application.credentials.aws.secret_access_key
```
Você pode editar suas credenciais com o mesmo comando:

`EDITOR="nano" rails credentials:edit`

Simples não é? Com o Rails tudo fica mais fácil.

Obrigado por ler esse post :)
how to carte a simple programming library !!
Published: 2023-06-24 16:42:43

Hello,
In this article, I will teach you how to create a programming library like ReactJS. Basically, I will show you how companies create programming libraries. Then you can upload it to Node Package Manager (npm) so anyone in the world can use it. Without further ado, let's get started.

First, what is a programming library? A programming library (Library) is a collection of programming code that contains specific functions and data types that developers can use in developing their applications and programs without the need to rewrite them from scratch. In other words, a programming library is a collection of programming code that has been compiled together to facilitate the software development process.

To create a programming library and upload it to npm, you can follow the following steps:

(Note that in this article, I will show you how to create a JavaScript library, but you can apply the same steps to any other programming language.)

Step 1: Create a new project. You can create a new project on your computer using different software development tools, such as Visual Studio Code, WebStorm, Atom, or Notepad++.

Step 2: Create a package.json file. You must create a package.json file in the new project folder and fill in the different fields, such as the project name, description, version, author, and follow the latest version of npm.

Step 3: Add programming code. You can add the programming code for the library in JavaScript files in the project folder.

Step 4: Create an account on the npm website and then:

- Login to npm: You must log in to npm using your account.
- Publish the library: You can publish the library on npm using the npm publish command.

These are the basic steps for creating a programming library and uploading it to npm. You can customize these steps according to your project needs and the development tools you are using.
SuperCoder: A SuperAGI Agent Template for Coding Projects
Tags: ai, opensource, python
Published: 2023-06-24 16:26:33

SuperCoder is an agent template configured in SuperAGI that can write simple coding projects.

You just give an objective of the project and it would write the specs, unit tests, and code. You can run it along with the action console to give feedback at every step or even use it with other SuperAGI tools such as Google SERP, Dall-E, or GitHub tool.

## ⚙️ Configuring SuperCoder
- Navigate to the Marketplace
- Install the SuperCoder template
- Create a new agent using the SuperCoder template
![SuperCoderCreation](https://superagi.com/wp-content/uploads/2023/06/Agent-Creation.png)

##💡 SuperCoder Features

- Specs Tool: SuperCoder leverages the Specs tool to create in-depth project specifications, breaking down high-level requirements into detailed, actionable project specs
- Unit Testing: SuperCoder executes unit tests for the code it generates, having a Test-Driven Development (TDD) approach and ensuring error handling
- Multilingual Code Generation: SuperCoder is capable of generating code across multiple files in any given language
- Google SERP Tool Integration: SuperCoder utilizes the Google SERP tool which enables the agent to examine open-source code, access relevant tutorials, and gather the necessary information for effective code generation

[![Youtube Video](https://superagi.com/wp-content/uploads/2023/06/Supercoder-Youtube-Cover.png)](https://youtu.be/diwEMh1UH5g)

## ⏭️ Future Plans for SuperCoder

- Database Dependencies: The ability to create and integrate database dependencies, essential for building CRUD applications such as a micro CRM
- Iterative Code Improvement: The agent will use multiple iterations to iteratively refine the code
Direct Code Execution: Integration with platforms like Replit or Netlify for direct code execution
- Runtime Error Management: Improved handling of runtime errors for supported local languages, ensuring the error handling of the final output
- GitHub Tool Integration: Direct connection with SuperAGI’s GitHub tool for repository creation and code push
- Codebase Refactoring: SuperCoder will have the ability to connect to an existing GitHub repository for existing codebase refactoring and improvement

## 💻Some projects created using SuperCoder

|[![Dino Game](https://superagi.com/wp-content/uploads/2023/06/Dino-600x401.png)](https://ornate-rugelach-8cbcfb.netlify.app/) | [![Flappy Bird](https://superagi.com/wp-content/uploads/2023/06/Flappy.png)](https://clinquant-fox-3253a2.netlify.app/) | [![Pomodoro](https://superagi.com/wp-content/uploads/2023/06/Pomodoro.png)](https://brilliant-beignet-df3779.netlify.app/) |
|-|-|-|
| [Play here](https://ornate-rugelach-8cbcfb.netlify.app/)|[Play here](https://clinquant-fox-3253a2.netlify.app/) | [Play here](https://brilliant-beignet-df3779.netlify.app/) |


[Leave a ⭐ on GitHub](https://github.com/TransformerOptimus/SuperAGI)
[Roadmap](https://github.com/users/TransformerOptimus/projects/1/views/1)
[Website](https://superagi.com)

Originally Posted on [SuperAGI Blog](https://superagi.com/blog/)
How to store credentials like an api key in Rails
Tags: rails, ruby, webdev, api
Published: 2023-06-24 16:23:51

Who here ever wanted to storage credentials like an env variable to use in your application. So your problems are over. Rails provides us a tool to store our credentials using encryption. Without further ado, let's get down to business. 

Once you have your rails project already created use this command line in the terminal running in your root of your rails project.

`EDITOR="nano" rails credentials:edit`

If you are running this command for the first time, it will create a master.key, which is a key for encrypting and decrypting your credentials.

After running it will open the editor that you choose inside the parameter EDITOR in command line, the editor will open in the file that stores the credentials, then you can store your variables in yml format like this:
```
api_key: 7647hddggsadasb-afdafd-nfs
aws: 
   access_key_id: 123
   secret_access_key: 345
```
Then save it with your editor and your credentials are stored sucessfully.

To access this variables in your code follow this example:

```
Rails.application.credentials.api_key
Rails.application.credentials.aws.access_key_id
Rails.application.credentials.aws.secret_access_key
```
You can edit your credentials with the same command:

`EDITOR="nano" rails credentials:edit`

Simple isn't it? With Rails everything is much easier.

Thanks for reading this post :)
Why does everyone love Tailwind ?
Tags: webdev, javascript, beginners, tailwindcss
Published: 2023-06-24 16:15:17

## Introduction

Tailwind CSS is a popular CSS framework that has gained a lot of traction among front-end developers in recent years. It's a utility-first CSS framework, which means that instead of providing a set of pre-defined design components, it provides low-level utility classes that let you build your design components. This approach allows for a lot of flexibility and customization and makes it easy to create consistent designs without having to write a lot of CSS.

## Advantages

### \- Smooth Transition

One of the key advantages of Tailwind CSS is that it's very easy to get started with. To use Tailwind CSS in your project, all you need to do is include the Tailwind CSS stylesheet in your HTML file, and then you can start using the utility classes in your HTML elements. For example, to give an element a rounded border, you can add the `rounded` class to the element like this:

```javascript
<div class="rounded">
  This element has a rounded border
</div>
```

In addition to providing utility classes for styling, Tailwind CSS also includes a set of responsive design utility classes that make it easy to create responsive designs. These classes let you control the layout of your elements at different screen sizes, and make it easy to create designs that look great on any device. For example, to make an element take up half of the screen on small devices and the full width on larger devices, you can use the `w-1/2` and `w-full` classes like this:

```javascript
<div class="w-1/2 sm:w-full">
  This element takes up half of the screen on small devices and the full width on larger devices
</div>
```

Tailwind CSS also includes a set of color and typography utility classes that make it easy to create beautiful and consistent designs. These classes let you easily control the color and typography of your elements, and make it easy to create designs that are consistent and easy to maintain. For example, to give an element a green background color and white text, you can use the `bg-green-500` and `text-white` classes like this:

```javascript
<div class="bg-green-500 text-white">
  This element has a green background and white text
</div>
```

### \- Customizability

One of the reasons why Tailwind CSS has become so popular is that it's very easy to customize. The framework includes a large number of utility classes, but you don't have to use all of them in your project. Instead, you can pick and choose the classes that you need, and even define your custom utility classes. This makes it easy to create designs that are unique and tailored to your specific needs.

## Conclusion

In conclusion, Tailwind CSS is a powerful and flexible CSS framework that makes it easy to create beautiful and consistent designs. Its utility-first approach allows for a lot of customization and flexibility, and its responsive design utility classes make it easy to create designs that look great on any device. If you're looking for a CSS framework that's easy to use and customize, Tailwind CSS is worth considering.
setting up next auth with the new app directory
Tags: nextjs, react, webdev
Published: 2023-06-24 16:14:24

I was looking for ways to setup next-auth with the new app directory and found no blog that gave out the steps for actually doing it.

here are the steps of setting it up.

for this, i did not use the scr file structure in my next project.

i install next auth 

`npm install next-auth`

ii add an api route 

` touch app/api/auth/[...nextauth]/route.ts`

inside of the routes add the following code 

```
import { authOptions } from "@/utils/authoptions";
import NextAuth from "next-auth/next";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };
```
This handle all requests related to next-auth.
we need to create authOptions

iii create authOptions

there are different providers that can be use for authentication,
you can have a look at the next-auth docs to view how to impliment for different providers
in this case ill simply use the credential provider

`mkdir utils`

`touch authOptions.ts`

inside the authOptions file ,add the following

```
import { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      authorize(credentials: any, req) {
        // database operations
        return {
          id: "1",
          Email: credentials.email,
        };
      },
    }),
  ],
};

```

iv adding required environment variables

next auth needs the following environment variable 

```
# this is for jwt encording
NEXTAUTH_SECRET='supersecretkey'

#used to specify the url to the site
NEXTAUTH_URL='http://localhost:3000'

```

shifting to handling sessions in the client side

v creating a session provider 

`mkdir providers`

`touch SessionProvider.tsx`

then add the following code 

```
"use client";

import React from "react";
import { SessionProvider } from "next-auth/react";

type sessionProps = {
  children: React.ReactNode;
};
function NextAuthSessionProvider({ children }: sessionProps) {
  return <SessionProvider>{children}</SessionProvider>;
}

export default NextAuthSessionProvider;

```

vi adding the provider to layout.tsx

include it to the rootLayout function

```

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <NextAuthSessionProvider>{children}</NextAuthSessionProvider>
      </body>
    </html>
  );
}
```

and thats it , you can use the usesession hook to check if someone is logged in or not.

here is a link to the full code https://github.com/nelsonchege/next-auth-with-app-directory
[Summary] Chapter#02 'The Internals of PostgreSQL' Process and Memory Architecture.
Tags: postgres, apacheage, age, bitnine
Published: 2023-06-24 15:41:06

## Process Architecture
PostgreSQL is a client/server type relational database management system with the multi-process architecture and runs on a single host.

Multiple processes cooperatively managing one database cluster is referred to as a PostgreSQL.

- Postgres server process is parent of all processes related to a database cluster management
- Backend processes handles all queries and statements issued by a connected client
- Background processes perform processes of each feature for database management
- They perform streaming replication in replication associated processes
- In the background worker process supported from version 9.3, it can perform any processing implemented by users.

## Postgres Server Process

A postgres server is the parent of all in a postgreSQL server, in an earlier version it is called Postman.
‘pg_ctl’ starts all the necessary processes like options. It starts the postgres server process, it allocates a shared memory area in memory, start background processes, start replication associated with processes and more.
5432 is the default network port which the postgres server process listens to, and more than one PostgreSQL server can run on the single host. 

## Backend Processes

Postgres is called a backend process, one connected client issues all the queries and starts the postgres server, TCP connection is used for communication. Max_connection parameter used to configure parameters and control the max number of clients default 100.

## Memory Architecture

Local Memory area: Allocated by each backend process for its own use, Each backend process allocates a local memory area for query processing areas divided into subareas and its size is either fixed or variable.
 
Shared memory area: Used by all processes of a postgreSQL server, shared memory area is allocated by a PostgreSQL server when it starts and it divided into several fixed subareas

[Reference](https://www.interdb.jp/pg/pgsql02.html)
Secure your Nodejs REST API By using Rate Limiting
Tags: javascript, api, programming, tutorial
Published: 2023-06-24 14:46:55

**Introduction**

Rate limiting is a technique used to control the number of requests that a client can make to an API within a given period of time. This can be used to protect your API from being overloaded by malicious traffic or to prevent individual users from making too many requests and impacting the performance of your API for other users.

In this blog post, we will show you how to implement rate limiting in your Node.js API using the Express framework. We will use the `express-rate-limit` package to do this, which is a popular and well-maintained library for rate limiting in Node.js.

**Prerequisites**

Before you start, you will need to have the following installed:

- Node.js
- The Express framework
- The `express-rate-limit` package

**Setting up the rate limiter**

The first step is to install the `express-rate-limit` package. You can do this by running the following command in your terminal:

**Code snippet**

```bash
npm install express-rate-limit
```

Once you have installed the package, you can create a new Express application. In your application's main file, you will need to require the `express-rate-limit` package and create a new rate limiter instance. The following code shows how to do this:

**Code snippet**

```tsx
const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

const limiter = rateLimit({
  max: 10,
  windowMs: 60 * 1000,
});

```

The `max` property specifies the maximum number of requests that a client can make within the specified window of time. The `windowMs` property specifies the length of the window in milliseconds.

**Applying the rate limiter**

Once you have created a rate limiter instance, you can apply it to your Express routes. To do this, you can use the `use()` method. The following code shows how to apply the rate limiter to a route that returns a list of users:

**Code snippet**

```tsx
app.get("/users", limiter, (req, res) => {
  // Get a list of users
  res.send(["John Doe", "Jane Doe"]);
});

```

When a client makes a request to this route, the rate limiter will check to see if the client has exceeded the maximum number of requests for the current window. If the client has exceeded the limit, the rate limiter will return an error response.

**Testing the rate limiter**

You can test the rate limiter by making a number of requests to the `/users` route. If you make more than 10 requests within a 60-second window, you will start to receive error responses from the rate limiter.

**Conclusion**

In this blog post, we have shown you how to implement rate limiting in your Node.js API using the Express framework. We used the `express-rate-limit` package to do this, which is a popular and well-maintained library for rate limiting in Node.js.

I hope this blog post was helpful. If you have any questions, please feel free to leave a comment below.
New to DEV Community
Tags: firstpost, beginners
Published: 2023-06-24 14:41:48

### I am beyond excited!

For the first time in a long time, I have been moving along some short-term plans rather smoothly. A rather interesting line of events has brought me here, and I could not be happier to be.

I was aware and had visited [DEV](https://dev.to/) before, but not until now have I thought of reposting some of my [existing blog](https://miguelpimentel.do/) posts [here](https://dev.to/datastring). I just learned how to use `canonical_url` to link existing blog posts to reposts on this site, and in the coming days, I will be reposting them here.

This is the perfect opportunity to use this as yet another reason to stay consistent in producing posts, and remaining engaged in the community.

Thanks for the quick read. Have a nice day.
Open Source Development Community
Tags: opensource, beginners
Published: 2023-06-24 14:28:25

---
title: Open Source Development Community
published: true
description: 
tags: opensource, beginners
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-24 14:16 +0000
series: opensource
---

You might recall I mentioned the [Open Source Development Course](https://osdc.code-maven.com/course) a number of times here.

We used to have a Slack workspace and in another project we used a Discord server, but I always felt uncomfortable with the fact that we use a closed-source solution. Finally I found  [Zulip](https://zulip.com/) an open source alternative to Slack and Discord.

This allowed me to create an instance on Zulip for another meaning of OSDC: The [Open Source Development Community](https://osdc.zulipchat.com/) that got sponsored by Zulip.

To this place I'd like to invite both participants of my course and anyone else who is interested either in contributing to an open source project or helping new contributors getting started. 

I have a separate page explaining more about the [Open Source Development Community](https://osdc.code-maven.com/community) where I also included a few notes on how to get started once you are in our Zulip server.

Be among the first people to join us!
Create a mini facebook clone in laravel and ajax
Tags: laravel, ajax, javascript, jquery
Published: 2023-06-24 13:33:23

**Hello**
The down point you will learn in this video 

1.login and register before create the post
2. Create post
3. get post
4. update and delete post
5. make like and dislike on a post
6. do a comment and replay comment on each post
7. you can delete you comment

for more detail watch the video
ViewModel
Published: 2023-06-24 13:32:05

```
<type name="Magento\Contact\Plugin\UserDataProvider\ViewModel">
        <arguments>
            <argument name="viewModel" xsi:type="object">Magento\Contact\ViewModel\UserDataProvider</argument>
        </arguments>
    </type>
    <type name="Magento\Contact\Block\ContactForm">
        <plugin name="set_view_model" type="Magento\Contact\Plugin\UserDataProvider\ViewModel" />
    </type>
```
하하호호히히히히헤헤헤호호홓
Published: 2023-06-24 13:29:46

오 이거 잘 될려나

# 하하호호

히히헤헤

# 하하호홓헤헤

**안녕안녕**
**어느정도는 잘 되는 것 같어 ** 그러`니깐` 말이야
~~이런 기능도 잘 제공되고~~
_이런것도 잘 되고 말이야_
**_~~ㅇㅎㅇㄴㅎ~~_**

---


`이것도 잘되니?`

```
func main() {
    guard let hello = "ABC" else { return }
}
```


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

안녕난영