teleren/devto huggingface dataset:
Cara Install Laravel + Shadcn UI
Published: 2024-06-28 10:18:26

Hari ini sudah banyak sekali _Framework CSS_ seperti Bootstrap, TailwindCSS, Bulma dan masih banyak lagi yang dimana dapat mempercepat _developer_ dalam membuat tampilan halaman website. [Shadcn UI ](https://ui.shadcn.com/) Merupakan situs yang menyediakan kumpulan komponen yang _re-usable_ atau dapat digunakan kembali dan siap digunakan yang dibangun menggunakan _Framework TailwindCSS_. Sebetulnya masih banyak _Component Library_ yang bisa digunakan seperti [Preline UI](https://preline.co/), [RippleUI ](https://www.ripple-ui.com/), dan [Tailwind Elements](https://tw-elements.com/).

Tujuan saya disini adalah bagaimana meng-install ShadcnUI, saat ini ada beberapa framework yang support untuk menggunakan ShadcnUI ini. yaitu Nextjs, Vite, Gatsby, Remix, Astro dan laravel. Disini saya akan menggunakan Laravel + Breeze React sebagai frontend nya.

1. Tahapan yang paling pertama yaitu membuat project Laravel + Breeze

```
laravel new laravelshadcn
```

jika melalui composer

```
composer create-project laravel/laravel laravelshadcn
```

2. Setelah itu pilih breeze sebagai _starter kit_

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

3. Lalu pada tahapan _breeze stack_ saya memilih _React_ sebagai _frontend_ kemudian untuk fitur opsional nya saya memilih Inertia SSR
dan untuk testing framework nya pilih PHPUnit, pada bagian Git Repository nya itu tergantung anda. Disini saya memilih No/Tidak.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv7x8nrz8kes0duja9a5.png)
Simple Angular Log Service
Tags: programming, angular, beginners
Published: 2024-06-29 05:20:58

Logging is an essential part of any software development process.

It helps developers debug applications, understand workflows, and track down issues.

In this article, I would like to introduce a simple logging service that can be easily integrated into our Angular application.

It uses an enumerated log level to control what messages are logged based on the current environment configuration.

**Log Levels Enum**

```ts
export const LOG_LEVEL = {
  info: 1,
  error: 2,
  warn: 3,
  debug: 4,
  all: 5,
} as const;
```

**Environment Configuration**

```ts
// environment.ts (Development)
export const environment = {
  production: false,
  logLevel: LOG_LEVEL.debug
};

// environment.prod.ts (Production)
export const environment = {
  production: true,
  logLevel: LOG_LEVEL.info
};
```

**Log Service**

```ts
export class LogService {
  log(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.debug) {
      console.log(...[message, ...optionalParams]);
    }
  }

  table(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.debug) {
      console.table(...[message, ...optionalParams]);
    }
  }

  trace(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.debug) {
      console.trace(...[message, ...optionalParams]);
    }
  }

  error(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.error) {
      console.error(...[message, ...optionalParams]);
    }
  }

  debug(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.debug) {
      console.debug(...[message, ...optionalParams]);
    }
  }

  info(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.info) {
      console.info(...[message, ...optionalParams]);
    }
  }

  warn(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.warn) {
      console.warn(...[message, ...optionalParams]);
    }
  }
}
```

**And how to Use the Log Service**

To start using the LogService, just inject it into our components or services like this:

```ts
export class AppComponent implements OnInit {
  private logService = inject(LogService);

  ngOnInit() {
    this.logService.info('Application initialized');
    this.logService.debug('Debugging information');
  }
}
```

**Conclusion**

By using this LogService, we can gain better control over your logging output, ensuring that we have detailed logs in development while keeping our production environment clean and efficient.

---

I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

