teleren/devto huggingface dataset:
Late Hacktoberfest Part l
Published: 2023-11-05 02:19:37

## Late But Better Than Never

Unfortunately, I am late to the Hacktoberfest party and I was only able to contribute to 2 open source projects out of 4 which I wanted to do, during the 2023 Hacktoberfest. This was due to life circumstances, but now I am finally able to post about my contributions and share my experience. I still plan on contributing to 2 more open source projects even though the Hacktoberfest is over, to reach my goal of 4 contributions. So, this is my first post out of the 4 or 5 post series that I will make about this experience.

## First Issue

For my first contribution I chose something nice and easy to get my feet wet. So I decided to work on the documentation side of a project. I came across [this issue](https://github.com/Webwiznitr/Hacktoberfest-Tulip/issues/9) where the project owner wanted to add a CONTRIBUTING.md file to his project. I found this to be interesting since I have never made a CONTRIBUTING.md file for a project before. I reached out in the comment section of the issue and asked the project owner to assign it to me.

## Making a CONTRIBUTING.md

After I was assigned the issue, I forked the repo and created a new branch to work on the issue. I started to research and look at other open source projects' COTRIBUTING.md files. Once I had an overall understanding about what was needed and the set of guidelines I wanted to include in my file, I started to work on writing it. I also used the project's README.md file as my reference to make sure to include the parts that were relevant to contribution guidelines. Additionally, I realized that a lot of the open source projects I looked at had a code of conduct document as well, so I decided to add a CODE_Of_CONDUCT.md file too. For the code of conduct document I decided to go with and use the [Contributor Covenant v2.1](https://www.contributor-covenant.org/). After I finished making both files I committed, pushed my changes, and made a pull request which can be found [here](https://github.com/Webwiznitr/Hacktoberfest-Tulip/pull/11/commits)

## Feedback From The Owner

After I made my PR I waited for the owner to review it. He kindly asked me to change the PR name, update it's description and submit an updated PR. I happily made the changes based on the feedback he provided and submitted this [PR ](https://github.com/Webwiznitr/Hacktoberfest-Tulip/pull/15). He then approved it and merged the changes.

## What I Learned

This was a great first step for me to search for open source project issues on Github and find problems or features that I am interested in contributing to. Also, I learned about the importance of contribution guidelines and code of conduct, specially when there are many contributors and there is a need for a set of rules and standards to insure consistency and to provide an environment for everyone that makes them feel welcomed and encourages contribution.
Javascript [array methods] - findIndex, reverse, sort, join, values, unshift, shift, push, pop
Published: 2023-11-05 01:35:59

```TS
const items: any[] = [1,5,2,3,4]
const userData = ["Carlos", "Perez", "12 años"]  
console.log(`
[reversed]: ${items.reverse()}
[sorted]: ${items.sort()}
[foundIndex]: ${items.findIndex((i) => i > 2)}
[join]: ${userData.join("<>")}
[values] new iterator used in forOf: ${items.values()}
[unshift] new lenght: ${items.unshift("a", "b")}
[unshift] new items: ${items}
[shift] first value: ${items.shift()}
[shift] new items: ${items}
[push] new lenght: ${items.push("new element","new last element")}
[push] new items: ${items}
[pop] last value: ${items.pop()}
[pop] new items: ${items}
`)
```
result:

> [LOG]: "
> [reversed]: 4,3,2,5,1
> [sorted]: 1,2,3,4,5
> [foundIndex]: 2
> [join]: Carlos<>Perez<>12 años
> [values] new iterator used in forOf: [object Array Iterator]
> [unshift] new lenght: 7
> [unshift] new items: a,b,1,2,3,4,5
> [shift] first value: a
> [shift] new items: b,1,2,3,4,5
> [push] new lenght: 8
> [push] new items: b,1,2,3,4,5,new element,new last element
> [pop] last value: new last element
> [pop] new items: b,1,2,3,4,5,new element
> " 

note: 
- unshift/shift are similiar to push/pop [first/last item]
Javascript [array methods] - fill
Published: 2023-11-05 01:08:25

```JS
const items: any[] = [1,2,3,4]

const fillled1 = items.fill(1,2,4)
console.debug(`filled from 2 to 4: ${fillled1}`)
const fillled2 = items.fill(1,1)
console.debug(`filled from 1: ${fillled2}`)
const filled3 = items.fill("s")
console.debug(`filled from 0: ${filled3}`)
```
result:

> [DBG]: "filled from 2 to 4: 1,2,1,1" 
> [DBG]: "filled from 1: 1,1,1,1" 
> [DBG]: "filled from 0: s,s,s,s"
Moez & 40 opensource winners
Tags: hack23maintainer
Published: 2023-11-05 00:54:58

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
I'm excited to be a maintainer for Hacktoberfest 2023! This is not my first time maintaining during Hacktoberfest; I have been involved in previous editions as well. You can check out my contributions and my repository on my GitHub account: {% embed https://github.com/moezmustafa %}.

### Project
The repository I hosted for Hacktoberfest 2023 is an open-source project dedicated to fostering collaboration and learning among contributors. To facilitate the review and merge of pull requests, I set up a streamlined process that involved automated testing and a clear contribution guideline. Our project repository can be found here: {% embed https://github.com/moezmustafa/TrainingMLSA %}.

### Highs and Lows
- **Accomplishments**:
  - Successfully managed and reviewed a high volume of pull requests.
  - Witnessed numerous contributors make their first successful open-source contributions.
  - Guided and mentored 31 students, with 18 of them achieving the milestone of having all their pull requests (PRs) merged.

- **Challenges**:
  - Faced challenges with handling an influx of contributions.
  - Encountered complex issues that initially seemed impossible to fix.
  - Adapted by engaging with the community, providing clear feedback, and organizing collaborative efforts to resolve issues.

This month has been a whirlwind of achievements and challenges, making it a fulfilling experience in maintaining an open-source project.

### Growth
Before Hacktoberfest 2023, my skillset as a maintainer was solid, but it has significantly improved during this event. I've gained a deeper understanding of project management, collaboration, and community engagement. This experience has not only enhanced my technical skills but has also reshaped my project goals, emphasizing the importance of community involvement and education in open source. I'm excited to continue maintaining and growing the project in collaboration with our vibrant community.
My 2023 Hacktoberfest
Tags: hack23contributor
Published: 2023-11-05 00:46:35

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
I'm excited to be a part of Hacktoberfest 2023! This isn't my first Hacktoberfest; I've been participating in this event for a few years now. You can check out my contributions on my GitHub account: {% embed https://github.com/moezmustafa %}.

### Highs and Lows
- **Accomplishments**:
  - Successfully contributed to several open-source projects.
  - Delighted to see my pull requests (PRs) merged into the main repositories.
  - Guided 31 students in their Hacktoberfest journey.
  - 18 of my mentored students got all their pull requests (PRs) merged, a truly rewarding experience.

- **Challenges**:
  - Faced difficulties where some issues seemed insurmountable.
  - Adapted by seeking help from the community and learning from their feedback.

This month has been a rollercoaster ride, filled with both achievements and challenges in the open-source world.

### Growth
Before Hacktoberfest 2023, my skillset was solid, but it has improved significantly over the course of this event. I've gained a deeper understanding of version control, collaboration, and project management. These experiences have not only enhanced my technical skills but also shifted my career goals towards a more open-source and community-driven path. I'm excited to continue contributing and learning in the world of open source.
Placeholder Contributor
Tags: hack23contributor
Published: 2023-11-05 00:39:02

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- Share a bit about yourself as a contributor. Is this your first Hacktoberfest, or have you contributed to others? Feel free to embed your GitHub account by using {% embed LINK %} -->

### Highs and Lows
<!-- What were some of your biggest accomplishments or light-bulb moments this month? Did any problems come up that seemed impossible to fix? How did you adapt in those cases?  -->

### Growth
<!-- What was your skillset before Hacktoberfest 2023 and how did it improve? Have your learning or career goals changed since working on these new projects? -->
React-based invoice generator with PDF export
Tags: pdf, generator
Published: 2023-11-07 07:46:54

---
title: React-based invoice generator with PDF export
published: true
date: 2023-11-05 00:39:00 UTC
tags: PDF,Generator
canonical_url: https://reactjsexample.com/react-based-invoice-generator-with-pdf-export/
---

 ![React-based invoice generator with PDF export](https://reactjsexample.com/content/images/2023/11/Code_2023-11_22-34-07.jpg)

A web application for generating invoices built using React provides an efficient and user-friendly solution for businesses to create and manage invoices. With its intuitive interface users can easily input customer information add items and services and calculate totals. The app allows users to export invoices directly from the app to PDF streamlining the invoicing process.

## 🚀 Demo

[https://invoice-generator-guransh.netlify.app/](https://invoice-generator-guransh.netlify.app/)

## 🧐 Features

Here’re some of the project’s best features:

- Add and delete invoice items
- Edit invoice item details
- Export invoice as a PDF
- Data validation for PDF generation
- Excel export

## 🛠️ Installation Steps:

1. To get started with this project clone the repository

```
git clone https://github.com/guranshdeol/Invoice-Generator.git
cd Invoice-Generator
```

2. Run `npm install` to install the necessary dependencies.

```
npm install

```

3. To run the application use the command npm start.

```
npm start

```

## 🍰 Contribution Guidelines:

Contributions are always welcome! If you’d like to contribute to this project please fork the repository and create a pull request.

Check out [CONTRIBUTION](https://github.com/guranshdeol/Invoice-Generator/blob/master/CONTRIBUTING.md) guidelines for more details.

## 💻 Built with

Technologies used in the project:

- Frontend Framework/library: **React.js** + **Vite**
- CSS Styling using: **TailwindCSS** and **DaisyUI**
- Page Routing using: **react-router-dom**
- Invoice Deatils Table using: **ag-grid-react**
- PDF Generation using: **react-pdf**
- Formatting using: **Prettier**
- Testing using: **React-Testing-Library** and **Vitest**
- State Management using: **Redux-Toolkit(RTK)**
- Data Storageon client-side in **IndexedDB** using **Dexie.js**
- Deployment on **Netlify**

## 🛡️ License:

This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).

## 💖Like my work?

Support me

[https://www.buymeacoffee.com/guranshdeol](https://www.buymeacoffee.com/guranshdeol)

## GitHub

[View Github](https://github.com/guranshdeol/Invoice-Generator?ref=reactjsexample.com)
Is Living for Your Passion Possible?
Tags: discuss
Published: 2023-11-05 00:00:00

---
published_at : 2023-11-05 00:00 +0000
---
Can you share your personal experiences of pursuing your passions and the impact it has had on your life?

Follow the DEVteam for more discussions and online camaraderie! 

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Caption This! 🤔💭
Tags: discuss, watercooler
Published: 2023-11-05 00:00:00

---
published_at : 2023-11-05 00:00 +0000
---
We want to know if you have what it takes to write the best caption for this image. Upvote your favorite one so folks can get bragging rights.

![Image of an old phone that says: Message can't be received, please buy a touch phone.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ec2uuus3p0vhyopo104a.jpg)

Follow the DEVteam for more online camaraderie! {% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Do You Have Any Tips for Crushing Coding Interviews?
Tags: discuss, codenewbie, beginner
Published: 2023-11-05 00:00:00

---
published_at : 2023-11-05 00:00 +0000
---
What quick insights or tips can you offer to those preparing for coding interviews?

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 *%}*
Caption This! 🤔💭
Tags: watercooler, discuss
Published: 2023-11-05 00:00:00

---
published_at : 2023-11-05 00:00 +0000
---
Are you able to come up with the best caption for this image? Give it your best shot! We believe in you.

![Eggs in a container, all with very scared faces Sharpie'd on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctymqtclekkp2sd7lnhq.jpg)

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Javascript [array methods] - some,every, find, filter, map, reducer
Published: 2023-11-04 23:36:58

```TS
const items = [
    { name: "item_1", price: 10.3 },
    { name: "item_2", price: 7 },
    { name: "item_3", price: 1.2 }
]


const some = items.some((i) => i.price > 10);
const every = items.every((i) => i.price > 10)
const find = items.find((i) => i.price > 10);
const filtered = items.filter((i) => i.price > 10);
const mapped = items.map((i)=> "[".concat(i.name,"]"))
const reduced = items.reduce((acc, current) => acc + current.price, 0)

console.debug(`
someItem>10: ${some} 
eachItem>10: ${every} 
found: ${JSON.stringify(find)} 
filtered: ${JSON.stringify(filtered)} 
mapped: ${JSON.stringify(mapped)}
reduced: ${reduced}`
)
```
result:

> [DBG]: "
> someItem>10: true 
> eachItem>10: false 
> found: {"name":"item_1","price":10.3} 
> filtered: [{"name":"item_1","price":10.3}] 
> mapped: ["[item_1]","[item_2]","[item_3]"]
> reduced: 18.5"
Making Coding Easier: My Story with Cool Coding Tools
Published: 2023-11-04 23:16:00

Hi everyone! I want to share my story about making coding a lot easier and more fun with some cool tools.

## The Tools I Used

### Prettier
Think of [Prettier](https://prettier.io/) like a broom that sweeps your code and makes it look neat. It's not usually used for Python, the language I write in, but with a special add-on, it can tidy up Python code too.

### Flake8
[Flake8](https://flake8.pycqa.org/en/latest/) is like a friendly teacher who points out where you might have slipped up in your Python homework. It tells you about little mistakes and helps you write better code that looks good and follows the rules.

### Visual Studio Code
[VSCode](https://code.visualstudio.com/) is like my digital toolbox. It lets me write and fix code, and I can add all sorts of tools to it, like Prettier and Flake8, to make coding easier.

## Setting Them Up

First, I set up Prettier to make sure my code lines are all nice and even. Then I put Flake8 in place to catch mistakes and keep everything super clean. I even made sure they both work right inside VSCode, so I can see and fix problems on the fly, just like autocorrect when you're typing a message.

## Fixing Up My Code

When I got these tools working, they showed me a few spots where my code was a bit messy or could be better. I fixed those up, and now the code looks great and is easy to read.

## Running the Tools Without a Hassle

To check my code, I can type a few words into my computer's command line (like asking it to do a quick check-up) and see if anything needs fixing. It's like having a spellchecker for coding.

## Making Them Work With My Toolbox

I told VSCode to use these tools to tidy up my code every time I save a file, just like how your phone fixes typos automatically.

## What I Learned

- Having tools to clean up your code is awesome because it saves you time and helps you write better code.
- Putting these tools right into the editor means less jumping around between programs.
- Spending a bit of time to set things up makes everything easier later.

That's it! Using these tools was like getting a helping hand that's always there to make sure I write code that not only works but is also clean and easy for others to understand.
ES6 Rewriting Imports in JavaScript and TypeScript
Tags: webdev, javascript, typescript, productivity
Published: 2023-11-04 23:00:08

Sometimes "find and replace all" doesn't work in software development. In fact, it definitely does not work for `import` declarations in JavaScript and TypeScript!

Say you moved a function somewhere and you want to change the path it is imported from. In this example, you can see there are multiple different orders to the import and potentially newlines to deal with:

```js
// multi-line import
import {
  AnotherFeature,
  CoolFeature,
  OneMoreFeature,
} from "./features";

// one line import
import { CoolFeature } from "./features";

// one line import, default
import Cool from "./features";

// one line import with multiple and different ordering
import { AnotherFeature, CoolFeature, OneMoreFeature } from "./features";
import { CoolFeature, AnotherFeature } from "./features";
import { OneMoreFeature, CoolFeature } from "./features";
```

How is that possible with a humble find/replace? Sure, you could try to craft a regex, but it could miss a few scenarios and become incorrect code.

However, Abstract Syntax Tree could do the job. It would read the lines of JavaScript, parse them and search for the parts of the syntax tree that indicate an import declaration.

Anyway, I wrote a small tool for rewriting imports so that you change an import to point from a top-level directory to another specific path, or to point to another path. It uses `glob` to search for files, so it can be customized to search across all paths for rewriting the imports. It uses `recast` for the AST, the Abstract Syntax Tree and rewrite.

https://github.com/rudolfolah/rewrite-imports-es6
Temporal - A trustworthy alternative for (legacy) moment.js ?
Tags: webdev, javascript, beginners, programming
Published: 2023-11-04 22:20:36

I recently wrote a post about moment.js that it has become legacy and suggested some alternatives like `dayjs`, `luxon` and `date-fns` and found out about [Temporal](https://tc39.es/proposal-temporal/docs/index.html) being developed by TC39.

Going down the history line, `Date` was actually copied from `java.Util.Date` and evolved from there. Date is something which is used in almost any type of project you do and you know well that you have to rely on external libraries if complexities occur in calculation or manipulations of date.

Since moment.js has become legacy, Temporal could be a very well prospect to move forward with. **The really cool part is that, it is a global Object that acts as a top-level namespace.**

I find it really cool by the top level looks of it. Let me know how you find it =)

Happy coding! 🚀👨‍💻🌐

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123
Add Prettier and Linter
Published: 2023-11-04 21:56:13

## [Prettier](https://prettier.io/)

`Prettier` is one of the code formatter and I often use it to enforce a consistent style. The reason why I chose it is I'm pretty familiar with the formatter and contributed to open-source projects by installing it. 

## [Eslint](https://eslint.org/)

Eslint is used to find and fix problems with JavasScript code, and my project is written in Typescript but it is still available as long as the configuration is setup.

## Installation of Prettier
### 1. Install Prettier
`npm install --save-dev prettier`

### 2. Create a .prettierrc file and add the following
```ts
{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
}

``` 

### 3. Set up Prettier to ignore certain files
```ts
node_modules
```

### 4. Add a command in your package.json
```ts
        "prettier": "npx prettier --write .",
        "prettier-check": "npx prettier . --check",
```
`Prettier` is to rewrite the files, and `prettier-check` is only to check the files.



## Installation of Eslint
### 1. Install Eslint
```ts
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

### 2. Create `.eslintrc` file
```ts
{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ]
}
```

### 3. Create `.eslintignore` file
```ts
node_modules
dist
```

### 4. Add a command in your package.json
```ts
"lint": "eslint . --ext .ts",
"lint-fix": "eslint . --ext .ts --fix",
```
`lint` is to only lint all `.ts` files whereas `lint-fix` is to lint and fix the files.


## Integrating tool with VScode
### Create `Settings.json` file under `.vscode`
```ts
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}
```

## Learn from process
I used to install `Prettier` and `Eslint` a couple of times for open-source projects before, but from this time I completely figured out how to use formatter and why it is required for many open-source projects. Before I used formatter for this project, I didn't find any problems or issues but after I installed it I realized there were a couple of minor issues that I dealt with. I would say these formatter is super essential to every developer and we should use it to avoid minor problems, then we can only focus on programming.