teleren/devto huggingface dataset:
build a Simple Todo with ReactJs Angular VueJs
Tags: webdev, angular, vue, react
Published: 2024-05-01 21:09:25

## _Introduction_
todoApps are a classic project for learning new frameworks and building one with Reactjs & Angular & Vue can provide valuable insights into the strengths and differences of each. in this Post we will walk through the process of creating a basic todo app with each of these popular frameworks and we'll delve into the differences between these popular frameworks and explore their strengths and use cases.

**_Note_**
Before you start make sure u have Nodejs and npm installed

**1. Creating the Project:**

## React : 

```
npx create-react-app todo-react
cd todo-react

```

## Angular :

```
npm install -g @angular/cli
ng new todo-angular
cd todo-angular

```

## Vue :

```
npm install -g @vue/cli
vue create todo-vue
cd todo-vue

```

**2. Implementing the Todo List:**

## React : 

```
import React, { useState } from 'react';
function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue('');
  };

  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };
  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

```
## Angular : 

```
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todos: string[] = [];
  inputValue: string = '';

  addTodo() {
    this.todos.push(this.inputValue);
    this.inputValue = '';
  }

  removeTodo(index: number) {
    this.todos.splice(index, 1);
  }
}

```

```
<input type="text" [(ngModel)]="inputValue">
<button (click)="addTodo()">Add</button>
<ul>
  <li *ngFor="let todo of todos; let i = index">
    {{ todo }} <button (click)="removeTodo(i)">Remove</button>
  </li>
</ul>

```

## Vue :

```
<template>
  <div>
    <input type="text" v-model="inputValue">
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }} <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      inputValue: ''
    };
  },
  methods: {
    addTodo() {
      this.todos.push(this.inputValue);
      this.inputValue = '';
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
}
</script>

```

**3. Running the App :**

## React : 

```
npm start

```

## Angular : 

```
npm start || ng serve

```

## Vue : 

```
npm run serve

```

congratulations you have successfully built a simple todo app using React &  Angular & Vue
after my epiphany coupled with my burnout, i continue
Published: 2024-05-27 19:33:28

---
title: after my epiphany coupled with my burnout, i continue
published: true
date: 2024-05-01 20:44:49 UTC
tags: 
canonical_url: https://yuricunha.com/blog/after-my-epiphany-coupled-with-my-burnout-i-continue/
---

after my epiphany coupled with my burnout, i continue creating scripts and working on my projects. despite all this not being exactly what most recommend, pushing my own projects forward will help me care more about things, and since they are my projects (or in which i am the majority), it gives me more freedom to do things under the radar, without necessarily having to follow a protocol/kanban or worry about other participants.
5 Productivity Hacks to Supercharge Your Coding Sessions
Tags: productivity, watercooler
Published: 2024-05-01 20:20:21

Are you a programmer who struggles to stay focused and productive during long coding sessions?
Well, I'm not – so I am here to deliver you all some motivation in the form ov five 'hacks' that should boost your performance.

## Prepare Your Mind

&nbsp;&nbsp;1\. Prepare your mind.  
It is always good to be prepared for what is to come, even if you know what's coming.

There are many ways to prepare yourself, such as meditation or yoga.
Are you a coffee-drinker?&nbsp;&nbsp;Have some pre-coding coffee, then!

Do something that will make you feel better.

## Calm Yourself

&nbsp;&nbsp;2\. Calm yourself.  
Programming can be stressful, so don't sweat it when you find that you aren't making ample progress.

If you are feeling frustrated or annoyed, put on something calming, like whitenoise, some music, or even your favorite content creator.
If you are feeling stuck, try relieving the block by getting some inspiration from somewhere, such as your favorite content creator.

Do something that will relax you.

## Keep Focused

&nbsp;&nbsp;3\. Keep focused.  
Being distracted is a large contributing factor to a lack ov productivity.
(I should know — I can be a bit torn between projects.)

Try to close unnecessary browser tabs, such as YouTube, Bluesky, Reddit, et cetera.

Do something that will keep you on task.

## Stay in The Zone

&nbsp;&nbsp;4\. Stay in the zone.  
It can be hard to remain focused – and, sometimes, you may become fidgety.

Sometimes, to be in your most focused state, you have to take breaks — it can be good to watch a video here and there, or (re)check your emails.

Do something that will keep your mind refreshed.

## Ask for Help

&nbsp;&nbsp;5\. Ask for help.  
We all run into problems we can't solve by ourselves at first – and that is perfectly fine.
We don't have to face these challenges alone though.

While you may want to be seen as the "alpha-Chad" programmer, you shouldn't pressure yourself into waiting for an answer to tumble to you... like a tumbleweed.

