teleren/devto huggingface dataset:
High ROI Testing with Cypress Component Testing
Published: 2023-01-30 05:55:46

<!-- wp:paragraph -->
<p>In this podcast, we cover Cypress Component testing and how you can use it to get a high ROI on your testing.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Motivation for integration-based testing vs. the testing pyramid </li><li>The testing trophy</li><li>Cypress CT vs. Jest</li><li>Setup of cypress CT</li><li>Best practices with Cypress CT</li><li>Test setup with SIFERS</li><li>CRUD test of TODO app</li></ul>
<!-- /wp:list -->

You can read it [here](https://christianlydemann.com/high-roi-testing-with-cypress-component-testing-with-lars-gyrup-brink-nielsen/)
C# 11: New raw string literals feature makes my life easier!
Tags: csharp, string
Published: 2023-01-30 05:32:39

The best [new feature of C# 11](https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-11) for me is raw string literals.

In this post, I explain the scenario when I use the new feature.

## Escape Double Quotation

I often use a JSON string in my unit tests to arrange mock data. The pain point was that I need to escape double quotation like this.

```csharp
var json = @"
{
    ""key"":""value""
}
";
```

With C# 11 new feature, I can use triple double quotations at the beginning and the end so that I don't need to escape it inside the content.

```csharp
var json = """
{
    "key":"value"
}
""";
```

If I need to use triple double quotation inside the content, I can add one more quotation.

## Escape Curly Braces

When I create mock data, I often use variable in string format which uses curly braces. I also need to escape curly braces as JSON string uses curly braces. Before C# 11, it looks like this.

```csharp
var json = $@"
{{
    ""key"":""{value}""
}}";
```

With C# 11 new feature, I can add an additional dollar mark to indicate how many curly braces I use for string format, so that I don't need to escape the curly braces in the content.

```csharp
var json = $$"""
{
   "key":"{{value}}"
}
""";
```

## Indentation

Indentation is important in C#, but I couldn't use indent as I wanted because if I use indent inside the JSON string, it was a part of content itself.

For example, I write a code snippet like this.

```csharp
Console.WriteLine(JSON());

string JSON()
{
    return @"
    {
        ""key"":""value""
    }
    ";
}
```

The result contains spaces.

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73n1ufvsoc0mvmrm4uqb.png)

With C# 11, I can write similar code.

```csharp
Console.WriteLine(JSON());

string JSON()
{
    return """
    {
        "key":"value"
    }
    """;
}
```

Then I have the expected result.

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

The closing ``"""`` indicate the starting line. So if I write code like below, I can include spaces.

```csharp
Console.WriteLine(JSON());

string JSON()
{
    return """
        {
            "key":"value"
        }
    """;
}
```

Visual Studio visualizes the line as well.

![visual studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e56r814qzuxr9yjbr07s.png)

## Summary

I really love this feature and we all should start using this whenever we use JSON, XML or any other string we had to escape before.
How To Convert HTML To PDF In Python
Tags: html, pdf, python, beginners
Published: 2023-01-30 05:30:00

In this article, we will see how to convert HTML to PDF in python. Here, we will learn to generate HTML to PDF using wkhtmltopdf. wkhtmltopdf and wkhtmltoimage are open source command line tools to render HTML into PDF and various image formats using the Qt WebKit rendering engine.

Python 2 and 3 wrapper for wkhtmltopdf utility to convert HTML to PDF using Webkit. So, we will use pdfkit library and wkhtmltopdf.

So, let's see how to generate HTML to PDF in python, python convert HTML to PDF, and pdfkit python.

The Portable Document Format (PDF) is a file format developed by Adobe in 1992 to present documents, including text formatting and images, in a manner independent of application software, hardware, and operating systems.

There are two libraries required:

1. wkhtmltopdf
2. pdfkit
Web3 development with Angular: Making life easy with blockchain
Tags: webdev, javascript, programming, angular
Published: 2023-01-30 04:55:56


The use of blockchain technology has become more and more widespread in recent years. The decentralization of data and the security provided by blockchain make it a perfect fit for many applications. However, incorporating blockchain into web applications can often be a challenging task. This is where Angular, a popular web development framework, can make life easier.

In this article, we will discuss how to incorporate blockchain technology into an Angular project and some best practices to keep in mind. We will also look at some ideas for creating reusable components and services for your application.

Integrating blockchain into Angular

The first step in incorporating blockchain into an Angular project is to choose the appropriate blockchain technology for your needs. Ethereum, for example, is a popular choice for decentralized applications. Once you have chosen your blockchain technology, you can start integrating it into your Angular application.

One approach is to use a pre-existing Angular library such as Angular-Ethereum. This library provides an easy-to-use interface for communicating with the Ethereum blockchain and can help to streamline the integration process.

Another option is to create your own custom library for communicating with the blockchain. This approach gives you more control over the communication and can help you to better tailor the library to your specific needs. When creating your own library, it is important to keep in mind the need for security and to follow best practices for communication with the blockchain.

Creating reusable components and services

Reusable components and services can help to streamline your Angular project and reduce development time. When it comes to incorporating blockchain into your Angular application, reusable components and services can also help to simplify the integration process.

One idea for a reusable component is a blockchain-powered login system. This component would allow users to log in to your application using their blockchain credentials and would help to secure the login process. Another idea is a blockchain-powered payment system, which would allow users to make payments directly from their blockchain wallets.

When creating reusable components and services, it is important to consider their modularity and ease of use. By making components and services easy to use, you can help to encourage adoption and make it easier for other developers to incorporate them into their own projects.

Conclusion

Incorporating blockchain into an Angular project can be a challenging task, but it doesn't have to be. By using Angular-Ethereum or creating your own custom library, you can streamline the integration process and make it easier to develop blockchain-powered applications. Reusable components and services can also help to simplify the development process and encourage adoption. With Angular and blockchain, the sky is the limit for what you can build.
CSS tutorial series: Challenge 3
Tags: webdev, beginners, css, tutorial
Published: 2023-01-30 04:52:58

In this post, you're going to apply everything you've learned so far, from `flexbox` to `grid` to making a responsive design. 

You're going to create an art gallery, using the paintings of your choice. This project was inspired by [Front end mentor](https://www.frontendmentor.io/challenges/galleria-slideshow-site-tEA4pwsa6). Visit the link to view the design. We're going to only focus on the layout of the page and how everything is displayed.

**In this project, we're going to use:**

- Flexbox

- Grid

- media queries

Before checking out the solution below make sure you try on your own first. Use the previous tutorials to help yourself.

**Tips and hints**
You might need to use some properties we did not previously use such

- row-gap

- letter spacing

- line height

With a quick google search you will understand how to use them. 

**Use mobile-first approach**

## Solution

{% codepen https://codepen.io/fullstackjo/pen/ZEjjjdv %}
Creating behavior tests for User Interfaces
Tags: webdev, javascript, programming, angular
Published: 2023-01-30 04:14:16

Behavior Driven Development (BDD) is a software development methodology that emphasizes the behavior of a system and focuses on testing it against expected outcomes. BDD is particularly useful for testing user interfaces as it helps to validate that the UI behaves as expected given specific conditions.

In this article, we will explore how to set up a testing infrastructure for user interfaces using BDD in Angular. The following main bullet points will be covered:

What is BDD and how it applies to this talk: BDD is a software development methodology that focuses on the behavior of a system, as opposed to just its implementation. This approach is useful for testing user interfaces as it allows developers to validate that the UI behaves as expected.

Setting up the testing environment: The concept of mixins and test preamble will be discussed. Mixins are reusable code snippets that can be used across multiple tests, while the test preamble sets up the testing environment by defining the necessary dependencies and configuration.

Client satisfaction: We will learn how to organize our steps and make sure that all client requirements are covered using Gherkin syntax. Gherkin is a language used to write human-readable test scenarios that can be understood by both developers and clients.

Trying a new approach of coverage by extending our tests' use cases: By extending our test use cases, we can increase the coverage of our tests and improve the reliability of our test suite.

A bug was found: How to use regression testing to avoid it never comes back: If a bug is found, regression testing can be used to ensure that the bug does not reappear in future releases.

In conclusion, BDD is a useful approach for testing user interfaces in Angular as it focuses on the behavior of the system, rather than just its implementation. By setting up a testing infrastructure using BDD and following best practices such as mixins, Gherkin syntax, and regression testing, developers can create a robust and reliable test suite for their user interfaces.
Customizing Angular-Runtime modification of Web Apps with Module Federation
Tags: webdev, javascript, programming, angular
Published: 2023-01-30 03:57:39

Module Federation is a feature in Angular that allows for modifying and customizing the runtime of web applications. It allows developers to split a monolithic application into smaller, independent modules that can be developed and deployed separately. This provides a number of benefits, including increased scalability, improved maintainability, and faster development times.

In this article, we will go through the steps to customize an Angular application using Module Federation. To follow along, you will need to have a basic understanding of Angular and its architecture.

Step 1: Set up the main application

To begin, we need to set up the main application that will host the federated modules. In this example, we'll call it the "shell" application. The shell application should have its own set of dependencies and a default routing configuration.

Step 2: Create the federated modules

Next, we will create the federated modules that will be added to the main application. Each module should have its own set of dependencies and a unique routing configuration.

Step 3: Configure the federated modules

To configure the federated modules, we need to add a "remotes" property to the shell application's angular.json file. This property should include the name and location of each federated module.

Step 4: Update the main application's routing configuration

Once the federated modules have been added to the shell application, we need to update the main application's routing configuration to include the routes from each module. This can be done by using the Angular Router's lazy-loading feature.

Step 5: Deploy the application

Finally, we can deploy the application and test it to see if everything is working as expected.

In conclusion, customizing the runtime of an Angular application using Module Federation provides a number of benefits, including increased scalability, improved maintainability, and faster development times. By following these steps, you can get started with customizing your own Angular application using Module Federation.
1137. Leetcode Solution in Java
Tags: chiki1601, java
Published: 2023-01-30 03:53:18

==============================================================

Description:
The Tribonacci sequence Tn is defined as follows: 

T0 = 0, T1 = 1, T2 = 1, and Tn+3 = Tn + Tn+1 + Tn+2 for n >= 0.

Given n, return the value of Tn.

 

Example 1:

Input: n = 4
Output: 4
Explanation:
T_3 = 0 + 1 + 1 = 2
T_4 = 1 + 1 + 2 = 4
Example 2:

Input: n = 25
Output: 1389537
 

Constraints:

0 <= n <= 37
The answer is guaranteed to fit within a 32-bit integer, ie. answer <= 2^31 - 1.
==============================================================
Solution:
```java
class Solution {
  public int tribonacci(int n) {
    int[] arr = new int[38];
    arr[1] = arr[2] = 1;
    for (int i = 3; i < 38; i++) {
      arr[i] = arr[i - 1] + arr[i - 2] + arr[i - 3];
    }
    return arr[n];
  }
}
```
=================================================================

#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/n-th-tribonacci-number/
How to Build Angular Applications for Performance Optimization
Tags: webdev, javascript, angular, programming
Published: 2023-01-30 03:53:01

Building high-performing Angular applications is critical for providing a smooth user experience and ensuring the application's success. Here are some steps to optimize Angular applications for performance:

Lazy Loading: Use lazy loading to defer loading of non-critical components until they are actually needed. This reduces the initial loading time and improves overall performance.

Use Ahead-of-Time (AoT) Compilation: AoT compiles Angular components and templates at build time, improving runtime performance and reducing the size of the application.

Minimize the Size of Dependencies: Keeping the size of dependencies small helps reduce the overall size of the application, making it faster to download and run.

Use Change Detection Strategies: Angular provides multiple change detection strategies, including OnPush and Default. Choose the most appropriate strategy for your use case to optimize change detection performance.

Use the Angular CLI: The Angular CLI provides a variety of performance optimization features, such as tree-shaking, which removes unused code, and minification, which reduces the size of the application.

Use a Production Build: Use a production build for deploying to production, as it includes performance optimizations such as minification and tree-shaking.

Monitor Performance: Regularly monitor the performance of your Angular application and make performance improvements as necessary. Use tools like the Angular Performance Tools and the Chrome DevTools Performance tab to get a detailed understanding of performance issues.

Example: Let's say we have an e-commerce application with a home page that displays a list of products. To optimize the performance of this page, we could:

Use lazy loading to defer loading the product details component until a user clicks on a product.

Use AoT compilation to compile the home page components at build time.

Minimize the size of dependencies by using a light-weight library for product images.

Use the OnPush change detection strategy, as the list of products is unlikely to change frequently.

Use the Angular CLI to build a production version of the application, which will include performance optimizations such as minification and tree-shaking.

Monitor the performance of the home page regularly, and make improvements as necessary.

By following these steps, you can build Angular applications that are optimized for performance, providing a smooth user experience and ensuring the application's success.
Reshape the Matrix - leetcode(566)
Tags: cpp, leetcode, programming, solution
Published: 2023-01-30 03:31:13

**Problem:** 
You are given an m x n matrix mat and two integers r and c representing the number of rows and the number of columns of the wanted reshaped matrix.

The reshaped matrix should be filled with all the elements of the original matrix in the same row-traversing order as they were.

If the reshape operation with given parameters is possible and legal, output the new reshaped matrix; Otherwise, output the original matrix.

#### Sample 1:
```
Input: mat = [[1,2],[3,4]], r = 1, c = 4
Output: [[1,2,3,4]]
```
#### Sample 2:
```
Input: mat = [[1,2],[3,4]], r = 2, c = 4
Output: [[1,2],[3,4]]
```

#### Idea:
- If given matrix's **row * column != r * c** then return given matrix
- Create a 1d vector **temp** then store all the element of the matrix into the vector sequentially
-  Run a nested loop from **0 - r** and **0 - c** then store elements from the 1d vector to your 2d result vector.


Solution 1: 
```cpp
class Solution {
public:
    vector<vector<int>> matrixReshape(vector<vector<int>>& mat, int r, int c) {
        vector<int> temp;
        vector<vector<int> > res(r, vector<int>(c));

        int idx = 0;
        if(r * c != mat.size() * mat[0].size()) return mat;
        for(int i=0; i<mat.size(); i++){
            for(int j=0; j<mat[0].size(); j++){
                temp.push_back(mat[i][j]);
            }
        }
        for(int i=0; i<r; i++){
            for(int j=0; j<c; j++){
                res[i][j] = temp[idx++]; 
            }
        }
        return res;
    }
};
```
Ngrx - Core Principles & New Features
Tags: ngrx, angular, webdev, javascript
Published: 2023-01-30 03:30:22

Ngrx is a powerful and popular library for building reactive applications in Angular. It provides a complete set of tools for managing state and side effects in your application. In this article, we'll cover the core principles of Ngrx and explore some of its new features.

Core Principles

Immutable State: Ngrx stores state as an immutable data structure, which means that state cannot be changed directly. Instead, state changes must be performed through actions and reducers.
Unidirectional Data Flow: Ngrx follows the unidirectional data flow pattern, where data flows in a single direction from actions to reducers to state.
Separation of Concerns: Ngrx separates state management from business logic, making it easier to maintain and test your application.

New Features

Facades: Ngrx 8 introduces facades, which provide a simple and intuitive way to access and manipulate state from components. Facades are generated automatically for you, and you can use them just like any other service in Angular.
Example:


```
@Injectable()
export class ProductsFacade {
  products$ = this.store.pipe(select(selectAllProducts));

  constructor(private store: Store<AppState>) {}

  addProduct(product: Product) {
    this.store.dispatch(addProduct({ product }));
  }
}
```
Actions: Ngrx 8 also introduces a new and improved way to create actions, using the createAction function. This makes it easier to define and manage your actions, and also provides better type checking for your action payloads.
Example:

```

export const addProduct = createAction(
  '[Products] Add Product',
  props<{ product: Product }>()
);

```
Selectors: Ngrx 8 provides improved support for selectors, making it easier to select and manipulate state in your application. Selectors can now be created as simple functions, and you can also use memoization to optimize performance.
Example:


```
export const selectAllProducts = createSelector(
  selectProductsState,
  (state: ProductsState) => state.products
);

```
In conclusion, Ngrx provides a powerful and flexible toolset for building reactive applications in Angular. With its core principles of immutability, unidirectional data flow, and separation of concerns, and its new features like facades, actions, and selectors, Ngrx makes it easier to build and maintain complex applications.
EPERM: operation not permitted" when trying to save/create file on Visual Studio Code
Published: 2023-01-30 03:20:25

_Fixed:_ 
**If you are not able to open or create a file in any of the drives ex. C: or D: etc.. Just download the vs-code system installer and you could use that across any drive.**



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpnwr9p30yjaodz5247q.JPG)
Streamlined Page Title Accessibility in Angular
Tags: webdev, javascript, programming, angular
Published: 2023-01-30 03:19:57



Page titles play a crucial role in website accessibility, as they provide context and help users understand the content of a web page. In Angular, setting the page title dynamically can be achieved through various methods, but a common and efficient approach is using the Title service.

Here's a step-by-step example of implementing dynamic page titles in Angular:

Import the Title service in the component:

```
import { Title } from '@angular/platform-browser';

```
Inject the Title service in the component's constructor:


```
constructor(private title: Title) {}

```
Set the title in the component's ngOnInit lifecycle hook or in a method that gets called whenever the title needs to change:


```
ngOnInit() {
  this.title.setTitle('Page Title');
}
```
Include the title tag in the component's template file:

```
<title>{{title}}</title>
```
With these steps, the page title will now dynamically change based on the component's logic.

It's also a good practice to add meaningful and descriptive titles for each page, making it easier for users and search engines to understand the content of a web page. Moreover, screen readers and other assistive technologies use the page title to provide context to users with disabilities.

In conclusion, implementing dynamic page titles in Angular is straightforward and can greatly improve the accessibility of a website. By using the Title service and following best practices, developers can ensure that their pages are accessible and user-friendly.