scrape-book

gistfile1.md

Must be one of the following:

feat: A new feature. fix: A bug fix. docs: Documentation only changes. style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc). refactor: A code change that neither fixes a bug nor adds a feature. perf: A code change that improves performance. test: Adding missing tests. chore: Changes to the build process or auxiliary tools and libraries such as documentation generation.

Initial commit 🎉 🎉

New feature ✨ ✨

Bugfix 🐛 🐛

Documentation 📚 📚

Performance 🐎 🐎

Tests 🚨 🚨

Refactor code 🔨 🔨

Removing code/files 🔥 🔥

Adding CI build system 👷 👷

Security 🔒 🔒

Upgrading dependencies ⬆️ ⬆️

Downgrading dependencies ⬇️ ⬇️

Critical hotfix 🚑 🚑

Work in progress 🚧 🚧

Lint 👕 👕

Configuration files 🔧 🔧

### DOs:
1. Use Angular CLI to generate components, services, modules, and other Angular artifacts. This ensures that the generated code follows Angular best practices and conventions.

**Example:**
```bash
# Generate a new component
ng generate component my-component

# Generate a new service
ng generate service my-service

# Generate a new module
ng generate module my-module

2. Follow the Angular Style Guide for naming conventions, code organization, and best practices. This ensures that your code is consistent and easy to understand.

**Example:**

```js
// Use PascalCase for class names
export class MyComponent { ... }

// Use camelCase for variable and function names
private myVariable: string;
private myFunction(): void { ... }

// Use kebab-case for HTML element selectors
<my-component></my-component>

Use Angular's built-in change detection mechanism instead of manually triggering change detection. This helps optimize performance and reduce unnecessary change detection cycles.

// Use OnPush change detection strategy for components that only depend on certain inputs
@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent { ... }

Avoid using the any type in your Angular applications. Instead, use TypeScript's strong typing system to specify the types of your variables, functions, and component inputs/outputs.

// DON'T use any for variable types
private myVariable: any;

// DO use strong typing with TypeScript
private myVariable: string;

Avoid using complex logic in your Angular templates. Instead, move the logic to your component class or to separate services for better separation of concerns.

<!-- DON'T use complex logic in templates -->
<p>{{ user.firstName }} {{ user.lastName }}, {{ getAge(user.birthdate) }}</p>

<!-- DO move logic to component class -->
<p>{{ fullName }}, {{ age }}</p>

<!-- Component class -->
export class MyComponent implements OnInit {
  fullName: string;
  age: number;

  ngOnInit(): void {
    this.fullName = this.user.firstName + ' ' + this.user.lastName;
    this.age = this.getAge(this.user.birthdate);
  }

  getAge(birthdate: Date): number {
    // Calculate age logic here
    return age;
  }
}

3. Avoid using excessive nested component structures. Instead, aim for a flat and shallow component tree for better performance and maintainability.

<!-- DON'T use excessive nested components -->
<app-root>
  <app-header>
    <app-navigation>
      <app-sidebar>
        <app-content>
          <app-footer></app-footer>
        </app-content>
      </app-sidebar>
    </app-navigation>
  </app-header>
</app-root>

<!-- DO use a flat and shallow component tree -->
<app-root>
  <app-header></app-header>
  <app-navigation></app-navigation>
  <app-sidebar></app-sidebar>
  <app-content></app-content>
  <app-footer></app-footer>
</app-root>

dos spring boot

Use Spring Boot Actuator for monitoring and management: Spring Boot Actuator provides built-in endpoints for monitoring and managing your application, such as health checks, metrics, and more. Use Actuator to gain insights into your application's runtime behavior and performance. For example, enable Actuator and access the /actuator/health endpoint to check the health of your application:

