teleren/devto huggingface dataset:
Code Coverage - more than just a number
Tags: testing, typescript
Published: 2023-03-04 15:00:57

---
title: Code Coverage - more than just a number
published: true
description: Understanding code coverage: what it is and what it tells us about our code
tags: testing, typescript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-04 14:54 +0000
---

## Code coverage

Code coverage is a set of tools, that examine the percentages of code covered by the tests. 
I’m working with Jest on daily basis, in this article I will use examples from this test framework.

To run coverage report, you can use following command:

```bash
  jest --coverage
```

You can see the results right away in your terminal or open nicer GUI with coverage in `src/coverage/lcov-report/index.html`

The metrics

- lines - simply how much of you code is taking part in the tests
- statements - same as above but it counts only instructions
- functions - how many functions were called during test
- branches - all branches of if/else, switches, conditional flows

Lets look at silly example:

```tsx
// Test case

describe('isErrorRoute - helper to determine if url from input is recognized as error route in routing', () => {
  it('should', () => {
    expect(isErrorRoute('https://example.com/error')).toEqual(true);
    expect(isErrorRoute('https://example.com/error/not-found')).toEqual(true);
  });
});

// Implementation

export const isErrorRoute = (url?: string) => {
  if (!url) {
    // 1. branch not covered
    // 2. both 'statements' in line 4 and 5 also not covered
    console.log('statement');
    return false;
  }

  return url.includes('/error');
};
```

And the test with following metrics

- lines - 60% (3/5)
- statements - 66.66% (4/6)
- functions - 100% (1/1)
- branches - 0% (0/1)

### What information code coverage gives us ?

- what parts of application are not covered with tests at all
- acts as a general guide for further analysis, where there might a be a real need of adding tests

### What information code coverage won’t give you ?

- how much behaviour is covered
- it tell you nothing about overall tests quality
- covering code with tests ≠= covering functionality with tests

### The code coverage requirements

Most of the times there is requirement of having 80% code coverage in order to add new functionality to the codebase. 

While I can understand the purpose of it, there is a huge chance, that some developers may focus solely on meeting the 80% threshold, without considering the real purpose of testing.

Common gotchas to spot on for “80% threshold focused” devs:

- Over-reliance on mocks and stubs
- No assertions in the tests
- Writing many very similar tests
- Ignoring code paths that are difficult to test (which may be a crucial parts for functionality)
- Testing implementation details rather than behavior
How to Avoid JavaScript Type Conversions (Type Coercion)
Tags: javascript, webdev, react, news
Published: 2023-03-04 14:28:06

JavaScript performs implicit conversions between data types. Let’s find out how to avoid it.

Have you ever experienced a scenario where certain value comparisons in JavaScript do not result in what you expected?



`if([]){
    console.log("working");
}

if(0){
    console.log("working for 0");
} 

if([]==0){
  console.log(true);
}
`

Even though []==0 results in true , the if condition has not executed according to that result. Ever wondered why that is?

**What are JavaScript Type Conversions?
**
it is simply the automatic conversion of values from one data type to another.
This occurs because JavaScript is a weakly typed language.

Use strict comparison (===) when comparing values we can Avoid JavaScript Type Conversions
Best Online TikTok Video Downloaders Without Watermark
Tags: news, wordpress, webdev, javascript
Published: 2023-03-04 14:27:23

