teleren/devto huggingface dataset:
React Custom Hook: useRenderCount
Tags: webdev, javascript, programming, react
Published: 2023-08-25 21:00:00

In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "useRenderCount" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

Github: https://github.com/sergeyleschev/react-custom-hooks
```javascript
import { useEffect, useRef } from "react"

export default function useRenderCount() {
    const count = useRef(1)
    useEffect(() => count.current++)
    return count.current
}
```
The useRenderCount hook utilizes React's useEffect and useRef hooks to keep a count of renders. With each render, the count is incremented, providing you with real-time feedback on the component's render frequency.

One of the major advantages of using **useRenderCount** is its simplicity. By abstracting the logic into a reusable hook, you can easily integrate it into any component without cluttering your codebase. Additionally, it provides a clear and concise way to monitor render behavior, which can be crucial for performance optimization and debugging.
```javascript
import useRenderCount from "./useRenderCount"
import useToggle from "../useToggle/useToggle"

export default function RenderCountComponent() {
    const [boolean, toggle] = useToggle(false)
    const renderCount = useRenderCount()
    return (
        <>
            <div>{boolean.toString()}</div>
            <div>{renderCount}</div>
            <button onClick={toggle}>Toggle</button>
        </>
    )
}
```
This versatile hook can be applied in various scenarios. For instance, when you're developing a complex component that exhibits unexpected rendering patterns, useRenderCount helps you pinpoint the problem by showing the exact number of renders. It is also handy for measuring the impact of certain optimizations or refactoring techniques, allowing you to assess their effectiveness.

To get started, simply import the _useRenderCount_ hook and call it within your component. You can see its power in action by checking out the RenderCountComponent example above. By combining useRenderCount with other custom hooks like useToggle, you can build interactive components while keeping an eye on render counts.

Full Version | React Custom Hooks:
https://dev.to/sergeyleschev/supercharge-your-react-projects-with-custom-hooks-pl4
Discovering the Magic of 'do-while' Loops in C Programming
Tags: lowlevelprogramming, c, cleancode
Published: 2023-08-25 20:21:42

Hello there, curious minds and aspiring programmers! Today, let's take a journey into the world of C programming. Don't worry if you've never coded before; we're going to explore an exciting concept called loop structures. Imagine loops as a way for your program to repeat certain tasks efficiently. Among these loops, there's one gem we're going to spotlight: the 'do-while' loop.

Unveiling the Mystery of 'do-while' Loops:

Let's paint a simple picture. Imagine you're writing a computer program using C, and you have a task that needs to be repeated, like checking if an entered number is valid. You could use different types of loops, but today, let's focus on the friendly 'do-while' loop.

1. Achieve More with Less Code:
Here's the cool thing: the 'do-while' loop lets you achieve tasks using fewer lines of code. Unlike some other loops, the 'do-while' loop ensures that the code inside it is executed at least once, even before checking if a condition is met. This means you don't need to repeat the same code outside the loop before entering it. The result? Cleaner, more efficient code.

2. Embrace the First Step:
Imagine you want to do something before you even start checking a condition. This is where the 'do-while' loop shines. It makes sure that your code inside the loop is carried out before deciding whether the condition is true or not. This is great for situations where you want certain actions to happen no matter what.

3. Classy Input Checking:
Let's say you're making a program that asks users for input, like their age. You want to make sure they enter a sensible value. The 'do-while' loop is like your trusty sidekick here. It shows the user the prompt before checking if their input is okay. You won't need to repeat the prompt again and again, making the interaction smoother and less cluttered.

4. Making Code Easier on the Eyes:
When writing code, making it easy to read and understand is super important. The 'do-while' loop helps here too. By wrapping the whole loop structure, including the initial step, it simplifies your code. It's like presenting your ideas in a neat package. This makes future changes and updates a breeze, making your coding experience more enjoyable.

Wrapping Up:

As you delve into the world of C programming, remember the 'do-while' loop. It's like a handy tool in your coding toolbox. It can simplify your code, handle input validation with grace, and make your programs easier to understand. With a bit of practice, you'll be creating well-structured, efficient, and easy-to-maintain code.

So, cheers to embracing the magic of the 'do-while' loop in your coding adventures. May your code be neat, your validations rock-solid, and your journey through loops be truly enlightening!

Wishing you happy coding,
Monsif Lam
Dealing with the '--downlevelIteration' Error in TypeScript
Tags: typescript, javascript, webdev, react
Published: 2023-08-25 20:15:52

In the world of TypeScript development, encountering errors is a common occurrence. One such error that developers might encounter is the `Type 'string' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher error` message. This error often arises when you're working with string iterations in a certain configuration.

## Understanding the Error

The error message is quite clear, suggesting that when you're dealing with string iteration, you need to enable the `'--downlevelIteration'` flag or set the `'--target'` compiler option to 'es2015' or a higher version. This error typically shows up when using a for...of loop to iterate over a string.

## Resolving the Error

Let's look at the solutions to resolve this error:

## Using '--downlevelIteration' Flag
To address the error, you can make use of the '--downlevelIteration' flag during compilation. This flag enables downlevel iteration for iterating over strings using a for...of loop. Here's how you can use it:

``` bash
tsc --downlevelIteration your-file.ts

```

## Adjusting the '--target' Compiler Option

Another way to resolve the error is by adjusting the '--target' compiler option to 'es2015' or a higher version in your TypeScript configuration (tsconfig.json):

``` json
{
  "compilerOptions": {
    "target": "es2015",
    // ... other options
  }
}

```
This will allow you to use for...of loops with strings without encountering the error.

## Solution with 'importHelpers'

This option, 'importHelpers', is handy for dealing with common helper functions, like iterating strings. When enabled, TypeScript emits import statements for helper functions. To utilize this::

``` json
{
  "compilerOptions": {
    "importHelpers": true,
    // ... other options
  }
}

```

## Using Array.from()

It's crucial to remember that TypeScript's compiler options provide flexibility. If '--downlevelIteration' and 'importHelpers' don't fit your project's context, alternative solutions, like using Array.from(), exist.:

``` typescript
const myString = "Hello, world!";
const charArray = Array.from(myString);

for (const char of charArray) {
  console.log(char);
}

```

## Conclusion

TypeScript errors might seem daunting at first, but with a bit of understanding and the right adjustments, they can be easily resolved. In the case of the `Type 'string' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher` error, you can either enable the '--downlevelIteration' flag, adjust the '--target' compiler option, or use Array.from() to successfully iterate over strings without any hassle. Keep experimenting and referring to TypeScript's official documentation for the best outcomes. **Happy coding!**
GPT Mental Health Chatbot💛 and Google Calendar API📆
Tags: ai, mentalhealth, firebase, webdev
Published: 2023-08-25 20:09:38

Hi Everyone!
I have been working on a GPT Chatbot that...
1. Talks to you for a while and understands your feelings
2. Asks you 10 questions to plan your day
3. Uses Google Calendar API to Build a schedule for you.

#Motivation to do this
When I was in high school and preparing for a college entrance I achieved high level consistency and my Google Calendar Reflected it. It was more like a diary.

It looked like this.

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

This honestly made me happy because I had some sort of a plan for my life and **I could visually see how it turned out.**

The color scheme was also predefined. Light blue and yellow was work, pink was sleep, orange was neutral events and dark blue was R&R.

I want to share this amazing system that made me happy, made me more productive, and in general a much smarter person.

Also, at the moment _I'm taking BZDs_. **Medications that make you feel "tranquillity"**. I want people to have that feeling without them meds.

## React app + Firebase Functions Express Endpoint

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


This is where all the chats are combined and we get a response from the openAI api.

It is trained to go like a therapy session.

## Google Calendar API