{
  const aStatus = a.status.toLowerCase();
  const bStatus = b.status.toLowerCase();
  
  if (aStatus === 'pending') {
    return -1;
  } else if (bStatus === 'pending') {
    return 1;
  } else if (aStatus === 'validated' && bStatus === 'rejected') {
    return -1;
  } else if (aStatus === 'rejected' && bStatus === 'validated') {
    return 1;
  } else {
    return aStatus.localeCompare(bStatus);
  }

{
const statusOrder = { "pending": -2, "validated": -1, "rejected": 1 };
const aStatus = a.status.toLowerCase();
const bStatus = b.status.toLowerCase();

if (statusOrder[aStatus] === undefined && statusOrder[bStatus] === undefined) {
return 0;
} else if (statusOrder[aStatus] === undefined) {
return 1;
} else if (statusOrder[bStatus] === undefined) {
return -1;
} else {
return statusOrder[aStatus] - statusOrder[bStatus];
}
}

const pendingRequests = [];
const validatedRequests = [];
const rejectedRequests = [];
const otherRequests = [];

filteredRequest.forEach(request => {
switch (request.status ? request.status.toLowerCase() : "") {
case "pending":
pendingRequests.push(request);
break;
case "validated":
validatedRequests.push(request);
break;
case "rejected":
rejectedRequests.push(request);
break;
default:
otherRequests.push(request);
break;
}
});

const sortedRequests = [...pendingRequests, ...validatedRequests, ...rejectedRequests, ...otherRequests];

import { Observable } from 'rxjs';

public sendAttachments(attachments: AppliEvidenceList): Observable<any> {
  const observables: Observable<any>[] = [];

  for (const attachment of attachments.attachments) {
    const formData = new FormData();
    const fileData = this.base64ToFile(attachment.dataUri);
    formData.append('attachment', fileData, attachment.name);
    formData.append('waiverId', attachments.waiverId);

    const observable = this.sendAttachmentRequest(formData);
    observables.push(observable);
  }

  return Observable.forkJoin(observables);
}

private sendAttachmentRequest(formData: FormData): Observable<any> {
  return this.http.post('/api/v1/applicative-exceptions/files', formData);
}

private base64ToFile(dataUri: string): File {
  const byteString = atob(dataUri.split(',')[1]);
  const mimeString = dataUri.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);

  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  return new File([ab], 'filename', { type: mimeString });
}

function addPrefixToKeys(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj; // Return non-object values as is
  }

  // Check if the "details" key exists
  if (obj.hasOwnProperty('details')) {
    // Add 'raf.user' prefix to each key inside "details"
    obj.details = Object.fromEntries(
      Object.entries(obj.details).map(([key, value]) => [
        'raf.user.' + key,
        value
      ])
    );
  }

  return obj;
}

function getValueByAttributeName(attributeName) {
  const { businessDataList } = res.body;
  for (const data of businessDataList) {
    if (data.attributeName === attributeName) {
      return data.value;
    }
  }
  return null; // If attributeName not found
}

// Example usage:
const attributeName = 'action';
const value = getValueByAttributeName(attributeName);
console.log(value); // Output: 'doSomething'

SELECT COUNT(DISTINCT taskO_.id) AS col_0_0_
FROM t_task taskO_
INNER JOIN t_request requestl_ ON taskO_.request_id = requestl_.request_id AND taskO_.application_id = requestl_.application_id
INNER JOIN process_version processver2 ON requestl_.process_version_id = processver2_.id
INNER JOIN config process configproc3 ON processver2_.config_process_id = configproc3_.id
INNER JOIN t_config_widget configwidg4_ ON configproc3_.id = configwidg4_.config_process_id
INNER JOIN t_task_user taskusers5_ ON taskO_.id = taskusers5_.task_id
INNER JOIN task_user taskusers6 ON taskO_.id = taskusers6_.task_id
WHERE taskO_.task_state IN ('NEW', 'IN_PROGRESS')
AND taskusers5_.user_role = 'ASSIGNEE'
AND taskusers5_.user_id NOT IN ('satyendra.singh@socgen.com', 'satyendra.singh', '1008594718')
AND configwidg4_.widget_type = 'card'
AND configwidg4_.context = 'A8564_SGT_DEFAULT_TASK_v1'
AND configwidg4_.usage = 'task'
AND taskusers6_.user_id IN ('satyendra.singh@socgen.com', 'satyendra.singh', '1008594718100')
AND taskusers6_.user_role IN ('GROUP', 'CANDIDATE');

‘’’.custom-checkbox {
display: inline-block;
cursor: pointer;
}

.custom-checkbox .checkmark {
display: inline-block;
width: 20px;
height: 20px;
background: #eee;
text-align: center;
line-height: 20px;
user-select: none;
transition: all 0.3s;
}

.custom-checkbox .checkmark.bold {
font-weight: bold;
background: lightblue; /* Change background color when selected /
color: white; / Change checkmark color when selected */
}

✓

‘’’

<label class="custom-checkbox"> <input type="checkbox" [(ngModel)]="isChecked" (change)="isChecked = !isChecked" style="display:none;"> <span class="checkmark" [ngClass]="{'bold': isChecked}">&#10003;</span> <!-- Checkmark symbol --> </label>

