teleren/devto huggingface dataset:
What import alias would you like configured?
Tags: nextjs
Published: 2023-03-01 18:02:04

I'm building my personal website with Next.js and I came across this question after running `yarn create next-app --typescript`:

```? What import alias would you like configured? › @/*```

![Screenshot of my terminal while going through the create-next-app wizard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qcgzcnhh2ro8z1hslp8.png)

I'm familiar with the concept of [import aliases](https://nextjs.org/docs/advanced-features/module-path-aliases), but I didn't know how Next expected this question to be answered. Usually, I use multiple import aliases. I might use `@styles`, `@components`, `@hooks`, etc.

So I decided to experiment. I typed `@components` into the prompt, and I got this response back:

```› Import alias must follow the pattern <prefix>/*```

Got it. So then I tried `@components/*`, and my app was created. I checked my `tsconfig.json` (or `jsconfig.json`) and compared it to an app that used the default `@/*`.

```
// tsconfig.json with default (@/*)
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  ...
}
```
```
// tsconfig.json with test (@components/*)
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./*"]
    }
  },
  ...
}
```

What came out of the test is not what I wanted. In the past, I've used a pattern like this:

```
// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"],
      "@styles/*": ["styles/*"],
      "@hooks/*": ["hooks/*"]
    }
  },
  ...
}
```

Which allowed me to reference imports like this:

```
import Button from '@components/Button';
```

Using the default (`"@/*": ["./*"]`) provided by the Next.js setup wizard allows me to do the same thing without having to explicitly set each path in my `tsconfig.json` — I just need to add an extra `/` after the `@` to my import path, like so:

```
import Button from '@/components/Button';
```

This keeps my `tsconfig.json` from getting bloated and hard to maintain (compared to the pattern I used to use). Cool!

The only use case I can think of for modifying this default is if you are using an `src/` folder.

Do you have a use case I'm not thinking of? Leave a comment if so!
Audio in HTML and JavaScript
Published: 2023-03-01 17:35:25

Hi, I am facing some issues, while creating a really simple web application. I want that wherever the user will click on the page, the music should run in the background. I have downloaded the music in my computer, and then, uploaded to google drive, to get the link. When I got the link and allowed anybody with the link to open and listen to the file, I have pasted the link to the code. I then, runned again, but it is still not working. Can anybody help me in how to add a sound in HTML and JavaScript. This is my code, with the link to the audio file in google drive. Thank you.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onclick="playAudio()" style="height: 1000px;"> 
<p>CLICK</p>

    <audio id="audio" src="https://drive.google.com/file/d/1oC8w72cZyShs7XW7uDMqIA74bCZRLtvk/view?usp=share_link"></audio>

<script>
  
