DEV Community: Jannis

Why ChatGPT and AI is bad for new programmers

Jannis — Tue, 18 Apr 2023 06:46:21 +0000

The year 2023 has been shaped by the release of ChatGPT, and even today, more AI projects are released daily. Everyone who has tried some of them knows they're amazing, and you can generate content super fast and easily with them.

But what if I told you it's bad for you as a new programmer learning how to code?

The fact that you can easily get a working code snippet by just typing a short and simple prompt like "Write me a QR-Code generator in Python" is just mindblowing. Even tho it's mindblowing it brings up some huge concerns about the future of programming.

People start to think "Why should I even consider learning programming if ChatGPT can do it for me?" and that's a problem! They don't know that programming is a lot more than just writing code because it's more about logical understanding and solving problems with the help of code. Coding itself is a very small part of the tasks programmers face.

What actually is ChatGPT?

Since ChatGPT is the most known tool out there right now, let's talk about it a bit more and what it's actually about. I'm not going extremely in-depth but as much as needed to understand my further points.

First of all, what actually is ChatGPT or what's behind it? ChatGPT is, at the time of writing, based on the GPT-3.5 LLM (Large-Language-Model) for free members and on the GPT-4 LLM for paid members. Those so-called LLMs are neural networks that have been trained on a lot of text to understand its content and connections between words and sentences.

Now the first problem with these LLMs mentioned above is that they are outdated! Everything they "know" is from 2021. Since the world is changing faster than ever this is a huge downside when using such AI tools.

Besides that, the information they provide is also not always 100% correct. An AI can only give you as much as it has been trained on itself. Imagination counts also for the big incapabilities of AI like ChatGPT.

Why new programmers shouldn't use AI

I'm sure there are alot of other opinions as well but I don't suggest using ChatGPT and other AI tools when getting into programming.

When thinking about programmers the most of us just think about writing code all day long and that's it. But it's way more that comes with it which is important as well. Other aspects of coding are understand how computers and servers work, learning about cyber security, getting knowledge about infrastructure and different options to host the own applications.

While learning how to code you will definitely get stuck on some errors and other problems. You can just ask ChatGPT and it will may or may not give you a helpful response, which seems great in the first place.

But what happens, when you try to solve it by yourself, read documentations and try to understand what's going on? When trying to solve the issue you come across different sources of knowledge and everywhere you go to read something you learn something new even if it isn't specificily necessary for your problem right now but you will be grateful for it in the future when having a different problem.

You won't get that bonus of "extra knowledge" when just asking ChatGPT. It even gets harder when you have absolutely no clue what your problem is all about so how are you going
to tell ChatGPT about it if you don't know it yourself?

ChatGPT is always only as good as the person who types in the prompt!

Everything that's mentioned above is just a tiny fraction of the whole complexety and ecosystem of AI and its advantages and disadvantages.Other important parts would be copyright of the data the models are trained on or the danger of AI getting as far as being able to think and act by itself.

Cover photo by D koi / Unsplash

Keep moving! - AquaHub #8

Jannis — Mon, 05 Dec 2022 09:28:14 +0000

Another week has passed and I must confess that I'm late with this post again.. There's a lot of stuff going on right now and not always the time, energy and motivation to summarise the last week.

Repo: https://github.com/AquaHubStudio/AquaHub

🔭 User and project page
✍️ Edit your project

🔭 User and project page

My current issue I'm working is the project and user page where you can see the user and the projects of the user.
It's not going to be perfect at the beginning but improve when the time passes.

✍️ Edit your project

Another important part I've done the last week is the page to edit each project. Upload new project avatars and update information.

Thanks for reading!

Staging is live - AquaHub #7

Jannis — Sat, 26 Nov 2022 08:00:00 +0000

This week I've done one pretty important job but in the other time it was stressful in private life so no big other changes completed.

🚦 Staging is live

I finally done the job of creating the necessary dockerfiles. For our backend (PocketBase) I made a custom bash script to initialize and update everything.
I had many and many errors I was struggling with and it's not been easy but I finally was able to complete it.

The staging of AquaHub is finally live on https://staging.aquahub.studio!

Updates made to the dev branch are automatically deployed to the staging server.

❗️ Please keep in mind that everything's still under development so data can get lost or there can be some server interruptions.

Thanks for reading!

No grind no glory - AquaHub #6