`input[type="checkbox"] {
/* You can't directly make the checkbox bolder, but you can adjust its size /
transform: scale(1); / Default scale /
transition: transform 0.2s; / Smooth transition for scaling */
}

input[type="checkbox"]:checked {
/* Scale up the checkbox when checked to make it appear "bolder" */
transform: scale(1.2);
} `

<input type="checkbox" id="checkbox" [(ngModel)]="isChecked"> <label for="checkbox" [ngStyle]="{'font-weight': isChecked ? 'bold' : 'normal'}">Check me</label>

- Fix 50K API calls issue with XX API 4 Capex Kushal
- Make code use Subscription Monitoring Service with `zero leaks` 2 Capex Kushal
- Clean Redundant Code: External Redirection Code, Commented Code, Unused Code 2 Capex Shimran
- 30 Minutes session on Code Review, Code Commits, Code Maintainability | No more let it be's
- Refactoring: Mappings placed in code, DRY Principle 2 Capex Shimran
- Fix Process Cache loading 2 Capex Kushal
- Cover Testing for SGTASKS 40% 2 Capex Kushal
- Cover Testing for SGTASKS 70% 2 Capex Amit
- Cover Testing for SGTASKS 90% 2 Capex Shimran
- Update Onboarding Tutorial - 2 Capex Trishant
- First time loading Issue: Portal being blank - 2 Capex Amit
- 2 Hour Onspot Backup setup call (Lens, DBs, Repos, Local Configurations, Pipelines Info) - Jaya, Trishant, Amit, Guru (?), Shimran, Ankit
- 1 Hour Frontend setup call (A2Z) - Satyendra, Govinda, Madhu, Ankit

Abstract:

Microfrontends: Where Big Ideas Meet Small Components

In the world of web development, microfrontends are like the Avengers of architecture – each component has its superpower, but together they form a formidable team. This abstract delves into the realm of microfrontends, exploring how they empower teams to work independently on different parts of a web application. We'll uncover the magic behind their modularity, the joy of team autonomy, and the quest for seamless user experiences. But beware, challenges like performance optimization and versioning lurk in the shadows. So grab your capes, because with microfrontends, web development is about to get a whole lot more heroic!

Scaling the application

Monolith ->

or gateway

Scalability: Break down monolithic apps for independent scaling.
Flexibility: Independent team work, tech stack freedom.
Reuse: Components reusable across projects, reducing dev effort.
Performance: Selective loading enhances speed and UX.
Technology Agnosticism: Use best tools without stack limitations.

Absolutely, let's expand on each of these steps:

Assessment: Evaluate current monolithic app for decomposition potential.

Purpose: Understand the structure and complexity of the existing monolithic application to identify areas for decomposition.
Steps:
Analyze the architecture, codebase, and dependencies of the monolithic app.
Identify modules or functionalities that can be decoupled and developed independently.
Consider factors such as business domains, feature boundaries, and team ownership for decomposition.
Outcome: A clear understanding of the monolithic app's structure and potential candidates for decomposition into micro frontends.
Decomposition: Break down into smaller, cohesive units.

Purpose: Divide the monolithic app into smaller, more manageable components to facilitate independent development and deployment.
Steps:
Identify cohesive units or bounded contexts within the application.
Define clear boundaries and interfaces between components to minimize dependencies.
Decompose the application based on functional or domain-driven design principles.
Outcome: Smaller, focused units that can be developed, tested, and deployed independently as micro frontends.
Componentization: Refactor units for modularity and reusability.

Purpose: Ensure that each component is self-contained, modular, and reusable to promote maintainability and scalability.
Steps:
Refactor code to encapsulate logic, UI, and dependencies within each component.
Identify and extract common functionalities into reusable modules or libraries.
Define clear interfaces and contracts between components to enable seamless integration.
Outcome: Well-defined, modular components that can be easily reused across different parts of the application or in other projects.
Integration: Choose suitable integration strategy.

Purpose: Select an appropriate approach to integrate micro frontends into the overall architecture while ensuring consistency, performance, and scalability.
Strategies:
Module Federation: Dynamically load micro frontends at runtime, enabling seamless sharing of dependencies and resources.
Backend For Frontend (BFF): Introduce dedicated backend services for each micro frontend, providing tailored APIs and data access.
Server-Side Includes (SSI): Include micro frontend fragments during server-side rendering to improve performance and reduce client-side complexity.
Considerations: Evaluate factors such as deployment infrastructure, team capabilities, and project requirements when choosing an integration strategy.
Outcome: A well-defined plan for integrating micro frontends into the existing architecture, ensuring cohesion, flexibility, and scalability.
Expanding on these steps will provide a comprehensive understanding of the process involved in transitioning from a monolithic application to a Micro Frontends architecture.

