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 🔧 🔧

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.

FROM tomcat:8
WORKDIR /usr/local/tomcat/webapps/
ADD https://tomcat.apache.org/tomcat-7.0-doc/appdev/sample/sample.war ./sample.war
EXPOSE 8080
CMD ["catalina.sh", "run"]

docker run -itd -p 8080:8080 tomcat:1
curl localhost:8080