Jannis — Sat, 19 Nov 2022 11:42:36 +0000

Another week has passed! Here I am with the newest weekly blog to share what progress we've made at AquaHub.

🔥 First contributor
🚀 The UI progress
🐳 Future hosting

🔥 First contributor

An awesome moment happened right in the middle of a development session.
A person joined and offered help in the development of AquaHub. He began working on the README.md, finished it and created a Pull Request. After that he contributed some grammar fixes as well.
Even if it doesn't sound like much, it means a lot to me and was an amazing feeling.
If you read this thank you!

🚀 The UI progress

This week I fully committed into the UI and was working on different stuff like login page and it's functionality and the projects page. Little spoiler here:

🐳 Future hosting

One of the next steps it the hosting and staging hosting as well. I'm currently working on the configuration files and need to write a custom script to initialize our current backend PocketBase.

Thanks for reading!

Manage your containers with Portainer

Jannis — Wed, 16 Nov 2022 07:00:00 +0000

Today we are going to take a look at Portainer!

❓ Quick intro to Portainer
⚙️ Setup Portainer for Linux

❓ Quick intro to Portainer

First off all there's one question. What's Portainer?.

Portainer is a web-based management tool for all of your containers. You can deploy, configure, troubleshoot and secure containers. Doesn't matter if your infrastructure is on Kubernetes, Docker, Swarm or Nomad in any cloud, data center or device.

A beautiful UI to have the overview about your running processes and containers.
It has many integrations and is easy to setup. E.g. auto deploy on git repository push (GitHub, GitLab, etc.).

⚙️ Setup Portainer for Linux

We are going to setup Portainer on Linux.
You already need to have some knowledge about Docker because it doesn't get covered here.

First, create the volume that portainer server will use to store its database:

docker volume create portainer_data

After that we can already install the portainer server container (Community Edition):

docker run -d -p 8000:8000 -p 9443:9443 --name portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest

And after it started it's ready to go! Visit it's page and start by creating your admin user and follow the instructions.

https://localhost:9443

ℹ️ FYI: There's also a free business edition with some additions. Read more about the differences!

Thanks for reading!

Grinding when no one else is - AquaHub #5

Jannis — Mon, 14 Nov 2022 09:40:03 +0000

Also in the last week I did some work on AquaHub. I know this post is two days late but that doesn't prevent me from sharing the newest progress.

🖥️ The UI progress
🪝 GitHub webhook

🖥️ The UI progress

Since I have PocketBase as my Backend-as-a-Service I can focus completely on the frontend.
I decided to build it with SvelteKit because it's a easy and simple framework. I also like to try new things and this seems perfect to dive deeper into it.

The landing page is currently under development and is getting better and better each day.
It's very hard to say but I start with a whitemode at the beginning.
Later there will hopefully be a darkmode!

🪝 GitHub webhook

A little but cool improvement.
On the AquaHub Discord I setup a GitHub Webhook to the official AquaHub repository. Everyone in the Discord gets updated on changes, released and updates.

Thanks for reading!

Introduction & Setup PocketBase

Jannis — Wed, 09 Nov 2022 07:00:00 +0000

Today we are going to dive into PocketBase and set it up!

💡 What's PocketBase?
🛠️ Setup Pocketbase
🐳 Setup via docker-compose

💡 What's PocketBase?

PocketBase is an open-source Backend-as-a-service (BaaS). It offers all necessary needed features like authentication, file storage, realtime database and web dashboard.

PocketBase uses an SQLite Database behind the scene and is written in Go. They offer an awesome JavaScript/Go SDK and you can even extend it by using it as a Go Framework.

You are able to configure permission rules, OAuth2, external file storage (S3) and mail (SMTP).

PocketBase
PocketBase Demo:

🛠️ Setup Pocketbase

The setup of Pocketbase is so easy it takes less than 1 minute to be able to start using it!

Download & extract

Download the archive from the documentation that's correct for you operating system. Now move it in the root folder in your project.

Next extract the archive and you should be left with a folder which contains an executable (pocketbase).

Start Pocketbase

Move into this directory and run the ./pocketbase serve command.



cd ./<directory

./pocketbase serve

And you are all set up! Visit the Admin UI page to setup your admin account and start using PocketBase!

🐳 Setup via docker-compose

In the favor of many developers there's a way to set it up via Docker as well.

