teleren/devto huggingface dataset:
Fullstack architecture for understanding.
Tags: fullstack, react, nextjs, graphql
Published: 2023-11-09 00:22:59



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



Above is the architecture flow for full-stack for the understanding of how data flow. 

Let's break down this full-stack architecture diagram into its different parts:

**Frontend:**
Next.js: It is a React framework that enables functionalities like server-side rendering and generating static websites. These features can improve the performance and SEO of React applications.
React.js: It is a JavaScript library for building user interfaces through a component-based architecture. React is the foundation upon which Next.js is built.

**Backend:**
Node.js + Express: This is the server environment. Node.js is a JavaScript runtime that allows you to run JavaScript on the server, while Express.js is a lightweight framework that runs on top of Node.js. It simplifies the process of building web servers and handling HTTP requests.

**GraphQL Ecosystem:**
Apollo Client: This is the state management library used in the frontend (Next.js/React.js). It enables the frontend to send GraphQL queries and mutations to a GraphQL server and manage the data and state based on the server's responses.
Apollo Server: It is an implementation of a GraphQL server that integrates with Node.js and Express. It processes GraphQL queries and mutations, fetching data from databases or other APIs as needed.

**ORM:**
ORM (Object-Relational Mapping): This is a programming technique for converting data between incompatible type systems using object-oriented programming languages. It's an abstraction layer that makes it easier to work with the database in a more object-oriented way.
Sequelize/TypeORM/Mongoose: These are specific implementations of ORMs. Sequelize and TypeORM are typically used with SQL databases, while Mongoose is used with MongoDB, a NoSQL database.

**Database:**
SQL Database: This category includes relational databases like PostgreSQL, MySQL, and Microsoft SQL Server that use SQL (Structured Query Language) to manage and manipulate data.
NoSQL Database: This includes non-relational databases like MongoDB, Cassandra, and Couchbase, which are designed to scale out using distributed architectures and are often used for large data sets or for data that doesn't fit well into tables.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctp5ff17jmgxorblg1xo.png)
GitHub client built with React Aria Components + Tailwind CSS
Tags: github
Published: 2023-11-10 08:59:11

---
title: GitHub client built with React Aria Components + Tailwind CSS
published: true
date: 2023-11-09 00:08:00 UTC
tags: GitHub
canonical_url: https://reactjsexample.com/github-client-built-with-react-aria-components-tailwind-css/
---

# GitHub Lite

