teleren/devto huggingface dataset:
pebl cli release - redis tunnel support!
Tags: pebl, devops, cloud, release
Published: 2023-05-05 18:29:45

## Quick Summary

The latest pebl cli now supports creating tunnels to your redis instances!
Make sure to download the latest cli in order to easily gain access to
your remote redis instances.

<!--truncate-->

## Longform

If you don't have redis running on pebl's cloud runtime yet, head
over to the [intro to redis](https://docs.pebl.io/guides/python/redis) guide
to create one!

### setup

Follow the [setup guide](https://docs.pebl.io/setup) to install
the latest pebl cli. Make sure that the cli is properly installed
by checking the output of `pebl version`:

```
$ pebl version
0.0.2
```

### pebl tunnel

To create the tunnel, simply run the `pebl tunnel` command and supply
the name of the redis instance you want to connect to:

```
$ pebl tunnel my-redis-1
```

However, if you have just one redis in our cloud runtime, you can omit
the name argument:

```
$ pebl tunnel
```

This will automatically create a tunnel to your one redis instance.

### redis-cli

The command allocates a local port that will proxy traffic between
your local machine to the cloud redis instance. The command will
output the local port and an example `redis-cli` command that you
can invoke:

```
$ pebl tunnel
tunnel established at: 127.0.0.1:12345
use redis-cli to connect:
redis-cli -p 12345
```

Then simply invoke the `redis-cli` with the `-p` option to connect.

```
$ redis-cli -p 12345
127.0.0.1:12345> ping
PONG
```

And that's it! That should give a fast way to inspecting your
redis instances. For more information on how to utilize redis
on the pebl runtime, head over to the
[intro to redis](https://docs.pebl.io/guides/python/redis) guide.
Effortlessly Set Up a Next.js Project with ESLint: A Step-by-Step Guide
Tags: nextjs, eslint, webdev, react
Published: 2023-05-05 18:09:20

👋 Hey there! If you’re looking to set up a Next.js project with ESLint for your codebase, then you’ve come to the right place. In this post, we’ll cover everything you need to know to get started, including the installation process, why you should use ESLint, and how to create a new Next.js project.

## What is ESLint and Why Should You Use It?
ESLint is a powerful tool that helps you write better and more consistent code by catching syntax errors, enforcing coding conventions, and detecting potential problems. It’s easy to set up and configure, and it works with a wide range of languages and frameworks.

Using ESLint can help you catch bugs and errors before they become big problems, and it can save you a lot of time and effort in the long run. It can also help you maintain a consistent coding style across your team, which can make your codebase more readable and easier to maintain.

## Creating a Next.js Project
Before we can set up ESLint, we first need to create a new Next.js project. To do this, we can use the following command:

```
npx create-next-app my-app
```

This will create a new Next.js project called “my-app” in your current directory. Once the project is created, you can navigate into the new directory by running:

```
cd my-app
```

## Installing Dependencies
Now that we have a new Next.js project set up, we need to install the dependencies required for ESLint. These include:

- eslint
- eslint-config-airbnb
- eslint-config-prettier
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-react
- eslint-plugin-react-hooks
- @typescript-eslint/parser
- @typescript-eslint/eslint-plugin

You can install all of these packages at once by running the following command:

```
npm install - save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

## Configuring ESLint
Once you have installed all of the required dependencies, you need to configure ESLint to work with your Next.js project. To do this, we’ll create an .eslintrc.json file in the root directory of your project, and add the following configuration:

```
{
 "plugins": ["@typescript-eslint"],
 "extends": [
   "airbnb",
   "next/core-web-vitals",
   "prettier",
   "plugin:@typescript-eslint/recommended"
 ],
 "parser": "@typescript-eslint/parser",
 "overrides": [
   {
     "files": ["*.ts", "*.tsx"],
     "parserOptions": {
     "project": ["./tsconfig.json"]
   }
 }
 ],
}
```

This configuration sets up ESLint to use the recommended configuration from Airbnb, along with Prettier for formatting and TypeScript support. It also includes the @typescript-eslint plugin, which allows ESLint to understand TypeScript syntax.

## Wrapping Up
And that’s it! You now have ESLint set up in your Next.js project, which will help you write better and more consistent code. If you have any questions or feedback, feel free to leave a comment below.

Thanks for reading, and happy coding! 🚀
Day 1, #100DaysOfCode (1/100)
Tags: 100daysofcode, programming, webdev, portfolio
Published: 2023-05-05 13:02:25

(May, 01)

_Today, I started the #100DaysOfCode challenge, where I will be sharing my progress in this post._

My main goal is to create my portfolio, a project that has been on my to-do list like fo-re-ver! (Actually, for the past five months. I am an intense and dramatic person, and I apologize for that).

To begin the project, I decided to create the skeleton of my portfolio using HTML5, CSS3 and, of course, a little bit of design, which is challenging for me, even though I enjoy front-end development. Thank God I’m a non-practicing perfectionist because despite judging my work a lot, I still do it, no matter if I’m not completely happy with it.

I believe that my website will look very different by the end of the 100th day, but the important thing is to start and improve as time goes on.

## Talking a little bit about the tecnologies that I used

## HTML5

I believe that HTML5 has no secrets, as it’s all about applying the tags in the best way possible. I am trying to be smart on this subject, considering the importance of tags and their meanings for SEO.

Here are some of the best practices I am following (probably, as time goes on, I’m going to add some other best practices):

- I am not using more than one H1 tag, as it is essential that a page has only one H1 tag, which search engines consider as the page’s title.
- I am not using too many H2 and H3 tags, but I will follow the basic structure of using H2 for sections and H3 for subsections.
- I am always using alt text for my images, as it is crucial for web accessibility.
- I am trying to use tags with meaning, such as: header, for the top part of my document; nav, for the menu, which is on the header; main, for the main section (for now, I am not using other tags as I have only created the skeleton of my site. As the project progresses, I may use other tags); footer: for the bottom part of my document.

## CSS3

I do not have much to say about CSS, but for now, I am using only flexbox for the structure of my website. I enjoy working with flexbox, and I am comfortable using it. I may also use grid layout in my portfolio projects, but for my website, I plan to stick with flexbox, unless I feel it necessary to change.

That’s all for today!

_PS: I have not decided whether to publish my progress daily or weekly, so I may see you tomorrow or next week. Bye-bye._
Mastering Express: Building Robust TypeScript Servers with Ease.
Tags: webdev, javascript, tutorial, programming
Published: 2023-05-05 18:04:47

This article is a step by step tutorial to create a express server using typescript.

> Note: Typescript cannot be run directly into node runtime environment, although runtime like Deno, Bun supports typescript. 

Create a folder, initialize `npm` package using:

```sh
npm init --y
```

Let's install dependencies required to create express server.
`express`, `@types/express` to use type definitions, intellisense in code editor. Also few developer dependencies like `typescript` to convert typescript file into javascript file, `nodemon` to ease our development (it automatically watch for changes, and reload your code in runtime), `concurrently` to run both the above developer dependencies simultaneously.

```sh
npm i express @types/express && npm i -d nodemon concurrently
```

Let's initialize typescript in the project. using the following command

```sh
npx tsc --init
```

A `tsconfig.json` file will be created in the  project. In the `tsconfig.json` file uncomment `outDir` line and enter a outDir (`dist` here):

```json
"outDir": "./dist"
```

Let's create a NPM script for this typescript express configuration.

In `pacakage.json` file add following code,

```json
"dev" : "concurrently \" tsc --watch\" \"nodemon dist/index.js\""
```

also remove a line
```json
"main" : "index.js"
```

now the final part, create `index.ts` file.

```ts
import express from "express";
const PORT = 3000;
const app = express();
app.get("/",(req,res)=>{
  res.send("Hello");
}
app.listen(PORT);
```

Run the `dev` script you just created in command line using:

```sh
npm run dev
```

That's it you're good to go, your express typescript server is ready at localhost, port 3000 [Link](http://localhost:3000)

Let's Connect - 
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hey%20folks%20i%20recently%20read%20this%20article%20about%20Mastering%20Express%3A%20Building%20Robust%20TypeScript%20Servers%20with%20Ease%20on%20Dev.to%20by%20Kunal.py3%20do%20check%20this%20out%20%23webdev%20%23express%20%23javascript%20%23typescript" data-size="large">Tweet Thanks</a>
[LinkTree](https://linktr.ee/kunal.dev)
GETTING STARTED WITH CHAKRA UI
Tags: react, javascript, webdev, frontend
Published: 2023-05-05 18:00:59

If you are a frontend developer that loves to develop with React.js, and you need a library that can speed up your work, productivity, make you write less code and help you design excellent user friendly and responsive UI, then CHAKRA UI is your guy!.

_I used to develop React applications before with Tailwindcss, at least that's faster than while using vanilla CSS._

Recently I built a very big app with `React.js` and `Tailwindcss` for a client, and I built another with `React.j`s and `Chakra UI`, the difference is clear.

With `Tailwind`, I had to code out every component, and that consumed a lot of time.

> NOTE: If you are just starting out, I would advice you learn and understand the fundamentals before you try out any frameworks.

But while I was working with Chakra UI, I finished a very big app in about a week.

I was able to achieve this because I used Chakra UI which gave me most of the components I needed for the app, so all I needed to do was refactor it so I can reuse wherever I needed that component again.

This strategy sped up my productivity x3 and it made my work as a frontend developer easy and less stressful.

_Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications._

I know by now you are wondering, **HOW DO I START WITH CHAKRA UI?**.

The sweetest thing about Chakra UI is, their documentation is very easy to grab and understand.

If you have used tailwindcss before or material UI, then understanding Chakra UI will be a walk over for you.

## HOW TO GET STARTED

### STEP 1:
**Install Chakra UI into your React application**

```
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

### STEP 2
_Set up Chakra provider inside the root of your React application.
Most likely your index.js file_

```
import react from 'react'
import { ChakraProvider } from '@chakra-ui/react'

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
   <ChakraProvider>
        <App />
    </ChakraProvider>
  </React.StrictMode>
);
```

## STEP 3
_You are ready to start using Chakra UI in your react applications_

```
import { Box, Text } from '@chakra-ui/react'

export default function App(){
return ( 
     <Box>
        <Text>WELCOME TO CHAKRA UI</Text>
     </Box>
)
```

Read more from their [documentation](https://chakra-ui.com/getting-started)
Who's looking for open source contributors? (week 40)
Tags: discuss, opensource, contributorswanted
Published: 2023-05-05 17:00:00

---
title: Who's looking for open source contributors? (week 40)
published: true
description: Discover which opensource projects are actively seeking contributors. Learn how you can make a meaningful contribution to the open source community and gain valuable experience. Find out who's looking for opensource contributors now.
tags: discuss, opensource, contributorswanted
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2023-05-05 17:00 +0000
---
Restarting something Ben was doing for a while, and we plan on doing this every Friday! 

Open Source is about the community. Whether you have a project or you're looking to make your first PR.  

## Tell us about your project
_Promote your project by providing a link to the repo. Everyone who posted in previous weeks is welcome back this week, as always 😄_

Open Source should be a welcoming space for contributors. The README is the front door of your project. If you'd like to check out an example of a README, here's our [OpenSauced/insights README](https://github.com/open-sauced/insights).

If you submit please have the following in your repo to make it welcoming and helpful for contributors:

1. README.md
2. CONTRIBUTING.md

Finally, consider reading the [Best Practices for Maintainers](https://opensource.guide/best-practices/).

Happy coding!
Welcome to Responsey
Tags: ai, gpt4, chatgpt
Published: 2023-05-05 16:22:48

**👋 Welcome to Responsey AI!**

Our company was founded upon the discovery of the global expectation of 24/7 availability. We understand that customers expect to be able to reach out to companies at any time, and this can often lead to burnout for customer support teams who struggle to keep up with the demand. Rather than eliminate the issue altogether, we aim to provide a solution that makes it easier for companies to be available to their customers at all times.

Our cutting-edge technology is powered by OpenAI's GPT-4 architecture. This allows us to provide a human-like response and hold natural conversations with customers across all platforms, whether it be email, social media, or other communication channels. Our AI solution integrates with all social media and email applications, enabling companies to provide instant, automatic responses to customer inquiries, freeing up valuable time for their customer support teams.

At Responsey AI, we strive to make the customer experience as seamless as possible. With our AI solution, companies can rest assured that their customers are being attended to 24/7, regardless of time zones or geographical locations. This, in turn, leads to increased customer satisfaction and loyalty.

We are committed to staying at the forefront of innovation and technology, continually improving our AI solution to meet the evolving needs of our clients. Join us at Responsey AI, and let's make 24/7 availability a reality for your company.

_AI Solution not yet available to the public._

🔗 https://responsey.co
How to Create and update your Github Personal Token Issue
Tags: tutorial, github, git
Published: 2023-05-05 16:22:04

## 1. Creating a personal acccess Token token
> Disclaimer: a personal access token should be treated as a password to GitHub.

GitHub supports two types of personal access tokens;

- Fine-frained personal access tokens.

- Personal access tokens (classic).

> Github recommends that you use fine-grained personal access tokens instead of personal access tokens(classic) whenever possible.

You can follow the instructions in the link provided in references on how to generate an access token.

## 2. Updating an expired token

If you have a token that you have been using and it expires you can run the command `git remote -v`. This command shows you your current origin which will look like;
`https://[PERSONALACCESSTOKEN]@github.com/[USERNAME]/[REPO].git`.
There are two steps to update a expired token;

- First, you have to remove the expired token by running the command `git remote remove origin`.

- After removing the expired token you can run the command `git remote -v` to confirm that your token has been removed.

- You now need to generate a new token following the steps highlighted in the creating a new token. 

- After creating a new token you need a to add a remote with your updated Github personal access token.

- You can add it using the command git remote add origin + your new generated token as follows; `git remote add origin https://[PERSONALACCESSTOKEN]@github.com/[USERNAME]/[REPO].git` and you are done.

### References
[Creating a personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
Mojo: The New Programming Language Bridging the Gap Between Research and Production
Tags: opensource, programming, stackfoss, mojo
Published: 2023-06-21 21:26:05

---
title: Mojo: The New Programming Language Bridging the Gap Between Research and Production
published: true
date: 2023-05-05 16:21:03 UTC
tags: opensource, programming, stackfoss, Mojo
canonical_url: 
---

Mojo is an exciting new programming language that is designed to bridge the gap between research and production. It combines the ease of Python syntax and ecosystem with systems programming and metaprogramming features to create a language that is both powerful and easy to use.

While Mojo is still a young language, it is already gaining attention from developers who are looking for a new tool to help them solve complex problems. The language is designed to be a superset of Python over time, which means that it will include all of the features of Python and more.

One of the key benefits of Mojo is its ability to combine the best of both worlds. It offers the ease of use and readability of Python, while also providing the performance and power of systems programming. This makes it an ideal language for developers who need to work with large data sets, build complex algorithms, or create highly optimized software.

The developers behind Mojo are committed to making the language accessible to as many developers as possible. They plan to open-source the language progressively over time, but for now, it is incubated within Modular. This approach allows the developers to move quickly and make changes to the language as needed.

If you're interested in trying out Mojo, you can sign up for the Mojo Playground. This is a hosted JupyterHub where you can try coding with an early version of the language. The developers encourage users to report issues and provide feedback, so that they can continue to improve the language and make it even more powerful.

Mojo has a growing community of developers who are excited about the possibilities of the language. If you're interested in joining the community or learning more about the language, you can check out the Mojo FAQ or join the Discord channel. There, you can chat with other developers and get answers to your questions.

Mojo is an exciting new programming language that offers the best of both worlds: the ease of use and readability of Python, combined with the performance and power of systems programming. If you're a developer looking for a new tool to help you solve complex problems, Mojo might be just what you need. With a growing community and a commitment to open-source development, the future looks bright for Mojo and its users.
Rest API skeleton
Tags: php
Published: 2023-05-05 15:53:38

Hi guys 
I have been away from PHP for a while but I used to code for about 15 years before. Now I got a request to build a backend API in PHP and for that reason I am looking for a small, clean framework or skeleton where I can put my code and methods in a well structured manner with todays standards. The frontend will be built in Angular by someone else so I do not need any view-functionality.

The API should be able to handle requests and return JSON, routing, authentication and ideally also auto generate documentation. 

I don't have the need nor do I want to spend the time of learning a framework like Laravel. I am also old school and like to have as few dependencies as possible and to have full control over all the code. The smaller and cleaner the better. 

Do you have any tips or ideas of solutions that you think would fit me?
14 Must-Know Architectural Patterns in Software Development
Tags: webdev, programming, designpatterns, architecture
Published: 2023-05-05 15:12:44


𝗪𝗵𝗮𝘁 𝗮𝗿𝗲 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗮𝗹 𝗣𝗮𝘁𝘁𝗲𝗿𝗻𝘀?
While designing software systems, you will likely come across the same design challenges over and over again. Architectural patterns make it easier to solve these issues by providing repeatable designs that address common situations.

An architectural pattern is a general, reusable solution to a commonly occurring problem in software architecture. Architectural patterns are similar to software design patterns but have a broader scope.

Here are the most common architectural patterns:

𝟭. 𝗦𝘁𝗮𝘁𝗶𝗰 𝗖𝗼𝗻𝘁𝗲𝗻𝘁 𝗛𝗼𝘀𝘁𝗶𝗻𝗴: Used to optimize webpage loading time by storing static content separately from dynamic content

𝟮. 𝗣𝗲𝗲𝗿-𝘁𝗼-𝗣𝗲𝗲𝗿: Involves multiple components called Peers, where a pear may function both as a client, requesting services from other peers, and as a server, providing services to other peers.

𝟯. 𝗣𝘂𝗯𝗹𝗶𝘀𝗵𝗲𝗿-𝗦𝘂𝗯𝘀𝗰𝗿𝗶𝗯𝗲𝗿: Used to send (publishes) relevant messages to places that have subscribed to a topic.

𝟰. 𝗦𝗵𝗮𝗿𝗱𝗶𝗻𝗴 𝗣𝗮𝘁𝘁𝗲𝗿𝗻 – Used to partition data in a database to speed commands or queries.

𝟱. 𝗖𝗶𝗿𝗰𝘂𝗶𝘁 𝗕𝗿𝗲𝗮𝗸𝗲𝗿: Helps make systems more fault tolerant by minimizing the effects of a hazard by rerouting traffic to another service.

𝟲. 𝗟𝗮𝘆𝗲𝗿𝗲𝗱 𝗣𝗮𝘁𝘁𝗲𝗿𝗻: Generally used to develop applications that include groups of subtasks that execute in a specific order.

𝟳. 𝗖𝗹𝗶𝗲𝗻𝘁-𝗦𝗲𝗿𝘃𝗲𝗿: A peer-to-peer architecture that is comprised of a client, which requests a service, and a server, which provides the service.

𝟴. 𝗠𝗮𝘀𝘁𝗲𝗿-𝗦𝗹𝗮𝘃𝗲: Consists of two components; the master distributes the work among identical slaves and computes a final result from the results which the slaves return.

𝟵. 𝗣𝗶𝗽𝗲-𝗙𝗶𝗹𝘁𝗲𝗿: Used to structure systems that produce and process a stream of data.

𝟭𝟬. 𝗘𝘃𝗲𝗻𝘁-𝗗𝗿𝗶𝘃𝗲𝗻: Uses events to trigger and communicate between decoupled services.

𝟭𝟭. 𝗠𝗼𝗱𝗲𝗹-𝗩𝗶𝗲𝘄-𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿: Divides an application into three components. The model contains the application's data and main functionality; the view displays data and interacts with the user; and the controller handles user input and acts as the mediator between the model and the view.

𝟭𝟮. 𝗜𝗻𝘁𝗲𝗿𝗽𝗿𝗲𝘁𝗲𝗿: Used to interpret a higher level language to a lower level language to execute a series of commands directly.

𝟭𝟯. 𝗠𝗶𝗰𝗿𝗼𝘀𝗲𝗿𝘃𝗶𝗰𝗲𝘀: Used to create multiple services that work interdependently to create a larger application.

𝟭𝟰. 𝗖𝗼𝗺𝗺𝗮𝗻𝗱 𝗤𝘂𝗲𝗿𝘆 𝗥𝗲𝘀𝗽𝗼𝗻𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 𝗦𝗲𝗴𝗿𝗲𝗴𝗮𝘁𝗶𝗼𝗻: Used to separate read and write activities to provide greater stability, scalability, and performance.
CodeNewbie is on Bluesky!
Tags: codenewbie, beginners, socialmedia, bluesky
Published: 2023-05-05 14:56:56

Hey Newbies! We've just set up an account over on [Bluesky](https://blueskyweb.xyz), a new social networking site built on a new [social networking protocol](https://dev.to/t/atprotocol).

If you've managed to secure an invite code, you can follow us there [@codenewbie.org](https://staging.bsky.app/profile/codenewbie.org)!

Unfortunately we don't have any invite codes to share yet 🥲 when we do, though, we want to help get our community members access to the site. So stay tuned! 💜

---

Have you heard of Bluesky? Are you curious to check it out, or are you loyal to another social network or protocol? Let us know in the comments!