teleren/devto huggingface dataset:
The State of End-to-end Testing with Angular - Prepare for Protractor Deprecation
Tags: webdev, javascript, programming, angular
Published: 2023-01-30 03:10:56


Angular is a popular open-source framework for building web applications, and end-to-end (e2e) testing is a crucial part of ensuring that your application is working as expected. However, with the recent deprecation of Protractor, the e2e testing landscape for Angular has changed significantly. In this article, we'll explore the state of e2e testing with Angular and provide a step-by-step guide to prepare for the deprecation of Protractor.

What is End-to-end Testing?

End-to-end testing is a type of testing that involves testing an application from start to finish, simulating the user's experience. This type of testing helps to catch bugs and issues that may not have been detected through unit or integration testing. With Angular, e2e tests are written using the Protractor framework.

Why is Protractor being Deprecated?

Protractor was developed as an open-source e2e testing framework for Angular applications. However, over time, it has become increasingly complex, and its performance has become a concern for many developers. Additionally, Protractor is built on top of the deprecated WebDriverJS library, which has made it difficult to maintain and update. As a result, the Angular team has decided to deprecate Protractor and replace it with a new e2e testing tool called Playwright.

How to Prepare for Protractor Deprecation?

If you're currently using Protractor for e2e testing in your Angular applications, it's important to start planning for the transition to Playwright. Here's a step-by-step guide to help you prepare:

Review your existing e2e tests: Take a look at your existing e2e tests and make a list of any test cases that you need to migrate to Playwright.

Install Playwright: Playwright can be installed as a node module by running npm install -g playwright.

Write Playwright tests: Playwright tests are written in JavaScript and are similar in structure to Protractor tests. Start by writing simple tests for your most important features and work your way up to more complex tests.

Run your tests: Once you have written your tests, you can run them using the Playwright CLI by running playwright run <test-file>.js.

Debug and refine: As with any new testing tool, you may encounter bugs or issues. Use the Playwright debugging tools to identify and resolve these issues.

In conclusion, the deprecation of Protractor marks an important turning point in the development of Angular e2e testing. However, by following the steps outlined in this article, you can prepare for this change and ensure that your Angular applications continue to be thoroughly tested and bug-free.
Angular CLI Auto-Completion: Streamlining Your Workflow
Tags: webdev, javascript, programming, angular
Published: 2023-01-30 03:05:51

Angular CLI Auto-Completion: Streamlining Your Workflow

The Angular CLI is an essential tool for developers working on Angular projects. It provides a simple and efficient way to manage your project and perform common development tasks. One of its key features is the auto-completion capability, which streamlines your workflow and saves you time.

How to Enable Angular CLI Auto-Completion

To enable auto-completion for the Angular CLI, you will need to install the bash-completion package. This can be done by running the following command:


```
npm install -g bash-completion

```
Once the package is installed, you can activate auto-completion by adding the following line to your .bashrc file:


```
source <(ng completion)

```
Now, whenever you use the Angular CLI in your terminal, you will have access to the auto-completion feature.

Using Angular CLI Auto-Completion

To see the power of auto-completion in action, let's look at an example. Suppose you want to create a new Angular project. You can start by typing the following command:


```
ng new

```
Now, instead of typing out the entire command, you can press the Tab key. You will see a list of suggestions, including options like "--routing" and "--style". You can use the arrow keys to navigate the list and select the option you want to use.

The auto-completion feature is also available when you work with existing projects. For example, if you want to generate a new component, you can start by typing the following command:

```
ng generate component

```
Again, press the Tab key to see a list of suggestions, including options like "--inline-template" and "--inline-style".

Conclusion

The Angular CLI auto-completion feature is a valuable tool for streamlining your workflow and saving time. By providing suggestions for available commands and options, it reduces the need for manual typing and helps you avoid errors. Give it a try today and experience the difference it can make in your Angular development process.
Earn trust and lead inclusively
Tags: leadership, trust, engineeringteams
Published: 2023-01-30 03:04:13

