teleren/devto huggingface dataset:
Getting 405 & "Error calling backend API: Unexpected end of JSON input" error on Vercel deployment
Tags: nextjs, chatgpt, openai
Published: 2023-07-26 04:44:02

0

I created a Next.js (tailwind css) web app. It uses chatgpt 3.5 turbo api in the backend (integrated). The app runs perfectly on the localhost server, but when i deployed it via Vercel, it gave me "Error calling backend API: Unexpected end of JSON input" error, 405 error whenever I enter an input text and send it to the API. I am not sure what the issue is here, added api key to environmental variable section in Vercel, tried changing the endpoint etc. but doesn't work. What could be causing this. Also, sometime later after the request (and error), I get this message as well: Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received". Please help me out, thank you.

I was expecting it to run smoothly on the Vercel app deployment just as it does on localhost.
📃 😎 DocKing: manage document templates & render PDFs microservice
Tags: microservices, opensource, vue, php
Published: 2023-07-26 04:35:52

![DocKing's Logo](https://raw.githubusercontent.com/shipsaas/docking/main/docs/img/logo.png)

DocKing is a document management service/microservice that handles templates and renders them in PDF format, all in one place.

You can utilize DocKing as a shared microservice, which can be integrated & used in any services from your big product.

- Documentation: [DocKing's doc](https://docking.shipsaas.tech/)
- GitHub Repo: https://github.com/shipsaas/docking

DocKing is well-tested & production-ready 😉🏎️🚀

## LIVE DEMO 🔥

- URL: https://docking-demo.shipsaas.tech/ (feel free to hit the APIs)
- Console: https://docking-demo.shipsaas.tech/console#/
    - Password: None

## Features 🚀
- Manage your document templates 📰🧾.
- Render HTML based on your desired data for a specific template, then export it as PDF 🏃‍.
- Supports multiple state-of-the-art PDF Engines 🍻.
- Webhook notification after PDF rendered (for async flow) 🚀
- Built-in UI-console to manage the templates & files (for internal use) 🔋.
- DocKing can perfectly fit for the horizontal scaling based on your needs 😉.

## Diagram of how it works

![DocKing's Diagram](https://github.com/shipsaas/docking/blob/main/docs/img/full-picture.png?raw=true?raw=true)

From the diagram above, DocKing is standing as a "shared-microservice".

- Billing Service can manage their bill templates and render the PDFs.
- Order Service can manage their order templates and render the PDFs.
- Contract Service can manage their contract templates and render the PDFs.
- ...


Give it a ⭐️⭐️⭐️ if it's helpful, many thanks 🥹
Mastering Web Navigation: How to Save Time and Effort with Text-Fragments
Tags: productivity, webdev, programming
Published: 2023-07-26 04:28:33

Recently, I was reading an article, and it was very long! The annoying part was that, everytime I came back, I had to go through the contents again and again, until I found an intresting trick to solve this on the web.😁

Follow along with me, If you are also facing the same issue

### Quick Solution
A hack to solve this problem, that I found is by using the, text-fragments feature that most of the modern web browsers now a days support

Syntax-
```
https://example.com/some-blog#:~:text=<TEXT YOU WANT TO SAVE>
```
> If there are spaces, then denote them using %20

#### Demo

visit this [page](https://medium.com/neurobit-technologies/creating-dark-theme-using-react-hooks-and-context-in-material-ui-1f42af330913#:~:text=Below%20is%20a%20gif)

When it opens, you'll see that the browser automatically, highlights and scrolls to the position where the text, **`Below is a gif`** is present

> PS: While most websites support this feature, it's essential to bear in mind that a few might not be optimized yet.

Happy Browsing! 😇
Step by step to work on Front end feature request
Tags: jira, ticket, workflow, productivity
Published: 2023-07-26 03:35:10


Ever think about your approach of doing a feature request?
I do, and sometimes i don't do it in consistent way, 
sometimes i read the requirement and straight to the code, and just missing out some edge cases / scenario and i had to re-work my state, component structure

here are small notes from me, that i think an ideal step-by-step approach to complete a small feature request (consider it like a jira ticket if you use jira)


- Define scenarios that you want to test as a unit test
Read the Acceptance criteria in the ticket (the requirement).
write blank test, without assertion first, but write the scenario and step by step to run it by using comment

- if you use TDD approach, start writing the test after that

- if you don’t use TDD approach for some reason, skip and do the unit test after the code is completed.

- Don’t code yet, do little white boarding, or pen/paper to design your state, code, containers, components compositions, etc.
ensure your design can cover scenario 1 , 2, 3 of the unit test.

- Break your plan into subtasks, make a checklist from it. (todolist, comments, whatever you like, but ensure you keep on track on every small thing you need to do)

⚠️this list will help you to focus.
for example you doing task A, and you just realized you need to add B and C, instead of getting distracted you can add B and C to the list first, and complete A first without switching back and forth doing different things.

- Start code
develop to cover scenario 1, then cover 2, then 3 then etc…

- If you haven't, Complete the unit test

- Create commit, recommended to follow this approach https://www.conventionalcommits.org/en/v1.0.0/
then Raise a PR.

you can then continue to test the feature in your staging environment, and once passed, deploy to prod
Rapid Programming under minutes with CHATBOT
Tags: webdev, javascript, beginners, programming
Published: 2023-07-26 03:30:00

[Constitute](https://www.aiforme.wiki/ai/tools/Constitute) introduces "Chad," an AI-powered virtual assistant that brings ChatGPT, the advanced chatbot, to your fingertips on your computer. 

With Constitute, users can access ChatGPT quickly and efficiently, making rapid programming a breeze. Whether you are on a Mac or Windows platform, Chad is always ready to assist, offering keyboard shortcuts for various features.

## Key Features of Constitute:

**Access ChatGPT Anywhere:**
Constitute provides a seamless experience by allowing users to access ChatGPT from anywhere on their computer. With Chad as your virtual assistant, programming and problem-solving become more accessible and efficient.

**Keyboard Shortcuts:**
Constitute simplifies the interaction with ChatGPT by offering convenient keyboard shortcuts for different features. Users can effortlessly invoke Chad to assist with coding tasks without interrupting their workflow.

**Compatible with Mac and Windows:**
Chad is compatible with both Mac and Windows platforms, ensuring a broad user base can benefit from the convenience of Constitute's AI-powered assistant.

**Speed and Efficiency:**
Constitute empowers users to perform rapid programming by utilizing the capabilities of ChatGPT in a seamless manner. Chad's quick access and intelligent assistance streamline the coding process.

**Stay Updated:**
Follow Constitute's Twitter account to stay up-to-date with the latest updates and news about Chad and the advancements in ChatGPT.

**Conclusion:**
[Constitute](https://www.aiforme.wiki/ai/tools/Constitute) brings ChatGPT closer to developers and programmers with the introduction of "Chad," the AI-powered virtual assistant. By offering quick access through keyboard shortcuts and compatibility with both Mac and Windows platforms, Constitute makes rapid programming a reality. 

Embrace Constitute to experience the ease and efficiency of ChatGPT integration and unlock a new level of productivity in your coding journey. With Chad by your side, programming becomes more accessible and enjoyable, ensuring seamless progress in your projects.
@Developers What's your before and after tech stack?
Tags: discuss, webdev, devdiscuss
Published: 2023-07-26 03:20:05

A couple months ago, I learnt MERN stack, and built 1-2 projects with it. But later I thought of trying out Django as I heard Django is such a strong backend framework. I am still learning it but I really love how Django is powerful when it comes to having all batteries included despite being complex.
AntDB Installation and Deployment Documentation — P1
Tags: database
Published: 2023-07-26 02:30:16

## Pre-installation Preparation
This section introduces the hardware devices and operating system that need to be prepared before installing AntDB.

**Operating System**

This section introduces the common operating system versions that AntDB is compatible with.

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

**Hardware Environment**

This section describes the hardware configuration required to install AntDB.

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

**Installation files**

Please obtain the installation package from the delivery person.
React Hooks: useContext
Published: 2023-07-26 02:29:07

If you are learning React, you have probably come across something called Hooks. One of the many useful hooks is 
`useContext`.

---

**What Is useContext?**

This is a way to share values between components without having to pass a prop through every level of the tree. Instead, we define it on a global level and it can be accessed in any child component.

---
We begin by creating an AppContext component where we will set all global states. 

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


---
We need need to make sure that we wrap all the global state variables around a <AppContext.Provider value {{}}>

![AppContext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60fkb8bgqr04celf7skn.png)


---
Once the AppContext component is created we can then go into our index component, import AppProvider, and wrap our <App /> with <AppProvider>

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


---
Once all of that is completed we can start using those global states in our components.

![LiftProgress Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxlx6rby8bj1fhkb9nru.png)


---
**When Should I Use useContext?**

useContext is great when you have some data that many different components need to access. It saves you from having to pass that data around through props, which can get confusing and messy.
Whop - Communities and software to help you earn online
Tags: ecommerce, software, communities
Published: 2023-07-26 02:04:17

Whop is a platform to service the internet economy. Millions of people are building new products that they are selling guerrilla-style on social media and forums throughout the internet. Whop gives these sellers a sleek storefront that can accept payments, seamlessly deliver digital products, and attract new customers visiting our marketplace.

[https://whop.com](https://whop.com)
Query Optimization in Postgresql
Tags: postgres, apacheage
Published: 2023-07-26 01:27:03

When your SQL statement returns the correct result, does it end there? You guessed right, it does not. Performance is an important aspect of every program and while writing SQL queries, it is important to consider the efficiency of every block of query. In this series of articles, we will explore query optimization techniques in Postgresql.

What makes SQL different? 
SQL is a declarative language, which means we only specify the result we want, not how to get it. This is different from imperative languages, where we specify the sequence of steps to execute. This difference can lead to different execution times for two queries that yield the same result.

In Postgresql, query optimization focuses on choosing the best way of writing queries. The best way in this context is determined by different factors, such as storage structures, indexes,and data statistics

## Postgresql Optimization Procedure
Postgresql opimization follows the SMART goals namely:
* Specific
* Measurable
* Achievable (attainable)
* Result-based (relevant)
* Time-bound (time-driven)

The table below shows what each goals represents while working with Postgresql.

| Goals | Not SMART Examples | SMART Examples |
|---|---|---|
| Specific | Pages should load quickly. | Each function should complete within a system-defined timeout. |
| Measurable | Customers should not have to wait long to complete their application. | The registration page should load in no more than 4 seconds. |
| Achievable | Daily data refresh time in the data warehouse should never increase. | The daily data refresh time should grow logarithmically as the source data volume grows. |
| Result-based | Each report refresh should be as fast as possible. | Each report refresh should be short enough to avoid lock waits. |
| Time-bound | We will optimize as many reports as we can. | By the end of the month, all financial reports should run in under 30 seconds. |

## Postgresql Query Processing

Postgresql takes some keys steps to precess queries after we hit `execute` command. Below are the steps and what they represent:
* Compilation: Here Postgresql compiles and transforms a SQL statement into an expression consisting of high-level logical operations, known as a logical plan.
* Optimization: Postgresql optimizes the logical plan and converts it into an execution plan.
* Execute: In this final step, Postgresql interpret the plan and return results.

In the next article, we will look at code examples of these optimization techniques we can use when executing Postgresql query
Guarantee unique keys in Terraform
Tags: terraform
Published: 2023-10-19 11:57:14

---
title: Guarantee unique keys in Terraform
published: true
date: 2023-07-26 00:00:00 UTC
tags: Terraform
canonical_url: https://xebia.com/blog/guarantee-unique-keys-in-terraform/
---

When using Terraform to dynamically create resources based on lists of maps you probaby have run into this issue. Consider the following list of maps that represents IAM access on a generic cloud resource:

```
locals = {
    members = [
        {
            member = "contact@christerbeke.com"
            resource = "projects/12345"
            role = "roles/owner"
        },
        {
            member = "test@christerbeke.com"
            resource = "projects/12345"
            role = "roles/reader"
        }
    ]
}

```

If we want to iterate over this list to create a dynamic amount of resources (using `for_each`) we need to convert it to a `map`. However there is no way you can construct an map key from any of the separate attributes and guarantee uniqueness. So how can we solve this?

The trick is to create a combination of all the attributes. But simply concatenating all the attributes in a string results in very long keys. To solve this, and get predictable key lengths, we can use an md5 hash:

```
locals = {
    unique_members = { for key, member in local.members : md5("${member.member}/${member.resource}/${member.role}") => member }
}

```

This results in the following data:

```
{
    "0f334c4500b1faab57203343199d5c86" = {
        member = "contact@christerbeke.com"
        resource = "projects/12345"
        role = "roles/owner"
    },
    "c02f629ef8bf2b413a203c4dcafa60c1" = {
        member = "test@christerbeke.com"
        resource = "projects/12345"
        role = "roles/reader"
    }
}

```

Now we can use it in our `for_each` iterator:

```
resource "iam_member" "default" {
    for_each = local.unique_members

    member = each.value.member
    resource = each.value.resource
    role = each.value.role
}

```

Now you know a simple trick to convert a list of maps into an iterable map with unique keys.

As a bonus you now get alerted about duplicate list entries, as they would result in dulicate map keys causing Terraform to throw an error!

The post [Guarantee unique keys in Terraform](https://xebia.com/blog/guarantee-unique-keys-in-terraform/) appeared first on [Xebia](https://xebia.com).
TIL Week 2
Published: 2023-07-26 00:18:56

During this week we have really immersed ourselves in html. 
My favorite part was the flex bot froggy.
Really getting into the background of CSS alignment is very interesting.
```
text-align
text-direction
flex
flex-direction
````
I have also made my very first linktree with my own images and links. I think the hardest part was realizing how to connect everything from my css to my html code, once I realized that connection everything fell along pretty easy. Also css references were life savers!
Dear past me, use the flags
Tags: story, programming, devops
Published: 2023-11-29 16:45:01

---
title: Dear past me, use the flags
published: true
date: 2023-07-26 00:00:00 UTC
tags: story,programming,devops
canonical_url: https://ishan.page/blog/2023-07-26-use-the-flags-luke/
---

Dear past me,

I know you’ve just launched your first desktop application. It’s a nightmare isn’t it? Well you’re in for a bigger one.

Your boss calls you, and they need a new feature immediately. You bang it out and send out the update.

Oh yeah, that’s right. You didn’t include an update mechanism. Please use one, you’ll save yourself a lot of pain.

You send out the update to users, but soon you find out everyone hasn’t updated yet. The boss **insists** that people on an older app version shouldn’t be able to use it.

But you didn’t include a forced version based lockout mechanism either. Well, you’ll remember that for next time!

Desperate times call for desperate measures, and you decide to break the server so it returns bad data to old app versions. Never mind that this permanently corrupts the local database and will require future tech support to help them clear their cache. But that’s future you’s problem.

The boss is happy, the app is chugging along. This cycle repeats a couple more times in various ways.

Save yourself the pain next time. Implement a feature flag / version system. Later, it’ll even help you roll out features to users incrementally.

Use the flags, Luke.

Sincerely, Present me
The 44th Day of the 100 Days of Code Challenge
Published: 2023-07-25 23:44:02

Hey everyone!

Landed home today and had some more time to finalize the project. It's all working perfectly, even the logs look great!  Got what I wanted. Now, the only thing left to do is to make a nice-looking pull request. I wanted to finish this task today, but it's 2:40AM and I should probably go to sleep to work better tomorrow. A demo also needs to be created and setting up the server can take some time.

Yesterday, I realized that threading actually worked in the application and that I had no idea why it didn't work prior to that. But it does work now! I learned that the subscribe() method is an asynchronous method, so to stop the stream in the most logical way possible, considering that it runs in a separate thread, I set up a blocking event using the threading library purposely.

This allowed for a smooth flow, as before that, the thread just finished executing but the pipeline was still executing in the background. Can be quite a bit confusing with how the resources are handled.

Which was exactly my question, since the transcription operation is heavy, is the thread still alive once it's done executing for the transcription operation to use its resources? Honestly, don't know. I also don't know how it works in asynchronous terms and what event loop it runs.

I found a way to gracefully stop the transcriptions and it's working great, no complaints at all. The transcriptions are being generated right until the end to the last of the audio chunks.

Since my commit history wasn't clean at all (Granted, I didn't use GitHub much before), I want to create a new branch and only add one single commit to it, which would be the working version and then work from there. This would be great in terms of commit history in my opinion.

So, for tomorrow, in terms of this specific project, I need to record a demo and create a pull request. That's it! Improvements will come later on of course :)

Loving this project and this journey! Glad to be back and to have the chance to work more on these projects.

Happy coding everyone!!
Install pgAdmin 4 On Windows 11 Or 10
Tags: apacheage, postgres, pgadmin
Published: 2023-07-25 23:09:59

pgAdmin is a free, open-source software for graphically managing PostgreSQL databases, inherited from the PostgreSQL project, and compatible with Windows, Linux, macOS, and Unix derivatives.

**1.** Download the pgAdmin 4 by using the below link.
[https://www.pgadmin.org/](https://www.pgadmin.org/)



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



**2.** Click on the latest version of pgAdmin 4 to download it.

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



**3.** Click on pgAdmin exe link to download pgAdmin 4 application.

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



**4.** Click on the downloaded pgAdmin 4 executable file and choose to install for all the users.


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



**5.** Choose I accept the agreement and click on the next button.


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



**6.** Click the Next button after selecting the place where you wish to install pgAdmin 4 or you can skip this and click next button.


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




**7.** Choose Next.You can select a folder if you don't want to create a program shortcut.


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




**8.** Click on the Install button.


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




**9.** The installation of pgAdmin will now take some time. Click Finish when it is finished.


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




**10.** Here is the pgAdmin after getting installed.

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