- **Medium:** https://medium.com/@nhannguyendevjs/
- **Dev**: https://dev.to/nhannguyendevjs/
- **Hashnode**: https://nhannguyen.hashnode.dev/
- **Linkedin:** https://www.linkedin.com/in/nhannguyendevjs/
- **X (formerly Twitter)**: https://twitter.com/nhannguyendevjs/
- **Buy Me a Coffee:** https://www.buymeacoffee.com/nhannguyendevjs
Invisible braces cost in pune
Tags: invisiblebraces, dentist, ortho
Published: 2024-06-29 05:41:59

 Invisible braces cost in pune
 Clear aligners: The cost of Clear Aligners in Pune is varying Rs.1,00,000 to Rs. 2,00,000.Cost of Invisible braces is dependent upon its type and its quality of material. Your orthodontist can give you a better estimate of the price.
COST OF Invisible braces AT DECCAN DENTAL CLINIC 
https://www.bestorthodontistbracespune.in/invisalign.html
JavaScript 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 and 𝗠𝗮𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲
Tags: programming, javascript, beginners
Published: 2024-06-29 05:38:33

**JavaScript** has two secret queues to handle tasks: 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 and 𝗠𝗮𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲.

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

 ✨𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲: It's like a super-fast line where tiny tasks wait their turn. These tasks are usually promises or mutation observers. When a promise resolves or a mutation happens, they jump into the Microtask queue.

✨ 𝗠𝗮𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲: It's like a regular line for more significant tasks. Think setTimeout, callbacks, or fetching data from a server. When these tasks need handling, they join the Macrotask Queue.

**JavaScript** always finishes what it's doing before checking these queues. But it prioritizes 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 over 𝗠𝗮𝗰𝗿𝗼𝘁𝗮𝘀𝗸.

---

I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

- **Medium:** https://medium.com/@nhannguyendevjs/
- **Dev**: https://dev.to/nhannguyendevjs/
- **Hashnode**: https://nhannguyen.hashnode.dev/
- **Linkedin:** https://www.linkedin.com/in/nhannguyendevjs/
- **X (formerly Twitter)**: https://twitter.com/nhannguyendevjs/
- **Buy Me a Coffee:** https://www.buymeacoffee.com/nhannguyendevjs
I created a note-taking service with a customizable AI assistant!
Tags: webdev, ai, product, react
Published: 2024-06-29 05:24:12

I really like taking notes. Two of my favorite applications are Obsidian and Notion. However, there were some features I always dreamed of while using these applications. For example, going to ChatGPT while taking notes was really uncomfortable, and due to my lack of ability, I had to use a text-to-speech service to re-understand my notes. I wondered, why can't I make my own service to satisfy my needs? So, I made it!