function playAudio() {
 var audio = document.getElementById("audio");
 audio.play();

}
</script>    
</body>
</html>
```
What to test in the backend ?
Tags: testing, database
Published: 2023-03-01 17:29:40

## What to test?

Testing software is not an easy task. Even senior developers struggle to make it clear what needs to be tested. If you don't know what you are going to test, your tests are probably wrong.

In this article, we are going to give you practical examples of what to test in your backend code, this applies to any programming language. The important part is the concept.

## Integration Tests
Tests ensure your code behavior is correct.
It ensures that when given some initial program state, you ended up with a given final state.

Integration tests are the best cost benefit test that you can have.
Integration tests, tests the code like the end user would test it.
When doing Integration tests, you just test public interfaces, you don't test internal functions.

---
Let's see what exactly you should test in your backend code, given some scenarios.

## What to test in an API?

- validate the API return success for success cases
- validate the API return error for error cases
- validate the API is idempotent
- validate the final state of the database is correct
- validate if calls the correct jobs
- validate if creates the correct sms, emails, whatsapps
- validate if the external API requests are being called correct

## What to test in a GraphQL Operation (Query, Mutation, Subscription) ?

- validate the response is correct
- validate errors
- validate the final state of the database is correct
- validate if calls the correct jobs
- validate if creates the correct sms, emails, whatsapps
- validate if the external API requests are being called correct

## What to test in a worker job?

- validate errors
- validate the final state of the database is correct
- validate if calls the correct jobs
- validate if creates the correct sms, emails, whatsapps
- validate if the external API requests are being called correct

## In Conclusion
I hope these practical examples makes your tests making more sense to you.
This is how Woovi tests, and this avoids many regressions and silly bugs.

Always start with the simplest test case, the happy case, and keep adding more and more edge cases to squish bugs.

---
Woovi
[Woovi](https://www.woovi.com) is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are [hiring](https://woovi.com/jobs/)!

---
Photo by <a href="https://unsplash.com/@douglasamarelo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Douglas Lopes</a> on <a href="https://unsplash.com/photos/ehyV_XOZ4iA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
New Adventures
Tags: career, devjournal, beginners, webdev
Published: 2023-02-27 23:13:38

I started my journey at the end of 2020.  As we all know, 2020 was an amazingly hard year.  One of loss, one of discovery, one of complete difficulty.  When I sat to have a moment to myself I discovered my thought process and the career I had been wanting my whole life was different and changed.  Uncharted territory to say the least.  My discovery is it was a time for changes to be made and new steps or paths to discover.

January 25th, 2021 I was at home (with COVID) starting my coding journey with over 100 virtual classmates.  It was hard as hell and to be honest I probably questioned if I was crazy at least a dozen times.  Was I crazy at 40+ to be completely changing career paths?

The answer is HELL yes it is crazy but from crazy ideas come fruitful lives.  I kicked bootcamp butt while working the clinic full time.  Yes that means 5 13hr shifts a week then coming home to my family who put up with my absence during class time (3 4hr in the evenings).  Would I recommend it for everyone? No, probably not.  Hindsight being 20/20 I have found bumps along my path that I have revealed to others on the path to maybe help them avoid the same bumps.  The mentor / preceptor in me cannot simply walk a path but rather aid others who are running the marathon too.

Here I am 2 years into the journey, school included, and it has been hard.  I've gotten rejected or told I was a great fit but need more experience.  I've taken time away from coding anything to find my center again and along the way found out that maybe I needed to tend to my own mental health.  Afterall, mental health is the foundation to the rest of your life.  I have times where I still think I am crazy for doing all of this BUT I always remind myself that Rome wasn't built in a day but rather brick by brick.  

Will I be a great female developer on an amazing team or on amazing teams?  Sure.  Will it happen tomorrow? Probably not, but that is okay.  Will I give up on my dream to be a kick ass developer? No, because quitting isn't in my DNA.

Hi my name is Lisa Miner aka midnightmoet and I am a healthcare extraordinaire with a love for code (figuring things out).  I hate the box people put in place so I think outside of it and that will be what sets me apart from everyone else.  Welcome to my world!

Interested in connecting simply send me a request: [LinkedIn](https://www.linkedin.com/in/lisachampagne)
Configuring build cache in Angular App
Tags: angular
Published: 2023-03-01 17:28:16

Adding `cache` in `anular.json`

```tsx
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
	"projects" {
	...
	},
  "cli": {
    "cache": {
      "enabled": true, // select true or false
      "environment": "all", // select all, ci or local
      "path": "temp/cache/.angular" // folder name where it should add
   }
	}
}
```
What is indexing in DB?
Tags: ruby, rails, database, performance
Published: 2023-03-01 17:19:55

## What is Index?

Indexes are database structures that improve the performance of **search queries**. They work like a phone book index, where you can quickly look up a person's phone number without having to go through every entry in the book. 

In a similar way, a database index helps to speed up the search for data by creating a sorted reference to the values stored in one or more columns of a table. This makes it faster for the database to retrieve data, which can be especially important for large tables or complex queries.

So, Whenever a query is executed, the database engine searches the index for the keyword and retrieves the corresponding rows from the table. This process is much faster than scanning the entire table to find the matching rows.

## Drawbacks of Indexes

Indexes can significantly improve query performance, but they also have some drawbacks. Creating and maintaining indexes takes time and resources, and they can consume a significant amount of storage space. Additionally, indexes can actually slow down write operations because they need to be updated every time a row is inserted, updated, or deleted.

## When to use indexes?

Here are some examples when you might want to use an index:

1. **Primary keys**: When you create a table, you can specify one or more columns as the primary key. This creates a unique index on those columns, which is used to enforce the primary key constraint and ensure that each row has a unique identifier.

2. **Foreign keys**: When you create a foreign key constraint, the database engine automatically creates an index on the foreign key column(s) in the referencing table. This speeds up queries that join the referencing and referenced tables.

3. **Frequently searched columns**: If you have a table with a large number of rows and one or more columns that are frequently searched, you can create an index on those columns to speed up those queries.

4. **Order by and group by clauses**: If your queries frequently include an order by or group by clause, you can create an index on the column(s) being sorted or grouped.

5. **Where clauses**: If your queries frequently include a where clause that filters the results based on a specific value or range of values, you can create an index on the column(s) being filtered.

It's important to note that not all columns need an index. In fact, too many indexes can actually slow down performance because the database engine has to spend more time maintaining them. It's best to create indexes selectively based on the needs of your queries.
Unlock the Power of Arrays: Tips and Tricks for Working with Arrays
Tags: python, tips, datastructure
Published: 2023-03-01 17:15:12

It is no news that most wizards in the programming community, even accomplished polyglots do not like Python due to its weird(?) way of doing things. Still, hey, technology is all about innovation and change.

Some things to note though when working with arrays in Python:
1. They are called _lists_.
2. There are other types of arrays that are similar, but different from _lists_, like _tuples_, _dictionaries_,...
3. Know the syntax for instantiating a list, e.g., [1, 2, 3, 4], [1] + [2] * [3].
4. Know how to use the functions `insert`, `append`, and `remove`, and do not be afraid to use them if you cannot do the operations manually. It's all about innovation and using the libraries and functions already provided instead of trying to reinvent the wheel, unless you are asked not to (looking at you, C).
5. Know how to instantiate a 2D array, e.g., [[1, 2, 3], [4, 5, 6], [7, 8]].
6. Checking if a value is present in an array is as simple as `i` in `arr`.
7. Understand how _copy_ and _deep copy_ work, the difference between the two, and when to use them. E.g., A = B and A = list(B), where `B(list)` is a different copy of `B` (more on that in the future).
8. Slice is your best bud, use it wisely.

There may be some unmentioned here, but if you know any, I appreciate it if you could share.
Getting Eta to work with Deno Deploy
Tags: deno, eta, javascript, webdev
Published: 2023-03-01 17:13:40

Deno Deploy is a great service for hosting your Deno projects on the cloud for free. Unfortunately it does not work with the eta templating language.

The reason for this is that eta uses the Deno.exists function, which is depreciated, and removed on the Deno Deploy service.

After looking for a solution to this myself, but not finding any, I decided to try to come up with my own fix, which has been posted on the eta github page.

https://github.com/eta-dev/eta/issues/172

Here is a temporary fix that allows you to at least use templates on Deno Deploy :)

```
Eta.config.includeFile = function(path, data) {
  return Eta.templates.get(path)(data, Eta.config);
};
I would then write something like this:

