teleren/devto huggingface dataset:
How to setup path aliases in Vite 2,3 & Typescript
Tags: vite, typescript, path, alias
Published: 2023-08-10 04:31:22

---
title: How to setup path aliases in Vite 2,3 & Typescript
published: true
description: Remove imports resembling ../../assets/* or ../../../assets/* from your code.
tags: vite,typescript,path,alias
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvzwioigmgods0ibazbn.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-10 04:08 +0000
---

<em> As of August 2023, this approach still works with Vite version 2 and 3. So whenever I mention Vite, I am referring to the version 2 and 3. Let me know if you encounter any problems in the comment section.
</em>

Have you ever thought of how to get rid of imports resembling `../../assets/*` or `../../../assets/*` in your vite project? Well, this article will help you to do just that.

## Reasons for Usage
- Simplify referencing the project root.
- Address module resolution errors when modifying files in directories.
- Satisfy your curiosity

## Alias Setup
In this guide, I'll use the alias `@` to denote the project root. This approach is demonstrated using a React project scaffolded with Vite. The technique can be applied to Vue, AngularJS, or other frameworks supporting [TypeScript](https://www.typescriptlang.org/). Learn how to scaffold a Vite app [here](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).

Follow these steps to set up path aliases for TypeScript and Vite:

---

## Steps to Follow
1. Open your project's `tsconfig.json` file.
2. Inside the `compilerOptions` section, add:
   ```json
   "baseUrl": "src",
   "paths": {
       "@/*": ["./*"]
   }
   ```
This informs TypeScript to map module names matching the `@/*` pattern to `src/*` at runtime. Note that paths are resolved relative to the `baseUrl` value of the project.

3. Update your Vite configuration (`vite.config.ts`) as follows:
   ```typescript
   import { defineConfig } from "vite";
   import { resolve } from "path";

   export default defineConfig({
       // ... other configurations
       resolve: {
           alias: {
               "@": resolve(__dirname, "src")
           }
       }
   });
   ```
Ensure you've installed `@types/node` for improved type checking.

4. Before:
   ```js
   import { useState } from "react";
   import reactLogo from "./asset/react.svg";
   import "./App.css";
   ```

   After:
   ```js
   import { useState } from "react";
   import reactLogo from "@/asset/react.svg";
   import "@/App.css";
   ```

Your application should continue functioning correctly. Feel free to explore other options. If this guide was useful, let me know by commenting, sharing and giving a thumbs up.
How to implement dark mode in react js with custom hook.
Published: 2023-08-10 04:25:09

Discover how to effortlessly add dark mode functionality to your React JS app using the useDarkMode hook and SCSS in our step-by-step guide for 2023. Elevate your user experience by following along with our comprehensive tutorial, designed for developers of all levels. With clear instructions and practical examples, you'll learn how to integrate the useDarkMode hook and utilize SCSS to create a visually appealing and dynamic dark mode feature. Enhance your coding skills and take your React applications to the next level by implementing this sought-after user interface enhancement.

{% embed https://youtu.be/eNqSOUp8JyU %}

```cmd
yarn add -D sass
```

### useDarkMode Hook

```ts
import { useEffect, useState } from 'react';

const useDarkMode = () => {
	const [enabled, setEnabled] = useState(false);

	const body = document.body;

	useEffect(() => {

		body.setAttribute('theme', `${enabled ? 'dark' : 'light'}`);

	}, [enabled]);

	useEffect(() => {
		const isDarkMode = window.matchMedia(
			'(prefers-color-scheme: dark)'
		).matches;
		const isLightMode = window.matchMedia(
			'(prefers-color-scheme: light)'
		).matches;

		if (isDarkMode) setEnabled(true);
		if (isLightMode) setEnabled(false);
	}, []);

	return { enabled, setEnabled };
};

export default useDarkMode;
```

Source Code: https://github.com/TheCodersLife/react-useDarkMode-hook
Discovering The Power of ChatGPT for Data Science
Published: 2023-08-10 04:21:53

ChatGPT combines the power of data science and NLP to help you learn and innovate faster. Learn how [data science professionals](https://www.dasca.org/) can use ChatGPT to generate new ideas, evaluate, and quickly analyze large volumes of text. Read more: https://www.dasca.org/world-of-big-data/article/discovering-the-power-of-chatgpt-for-data-science
In the Lands of Technopolis: The Assessments of the Kingdom's Future Wizards
Published: 2023-08-10 04:07:31

**Introduction: The School of Sorcery in Technopolis**

In the mystic lands of Technopolis, where data flows like rivers and clouds harbor knowledge, lies a famed school of sorcery. Herein, the arduous task of evaluating young wizard candidates is carried out. But the wise and elderly DevOps Wizard, known to all as Master Bytebeard, has some critical musings about the process.

**Chapter I: The Collection of Hats and the Riddle of Memorization**

**Master Bytebeard Said:**
"Oh, my collection of hats! Some are dusty, others never worn. Like memorization questions in evaluations, they're there but serve little purpose. The last one I tried on fell apart!"

**Reflections and Lessons:**
**Memorization over Understanding:** Bytebeard makes us laugh with his useless collection of hats, yet his message is clear: Memorization without understanding is akin to a broken hat.
**The Laughter of the Hats:** Humor in learning creates an atmosphere of openness and creativity. It's like a well-fitted, comfortable hat.

**Chapter II: Unrealistic Challenges and Live Interviews: The Dance of the Dragons**

**Master Bytebeard Said:**
"I was once asked to dance with a dragon during an interview. Fire was everywhere! But what did that have to do with being a wizard? Unless they wanted barbecued wizard with a beard!"

**Reflections and Lessons:**
**Challenges without Real Context:** The ludicrous dance with a dragon illustrates how live interviews can be absurd and unrealistic.
**Laughter and Flames:** Bytebeard always finds humor, even in challenging situations. Flames can be warm and welcoming, not only destructive.

**Chapter III: The Rigid and Inflexible Master Evaluators: The Charm of the Trolls and the Eternal Stone**

**Master Bytebeard Said:**
"I've seen stones more flexible than some evaluators. I tried chatting with a troll once; he was more receptive than some examiners. At least the troll had a sense of humor!"

**Reflections and Lessons:**
**Rigidity in Evaluation:** Comparing evaluators to stones and trolls is a humorous yet pointed critique of the lack of empathy and flexibility in evaluation.
**The Wisdom of the Trolls:** Even trolls can teach valuable lessons. Flexibility and humanity are key to meaningful evaluation.

**Conclusion: The Feast of Wisdom in Technopoli**s

The wise and jesting Master Bytebeard has guided us through the pathways of evaluation in Technopolis, laughing at hats, dragons, and trolls. He has shown us that the evaluation process of the kingdom's future wizards needs renewal, where understanding, empathy, and flexibility are the standard.

At his feast of wisdom, all are welcome, and there's always a seat available for those seeking to learn, grow, and laugh.

**Epilogue: The Song of Wizard Bytebeard**

"Hats and dragons, trolls and stones,
Assessing wizards isn't mere trifles and groans.
But with humor and heart, wisdom and wit,
Magic will flourish in our wonderful cit.

So come, friend, and join in the feast,
In Technopolis, where magic never does cease."

Happy spell-casting and enchanted evaluations!
開源產業
Tags: opensource
Published: 2023-08-10 03:45:30

從《[教堂與市集](https://crazyangelo.github.io/Cathedral-and-Bazaar/)》說起，這部兩千年的經典文章告訴我們開源軟體與商業軟體的差異，開源軟體的開發模式像市集，看似無章法卻在無章法中有機般的長出自己的一條路；商業軟體的開發模式則像教堂，團隊遵守嚴謹的教條依照教條的指示建構軟體專案。

然而今日再回頭看這篇二十年前的經典文章，卻令人覺得與當代的開源產業格格不入。

是的，現在的開源，已經形成一種**產業**，再拿教堂、市集來比喻可能都無法恰當的套入，而更像是兩者的混搭。凡是稍具規模的開源產品，源是開了，但是是由背後的資本企業所控制的，企業把產品開源，是有助於提昇在社群間的形像，但這一切努力最終還是以獲利為依歸。

不要誤會，我不是要批判這種現象，我本人也並非佛心來著的人，也是要賺錢吃飯的。

只是最近的一些新聞令我感受到過往那種純粹以熱請壯志為出發點的市集模式的消亡，並因此有點感慨罷了。
Free Webinar on Testing Best Practices
Tags: community, testing, free, beginners
Published: 2023-08-10 03:29:19

Free Webinar on Testing Best Practices

Hello,

Are you interested in learning from top testing experts hailing from renowned companies like Ola, Apple, Amazon, Meta, Element34, and others? If yes, then you are invited to join our free webinar on Testing Stuffs

To register for this webinar, please click on the link

[[Register Now]](https://bit.ly/3QvogLf)

In this webinar, you will learn about 

- Generative AI
- Various Automation tool and best Practices 
- API Testing with various tools with  best Practices
- About Web 3.0
- And Many More  . .. ... 

You will also have the opportunity to ask questions and interact with the speakers during the live Q&A session.


We look forward to seeing you at the webinar!
GitHub - Actions Shortcuts
Published: 2023-08-10 03:01:06

Hello, y'all,
I'd like to share an innovative approach I developed last year for "initiating" GitHub workflow with a single click.

This method involves triggering workflows through PR comments, like in the example below, where you can click "Deploy" to deploy a project to Cloudflare Pages or "Run" to start running tests with Cypress. Once it starts any of the actions, it will update the table according.

It was designed it to be adaptable for different needs, so you can easily change it to support different actions/ideas.


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


If you're interested in using or contributing to the project, feel free to visit the [GitHub repository](https://github.com/diegocatao/actions-shortcuts).
"One-Click" for App Security!
Published: 2023-08-10 02:43:38

Hello everyone!
This is Team LIAPP!

Did you know that you can secure your developed app with utmost ease, all with a single click?
The answer is right here, with LIAPP!

LIAPP provides hassle-free, robust, and highly visible security services, guaranteeing your mobile app's safety with just one effortless click!

LIAPP allows you to focus on your business with simple way of protection and helps you succeed in a great mobile service with strong hacking defense and convenient user-oriented hacking reports.

For an in-depth insight into the security features and what LIAPP has to offer, don't hesitate to explore our dedicated LIAPP website!

[visit LIAPP](https://liapp.lockincomp.com/)
🍳👩‍🍳 Exciting News: Introducing our Recipe Website Built with HTML, CSS, JS, and the Power of Recipe APIs! 👨‍🍳🍲
Tags: html, css, javascript, api
Published: 2023-08-10 02:10:29

Hey Devs,

We are thrilled to announce the launch of our brand new recipe website, where culinary delights meet cutting-edge technology! 🎉 Whether you're a seasoned chef or a kitchen newbie, our website is designed to bring you a delightful cooking experience using the perfect blend of HTML, CSS, JS, and the magic of Recipe APIs.

**🌐 Website Link: http://receipeapp.sadiqmagbul.host20.uk/**

**🔥 Features:**

**🍽️ Expansive Recipe Collection:** Discover a vast collection of recipes ranging from international cuisine to comfort food classics, all at your fingertips.

**🔍 Smart Search:**Find recipes effortlessly using our smart search feature. Filter by ingredients, cuisine type, dietary restrictions, and more!

**📱 Responsive Design:** Our website is designed with a responsive layout, ensuring an optimal user experience across all devices, be it your desktop, tablet, or smartphone.

**🎨 Stunning Visuals:** Feast your eyes on mouthwatering images of each dish. Our carefully crafted CSS ensures a visually appealing presentation.

**📝 Personal Recipe Box:** Create an account and save your favorite recipes to your personalized recipe box. Never lose a recipe again!

**🌐 Technologies Used:**

- 
HTML: The foundation of our website's structure and content.

- 
CSS: Styling magic that gives our website its beautiful and user-friendly design.

- 
JavaScript: Dynamic and interactive elements that enhance your browsing experience.

- 
Recipe APIs: We've harnessed the power of Recipe APIs to fetch the latest and greatest recipes from around the world.

**🚀 What Makes Us Special?**

Our dedication to providing you with a seamless cooking journey sets us apart. We've meticulously crafted a website that combines the art of cooking with the science of web development. Our use of Recipe APIs ensures that our recipe collection is always up-to-date and diverse, guaranteeing you'll find something to suit your taste buds.

**🤝 Calling All Dev Enthusiasts!**

Are you as passionate about coding as you are about cooking? Join our development community and contribute to making our recipe website even more amazing! Whether it's improving the user interface, optimizing website performance, or integrating new APIs, we welcome your expertise.

**👉 GitHub Repository: https://github.com/sadiqshaik123/ReceipeApp**

**👨‍💻 Tech Stack:**

HTML5
CSS3
JavaScript (ES6+)
Git (Version Control)
Node.js (for server-side enhancements)

**🙌 Get Involved:**

Your feedback and suggestions are invaluable to us. As we continue to evolve, we'd love to hear your thoughts on how we can make the website even better. Join discussions on our GitHub repository and share your ideas with fellow developers.

🎉 Together, let's create a hub where the love for coding meets the joy of cooking! Visit http://receipeapp.sadiqmagbul.host20.uk/ and embark on a culinary adventure today. 🍽️👨‍🍳👩‍🍳

Happy cooking and coding!

Best regards,
Sadiq
https://www.linkedin.com/in/sadiqshaik123/
http://sadiqmagbul.host20.uk/
Vue Transitions can't use for nested routes's KeepAlive
Published: 2023-08-10 01:44:33

The following scenario is what I encountered while using the soybean-admin frontend UI framework. 

When using nested routes, the KeepAlive component caches routed elements. However, when reusing them, the transition animation component cannot place the elements. 

This issue arises because the frontend UI framework automatically retains components of the secondary menu, leading to this problem. I am not certain whether the root cause is the KeepAlive or the Transition component, but in any case, excluding components with nested routes from entering the cache can resolve this problem.

The following is the original code where the problem occurred
[soybean-admin/blob/v0.10.3](https://github.com/honghuangdc/soybean-admin/blob/v0.10.3/src/layouts/common/global-content/index.vue)
How to Run Code & Manage Files on Raspberry Pi Pico via CLI
Tags: raspberrypi, micropython, cli
Published: 2023-08-10 01:30:40

{% embed https://www.youtube.com/watch?v=1QmhMPD4idI %}

Running code through the command line can be lightweight and convenient for some users. Most importantly, it can be used to create some automation on your local computer by automating the runtime of scripts on your device. In this tutorial learn how to quickly set up the adafruit-ampy CLI tool to start running and managing code on the Pico without the need for an IDE like Thonny, VSCode, etc.

Before we get started do not forget to subscribe and support the channel!

**Subscribe:**

Youtube

**Support:**

https://www.buymeacoffee.com/mmshilleh

**STEPS**
`adafruit-ampy` is a Python tool that allows you to interact with MicroPython-based boards, such as the Raspberry Pi Pico, over a serial connection. It provides a way to manage files on the board, upload Python scripts, and perform various file-related operations.

Here's how you can use `adafruit-ampy` with your Raspberry Pi Pico W to interact with it over the serial port:

**Installation**

Make sure you have Python installed on your computer. You can then install `adafruit-ampy` using pip, the Python package manager:

- pip install adafruit-ampy

**Connecting Your Raspberry Pi Pico**

Connect your Raspberry Pi Pico to your computer using a USB cable. You might need to install drivers, depending on your operating system.

**Find the Serial Port**

You'll need to identify the serial port that your Pico is connected to. On Linux and macOS, you can often find this information by running:

- ls /dev/tty*

Look for a port that represents your Pico (e.g., `/dev/ttyUSB0` on Linux or `/dev/tty.usbmodem` on macOS). You can also easily find this in Thonny on the bottom right.

**Using adafruit-ampy**

Once you have `adafruit-ampy` installed and your Pico connected, you can use it to manage files on the Pico. Here are some common commands:

- To list files on the Pico:

ampy --port /dev/ttyUSB0 ls

- To upload a file to the Pico:

ampy --port /dev/ttyUSB0 put your_file.py

- To download a file from the Pico:

ampy --port /dev/ttyUSB0 get remote_file.py local_file.py

- To remove a file from the Pico:

ampy --port /dev/ttyUSB0 rm your_file.py

- To run a Python script on the Pico:

ampy --port /dev/ttyUSB0 run your_script.py

Replace `/dev/ttyUSB0` with the actual serial port of your Pico.

Remember that `adafruit-ampy` assumes that your Pico is running MicroPython firmware. If you haven't installed MicroPython on your Pico, you'll need to do that first.

**Conclusion**

Hope you learned something new and let me know if you have any questions in the Youtube comments. Do not forget to subscribe and I hope I potentially made your life easier.
A simple canvas drawing web app with responsive UI, Made with React
Tags: drawing, canvas
Published: 2023-08-12 20:11:19

---
title: A simple canvas drawing web app with responsive UI, Made with React
published: true
date: 2023-08-10 00:23:00 UTC
tags: Drawing,Canvas
canonical_url: https://reactjsexample.com/a-simple-canvas-drawing-web-app-with-responsive-ui-made-with-react/
---

# Flatdraw
 ![A simple canvas drawing web app with responsive UI, Made with React](https://reactjsexample.com/content/images/2023/08/code_2023-08-23-18-04.jpg)

A simple canvas drawing web application with responsive UI. Built using [TypeScript](https://typescriptlang.org), [React](https://react.dev), and [Next.js](https://nextjs.org).

**Live demo:** [flatdraw.com](https://flatdraw.com)

[![A simple canvas drawing web app with responsive UI, Made with React](https://github.com/diogocapela/flatdraw/raw/main/docs/screenshot.png)](https://flatdraw.com)

## Requirements

- [Node.js](https://nodejs.org) (the specific version is defined in the [`.nvmrc`](https://github.com/diogocapela/flatdraw/blob/main/.nvmrc) file)

## Getting started

Copy the content of `.env.example` to a new `.env` file and fill in the required environment variables. You can get your Unsplash API keys [here](https://unsplash.com/developers).

```
cp .env.example .env
```

Install all the dependencies.

```
npm install
```

Run the development server.

```
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## License

Open source under the terms of the [MIT License](https://github.com/diogocapela/flatdraw/blob/main/LICENSE).

## GitHub

[View Github](https://github.com/diogocapela/flatdraw?ref=reactjsexample.com)
A React App that interfaces with the Spotify API to allow users to search for artist
Tags: spotify, apps
Published: 2023-08-12 20:12:10

---
title: A React App that interfaces with the Spotify API to allow users to search for artist
published: true
date: 2023-08-10 00:10:00 UTC
tags: Spotify,Apps
canonical_url: https://reactjsexample.com/a-react-app-that-interfaces-with-the-spotify-api-to-allow-users-to-search-for-artist/
---

# DiscographyBrowser
 ![A React App that interfaces with the Spotify API to allow users to search for artist](https://reactjsexample.com/content/images/2023/08/code_2023-08-23-03-37.jpg)

![A React App that interfaces with the Spotify API to allow users to search for artist](https://github.com/nxrada/DiscographyBrowser/raw/main/.readme/readme-app-screenshot.png)

DiscoBrowser is a React.js application that interfaces with the Spotify API to allow users to search for an artist and view their albums. Key functionalities include:

- **Authentication**
  - Client credentials stored in a secure .env file are read into the React application, which then utilizes them to authenticate with the Spotify API, fetching an access token for further requests.
- **Searching for an artist**
  - Users can input an artist’s name in a search bar, and the application fetches the artist’s ID.
- **Displaying albums**
  - Once the artist’s ID is retrieved, the application fetches all the albums related to that artist and displays them in a grid format using Bootstrap cards.
  - Within the card, the album artwork is displayed, as well as the album’s title, # of tracks, and release date.
- **Navigation to Spotify**
  - Upon clicking on the album’s artwork (per Spotify’s Developer agreement mandate), the user is brought to the Spotify page for that album.

## Dev Process

This project was developed using Visual Studio Code as the code editor. The application utilizes Node Project Manager, as well as React.js, React hooks (useState, useEffect), React-bootstrap components, and Bootstrap CSS. All Spotify API calls were written manually, without the use of wrapper libraries.

## Testing

While I wish I could say that I followed best-practices and used a unit testing suite such as Jest, that simply was not the case. This project had significant time constraints, and thus testing was limited to manual tests with console logging. Errors are handled via console logs, as well as catch blocks around any fetch operations that eliminate main failure points.

## GitHub

[View Github](https://github.com/nxrada/DiscographyBrowser?ref=reactjsexample.com)
#DEVDiscuss: AI Coding Tools
Tags: devdiscuss, ai
Published: 2023-08-09 23:02:14

---
title: #DEVDiscuss: AI Coding Tools
published: true
description: 
tags: devdiscuss, ai
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f92fzhfxojcul2gejan.jpg
---
Time for #DEVDiscuss — right here on DEV 😎

{% embed https://dev.to/catalinpit/should-new-developers-use-ai-coding-tools-2bfc %}

Inspired by @catalinpit's Top 7 post, tonight’s topic is... AI Coding Tools!

### Questions:

- **What are the most significant benefits of using AI coding tools? Drawbacks?**
- **How do you see AI coding tools evolving over the next few years?**
- **What advice would you give to those who are hesitant to use AI coding tools?**
- **Any triumphs, fails, or other stories you'd like to share on this topic?**