Repo: https://github.com/muchobien/pocketbase-docker

Even easier than above you just add the pocketbase to your docker-compose.yml file like that:



version: "3.7"
services:
  pocketbase:
    image: ghcr.io/muchobien/pocketbase:latest
    container_name: pocketbase
    restart: unless-stopped
    command:
      - --encryptionEnv #optional
      - ENCRYPTION #optional
    environment:
      ENCRYPTION: example #optional
    ports:
      - "8090:8090"
    volumes:
      - /path/to/data:/pb_data
      - /path/to/public:/pb_public #optional

After starting your docker stack it automatically installs and sets up PocketBase and you're instantly ready to start working!

Thanks for reading!

First steps taken - AquaHub #4

Jannis — Sat, 05 Nov 2022 07:00:00 +0000

This week I started the Projects Portal (AquaHub) and took the first steps. I'm so excited and really hyped for what the future holds. Here I share the two top things happened this week.

🗂 PocketBase
👤 Authentication
🔥 UI coming

🗂 PocketBase

Another and most likely to the last change I did to the tech stack that I'm going to use for this project. I set up the so called Pocketbase to use as a Backend-as-a-Service.

I added it via docker-compose to my devcontainer. It was super easy to set up and it's working perfectly fine.

PocketBase is a small but fast backend to use in an application and has a beautiful and easy to use web interface. You can configure multiple things like storage server (S3) or SMTP for password reset/confirmation mails. The documentation is awesome and there's also built-in API preview in the dashboard.

👤 Authentication

With the new backend set up I implemented the first authentication method. Google authentication for the beginning because it's the most used one. Later there will be more added!

There were multiple problems at first with the authentication flow and I needed to get familiar with the PocketBase API. But now that I've spent a few hours learning PocketBase, it works fine and I can move on.

🔥 UI coming

Now that I'm all set with a working backend and authentication I start with building some parts of the UI. My plans are to make a concept about the structure of the page and how the user is going to interact with it.

I focus on making a very MVP now to find out if it's going to have some people interested in it. Of course fun is the most important part and I'm definitely having a ton of fun!

Thanks for reading!

Create a Devcontainer (VSCode)

Jannis — Wed, 02 Nov 2022 07:00:00 +0000

❓ What's a devcontainer
🏗 Create your own devcontainer
🔗 Devcontainer with docker-compose

❓ What's a devcontainer

A devcontainer is a feature of Visual Studio Code that let your run docker containers locally for development. This brings a lot of advantages!
I listed a few here:

Useful for bigger groups
Doesn't matter what operating system, version or compatability your local device has. (It's built for that purpose!)
Fast and secure

🏗 Create your own devcontainer

FYI: For this part some docker knowledge is required and is not getting teached.

Now in this example let's create a simple and small NodeJS devcontainer

We start with creating a .devcontainer folder in the root directory of our project.

All we need more for our devcontainer are two more files. The devcontainer.json for configs and a default Dockerfile.
devcontainer.json

{
    "name": "YourProjectName",
    "build": {
        "dockerfile": "Dockerfile"
    },
    "settings": {
        "terminal.integrated.profiles.linux": {
            "zsh": {
                "path": "/bin/zsh"
            }
        },
        "terminal.integrated.defaultProfile.linux": "zsh",
        "editor.formatOnSave": true
    },
    "extensions": ["esbenp.prettier-vscode"]
}

name - The name of your devcontainer and most likely the same as your application.

build - In this example we defined where the Dockerfile is but ther are many more options for the build process.

settings - Have explicit settings like the shell in this example is set to zsh (Need to be installed in Dockerfile) and autoformat on save is set to true.

extensions - An array of vscode extensions that are automatically getting installed on startup and used. (Locally installed extensions not available anymore)

For even more settings see in the docs: https://containers.dev/implementors/json_reference/

Dockerfile

FROM node:18


RUN apt-get update
# Install dependencies
RUN apt-get install -y wget zsh git \
# Install oh-my-zsh
RUN wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | zsh \
  && cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

Now if you reload your window or restart it completely you should see a popup on the right bottom corner saying "Reopen in Container". Click in it and your container is starting up.

Congratulations!
You just created your very own node devcontainer.
This is possible in every language and with many more settings and stuff. I just briefly teached you the very basics.

🔗 Devcontainer with docker-compose