Eta.templates.define("main", Eta.compile(
  await Deno.readTextFile(`${Deno.cwd()}/views/main.eta`)));

const template = await Eta.render(await Deno.readTextFile(`${Deno.cwd()}/views/home.eta`), {
    title: "My webpage"
  });
And this in the templates:

// home.eta

<% layout("main") %>

<h1>Welcome to my home page<h1>
// main.eta

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= it.title %></title>
</head>
<body>
    <%~ it.body %>
</body>
</html>
```
How I'm Building a SaaS to Launch in 7 days (in public)
Published: 2023-03-01 17:08:48

Hey everyone, Peter here! 

I’m doing a fun, quick challenge to build a SaaS (coding the entire thing myself) in 7 days and documenting the entire journey. 

I got [a lot of support](https://twitter.com/pwang_szn/status/1629889032019918850) to do this so I'm finally doing it.. 

I have 10 years of experience coding (python, node, vue) and have done a lot of projects up my sleeve so this isn’t my first rodeo. 

## The Idea of the App 

The idea for my SaaS product is to create a collection of well-designed SaaS pages AKA a swipe-file. Whenever I design pages for my SaaS products, I always go to Dribble or other websites with nice designs. It would be really useful to have all the designs I like in one spot, and that's what I want to create. Essentially, it will be a database of really well designed SaaS pages, user flows, emails, pretty much everything you need for a SaaS.  

To develop my SaaS product, I won't be hiring any additional developers. I'll be spending 2-3 hours per day working on the project and making sure it's shippable in seven days. 

## Tools 

For building the web app, I'm using SaaS Pegasus, Appliku, and Tailwind. 

[SaaS Pegasus](https://www.saaspegasus.com/?via=peter) is a code-based template that has many of the essential features already built in, such as sign-on, login, and payments. 

[Appliku](https://appliku.com/?via=peter) is great for handling code deployments and domain management. 

[Tailwind](https://tailwindui.com/) makes it super easy to create well-designed sites.

## The Tech Setup 

I'm using Airtable as the backend storage for my SaaS product. I chose Airtable because it has an easy-to-use API and allows me to add and edit images easily without having to write any API code. For payments, I'm planning to use GumRoad. I read that GumRoad performs better than Stripe on Twitter, so I want to test it and see if it really does perform better.

## What I’ve done so far

So far, I have set up the code base and solved some initial roadblocks. I've installed all the required packages and have all the code set up. The site is running on my local machine and in production. The next goal is to work on the dashboard and data import.

## Roadblocks so Far 

One of the roadblocks I faced was a random CSRF issue, which is a security issue for cross-site prevention. I spent around 30 minutes trying to fix it using ChatGPT, but the answer was actually on the first page of Stack Overflow. Thankfully, I managed to fix it after thirty-minutes.

I have a video here if you want to watch this instead. 

## Conclusion 

(I have a more [in-depth video](https://twitter.com/pwang_szn/status/1630977956330831872?s=20) here if you want to watch this instead.) 

I’m planning on documenting the entire journey from beginning to end (all in public), you can [follow my Twitter](https://twitter.com/pwang_szn) to end on my Twitter to follow along!
Scala and the JVM
Tags: jvm, hopes, scala, java
Published: 2023-03-01 14:58:27


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

Hey there! Have you heard of Scala 3? It's the latest programming language that's got everyone in the tech industry buzzing (I know I am over reacting there). It's got improved features, better performance, and enhanced capabilities, but some people are wondering whether it should ditch the old Java Virtual Machine (JVM) and move to a different compiler.

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

Let's break it down. One of the coolest things about using the JVM is that it's super popular and ubiquitous. It's like the prom king of platforms - everyone knows it, and it's got a ton of tools, libraries, and support to help you out. Plus, Scala 3 can play nice with other JVM languages, like Java and Kotlin, so you can integrate it into your existing projects.

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

The JVM has this garbage collector thing that helps optimize memory usage and prevent memory leaks. Basically, it's like a janitor that keeps your code tidy and your program running smoothly. And on top of that, the JVM's just-in-time compiler can optimize your code on the fly for even better performance.

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

But there is a known downside to the JVM - it's a memory hog. The JVM's mature and well-developed garbage collector is great for optimizing memory usage, but it can still consume a lot of memory, which can be a challenge for larger applications. However, the JVM's just-in-time (JIT) compiler helps optimize code at runtime, resulting in better performance.

Despite the memory issue, Scala 3's syntax is designed to work seamlessly with the JVM's bytecode format. This means you can compile Scala 3 code to bytecode and run it on the JVM without any significant changes, which is a big plus. Additionally, the JVM's bytecode format is highly portable, so your Scala 3 app can run on a variety of platforms.


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



Lastly, the JVM has a massive community of developers who are constantly working on improving it. It's like a big happy family that's always there to lend a helping hand. And with all the new features and improvements that keep getting added, you know Scala 3 will stay up-to-date and relevant for years to come.

So there you have it! Scala 3 should definitely stick with the JVM. It's just too popular, too powerful, and too darn good to let go. But hey, what do you think? Are you on team JVM or team something else? Let us know in the comments below! And remember, as they say in the programming world, "keep calm and code on!"
How to save a string to clipboard in JavaScript
Tags: javascript, programming, webdev, html
Published: 2023-03-01 17:00:39

There are a few methods that can be used to copy a string to clipboard in JavaScript. It is important to know how to save/copy a string to clipboard when building websites and web-based applications.

To simply save a string to clipboard, you have to ensure navigator - navigator.clipboard and navigator.clipboard.writeText are used correctly. 

Clipboard.writeText() allows you to copy the string value directly to clipboard. We will see how this works shortly.

---


**Let’s take for example;**

You create a string and store it as a variable…

```
let stringText = “This is the text to be copied to clipboard”;
```

After creating the string and storing it as a variable, you have to create a function that lets you copy the string to clipboard.

```
let stringText = 'I am a text copied to clipboard';

