teleren/devto huggingface dataset:
[next-auth][error][CLIENT_FETCH_ERROR]
Tags: nextjs, react, beginners, help
Published: 2023-05-05 14:46:06

Hi Coder 👨🏽‍💻

I'm learning full-stack from this course: [Build a Full-Stack App...](https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-322389284337222224)

I'm having trouble get a session using the **getSession()** function.

_[next-auth][error][CLIENT_FETCH_ERROR]_
!["[next-auth][error][CLIENT_FETCH_ERROR]"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/envs96k7hzf044ocxzwt.png)


_environment file_
![environment file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77smq8w85997nfsmbqbn.png)




_This my code..._
![My Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mzqpe9sbxkywh3u1elh.png)




i tried to create separate project and use **new environment** and experienced the same thing.

_session return null value_
![session return null value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50j43uoxkdfvb1qxuguj.png)




i think my code is nothing wrong i have followed step by step and as per documentation.

**Please help** 🙏🏽


**SOLVED!**
I just config password application in my google account(sign up with app) - [Read this](https://support.google.com/accounts/answer/185833?hl=en)
Aspiring data engineer
Tags: career, entrylevel, datascience, beginners
Published: 2023-05-05 14:35:33

Hi everyone, I need to kickstart my career and looking for an entry level data engineering job. I have knowledge in etl development, data ingestion, migration, ssis, cloud data development etc. 
Any suggestions on what should I do to have a good career or any new opportunities are much appreciated. 
I am full of life and eager to learn.
Como eu uso o Google Cloud para hospedar meu portfolio de graça
Tags: googlecloud, portfolio, cloud, braziliandevs
Published: 2023-05-05 14:30:00

Há mais de um ano venho usando o Google Cloud para hospedar este meu site de graça. Desde então, além da melhoria de desempenho, pude aprender mais sobre o uso dos serviços em nuvem.

Isso me deu liberdade para adicionar funcionalidades que meu antigo provedor pago de hospedagem de sites não fornecia: otimização de imagens, atualizações para versões mais recentes do PHP e algoritmos de compactação, por exemplo.

Além disso, claro, me poupou bastante dinheiro com serviço de hospedagem. Hoje só gasto com a renovação anual do domínio do site.

Desde então expandi o uso para outros serviços gratuitos com o conhecimento adquirido no curso de fundamentos do Google Cloud.

## Como tudo funciona

Primeiramente, as requisições ao domínio do site levam a um IP externo Premium, em que o tráfego é roteado o máximo possível dentro da rede do Google. Após passar por regras de firewall, a requisição chega a uma máquina virtual do Compute Engine, com armazenamento e processamento dentro da [categoria gratuita](https://cloud.google.com/free) do Google Cloud.

A VM tem instalado um servidor Nginx, com suporte a PHP, e um servidor de banco de dados relacional MariaDB. Com isso é possível rodar o WordPress, bem como outros projetos que necessitem ou não de banco de dados.

Em alguns casos, projetos podem ser aplicações rodando em containers e que utilizam linguagens compiladas como Java. Neste caso, elas utilizam os limites gratuitos do Cloud Run, um serviço sem servidor para executar containers na nuvem.

Passei a usar esse serviço após o Heroku extinguir o plano gratuito, e fiz o deploy dos projetos no Google Cloud utilizando o Cloud Run.

## Backups, monitoramento e atualizações

> Com grandes poderes vêm grandes responsabilidades
> **Tio Ben**

A possibilidade de ter um servidor configurado à sua maneira em serviços de nuvem traz, no entanto, a “desvantagem” de ter que assumir as tarefas de manutenção e disponibilidade do seu site e/ou da sua aplicação.

Na verdade, não se trata de uma desvantagem. Além de aprender e aplicar novos conhecimentos, o Google Cloud facilita bastante o trabalho, e de graça.

Os logs de acessos e possíveis mensagens de erros do servidor, além de serem temporariamente hospedados na máquina virtual, são enviados ao serviço Cloud Logging. Ali podem ser buscados e filtrados para monitoramento de possíveis anormalidades.

Além disso, há rotinas de backups com snapshots e atualização do servidor via gerenciamento de correções de SO. Todos eles programados para acontecer periodicamente de maneira automática.
Custom Snippet do Styled Components no VSCode
Tags: webdev, javascript, programming, tutorial
Published: 2023-05-05 14:25:07

Se você não sabe o que é Snippet, explico... 

São pequenos atalhos que usamos pra agilizar a escrita do código, veja abaixo 👇

![snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc6a7moo1y1ydjpgayi6.gif)

Mas o interessante é que você pode criar seus próprios Snippets, óbvio que é indicado pra códigos que você usa com frequência, é esse o caso que eu quero mostrar aqui.

Eu criei esse Snippet pra agilizar a escrita do `Theme` do Styled Components.

![snippet theme styled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fscvuu1i1hcfadz01mlw.gif)

Então vamos ao...

## Passo a Passo

> *Vou mostrar aqui como criar seu Snippet pra esse caso do Theme no Styled Components, mas você pode fazer o que quiser depois.*

 

### 1 Criando Seu Snippet Global

- No VSCode digite `CTRL + SHIFT + P`
- Depois digite `snnipet`
- Selecione a opção » Snippets: Configure User

![snippet config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjyizt4xxjl878dd4tmw.png)

Agora você pode escolher criar um Snippet global ou apenas para o projeto que está trabalhando, nesse caso recomendo que seja global.

![custon snnipet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnou3aekz7np95uplmzb.png)

Ele vai abrir um arquivo no seu VSCode e basta adicionar esse código no local que indiquei na imagem

```css
"Styled Components Theme Props": {
    "prefix": ":theme",
    "body": ["${props => props.theme.$1}"],
    "description": "Theme Props"
  }
```

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

Esse prefix `"prefix": ":theme",` é o atalho que você vai digitar, pode mudar pra forma que desejar e que for mais conveniente pra você.

Viu só, dica rapidinha e útil no dia a dia.

Aproveitando, confere meu GitHub [aqui](https://github.com/andpeicunha/) ✌
Python Inheritance
Tags: python, beginners, tutorial, inheritance
Published: 2023-05-05 14:04:34

Create a parent class and initialize the variable.

```
class Teacher:

1. # Constructor this class variable
    def __init__(_self, name, sub):
        _self.name= name
        _self.sub = sub

2. # Get teacher Name
    def get_name(_self):
        return 'The Teacher Name : ' + _self.name
    
3. # Get teacher subject
    def get_sub(_self):
        return 'Subject : ' + _self.sub

```
**Output :**

```
teacher = Teacher('Nur Alam', "Python / Graphic II")
print(teacher.get_name()) _# Output -> Nur Alam_
print(teacher.get_sub()) _# Output -> Python / Graphic II_
```

Create a student class to inherit from the teacher class.

```
class Student(Teacher):

4. # Inherit to Change the subject and teacher on this student
    def change_teacher(_self, name, sub):
        _self.name = name
        _self.sub = sub
      
```
**Output :**

```
student1 = Student("Tanvir", "IT Support")
print(student1.get_name()) _# Output -> Tanvir_
print(student1.get_sub()) _# Output -> IT Support_
```

There, we are called the student class and access the teacher class methods.
Exploring the New Features and Improved Performance of Apache Age 1.3.0
Published: 2023-05-05 13:35:46

**Introduction:**


Apache Age is a powerful open-source graph database built on top of PostgreSQL. It's specifically designed for handling complex graph data with efficiency and scalability. The latest release, version 1.3.0, brings exciting new features and performance improvements that make it an even more robust tool for working with graphs.

**Improved Performance:**
Apache Age 1.3.0 has improved performance compared to its previous versions. This is due to several enhancements, such as the implementation of parallel query execution and the optimization of query plans. As a result, users can expect faster query response times and more efficient use of system resources.


**Improved Memory Management**
Apache Age 1.3.0 includes several improvements to memory management, which can help reduce memory usage and improve query performance. For example, the new release includes support for memory allocation tracking, which can help identify and optimize memory usage in your queries.

**Native Support for Property Graphs:**
Apache Age 1.3.0 provides native support for property graphs, making it easier to model and store complex graph data. Property graphs allow nodes and edges to have arbitrary properties, enabling the representation of rich metadata that can be queried and manipulated efficiently.


**New Query Language Features:**
Apache Age 1.3.0 includes several new features for its query language, including support for pattern matching, filtering, and aggregation. These enhancements make it easier to query complex graph data and extract meaningful insights.

Conclusion:

Apache Age 1.3.0 provides several new features and performance enhancements that make it a powerful tool for managing complex graph data. With native support for property graphs, new query language features, improved performance, and support for multiple programming languages, Apache Age is an ideal platform for building graph-based applications and workflows. By exploring the new features and improvements in Apache Age 1.3.0, users can take advantage of its enhanced capabilities and gain deeper insights into their graph data
Being a Developer Advocate: Week 32
Tags: devrel, learninpublic
Published: 2023-05-05 13:35:07

Some weeks you have less energy and drive and that is ok. This was one of those weeks so I decided to take it a little bit slower and enjoyed my little episode of more distractedness (is this a word 😂)

What I like to do is creative work and reading in such an episode and I managed to do the whole postproduction for the last couple of videos for my short-tutorial series.

We are also doing a major release of a cool product next month and reworking a lot of stuff. I noticed some gaps in our docs and closed them and we are also working on expanding our API docs with more gifs and better examples. A lot of things are not well documented and thus hard to use.

For the product I want to release some tutorial videos and taking a different approach this time. Normally I come up with things to say on the fly while I am recording. But this time is different as I created a detailed script of what I wanted to show.

This led to some interesting findings about how I wanted to show some things and how they actually behaved. Turning the whole process into a Developer Experience Audit is on the way 😅
Learn to use useState and useEffect hooks in React to create dynamic user interfaces
Tags: webdev, javascript, beginners, programming
Published: 2023-05-05 13:33:39

React is a widely used JavaScript library for building user interfaces, with **useState** and **useEffect** being two of its most important features

## What is useState?
Imagine you have a toy box with many toys in it. Sometimes you want to play with a specific toy, so you take it out of the box and play with it. When you're done playing with it, you put it back in the box. This is how useState works in React!
**useState **is a way to store and update values (like toys in a toy box) within a component. You can use it to keep track of things like whether a button has been clicked or the value of a form input.
Here's an example:

```js
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}
```
This example uses useState in React to keep track of the number of times a button has been clicked. We start the count at 0 by passing it as an argument to useState, and we update the count using the setCount function whenever the button is clicked.

## What is useEffect?
In React, useEffect is like watering a plant every day to keep it healthy.
**useEffect** is a hook that enables us to execute side effects in a component. Side effects include tasks that interact with external systems, such as fetching data from an API, updating the document title, or setting up event listeners. With "useEffect", you can guarantee that your side effects are executed at the appropriate times during the component's lifecycle, such as after it has mounted or updated. This makes it a valuable tool for managing state and behavior in React applications.
Here's an example:
```js
import { useState, useEffect } from 'react';

function Greeting({ name }) {
  const [message, setMessage] = useState('Loading...');

  useEffect(() => {
    fetch(`https://api.example.com/greeting?name=${name}`)
      .then(response => response.json())
      .then(data => setMessage(data.message));
  }, [name]);

  return <p>{message}</p>;
}