You are not limited to only one container, you can even use docker-compose and build your complete development environment with e.g. database or two different servers.

Let's make some changes to our devcontainer.json:

{
    "name": "YourProjectName",
    # Changes 👇
    "dockerComposeFile": "docker-compose.yml",
    "service": "app",
    "workspaceFolder": "/workspace",
    "settings": {
        "terminal.integrated.profiles.linux": {
            "zsh": {
                "path": "/bin/zsh"
            }
        },
        "terminal.integrated.defaultProfile.linux": "zsh",
        "editor.formatOnSave": true
    },
    "extensions": ["esbenp.prettier-vscode"]
}

dockerComposeFile - The location of your docker-compose.yml file.

service - Define which service you are going to work in.

workspaceFolder - The folder where you are going to work in.

Now let's create our docker-compose.yml file.
docker-compose.yml

version: "3"

services:
  app:
    container_name: projectname_app
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      - APP_ENV=local
      - APP_DEBUG=true
    volumes:
      - ..:/workspace:cached
    depends_on: [database]
    command: sleep infinity

  database:
    container_name: projectname_db
    image: mariadb:10.9
    environment:
      - MYSQL_ALLOW_EMPTY_PASSWORD='yes'
      - MYSQL_ROOT_HOST=%
      - MYSQL_DATABASE=development
      - MYSQL_USER=root
    ports: ["3373:3306"]
    volumes:
      - ./data/db:/var/lib/mysql

volumes:
  vendor: null

We now created our docker-compose file to start not only our application but a MariaDB database at the same time.

If you now reload your project again and startup your containers. You will see that your project started up but at the same time you have a database running ready to use in your project. How cool is that!

Thanks for reading!

Start small and grow after - AquaHub #3

Jannis — Sat, 29 Oct 2022 06:00:00 +0000

In todays blog we discuss some new plans and stuff I was thinking about to change. Even if I had a specific plan I needed to take a step back and reconsider my plan.

🤏 Start small
🛠 First software
🔮 Concepts

🤏 Start small

Maybe some of you read my first or second blog post. I was already thinking about having a central authentication provider and teams systems and so on.
But I had to tell myself... slow down. I can't start with the beginning. I bet some of you have also experienced this "I want everything already at the beginning". So now I take a step back and tell you how I am going to start small and grow later.

🛠 First software

Now because I decided to start with a small software I already wanted to do, I'm going to introduce you to it.
A hub for software projects. A simple UI, awesome user experience and many different features for project managers as well as project searches.
In a small addition to the stack I am now going to use *NextAuthJS for authentication.
In the future I will generally post about the progress of this specific software and sometimes even general interesting facts about AquaHub.

🔮 Concepts

Maybe some of you also read my other general blogs about different concepts and software. I write blog posts about different softwares and concept I will implement in AquaHub and now specifically in the documentation too.

Here a quick list of them:

Thanks for reading!

ExpressJS like API in NextJS

Jannis — Wed, 26 Oct 2022 06:00:00 +0000

Have you ever wanted an ExpressJS like API structure in your NextJS app? A good structure and easy to extend.

Let me give you three examples with having an easier API with the NPM package called next-connect.

FYI: This is not the whole code, it's just the core of the functionality I wanted to present you.

✅ Advantages
🚏 Route
🚪 Middleware
🛑 Error handling

✅ Advantages

Here are quickly five advantages of using next-connect.

Clean and nice structure
Fast and scalable
Easy to implement
TypeScript support
Lightweight

🚏 Route

Create a POST endpoint for /user.

NextJS:

// api/user.ts
export default function handler(req: NextRequest, res: NextResponse) {
  if (req.method === 'POST') {
    res.status(200).send('Worked!)
  }
}

Next-Connect:

// api/user.ts
const handler = createRouter<NextApiRequest, NextApiResponse>();

// Process a POST request
handler.post(middleware, async (req: NextRequest, res: NextResponse) => {
  return res.status(200).send('Worked!)
});

Now let's imagine you have an endpoint for GET, POST, PATCH, PUT and DELETE method. Your handler will be full of if else statements and not very clean.

🚪 Middleware

Let's create a middleware for two routes.

NextJS:

// middleware.ts
export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/about')) {
    console.log('Middleware fro /about');
  }

  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    console.log('Middleware fro /dashboard')
  }
}