function copyBtn() {

navigator.clipboard.writeText(stringText);

}
```

If the function **copyBtn()** is assigned to an onClick event in an html element, when clicked on, the value of the string will immediately be copied to clipboard.

Let’s create an example with a **html button** which would have a click event that would enable you copy the string to clipboard which you can then paste anywhere.

Remember to pass the **copyBtn()** function to the click event.

First create a text area in your HTML that you can paste the string to.

`<textarea name='textarea' placeholder='paste your link here' cols='30' rows='5'></textarea>`

**Create a button below the textarea**

`<button onclick='copyBtn()'>Click here to copy text to clipboard</button>`

Open the html file in your browser, then click on the button. The string stored in the **stringText** variable will be copied to clipboard, you can then paste it within the textarea. 

Okay, now you are thinking "Can't I make everything happen within HTML?"... Of course you can. How? You can create a paragraph and store its textContent as variable. The **copyBtn** function can then fetch the variable and store the textContent of the paragraph in the clipBoard. Go ahead and give it a try.

Make sure your JavaScript file is linked to your HTML file unless you are writing JS in HTML then the JavaScript codes should go within the <script> tag.

I hope you found this article useful. You can check other articles I have written on JavaScript and some of the best practices. 

If there are other ways that a string can be copied to clipboard, kindly state them in the comment section.