KiranMantha

The sling model will give a component that extends Container which dictates the allowed components via policy. In react component, the EditableComponent will be mapped to parent and the add components related aem container is mapped to cqPath/*. This is very important else the child container will take the focus of authoring dialog instead of whole component.

In below example, we have a aem carousel component that provide :items representing the cards or images to be displayed inside the carousel and also have title, layout, cta etc attributes that define the content placement around carousel.

On FE, the design dictates that the title should appear on left side and carousel on right. in editor mode, we should display a Add Components aem container to add the components to the carousel and we're manually iterating through cqItems[which are :items in aem java component] as children to a 3rdparty carousel component (here we're using react-slick slider as carousel that accepts slides as children)

KiranMantha

// Calander.tsx
import i18n from '@/i18n';
import { FontAwesome } from '@expo/vector-icons';
import { ReactNode, useEffect, useState } from 'react';
import { FlatList, Modal, Pressable, Text, TouchableOpacity, View } from 'react-native';
import { getStyles } from './Calander.styles';

type CalendarModalProps = {
  initialDate?: string;

KiranMantha

Youtube Resource:

• create content fragment: https://www.youtube.com/watch?v=7SFYjGjSveQ&t=9s&ab_channel=TechTalkwithRitesh
• create content fragment: https://www.youtube.com/watch?v=l9AIjvL_n8A&t=867s
• expose fragment via rest api: https://www.youtube.com/watch?v=92s3GwRISZQ&ab_channel=SankhamMarTechChannel

AEM Graphql package:

• https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/how-to/install-graphiql-aem-6-5

Note - If you are looking for content fragment creation in 6.5 classic, pls check: https://www.youtube.com/watch?v=sftCl5y4GN4&ab_channel=AdobeExperienceManagerUserGroups

KiranMantha

Original article: https://www.tothenew.com/blog/aem-with-nextjs-remotespa-a-comprehensive-integration-guide/

AEM with NextJs RemoteSPA: A Comprehensive Integration Guide | TO THE NEW Blog

Welcome to our comprehensive guide, where we illuminate the process of updating a Remote Single Page Application (SPA) – operating independently of AEM – to seamlessly consume and deliver content authored within Adobe Experience Manager (AEM). Throughout this blog, our focus centers on the local setup of an AEM instance and a Next.js application, as well as the binding necessary to make them work together harmoniously. We will also create a demo component and drop it on the home page, exposing you to working on Remote SPA with AEM.

Steps to Setup Local AEM Instance with Nextjs App

Step 1: Setup Local AEM Instance

KiranMantha

{
  "collections": [
    {
      "name": "Favorite Projects",
      "repos": ["repo-name-1", "repo-name-2"]
    }
  ]
}

KiranMantha

// In Excel make sure to have this option enabled: Home / Clipboard / Options / Collect without showing the Office clipboard
// Tested in Windows 10 only

let table = document.querySelector('#table').outerHTML;
table = table
  .replaceAll('\n','<br style="mso-data-placement:same-cell;"/>')  // new lines inside html cells => Alt+Enter in Excel
  .replaceAll('<td','<td style="vertical-align: top;"');  // align top
navigator.clipboard.writeText(table).then(
  ()=>console.log("success"), 
  (e)=>console.log("error", e), 

KiranMantha

Original article: https://www.sammeechward.com/deploying-full-stack-js-to-aws-ec2

Youtube: https://www.youtube.com/watch?v=nQdyiK7-VlQ

Deploying Full Stack Apps to AWS EC2 with SQL Databases

Deploying Full Stack Apps to AWS EC2 with SQL Databases

Setup EC2 Instance

KiranMantha

Video: https://www.youtube.com/watch?v=qAYY9df2hVQ

Article: https://aaronstuyvenberg.com/posts/containers-on-lambda

Containers With AWS Lambda Functions white paper

KiranMantha

Original article: https://www.eficode.com/blog/mastering-devops-with-ai-building-next-level-ci/cd-pipelines

Mastering DevOps with AI: Building next-level CI/CD pipelines

In an era where AI-assisted programming is rapidly evolving, the importance of robust DevOps practices can’t be overstated. In this blog post, I will demonstrate the efficient utilization of AI in building and enhancing CI/CD pipelines, highlighting that while AI brings significant advancements, human expertise remains crucial.

Establishing a solid DevOps foundation is no longer a months-long endeavor. With the right approach and tools, even small projects can and should have proper DevOps in place within days or weeks. Now, let's shift our focus to the foundational aspects of CI/CD, starting with the Git workflow.

![image-1](https://www.eficode.com/hs-fs/hubfs/Eficode%202020%20site%20images/Blog%20images/image-1.png?width=4167&height=2084&name=imag

KiranMantha

Original article: https://blog.neetcode.io/p/doordash-robust-microservices

How DoorDash Builds Robust Microservices

DoorDash is the largest food delivery marketplace in the US with over 30 million users in 2022. You can use their mobile app or website to order items from restaurants, convenience stores, supermarkets and more.

In 2020, DoorDash migrated from a Python 2 monolith to a microservices architecture. This allowed them to:

1. Increase developer velocity by having smaller teams that could deploy independently.

2. Use different tech stacks for different classes of services.