// api/about.ts
export default function handler(req: NextRequest, res: NextResponse) {
  if (req.method === 'POST') {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}

Next-Connect:

// middleware.ts
const middleware = () =>
  router.use(async function (req: NextApiRequest, res: NextApiResponse, next: NextHandler) {
    console.log('Middleware ran! 🚀');

    next();
  }


// api/index.ts
const handler = createRouter<NextApiRequest, NextApiResponse>();

// Process a POST request
handler.post(middleware, async (req: NextRequest, res: NextResponse) => {
  return res.status(200).send('Worked!)
});

It doesn't look that next-connect would be better, smaller or easier BUT think about having an API with dozens of endpoints and multiple middlewares. With next-connect it's much more clear and structured.

🛑 Error handling

The error handling of both parties is very interesting, let's look into it.

NextJS

export default async function handler(req: NextRequest, res: NextResponse) {
    try {
        // Do some API request or something
        res.status(200).json(response.data);
    } catch (error) {
        // Send error to the client side
    }
}

Next-Connect:

export default router.handler({
  onNoMatch(req, res) {
    return res.status(404).send('404 Not found');
  },
  onError(err, req, res) {
    return res.status(500).json({
      error: (err as Error).message,
    });
  },
});

Next-Connect has a way easier and secure way of handling errors in your application. It's even pretty customizable and nice to use.

Thanks for reading!
It was a quick and very superficial overview about next-connect for NextJS. I absolutely like it and I hope I could give you a good overview about it.

The plan and its optimal stack - AquaHub #2

Jannis — Sat, 22 Oct 2022 06:00:00 +0000

In the last few days I made a rough plan about where I want AquaHub to go. Thought about the project I want to start AquaHub with and made a little roadmap for the next few steps.

🌐 Open-Source
🏆 Roadmap
⚙️ Tech-Stack

🌐 Open-Source

In the last blog post I said I will think about if I open source the projects or not. The answer is YES! I will put all projects and their source code open-source on GitHub for you to look into and maybe also contribute 🤩.

🏆 Roadmap

To have something to orient myself by I made the beginning of a roadmap. It shows the first few projects I want to build and build the foundation of AquaHub.

Accounts
Let me explain what I exactly mean by that because there can be some misunderstandings. I'm sick of giving away personal data and all of a sudden I get personalised ads and because of this there won't be nothing like that at AquaHub. As you read above it's all going to be open-source.
It's going to be more of a central profile for each future software and also for me to be able to implement authentication easier.

Teams
After I built the accounts system called AquaProfile I want to get some order into the accounts. Because of that I build a website where you can create a team and be able to handle all of your members easy, simple and fast.

Now comes the part where I still couldn't agree. I am split between two plans. I would love if some of you would give me your expertise and personal opinion on that. I'm just going to explain each of it quickly.

Organizations
A tool for you too manage multiple teams at once. Have the ability to create some sort of a tree structure with your team members. This is probably only necessary for bigger groups or even companies.

Softwares
This part is still open but on the roadmap it stands for products that are going to be a part of the AquaHub network and it's image.

⚙️ Tech-Stack

To introduce you guys to the projects and also have a solid plan for each of AquaHub's products I built a Tech Stack.

NextJS
It's going to be the JavaScript framework for frontend and backend. It's based on ReactJS but has many more features built in.

TypeScript
To prevent more bugs and increase productivity we want a type-safe environment. TypeScript's going to help us with that 😉.

Prisma
To handle our MariaDB database we user Prisma as our ORM.

TailwindCSS
I'm not a big fan of writing huge CSS files and classes so we will use TailwindCSS which has a huge community and tons of features.

JestJS
As our software grows we want to prevent bugs from happening in production so we write tests with JestJS.

Prettier
Just a little addition I made a general prettier config file so everyone has the same formatting.

Docker / Devcontainer
To help host and develop our softwares we use Docker for final hosting and when developing I built a devcontainer (VSCode feature) that has all needed extensions and configurations in it.

MariaDB
A relational database with a big community and good developer experience.

next-connect
This is neither a language nor a framework. It's just a small package to have a more ExpressJS like codebase in the backend. I'm not a fan of NextJS backend itself but with this package I love it.

So if you want to contribute to a project here you go. I will also create many issues and a guide how to setup everything. Choose an issue, create a merge request and I will gladly review it 🤩.

Thanks for reading!