```
We're using useEffect to fetch a greeting from an API and update the message state whenever the `name` prop changes. We pass an array containing the `name` prop to useEffect, which tells React to re-run the effect whenever the prop changes.

## Conclusion
**useState** and **useEffect** are important features in React. **useState stores and updates component values**, while **useEffect runs side effects**. Together, they create dynamic and interactive user interfaces that respond to user input and update automatically.

I hope this helped you understand useState and useEffect in React!

----

My name is **Tochukwu Nwosa**, a junior **frontend developer** with React
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
Published: 2023-05-05 13:26:39

```
<!DOCTYPE html>
<html>
<head>
<script>
var x=1;
function change()
{
if (x==1)
x=0;


else
x=1;
document.getElementById(test).innerHTML=x;
}
</script>
</head>
<body>
<div id=test></div>
<input type=button value=change onclick=change()>
</body>
</html>
```


I write the above code to print the value of "x" but this code gives error


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3p14v12869m6y16woj7.jpg)
Why is it giving this error?****
Rafting Anti Pusing
Tags: raftin
Published: 2023-05-05 13:16:55

[Wirafting.com](https://wirafting.com/) adalah penyedia jasa rafting profesional di Indonesia yang telah berpengalaman selama bertahun-tahun dalam menghadirkan pengalaman seru dan memompa adrenalin bagi para pelanggannya. Dengan staf yang berpengalaman dan berkualitas serta peralatan yang terbaik, Wirafting.com menjamin keselamatan dan kenyamanan para peserta rafting. 

Selain itu, Wirafting.com juga menawarkan berbagai pilihan rute rafting yang sesuai untuk semua tingkat kemampuan dan keberanian, mulai dari yang paling mudah hingga yang paling menantang. Dengan memberikan pengalaman rafting yang tak terlupakan, Wirafting.com adalah pilihan tepat bagi para penggemar petualangan alam terbuka.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2023-05-05 13:16:34

---
title: What was your win this week?
published: true
description: Looking back on this past week, what was something you were proud of accomplishing?
tags: discuss, weeklyretro
---

Heyo 👋

Y'all all have wonderful weekends!

Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Going fishing 🎣

---

![A clip of Homer Simpson happily singing while fishing.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt1nlb1k4r3otedale1c.gif)
Top 1000 JavaScript Interview Questions in 2023!
Tags: interview, javascript, frontend, jobpreparation
Published: 2023-05-05 13:06:02

Our PDF e-book contains a compilation of the best interview questions and answers in all sections related to JavaScript, including JavaScript syntax, design patterns, algorithms and data structures, testing, memory management, microservices, machine learning, concurrency, deprecated features, tools and resources, JavaScript tricks, ECMAScript, TypeScript, NPM, JavaScript jokes, and more!

In addition to these sections, we have also included a list of popular JavaScript frameworks such as Node.js, Express.js, Deno.js, React, Vue.js, Angular, Ember.js, Meteor, Svelte, Backbone.js, Knockout.js, Polymer, Mithril, Aurelia, Riot.js, and Alpine.js.

Each section is filled with the most commonly asked questions and their answers, along with detailed explanations to help you better understand the concepts. We have also included practical exercises to help you practice what you've learned and reinforce your understanding.

Whether you're a beginner or an experienced JavaScript developer, our e-book is a valuable resource that can help you prepare for your next job interview and take your skills to the next level. Get your copy now and start mastering JavaScript today!:  https://nezirzahirovic.gumroad.com/

Here are few questions as a preview:
 
![interview bible javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2v3j4zffziuv37z2lwj.png)
![javascript interview questions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk1jd7h2zjoe8guk42he.png)
![javascript jobs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ur392g764mckaa6l1th.png)
Check other our other books here: www.interviewbible.com
We built Plane ✈️ Open Source Project Management Tool (Next.js + Django)
Tags: showdev, productivity, python, javascript
Published: 2023-05-05 13:02:59

## [Plane GitHub Repo](https://github.com/makeplane/plane)

**Story behind Plane**

[Plane](https://plane.so/) is an open-source project management tool designed to help teams from different domains including engineering, marketing, product, and design to collaborate and manage their projects more efficiently. It is an alternative to expensive and opinionated tools such as JIRA, Trello, OpenProject, etc. that often come with steep learning curves and may not be suitable for every team's unique needs.


![Plane Views](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk11bnqoh287zbzegzcf.gif)



Plane allows users to start with a basic task tracking tool and gradually adopt various project management frameworks like Agile, Waterfall, and many more.

## Setting-up Plane

Setting up the Plane server is a breeze! You can easily do it by running a simple command using docker-compose from your terminal. Whether you prefer working on your local machine or cloud provider, Plane server is packaged as a Docker container.

```bash
git clone https://github.com/makeplane/plane
cd plane
./setup.sh localhost
docker-compose up
```

Plane is also on DockerHub and can be installed with single command, [read our docs](https://docs.plane.so/self-hosting) to learn more.

### Plane Features

- **Issue Planning and Tracking**: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to issues for better organization and tracking.
- **Issue Attachments**: Collaborate effectively by attaching files to issues, making it easy for your team to find and share important project-related documents.
- **Layouts**: Customize your project view with your preferred layout - choose from List, Kanban, or Calendar to visualize your project in a way that makes sense to you.
- **Cycles**: Plan sprints with Cycles to keep your team on track and productive. Gain insights into your project's progress with burn-down charts and other useful features.
- **Modules**: Break down your large projects into smaller, more manageable modules. Assign modules between teams to easily track and plan your project's progress.
- **Views**: Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.
- **Pages**: Plane pages function as an AI-powered notepad, allowing you to easily document issues, cycle plans, and module details, and then synchronize them with your issues.
- **Commend Menu**: Enjoy a better user experience with the new Command/Control + K menu. Easily manage and navigate through your projects from one convenient location.
- **GitHub Sync**: Streamline your planning process by syncing your GitHub issues with Plane. Keep all your issues in one place for better tracking and collaboration.

Demo: [Plane Cloud](https://app.plane.so/)

Love our project? Show us your support by leaving a star on GitHub.

{% embed https://github.com/makeplane/plane %}
Making Warehouse Management A Smarter Play: All You Need To Know About RFID.
Published: 2023-05-05 12:43:47

---
title: Making Warehouse Management A Smarter Play: All You Need To Know About RFID.

published: true
description: Managing a warehouse can be challenging, requiring considerable time, personnel, and resources to guarantee seamless operations. Fortunately, technology advancements have enabled smarter, more efficient warehouse management, particularly through the implementation of Radio Frequency Identification (RFID) technology. This blog post looks into the role of RFID technology in today's warehouse management, and how it can help you elevate your warehouse to the next level.

tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-05 12:43 +0000
---
Postgresql Proxy for analyzing complex and legacy db schema on spaghetti code
Tags: help, idea
Published: 2023-05-05 12:35:01

Whist working this Idea came across to my mind a proxy server that both forwards postgresql queries to actual database but to an analyzer as well.

The idea is as follows:

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

What I want top achieve is to somehow document any impact that will have any schema change to my existing apps. 
I want to obtain the knowledge so I can use it in situations for example if I alter a table I want to know:
1. What files and app sections will be affected
2. What views will be affected.

For any PHP app I either will modify the PDO or the frameworks DB connection in order to prepend SQL comment that will contain the file and optionally the URL of my query.

An alternative approach will be:


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


That the proxy will create for each query a checksum and provide it to the analyzer. Afterwards the PHP App for each query will also provide a checksum the file and the Url.

For each case I will generate a map of table - url - file affection. So I can know what table affects what.

How do you lime my idea? Are there ready-to-use tools instead?

Firthermore, in my case the app is in PHP so In order for the analyzer to work I want somehow to "ruffian" the url and file into the analyzer therefore I thought these ideas:
1. Extend the PDO class
2. Implement my own driver extending the existing one from PHP

Is this a good idea though? Could I do with a custom extention for example something like xdebug but analyzes only the nessesary pieces of code.