Ask for help.
It is much easier to find a solution to something if you at least prompt the answer to come to you.

Do something that will help others help you.

<hr />

Implementing these five productivity hacks can have a beneficial effect on your coding sessions.

<br />

<b><center><b>Thanks for reading!<br />Cheers!</b></center></b>
My experience as a new web development student
Published: 2024-05-01 20:10:44

Hi everyone!

My name is Daniel, I am from Colombia and I am currently enrolled in the web development program at Cornerstone International Community College of Canada in Vancouver, I am 19 years old and I have liked to interact with computers since I was a child, I remember all the days that I spent trying to figure out all the functions that a computer could have and also all the educative programs that I took to increase my academic knowledge through the internet. I am interested in all the computer stuff, but my coding skills are not so good yet, that is why I am currently taking the web development program.

My expectations of the course are to improve all my skills and also know the new technologies that are taking place in the current days, also do what I love and feel free to make mistakes because they are going to help me if I want a nice improvement. Knowing people who are interested in the same things that you like is going to be also a nice thing for me. It would help us to grow together and share our program knowledge to achieve our goals easier by helping each other.

So far, I have been feeling so comfortable with the program since they have taught me all the basics that I needed to learn without going so fast. That thing is very important especially for coding because if you go step by step you are going to be closer to your goal every day. The teachers are so kind and help us anytime we have questions, the schoolmates also have shared some good moments trying to learn, which helps everyone to get a better school environment. It is also very interesting to know how other cultures behave and how they started their interest in programming, especially which coding language they started with because it may vary depending on the country.

Right now, I am just studying while working in a part-time job but the goal that I want to achieve next year is to spend all my time in a full-time job applying all the knowledge that I will learn in school. It is also important not only to apply the coding knowledge that the school will bring me but also to apply all the manners and social skills that I will improve in school. After that, it would be great if I could stay in the same job to continue practicing and improving my skills as a junior web developer until I get a good basis to understand what are the obligations of a web developer. Since then, I would like to create a company to know the needs of people and try to help them with the knowledge that I am going to have at that moment. It is really important to understand that knowledge is not only for school, it is for society and everyone that needs it. If I can help people with the knowledge that I have I will be proud of myself and I will feel that I will have achieved my goal as well.
JavaScript: Recursion vs. Higher-Order Functions
Published: 2024-05-01 20:05:23

In the world of JavaScript, two powerful concepts—recursion and higher-order functions—offer distinct approaches to solving problems. Let's explore the differences, benefits, and examples of each.

Recursion: Unraveling Complexity with Self-Reference

Recursion is like solving a puzzle by breaking it down into smaller puzzles until everything fits perfectly. It's an iterative process where a function calls itself within its own definition, unraveling complex problems into more manageable subproblems.

Benefits of Recursion:

Simplicity: Recursion often provides an elegant and straightforward solution to complex problems.
Versatility: It can be applied to a wide range of problems, from calculating factorials to traversing complex data structures like trees.
Readability: Recursive solutions can be more readable and intuitive for certain problems compared to iterative approaches.
Example: Calculating Factorials
function factorial(n) {
  if (n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5)); // Output: 120 (5 factorial)
Higher-Order Functions: Crafting Magic with Functions

Higher-order functions are like master craftsmen who can build new tools or combine existing ones to accomplish remarkable feats. They empower us to treat functions as if they were any other kind of data, offering unparalleled flexibility and versatility.

Benefits of Higher-Order Functions:

Abstraction: Higher-order functions allow us to abstract away common patterns and operations, leading to cleaner and more modular code.
Code Reusability: They enable us to reuse and compose functions, reducing redundancy and promoting code reuse.
Functional Programming Paradigm: Higher-order functions are a cornerstone of functional programming, encouraging a more declarative and expressive coding style.
Example: The Magic of Map

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
Recursion vs. Higher-Order Functions: Finding the Right Tool for the Job

While both recursion and higher-order functions offer powerful tools for solving problems in JavaScript, each has its own strengths and best use cases. Recursion excels at tackling problems that can be broken down into smaller, identical subproblems, while higher-order functions shine in scenarios where operations on functions or data collections are involved.

Conclusion:
In the journey through JavaScript's intricacies, we've discovered the unique powers of recursion and higher-order functions. Armed with these tools, we're equipped to tackle a wide range of programming challenges, from calculating factorials to transforming data collections. By understanding when and how to leverage recursion and higher-order functions, we unlock new realms of possibility in our coding adventures.
The go vet command
Tags: 100daystooffload, go, tooling, vet
Published: 2024-05-01 19:13:02

The `go vet` command is a tool that examines the source code and reports suspicious constructs that could be bugs or syntactical errors, a static analysis tool for Go programs.

