teleren/devto huggingface dataset:
Step-by-Step Tutorial on How to Use Next Auth in Next.js 13 using Route Handlers.
Tags: javascript, react, nextjs, auth
Published: 2023-04-30 16:25:58

1. Introduction 
2. Why use Next Auth? 
3. What are Route Handlers? 
4. How to set up Next Auth 
5. How to use Route Handlers with Next Auth 
6. Conclusion

## 1-Introduction
Next.js is a JavaScript framework that enables developers to create front-end web applications that are run on a server. It is a React-based framework that is easy to use and provides a number of features, such as server-side rendering, code splitting, and static exporting. 
Next.js also has an Authentication package called Next Auth that makes it easy to add authentication to a Next.js app. In this tutorial, we will show you how to use Next Auth and Next.js 13 to create a server-side rendered React app with basic authentication.

## 2-Why use Next Auth?
Next Auth is a secure authentication system for Next.js applications. It is based on JSON Web Tokens (JWT) and provides authentication and authorization for Next.js applications.

## 3-What are Route Handlers?
In Next.js 13, Route Handlers are a new feature that allows developers to create custom request handlers for a given route using the Web Request and Response APIs. Route Handlers are a replacement for the previous API Routes in Next.js.

## 4-How to set up Next Auth
To set up NextAuth in a Next.js application, you need to follow a few steps. First, you need to create a file called 
**route.js** in the **app/api/auth/[...nextauth]** directory. This file contains the dynamic route handler for NextAuth.

Next, you need to configure your authentication providers. NextAuth supports a wide range of providers, including Google, Facebook, Twitter, and more. You can configure your providers by setting the appropriate environment variables or by passing them as options to the providers array in your NextAuth configuration.
Here's an example of how to configure Google as an authentication provider in NextAuth:

```
// app/api/auth/[...nextauth]/route.js

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export const options={
    GoogleProvider({
         clientId: process.env.GOOGLE_CLIENT_ID,
         clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      })
}

const handler=NextAuth(options)

export {handler as GET , handler as POST}
```

## 5-How to use Route Handlers with Next Auth
```
import {options} from "app/api/auth/[...nextauth]/route.js"
import {getServerSession} from "next-auth/next"

async function page(){
  const session = await getServerSession(options)
  console.log(session.user)
}
```
## 6-Conclusion
I have 6 minute video about this I hope it help if you liked the video don't forget to subscribe and hit the like button.