A good leader is someone who has a clear vision. Someone who is courageous enough to be vulnerable. Someone who has empathy, integrity, honesty, humility, and helps people reach their goals. A great leader is someone who does all the above and also leads inclusively with equity and diversity in mind. An inclusive leader manages a diverse group of people, and does so by respecting their uniqueness in an empathetic, bias-free way. They ensure that all team members feel that they are treated respectfully and fairly, are valued, and sense that they belong. These leaders actively seek and consider different views and perspectives to better inform their decisions. When a leader fosters a culture of inclusion and diversity, astonishing transformational outcomes are achieved. [Research from Deloitte Insights](https://www2.deloitte.com/us/en/insights/deloitte-review/issue-22/diversity-and-inclusion-at-work-eight-powerful-truths.html/#endnote-sup-20) shows that inclusive leadership directly enhances performance. Teams with inclusive leaders reported a 17% increase in team performance, 20% increase in high quality decision making, and a 29% increase in team collaboration. But the most important benefit of inclusive leadership is to earn trust. Trust is vital to successful relationship and leaders should grant it, but not assume they are trusted. They have to earn it, by providing safety, being honest and authentic role models, promoting two-way feedback, reducing unconscious bias, and advocating for those who cannot for themselves.

Continue reading the blog at https://blackmill.co/blog/earn-trust-lead-inclusively
How do I Crack ISTQB Agile Certification Exam? (5 Simple Steps )
Tags: webdev, beginners, programming, tutorial
Published: 2023-01-30 03:01:14

ISTQB Certification, In this video we will discuss How do I Crack ISTQB Agile certification exam, 

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

Let's discuss with Real examples and couple of examples.

In this video, we will discuss why to take ISTQB Certification

🟣🟣 Website Link - https://www.istqb.org/

🟣🟣 My Resume Template - http://sdet.live/notes


✅API Testing –
https://www.learnapitesting.com


✅Cypress Tutorial with LIVE Projects –
http://cypresstutorial.com


🟢30 Days of Automation Testing
https://go.scrolltest.com/automation

🟢30 Days of API Testing
https://apitesting.co/30days

🟢30 Days of Rest Assured
https://go.scrolltest.com/30days-rest...


—————————————————–
👪 Join our Community – http://bit.ly/learntesting2019

✅ Automation Tester Community – https://thetestingacademy.com

🐦Follow us on Twitter – https://twitter.com/itstechmode

📖 Like us on Facebook – https://www.facebook.com/scrolltest

🎤 Listen to our Podcast – https://anchor.fm/thetestingacademy

——————————————————

#istqb #istqbcertification #softwatetesting
New way of debugging template syntax errors with ng-template-error
Tags: webdev, javascript, programming, angular
Published: 2023-01-30 02:52:17

Debugging template syntax errors in Angular can be a frustrating experience, but the new tool ng-template-error makes the process much easier and more efficient. This tool helps developers identify and debug errors in their Angular templates by providing a detailed error message with the exact location of the error in the template file.

In Angular, templates are used to define the structure and layout of the user interface. When there is an error in the template syntax, the application will not work as expected. For example, if there is a typo in a property name or if the property doesn't exist, Angular will throw an error. These types of errors can be difficult to locate and fix without proper tools.

The ng-template-error tool solves this problem by providing a clear error message that makes it easy to identify the source of the error. Let's look at an example to see how it works.



```
<ng-template #myTmpl>
   {{this.willThrowError}}
</ng-template>
```
In this example, we have a simple ng-template that tries to bind the property willThrowError. If we run this code, Angular will throw an error because the property willThrowError doesn't exist. With ng-template-error, we will see the following error message:


```
Template parse errors:
Can't bind to 'willThrowError' since it isn't a known property of '<ng-template>'.
```
This error message clearly indicates that there is an error in the template and that the property willThrowError is not a known property of the ng-template. The error message also specifies the exact location of the error in the template file, making it easy to identify and fix the issue.

Another advantage of ng-template-error is that it makes it easier to debug complex templates. With large templates, it can be challenging to locate the source of an error. However, with ng-template-error, the error message will be displayed with the exact location of the error, even in complex templates.

In conclusion, ng-template-error is a powerful tool for Angular developers looking to streamline their debugging process and improve the efficiency of their workflow. With its clear error messages and precise location of errors, ng-template-error makes it easy to quickly identify and resolve template syntax errors in Angular applications. Try it out today and see the difference for yourself!
Goals of Infrastructure as code (IaC)
Tags: beginners, devops, infrastructure
Published: 2023-01-30 02:35:00

Managing infrastructure manually?

It is quite difficult to scale quickly and efficiently. However IaC makes deployment and scaling a breeze.

Infrastructure as Code (IaC) allows organizations to automate provisioning, configuration and management of their infrastructure with few lines of code, making it easier to manage and scale their systems.

 Purpose of infrastructure as code (Iac)?👇


![Goals of IaC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7izkwrebvp8js9q6r7vp.png)
[iOS Swift] - Adding Custom Fonts to your app
Published: 2023-01-30 01:44:11

For this example I will be adding _Montserrat-Bold_ and _Montserrat-Regular_ as custom font to my iOS app

---
### **Steps**

1. Download the font files, [Montserrat](https://fonts.google.com/specimen/Montserrat)



2. Create directory _Fonts_ and drag-n-drop the files to the directory, and on the pop up make sure to check _copy files if needed_
<img width="100" height="100" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lucdfk3emv6pgsrptxk.png">



3. Register the custom fonts on _Info.plist_
![Info.plist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsl46uupsiebd8wwt4ws.png)



4. Using the custom fonts on storyboards
![Selecting font on storyboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a912gb4r5o9qds2fkasl.png)



5. Using the custom fonts on code

```
public static func montserratRegular(fontSize: CGFloat) -> UIFont {
        guard let customFont = UIFont(name: "Montserrat-Regular", size: fontSize) else {
            fatalError("""
                Failed to load the "Montserrat-Regular" font.
                Make sure the font file is included in the project and the font name is spelled correctly.
                """
            )
        }
        return customFont
    }
```

---

## Disclaimer

![Disclaimer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s0ecwpv06tzfre5up91.png)
Debugging NodeJS
Published: 2023-01-30 01:34:59

**Use the built-in debugger**
Node.js comes with a built-in debugger that can be used from the command line.

**Use a Node.js debugger tool**
There are several third-party debugger tools, such as node-inspector and Visual Studio Code, that can be used to debug Node.js applications.

**Console logging**
The console.log() method is a simple and effective way to debug Node.js applications by logging values of variables and expressions.

**Using breakpoints**
Breakpoints can be set in the code to pause the execution and inspect the state of the application at that point.

**Heap snapshots**
Heap snapshots are a great way to understand the memory usage of your application and identify potential memory leaks.

**Error handling**
Make sure to add proper error handling in the code to catch and log any errors that might occur during runtime.

**Profiling**
Node.js has built-in tools, such as the profiler, to help identify performance bottlenecks and optimize the application's performance.

**Use a logging library**
A logging library, such as Winston or Bunyan, can be used to log messages from the application and make it easier to debug.

**Debugging in production**
Debugging in a production environment can be challenging, but it can be done using techniques like remote debugging or using logs to recreate the issue.

## Disclaimer

![Disclaimer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bixj4kqim0ubuh4n401f.png)
(WIP) Useful Docker Commands
Published: 2023-01-30 01:32:19

**Quickly Debug a Docker File**

```
docker build . -t <name> 
docker image list
docker run -td <image>
docker ps
docker exec -it <container> /bin/bash
```

**OS Arch (CPU) type**
Checking the type of docker image/container
```
dpkg --print-architecture
```

Checking if your docker builder/node supports certain types
```
docker buildx ls
```



**Clean up**
To stop all Docker containers, simply run the following command in your terminal:

```
docker kill $(docker ps -q)
docker rm $(docker ps -a -q)
docker rmi $(docker images -q)
```

To clear the cache of builder, use following:
```
docker builder prune
```



**Create multi-platform image**
_List all buildx on the machine_
`docker buildx ls`
```
NAME/NODE       DRIVER/ENDPOINT STATUS  BUILDKIT PLATFORMS
default *       docker
  default       default         running 20.10.21 windows/amd64, linux/amd64
desktop-linux   docker
  desktop-linux desktop-linux   running 20.10.21 linux/amd64, linux/arm64, linux/riscv64, linux/ppc64le, linux/s390x, linux/386, linux/arm/v7, linux/arm/v6
```
run `docker context use desktop-linux` to switch to context desktop-linux

_Use specified buildx_
`docker buildx use desktop-linux`

_Check what the current buildx is_
`docker buildx inspect --bootstrap`

```
Name:   default
Driver: docker

Nodes:
Name:      default
Endpoint:  desktop-linux
Status:    running
Buildkit:  20.10.21
Platforms: linux/amd64, linux/arm64, linux/riscv64, linux/ppc64le, linux/s390x, linux/386, linux/arm/v7, linux/arm/v6
```

_Time to build an image_
`docker buildx build . -t <image_name> --platform linux/arm64`

_Inspect further on an instance of this image_
`docker run --rm <image_name> uname -m`

```
WARNING: The requested image's platform (linux/arm64) does not match the detected host platform (linux/amd64) and no specific platform was requested
aarch64
```


Ref:
https://www.docker.com/blog/multi-arch-images/


**Conditional Logic in Docker Build **
By using ARG and ENV
```
FROM node:alpine

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY package.json /usr/src/app/
RUN npm install
COPY . /usr/src/app
ENV PORT 3000
ARG DOCKER_ENV
ENV NODE_ENV=${DOCKER_ENV}
RUN if [ "$DOCKER_ENV" = "stag" ] ; then  echo   your NODE_ENV for stage is $NODE_ENV;  \
else  echo your NODE_ENV for dev is $NODE_ENV; \
fi 
```
when you build this Dockerfile with this command

`docker build --build-arg DOCKER_ENV=stag -t test-node .
`You will see at layer

` ---> Running in a6231eca4d0b your NODE_ENV for stage is stag
`When you run this docker container and run this command your output will be

```

/usr/src/app # echo $NODE_ENV

stag
```
"Uncaught SyntaxError: Unexpected token <" ...?
Tags: javascript, react, node, beginners
Published: 2023-01-30 01:14:49

While I was switching from an old deployment platform to Vercel, I got this error message again and again: `Uncaught SyntaxError: Unexpected token <`.

I found out that this was due to _chunk file names_.

In this article, I'll be talking about:
1. What is a chunk file name?
2. What is it for, and how does it work?
3. Why did it cause an error, 'Unexpected token <'?
4. How did I fix this error?


**What is a chunk file name?**
`[name].[contenthash].js`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0by7eoauhkuhi54otuds.jpeg)

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


When you build your app, you get a split file.
You can find it inside the build folder.


**What is it for? How does it work?**
When sending data from client to server, you send in chunks instead of a whole file. This "enable[s] long term caching techniques to improve application loading performance." 
(See for more details - https://create-react-app.dev/docs/production-build#static-file-caching)
When you make a change to your app and run a build, a chunk file is updated and its name (the hash part) is changed. 


**Why did it cause the error, 'Unexpected token <'?**
The script in the index file was pointing to an old chunk file, and it couldn't find the file. That's why I got this error.


**How did I fix this error?**
There might be another better way to fix this error, but what I did (and it worked) was to delete the build folder and run the build again. But, I still got the same error. I'm assuming the browser was caching the data. When I checked the deployed app the following day, it worked.

This article was a brief summary of what issue I had and how I handled it. All the issues are related to "caching" and "webpack," so I'll dig deeper into these subjects next.

**links**
[Creat React App](https://create-react-app.dev/docs/production-build#static-file-caching)
[Netlify](https://answers.netlify.com/t/support-guide-why-do-i-see-uncaught-syntaxerror-unexpected-token-errors-how-can-i-use-chunking-or-versioning-for-my-assets-at-netlify/124)
Proxy, Reverse Proxy, SSM, Cloudwatch
Published: 2023-01-29 22:23:03

**𝐏𝐫𝐨𝐱𝐲 𝐒𝐞𝐫𝐯𝐞𝐫** - A middle man server that masks your Ip address and sends the request to the destination server(Internet). For example a user "A" wants to hit the server "B"(Internet) , the request from A reaches a proxy server which sends the request of "A" as if a request is trying to reach "B"(Internet)
In this way "B" doesn't know the Ip address of user "A"
A(internet) - Proxy Server(Masks the Ip address of A) - B(Destination Server)_
**𝐑𝐞𝐯𝐞𝐫𝐬𝐞 𝐏𝐫𝐨𝐱𝐲 𝐒𝐞𝐫𝐯𝐞𝐫** - A middle man server which accepts the user's request (C) that comes via the internet to hit the server(D). The response from server (D) to (C) is sent to the user as if the response is coming from middle man server. In this way the IP address of Server D is masked
C(Internet) - Reverse Proxy Server(masks the ip address of D) - D(Destination)
**𝐒𝐒𝐌 - Systems Manager** in AWS is used to manage the EC2 instances. To manage the EC2 instances via Systems Manager we must create a role "ec2roleforSSM" and attach it to the EC2 instances. We must install SSM agent in EC2 instances. Once this is done in SSM dashboard we can see the EC2 instances under managed instances tab. Using Run command we can execute scripts or any command on the EC2 instances under the managed instances tab. We can perform patching using patchbaseline on Ec2 instances we can choose the patch required and not required via Patch baseline. Using Fleet Manager we can manage the nodes(EC2 instances or onpremise servers). We can manage the nodes access, RDP, SSH, Administrator passwords, user management, performance of the machines, utilization of Disk, CPU etc tasks of the nodes using Fleet Manager.
**𝐂𝐥𝐨𝐮𝐝 𝐖𝐚𝐭𝐜𝐡 **- Cloud Watch is a monitoring agent that has to be installed in your EC2 machine so that you will be able to view the detailed metrics of the EC2 machines such as disk, cpu, read ops, write ops, queue depth, etc.. We can configure Cloudwatch alarms in order for to monitor the performance of our Ec2 machines. For example when CPU utilization of a particular production server reaches 70-90% then an alarm should be triggered and we can also make this alarm to reach the customer or the user via SNS notification service. We can create log groups in Cloud Watch in which the ECS or VPC flow logs can be stored. Using Cloudwatch event rules we can define in a way of automation to trigger an event such as any action to be made on the specified AWS resources.
The detailed way of installing Cloud watch agent can be seen here - https://lnkd.in/gXxzgEET
#aws #awscloud #cloudcomputing
(will be writing here about route53 and Kinesis shortly)
Datanova 2023
Tags: data, news, conferences, community
Published: 2023-01-30 00:24:01

Hello friends. I'm here to tell you about a conference that has consumed my life for the past three months. On February 8th and 9th, Starburst will be hosting our FREE and VIRTUAL event. I'm usually the last one to self promote, but I'm extremely proud of what we were able to build. I think this is amazing data content with awesome data leaders. I've listed out my favorite sessions for you.

1. Fun with founders: Expectation versus reality with Matt, Drew, Max and Michel - listen for a candid conversation with the founders of dbt, Preset, Airbyte, and Starburst

2. Joe Reis and Andy Mott will debate if data mesh the end of data engineering

3. Benn Stancil will talk about how data engineering fails

4. Chad Sanderson will give an introduction into data contracts


[Register now!](https://bit.ly/3GU45jX)

And yes, that is indeed me on the sign up website making a fool of myself.