teleren/devto huggingface dataset:
Don't Roll Your Own
Tags: buildinpublic, softwareengineering, github, vite
Published: 2023-06-29 04:47:57

> Use a modern build environment to scaffold (bootstrap) your new projects.


## Project scaffolding

When starting a new project, you can ***roll-your-own*** application build process, or start with where the general tech community has migrated towards. I hesitate to use the word "standard" build process as it has an overloaded, heavy-handed connotation.


![standards-xkcd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99mxhjtreu9ivnvvsh7u.png)

Instead of "standard", I prefer the term "adopted". The open-source community has adopted modern build environment practices. Don't get me wrong, we need [web standards](https://www.w3.org/), our beloved [ECMA-262](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) maintained by [TC39](https://www.ecma-international.org/technical-committees/tc39/), [IETF RFC 9293 - Transmission Control Protocol (TCP)](https://www.ietf.org/rfc/rfc9293.html), and many others. Standards bodies help pave the path for interoperability across industries.

Tomorrow, I will provide my chosen build environment for the [hackathon](https://dev.to/builditdeploy/why-am-i-posting-to-dev-now-hackathon-1p8h).

---

Comic "Standards" by [xkcd](https://xkcd.com/927/)

Photo by <a href="https://unsplash.com/@thisisengineering?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">ThisisEngineering RAEng</a> on <a href="https://unsplash.com/photos/edYMvwWsFNY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
How To Begin with Angular Development?
Tags: beginners, angular, programming, tutorial
Published: 2023-06-29 04:37:44

To begin with Angular development, you can follow these steps

- 
[Prerequisites to Learn Angular](https://dev.to/iamvktechie/prerequisites-to-learn-angular-10ob)

- 
[Angular Project : Setting up the local environment and workspace](https://dev.to/iamvktechie/angular-project-setting-up-the-local-environment-and-workspace-21p6)
[VS Code Extensions For Angular Development](https://dev.to/iamvktechie/top-vs-code-extensions-for-angular-developers-414n)

- 
[Create an initial Angular application](https://dev.to/iamvktechie/create-an-initial-angular-application-d8j)

- 
[Building blocks of Angular](https://dev.to/iamvktechie/what-are-the-building-blocks-of-angular-18h6)





Remember to refer to the official Angular documentation whenever you have questions or need guidance. Happy coding!
Centering a div inside his sibling div using tailwind css.
Tags: tailwindcss, div, position, flexbox
Published: 2023-06-29 04:04:13

`<div class="relative">
  <div>
    <img src="your-image.jpg" alt="Your Image">
  </div>
  <div class="absolute inset-0 flex items-center justify-center">
    <!-- Contents of the second div -->
  </div>
</div>
`
PDF Query using OpenAI API
Tags: openai, chatgpt, pdf, dataretrieval
Published: 2023-06-29 04:03:44

---
title: PDF Query using OpenAI API
published: true
description: A simple solution for data retrieval from large PDF files
tags: openai, chatgpt, pdf, dataretrieval
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-29 04:02 +0000
---
## Context
The OpenAI API introduces a new programmable approach for retrieving data from a raw text file using AI. We can easily create a prompt by combining raw text content and the data fields we wish to extract from the text. We then send this prompt to OpenAI in string format. By using a well-crafted prompt, we can also specify the desired response format, such as JSON or YAML, which greatly enhances the convenience of the extraction process. A great example exemplifying this is as follows:

Prompt:
```
Want to extract fields: "PO Number", "Total Amount" and "Delivery Address".
    Return result in JSON format without any explanation. 
    The PO content is as follows:
    %s
```
Note that the `%s` will be replaced by the raw text content and here is a sample output:
```
{
  "PO Number": "PO-003847945",
  "Total Amount": "1,485.00",
  "Delivery Address": "Peera Consumer Good Co.(QSC), P.O.Box 3371, Dohe, QAT"
}
```

## Problem
There is a limitation on the number of tokens that can be sent to the OpenAI API, and this applies not only to OpenAI but also to other LLM models. To put it simply, tokens can be thought of as words. For example, the token limit for `gpt-35-turbo` is 4096 tokens. That means the above approach doesn't work for the large text file (e.g. a file with 100 pages or even less)

## Solution
- Split the file into smaller chunks that are smaller than the token limitation.
- Utilize vector databases such as `FAISS` or `Chroma` to store these chunks.
- Use LLM to search for related chunks in the database for each data retrieval request and summarize the information to obtain the final result.

Refer to [chat.py](https://github.com/thoqbk/pdf-query) the details

## Run sample code
Prerequisites:
- Python 3.6+
- [Virtualenv](https://docs.python.org/3/library/venv.html)

Open terminal, move to the root directory and run the folllowing commands:
```
python -m venv .env
source .env/bin/activate
pip install -r /path/to/requirements.txt
```
Note that,
- the first command is only needed to run once to create `.env` folder in the root directory for the same code
- the second command is to activate the virtual env, need to run at the beginning of the test session
- the last command is to install dependencies, need to run once unless there're changes in dependencies

Next steps:
- update `chat.py` to add your open-ai API key
```
os.environ["OPENAI_API_KEY"] = "YOUR-OPEN-AI-API-KEY"
```
- run the code and ask questions
```
python chat.py 
Enter a query: what is the name of the document?
The name of the document is the "Microsoft Partner Agreement".
Enter a query: what is the legal entity in this document?
The legal entity in this document is Microsoft.
```

## Source code
[pdf-query](https://github.com/thoqbk/pdf-query)
From XMLHttpRequest to Fetch API: How Fetch became the Way Forward for JS Development
Tags: javascript, beginners, programming, webdev
Published: 2023-06-29 03:50:21

### Hello there ✌
This week I have been reading about the "recently" added Fetch API in NodeJS, which got me thinking about how we moved from XMLHttpRequests to the Fetch API. As developers, I really think we should understand the history behind the things we use daily.

XMLHttpRequest (XHR) has long been the go-to choice for making asynchronous HTTP requests. But, with the introduction of the Fetch API, a newer alternative has emerged. We will now explore why the Fetch API is considered the way forward for JavaScript development, and why it has quickly gained popularity among us, web developers.

## Drawbacks of XMLHttpRequests
XHR, while functional, comes with a few limitations. Its syntax is complex and often requires extensive boilerplate code. Beyond that, XHR responses are based on event listeners, leading to the famous callback hell and unreadable code. The Fetch API addresses these drawbacks, providing a simpler and more intuitive approach to handling network requests.

## Simplicity of the Fetch API
I guess we all can agree that ES6 changed the internet, presenting us with many new resources, including the Fetch API. With that said, one of the major advantages of the API is its simplicity. The API is built around the concept of promises, allowing for cleaner and more readable code. Now we can easily chain operations using the .then() method, making the code flow more intuitive and way easier to understand.

## Community adoption
The Fetch API has gained significant popularity within the JavaScript community. It is widely used in modern frameworks and libs, and extensive resources and documentation are available for developers to explore and learn from. By using the Fetch API, 
devs jump right into a sharing community that's all about working together.

## Conclusion
There are tons of reasons for why we moved to the Fetch API, such as standardization, CORS support, async/await and others. The API represented a significant step forward for JavaScript networking, offering a simpler, more flexible, and future-proof approach compared to the traditional XMLHttpRequest. Its seamless integration with promises, improved syntax, and robust support for modern web standards make it the preferred choice for making asynchronous HTTP requests. By using the Fetch API, developers can unlock the full potential of JavaScript networking and build more reliable, and scalable apps for the web.

I truly love the history behind all this revolution we're living, and I really enjoyed writing this. I hope you like the read as well! ❤
Find File by Name w/ Linux CLI
Tags: find, file, linux, cli
Published: 2023-06-29 03:22:37

---
title: Find File by Name w/ Linux CLI
published: true
description: How to recursively find a file by name in Linux.
tags: find, file, linux, cli
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-29 03:21 +0000
---

```bash
find . -name "foo*"
```
Batch Convert MP3 to MP4
Tags: mp3, mp4, ffmpeg, batch
Published: 2023-06-29 03:04:18

---
title: Batch Convert MP3 to MP4
published: true
description: Batch extract MP3 audio from a directory of MP4 videos in a single terminal command with ffmpeg.
tags: mp3, mp4, ffmpeg, batch
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-29 02:52 +0000
---

```shell
for i in *.mp4; do ffmpeg -i "$i" "${i%.*}.mp3"; done
```
C++, Static Object - Singleton pattern
Tags: static, singleton, cpp
Published: 2023-06-29 01:53:31

For many reasons, we may want only one instance of a class to exist throughout the lifetime of an application. This is where the Singleton pattern comes

```cpp
class mSingleObj {
private:
    static shared_ptr<mSingleObj> instance;
    string description = "this is single instance object";
    // private constructor so that we can not create an instance
    mSingleObj(){}
    // private copy constructor and assignment operator
    //  previous version of c++
    mSingleObj(const mSingleObj&){}
    mSingleObj& operator=(const mSingleObj&) {}
    // move constructor and move assignment operator
    // >= c++11 we can delete
    mSingleObj(mSingleObj&& ) = delete;
    mSingleObj& operator=(mSingleObj&& ) = delete;
public:
    //the only one way to to get object
    static shared_ptr<mSingleObj> getInstance() {
        return instance;
    }
    void display() {
        cout << description << endl;
    }
    ~mSingleObj() { cout << "Destructor called only one..." << endl; }
};
//static object need to be initialized outside the class defination
shared_ptr<mSingleObj> mSingleObj::instance(new mSingleObj());

void testSingletonObj() {    
    shared_ptr<mSingleObj> sObj = mSingleObj::getInstance();
    sObj->display();
    shared_ptr<mSingleObj> other_sObj = mSingleObj::getInstance();
    other_sObj->display();
    //check whether objects are the same
    cout << "(sObj) Address of managed object: " << sObj.get() << std::endl;
    cout << "(other_sObj) Address of managed object: " << other_sObj.get() << std::endl;
}
```
Important things:
- the private constructor 
- a way to get the object (because we cant not create an object of class with private constructor)
- the private Copy constructor and Copy assignment operator

But in my experience, I really dislike the Singleton pattern when dealing with unit tests.
Sharing API endpoints across client and server
Tags: express, api, react
Published: 2023-06-29 01:14:12

Recently I was working on a demo project with React/TypeScript as front-end (running on port 5173) and Express as backend (running on port 5000). Front end codes is built into a static folder and served by Express.

I'm using Vite, and I've set up a proxy inside Vite, so front end codes can just use `/api/2fa/enable` instead of needing to pass the whole server url like `http://localhost:5000`.

```javascript
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
      },
    },
  },
});
```

Although there is still a tiny issue I want to improve, that is a single API endpoint will first be defined by server and then called by client, something like this:

```javascript
// ./server/server.js
// Two-Factor Authentication
app.post('/api/2fa/enable', enableTwoFactorAuth);
app.post('/api/2fa/verify', verifyTwoFactorAuth);
app.post('/api/2fa/disable', disableTwoFactorAuth);
app.post('/api/2fa/login', loginWithTwoFactorAuth);
```

```javascript
// ./client/TwoFactorAuth.tsx
// ...
const fetchQRCode = async () => {
  const res = await fetch('/api/2fa/enable', {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username: user.username }),
  });
  // ...
};
```

It works ok, but it would be nice if we can creat a shared `apiRoutes.json` file to store all API routes which then can be consumed by client and server, and that is exactly what I did, and it does make things a bit easier whenever I want to update the endpoint as I only need to update `apiRoutes.json` file once.

```json
// ./shared/apiRoutes.json
{
  "TWO_FACTOR_AUTH_ENABLE": "/api/2fa/enable",
  "TWO_FACTOR_AUTH_VERIFY": "/api/2fa/verify",
  "TWO_FACTOR_AUTH_DISABLE": "/api/2fa/disable",
  "TWO_FACTOR_AUTH_LOGIN": "/api/2fa/login"
  // ... other routes
}
```

```javascript
// ./server/server.js
// As of the time I wrote this blog, importing JSON modules is an experimental
// feature and might change at any time
import apiRoutes from "./shared/apiRoutes.json" assert { type: "json" };

// Two-Factor Authentication
app.post(apiRoutes.TWO_FACTOR_AUTH_ENABLE, enableTwoFactorAuth);
app.post(apiRoutes.TWO_FACTOR_AUTH_VERIFY, verifyTwoFactorAuth);
app.post(apiRoutes.TWO_FACTOR_AUTH_DISABLE, disableTwoFactorAuth);
app.post(apiRoutes.TWO_FACTOR_AUTH_LOGIN, loginWithTwoFactorAuth);
```

```javascript
// ./client/TwoFactorAuth.tsx
// ...
import apiEndpoints from "../../shared/apiRoutes.json";

const fetchQRCode = async () => {
  const res = await fetch(apiEndpoints.TWO_FACTOR_AUTH_ENABLE, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username: user.username }),
  });
  // ...
};
```
Unsplash photos not displaying? You might have a "hotlinking" issue.
Tags: unsplash, api, howto, webdev
Published: 2023-06-29 01:11:07



> Wait, what? Where all my photos from Unsplash have gone?

I hear you, I hear you...

So, I experiment a lot using [CodePen](https://codepen.io/).

My usual go-to place for gorgeous stock photography I can use on my code is [Unsplash](https://unsplash.com/), the "The internet’s source for visuals".

So far so good. I used to search for the right photo(s) and use a formula, that looked something like this:

```
src='https://source.unsplash.com/' + photoID + '/500x320'
```
This used to work, up until last week I checked, but all my Pens are failing miserably, with a status code of 500 and I have a strong suspicion yours is too, that why you're here.

I'm not sure when this happened, and why, if you do, please leave me a comment.

With a quick search I found out that **hotlinking** an Unsplash photo has its [guideline](https://help.unsplash.com/en/articles/2511271-guideline-hotlinking-images). This article was recently updated by the way. Go check it out, I'll wait.

So, following the guideline, the source of the image should rather look something like this:

```
https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&h=500&q=80
```

## **Where do you get that code**? 

While you're browsing as usual, right click on the photo you want and select "Open image in a new tab". You'll find the basic code in the address bar. It's up to you to update the width/height/quality (w/h/q) it best fits on your design.

So, there you have it, how to fix the "broken" Unsplash Photos not displaying or, in other words, how to properly use Unsplash Images in your code.

Thank you, and happy coding!
Bitcoin Profit Way - Benefits, Reviews, Pros, Cons And Results?
Tags: webdev, javascript, beginners, programming
Published: 2023-06-29 01:09:58

[Bitcoin Profit Way](https://www.outlookindia.com/business-spotlight/bitcoin-profit-way-buyers-alert-is-bitcoin-profit-legit-or-scam-critical-customer-update--news-239298) its source. Folks have the tendency to focus on their pain or supply of all this the time. They zone in on the actual sensation of pain itself and extremely feel the. This tendency makes discomfort worse. If you experience pain, take you off that. 
[https://www.outlookindia.com/business-spotlight/bitcoin-profit-way-buyers-alert-is-bitcoin-profit-legit-or-scam-critical-customer-update--news-239298](https://www.outlookindia.com/business-spotlight/bitcoin-profit-way-buyers-alert-is-bitcoin-profit-legit-or-scam-critical-customer-update--news-239298)
https://www.linkedin.com/events/bitcoinprofitway7079982663872221184/
https://www.scoop.it/topic/bitcoin-profit-way 
https://www.crunchbase.com/organization/bitcoin-profit-way 
https://www.sympla.com.br/produtor/bitcoinprofitwayfact 
https://fixr.co/event/bitcoin-profit-way-benefits-pros-cons-tickets-311267211 
https://www.sportsblog.com/bitcoinprofitwayinfo/bitcoin-profit-way-results-price-uses-reviews-and-benefits/ 
https://patch.com/new-york/soho-little-italy/calendar/event/20230630/cb5fae15-0125-490b-ae12-617555bb3e82/bitcoin-profit-way-reviews-benefits-pros-cons-scam-or-legit 
https://twitter.com/bitcoinpro47609
Balancing Exams and Coding: How I Stay Productive
Published: 2023-06-28 23:12:21

**Introduction**:
As a student and a software engineer, I know how challenging it can be to balance exams and coding. There are always deadlines to meet and projects to complete, and it can be easy to feel overwhelmed. But I've found a few strategies that help me stay productive and ace my exams.

**Tips**:
_Create a schedule and stick to it_. This is probably the most important tip. When you know what you need to do and when you need to do it, it's much easier to stay on track.
_Prioritize your tasks_. Not all tasks are created equal. Some are more important than others. So make sure you're spending your time on the most important tasks first.
_Take breaks_. It's important to take breaks when you're studying or coding. Get up and move around, or take a few minutes to relax and clear your head. Taking breaks will help you stay focused and avoid burnout.
_Reward yourself_. When you complete a task, reward yourself with something you enjoy. This will help you stay motivated and on track.
_Don't be afraid to ask for help_. If you're struggling with a concept or a project, don't be afraid to ask for help from your professor, a tutor, or a friend.

**Conclusion**:
Balancing exams and coding can be challenging, but it's not impossible. By following these tips, you can stay productive and ace your exams.

**Call to action**:
What are your tips for balancing exams and coding? Share them in the comments below.
Exploring how the Buffer Manager works in PostgreSQL 1: Introduction
Tags: apacheage
Published: 2023-06-28 23:49:46

## Introduction

The PostgreSQL database management system (DBMS) relies on an efficient buffer manager to optimize data transfers between shared memory and persistent storage. Understanding the intricacies of the buffer manager is crucial for maximizing the performance of PostgreSQL. In this blog post, we will briefly overview the PostgreSQL buffer manager and explore its structure, operations, and key components that contribute to its exceptional efficiency.

## Buffer Manager Structure
At the core of the PostgreSQL buffer manager lies a carefully crafted structure consisting of a buffer table, buffer descriptors, and the buffer pool. The buffer pool acts as an array, housing data file pages, such as tables, indexes, freespace maps, and visibility maps. Each slot within the buffer pool represents a single page of a data file, and these slots are referred to as buffer IDs. 

## Buffer Tags:
In PostgreSQL, every page of all data files is assigned a unique identifier called a buffer tag. When a request is made to the buffer manager, PostgreSQL utilizes the buffer tag to locate the desired page. The buffer tag comprises three values: the RelFileNode and the fork number, indicating the relation to which the page belongs, and the block number, specifying the page itself. Understanding the buffer tag concept is vital for comprehending how PostgreSQL manages data retrieval and storage effectively.

## How a Backend Process Reads Pages:
The backend process sends a request containing the buffer tag of the desired page to the buffer manager, to which the buffer manager responds by returning the buffer ID of the slot that stores the page. Additionally, the buffer manager also handles scenarios where the requested page is not present in the buffer pool, requiring it to load the page from persistent storage.

## Page Replacement Algorithm:
When the buffer pool is full and a new page needs to be loaded, the buffer manager employs a page replacement algorithm to select a victim page that will be replaced by the new page. In PostgreSQL, the clock sweep algorithm has been implemented since version 8.1, as it offers simplicity and efficiency compared to earlier versions that used the LRU algorithm. 

## Flushing Dirty Pages:
Dirty pages, which have been modified by backend processes but not yet written back to storage, require periodic flushing. PostgreSQL employs two background processes, known as the checkpointer and background writer, to handle this task. This section explores the role of these background processes in ensuring that dirty pages are appropriately flushed to storage, maintaining data integrity and performance.
Attended Config 23 Virtually and Loved the New Updates to Figma
Published: 2023-06-28 23:23:37

**Introduction:**
I recently attended Figma's annual conference, Config 23, virtually. It was a great event with a lot of interesting talks and workshops. But the highlight for me was the release of six new updates to Figma.

**Updates:**
The new updates include:
_Variables:_ This new feature allows you to create reusable values that can be used throughout your designs. This can save you a lot of time and effort, especially if you're working on complex projects.
_Advanced prototyping:_ This update makes it easier to create interactive prototypes that are more realistic and engaging. You can now add animations, transitions, and conditional logic to your prototypes.
_Autolayout updates:_ These updates make it easier to create responsive designs that look great on any device. You can now wrap elements, set minimum and maximum sizes, and more.
_Dev Mode:_ This new mode allows you to inspect and edit the underlying code of your designs. This can be helpful for debugging problems or making custom changes.
_Font picker updates:_ These updates make it easier to find and preview fonts in Figma. You can now search for fonts by name, category, or weight.
_File browser updates:_ These updates make it easier to find and manage files in Figma. You can now filter files by type, date, and other criteria.

**Conclusion:**
Overall, I was really impressed with the new updates to Figma. They make the design process more efficient and productive, and they open up new possibilities for creating interactive and engaging prototypes. I'm excited to start using these new features in my own work.

**Call to action:**
If you're a Figma user, I encourage you to check out the new updates. They're a great way to improve your design workflow and create more amazing products.