User
I want to most used strtegies i itergation, how about event driven
ChatGPT
Certainly! Let's focus on the most commonly used integration strategies, including event-driven integration:

Integration: Choose Suitable Integration Strategy

Module Federation:

Description: Dynamically load micro frontends at runtime, allowing for seamless sharing of dependencies and resources.
Benefits: Promotes loose coupling, flexibility, and scalability. Enables independent development and deployment of micro frontends.
Considerations: Requires configuration of module federation in the build process. May introduce overhead in managing shared dependencies.
Use Cases: Suitable for complex applications with multiple teams and independent development cycles.
Backend For Frontend (BFF):

Description: Introduce dedicated backend services for each micro frontend, providing tailored APIs and data access.
Benefits: Allows for fine-grained control over data fetching and processing. Facilitates separation of concerns between frontend and backend logic.
Considerations: Requires additional backend development effort. May lead to increased complexity in managing multiple backend services.
Use Cases: Ideal for applications with diverse frontend requirements and varying data access patterns.
Server-Side Includes (SSI):

Description: Include micro frontend fragments during server-side rendering to improve performance and reduce client-side complexity.
Benefits: Enhances server-side performance by offloading rendering tasks. Simplifies client-side code by pre-rendering micro frontend content.
Considerations: Requires modifications to server-side rendering pipeline. May limit flexibility in client-side interactions.
Use Cases: Effective for applications with predominantly server-side rendering and limited client-side interactivity.
Event-Driven Integration:

Description: Enable micro frontends to communicate via events, promoting loose coupling and flexibility.
Benefits: Facilitates decoupled communication between micro frontends. Allows for asynchronous, non-blocking interactions.
Considerations: Requires careful design of event architecture and handling. May introduce complexity in managing event propagation and subscription.
Use Cases: Suitable for applications with dynamic, event-based interactions and distributed teams.
These integration strategies provide different approaches to seamlessly integrate micro frontends into the existing architecture, catering to diverse application requirements and development scenarios. Choose the strategy that best aligns with your project goals, team capabilities, and architectural preferences.

What if you took all the worst part of, like, managing a code base, infrastructure around and make sure that things that are supposed to actually work together smoothly are bokren up into as many desperate parts and rather than ship one version of React you can ship 42 different verisons of react that are all loaded from different CDNs. What if we did that so two teams don't have to talk to each other or possibly have to collaborate on same codebase

Increased Complexity: Breaking down a monolithic frontend introduces complexity in development and maintenance due to managing multiple codebases and dependencies.

Inter-Component Communication Overhead: Ensuring seamless communication between micro frontends adds complexity and can impact performance.

What if we split our codebase into tiny pieces, shipped 42 React versions from different CDNs, What if we did that so two teams don't have to talk to each other or, heaven forbid, collaborate on the same codebase? and called it "Micro Frontends"? It's like herding cats, but with code!

What if we took all the worst parts of managing a codebase, made sure everything that's supposed to work smoothly is broken into desperate parts, and instead of shipping one version of React, we shipped 42 different versions all from different CDNs? What if we did that so two teams don't have to talk to each other or, heaven forbid, collaborate on the same codebase? Welcome to Micro Frontends - where chaos meets code! 🤪

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Application</title>
  <!-- Matomo Tracking Code -->
  <script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
      var u="//your-matomo-domain.com/";
      _paq.push(['setTrackerUrl', u+'matomo.php']);
      _paq.push(['setSiteId', 'YOUR_SITE_ID']);
      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
      g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    })();
  </script>
  <!-- End Matomo Tracking Code -->
