teleren/devto huggingface dataset:
Key Testing Insights 2022 Report by LambdaTest
Tags: testing, keyinsights, mobile, webdev
Published: 2023-03-10 06:36:13

**iPhone series is the most popular device for mobile testing says LambdaTest’s Key Testing Insights 2022 report**

***The report also highlights interesting testing factoids and trends in the testing space***

[LambdaTest](https://www.lambdatest.com/?utm_source=devto&utm_medium=organic&utm_campaign=mar10_kj&utm_term=kj&utm_content=webpage), the leading continuous quality testing cloud platform, has come up with Key Testing Insights 2022 report based on its platform usage last year.

According to the report, the top browser used for testing in 2022 was Chrome (76.27%), followed by Safari (9.12%), and Firefox (6.97%). When it comes to operating systems, our users tested the most on Windows (77.32%), followed by macOS (11.78%), and Android (5.76%).

The report also had geography-specific device and browser testing highlights. On the device’s side, the most popular device for mobile testing was iPhone 13 Pro Max in North America and Asia Pacific, iPhone 13 in EMEA, and iPhone 11 in Latin America. If considering global data, the most popular devices for testing were iPhone 13 Pro Max, followed by iPhone 13 and Galaxy S21 5G. Based on the report, LambdaTest has also saved 720 years worth of test execution time for the customers in the year 2022.

“Customer experience is everything in today’s digital-first world, hence businesses should ensure that testing is at the core of their go-to-market strategy. The numbers in the LambdaTest Key Testing Insights 2022 report provide a direction that teams can take to smartly strategize their testing,” said Jay Singh, cofounder, LambdaTest. “ We will continue to track these numbers closely and more importantly, we are continuously updating our continuous quality testing platform to enable our customers to give the best digital experience to their users.”

LambdaTest has also recently launched [HyperExecute](https://www.lambdatest.com/hyperexecute?utm_source=devto&utm_medium=organic&utm_campaign=mar10_kj&utm_term=kj&utm_content=webpage), a next-gen smart test orchestration platform that helps testers and developers run end-to-end automation tests at the fastest speed possible.

![](https://cdn-images-1.medium.com/max/2000/0*WMaMItotNLYIi4nv.png)

![](https://cdn-images-1.medium.com/max/2000/0*V9MlnHw9Ab_PugbR.png)

![](https://cdn-images-1.medium.com/max/2000/0*k5XNY2uJNb1S0xRD.png)

![](https://cdn-images-1.medium.com/max/2000/0*cxKM02yHyrz4sd0B.png)

![](https://cdn-images-1.medium.com/max/2000/0*JFXuMHhSHN1CC5T1.png)

![](https://cdn-images-1.medium.com/max/2000/0*EoDxcsR7vseIZ7ay.png)

![](https://cdn-images-1.medium.com/max/2000/0*YxYRI2FXr6_1ePdP.png)

![](https://cdn-images-1.medium.com/max/2000/0*G-7FcEL5Lyn9KCQZ.png)

![](https://cdn-images-1.medium.com/max/NaN/undefined)
Optimize Page Load Speed with Lazy Loading Images in Angular 15
Tags: angular
Published: 2023-03-10 13:24:53

<p class="paragraph"> Lazy loading images is a technique that helps to optimize the performance of a website by deferring the loading of images until they are needed. This can significantly improve the page load time, especially for websites with many images. In this article, we will be discussing how to implement lazy loading of images in an Angular 15 application using the ng-lazyload-image plugin. </p><p class="paragraph"> ng-lazyload-image is a popular and highly-rated Angular library that makes it easy to implement lazy loading of images. It uses IntersectionObserver, a native API for detecting when an element enters or exits the viewport, to determine when to load images. This approach is much more efficient than using the traditional scroll or resize event-based approaches, which can negatively impact the performance of a website. </p><p class="paragraph"> Getting started with ng-lazyload-image is simple. To install it, simply run the following command in your Angular project: </p><pre><code class="code-block">npm install ng-lazyload-image --save</code></pre><p class="paragraph"> Once installed, you can import the LazyLoadImageModule in your Angular module to make it available throughout your application: </p><pre><code class="code-block">import { LazyLoadImageModule } from 'ng-lazyload-image';

@NgModule({
  imports: [
    LazyLoadImageModule
  ]
})
export class AppModule { }
</code></pre><p class="paragraph"> Next, you can use the <code>lazyLoad</code> directive in your templates to specify the images that should be lazy loaded: </p><pre><code class="code-block">&lt;img [lazyLoad]="imageUrl" [offset]="offset" [defaultImage]="defaultImage" [errorImage]="errorImage"&gt;
</code></pre><p class="paragraph"> The <code>lazyLoad</code> directive takes several optional parameters: </p><ul><li>offset: The number of pixels before the image enters the viewport to start loading it.</li><li>defaultImage: An image to display while the lazy-loaded image is loading.</li><li>errorImage: An image to display if the lazy-loaded image fails to load.</li></ul><p class="paragraph"> By using ng-lazyload-image, you can significantly improve the performance of your Angular 15 application and provide a better user experience for your users. Give it a try today! </p><p class="paragraph"> In conclusion, ng-lazyload-image is a simple and efficient way to implement lazy loading of images in an Angular 15 application. It's easy to install and use, and can have a significant impact on the performance of your website. Give it a try and see for yourself! </p>
Letters of AI: Automatically Generate Cover Letters + Letters of Rec
Tags: blog
Published: 2023-03-10 18:32:20

## Background and Motivation
Countless users already use OpenAI's chat interface (ChatGPT( to handle all sorts of routine tasks: write emails, answer research questions, debug code, etc. While extremely powerful, the ChatBot still requires users to overcome to pain points:

**1. Identify which problems ChatGPT would well: ** AI has a unique advantage over humans in handling issues that require exposure to vast data sets (e.g. image labeling) or repetitive tasks prone to error. But would you trust it to write you a love letter? The optimal task division between humans and AI is still evolving, leaving it up to individuals to decide when to handle a task themselves as opposed to rely on a machine.

**2. Formulate the prompt to ask ChatGPT**: Even if a user knows that a certain task is better suited for AI than humans, s/he must then identify the best way to pose a query and present relevant data to the AI.

With the release of ChatGPT's API, developers can leave the nitty-gritty details of model development to OpenAI and focus on building tools that optimize for user experience. We anticipate that these tools will focus on specific use cases and be discovered by users looking for a solution to a problem they didn't even know AI could solve. They will then simplify the process of data collection from users to ensure that the AI is fed the optimal parameters to produce quality results.

As part of our efforts to predict the types of applications we expect to be built off of ChatGPT's API, we wanted to understand how difficult it was to build a ChatGPT integrated tool. So we built a little example ourselves!

## Summary of Technical Features
Here are the key features of our React App. Here's what we learned how to do:
- **ChatGPT API Integration**: Users can input a couple of fields about a job they are applying to or recommending a candidate for, which generates a prompt that ChatGPT can complete

-**Pupeteer/Chromium Integration**: Users can put in a link to any LinkedIn Job Description, and the tool parses the page to extract the job description

-**Public Hosting**: Using Render and Glitch, we were able to publicly host the server that returns the ChatGPT + Pupeteer responses, as well as our db.json. This allows our tool to be accessed by users without access to our localhost server.
NextJS dependency Environment Variables
Tags: nextjs
Published: 2023-03-11 06:12:23

I want to include a dependency in my NextJS project that can use environment variables (process.env.X) for some config options. I know that NextJS has some special handling for env variables, but I'm not sure if that extends into dependencies as well.

Can anyone shed some light on this? Is there a difference between Dev and Prod handling? (deployed on Vercel)
N-Tier Architecture
Tags: architecture, systems, beginners, tutorial
Published: 2023-03-11 10:15:18

The N-Tier Architecture is when the application is divided into logical layers and physical tiers so they are separate and can run on separate machines. Each layer has a specific responsibility and manages dependencies as well. A lower layer can give the services to a higher layer but cannot receive any.

The tiers can either use asynchronous messaging or call each other directly. The layers are available in the tiers which are separated in a way that it’s more [scalable](https://dev.to/pragyasapkota/scaling-3dfh) and resilient. However, the [latency](https://dev.to/pragyasapkota/latency-and-throughput-340h) is increased since there are additional network communications in the system.

## Types of N-Tier Architecture

There are two types of layers in N-Tier architecture.

### 1. Closed Layer Architecture 
The layer is limited to call the next layer immediately down. It limits the dependencies between the layer despite the unwanted network traffic if the layer can pass the requests along to the next layer.

### 2. Open Layer Architecture 
It can call any of the layers that lie below.

_There are three types of tiers in N-Tier Architecture._

### 1. 3-Tier Architecture
There are three different layers in the 3-Tier Architecture.

a. **Presentation Layer** handles user interactions with the application.

b. **Business Logic Layer** accepts data from the layer above and uses business logic to validate it.

c. **Data Access Layer** receives the data from the business logic layer and makes the database operations.

### 2. 2-Tier Architecture

In the 2-tier architecture, the presentation layer communicates with the data store and works on the client. Compared to the 3-tier architecture, the 2-tier misses out on the business logic layer. There is no middle layer between the client and the server.

### 3. 1-Tier Architecture

The 1-Tier architecture is also known as single-tier architecture where the application runs as if it was on a personal computer. All the components reside on a single server.

## Merits of N-Tier Architecture

- Layers are sort of a firewall providing extra security
- [Scaling](https://dev.to/pragyasapkota/scaling-3dfh) is easy due to the separate tiers
- Availability is improved
- Maintenance is improved since each tier can be handled by different individuals

## Demerits of N-Tier Architecture

- Network Security is risky
- Network [Latency](https://dev.to/pragyasapkota/latency-and-throughput-340h) is increased with the increased number of tiers
- Hardware cost is increased since each tier needs its own
- System complexity is increased as a whole

**_I hope this article was helpful to you._**

**_Please don’t forget to follow me!!!_**

**_Any kind of feedback or comment is welcome!!!_**

**_Thank you for your time and support!!!!_**

**_Keep Reading!! Keep Learning!!!_**
Add a Dynamic Sitemap to Next.js Website Using Pages or App Directory
Tags: nextjs, javascript
Published: 2023-03-11 14:21:29


![Add a Dynamic Sitemap to Next.js Website Using Pages or App Directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06chbahvjckdanxxlsug.png)

In this post, we will explore how to add a dynamic sitemap to a Next.js website using the app directory. A sitemap is a file that lists all the pages of a website and helps search engines understand the structure of the site. By the end of this post, you will have a fully functional dynamic sitemap for your Next.js website.

The post is available on [my blog](https://claritydev.net/blog/nextjs-dynamic-sitemap-pages-app-directory).
Using composition to optimize React rendering
Tags: webdev, javascript, beginners, react
Published: 2023-03-11 15:01:09

How you can improve and minize re-rendering in your React app using component composition. It's really simple. Here we refactor a simple app that re-renders a third component not related to the changes happening.

{% youtube lfqaQxwnLng %}

```
import { useCallback, useState } from 'react';

function App() {
    return (
        <div className="app">
            <CounterComponent>
                <Title />
            </CounterComponent>
        </div>
    );
}

const CounterComponent = ({ children }) => {
    const [count, setCount] = useState(0);

    const increment = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);

    const decrement = useCallback(() => {
        setCount(prev => prev - 1);
    }, []);

    console.log('render CounterComponent');

    return (
        <div>
            {children}
            <h2>{count}</h2>
            <div>
                <button onClick={decrement}>-</button>
                <button onClick={increment}>+</button>
            </div>
        </div>
    );
};

const Title = () => {
    console.log('render Title');
    return <h1>Counter</h1>;
};

export default App;

```
useEffect Simplified
Tags: react, javascript, programming, webdev
Published: 2023-03-11 16:00:55

---
title: useEffect Simplified
published: true
description: useEffect explaination with examples. 
tags: react, javascript, programming, webdev
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-11 14:39 +0000
---

useEffect hook was introduced in functional class paradigm in React. useEffect is most used hook, you can use it to make network call, preform calculation, listen for a particular state change and for cleanup of component. 

Let's understand useEffect function definition first - 

```javascript
useEffect(() => {
 
    return () => {
        // cleanup function
    }
},[])
```
This hook accepts callback function as 1st argument and dependency array as 2nd argument. 
Inside callback function, you can return a function which will get triggered as cleanup function. 

2nd Argument - Dependency array is tweak for different behaviour. 

Before going to into useEffect, lets understand first when a component is mounted and unmounted. 

A component is mounted when it is part of render logic. 
```javascript
const Profile = () => {
    return (
        <div>Profile Component</div>
    )
}

const App = () => {
    const mount = false;
    return (
        <div>
            {
                mount ? <Profile/> : null
            }
        </div>
    );
}

```
Here Profile component is mounted only when mount flag is true and unmounted only when it is removed from render. 


### Case 1 - Empty dependency array

```javascript
useEffect(() => {
    return () => {
        
    }
},[])
```
Here, callback function will be triggered when component is mounted and cleanup function will be triggered with component is unmounted.

This is similar to componentDidMount and componentDidUnMount from class based components from pre React 16. 

### Case 2 - With Dependency array

```javascript
const App = () => {
    const [count, setCount] = useState(0);
    const [streak, setStreak] = useState(0);

    useEffect(() => {
        // This will be triggered when count state is changed
        return () => {

        }
    },[count])

    useEffect(() => {
        // This will be triggered when count streak is changed
        return () => {

        }
    },[streak])


    useEffect(() => {
        // This will be triggered when count or streak streak is changed
        return () => {

        }
    },[count, streak])

    return (
        <div>
           <p>This is count : {count}</p>
           <p>This is streak : {streak}</p>
        </div>
    );
}
```


### Case 3 - No Dependency array
```javascript
const App = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        // This will trigger on every render
        return () => {

        }
    })

    return (
        <div>
           <p>This is count : {count}</p>
           <p>This is streak : {streak}</p>
        </div>
    );
}
```
Angular para leigos (parte 2)
Tags: angular, typescript, html
Published: 2023-03-11 19:58:20

Angular é um framework muito poderoso para criar aplicações web. Uma de suas características mais marcantes é a capacidade de dividir a aplicação em componentes reutilizáveis. Neste post, vamos dar uma olhada em como criar componentes em Angular e usar boas práticas de HTML e SCSS.

## Criando um componente

Para criar um componente em Angular, você deve usar o comando ng generate component. Esse comando criará uma pasta com o nome do componente e alguns arquivos dentro dela. O arquivo mais importante é o arquivo .ts, que contém a lógica do componente. O arquivo .html contém o template do componente e o arquivo .scss contém os estilos do componente.

Aqui está um exemplo de como criar um componente chamado meu-componente:

`ng generate component meu-componente`

Depois de executar esse comando, o Angular criará uma pasta chamada meu-componente com vários arquivos dentro, são eles arquivo html, scss e arquivos typescript para lógica e testes.

## Adotando boas práticas para o HTML de nossos componente

Ao criar o template do componente, você deve seguir algumas boas práticas para garantir que ele seja fácil de ler e manter.

### Use tags semânticas
Sempre que possível, use tags semânticas para descrever o conteúdo do seu componente. Por exemplo, em vez de usar uma div genérica, use tags como header, section, article, footer, etc.

### Use os atributos data-

Use atributos data- para fornecer informações adicionais sobre o seu componente. Esses atributos não afetam a funcionalidade do componente, mas podem ser úteis para fins de estilo ou análise.

`<header data-testid="meu-componente-header">
  <h1>Título do meu componente</h1>
</header>
<section>
  <p>Conteúdo do meu componente</p>
</section>
<footer data-testid="meu-componente-footer">
  <p>Rodapé do meu componente</p>
</footer>`

Por hoje encerramos a nossa segunda parte, mas em nossa terceira parte iremos conhecer sobre as diretivas do Angular, espero que tenham gostado do post de hoje. Grande abraço e até o próximo.
Java str into obj data func
Published: 2023-03-12 15:27:35

<!DOCTYPE html>
<html>
<body>
<h2>Converting a string into a date object.</h2>
<p id="demo"></p>
<script>
const text='{"name":"Munira","birth":"1986-1-11","city":"Vadodara"}';
const obj=JSON.parse(text);
obj.birth= new Date(obj.birth);
document.getElementById("demo").innerHTML=obj.name+","+obj.birth;
</script>
</body>
</html>
TypeScript: Generic Types
Tags: typescript, javascript, webdev, programming
Published: 2023-03-12 16:47:12

TypeScript is a statically typed superset of JavaScript that allows developers to write code with more safety and accuracy. Generic types in TypeScript make it possible to write reusable and flexible code by creating generic types that can be used with different data types.

You can use generic types to write functions, classes, and interfaces that can work with any data type. The syntax for creating a generic type in TypeScript is to use angle brackets `<>` to define the generic type parameter. For example:

```
function identity<T>(arg: T): T {
  return arg;
}
```
Here, `identity` is a generic function that takes a type parameter `T` and returns a value of type `T`. The `arg` parameter is of type `T`, and the return value is also of type `T`. This means that the function can work with any data type.

We can call the `identity` function with different data types as follows:

```
let output1 = identity<string>("hello");
let output2 = identity<number>(10);
```
In this example, we called the `identity` function with a string and a number as the type argument.

Another way of using generic types in TypeScript is with interfaces. We can create a generic interface that can work with any data type, as follows:

```
interface List<T> {
  data: T[];
  add(item: T): void;
  remove(item: T): void;
}
```
In this example, `List` is a generic interface that has a `data` property of type `T[]` and two methods `add` and `remove` that take a parameter of type `T`. This means that we can create a `List` of any data type.

We can create a `List` of strings as follows:

```
let list = { data: ["apple", "banana"], add: function(item) { this.data.push(item); }, remove: function(item) { this.data.splice(this.data.indexOf(item), 1); } };
```
In this example, we created a `List` of strings and added two items to it. We used anonymous object syntax to define the `data`, `add`, and remove properties.

In conclusion, generic types in TypeScript allow you to write flexible and reusable code that can work with any data type. It's possible to create generic functions, classes, and interfaces that can be used with different data types by defining a generic type parameter.

A good question is, "when should I use generic types, and are there any drawbacks to using them?".

More to come...
What is the difference between null and undefined?
Tags: javascript, typescript, webdev, programming
Published: 2023-03-12 17:28:15

The convention in TypeScript is that `undefined` values have not been defined yet, whereas `null` values indicate intentional absence of a value.
<!--more-->
## Example with `null`

The below function shows how `null` can be used by returning an object that always has the same structure, but with **intentionally assigned** `null` values when the function does not return an `error` or `result`:

```ts
function divide(a: number, b: number) {  
  if (b === 0) {  
    return {  
      error: 'Division by zero',  
      result: null  
    };  
  } else {  
    return {  
      error: null,  
      result: a / b  
    };  
  }  
}
```

## Example with `undefined`

On the other hand, `undefined` represents the absence of any value. It is a value that is **automatically assigned** to a variable when no other value is assigned. It often indicates that a variable has been declared but not initialized. It can also signify a programming mistake, such as when a property or function parameter was not provided:

```ts
let ratio: number | undefined;  
  
if (ratio === undefined) {  
  console.log('Someone forgot to assign a value.');  
} else if (ratio === null) {  
  console.log('Someone chose not to assign a value.');  
}
```

## Best Practice

The **TypeScript Coding guidelines** recommend using only `undefined` and discouraging the use of `null` values (see [here](https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines#null-and-undefined)). It is important to note, however, that these guidelines are tailored towards the TypeScript project's codebase and may not necessarily be applicable to your own projects.

## Want more?

If you found this short explainer helpful, hit that **subscribe button** on my [YouTube channel](https://www.youtube.com/typescripttv?sub_confirmation=1) or give me a [follow on Twitter](https://twitter.com/bennycode) to level up your TypeScript game.
TIL 03/12/23
Published: 2023-03-12 18:06:56

Today I learned about loops in Ruby. 
****Simple Loops****
loop do
  print "Do you want to continue? (y/n) "
  answer = gets.chomp.downcase
end

**While loops:**
 answer = ""
while answer != "n"
  print "Do you want me to repeat this pointless loop again? (y/n) "
  answer = gets.chomp.downcase
end

**Until Loops****
answer = ""
until answer == "no" do
  print "Do you want this loop to continue? (y/n) "
  answer = gets.chomp
end