Okay getting the whole OAuth thing working was difficult and even now, my app is still in testing! But the GPT API can call functions and I made some sort of a function to add events to someone's calendar

### Sample Chat response to Calendar

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syvdv1o553wlae2lzyfk.png)
_Please ignore the light time zone mismatch._



So lets talk about testers💛

#Looking for Testers! Try tranqility out now!
As of now if you go to [https://tranqility-ai.web.app/](https://tranqility-ai.web.app/)  I don't think you'll be able to use it unless you are registered by me as a test user.

**But with another account it did work without all this test user stuff, so just try it out, it'll barely take 20 seconds.**

So, if anyone is interested in a light therapy session followed by day planning, **comment your email address and I'll invite you**!
🚀 Xata Launch Week & Hackathon (Aug 28, 2023)
Tags: database, webdev, community
Published: 2023-08-25 20:07:56

Xata Launch Week 2023 starts Monday, August 28th, 2023!

Over the course of the week we'll release some highly requested and anticipated features everyday. We'll be posting announcements daily on our [blog](https://bit.ly/3soIBId) and [~~Twitter~~ X](https://twitter.com/xata). 


**🎁 Enter to win $500**

As part of Xata Launch Week, we will be sponsoring a hackathon and giving away several prizes including:

- 5 prizes of $500 each (💰💰💰💰💰)
- 10 swag packages (📦 + 🧢 + 👕)
 
Hackathon details will be posted on our [blog](https://bit.ly/3soIBId) on Monday, Aug 28th.


**🤩 Don't miss a thing**

New announcements will be posted daily on our blog and Twitter. To get the latest information, [subscribe to our blog](https://bit.ly/3soIBId) or Follow Us on [~~Twitter~~ X](https://twitter.com/xata).


We can't wait to show you what we've been working on!

Sincerely,
🦋 The Xata Team
🚀 Introducing Leet-Gin: Transforming API Development with Go Lang 🚀
Tags: apidevelopment, go, productivity
Published: 2023-08-25 19:59:27


Tired of repetitive tasks slowing down API development? Meet Leet-Gin, the cutting-edge Go Lang framework designed to supercharge your API projects. With its user-friendly CLI, automated scaffolding, and modular architecture, Leet-Gin empowers developers to create high-performance APIs in record time.

🎯 Key Features:
1. CLI Magic: Leet-Gin's CLI simplifies setup, ensuring you're up and running swiftly.
2. Automated Scaffolding: Save hours with auto-generated models, controllers, queries, and routers.
3. Database Integration: Seamlessly connect to preferred databases without hassle.
4. Extendable: Tailor Leet-Gin to your project's unique needs with its modular structure.
5. Powerful Routing: Efficiently handle requests with Gin's robust routing capabilities.
6. Middleware Support: Enhance security and scalability by adding custom logic.

💡 Impact: Leet-Gin accelerates innovation by streamlining development, allowing you to focus on building feature-rich APIs that deliver exceptional value.

🔗 Contribute: Join the open-source community! Shape the future of Leet-Gin on https://github.com/usama-tariq1/leet-gin

Say goodbye to API development hassles. Embrace Leet-Gin and unleash your API's potential! 💪
Set up Hot Reload for Typescript ESM projects
Tags: typescript, node, esm, productivity
Published: 2023-08-25 19:38:24

## TL;DR
Are you moving your projects to use ES Modules but you are facing some unexpected issues? You are not alone in this fight. In this tutorial, you will learn how to set up [nodemon](https://nodemon.io/) along with [ts-node](https://typestrong.org/ts-node/docs/).

Wait, why are we not using [ts-node-dev](https://www.npmjs.com/package/ts-node-dev)? Currently, there are some issues related to TS ESM projects that are making its use harder. Check this [issue](https://github.com/wclr/ts-node-dev/issues/314) for more details.

---

## Hot-Reload?
This technique is handy when you are developing locally. This will automatically watch changes over your source code and updates for you. So, you just have to make your code work and the hot-reloading will do the magic from behind the scenes. This will improve your code development process bringing more efficiency and velocity, as you will not have to restart every time your application.

---

## Let's set it up 🔧

---

### Prerequisites

* Node.js >= v18.12.0

---

### Initial steps

```
mkdir app-esm-hot-reload
cd app-esm-hot-reload
npm init -y
```

---

### Install dev dependencies

```
npm install --save-dev typescript@5.1.6 ts-node@10.9.1 nodemon@3.0.1
```

---

### Initialize TypeScript

```
  npx tsc --init
```

---


### Configuration steps

* **package.json**
```json
{
  ...
  "type": "module",
  "scripts": {
    "build": "tsc",
    "dev": "nodemon src/index.ts",
    "start": "node dist/index.js"
  },
  ...
}
```

* **tsconfig.json**

```json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
  },
  "ts-node": {
    "esm": true
  },
  "exclude": ["node_modules", "./*.ts", "__test__"]
}
```

* Create index.ts
```
mkdir src
touch src/index.ts
```

* Execute script
```
npm run dev
```

* Make changes to the index.ts or any other file

Your app should be reloaded automatically


* **That's it!** Now you can start coding without bothering with restarting your application at every change. 🍺

##### _P.S._ you can refer to this [template](https://github.com/manganellidev/dev.to/tree/main/app-esm-hot-reload).

---

### Useful links
* [nodemon](https://nodemon.io/)
* [ts-node](https://typestrong.org/ts-node/docs/)

---

### Tutorials that might interest you as well
* [Set up a Node.js project + TypeScript + Jest using ES Modules](https://dev.to/mangadev/set-up-a-backend-nodejs-typescript-jest-using-es-modules-1530)

---

I hope this tutorial improves your development process. 

Thank you for reading! Happy coding! 🥳
Supercharge Your Workflow With Chrome Profiles
Tags: testing, browser, productivity, frontend
Published: 2023-08-25 19:37:00

One of the most impactful changes I’ve made to my workflow in the past couple of years is to use [multiple profiles](https://support.google.com/chrome/answer/2364824) in Chrome. This allows me to run Chrome for multiple users at the same time.

You may be thinking, “Ok, that’s kind of nice – but I can already [sign in to different gmail accounts](https://support.google.com/accounts/answer/1721977?hl=en) within the same browser window. So what’s the additional benefit here?” 

### Separate Contexts

The real advantage to maintaining these profiles is that each profile gives you a **separate, isolated Chrome context**. That means that all of your bookmarks, history, extensions, saved usernames, etc. all stay within the context of one profile.

As a developer, this is a lifesaver. I can have one profile linked to my personal email and one linked to my work email. The work one has an uncluttered list of bookmarks that only pertain to work, remembers my test account usernames, only uses extensions that are relevant to work, and doesn’t reveal embarrassing personal search history like "Can you live off of pizza alone?" when I’m in the middle of a demo. If I were to leave my company my personal profile remains unaffected - there’s no need to rearrange my bookmarks or do any kind of cleanup.

### Testing With Multiple User Accounts

You’re probably already done something like this anyway by using an incognito window when testing an application. This does accomplish the goal of keeping your main browser in an isolated environment from your test environment. But separate profiles lets you take this a step further.

Profiles let you test an application with multiple user sessions simultaneously with ease. I regularly keep a separate browser tab open for a demo admin user, a logged out user, and a logged user for applications. Each one has their own history and can persist their session across days or weeks unlike an incognito window which will be lost when it’s closed.

Setting up multiple profiles separates your concerns for how your browser experience is organized. When you only have one Chrome profile, it’s easy for browser data to get out of hand – especially with regard to having too many bookmarks and extensions. Adopting multiple profiles allows you to keep what’s most relevant at hand, without having to open different browsers at the same time.

### It’s Not Just Chrome!

Although I’ve mentioned the profiles feature specifically for Chrome, it also exists in other major browsers like Firefox, Edge, and now even Safari. The same techniques and benefits outlined here can be used in any of those browsers as well.
Introduction To Data Structure and Algorithm
Tags: dsa, javascript, algorithms, programming
Published: 2023-08-25 19:27:18


## Data Structure কি?

Data Structure হল ডাটার গঠন।

মনে করুন, আপনার কাছে ১০০ টা বই আছে। এখন আপনি বই গুলাকে সাজিয়ে গুছিয়ে রাখতে পারেন অথবা যেমন তেমন করে এখানে ওখানে এলোমেলো করে রাখতে পারেন। এখানে আপনি ইচ্ছায় অনিচ্ছায় Data Strucuture ব্যবহার করে ফেলেন। কিভাবে?

আপনি যদি আপনার বইগুলোকে ডাটা হিসেবে মনে করেন তাহলে কি হবে? বই গুলো একটা গঠনে বা ধরনে সাজিয়ে রাখছেন এটাই Data Structure

## Algorithm কি?

সহজ ভাবে বললে Algorithm হলো কোন সমস্যা সমাধানের জন্য নিদির্ষ্ট ধাপ সমূহ।

মনে করুন, আপনার DSA শেখানোর জন্য `Introduction to Data Structure` বইটার প্রয়োজন। বই টা সংগ্রহ করা জন্য নিজের ধাপ গুলো অনুসর করা যেতে পারে,

* প্রয়োজনীয় টাকা নিতে হবে
    
* লাইব্রেরিতে যেতে হবে ।
    
* `Introduction to Data Structure` বই নিতে হবে
    
* বইয়ের মূল্য পরিশোধ করতে হবে।
    
* বাড়িতে ফিরে আসতে হবে
    

উপরে প্রতেকটি ধাপ যখন এক সাথে করা হবে তখন একে Algorithm বলা। আপনার বই কেনার Algorithm ।

## DSA কেন প্রয়োজন?

একটা জিনিসকে কতটা গুরুত্ব দিতে হবে তা নির্ভর করে ওই জিনিসটার প্রয়োজনীয়তার উপর। আপনি যদি একজন ভালো প্রোগ্রামার হতে চান তাহলে DSA সম্পর্কে জ্ঞান থাকা আপনার জন্য বাধ্যতামূলক। DSA সম্পর্কে আপনার যত বেশি থাকবে আপনার প্রোগ্রামিং স্কিল তত বেশি হবে।

উপরে আমি ১০০ টা বই এর একটা ছোট উদাহরন দিয়েছে। ওই ১০০ টা বই দিয়ে উদাহরন দিলে DSA এর গুরুত্ব বা প্রয়োজনীয়তা টা সহজে বুঝতে পারবেন।

মনে করুন আপনার ওই ১০০ টা বই আপনি এদিক সেদিক রেখে দিয়েছেন। খুব ভাল। কোন সমস্যা নাই। সমস্যা টা তৈরি হবে তখন আপনার একটা বইর প্রয়োজন হবে। আপনার এলোমেলো করে রাখার কারনে আপনাকে প্রত্যেকটা বই দেখতে হতে পারে।

এখন যদি আপনার প্রত্যেকটা বই দেখতে হয় তাহলে কি পরিমান সময় ও শ্রম লাগতে পারে? এই রকম যদি প্রতিদিন হয় তাহলে আপনার অনেক সময় নষ্ট হয়ে যাবে।

আপনি যদি এই সময় ও শ্রম নষ্ট করতে না চান তাহলে বই গুলো এলোমেলো করে না রেখে সুন্দর সাজিয়ে রেখে দিতে পারেন। এতে করে পরবর্তীতে বই খুজতে আগের তুলনা অনেক কম সময় ও শ্রম লাগবে। এছাড়াও আপনি চাইলে বিভিন্ন ভাবে বই গুলোকে খুজতে পারেন সেক্ষেত্রে সময় আরো সময় লাগতে পারে।

উপরের ১০০ টা বই এর মত আপনার কাছে অনেক গুলা ডাটা থাকে তাহলে ঐ ডাটাগুলো কোন Structure-এ না দিলে অনেক সময় নষ্ট হয়ে যাবে। আর এখন ভালো প্রোগ্রামার কখনই সময় নষ্ট করবেন না।

উদাহরন হিসেবে, মনে করুন দুই জন ব্যক্তি চাকরি interview দিতে গেছে। এদের ভিতরে একজন DSA জানে আরেকজন জানে না। এখন আপনি তাদের interview নিচ্ছেন। তাদের পরিক্ষা করার জন্য তাদের দুইজনকেই একই সমস্যা দিলেন। কিছুক্ষন পরে ২ জনই সমস্যা টা সমধান করে ফেললেন। তাদের যে DSA জানে তার code running time অন্য জনের তুলনায় অনেক কম লাগছে। এখন আপনি interviewer হিসেবে কাকে চাকরিতে সুযোগ দিবেন?

> **বিঃদ্রঃ একজনই চাকরিতে জয়েন করতে পারবেন।**

উত্তর টা খুবই সহজ। যে DSA জানে তাকেই আপনি সুযোগ টা দিবেন।

তাহলে এবার অবশ্যই DSA প্রয়োজনীয়তা বুঝতে পেরেছেন।

## শেষ

আপনার মতামত জানাতে ভুলবেন না। ধন্যবাদ।

Happy Learing!
🎯 Overcoming Impostor Syndrome in the World of Web Development 💻
Tags: webdev, impostorsyndrome, techcommunity, personalgrowth
Published: 2023-08-25 19:10:39

Hey There 👋

Today, I wanted to talk about something that many of us in the web development community have likely experienced at some point in our careers: Impostor Syndrome. 🤔

Impostor Syndrome is that nagging feeling of self-doubt and inadequacy, even in the face of accomplishments and evidence of competence. It's that voice in our heads that whispers, "Do I really belong here?" or "Am I just lucky, or do I actually know what I'm doing?" Trust me, you're not alone if you've ever had these thoughts. 🙋‍♂️🙋‍♀️

In the fast-paced and ever-evolving world of web development, it's easy to feel like you're falling behind or that you're not as skilled as your peers. But here's the truth: You've come a long way, and you deserve to be where you are! 🚀

Here are a few strategies I've found helpful in combating Impostor 

## **Acknowledge Your Achievements:**
Take a moment to reflect on your journey. Remember the projects you've successfully delivered, the complex code you've tackled, and the problems you've solved. These accomplishments are proof of your skills and dedication.

## **Embrace Continuous Learning:** 
Web development is all about growth. Instead of fixating on what you don't know, focus on what you're learning. Every challenge you overcome adds to your expertise.

Talk About It: Don't be afraid to open up to your colleagues or mentors about how you're feeling. You'll likely find that they've experienced similar thoughts and can provide valuable perspective.

## **Celebrate Progress:** 
Break down your larger goals into smaller milestones. Celebrate each achievement along the way. It's a great way to remind yourself of your capabilities.

## **Remember You're Not Alone:** 
Impostor Syndrome is more common than you think. Many successful developers have dealt with it too. It's a sign that you care about your work and want to do your best.

## **Practice Self-Compassion:**
Treat yourself with kindness. Remember that making mistakes is a natural part of learning and growing. Don't be too hard on yourself.

Let's turn Impostor Syndrome into Impostor Strength! 🦸‍♂️🦸‍♀️ Remember, every challenge you face and overcome is a step forward in your journey. You belong in this field, and your unique skills contribute to the vibrant web development community.

Have you experienced Impostor Syndrome? How do you overcome it? Let's start a conversation and support each other in the comments below! 👇