teleren/devto huggingface dataset:
Replacing "broken" images in Angular with a default image
Published: 2023-11-14 13:54:36


## Replacing “broken” images in Angular with a default image

Did you know broken images handle like errors, even if they do not actually log an error?

Images can fail to load for a number of reasons; the server is down, internet connection is suspect, or occasionally in tapping into an API endpoint for images, we GET an image src that turns out to be bad.

In this example, I will demonstrate a quick and easy fix for substituting a broken image with a default image.

## The Problem

Here I have a slide with an image that has failed to load.


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


Upon further inspection in the console, we can see there is a src for that image:


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



Diving even deeper, we can see inside the network tab that the image comes through as 200, Status OK

So, what’s the problem? In this case, the src was bad and we are hostage to what the API returns.

## The Solution

The solution in this case was to place an event listener on the image and use logic to replace broken images with a default image:

**In my TS file for the component**, I add a property for a defaultImg:

    defaultImage: string = '../src/for/a/good/image'

**In my HTML Template**, I add the event listner and substitution logic.

    <img [src]="slide.image [alt]="slide.title" (error)="slide.image = defaultImage">

Here we are using Angular's built in event listener for error(error) and changing slide.image to defaultImage when there is an error loading the image:


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


## Supplemental

You may also wish to set the error to null inside the event in case your backup image also fails to prevent an infinite loop.
Introduction To Technical Analysis
Published: 2023-11-14 13:38:47

## student of Law``
**student of LIFE **
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mijbs0a30toijzdc1rtv.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf0mz0rd0rfybjxi4ifb.jpg)
Truck Nomads: Rat rod cars and trucks
Tags: cars, trucks
Published: 2023-11-14 13:26:54