**TiktokDownloaderWeb.com**
[Tiktokdownloaderweb.com](https://tiktokdownloaderweb.com/) is the best tiktok video downloader tool available on the internet. Why I am saying this because Tiktokdownloaderweb.com have very user-friendly user interference. Not only that this website does not have annoying ads. Users will not face any problems while downloading their tiktok videos.

![thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i29krqhsmsz69t87c4u5.png)
Just copy the tiktok video from the web or mobile visit Tiktokdownloaderweb.com pest that URL and click download. Within a second you can download any tiktok videos audio and video. Tiktokdownloaderweb.com gives you two options whether to download the audio of the tiktok video or download the video. Tiktokdownloaderweb.com has the feature of watermark removal while downloading tiktok videos.

Therefore, you will not have to remove the logo after downloading tiktok video.

**Features:**
Download tiktok videos without a watermark.
Completely free to the user.
Save as many videos as you can.
Download high-quality tiktok videos.

**[Click Here To Visist](https://tiktokdownloaderweb.com/)**
Performance Review Tips
Tags: tech, begineers, codenewbie, performancereview
Published: 2023-03-04 14:04:03

---
title: Performance Review Tips
published: true
description: Tips for your performance review meeting.
tags: tech, begineers, codenewbie, performancereview
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-04 12:50 +0000
---


## Performance Review Tips

* If you are tasked with some project in outdated technology, instead of complaining about it. Start contributing, improving codebase. You are hired to deliver result it can be in latest technology or outdated. 

* Find ways to improve codebase - it can be migrating to new build process, adding listing or test cases. 

* You can use this time to improve your breadth of your knowledge. For example - For FE, you can try to understand how backend is interacting with different systems before returning your api call response. For BE, enquire about all the 3rd party libraries used for that api call or anything which peeks your interest. 

* Documentation - There is no such thing as over documentation, most of the projects I have worked in my 7 years of career, I have never came across well documented project (* few exceptions). Documentation is continuous process. 

* Let your Colleagues and manager know about your ideas on how to improve coding patterns or build processes or your eagerness to work on certain project. 

* Try to create wider impact - it can be origination level or team level. If you have idea on improving your or teammates time/life, spend sometime to come up with MVP and demo it to your team. 

   Follow these tips well before your performance review meeting and you & your manager will have all the good things to talk about. 

  Hopefully you’ll find these tips useful at your workspace.
Paracetamol.ts💊| #25: Explica este código TypeScript
Tags: typescript, javascript, spanish, webdev
Published: 2023-03-04 14:00:00

## **<center>Explica este código TypeScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark> </center>
¿Que hay de malo con este código?

```ts
type GreenColor = "00ff00" | "22be22" | "green"
const green:GreenColor = "22be22";
console.log(green)

interface RedColor {
  color: "ff0000" | "be2222" | "red"
}

const red:RedColor = {color:"ff0000"} 
console.log(red)
```

- A. `"22be22"`, `{color: "22be22"}`
- B. `"22be22"`, `TypeError`
- C. `SyntaxisError`
- D. `Ninguna de las anteriores`

{% spoiler **Respuesta** %} 

✅ A. `"22be22"`, `{color: "22be22"}`

Los `types` son estupendos para tipos primitivos o en este caso tipos literales.

Si usamos interfaces estamos obligados a usar objetos, por ello son más útiles para ello mismo, manipulación y estructura de objetos.

{% endspoiler %}

---

Puedes ver el último reto aqui:

{% link https://dev.to/duxtech/paracetamolts-24-explica-este-codigo-typescript-2hfc?preview=901376c0d0c06e7ed2adae1911a17371c202ba756a116301c5fe986f8470bcc5ec3df092b9a9ed9aab5dec7dc7e240887032484281bc601e511ae197 %}
AWS Route Table & Route
Tags: webdev, aws, devops, cloud
Published: 2023-03-04 08:00:21

An AWS Route Table is a virtual table that contains a set of rules, called routes, that are used to determine where network traffic is directed. Route tables are associated with subnets in a VPC (Virtual Private Cloud) and are used to control the flow of traffic between subnets, the internet, and other networks.

Route tables can be modified to control the flow of traffic between subnets and to configure advanced network routing scenarios. For example, you can create a custom route that directs traffic to a virtual private gateway to enable communication between your VPC and an on-premises network.

Route tables are a critical component of AWS networking and are used to ensure that network traffic is directed to the correct destination.

## AWS ROUTE

AWS Route is a service that enables you to create and manage routing rules for your Amazon Web Services (AWS) resources. AWS Route allows you to dynamically route incoming traffic to different AWS services or to external endpoints based on the content of the incoming request.

AWS Route is commonly used to manage traffic between different services within an AWS infrastructure, as well as between external endpoints and AWS services. For example, you can use AWS Route to route traffic to different EC2 instances based on the geographic location of the user requesting the content, or to direct traffic to different AWS services based on the type of request.

**AWS ROUTE TABLE && ROUTE**
Save the file and run _terraform apply_ in the terminal to see the results.
```
/* AWS ROUTE TABLE */
resource "aws_route_table" "main_route_table" {
  vpc_id = aws_vpc.main_vpc.id

  tags = {
    Name = "main_rt"
  }
}
/* AWS ROUTE */
resource "aws_route" "main_route" {
  route_table_id         = aws_route_table.main_route_table.id
  destination_cidr_block = "0.0.0.0/0"
  gateway_id   =     aws_internet_gateway.main_internet_gateway.id
}
```

![Terraform paln](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywu3jnhf5bwfgfd7fxsc.png)

![Terraform Apply](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5iu96jeculpicyhptm0h.png)
Merge changes made in the "master" branch into your development branch.
Tags: github, git, beginners
Published: 2023-03-04 13:51:27

If we needs to stay in sync with the latest changes made in "master", while also retaining a complete record of all changes made. Let's try to use rebasing.

```
git checkout master
git pull --rebase
git checkout branch_name
git rebase master
git push -f origin branch_name
```

**Note:** Don't forget to backup first your branch when doing changes

```
git branch branch_name-bkp
```

If there's any conflict arise, use this command as needed to fix the issue based on the situation and the hints provided by git. 

```
git rebase --continue
git rebase --skip
git mergetool
```

Please continue this process until all conflicts are resolved.

At this point, our branch should be rebased and aligned with the "master" branch, and the remote should also be updated. When checking the Git log, there should be no instances of "behind" or "ahead".
Advance Solidity Assembly: Calldata Part 1
Published: 2023-03-04 13:48:09

In Solidity, **calldata** is a special data location that is used to store the function arguments and other data that is passed to a function when it is called. **calldata is read-only**, which means that the function cannot modify the data in calldata.

When a Solidity function is called, its **arguments** are copied to calldata, which is a portion of the transaction data. This is different from the **memory data location**, which is used to store data that is only used within the function and is not part of the transaction data.

## Calldata in Gory Details !!!!

**Calldata** is a continuous sequence of bytes that is structured in the same way as memory, as opposed to other data locations like storage or stack, which are composed of 32-byte words.

**When reading from calldata**, the behavior is the same as memory: you can load 32 bytes at a time using calldataload or mload. However, calldata is different from memory because you cannot write to it.

**Calldata is a data location** that is unique to EVM-based blockchains, and it has a specific layout that includes:

1- The **first 4 bytes** of calldata represent the **function signature selector**.

2- The remaining bytes of calldata represent the **input parameters of the function**. Each input argument is always 32 bytes long, regardless of its actual size. If an argument's **type is smaller than 32 bytes**, it will be **padded** to fill the remaining space.

Input arguments in Solidity are padded either on the right or left depending on their type. For example, uintN and address types are padded on the left, while bytesN types are padded on the right.
Tips for Debugging your Code Efficiently
Tags: debugging, programming, code
Published: 2023-03-04 13:27:52

Debugging is an essential part of the software development process. It involves finding and fixing errors in code to ensure that the program works as expected. However, debugging can be a tedious and time-consuming task, especially when you are dealing with large and complex codebases. In this article, we will discuss some tips for debugging your code efficiently.

## 1. Use Debugging Tools
Debugging tools such as debuggers, profilers, and memory analyzers can help you identify the source of the problem quickly. They can provide you with a wealth of information about the code, such as the call stack, variable values, and performance metrics. Debugging tools are available for various programming languages, and many of them are built into the Integrated Development Environment (IDE) you are using.

## 2. Understand the Problem
Before you start debugging, it is essential to understand the problem you are trying to solve. Take the time to read the error message carefully and analyze the code that caused the error. Look for patterns in the errors and try to identify the root cause of the problem. Sometimes the error message can be misleading, and the actual problem may lie elsewhere in the code.

## 3. Reproduce the Problem
To fix a problem, you need to be able to reproduce it. Try to create a minimal example that reproduces the error. This can help you isolate the problem and make it easier to debug. If the problem is related to user input or data, try to use sample data to reproduce the error.

## 4. Use Print Statements
Sometimes, the easiest way to debug your code is by using print statements. Print statements can help you see the value of variables and the flow of the program. Place print statements in strategic locations to narrow down the problem's location. However, remember to remove the print statements once you have fixed the problem.

## 5. Work Incrementally
When debugging, it is important to work incrementally. Make small changes to the code and test each change to see if it solves the problem. This can help you avoid introducing new bugs into the code. Keep a record of the changes you make, so you can undo them if necessary.

## 6. Take Breaks
Debugging can be a frustrating task, and it is easy to get stuck in a loop. Taking breaks can help you stay focused and approach the problem with a fresh perspective. Go for a walk, do some exercise, or work on a different task to give your mind a break.

## Conclusion
Debugging is an essential part of software development, and it can be a challenging task. However, by using the tips discussed in this article, you can debug your code more efficiently. Remember to use debugging tools, understand the problem, reproduce the problem, use print statements, work incrementally, and take breaks. Happy debugging!
Learning to Code on a 12 Year Old Machine - A Journey of Patience and Perseverance
Tags: motivation, webdev, devjournal
Published: 2023-03-04 12:58:27

What could be more inspiring than reading about a person who is learning to code against all odds. [Learning to Code on a 12 Year Old Machine - A Journey of Patience and Perseverance](https://allankirui.github.io/my-journey/)
Polymorphism with React
Tags: react, javascript, tutorial
Published: 2023-03-04 12:54:38

In this article, we will create an example using Polymorphism in React.

## Acceptance Criteria

- Create a `LinkButton` that render an element `button` or `a` depending on the `href` prop
- The `LinkButton` component has an optional prop called `href`
- If the `href` is provided, the component should render an `a` tag. Otherwise, it should render a `button` tag

## Solving the Problem without Polymorphism

```tsx
import React from 'react'

export default function LinkButton({ href, children }) {
  if (href) {
    return <a href={href}>{children}</a>
  }

  return <button>{children}</button>
}
```


It solves our problem, but imagine if we need to pass the `rest` of props to the component.

It will involve updating the `button` and the `a`, like the following example:

```tsx
import React from 'react'

export default function LinkButton({ href, children, ...props }) {
  if (typeof href === 'string') {
    return (
      <a href={href} {...props}>
        {children}
      </a>
    )
  }

  return <button {...props}>{children}</button>
}
```

And for every case you want to add props, you gonna need to maintain both cases, so much work, right?

## Solving the Problem with Polymorphism

Let's create the same example using Polymorphism:

```tsx
import React from 'react'

export default function LinkButton({ href, children, ...props }) {
  const Tag = typeof href === 'string' ? 'a' : 'button'

  return (
    <Tag href={href} {...props}>
      {children}
    </Tag>
  )
}
```

You may be asking, and what about the `href` being passed to the `button`?

Since it will be `undefined` React will take control to avoid rendering this property to our HTML.

## Wrapping Up

Keeping this approach in mind, you can create a component that handles the logic you want, and it will be easier to give maintenance.

I hope this tip was useful for you!
Polishing My CSS
Tags: webdev, react, css, github
Published: 2023-03-04 12:31:52

I trying to polish my #CSS skills by designing UI Components. so I decided to randomly to pick a UI Design from Pinterest and try to replicate it for next 30 days. I would like to take suggestions from you.

here is the #github repo where you can find the #code.
https://lnkd.in/gpmnnkKX


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h00ksg2xa3jv01rhdxxa.jpg)
Recover your password with Supabase
Tags: javascript, webdev, beginners, programming
Published: 2023-03-04 12:24:33

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

Recovering passwords is a crucial feature of any authentication system, and Supabase provides an easy-to-use mechanism for recovering passwords in case a user forgets their login credentials. The process of recovering a password in Supabase is straightforward and can be completed in just a few steps.

The first step in recovering a password in Supabase is to click on the "Forgot Password" link on the login screen. This will take the user to a password recovery page where they can enter their email address. Supabase will then send an email to that address with instructions on how to reset their password.

Once the user receives the email from Supabase, they'll need to follow the instructions provided to reset their password. This typically involves clicking a link in the email to be taken to a password reset page on the Supabase website. On the password reset page, the user will be prompted to enter a new password. They'll need to enter the new password twice to confirm it, and then click the "Reset Password" button to save the new password.

After the user has successfully reset their password, they can then log in to Supabase using their new password. They'll need to enter their email address and new password to access their account.

Supabase provides clear instructions and guidance throughout the entire process, making it easy for users to recover their passwords if they forget them. The system is designed to be user-friendly and intuitive, with step-by-step instructions provided at each stage of the process. This ensures that even users who are not particularly tech-savvy can easily recover their passwords.

In conclusion, recovering passwords in Supabase is a simple and straightforward process that can be completed in just a few steps. Supabase provides clear instructions and guidance throughout the process, making it easy for users to recover their passwords if they forget them. This user-friendly approach is one of the reasons why Supabase is such a popular choice for developers looking to build secure and reliable applications.

Guillaume Duhan
How to Fix Oh-My-Zsh Icons in Visual Studio Code Terminal on MacOS
Tags: vscode, zsh, macos, unix
Published: 2023-03-04 12:01:11

Many Linux and macOS users worldwide favour Zsh as a UNIX shell. Its functionality increases manifold when combined with configuration frameworks like [**Oh-my-zsh**](https://github.com/ohmyzsh/ohmyzsh) and stylish templates like [**Powerline10k**](https://github.com/romkatv/powerlevel10k). After setting up the shell and verifying that everything functions as expected in the terminal, it's time to write some code. However, upon opening the built-in terminal in Visual Studio Code, something seems amiss. The attractive template and chic icons are nowhere to be found!


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

## Solution

To enable the use of icons in VS Code through Powerline10k, I will utilize the MesloLGS NF font, which was installed alongside Powerline10k. Here are the steps:

1. Open the VS Code settings by clicking on the gear icon at the bottom left or using the `CMD + ,` shortcut in MacOS.
     ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fv6x9cgahspdmzunjiwc.png)

2. To change the VS Code settings, use the search bar at the top of the UI or press `CMD + F` to search for the `Font family` setting in the `settings.json` file.
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9udywbih1gztwj43vfd8.png)

3. Change the `"Terminal > Integrated: Font Family"` attribute to "MesloLGS NF".

That's it! Enjoy your icons in VS Code.