**The service is called [ScriptMind](https://scripmind.com/)**

So, what is ScriptMind? ScriptMind is a service that helps you create notes easily with AI-friendly features.

### These are ✨ Key Features:

1️⃣ **AI Note-Taking Assistants:** ChatGPT-like assistants will help you while you write your notes.

2️⃣ **Graph:** You can create your "second brain" based on the folder structure or tags of the note.

3️⃣ **TTS:** You can listen to the speech of your note paragraphs.

4️⃣ **STT:** You can transform speech into text.

5️⃣ **Note Helper:** You can convert text into markdown format and also summarize it.

6️⃣ **Customizable AI Assistant (Beta):** You can customize the AI assistant to fit your needs.

## Screenshots

![Notebook page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xtoo32k377jpnhdn67s.png)

![Dashboard Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egr8eogxdfz30zaj64qx.png)

![Community Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crkgg5oow2wqr6k08c08.png)

#### Guides for Using ScriptMind

1. [How to use ScriptMind (English)](https://scriptmind-blog.vercel.app/blog/How%20to%20use%20ScriptMind(En))
2. [How to use ScriptMind (Spanish)](https://scriptmind-blog.vercel.app/blog/How%20to%20use%20ScriptMind(Spanish))
3. [How to use ScriptMind (Korean)](https://scriptmind-blog.vercel.app/blog/How%20to%20use%20ScriptMind(Kr))
Github
Tags: github, code, collaboration, education
Published: 2024-06-29 05:17:07

## 🐈‍⬛ How to Use GitHub

GitHub is a web-based platform for version control and collaboration that enables you to work with other developers on projects. It uses Git for version control, allowing you to track changes in your code and collaborate with others easily.

### 👾 Create an Account and Repository

1. Sign up for a [free account on GitHub](https://github.com/join).
2. Create a new repository by clicking on the &quot;+&quot; icon in the top right corner and selecting &quot;New repository&quot;.
3. Name your repository, add a description, and choose whether to make it public or private. You can also initialize it with a README file.

### 🧑‍💻 Basic Git Commands

Here are some essential Git commands to help you work with GitHub:

- `git add`: Adds files to the staging area.
- `git commit`: Commits changes to the staging area with a message.
- `git push`: Pushes changes to the remote repository.
- `git pull`: Pulls changes from the remote repository.
- `git branch`: Lists all branches in the repository and highlights the current branch.
- `git checkout`: Switches to a different branch or commit.
- `git merge`: Merges changes from one branch to another.

### 🔁 Workflow with GitHub

1. Clone the repository to your local machine using `git clone &lt;repository-url&gt;`.
2. Create a new branch using `git checkout -b &lt;branch-name&gt;`.
3. Make changes to the files and stage them using `git add &lt;file-path&gt;`.
4. Commit the changes using `git commit -m &quot;Your commit message&quot;`.
5. Push the changes to the remote repository using `git push origin &lt;branch-name&gt;`.

### 🅿️ Pull Requests

1. Go to your repository on GitHub and click on the &quot;Pull requests&quot; tab.
2. Click on the &quot;New pull request&quot; button.
3. Choose the base branch (where you want the changes to be applied) and the compare branch (where your changes are located).
4. Review your changes and click on &quot;Create pull request&quot;.
5. Add a description, assign reviewers, and submit your pull request.

## 💁‍♂️ Conclusion

GitHub is a powerful tool that can help you with your software development projects. It is easy to use and has a wide range of features. If you are not already using GitHub, we encourage you to give it a try and explore its potential for enhancing your collaborative workflow.
Melbourne Mediafactory
Tags: auditoriums, theatre, commercialtheatre, recordingstudio
Published: 2024-06-29 05:16:50

**Home theatre Installation services in Kochi**

 We are the most sought-after Home theatre Installation services in Kochi, which provides modern audio-visual systems and services. Sound Sense offers complete solutions in customized Home theatre , Av solution , Acoustics, Pro Audio for Homes, Restaurants, and offices. 
website: (https://melbournemediafactory.com/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4i3z9alrumkgkw2cv42.jpg)
Announcement
Tags: career
Published: 2024-06-29 05:16:38

I graduate from my business for June on the last business day of June. I would like to appreciate for my supporters and apologize for my unsatisfactory results.

It was only a short period of 20 business days since I started business on 3rd June and terminated on 28th. Although I have learned the business for June and have many opportunities in the future, I am also very disappointed that the last business day has come.

By the way, July comes soon. I will do my best using my experience of June.

Thank you.
Zachary Bethel
Tags: musiclessons, education, review, trombone
Published: 2024-06-29 05:12:00

## 🎵 Zachary Bethel: Exceptional Music Lessons for Brass Instruments

Discovering [Zachary Bethels music lessons](https://www.zacharybethel.com) has been an immensely rewarding experience. His approach to teaching brass instruments, particularly trombone, is both comprehensive and highly engaging, making him a standout educator in the field.

[Zachary Bethel](https://www.zacharybethel.com/lessonsandservices)

### The Essence of Zachary Bethels Teaching

Zachary Bethel is a multifaceted trombonist and educator based in Madison, Wisconsin. His lessons are tailored to suit students of all ages and skill levels, ensuring that each individual receives personalized instruction that meets their unique needs and goals.

### Why Zachary Bethels Lessons Stand Out

Here are some reasons why Zachary Bethels music lessons are exceptional:

- **Comprehensive Instruction:** Zachary offers detailed and structured lessons that cover all aspects of brass playing, from technical proficiency to musicality.
- **Personalized Approach:** Each lesson is tailored to the student&#x27;s skill level and goals, ensuring a personalized and effective learning experience.
- **Expertise and Experience:** Zachary&#x27;s extensive background in performing and teaching brass instruments provides a solid foundation for his lessons.
- **Flexible Scheduling:** Lessons can be conducted in-person within the Madison area or online, providing flexibility for students.

### What You Can Expect

Here are some aspects of Zachary Bethels music lessons that you can look forward to:

- **Technical Proficiency:** Lessons focus on developing a strong foundation in tone production, technique, and overall musicality.
- **Advanced Methods:** For more experienced students, Zachary incorporates advanced techniques and discussions on music history and theory.
- **Performance Opportunities:** Students have the chance to apply their skills in various performance settings, including contemporary gigs and ensemble coaching.

### Final Thoughts

Zachary Bethels music lessons are a treasure trove of knowledge and inspiration. His commitment to providing high-quality, practical instruction has been a key motivator for anyone interested in mastering brass instruments.

[Visit Zachary Bethels Website](https://www.zacharybethel.com)

If you are passionate about music and looking to improve your skills on the trombone or other brass instruments, Zachary Bethels lessons are a must-try. Dive into his rich content and let it transform your musical journey as it has ours.
Galvanized Steel Pipe: Cost-Effective Alternative to Stainless Steel in Many Applications
Tags: design
Published: 2024-06-29 05:09:32

Galvanized steel pipes are durable in nature. They are superior to ordinary steel pipes as they do not readily rust. Galvanized steel pipes offer numerous benefits and for that reason they are extensively employed in lots of areas.

Galvanized Steel PipeAdvantages
 Galvanized steel pipe isfilling in as an incredible material that gives a durable solutionagainst corrosion and rust. They are temperature and pressure resistant. Galvanized pipes are sold at more affordable prices than cold roll stainless steel coil pipes.

Galvanized Steel Pipe - New Things: A improvised version of galvanized steel pipes can be made by coating a zinc layer on it Falls in this category. This keeps the pipes from rusting and corroding, which will also extend their lifespan.

In Conclusion: When it comes to your family and residence, nothing beats the safety of galvanized steel pipes that do not give dangerous emissions. Well they are fireproof which Is great when you dealing with flammable stuff.

Galvanized Steel Pipe: 
Opt it as both indoor and outdoor uses is suitable for galvanizing the steel of wrought iron pipe. This includes in plumbing, irrigation, gas and oil pipelines but also building stainless coil materials such as construction industry; automobiles being built inside auto plants can carry out welding as a part of most fully automated assembly linesn other than manufacturing & factory automation.

Galvanized Steel Pipe | Galvanized steel pipes are easy to install and require little maintenance. The point is that at right storage kept safe. Always wear gloves and safety gear when working with these pipes.

High Quality Service: Galvanized steel pipes have a long lifespan, so there are fewer repair costs compared to other pipe types. They rarely rust [ so resistant to a common form of wear and tear] saving their owner from expensive repairs.

When and Where to Galvanized Steel Pipe is Used:Galvanized steel pipes are used in a range of water treatment plants, wastewater protocolsinsence as well as the adding up chemicals regularities; Houses, buildings and cars use pipes to transport water and gas.

Wrap Up 
 There you have it, galvanized steelpipes make a lot more sense rather than stainless Stillstin many applications. Advantages in plenty, and now of them benefitting more with the new technologies available. These galvanized stainless steel coill pipes have been preferred choices for business and industrial systems as they are safe, powerful along with easy to maintain.
Leeaux Natureal Review
Tags: naturalmeals, leeauxnatureal, review, healthyeating
Published: 2024-06-29 05:06:52

## 🍽️ Leeaux Natureal: Elevating Healthy Eating

Recently, I had the pleasure of experiencing [Leeaux Natureal](https://www.leeauxnatureal.com/), and I&#x27;m thrilled to share my review of their exceptional natural meals and catering services.

![Leeaux Natureal](https://www.leeauxnatureal.com/logo.jpg)

### The Heart of Leeaux Natureal

Leeaux Natureal is dedicated to offering nutritious, organic meals and top-notch catering services. Their mission to promote healthy lifestyles is reflected in their carefully selected ingredients and sustainable practices.

### Why Leeaux Natureal Shines

Leeaux Natureal stands out for several reasons:

- **Organic Ingredients:** Their menu features only organic, non-GMO ingredients, ensuring meals are as natural and healthy as possible.
- **No Seed Oils:** They avoid using seed oils, opting for healthier alternatives.
- **Eco-Friendly:** The company is committed to sustainability, using eco-friendly packaging and practices.
- **Exceptional Taste:** Despite the focus on health, the meals are delicious and satisfying.

### Culinary Delights

The variety and quality of Leeaux Natureal&#x27;s offerings are impressive:

- **Takeout and Delivery:** Convenient options for enjoying wholesome meals at home.
- **Catering Services:** Perfect for events, providing nutritious and tasty options for guests.
- **Menu Variety:** A diverse range of dishes, all designed to promote well-being.

### My Personal Experience

Ordering from Leeaux Natureal was seamless, and the delivery was prompt. The meals I tried were fresh, flavorful, and nourishing. The attention to detail in both the ingredients and preparation was evident, making each meal a delight.

### Sustainable and Ethical

Leeaux Natureal&#x27;s commitment to the environment is admirable. Their use of sustainable packaging and ethical sourcing practices make them a standout choice for eco-conscious consumers.

### Conclusion

Leeaux Natureal is an excellent choice for those seeking healthy, delicious meals and catering services. Their dedication to quality, health, and sustainability sets them apart, making them a top recommendation for anyone looking to improve their diet naturally.

[Visit Leeaux Natureal](https://www.leeauxnatureal.com/)

For those in search of premium natural meals and catering services, Leeaux Natureal is the go-to source. Their commitment to quality and well-being ensures a positive experience with every order.
Method of Installing C++ extensions in Visual Studio Code (VS Code)
Tags: webdev, coding, learning, beginners
Published: 2024-06-29 05:04:52

## **Installing C++ extensions in Visual Studio Code (VS Code)**
Installing C++ extensions in Visual Studio Code (VS Code) is straightforward and typically involves these steps:
**Open Visual Studio Code**: Launch VS Code on your computer.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mut5zxvon6zv77v89c9w.png)
**Open Extensions View**: Click on the Extensions icon in the Activity Bar on the side of the window, or press Ctrl+Shift+X (Cmd+Shift+X on macOS) to open the Extensions view.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw54d2djv3dhaover1pj.png)
**Search for C++ Extension**: In the Extensions view, type "C++" in the search bar. You should see extensions related to C++ programming.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbc1bky40daofihfnjaj.png)
**Select the Extension**: Look for "C/C++" by Microsoft (often the first search result). Click on the "Install" button to install this extension.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iworv75y0scf025aqqr.png)
**Wait for Installation**: VS Code will download and install the extension. You'll see a progress bar indicating the installation status.
**Restart VS Code (if required)**: Sometimes, VS Code may prompt you to restart the editor to enable the newly installed extension. If prompted, click "Restart".
**Verify Installation**: After installation and possibly restarting, the C++ extension should be ready to use. You might notice additional features like IntelliSense for C++ code.

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


## **Optional Steps**
**Customization**: Explore the extension settings (Ctrl+, or Cmd+, to open Settings) to customize the behavior of the C++ extension.
**Additional Tools**: Depending on your project needs, you might also install other related extensions for C++ development, such as Git integration or debugging tools.