[Rat rod](https://ratrodusa.com) cars and trucks are a unique and popular style of vehicle that is often associated with the truck nomad lifestyle. Rat rods are typically old, beat-up, and rusty vehicles that have been modified to give them a unique and rugged appearance. Truck nomads are people who live on the road in their trucks or cars, and they often use rat rods as their transportation of choice.

There are a few reasons why truck nomads are drawn to rat rod cars and trucks. First, rat rods are relatively inexpensive to purchase and maintain. This is important for truck nomads, who often live on a tight budget. Second, rat rods are easy to customize. Truck nomads can modify their rat rods to suit their individual needs and preferences. Third, rat rods are a great way to express one's individuality. Rat rodders are often very passionate about their vehicles, and they take pride in their unique appearance.

If you are considering becoming a truck nomad, or if you are simply interested in learning more about rat rod cars and trucks, here are a few things you should know:

What is a rat rod? A rat rod is a type of custom car or truck that is typically made from old and worn-out vehicles. Rat rods are often characterized by their rusty and weathered appearance, as well as their unique modifications.
Why do truck nomads like rat rods? Truck nomads are often drawn to rat rods because they are relatively inexpensive, easy to customize, and a great way to express one's individuality.
How do I get started with rat rods? If you are interested in getting started with rat rods, there are a few things you can do. First, you need to find a suitable vehicle. You can find old and worn-out vehicles at junkyards, car auctions, and online classifieds. Once you have found a vehicle, you need to start modifying it to your liking. There are many different ways to modify a rat rod, so you can get creative.
Here are a few tips for modifying your rat rod:

Start with the basics. Make sure that your vehicle is safe to drive. This includes checking the brakes, tires, and suspension.
Don't be afraid to experiment. There are no rules when it comes to modifying a rat rod. Get creative and see what looks good to you.
Use recycled materials. Rat rods are all about being resourceful. Try to use recycled materials whenever possible. This will save you money and help to reduce your environmental impact.
Have fun! Modifying a rat rod should be an enjoyable experience. Don't take it too seriously and just have fun with it.
Once you have modified your rat rod, you are ready to start your truck nomad adventures. Hit the open road and explore the world in your unique and rugged vehicle.
SOLID in Software Development - 2
Tags: programming, beginners, productivity, career
Published: 2023-11-14 13:21:44

**_Open-Closed Principle (OCP)_**

The Open-Closed Principle (OCP) states that software entities (classes, modules, functions, etc.) should be open for extension but closed for modification. This means that we should be able to add new functionality to our code without having to modify existing code.

Here is an example of how the OCP can be violated:

```java
public class Shape {
    private String type;

    public Shape(String type) {
        this.type = type;
    }

    public double getArea() {
        if (type.equals("circle")) {
            return Math.PI * radius * radius;
        } else if (type.equals("rectangle")) {
            return length * width;
        } else {
            throw new IllegalArgumentException("Invalid shape type: " + type);
        }
    }
}
```

This `Shape` class has two types of shapes: circles and rectangles. If we want to add a new type of shape, such as a triangle, then we will need to modify the `getArea` method to handle the new shape. This violates the OCP because the `getArea` method should not be modified to handle new shapes.

A better way to design this code would be to use a strategy pattern:

```java
public interface ShapeAreaCalculator {
    double getArea();
}

public class CircleAreaCalculator implements ShapeAreaCalculator {
    private double radius;

    public CircleAreaCalculator(double radius) {
        this.radius = radius;
    }

    @Override
    public double getArea() {
        return Math.PI * radius * radius;
    }
}

public class RectangleAreaCalculator implements ShapeAreaCalculator {
    private double length;
    private double width;

    public RectangleAreaCalculator(double length, double width)
 
{
        this.length = length;
        this.width = width;
    }

    @Override

    
public
 
double
 
getArea()
 
{
        return length * width;
    }
}

public class Shape {
    private String type;
    private ShapeAreaCalculator shapeAreaCalculator;

    public Shape(String type, ShapeAreaCalculator shapeAreaCalculator) {
        this.type = type;
        this.shapeAreaCalculator = shapeAreaCalculator;
    }

    public double getArea() {
        return shapeAreaCalculator.getArea();
    }
}
```

This code follows the OCP because the `Shape` class is not modified to handle new shapes. Instead, we can create a new `ShapeAreaCalculator` implementation for each new type of shape.


<center>
***** More to Part 3 *****
</center>

<center>
**** 💻ALL THE BEST💻 ****
</center>
Azure + Keycloak + OpenSearch
Tags: devops, azure, keycloak, opensearch
Published: 2023-11-14 13:18:13


Hi Everyone, 

This post aims to deliver clear and concise knowledge within the field.  I hope someone finds the guide helpful. 

## Azure

### **Create a new tenant**.

- Access the Microsoft Azure portal.

- Select Microsoft Entra ID > Manage tenants > + Create. 

- Select a tenant type > Next: Configuration. 

- Enter the information to create the tenant.

- Select Next: Review + Create. 

### **Register an application**.

- Click the menu ☰ icon > Microsoft Entra ID > App registration > + New registration.

- Enter the information to register the application > click register.

### **Create a secret**

- Click on the registered application > certificates & secrets > + New client secret.

- Enter the information to create the secret > Add.

- Copy and save the value and ID of the secret.



## Keycloak

### **Configure an Identity Provider**

- Install Keycloak:  https://artifacthub.io/packages/helm/bitnami/keycloak/

- Access the Keycloak console -  username: **admin** | password: **copy the secret of the release name**.

- Click master > Create Realm.

- Enter a Real name > Create.

- Select the realm > Identity providers > Add provider > OpenID Connect v11.0.

- Enter an Alias name.

- Go to the Microsoft Azure portal > Microsoft Entra ID > App registration.

- Click on the registered application > Endpoints.

- Copy the URL of the OpenID Connect metadata document.

-  Paste the URL under the OpenId Connect Settings > Discovery endpoint.

- Verify the endpoints > Show metadata.

- Under Client authentication select > Client secret sent as post.  

- Go to the Microsoft Azure portal > Microsoft Entra ID > App registration.

- Copy the registered application (client) ID.

- Copy and paste the secret value in the Client Secret section > click Add.

- Copy the Redirect URI.

- Go to the Microsoft Azure portal > Microsoft Entra ID > App registration > Authentication.

- Select + Add a platform > Web.

- Paste the Redirect URI > click Configure.

### **Verify the configurations**

- Go to Keycloak > Client > click the Home URL.

- On the Keycloak account management page click  > signing in.

- Click on the configured identity provider button.

- Enter the login credentials on the Microsoft form > click submit. 


## OpenSearch

## **Authentication and Authorization** 

- Copy the configuration file from the path:

```
plugins/opensearch-security/securityconfig
```

- Add the OpenId authentication domain (authc) to the config.yml.

- Add the following settings to the dashboards.yml:

```
opensearch_security.auth.type:["openid"] 
opensearch_security.auth.multiple_auth_enabled:true
opensearch_security.openid.connect_url:  
opensearch_security.openid.client_id: 
opensearch_security.openid.client_secret: 
opensearch_security.openid.base_redirect_url: 
```

*Note:*
 Add other settings to meet the requirements.
Understanding the Roles of NOC and SOC in Enterprise Operations
Tags: cybersecurity, business, it, programming
Published: 2023-11-14 13:11:59

In the ever-evolving landscape of enterprise IT, two critical components play a pivotal role in ensuring smooth and secure operations: the Network Operations Center (NOC) and the Security Operations Center (SOC). While they may seem to operate in parallel universes, their roles are interdependent and crucial for the seamless functioning of any organization's IT infrastructure. Let's delve into the distinct yet complementary roles of NOC and SOC

The Network Operations Center (NOC): The IT Backbone

The NOC can be likened to the central nervous system of an organization's IT infrastructure. It's the control room where all the action happens to keep the network healthy and operational. NOC teams are tasked with monitoring network health, ensuring maximum uptime, managing bandwidth, and swiftly addressing any technical disruptions. They are the unsung heroes who work behind the scenes to ensure that the digital highway of an organization remains congestion-free and efficient.

For a more detailed exploration of NOC's role, ClearNetwork provides an insightful article, highlighting the differences between [NOC and SOC](https://www.clearnetwork.com/security-soc-vs-network-operations-center-noc/), and the unique challenges faced by modern NOCs.

The Security Operations Center (SOC): The Digital Watchguard

On the other side of the spectrum is the SOC, the organization's cybersecurity fortress. The SOC is constantly on the lookout for potential threats, guarding against unauthorized access, and responding to security breaches. In a world where cyber threats are becoming increasingly sophisticated, the SOC plays a critical role in analyzing data patterns to preempt and mitigate potential cyber-attacks.

Ecomuch offers a comprehensive overview of SOC's importance in enterprise operations, emphasizing its role in today's digital age.

NOC vs. SOC: A Symbiotic Relationship

While NOC focuses on operational efficiency and SOC zeroes in on security, their end goal is the same: to ensure the smooth and secure functioning of the organization's IT infrastructure. In the digital age, where downtime or a security breach can have catastrophic consequences, the roles of NOC and SOC are more critical than ever.

Discover more about SOC here: [https://ecomuch.com/noc-vs-soc-which-is-more-crucial-for-enterprise-operations/](https://ecomuch.com/noc-vs-soc-which-is-more-crucial-for-enterprise-operations/)
What became of Heroku? 🤔
Tags: heroku, backend, cloud, go
Published: 2023-11-14 13:00:29


## 🧟‍♂️ In the industry, it's a bit of a cautionary tale...
In its heyday, Heroku was an innovative cloud platform that made deployments much more convenient than alternatives at the time.

😬 Ultimately though, Heroku couldn't manage to retain its best customers — who through scaling ended up having the most complex requirements. The current major clouds AWS, Google Cloud, and Microsoft Azure, started offering a much broader range of services to support such use cases, and customers ended up migrating away from Heroku.

In 2010, Heroku was bought by Salesforce, and by most accounts the business and technical innovation stagnated. When they announced last year that they were shutting down their free tier, many saw it as the final nail in the coffin.⚰️

## 🌅 Yet... many small(ish) companies still use Heroku
— Why? They've become accustomed to the simple workflow, and stepping up to "the real cloud providers" would involve major investments in both knowledge and tooling. So they are making do for now, but many seem to be plotting their escape.🧗‍♀️

🥸 Many confuse what we're building at [Encore](https://encore.dev) as being another Heroku. Probably because the "push to deploy" workflow is similar.

👉 However, there are major differences between the two — which we've built into Encore by design in order to make Encore a long-term suitable technology choice. (We don't want to end up in the same trap.)

💡 Encore provides Heroku-like simplicity by [automating provisioning](https://encore.dev/docs/deploy/infra) and management of all common infrastructure primitives like Compute, Databases, Queues, Caching, Secrets, etc.

📣The big difference is: **ENCORE IS NOT A HOSTING PROVIDER**📣

Instead, Encore is designed to be a tool to help you build your application using cloud services from the major cloud providers, like AWS and GCP. This way you get the full power of "big cloud", without the learning curve and the ongoing DevOps investment.💸

And to make sure you're not handcuffed to what we're able to provide in our Infrastructure SDK, we've carefully designed Encore so that you can always use any cloud service directly, as you normally would if you weren't using Encore.

We think this is the only way to build a longer-term sustainable product that will be able to scale with our best users.💗

## 🗺 What does the current landscape look like?

In the graph below, I've tried to make sense of some of the current generation of tools and services, quantifying them in terms of flexibility and simplicity.

![Graph of backend services](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxqjrydwne2xcm09fyby.png)

## 📍A path forward from Heroku
If you are currently using Heroku and want help planning your escape to get the benefits of the major cloud providers, we're here to help!🙋‍♂️ 

Join the Developer's Hangout on [Slack](https://encore.dev/slack)👈 to chat with me and other Encore developers.
Optimizing Cypress for Faster Execution: Insights from Neocom
Tags: cypress, testing, javascript
Published: 2023-11-14 12:55:39

## Overview

In Neocom, we operate two main front-end services undergoing testing with Cypress. Due to our startup nature, we experience frequent pushes, merges, and deployments, necessitating careful consideration of our CI speed and costs.

Cypress itself is a robust testing tool, but its weightiness imposes a load on requests.

NOTE: The timing discussed pertains solely to Cypress execution, excluding processes such as Docker builds and CI runs.

## Integration tests

It's widely acknowledged that Integration tests can be slow, often due to factors like waiting, timeout testing, etc.

Sometimes, extensive testing on a specific page or component can contribute to slower tests.

Another factor affecting speed is the keyboard delay time of Cypress. Yes, you heard me right—if you have multiple inputs, this can consume considerable time.

### Solutions

1. Initially, we set the keyboard delay to zero, which worked well for several months. However, for API search inputs, consider adding debounce to your API search input or introducing a delay to the Cypress write function. This led to a 10% speed improvement.

2. Running tests in parallel: While Cypress itself offers parallel execution, it comes with a cost. We opted for the [Cypress Parallel](https://github.com/tnicola/cypress-parallel) library, resulting in significant speed improvements:

> Service 1: 06:05 mins => 03:47 mins (37.7% faster)
> Service 2: 04:25 mins => 01:36 mins (63.77% faster)

## HTTP 1.1

Cypress proxy and local frontend development servers use HTTP 1.1. Browsers, however, have a limit of max 6 connections to the same origin, impacting the speed of requests.

For instance, if you use ES Module and have nearly 200 components to load, the browser can only make 6 requests simultaneously. This sequential loading can result in significant time delays.

### Solution

As Cypress proxy doesn't support HTTP 2, and local dev servers typically lack HTTP2 support, we addressed this by bundling less. For example, with Rollup (Vite build), using `manualChunks` to export code into a few JS Modules improved speed. Example configuration:

```js
import { defineConfig } from "vite"

export default defineConfig({
  .......
  build: {
    rollupOptions: {
      output: process.env.TESTING && {
        manualChunks: () => "index.js",
      },
    },
  },
  .......
})
```

Results may vary based on Cypress request volume, with more noticeable improvements on the CI.

How about your experiences with Cypress speed? What strategies have you employed to enhance it?
Paracetamol.js💊| #217: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2023-11-14 12:39:35

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```js
const fn = (arr) => {
  let x = new Set(arr)
  x.add(1).add(5)
  x.delete(1)
  return x.size
}

console.log(fn([1,2,4,1,2])) // 🤔
```

- A. `3`
- B. `7`
- C. `6`
- D. `5`

---

Respuesta en el primer comentario.
7 Chrome extensions to boost your frontend workflow
Tags: webdev, programming, tooling, vscode
Published: 2023-11-14 12:35:01

Every week, we present a selection of frontend tools to improve your productivity.   
📰 Watch our latest episode [here](https://dev.to/tech_foutraque/tf-23-frontend-digest-1ikk) and don't miss our [tips section](https://techfoutraque.hashnode.dev/series/tips) here to improve your frontend skills and knowledge

## 📐 Dimensions

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699913383435/f40cc69c-6543-4c4c-87b8-e19ac1c1735e.jpeg)

Easily measure dimensions of any element on a web page. Perfect for designers and developers striving for pixel-perfect precision. Some bugs but useful.  
🔗 [https://tinyurl.com/3awmws2z](https://tinyurl.com/3awmws2z)

* * *
## 🎯 PerfectPixel

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700137923250/0ef219b9-7eac-4c67-b5f0-f7a79f309efd.png align="center")

PerfectPixel allows developers and markup designers put a semi-transparent image overlay over the top of the developed HTML and perform pixel perfect comparison between them. No more excuses to make perfect layouts!  
🔗 [https://tinyurl.com/2asd7rj9](https://tinyurl.com/2asd7rj9)

* * *
## 🎨 ColorZilla

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699913396702/74ffee6f-d29b-458c-a705-7a226209aff4.jpeg)

Capture and analyze colors, palette from any part of a web page, create css gradient and more. Useful for finding a color reference very quickly.  
🔗 [https://tinyurl.com/3939wb7m](https://tinyurl.com/3939wb7m)

* * *

## 📜 Lorem Ipsum Generator

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699913404231/73001188-8bf0-4df0-8cf8-397644c40cdb.jpeg)

Say goodbye to boring placeholder text! Extension that allows you to bypass sites. Also available in VScode  
🔗 [https://tinyurl.com/3f3hyacf](https://tinyurl.com/3f3hyacf)

* * *

## 🍪 EditThisCookie

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699913411388/58c24ee5-2b22-4f79-b9f6-1dd661ed8fd4.jpeg)

Manage your browser cookies like a pro! This extension lets you view, edit, and delete cookies. Great for developers, testers... 🍬🍪  
🔗 [https://tinyurl.com/566v5fvk](https://tinyurl.com/566v5fvk)

* * *

## 🔗 Check My Links

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699913424301/a424190e-8d08-44f1-b88a-af0bbcb5775a.jpeg)

Scan web pages for broken or dead links effortlessly. Our SEO friends will thank you.  
🔗 [https://tinyurl.com/2pxrbz36](https://tinyurl.com/2pxrbz36)

* * *
## 🩻 OGraph Previewer

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700138143752/d0721a96-3568-4c48-a989-c57e0d375a76.png align="center")

A light-weight extension to preview the open graph tags ( og tags) of the page in your current tab Provides a quick preview of open graph data of the page on the current tab.
* * * 

😍 If you like this newsletter, don't hesitate to share it, comment or like. What's your favorite frontend tool?

We are also on [**Twitter/X**](https://twitter.com/tech_foutraque) and [**BlueSky**](https://bsky.app/profile/tech-foutraque.bsky.social), come and say Hello! We share content throughout the week in advance.
https://codepen.io/DaniloLiano/pen/VwgzgpL
Tags: imersaodev, alura, imersaodev7
Published: 2023-11-14 12:32:50

Iniciado a imersão Alura, e feito primeiro projeto de JavaScrip..
Desafio realizado criar um conversor de moedas e trazer o resultado em Criptomoedas. 
A moeda escolhida foi o Euro e convertido em Cripto...

E no final retornando uma mensagem diretamente ao usuário do valor aproximado em criptomoedas....

Muito Obrigado @AluraOnline
Imersão Dav
Total guide to lazy loading with Angular @defer
Tags: angular
Published: 2023-11-14 12:28:22

---
title: Total guide to lazy loading with Angular @defer
published: true
description: Learn everything about the lazy loading of standalone components with Angular @defer block including best practices, deep dive on all interactions and gotchas including a live demo!
tags: Angular
cover_image: https://angularexperts.imgix.net/blog/angular-defer-lazy-loading-guide/title-16x9.webp?auto=format&w=2048
canonical_url:: https://angularexperts.io/blog/angular-defer-lazy-loading-total-guide
---

**Angular 17 is here, and it has arrived with a very strong line up of amazing goodies!**

> The new `@defer` block, which allows us to lazy load Angular standalone components, is by far the most exciting and impactful feature of Angular 17 (at least in my books)!

## The Angular @defer at glance

The `@defer` syntax allows us to lazy load any Angular standalone component with exceptionally great DX and API which covers almost every use case that you can imagine!

[Continue reading at AngularExperts.io (free)](https://angularexperts.io/blog/angular-defer-lazy-loading-total-guide#home)