</head>
<body>
  <div id="tabs">
    <button id="allTasksTab">All Tasks</button>
    <button id="urgentTab">Urgent</button>
    <button id="assignedTab">Assigned to Me</button>
    <button id="unassignedTab">Unassigned</button>
    <button id="sharedTab">Shared with Me</button>
  </div>
  <div id="processTabs">
    <button id="process1">Process 1</button>
    <button id="process2">Process 2</button>
    <!-- Add more process tabs as needed -->
  </div>

  <!-- Counter Display -->
  <div id="clickCounters">
    <p>Tab Click Counters:</p>
    <p id="allTasksCounter">All Tasks: 0</p>
    <p id="urgentCounter">Urgent: 0</p>
    <p id="assignedCounter">Assigned to Me: 0</p>
    <p id="unassignedCounter">Unassigned: 0</p>
    <p id="sharedCounter">Shared with Me: 0</p>
    <p>Process Click Counters:</p>
    <p id="process1Counter">Process 1: 0</p>
    <p id="process2Counter">Process 2: 0</p>
    <!-- Add more process counters as needed -->
  </div>

  <script>
    // Track tab clicks and update counters
    var tabClickCounters = {
      allTasks: 0,
      urgent: 0,
      assigned: 0,
      unassigned: 0,
      shared: 0
    };

    document.getElementById('allTasksTab').addEventListener('click', function() {
      _paq.push(['trackEvent', 'Tabs', 'Click', 'All Tasks']);
      tabClickCounters.allTasks++;
      document.getElementById('allTasksCounter').innerText = "All Tasks: " + tabClickCounters.allTasks;
    });

    document.getElementById('urgentTab').addEventListener('click', function() {
      _paq.push(['trackEvent', 'Tabs', 'Click', 'Urgent']);
      tabClickCounters.urgent++;
      document.getElementById('urgentCounter').innerText = "Urgent: " + tabClickCounters.urgent;
    });

    document.getElementById('assignedTab').addEventListener('click', function() {
      _paq.push(['trackEvent', 'Tabs', 'Click', 'Assigned to Me']);
      tabClickCounters.assigned++;
      document.getElementById('assignedCounter').innerText = "Assigned to Me: " + tabClickCounters.assigned;
    });

    document.getElementById('unassignedTab').addEventListener('click', function() {
      _paq.push(['trackEvent', 'Tabs', 'Click', 'Unassigned']);
      tabClickCounters.unassigned++;
      document.getElementById('unassignedCounter').innerText = "Unassigned: " + tabClickCounters.unassigned;
    });

    document.getElementById('sharedTab').addEventListener('click', function() {
      _paq.push(['trackEvent', 'Tabs', 'Click', 'Shared with Me']);
      tabClickCounters.shared++;
      document.getElementById('sharedCounter').innerText = "Shared with Me: " + tabClickCounters.shared;
    });

    // Track process clicks and update counters
    var processClickCounters = {
      process1: 0,
      process2: 0
      // Add more process counters as needed
    };

    document.getElementById('process1').addEventListener('click', function() {
      _paq.push(['trackEvent', 'Processes', 'Click', 'Process 1']);
      processClickCounters.process1++;
      document.getElementById('process1Counter').innerText = "Process 1: " + processClickCounters.process1;
    });

    document.getElementById('process2').addEventListener('click', function() {
      _paq.push(['trackEvent', 'Processes', 'Click', 'Process 2']);
      processClickCounters.process2++;
      document.getElementById('process2Counter').innerText = "Process 2: " + processClickCounters.process2;
    });
    // Repeat this pattern for other process tabs
  </script>
</body>
</html>

Managed and optimized infrastructure and Backend APIs for a Marketplace serving 4000+ tutors and coaching institutes, ensuring high availability and scalability.

Enhanced database query performance and reliability through the implementation of batch processing in Python and GoLang, resulting in optimized data processing efficiency.

Implemented caching with Redis, substantially reducing the load on the database and enhancing overall performance.

Built an OCR and integrated it with Quiz APIs using Python, GoLang, and AWS Lambda, enhancing the platform's functionality and user experience.

Established Jenkins pipelines to orchestrate automatic builds and deployments within Docker and Kubernetes environments, ensuring seamless continuous integration and delivery workflows.

Leveraged H3 hexagonal grid indexing to meticulously map communities, elevating spatial analysis precision and efficiency.

Seamlessly integrated Mapbox with React for dynamic visualization of geographic regions, enhancing user engagement and navigational clarity.

Employed Mux APIs, using Golang, for seamless video transcoding, dynamically optimizing multimedia content delivery for livestreaming and displaying shorts in both mobile and web applications.

Integrated Amazon S3 for scalable video storage, complemented by a pub-sub mechanism using AWS SNS for efficient notification and processing when adding videos to S3.

Spearheaded the development of k6 load testing strategies and crafted data processing scripts in Python.

Integrated Stripe payment gateway to facilitate secure and efficient online transactions.

Implemented Sentry for real-time error monitoring and proactive issue resolution, ensuring high application reliability.