teleren/devto huggingface dataset:
My Very First Post
Tags: opensource, osd600, senecacollege, programming
Published: 2023-09-09 00:28:57


Hello there! my name is Pavel.
 
### **About Me:**

I am a Computer Programming student at Seneca College, currently working in Toronto, Canada. Some of the things I enjoy include creating digital art and modeling in Blender, even though I am new to these activities. I hope to develop them into long-term hobbies.
## Reasons to Join the Course

This term, I am enrolled in a course called Open Source Development (OSD600), which is designed to help students take their first steps into the world of Open Source. My primary motivation for joining this course is self-improvement. I recently realized that throughout my studies, I have primarily been reading and writing code on my own, in my own way. However, I've come to understand that collaboration is crucial, and this skill cannot be enhanced solely by working on individual projects. If I wish to contribute effectively, I need to learn how to collaborate effectively.

Additionally, I've developed an interest in observing how experienced individuals tackle and solve complex problems.

## Objectives

My plans for this term include:

- Making a meaningful contribution to a project that I care about. 
- Embarking on my own open-source project, [tiny_browser_engine](https://github.com/pbelokon/tiny_browser_engine), aimed at introducing people to the fundamentals of browser engines through incremental development in small sections.

These plans are subject to change and expansion based on the lessons I will learn throughout the next four months.

### **My First Fork**

While searching for interesting projects on GitHub, I stumbled upon something I've been looking for a resource to improve my Rust skills. The repository is called [rustlings](https://github.com/rust-lang/rustlings). I've been planning to work on a small project with a friend, a Terminal Emulator written in Rust called [termionus](https://github.com/pbelokon/termionus). However, I've been postponing it for a while due to my limited knowledge of Rust.

The name "rustlings" says it all; it's a repository designed to assist new Rust developers 🦀 in becoming comfortable with reading and writing Rust code through a series of small exercises.

## Conclusion

Without anything more to add, I am looking forward to learn more about Open Source Development
React DashBoard with bar chart and dounut chart and next-auth authentication
Tags: authentication
Published: 2023-09-09 11:23:57

---
title: React DashBoard with bar chart and dounut chart and next-auth authentication
published: true
date: 2023-09-09 00:14:00 UTC
tags: Authentication
canonical_url: https://reactjsexample.com/react-dashboard-with-bar-chart-and-dounut-chart-and-next-auth-authentication/
---

# React Drag Text App
 ![React DashBoard with bar chart and dounut chart and next-auth authentication](https://reactjsexample.com/content/images/2023/09/Code_2023-09_11-09-44.jpg)

React DashBoard with bar chart and dounut chart and next-auth authentication

[View Demo](https://chart-dashboard-three.vercel.app/)[View Github](https://github.com/sammed-21/ChartDashboard?ref=reactjsexample.com)

## Getting Started

1. Clone this repository: `https://github.com/sammed-21/ChartDashboard.git`
2. Navigate to the project directory: `cd ChartDashboard`
3. Install dependencies: `npm install`
4. Run the development server: `npm run dev`
5. Open your browser and visit: `[http://localhost:3000/](http://localhost:3000/)
Image to text (OCR) application developed with React
Tags: ocr, imageprocessing
Published: 2023-09-09 11:23:47

---
title: Image to text (OCR) application developed with React
published: true
date: 2023-09-09 00:13:00 UTC
tags: OCR,ImageProcessing
canonical_url: https://reactjsexample.com/image-to-text-ocr-application-developed-with-react/
---

# 📷 Image to Text
 ![Image to text (OCR) application developed with React](https://reactjsexample.com/content/images/2023/09/Code_2023-09_11-08-08.jpg)

This application allows you to extract text from images. You can perform this operation by dragging and dropping images, selecting files, or pasting copied images. It also supports recognizing text in different languages. You have the flexibility to change the order of images within their container.

Bu uygulama resimlerden metin çıkarmanıza olanak tanır. Resimleri sürükleyip bırakarak, dosya seçerek veya kopyaladığınız görseli yapıştırarak işlemi yapabilirsiniz. Farklı dillerdeki metinleri tanıyabilirsiniz. Resim sırasını yer aldıkları konteyner içerisinde değiştirebilirsiniz.

## 🌐 Explore the Application

You can explore this application online by [clicking here](https://hasanayas.github.io/image-to-text/).

Bu uygulamayı çevrimiçi olarak [buradan inceleyebilirsiniz](https://hasanayas.github.io/image-to-text/).

## 👨‍💻 Development

This project is developed using [React](https://reactjs.org/) and [Tesseract.js](https://tesseract.projectnaptha.com/). You can clone the project to examine and enhance the code.

Bu proje, [React](https://reactjs.org/) ve [Tesseract.js](https://tesseract.projectnaptha.com/) kullanılarak geliştirilmiştir. Kodu incelemek ve geliştirmek için projeyi klonlayabilirsiniz.

```
git clone https://github.com/hasanayas/image-to-text.git
cd image-to-text
npm install
npm start
```

## GitHub

[View Github](https://github.com/hasanayas/image-to-text?ref=reactjsexample.com)
A simple tool to replicate Midjourney's inpainting modal interface
Tags: tool
Published: 2023-09-09 11:23:41

---
title: A simple tool to replicate Midjourney's inpainting modal interface
published: true
date: 2023-09-09 00:09:00 UTC
tags: Tool
canonical_url: https://reactjsexample.com/a-simple-tool-to-replicate-midjourneys-inpainting-modal-interface/
---

# Midjourney Inpainting UI
 ![A simple tool to replicate Midjourney's inpainting modal interface](https://reactjsexample.com/content/images/2023/09/Code_2023-09_11-04-11.jpg)

A simple tool to replicate Midjourney’s inpainting(aka. Vary(Region)) modal interface. Pass through an image, draw a polygon, then you get a base64 mask image for inpainting. This repository leverages the `lasso-canvas-image` library with React to let users lasso (or select) portions of an image and convert the selected area into base64-webp black-white mask image.

## Live Demo

[https://goapi-ai.github.io/Midjourney-Inpainting-UI/](https://goapi-ai.github.io/Midjourney-Inpainting-UI/?imageUrl=https://raw.githubusercontent.com/Licoy/ChatGPT-Midjourney/master/docs/images/cover.png)

## Features

- The application renders the image in a canvas with the non-selected area filled in black and the lasso-selected area rendered in white.
- It supports loading images by entering the image URL directly into the application’s URL input box.
- It also supports loading images by passing the image URL as a query parameter in the format `?imageUrl= https://xxx.png`.
- The selected white area of the image is then converted into base64-webp format.
- User will be able to see the generated base64 string and copy it to clipboard.
- Mobile compatible(WIP)

## Installation & Running Locally

Follow the below steps to get the app running on your local machine.

1. Clone the repository:

2. Navigate into the cloned repository:

3. Install the necessary dependencies:

4. Start the application:

## Usage & Workflow

1. Start the app. You can load an image by either entering its URL directly into the URL input box in the app or by appending the image URL as a query parameter to the app’s URL in the format `?imageUrl=https://xxx.png`.

2. The image is rendered onto a canvas. You can use the lasso tool to select a portion of the image. The area outside the lasso selection is filled with black, and the selected area is rendered in white.

3. The selected portion of the image (the white part) will be converted into base64-webp format. The base64-webp string is then displayed below the image for you to copy.

## Projects in Action

This tool is trusted by projects below:

## GitHub

[View Github](https://github.com/goapi-ai/Midjourney-Inpainting-UI?ref=reactjsexample.com)
Starting my Journey in Open Source
Tags: beginners, python, opensource
Published: 2023-09-09 00:08:55

Hello everyone! My name is Muzzammil and I'm currently in my 6th semester studying Computer Programming & Analysis (CPA) at Seneca Polytechnic, located in Toronto, Canada. 

This semester I have decided to enroll myself into an Open Source Development course. To me, open source development is a great way to learn new skills in a practical manner, meet new people/communities, and overall become a better developer.

By the end of this course, I hope to learn the necessary skills required to be able to successfully contribute to open source projects. Additionally, after viewing several trending GitHub repositories, I can tell that documenting effectively is important not only for yourself, but also for others who would view your repositories, so I would like to improve my skills on writing detailed documentation on my projects and the work that I do. 

Stepping into the world of open source feels quite intimidating, but I'm hoping to get out of my comfort zone and learn as much as I can. I am not sure what kinds of projects I would like to contribute to, but learning Python has been on my radar for quite some time, and would love the opportunity to improve my skills with Python while contributing to an open source project! 

As I was researching on a project repo that interested me, I happened to stumble upon [Rift](https://github.com/morph-labs/rift), which is an "open-source infrastructure for AI-native development environments". Rift is essentially a tool that would be able to generate new code, edit existing code, or provide you with suggestions to improve your code. There are several tools like this already out that can work with IDE's, and I believe that these auto-generative coding tools will be big in the future, so I'm looking forward to contributing to a project like this!

This is it for now. See you in the next post!
A React application that generate summaries of text documents
Tags: apps, document, text
Published: 2023-09-09 11:23:36

---
title: A React application that generate summaries of text documents
published: true
date: 2023-09-09 00:07:00 UTC
tags: Apps,Document,Text
canonical_url: https://reactjsexample.com/a-react-application-that-generate-summaries-of-text-documents/
---

# AI Summarizer [🔗](https://ai-summarizer-olive.vercel.app/)
 ![A React application that generate summaries of text documents](https://reactjsexample.com/content/images/2023/09/Code_2023-09_11-02-04.jpg)

AI Summarizer is a web application built with React and Vite that uses natural language processing (NLP) techniques to generate summaries of text documents. It includes Redux Toolkit Query for API calls and a summarize history feature for up to 5 recent searches.

```
## Installation

To use AI Summarizer locally, follow these steps:

1. Clone the repository:
   ```bash
   git clone https://github.com/ChandanSahu98/AiSummarizer.git
```

1. Navigate to the project directory:

2. Install dependencies:

3. Start the development server:

## Usage

1. Provide the text you want to summarize in the web interface.
2. AI Summarizer will process the text and generate a summary for you.
3. You can access the live version of AI Summarizer here: [AI Summarizer on Vercel](https://ai-summarizer-olive.vercel.app/)

## Features

- Summarize lengthy text documents quickly.
- Customize the length of the summary.
- User-friendly web interface built with React.
- Fast development environment with Vite.
- Utilizes advanced NLP techniques for accurate summarization.
- **Redux Toolkit Query** : Seamless API data fetching and state management.
- **Summarize History** : Keep track of up to 5 recent searches for easy reference.

## Screenshot

![A React application that generate summaries of text documents](https://user-images.githubusercontent.com/52382395/265516496-46380b87-ecf1-4dc3-84bb-fe772dd9d49a.png)

## Contributing

If you’d like to contribute to AI Summarizer, please follow these steps:

1. Fork the repository on GitHub.
2. Clone your forked repository to your local machine.
3. Create a new branch for your feature or bug fix: `git checkout -b feature-name`.
4. Make your changes and commit them with descriptive commit messages.
5. Push your changes to your fork on GitHub: `git push origin feature-name`.
6. Open a pull request on the original repository, describing your changes.

## GitHub

[View Github](https://github.com/ChandanSahu98/AiSummarizer?ref=reactjsexample.com)
Simple TODO List APP with React
Tags: todo
Published: 2023-09-09 11:23:30

---
title: Simple TODO List APP with React
published: true
date: 2023-09-09 00:04:00 UTC
tags: Todo
canonical_url: https://reactjsexample.com/simple-todo-list-app-with-react/
---

## React Live Coding Interview – TO DO LIST APPLICATION
 ![Simple TODO List APP with React](https://reactjsexample.com/content/images/2023/09/Code_2023-09_10-58-46.jpg)

[To follow this React tutorial](https://ibaslogic.com/blog/react-tutorial-for-beginners/)

### Clone the starter project

You can download or clone this project by running this command from your terminal:

```
git clone https://github.com/matrix-2023/live-coding-todo-list-app.git

```

This will create a directory in the name of the project folder.

Once you have the project files and folders bootstrapped, open it with your text editor.

Next, switch inside the project directory and run:

```
npm install

```

This will install all the necessary dependencies in the local `node_modules` folder.

Finally, start your development server by running:

```
npm start

```

You should see the app in your browser address bar at [http://localhost:3000](http://localhost:3000)

![Simple TODO List APP with React](https://user-images.githubusercontent.com/143998226/265387866-63355203-9e79-426d-9d04-ce8dfbca9aa7.png)

## GitHub

[View Github](https://github.com/matrix-2023/live-coding-todo-list-app?ref=reactjsexample.com)
Cleanup Local Git Branches
Tags: git, cli
Published: 2023-09-09 20:38:03

---
title: Cleanup Local Git Branches
published: true
date: 2023-09-09 00:00:00 UTC
tags: git, cli
canonical_url: https://blog.waysoftware.dev/blog/cleanup-local-git/
---

If you've been developing on a project for a while, you are probably aggregating an ungodly amount of git branches locally. Here is a one liner to cleanup your merged branches:

```
git branch --merged origin/master | grep -v 'master' | xargs git branch -d

```

If your trunk / target branch is different, you can modify the command as needed, replacing the occurrences of `master` with your target branch. Let's step through the commands and see how they compose together.

## List Merged Branches

Here we're interested in local branches which have been merged into our production branch on the remote git repository.

```
git branch --merged origin/master
continuous-deployment
master
pg-migrate

```

`continuous-deployment` and `pg-migrate` are two feature branches that I still have locally even though they are now in production. `master` is my local copy of master, which I am happy to keep, which leads us into step 2, filtering out the branch(es) you want to keep.

## Filter The Results

I want to keep my local copy of `master`. To do so, we can leverage `grep` with the `-v` flag to do an inverse match on `master`. We are saying to match on everything _except_ `master`. By using the unix pipe operator (`|`) we can chain the two commands together. Briefly explained, a unix pipe takes the standard output (stdout) of one command and pipes it in as the standard input (stdin) of another. So we are executing `grep -v 'master'` against the output of:

```
continuous-deployment
master
pg-migrate

```

which gives the results:

```
continuous-deployment
pg-migrate

```

Everything but `master`. Perfect!

## Delete The Branches

The final piece of the puzzle is to pipe these new results into `xargs git branch -d`. To delete a local git branch we can run

```
git branch -d <your-branch>

```

so this is the meat and potatoes of our final command. Since the stdout that we are currently working with is a list where each git branch is on a new line, we can use `xargs` to allow us to execute `git branch -d` for each item (branch) in that list. What this looks like under the hood is:

```
git branch -d continuous-deployment
git branch -d pg-migrate

```

## Piecing It All Together

Putting all the pieces together and executing the one liner

```
git branch --merged origin/master | grep -v 'master' | xargs git branch -d

```

we get

```
Deleted branch continuous-deployment (was 86cfe6d).
Deleted branch pg-migrate-cleanup (was 433f4d6).

```

As you can see, each local branch was deleted - just what we were hoping for. Hopefully that will help keep your local repositories a little bit cleaner. This could also easily become a shell function for convenience's sake but I'll leave that as an exercise for the reader.
Detecting Fraud with Graph Databases:
Tags: agedb, postgres, database, opensource
Published: 2023-09-08 23:53:00

Graph databases proves highly effective in identifying fraudulent activities within financial transactions due to their capability to adeptly model and query intricate relationships among entities and transactions. In this article, we will delve into the optimal approaches and illustrative instances for the detection of fraud using graph databases.

## Data Modeling Best Practices
When constructing a data model for financial transaction data in a graph database, it's essential to adhere to these best practices:

- Identify critical entities: Recognize the pivotal entities within the financial transaction network, which may encompass customers, merchants, accounts, and transactions.
- Specify node and edge attributes: Define properties for nodes and edges that can capture vital characteristics of entities and connections, including details like transaction amounts, timestamps, and locations.
- Maintain uniform naming conventions: Implement consistent naming conventions for nodes, edges, and properties to enhance the clarity and comprehensibility of the data model.

## Querying Best Practices
Once you have structured financial transaction data in a graph database, you can employ the following recommended approaches when querying to unearth fraudulent activities:

- Leverage graph algorithms: Utilize graph algorithms like PageRank and community detection to pinpoint nodes and edges that may be indicative of involvement in fraudulent behaviors.
- Employ the Cypher query language: Make use of the Cypher query language, specifically designed for proficient graph database querying, to compose queries that are both effective and efficient.
- Enhance query efficiency: Elevate query performance by diminishing the volume of nodes and edges retrieved in each query and by establishing caches for frequently accessed data.

## Examples
Many examples of fraud detection systems powered by graph databases have been successfully deployed. Here are a few notable examples:

- PayPal: PayPal employs a graph database to create models encompassing customer and merchant interactions, account activities, and transaction histories, enabling the identification of fraudulent activities.
- Mastercard: Mastercard utilizes a graph database to construct models that represent connections between cardholders and merchants, transaction trends, and geographical data, facilitating the detection of fraudulent transactions.
- IBM: IBM harnesses a graph database to build models that capture network activities, user behaviors, and security-related events, empowering the detection of cyber threats and fraudulent activities.
Caption This! 🤔💭
Tags: discuss, watercooler
Published: 2023-09-08 23:47:17

Can you come up with the wittiest caption to explain what's happening here?


![A bunch of gots looking at you in the dark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nap2lys15180u1o6bjj.jpg)



Follow the DEVteam for more online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Graph Databases in Social Network Analysis
Tags: apacheage, opensource, database, postgres
Published: 2023-09-08 23:46:33

Graph databases offer an optimal solution for delving into the realm of social network analysis, enabling the efficient representation and querying of intricate connections among individuals and groups. In this article, we will delve into the most effective methods and resources for harnessing graph databases in the context of social network analysis.

## Best Practices for Constructing Data Models
When working with graph databases to create models for social network data, adhering to these recommended guidelines is crucial:

- Identify the key entities
- Define node and edge properties
- Use consistent naming conventions

## Best Practices for Querying
- Use graph algorithms
- Use Cypher query language
- Optimize query performance

## Social Network Analysis Tools
Numerous tools exist for examining social networks through the utilization of graph databases. Here are a few well-recognized options:

- Gephi: An exploration and visualization platform suitable for a wide range of network types, including social networks.
- Cytoscape: A platform tailored for intricate network analysis and visualization, with a particular emphasis on biological and social networks.
- Neo4j Graph Data Science Library: A comprehensive library comprising algorithms and utilities for the examination of extensive graph data, encompassing social networks.
- Apache AGE: An extension compatible with PostgreSQL, enabling the construction of graph databases using relational database foundations.
Integration with Notion API
Tags: notion, api, node
Published: 2023-09-08 23:04:45

---
title: Integration with Notion API
published: true
tags: ['notion', 'api', 'node']
canonical_url: https://sevic.dev/notes/notion-api-nodejs/
---

[Notion](https://notion.so) is a versatile workspace tool combining note-taking, task management, databases, and collaboration features into a single platform.

It also supports integration with Notion content, facilitating tasks such as creating pages, retrieving a block, and filtering database entries via [API](https://developers.notion.com/reference/intro).

### Prerequisites

- Notion account
- Generated [Integration token](https://www.notion.so/my-integrations) (Settings & Members &rarr; Connections &rarr; Develop or manage integrations &rarr; New integration)
- Notion database ID (open database as full page, extract database ID from the URL (`https://notion.so/<USERNAME>/<DATABASE_ID>?v=v`))
- Added Notion connection (three dots (`...`) menu &rarr; Add Connections &rarr; choose created integration)
- `@notionhq/client` package installed

### Integration

Below is an example of interacting with Notion API to create the page (within the chosen database) with icon, cover, properties, and child blocks.

```js
const { Client } = require('@notionhq/client');

const notion = new Client({ auth: process.env.NOTION_INTEGRATION_TOKEN });

const response = await notion.pages.create({
  parent: {
    type: 'database_id',
    database_id: process.env.NOTION_DATABASE_ID,
  },
  icon: {
    type: 'emoji',
    emoji: '🆗',
  },
  cover: {
    type: 'external',
    external: {
      url: 'https://cover.com',
    },
  },
  properties: {
    Name: {
      title: [{
        type: 'text',
        text: {
          content: 'Some name',
        },
      }],
    },
    Score: {
      number: 42,
    },
    Tags: {
      multi_select: [{
        name: 'A',
      }, {
        name: 'B',
      }],
    },
    Generation: {
      select: {
        name: 'I',
      },
    },
    // other properties
  },
  children: [{
    object: 'block',
    type: 'bookmark',
    bookmark: {
      url: 'https://bookmark.com',
    },
  }],
});
```

Check out [Sparxno](https://sparxno.com) for more Notion-related content.