> ![GitHub client built with React Aria Components + Tailwind CSS](https://reactjsexample.com/content/images/2023/11/Code_2023-11_15-03-11.jpg)
> 
> **WARNING** : very early work in progress. Almost nothing works yet. Contributions welcome!

A faster GitHub client built with React Aria Components + Tailwind CSS. [Try it here](https://github-lite.pages.dev/)

[![GitHub client built with React Aria Components + Tailwind CSS](https://user-images.githubusercontent.com/19409/280504992-546d074b-992b-41ae-98bd-212d53abfdbd.png)](https://user-images.githubusercontent.com/19409/280504992-546d074b-992b-41ae-98bd-212d53abfdbd.png)

## Why?

I was tired of waiting for full page reloads for every navigation on GitHub’s website, so I decided to build my own client as a modern single page app. It works similarly to their native mobile app, using GraphQL to load data, with pre-fetching, keyboard navigation, and optimistic updates for a fast user experience.

My first priority is notifications. On GitHub’s website, you have to navigate from the notifications page to separate issue and pull request pages, and when you go back you lose your scroll position. I wanted a two-pane UI similar to an email inbox with a notifications list on the left, and a detail view for the selected item on the right. This way you can easily scan the list, and click between items without losing your place or waiting for full page navigation.

## Stack

- React
- [React Aria Components](https://react-spectrum.adobe.com/react-aria/react-aria-components.html)
- Tailwind CSS
- GitHub’s GraphQL API
- [SWR](https://swr.vercel.app) for caching and pre-fetching
- Cloudflare Pages/Workers for deployment

## To do

This app is very early, so most things still need to be implemented. This is a side project, so I’ll work through these when I find time, but contributions are also welcome. Please open an issue if you plan on contributing so we can discuss first.

- Finish implementing rendering for all issue / pull request event types
- Hook up actions like closing issues, adding labels, etc. to the GitHub API
- Add a way to view pull request diffs, ideally using Monaco
- Add support for more notification/object types like commits, discussions, etc.
- Add a repo view in addition to notifications, for viewing issues/prs/code/commits for that repo
- …

## GitHub

[View Github](https://github.com/devongovett/github-lite?ref=reactjsexample.com)
How Do You Manage Tech Debt Effectively?
Tags: discuss
Published: 2023-11-09 00:00:00

---
published_at : 2023-11-09 00:00 +0000
---
What are the four types of technical debt, and how do they impact your codebase?

Follow the DEVteam for more discussions and online camaraderie! 

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Is There a Formula for Becoming a 'Finisher' of Projects?
Tags: discuss, codenewbie, beginner
Published: 2023-11-09 00:00:00

---
published_at : 2023-11-09 00:00 +0000
---
Project completion is a hallmark of a successful developer. Can you share your strategies for maintaining focus, staying motivated, and ultimately becoming a 'finisher' of your coding projects?

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
How to create GitHub Actions test summaries for Go
Tags: go, githubactions
Published: 2023-11-09 21:08:21

---
title: How to create GitHub Actions test summaries for Go
published: true
date: 2023-11-09 00:00:00 UTC
tags: Go,Golang,GitHubActions
canonical_url: https://jonfriesen.ca/articles/go-github-actions-test-summary
---

One of my pet peeves is searching CI output for test failure details. While I realize that in many cases this is a necessity, in _most_ cases I think this can be avoided using test output summaries. Luckily, there are two open source tools we can take advantage of to easily implement test summaries in GitHub Actions and Go tests.

First we need to generate the test summary xml file. The tool I commonly use across my test running needs is [gotestyourself/gotestsum](https://github.com/gotestyourself/gotestsum). This is a great tool for grouped console outputs and generating nice junit xml outputs.

Install with:

```
go install gotest.tools/gotestsum@latest

```

gotestsum is a drop-in replacement for `go test`, so we can someone easily replace this in our GitHub Action workflow:

```
	- name: Test
	run: go run gotest.tools/gotestsum@latest --junitfile unit-tests.xml --format pkgname

```

This simple workflow step will run the tests in the current folder, grouping by package name, and save the summary to a unit-tests.xml file. In cases where there are different styles of tests, (eg. unit, integration, e2e) running this multiple type and creating sepearate junitfiles is helpful.

Now we need to run our final step of persisting the test files as action summaries, to do this we will take advantage of the [test-summary/action](https://github.com/test-summary/action) project. Added to our workflow file as:

```
	- name: Test Summary
	uses: test-summary/action@v2
	with:
		paths: "unit-tests.xml"
	if: always()

```

This step will persist the test summaries and make them accessible to GitHub Actions for display. Providing an output like:

 ![A screenshot of GitHub Actions build summary with test results.](https://jonfriesen.ca/_next/static/media/test-summary.a6372ccf.png)
### Full Workflow Sample:

```
name: build

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Set up Go 1.19
        uses: actions/setup-go@v1
        with:
          go-version: 1.19
        id: go

      - name: Check out code
        uses: actions/checkout@v1

      - name: Test
        run: go run gotest.tools/gotestsum@latest --junitfile unit-tests.xml --format pkgname

      - name: Test Summary
        uses: test-summary/action@v2
        with:
          paths: "unit-tests.xml"
        if: always()

```
DNDocs
Tags: documentation, webdev, dotnet, docfx
Published: 2023-11-08 23:12:46

## Free online documentation hosting platform

![image](https://github.com/NeuroXiq/DNDocs/assets/19374897/4a4f0d7b-4903-4b92-b82b-db6073d9ece4)

[DNDocs - Github](https://github.com/NeuroXiq/DNDocs)
[DNDocs.com](https://dndocs.com)

Some time ago I started to develop project for fun - DNDocs.
This website allows to host documentation for .NET Core projects using nuget packages for API Explorer and markdown files cloned from github repository. I tries to make hostin .NET API explorer as simple as possible, so it is possible to host docs in one minute.

Basically usage is as following:

1. Open https://dndocs.com and signin with Github account
2. Create a project with Nuget Package Name
3. Rebuild Project

Docfx API explorer is hosted online.

## Motivation
Looking on github C# repositories lots of them did  not have any documentation online. To take a look on basic project structure
and what methods are exposed we needed to open open each .cs file just to simply look what functions and methods are there.
Also there was not any website that allows to just simply generate and host documentation for .NET Core project online.

## Solution: DNDocs
DNDocs allows to host API Explorer in one minute.

Url to documentation can be shared in any form, for example:
1. Put dndocs API Explorer URL to github project README 
2. Generate shields.io badge with Project API Explorer, for example: [![Static Badge](https://img.shields.io/badge/API%20Docs-DNDocs-190088?logo=readme&logoColor=white)](https://dndocs.com/d/arctium/api/Arctium.Standards.Connection.Tls.Tls13.API.Tls13ClientConfig.html) _(look below in this document for 'shields.io badge informations' to see how to generate exactly same badge)_
3. Or anything other

If You have a small or medium size .NET Core project - try DNdocs! \
DNdocs can be used as a *default project documentation* or *temporary documentation* for projects that does not have  any documentation yet. \

any ideas for improvements are welcome.
Creating a telegram bot
Tags: telegram, bot, zapier
Published: 2023-11-08 20:00:48

I maintain a website which has a signup form for people to get in touch. We also have a private Telegram group chat we maintain, where we add people. In addition, we have a separate moderator/vetting group chat, where we discuss who to add. 

1. First we need to create a Telegram bot, with a unique username. Open up Telegram's official "[BotFather](https://t.me/BotFather)" which will prompt you to give your bot a unique username (url) and also visual name. You can later update its photos etc.. 

2. Once the bot is created, you will get a token which looks something like `434348934:AAEWdklsdjskljdklsd` and it will have a username.

3. Add the bot to your group chat (using the username). 

4. You will also need the `channel_id` for your group chat. This can be tricky to find. If it is a public group chat with a url format of `t.me/group_name` it will be `@group_name`. Otherwise, you will need to open telegram in a web browser on your desktop at [web.telegram.org](https://web.telegram.org). Open the group chat you want, and look for the url in the browser. It might look like `https://web.telegram.org/k/#-406703443746`. Note the `-` sign, which is included. Depending on whether it is new, either `-406703443746` will work, or prepending it with `100` so `-100406703443746` is the `channel_id`. 

5. You can use either [Zapier](https://zapier.com/apps/telegram/integrations), [Pipedream](https://pipedream.com/apps/telegram-bot-api/), [IFTT](https://ifttt.com/telegram) or [n8n](https://docs.n8n.io/integrations/builtin/app-nodes/n8n-nodes-base.telegram/#) to connect your website forms with telegram. 

6. On Pipedream I was able to make it work, using v2 markdown, whereas for Zapier I had to use HTML format, because it didn't parse markdown well. Do note, that the valid HTML elements for Telegram API are `<b>, <pre>, <a>` and `<i>` as of November 2023. 

Other hiccups I had are "forwarding" telegram messages only refers to forwarding existing telegram messages, as opposed to creating a message.

What other pain points did you discover? I created this blog-post, because I didn't find any one tutorial that helped me. So perhaps this will be useful for you.
Doctor Who? No, Doctor You via AWS Chime: A Telemedicine Adventure!
Tags: aws, healthydebate, serverless, telemedicine
Published: 2023-11-08 22:54:03

##🚀 Intro for Code Wizards
Hey Dev Wizards! Telemedicine is not just a buzzword; it's like the Gandalf of healthcare, conjuring up tech-magic to deliver health wizardry to muggles wherever they may be. When COVID-19 decided to crash our planet, telemedicine strapped on a jetpack and zoomed to the rescue. Now, with our AI pals, IoT gadgets, and mobile doohickeys, it's soaring to new heights, ready to flip healthcare on its head.

Join me on a pixel-packed adventure with AWS Chime, my sidekick in forging a telemedicine experience smoother than a buttered byte. This tale is all about my digital escapades, the dragons (challenges) I faced, and the treasure trove of solutions we unearthed. With AWS Chime's Swiss Army knife of features, we built a telemedicine platform so user-friendly, even your grandma can navigate it with ease.

Dive into this saga as we explore how AWS Chime is making telehealth cooler than the other side of the pillow, and shaping the face of future healthcare apps.

##🛠️ SaaS Sorcery with AWS Chime
#First Up: What's AWS Chime Anyway?
AWS Chime is like the Swiss Army knife for online meet-ups, video chitchats, and digital pow-wows. Born in the cloud realm of Amazon in 2017, it's a knight in shining armor for those seeking a secure and cloud-strong fortress against the dark arts of unreliable communication tools.

With Chime, you can keep your squad synced across the digital multiverse, offering a one-stop spellbook for all your conferencing calls. It's got HD vision, crystal-clear audio, screen-sharing charms, and a toolkit for devs to weave in some powerful integrations.

Chime plays nice with all your gizmos and gadgets, keeping you connected so seamlessly, you'll think it's telepathy. Its fortress is built in the cloud, making it a rockstar for telemedicine, handling sensitive chit-chats with the utmost secrecy and care.

#Where's the 'Launch Stack' Spellbook?
In the mystical scrolls below, I'll reveal the path to conjure AWS Chime with ease. But let me whisper a secret: tweak the AWS-provided CloudFormation to ditch the bloatware for your app's epic quest.

Find the 'Launch Stack' spellbook [right here](https://aws.amazon.com/pt/blogs/business-productivity/build-meeting-features-into-your-amazon-chime-sdk-messaging-application/), complete with a step-by-step enchantment to deploy the cloud magic.

Follow the ancient AWS incantations, and voilà, you'll summon a React web page. It's your canvas - paint your app's personality all over it.

#Stirring the Pot
Here's a spicy take: embedding AWS Chime is a stellar move for scrappy startups or cash-conscious enterprises. Peek at the [treasure map](https://aws.amazon.com/pt/chime/pricing/?p=pm&c=ch&z=4) to see the gold it'll cost. I've unleashed Chime in a healthcare startup's telemedicine cauldron and pitted it against a bespoke potion. Guess what? No latency trolls under this bridge, and the freedom to craft the user quest was pure alchemy!
Troubleshooting Vite Deployment Issues on Netlify
Published: 2023-11-08 22:13:26

## | tech |
Code stored on GitHub and then deployed on Netlify

## | error message |
Failed during stage "Reading and parsing configuration files"  

## | solution |
In "Build settings" enter the below configuration:
Base directory:
Package directory:
Build command: vite build
Publish directory: dist
![Build settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjos4pgvy99injepmqyb.png)
Leave the rest as is and deploy.

## | context |
One of the things that has become a prerequisite of whether or not I would continue developing an app is my ability to deploy it online. As a not-so-new-newbie to software development, I've run into several issues deploying my apps in the past, resulting in me not being able to share my work with the world. As much as I love coding, if no one can see and interact with my work, it diminishes the purpose of creating apps!

Yes, I love to be dramatic, but wouldn't you agree that it's just as satisfying to share your apps with people? That's why after setting up the basic structure for this app, I tested the deployment right away but had no success.

I tried several different configurations for the deployment but failed, and when I was eventually able to deploy the web app, it loaded as a blank site. I knew it had something to do with Vite and the configurations on Netlify, and after a lot of trial and error, I found the correct config.

Other than reading the error messages on your platform of choice for deployment, try these steps the next time you encounter deployment issues:
1) Open the web inspector on the browser you are using to view the website or web app. Here I used Chrome, my preferred browser, but I also recommend Firefox.
2) Go to the console tab, or just click on the error icons that show up on your web inspector, if any, and it will open the console tab.

![Chrome web inspector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pz7o6f6z7t6fa8u6ww5x.png)
3) Google the error message and read the first few search results that come up.

Here is a log of all the failed deployments. To me, all the failed attempts are just part of a journey to the eventual shiny green "Published" status:

![failed deployments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lofwtn2d12u3awyvbk6n.png)

Have you encountered similar deployment challenges in your projects? Share your experiences!

Xoxo,
Eva
How to install Linux Mint as MBR? (And resolve this pesky kernel panic upon boot in a fresh installation)
Tags: howto, tutorial, linux, hplaptop
Published: 2023-11-08 22:02:31

In old computers (2015-2016) and especially in HP Pavilion 17-g015dx. I get occational Kernel Panics as I posted in following fora:

- https://forums.linuxmint.com/viewtopic.php?p=2393976#p2393976
- https://linux-user.gr/t/mysthria-symperifora-mh-ekkinhsh-kai-kernel-panic-enw-o-diskos-den-echei-themata/5133

And A solution in my case is to setup the linux mint as mbr with the following partitions:

- MBR 1MB
- 1GB for /boot using ext4 filesystem
- The rest of disk as / partition using ext4 as well.

In order to do that I followed these steps: (Look karefully in images)

# Step1
Selecting manual partitioning upon installation

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

Then we create a new partition table.

# Step2 Create MBR partition

In order to do that we need to use the following settings:

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

# Step 3 Set 1GB /boot partition

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


# Step 4 Set / (aka root) partition

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

# Step 4 Continue rest of installation

After selecting partions and continuing the rest of installations we the following error will occur. In is an expected one saying that installation is not a GPT one. 

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

Keep calm and press continue. That will continue to normal install procedure.
Is Next.js The Best Framework in 2023?
Tags: webdev
Published: 2024-06-28 15:44:58

---
title: Is Next.js The Best Framework in 2023?
published: true
date: 2023-11-08 21:02:12 UTC
tags: WebDevelopment
canonical_url: 
---

Navigating the ever-changing world of web development can be a whirlwind, but having the right tools makes all the difference. In 2023, the Next.js framework continues to rise to the top, making web building tasks a breeze compared to other frontend frameworks. It takes the goodness of React library and kicks it up a notch […]

The post [Is Next.js The Best Framework in 2023?](https://blog.nextideatech.com/is-next-js-the-best-framework-in-2023/) appeared first on [Next Idea Tech Blog](https://blog.nextideatech.com).
GPT-4 Vision API Is a Game Changer
Tags: webdev
Published: 2024-06-28 15:45:04

---
title: GPT-4 Vision API Is a Game Changer
published: true
date: 2023-11-08 20:47:09 UTC
tags: WebDevelopment
canonical_url: 
---

gpt-4-vision-preview is the latest and (arguably) the most powerful model released on November 7 2023 during OpenAI’s DevDay presentation and it has been the talk of social media merely hours after it became available. Developers have already created apps that actively recognize what’s happening during a web live stream in real-time. Or this person that […]

The post [GPT-4 Vision API Is a Game Changer](https://blog.nextideatech.com/gpt-4-vision-api-is-a-game-changer/) appeared first on [Next Idea Tech Blog](https://blog.nextideatech.com).
TOP - JavaScript Course
Tags: hdtop
Published: 2023-11-08 20:42:41

## Introduction
- ~~How This Course Will Work~~
- ~~A Quick Review~~

## Organizing Your Javascript Code
- ~~Organizing Your Javascript Code Introduction~~
- Objects and Object Constructors
- Project: Library
- Factory Functions and the Module Pattern
- Project: Tic Tac Toe
- Classes
- ES6 Modules
- Webpack
- Project: Restaurant Page
- OOP Principles
- Project: Todo List

## JavaScript in the Real World
- Linting
- Dynamic User Interface Interactions
- Form Validation with JavaScript
- What is ES6?

## Asynchronous JavaScript and APIs
- JSON
- Asynchronous Code
- Working with APIs
- Async and Await
- Project: Weather App

## A Bit of Computer Science
- A Very Brief Intro to CS
- Recursive Methods
- Project: Recursion
- Time Complexity
- Space Complexity
- Common Data Structures and Algorithms
- Project: Linked Lists
- Project: Binary Search Trees
- Project: Knights Travails

## Intermediate Git
- A Deeper Look at Git
- Working with Remotes
- Using Git in the Real World

## Testing JavaScript
- Testing Basics
- Project: Testing Practice
- More Testing
- Project: Battleship

## Finishing Up with JavaScript
- Conclusion