teleren/devto huggingface dataset:
Install TailwindCSS and DaisyUI CSS Plugin with Angular
Tags: tailwindcss, daisyui, angular, sass
Published: 2023-04-15 20:27:33

This blog post is dedicated to giving a well-deserved shoutout to DaisyUI.

[DaisyUI](www.daisyui.com) is a free, open-source plugin for [Tailwind CSS](https://tailwindcss.com/) that offers a collection of beautiful, pre-designed UI components and breathtaking themes (that are easily customisable). 

With over 45 components (and growing), daisyUI makes it easy to create stunning web pages without having to write any custom CSS. DaisyUI includes [components](https://daisyui.com/components/) like carousels, modals, and dropdowns. And the best part is that many of these components are interactional and working without any JavaScript involved.

With daisyUI, I can quickly create a visually appealing user interface. This is especially useful when I am working on my learning or teaching projects, where I don't want to spend any time on styling the page with custom CSS but still want my application to look super nice.


Here is an example of little side project I created for my students and thanks to DaisyUI adding beautiful styles was effortless!


![Movie Database Demo Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kwtpmtin2c0nnro3ufn.gif)

-----------------

### Installation

I am going to assume that your project is created using Angular CLI.

```
ng new my-project
cd my-project
```

Install Tailwind and DaisyUI via npm:

```
npm install -D tailwindcss daisyui
```

Add the tailwind directives for each of Tailwind’s layers to your ./src/styles.scss file.

```scss
/* You can add global styles to this file, and also import other style files */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```

Create tailwind.config.js (manually or use `npx tailwindcss init` command and add daisyui plugin:

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: true,
    styled: true,
    themes: true,
    base: true,
    utils: true,
    logs: true,
    rtl: false,
  },
}
```

#### References:

- [TailwindCSS Install](https://tailwindcss.com/docs/guides/angular)
- [DaisyUI Install](https://daisyui.com/docs/install/)
- [DaisyUI Configuration](https://daisyui.com/docs/config/)
- [DaisyUI Components](https://daisyui.com/components/)
Installing Amazon CodeWhisperer in VS Code
Tags: aws, ai, vscode, tutorial
Published: 2023-04-15 20:23:15

[CodeWhisperer](https://aws.amazon.com/codewhisperer/) by Amazon is an AI Code Generator similar to [GitHub Copilot](https://github.com/features/copilot) by Microsoft but you can use it for free. follow these simple steps to get it up and running:

---

### 1. Install the `AWS Toolkit` extension
>
Search for `AWS Toolkit` in the extension panel on the left and click `install` to install it.

### 2. Disable Telemetry (optional)
>
Click the gear icon under `AWS Toolkit` extension and go to the `Extension Settings`. scroll all the way down and uncheck the `Enable AWS Toolkit to send usage data to AWS.` checkbox.


### 3. Sign up for an AWS Builder ID or Sign in if you already have one
>
•&nbsp;&nbsp;Click on `AWS` at the bottom left of the VS Code window (to the left of `CodeWhisperer`) and you will be asked to choose a connection option.
•&nbsp;&nbsp;Select `Use a personal email to sign up and sign in with AWS Builder ID` (just hit enter)
•&nbsp;&nbsp;Click `Copy Code and Proceed` (click `Open` if you're asked to allow opening an external website)
•&nbsp;&nbsp;Paste the code, click next, and sign up for an account using your email and password
•&nbsp;&nbsp;In the `Allow AWS Toolkit for VSCode to access your data?` prompt, click `Allow`. you can close the browser now and go back to VS Code.
•&nbsp;&nbsp;Click `AWS` at the bottom left again and select `AWS Builder ID`. now there should be checkmarks next to both `AWS` and `CodeWhisperer` indicating you've successfully connected to the service.


### 4. Test the functionality
>
•&nbsp;&nbsp;Open a file in whatever language you're using (JavaScript, Python, etc.)
•&nbsp;&nbsp;Write a comment like `//function that adds two numbers`
•&nbsp;&nbsp;Press `Alt+C` (`Option+C` on Mac), `CodeWhisperer` should show you suggestions about writing the function. you can accept it by hitting `Tab`.


### 5. Enable Auto-Suggestions
>
•&nbsp;&nbsp;You should now have an `AWS` icon on the left panel under `Extensions`. click on it.
•&nbsp;&nbsp;In `Developer Tools` section, click the arrow next to `CodeWhisperer` to open it.
•&nbsp;&nbsp;Click on `Resume Auto-Suggestions`

---

🎉 Congratulations! Now you have a working AI assistant programmer by your side!
Uso do ChatGPT no VSCode
Tags: chatgpt, ai, vscode, programming
Published: 2023-04-15 20:12:00

1. Install ChatGPT addon in VSCode.
2. Get an API key from OpenAI and input when prompted in VSCode.
3. Right click part or all of your code and select ChatGPT-Find Bugs.
4. Click insert from the ChatGPT window to fix your code.

BONUS: ChatGPT will also explain the bug!!

Follow Anshul Sharma for Exponential growth 🚀.
38 berufliches Vorwärtskommen: Der uneigentliche Weg – Wohin verläufst du dich?
Tags: deutsch, career, motivation, 1min
Published: 2023-04-15 19:48:14

Moin Moin,

was führt Leute weg von ihrem Karriere-Weg? Nachdem einige [einen guten Start→](https://dev.to/amustafa16421/22-berufliches-vorwartskommen-ein-gerader-berufsweg-der-anfang-552f) hatten, kommen sie von ihrem Weg ab. Was führt dazu?
Hier einige mögliche Ursachen. Was denkst du dazu?

1. Ein Job oder Auftrag mit einer relativ hohen Vergütung
2. Ein Job bei einem überaus bekannten Unternehmen
3. Befolgung einer Empfehlung eines „Experten“ ( Jemand dessen Meinung der Verläufer aufgrund seiner Fachkenntnis schätzt )
4. Vermeintliche Zukunftssichere Entscheidungen ( z.B. laut Statistiken zu einer Branche )
5. Befolgung der Ratschläge der Verwandtschaft
6. Beeinflussung durch Freunde
7. Der Wunsch gesellschaftlich oder im Bekanntenkreis „gut dazustehen“

Schreibe mir deine Ansichten gerne in die Kommentare.

Beste Grüße,
Mustafa

Austausch mittels E-Mail: mustafa.kevin.dwenger@posteo.de
Betreff: Austausch
Range-based for loop with strings
Tags: cpp, memo
Published: 2023-04-15 19:39:32

**This is post just for myself as a memo.**

I am confused when I wrote range-based for loop, directly putting string as a target.
Putting string as the target of range-based for loop flashed into my mind when I practiced hashmap like:

```
int cnt = 0;
bool flag = true;
  while(flag){
    for(char &e: "balloon"){
      map[e]--;
      if(map[e] < 0) flag = false;
      }
      if(flag) cnt++;
    }
```
However, this while loop finished after the 'n'.
I had no idea about this phenomenon.
This is why, I tested and tried to confirm their movement.

```
int main(void){
    // Your code here!
    for(auto e: "TestStrings"){
        cout << e << ':';
        printf("%X ", e);
    }
    cout << endl;
    string s = "TestStrings";
    for(auto &e: s){
        cout << e << ':';
        printf("%X ", e);
    }
}
```
This code shows:

```
// T:54 e:65 s:73 t:74 S:53 t:74 r:72 i:69 n:6E g:67 s:73 :0 
// T:54 e:65 s:73 t:74 S:53 t:74 r:72 i:69 n:6E g:67 s:73
```
Conclusion: The former has a NULL at its end of the line.
Sebastian's theory
Published: 2023-04-15 19:24:22

[https://www.bankfanz.com/how-to-check-fidelity-bank-account-balance/](https://www.bankfanz.com/how-to-check-fidelity-bank-account-balance/#utm_source=backlinks&utm_medium=search&utm_campaign=darry+ring+us&utm_content=Michelle)
https://plaza.rakuten.co.jp/fidelityaccount/diary/202304150000/
https://peatix.com/user/16871151/
https://www.provenexpert.com/fidelity-bank-code-to-check-balance4/
https://www.producthunt.com/@sebastiann92211
https://www.divephotoguide.com/user/Fidelityaccountbalance9
https://vocal.media/authors/sebastian-nwankwo
https://www.lifeofpix.com/photographers/fidelityaccountbalance9/
https://seedandspark.com/user/fidelity-bank-code-to-check-balance-4
https://rosalind.info/users/Fidelityaccountbalance9/
http://phillipsservices.net/UserProfile/tabid/43/userId/213535/Default.aspx
https://app.roll20.net/users/11865280/fidelity-bank-code-to-check-b
https://speakerdeck.com/fidelityaccountbalance9
https://social.msdn.microsoft.com/Profile/fidelity%20bank%20code%20to%20check%20balance%209
https://camp-fire.jp/profile/Fidelityaccountbalance9
https://plazapublica.cdmx.gob.mx/profiles/Fidelity9/activity
https://www.metal-archives.com/users/Fidelityaccountbalance9
https://storium.com/user/fidelityaccountbalance9
https://trabajo.merca20.com/author/fidelityaccountbalance9/
https://www.intensedebate.com/people/fidelitybank09
https://www.mifare.net/support/forum/users/fidelityaccountbalance9/
https://pinshape.com/users/2614778-fidelity9
http://foxsheets.com/UserProfile/tabid/57/userId/128196/Default.aspx
https://www.kompasiana.com/fidelity9
https://leanin.org/circles/fidelity-bank-code-to-check-9
https://www.credly.com/users/fidelity-bank-code-to-check-balance.a00f39a4/badges
https://www.myminifactory.com/users/Fidelityaccountbalance9
https://www.sqlservercentral.com/forums/user/fidelityaccountbalance9
https://www.longisland.com/profile/Fidelityaccountbalance9
https://guides.co/a/sebastian-nwankwo
https://myanimelist.net/profile/Fidelitybank9
"Swipe Left on Looks: Meet Meld - The Dating App that Cares about Your Personality"
Tags: news, startup
Published: 2023-04-15 19:07:40

Hey there, fellow tech enthusiasts! Today's post is going to be a little different, but still packed with all the geeky goodness you love. As a developer, I'm always tinkering with new technologies, and recently, I found myself diving into the world of React Native. But my inspiration for my latest project didn't come from a coding tutorial or a technical challenge. Nope, it came from my own experiences with dating apps. And let's be real, who hasn't had some hilarious or cringe-worthy moments while using them?

Let's face it, on most dating apps, the first thing you notice about a potential match is their appearance. And while physical attraction is important, it can also lead to some major problems. For example, women can get bombarded with matches, making it nearly impossible to find someone they truly connect with. And men? Well, they often struggle to get any matches at all. (Ouch, that hurts!)



So, I set out to solve these issues with my new app, Meld. Our main goal is to remove the bias of looks from the equation. How are we doing that, you ask? By removing profile pictures from the app! (Yes, we are a bit crazy, but hear us out.)

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

Now, I know what you're thinking - how will people know what each other look like? Well, we're not completely insane. We're still allowing users to upload pictures to their profiles, but these pictures won't be visible until after two users have exchanged at least 15 messages. By doing this, we're hoping to encourage more meaningful connections based on personality and shared interests.

But wait, there's more! In addition to our picture-less profile feature, we've also added a limit to the number of chats a user can have at once. Why, you ask? Because let's face it, juggling ten conversations at once can be overwhelming and stressful. So, we decided to limit our users to four chats at a time, encouraging them to focus on quality conversations instead of quantity.


![4 Matches](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jsj1betz5k0u5dpwlan.png)

So, if you're tired of swiping through endless profiles only to be disappointed by a lack of chemistry, give Meld a try! And once you've had a chance to use the app, don't forget to share your feedback with us. We're always looking for ways to improve the user experience.


![Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b80yqhpu66z38smbzdk7.png)

You can download Meld from the [Google Play Store](https://play.google.com/store/apps/details?id=com.meld.app) and follow us on [Instagram](https://www.instagram.com/get_meld/) to stay up-to-date with the latest news and updates. Please note that **Meld is currently only available in India**, but we're working hard to expand to new markets soon.

Thanks for your support, and we can't wait to hear what you think of Meld - the app that's all about quality connections, not just superficial swipes.
Hierarchical, Recursive Table Component
Tags: svelte, webdev
Published: 2023-04-15 19:07:25

Hello everyone!  I have just finished creating my hierarchical (recursive) table component for [SvelteHack](https://hack.sveltesociety.dev/).  Hoping for the best.  There's a live demo [here](https://svelte-htable-demo.vercel.app/) hosted by Vercel, which by the way makes it super simple to deploy **Svelte** applications, and the repository for the component is [here](https://github.com/webJose/svelte-htable).

The component is available through NPM:

```bash
npm i svelte-htable
```

Let me know whether you like it or not.  Thanks!

---

Also let me know if you would like to see this for **Vue** as well.
Thiis: A Comprehensive JavaScript/TypeScript Package for Efficient Development
Tags: javascript, typescript, opensource, frontend
Published: 2023-04-15 18:54:25

Are you a JavaScript/TypeScript developer looking for a lightweight and easy-to-use package to speed up your development process? Look no further than Thiis - a comprehensive package that provides developers with a set of utility functions and classes for working with arrays, objects, strings, and more.

Thiis is an open-source package that is available on GitHub, making it easy for developers to contribute to its development. It is designed to be lightweight and efficient, making it an ideal choice for developers who want to speed up their development process without adding unnecessary complexity.

One of the key features of Thiis is its array operations. Thiis provides a set of utility functions for working with arrays, such as filter, map, reduce, forEach, and more. These functions can make working with arrays more efficient and easy, saving developers time and effort.

Thiis also provides a set of utility functions for working with objects, such as clone, assign, keys, values, and more. These functions can make working with objects more efficient and easy. Additionally, Thiis provides a set of utility functions for working with strings, such as trim, replaceAll, capitalize, and more.

One of the most useful features of Thiis is its type checking utility functions. These functions can make type checking in JavaScript/TypeScript more efficient and easy. Thiis provides functions for checking whether an object is an object, an array, a string, a number, and more.

Getting started with Thiis is easy. Developers can install the package using npm and then import the required functions or classes into their project. The documentation for Thiis is well-organized and easy to navigate, providing all the required information for developers to get started with the package and use it efficiently.

In conclusion, Thiis is a comprehensive package for JavaScript/TypeScript developers who want to speed up their development process without adding unnecessary complexity. With its array operations, object operations, string operations, and type checking utility functions, Thiis can make working with JavaScript/TypeScript more efficient and easy. Try it out and see how it can benefit your development process!

This article was written by chat GPT after analyzing the package documentation.

Link to GitHub project: 
[https://github.com/Karbashevskyi/thiis](https://github.com/Karbashevskyi/thiis)

Link to documentation: 
[https://karbashevskyi.github.io/thiis/](https://karbashevskyi.github.io/thiis/)
Where to place the done() call in Jest unit tests on a middleware that logs the request body to the db?
Tags: help, node
Published: 2023-04-15 18:25:31

I have asked thsi question:

{% stackoverflow 76024017 %}

I am in progress of making my own middleware that logs the http request body into DB. But I have trouble on testing it because I do not knwo where to place the jest's `done` function.

Any idea on that?

Happy Jesus Resurection (Καλή Ανάσταση for Greek Orthodox)
Better Plugin Collection
Tags: unity3d, plugins, developmen
Published: 2023-04-15 18:22:30

My name is Arki and I develop VR/AR/MR applications based on Unity. Over time, I began to notice that Unity lacked some functionality, so I decided to develop plugins.
The full collection of plugins is [here](https://github.com/techno-dwarf-works/better-plugin-collection/wiki).

Here are some of them:

## Better Attributes

![Better Attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2kfap5wcynrl96mi71a.png)

A plugin that allows you to:

- Choose an implementation for the interface directly in the Inspector;
- Make fields read-only;
- Display a preview of the object/texture in the Inspector;
- Draw Vector3 and Quaternion values in the scene;
- View the Inspector of another object;
- Improved Enum value selection in the Inspector;

### Better Scene Management

This plugin improves the use of scene loading and allows the inspector to display a scene reference field in the project.

## Better Runtime Console

On-screen console, which will be very convenient for viewing logs in the application without the need to connect a debugger or logcat for Android.

### Better Extensions

A set of class extensions, Unity AsyncOperation asynchronous wait extensions, and UI button click wait extensions.

## And what's next?

And next I deal with some very useful plugins.

- Better Validation - a plug-in that allows you to check the values in the inspector field, and check the project of the fields that did not pass the check;
- Better Runtime Diagnostics - this plug-in allows you to output RayCasts, colliders, collision collisions in the application assembly. It will also allow you to display the current statistics of the application, for example, the number of FPS, CPU time, the number of vertices and triangles. And a console with commands that will call methods and return values.
- Better Unity Patterns - a set of basic patterns with examples for convenient and fast development of applications.

## Contacts

If you are interested in my plugins, you can visit my [GitHub](https://github.com/uurha). I also help with studies and blog at [this link](https://t.me/unity_tech_learn).

Thank you for your attention!
Execution Plan In Mariadb (2nd Part)
Published: 2023-04-15 18:22:11

## Interpreting the Execution Plan

The execution plan can be difficult to read at first, but with some practice, you can learn to interpret it effectively. Here are some of the most important columns in the execution plan table:

**id:** This is a unique identifier for each step in the execution plan. The id column is used to show the order in which the steps will be executed.

**select_type:** This column describes the type of SELECT statement that is being executed. There are several possible values for this column, including SIMPLE, PRIMARY, SUBQUERY, and UNION.

**table:** This column shows the name of the table that is being accessed.

**type:** This column shows the type of access that is being used to access the table. There are several possible values for this column, including ALL, index, range, and ref.

**possible_keys:** This column shows the indexes that could potentially be used to access the table.

**key:** This column shows the index that is actually being used to access the table.

**rows:** This column shows the number of rows that will be examined for each step in the execution plan.

Using the information in the execution plan, you can identify areas where you can optimize your query. For example, if you notice that the optimizer is performing a full table scan instead of using an index, you may want to consider adding an index to the table.

## CONCLUSION

The execution plan is a powerful tool that can help you optimize the performance of your MariaDB queries. By analyzing the plan, you can identify areas where you can improve the efficiency of your queries, resulting in faster and more responsive database applications. If you are new to MariaDB, it is highly recommended that you spend some time learning how to use the execution plan, as it can be an invaluable resource for optimizing your database queries.
Execution Plan In Mariadb (1st Part)
Published: 2023-04-15 18:19:35

MariaDB is an open-source database management system that is a fork of MySQL. It is widely used by developers for its reliability, scalability, and ease of use. In this article, we will discuss the **execution plan** in MariaDB, which is a powerful tool that helps developers optimize the performance of their database queries.

## What is an Execution Plan?

An execution plan is a detailed description of how MariaDB will execute a specific SQL query. It contains information about the order in which tables are accessed, the indexes used, and the operations performed on the data. The execution plan is generated by the query optimizer, which is a component of the MariaDB server that is responsible for determining the most efficient way to execute a query.

The query optimizer considers a variety of factors when generating an execution plan, including the size of the tables involved, the complexity of the query, and the available indexes. By analyzing these factors, the optimizer can choose the best strategy for executing the query, which can result in significant performance improvements.

## How to Generate an Execution Plan

MariaDB provides several ways to generate an execution plan for a SQL query. The most common way is to use the EXPLAIN keyword, which displays information about the execution plan in a tabular format. To use the EXPLAIN keyword, simply prefix your SQL query with it, like this:

`EXPLAIN SELECT * FROM my_table WHERE my_column = 'value';`

When you run this query, MariaDB will display a table that describes the execution plan for the query. The table will contain information about the tables that are accessed, the indexes used, and the operations performed on the data.

**NOTE:**

Interpretation of Execution Plan is explained in 2nd part of the article. ([2nd part](https://dev.to/umerfreak/execution-plan-in-mariadb-2nd-part-31eg))
Task runner for NextJS
Tags: nextjs, backgroundworker, taskrunner, backgroundtasks
Published: 2023-04-15 17:36:39

Vercel is the most popular platform to spin up an app these days. Even though it has Cron like features, one missing piece is background task runner.

In looking for solutions, I found two shiny looking options.
1. https://defer.run/
2. https://www.inngest.com/


Ultimately I decided to go with https://www.inngest.com/ because of it's open source ethos and the ability to run it locally.

https://github.com/maddyonline/coffee-app

There are some nuances about running it in dev mode vs staging mode vs prod mode. But overall pretty doable.