{% embed https://www.youtube.com/embed/FUDL95L5aW0 %}

## Links

**[YOUTUBE](https://www.youtube.com/@YTCodewithAli)**

**[GITHUB](https://github.com/alishirani1384)**

**[LinkedIn](https://linkedin.com/in/ali-shirani-145bb61a1)**
life[0]
Tags: productivity, discuss, devjournal
Published: 2023-04-30 16:23:37

## Introduction

This is a series where I write about my life, I don't have many people who listen to my problems, actually I never share my problems with anyone. So I decided to write about it, hoping it'll make me feel better, at least 😅

## About me

My name is [Fadhil](https://fadhilsaheer.tech), I'm a 16 y/o student, developer from Kerala, India. Who loves to develop applications, watch movies, waste time etc :)

## My Life

I love to watch movies, especially animated ones, so I don't have to specifically mention that I watch anime (I mean everybody does). I started to watch anime because I was too lazy to find a playlist while I work (mostly developing apps). I knows its a weird reason to start watching anime, but It got me hooked, I wasn't worried at first, but now my routine has shrunk to sleep & watching anime. I want to learn new things, try amazing tech, build new things etc, but no matter I end up watching anime.

Back when I started coding, I spend whole night building & learning things. I even wake up at 3 AM so that I could code more before I go to school, but now I just don't feel like to do it.

I know its not a problem with anime, If it wasn't anime I would end up watching movies/series.

But I need a way to overcome it. I need to focus more on my studies at school & work on my passion projects.

I hope you guys have valuable advice.

cheers Fadhil ✌️

Website : https://fadhilsaheer.tech
LinkedIn : https://linkedin.com/in/fadhilsaheer
Email : fadhilsaheer@gmail.com
Apache Age Grammer
Published: 2023-04-30 16:13:44

PostgreSQL is a powerful open-source relational database management system that provides a wide range of advanced features, including complex queries, indexing, and transaction control. One of the key components of PostgreSQL is its grammar, which plays a crucial role in the execution of SQL statements.

##At its core, 
the PostgreSQL grammar is a set of rules that define the syntax and structure of SQL statements that the database engine can parse and execute. The grammar specifies the acceptable syntax for each SQL statement, including the keywords, clauses, and parameters that are allowed, as well as the order and grouping of these elements.

##When a SQL statement is submitted to PostgreSQL,
the first step is to parse the statement using the grammar. The parser analyzes the statement and checks it against the rules defined in the grammar to ensure that it is valid. If the statement is not valid, PostgreSQL will return an error, and the query will fail.

Once the SQL statement has been successfully parsed, the PostgreSQL engine generates an execution plan that outlines the steps required to execute the statement. The execution plan takes into account various factors, such as the structure of the data, available indexes, and any constraints or triggers that may be in place.

##One of the key benefits of PostgreSQL's grammar
 is that it provides a high degree of flexibility in constructing SQL statements. The grammar allows for the creation of complex queries that can join multiple tables, use subqueries, and incorporate advanced features such as window functions and common table expressions. In addition, PostgreSQL supports a wide range of data types, including arrays, JSON, and XML, allowing developers to build powerful and flexible applications.

However, this flexibility can also be a challenge, as it can make it more difficult to optimize complex queries for performance. PostgreSQL provides a range of tools to help developers optimize their queries, including the EXPLAIN command, which generates an execution plan that can be analyzed to identify performance bottlenecks.

##Other internal components
In addition to the grammar, PostgreSQL also includes a range of other internal components that contribute to its functionality, including the query optimizer, the transaction manager, and the storage engine. Each of these components plays a critical role in the execution of SQL statements and the overall performance of the database.

##In conclusion,
 the PostgreSQL grammar is a critical component of the database engine, providing a flexible and powerful framework for constructing and executing SQL statements. While the grammar provides a high degree of flexibility, it also presents challenges in terms of query optimization and performance. Understanding the internals of PostgreSQL's grammar and other components can help developers build more efficient and effective applications that leverage the power of this powerful open-source database management system.
Free Web Hosting?! Guide to Github Pages Part 1
Tags: frontend, webdev, web, internet
Published: 2023-04-30 16:07:20

## Intro

Web hosting. Every beginner in web development always doesn't know which web host to choose and if you have a custom coded website then DON'T get paid web hosting. Only do that when your website is bigger than 500mb. If otherwise read on to discover the secret of Github pages.

## DISCLAIMER: THIS WILL ONLY WORK IF YOU HAVE THE WEBSITES FILES ON YOUR COMPUTER

## Step 1: Getting a Github account

Getting an account at Github is fairly easy, it's like at any other website or program you put in your email your desired username password and all that stuff. If you already have one, great, you can skip this step

## Step 2: Creating your Repository 

So now that you've got your account, you need to go to the plus drop down at the top right corner of the screen and select: New Repository. You'll probably ask "Wait, what is a repository?". So, a repository is basically a folder where all kinds of files can be stored and shared with the public. 
When you've clicked "New Repository" then you'll be given some settings. Just leave everything as it is, and select Create Repository.

## Step 3: Adding Your Files

Now for the fun part, adding your website's files to your repository. At the top of the code tab there will be a link saying: Upload an Existing File. Click there and select your files. If your websites code is in a folder and you think that you can just drag the folder into the upload space, you're wrong. Since the repository is already a folder, you don't need an extra one. So in your File Management program go inside the folder and then drag all the files from it into your repository.

## Step 4: Putting your Website on the internet

Since we have our website now, let's get it onto the internet. Go to the settings tab and select Pages in the side bar.
Then on the drop down where it says "None" Select the other option, it can be main or master, but that doesn't matter.
Leave the second drop down as the default and click save, Github will now take your code, and publish it on the internet, this might take a few minutes so just let Github do its thing. After a few minutes you should see something that says that your site was published. Click on the link, but if you notice that nothing happens thats okay. We'll cover this in the next step. 

## Step 5: Adding index.html

As I said if the internet refuses to open your site, that's okay. It just means that you didn't add an `index.html` file.
It's really easy go to your home page and then select "edit" and rename your file to `index.html`. This should eliminate the issue.

## Outro

Now you could say you're done, since you have your site on the internet up and running, but there's one tiny, small problem. Your website has a very unmemorable domain. Who will want to type that in. To Fix this we will have to get a domain from a domain registrar and combine it with our Github repository.
Part 2 coming soon!
Open Source contribution to Apache-age - A guide
Published: 2023-04-30 16:05:51

There are many ways to contribute to the Apache Age open-source project, regardless of your level of experience with graph databases or programming.

##Report bugs: If you come across a bug or an issue while using Apache Age, you can report it to the developers by creating an issue on the Apache Age GitHub repository.

##Write code: If you have experience with programming and graph databases, you can contribute to the Apache Age codebase by writing code that addresses specific issues or adds new features.

##Improve documentation: Apache Age has extensive documentation, and you can contribute to it by proofreading, updating, or writing new documentation to help other users.

##Participate in discussions: Apache Age has an active community of developers and users who discuss various topics related to the project. You can participate in mailing lists, forums, or social media groups to provide feedback or ask questions.

##Test new releases: As a user of Apache Age, you can help the developers by testing new releases and reporting any issues or bugs you encounter.

##Translate documentation: Apache Age documentation is available in many languages, and you can contribute to the project by translating the documentation into a language that you are fluent in.

##Donate: If you are not a developer or do not have time to contribute, you can still support the Apache Age project by donating to the Apache Software Foundation or other organizations that support open-source software development.

In summary, there are many ways to contribute to the Apache Age open-source project, from reporting bugs to writing code, improving documentation, participating in discussions, testing new releases, translating documentation, and donating.
UIToolkit Generate Custom Shapes With Vector API
Published: 2023-04-30 12:51:39

The new vector API for UIToolkit is based on the Mesh API as part of the UI library, basically it's a wrapper on top of the mesh api used in UIToolkit to generate custom meshes.

Vector api is a decent api in UIToolkit to generate custom meshes without having the same verbosity as mesh api. If you're familiar with SkiaSharp, vector api is very similar to that, syntax wise.

So I've decided to explore the api a little bit and try to make a custom mesh generator with it, sounds like a cool pet project that can be done pretty quick on my weekend.

1st we would need to make our own custom class derived from VisualElement for our MeshGenerationContext to contain all Painter2D properties.

```
    ///<summary>Class to contain vector api.</summary>
    public class UTKMesh : VisualElement
    {
        ///<summary>Vector coordinates used to paint via Paint2D.</summary>
        public List<Vector2> paths { get; set; }
        public MeshGenerationContext utkContext{get;set;}

        public UTKMesh(List<Vector3> paths)
        {
            this.paths = paths;
            generateVisualContent += OnGenerateVisualContent;
        }

        void OnGenerateVisualContent(MeshGenerationContext mgc)
        {
            utkContext = mgc;
            this.DrawLinePath();
        }

}
```
The `DrawLinePath()` method is a static helper that will create the path based on the local position of a container which is the parent that will contain the generated context.

So here's, a little example how we can connect between multiple position based on the vector api doc.

```
var paint2d = new Paint2D();
paint2d.BeginPath();
paint2d.LineTo(new Vector2(100, 100));
paint2d.LineTo(new Vector2(200, 200));
paint2d.LineTo(new Vector2(150, 150));
paint2d.ClosePath();
```
The LineTo method is what we're using to create paths based on Vector2 position to another point in our parent container space. Pretty neat!

Now let's not do that manually, but instead we want to make a chain of connecting lines in a loop, this way we can create as many lines we want to draw, also we already defined our path List<Vector2> in our custom class so now all we have to do is to create a loop to connect them. Also assuming that we already added all local position to that List.

```
            for (int i = 0; i < paths.Count; i++)
            {
                paint2d.LineTo(paths[i]);
            }

            paint2d.ClosePath();            
```
And if we want to fill it with a color, then we can add another Fill and that's all.

Well, that's obviously wasn't all about, we can do curves, or bezierCurves and even Quadratic curves which will be too long to write all of them here. 

So just grab the code here and look it for your self :)

(Custom Shape Generator For UIToolkit)[https://github.com/breadnone/UTKShapeGen-Custom-Shapes-Editor-For-UIToolkit]

~Cheers
What is OpenTelemetry Tracing: Observability for troubleshooting microservices
Published: 2023-04-30 15:54:07

OpenTelemetry is buzzing lately and everybody is speaking about distributed tracing as a mean to solve microservices debugging hell and minimize MTTR. 

Developers want to spend less time on debugging and have a better expeirence. Dev leaders need to ensure velocity and quality, lower the cost of the engineeering unit and find creative ways to deliver at scale (especially in today's atmosphere, when saving costs are a main KPI in the tech ecosystem. 

Debugging in microservices is a big pain. huge. 

Dependencies, complexities, endless components- these aspects make route cause analysis extreamly complex and traditional monitoring methods, that are built on statistical analysis, such as logging, can't offer a reasnable solution. 

Microservices observabiity, which differs from monitoring as it is built on data instrumentation and recording events, is needed. 

OPenTelemetry (OSS project) distributed tracing capabilities compensate for traditional observability methods, that master monolith apps but are hardly sufficient in observing and debugging distributed environments. 

OTel allows developers to instrument their microservices apps with the standard instrumentation library that generates telemetry data from various sources, such as logs, metrics, and traces. 

OpenTelemetry agents can then collect and export this telemetry data to multiple systems for logging, tracing, and monitoring. A main advantage of OpenTelemetry is that it aims to be vendor-agnostic, meaning that the data collected can be sent to any backend and moving between them doesn't require any client-side changes. Instrumentation allows deep dive into contextual error data that is needed for fast root cause analysis. 

In order to make OpenTelemetry actionable, there's a need to export the data to a 3rd party tool that can help generating insights, such as Jaeger or alike. 

Some of these tools are better than others, easier to maintain, offer advanced trace based visualization and highlight granular payload data that is critical to understand and solve issues such as bottlenecks, latency, and more. 

Overview this article about OTel specifics as well as best practices and tools to minimize overhead and maximize the value >> 

[](https://gethelios.dev/blog/opentelemetry-tracing/)
Day 30: Flask: Python Web App Micro-Framework - Part 1
Tags: beginners, tutorial, programming
Published: 2023-04-30 15:32:40

[Flask](https://flask.palletsprojects.com/en/2.3.x/) is a lightweight, versatile Python micro-framework for web applications that offers essential components such as URL routing and page rendering, making it a fantastic choice for developers looking to build efficient web applications with ease.

To begin learning Flask, I chose Visual Studio Code as my IDE and installed the Python extension from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-python.python). It's important to note that I was using Python version 3.8.10 for this tutorial.

After installation, I created a new project folder called "flask-service-1" and opened it in VSCode. From the menu, I navigated to View - Command Palette (Ctrl+Shift+P) and selected "Python: Create Environment" to create a virtual environment separate from the global Python environment. I chose "venv" from the available options (the other choice being "Conda") and selected Python 3.8.10 64-bit as my desired version.

A new folder called ".venv" was created under the root folder of my project. Next, I ran "Terminal: Create New Terminal" (ctrl+shift+`) from the command palette, which opened a new terminal with the virtual environment automatically activated. To confirm the activation, the command prompt displayed (.venv) in front of it. To activate the virtual environment in an open terminal without activation, simply run ".venv/bin/activate" (and to deactivate, run ".venv/bin/deactivate").

With the virtual environment activated, I installed Flask by typing the following command in the terminal: python -m pip install flask. This process installed Flask along with several other essential packages.

Next, I created a new file called "app.py" in the project root folder and pasted the following code:

```
from flask import Flask

app = Flask(\__name__)

@app.route("/")
def home():
    return "Hello, World!"
```

In the terminal window, I executed the following command: python -m flask run. This produced the output:

```
* Environment: production
  WARNING: This is a development server. Do not use it in a production deployment.
  Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
```

Finally, I entered the URL http://127.0.0.1:5000 in my browser, which displayed the message: "Hello, World!"

This brief tutorial demonstrates the simplicity and efficiency of Flask, a Python micro-framework that makes web application development accessible and enjoyable for developers. With a streamlined setup process and the support of a virtual environment, Flask allows you to focus on creating quality web applications without getting bogged down in the complexities of larger frameworks. Give Flask a try and experience the power and flexibility it offers in the realm of web application development.
Sharing Your Programming Experiences: Why it's Beneficial and How to Get Started
Published: 2023-04-30 15:25:16

If you're someone who spends a lot of time coding, you know that encountering bugs and errors is inevitable. While it can be frustrating to encounter these issues, it can also be a valuable learning experience. One way to learn more about programming is by documenting the problems you encounter and how you solved them. 

Writing about the programs you use can also be helpful for others who may be struggling with similar issues. By sharing your experiences and solutions, you can save others time and frustration. Additionally, writing about your programming experiences can help you solidify your own understanding of the languages and tools you use. 

In this blog post, I want to encourage you to start documenting your programming experiences. Whether you're a beginner or an experienced programmer, writing about the programs you use can be beneficial for both yourself and others. 

I personally use a variety of programming languages, including JavaScript, TypeScript, Python, and NodeJS. These languages all have their unique strengths and weaknesses, and I've encountered various issues while working with them. By writing about these issues and how I solved them, I hope to help others who may encounter similar problems. 

However, I don't want this to be just my blog. I encourage you to contribute to it as well. If you've encountered a problem while working with any of these languages or other programming tools, feel free to share it in the comments section. If you've found a solution to a problem that others may find helpful, please share that too. Together, we can build a valuable resource for anyone working with these programming languages and tools. 

In conclusion, documenting your programming experiences can be beneficial for both yourself and others. By sharing your experiences and solutions, you can help others who may be struggling with similar issues. I encourage you to start writing about the programs you use, and I look forward to reading your contributions.

#coding #Typescript #javascript #writing