This tool is part of the standard Go toolchain and therefore also easy to use when writing your code.

In its simplest form you just type following in the terminal.

```console
go vet ./path/to/your/package

# or if the current directory is already the package
# directory, then you vet that package by just using:
go vet
```

If we don't get any results then we do not have any vetting errors. Vet's exit code is non-zero for erroneous invocation of the tool or if a problem was reported, and 0 otherwise.

![no vetting errors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rbquou50o84xunv0ktl.png)

Just to show how it would look like when the command complains, we could try it out on this function.

```golang
func HelloVet() {
	fmt.Println("Hello Vet")

	return

	fmt.Println("This line will never be executed")
}
```

When running the vet command on this code we will get this result.

![vet error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydiuaaegiunh5ls3w91j.png)

An error, and it's just what we would expect, `unreachable code`. However from the `go doc cmd/vet` command we can read the following note,

> Note that the tool does not check every possible problem and depends on unreliable heuristics, so it should be used as guidance only, not as a firm indicator of program correctness.

Which is good to remember when using the tool. 

The tool makes it also possible to fine tune it if there are rules that do not fit your needs. For example if we do not care about unreachable code we could add that as flag,

![fine tuning vet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btu2eb9skfe3qbtnrre9.png)

now that error is not reported anymore and everything looks good again.

To list the registered analyzers you can use this command,

```console
go tool vet help
```

the list will include a bunch of analyzers. To learn more about a specific analyzer you can use the help system once again, for example the `defers` analyzer,

```console
go tool vet help defers
```

that will output a short explanation on what it looks for and an example.

![defers help](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1roxy2f96mluygyfssyz.png)

So there are plenty of things to learn by just reading the Go [documentation](https://pkg.go.dev/cmd/vet). According to the [documentation](https://pkg.go.dev/golang.org/x/tools/go/analysis) it should also be possible to write your own checks for the `vet` command. Something that I haven't explored yet though.

So give the `go vet` command a try when you are coding some Go next time!

Happy vetting!
The easiest and best way to create the gitignore file for .Net repositories
Tags: csharp, dotnet, git
Published: 2024-05-01 18:39:51

Have you ever had to google "gitignore file for .Net apps", copy and manually create it into your repository? 

That was a common situation to me before I found out a easiest (and better) way to do that.

Basically instead the manual path, you can simply use the .NET CLI to do that automatically for you, just type the command below:

```
dotnet new gitignore
```

Done! The .NET CLI created the `.gitignore` for you.

It was pretty simple, right?
How to implement Infinite Scrolling in React Native
Tags: reactnative, mobile, javascript
Published: 2024-05-01 18:37:06

In mobile apps, displaying large datasets efficiently is crucial. Imagine a social media feed or an e-commerce product listing, you don't want to overwhelm the user by loading everything at once. Infinite scrolling, where new content loads as the user scrolls down, provides a smooth and performant solution.


### Setting up the project
For this blog post, we will assume you have a React Native project set up and an API endpoint that returns paginated data.

**Install react-query**
```
npm install react-query
```
React Query provides **useInfiniteQuery** hook which is specifically designed for fetching and managing paginated data. You can read more about useInfiniteQuery [here](https://tanstack.com/query/v4/docs/framework/react/reference/useInfiniteQuery)

### Implementing Infinite Scrolling with useInfiniteQuery

- Define the Query Function

This function fetches data from the API endpoint. It should accept the current page number as a parameter and return the fetched data.
```ts
const fetchArticles = async (page = 1: number) => {
  const response = await fetch(`http://api.example.com?page=${page}`);
  return response.json();
}
```
- Using **useInfiniteQuery**
```tsx
import { useInfiniteQuery } from 'react-query';

const ArticleList = () => {
  const { 
    data, 
    isLoading, 
    fetchNextPage, 
    hasNextPage
  } = useInfiniteQuery('articles', fetchArticles, {
    getNextPageParam: (lastPage) => lastPage.hasNextPage || undefined 
  });

  return (
    <FlatList
      data={data?.pages.flat()}
      renderItem={({ item }) => <Article article={item} /> }
      onEndReached={hasNextPage && fetchNextPage}
      ListFooterComponent={isLoading && ActivityIndicator}
     // other FlatList props
    />
  )
}
```

  - **useInfiniteQuery** manages the fetching and caching of paginated data.
  - **getNextPageParam** is crucial for pagination. It takes the last fetched page (lastPage) and determines the next page parameter for the API request. If there are no more pages, it returns undefined. Modify this function based on your API's pagination structure (e.g., page numbers).
  - **isLoading** indicates if data is currently being fetched. You can use this to display a loading indicator while data loads. A loading indicator is displayed using **ListFooterComponent**

  - **onEndReached** within FlatList gets called when the user scrolls close to the end of the list. It's used to trigger the loading of the next page of data. 

  - We can also adjust the threshold for triggering onEndReached using the **onEndReachedThreshold** prop of FlatList. This value represents a fraction of the list's viewable height from the bottom For example 0.5 means triggering when the user is halfway through the last visible item.

### Conclusion
By leveraging useInfiniteQuery, you can effortlessly implement infinite scrolling in your React Native applications. This approach goes beyond articles – you can adapt it to various use cases like product listings, chat history, or any scenario where you're dealing with large datasets.
Revivie CBD Gummies Reviews Cost & Scam or Legit Read Before Buying?
Published: 2024-05-01 18:26:55

Product Name :- Revivie CBD Gummies

Main Benefits:- Pain Relief, Official Store And Price

Composition:- Natural Organic Compound

Side-Effects:- NA

Rating:- ⭐⭐⭐⭐⭐

Availability:- Online

Where to Buy:- Official Website – {Buy Now Here — Click Here}

Revivie CBD Gummies:- 

It’s essential to give your body time to adjust when starting with Revivie CBD Gummies since everyone reacts differently. Start with a low dose and gradually increase it as needed until you reach the desired effect.

Official Website:- https://worksupplement.com/revivie-cbd-gummies-buy 

Jimdo.Site:- https://revivie-cbd-gummies-usa.jimdosite.com/ 

Official Blogs:- https://sites.google.com/view/revivie-cbd-gummies/ 
https://in.pinterest.com/pin/1032168808336953220/ 
https://revivie-cbd-gummies.blogspot.com/2024/05/blog-post.html 
https://www.eventbrite.com/e/revivie-cbd-gummies-reviews-read-before-buying-supplements-how-it-work-benefits-tickets-895385982577?aff=oddtdtcreator 
https://www.linkedin.com/events/reviviecbdgummiesreviewsreadbef7191473134305173504/ 
https://groups.google.com/g/revivie-cbd-gummies/c/nsIRpHzhTEY 
https://ecosoft.microsoftcrmportals.com/en-US/forums/general-discussion/08620694-d907-ef11-a81c-6045bda1d753 

Recent Tags:-
#RevivieCBDGummies
#RevivieCBDGummiesBuy
#RevivieCBDGummiesOffer
#RevivieCBDGummiesPrice
#RevivieCBDGummiesOrder
#RevivieCBDGummiesPurchase
#RevivieCBDGummiesOfficial
FinWise: Your AI-Powered Financial Advisor 🌟
Tags: cozechallenge, devchallenge, ai, machinelearning
Published: 2024-05-01 18:26:00

*This is a submission for the [Coze AI Bot Challenge](https://dev.to/devteam/join-us-for-the-coze-ai-bot-challenge-3000-in-prizes-4dp7): Bot Innovator.*

## What I Built
FinWise is an AI-powered bot designed to revolutionize personal finance management. It offers personalized financial advice and guidance, helping users create budgets, set financial goals, and make informed decisions about investments, savings, and debt management. FinWise analyzes a user's unique financial situation and provides actionable recommendations tailored to their specific needs.

## Demo
Try out FinWise in the Coze Bot Store: FinWise Bot

<!-- Share a link to your bot in the Coze Bot Store and include screenshots or recordings showcasing a user's chat interface with your bot. -->


## Your Configuration
Here's a look at FinWise's configuration, including prompts and skills used:

<!-- Screenshot or record your bot's configuration, including prompts and skills used.  -->

## Journey

Building FinWise was an incredible learning experience. I started by researching the most common financial challenges people face and how AI could help solve them. I then broke down the bot's functionality into key features like budgeting, goal setting, debt management, and investment advice.

One of the biggest challenges was creating a user-friendly interface that could gather the necessary financial information without overwhelming the user. I spent a lot of time refining the prompts and conversation flow to make it as intuitive as possible.

I'm particularly proud of FinWise's ability to provide personalized recommendations based on each user's unique financial situation. By leveraging AI, the bot can analyze a user's data and offer tailored advice that would typically require a human financial advisor.

Moving forward, I hope to expand FinWise's capabilities to include features like real-time market updates, retirement planning, and integration with popular budgeting apps. I also plan to gather user feedback to continuously improve the bot's functionality and user experience.

Overall, participating in the Coze AI Bot Challenge has been a fantastic opportunity to push the boundaries of what's possible with AI and create a bot that has the potential to make a real difference in people's financial lives.

<!-- Don't forget to add a cover image (if you want). -->

<!-- Thanks for participating! -->