DLightHouse

Introduction The Importance of a Good Background Defining Your Default Background in AEM Defining Your Default Background in Dynamic Media Classic Transparent Images with fmt=png-alpha Explicit Background Colors with ?bgc Final Thoughts Introduction Welcome to our deep dive into the wonderful world of image backgrounds! In this post, we're going to explore how to configure Dynamic Media Classic in Adobe Experience Manager (AEM) to not only define a default background image but also how to get your images to pop with ...

Introduction Why Structured Output? Notes & Code Walkthrough Conclusion Introduction When building applications that interact with Large Language Models (LLMs), you often need more than just a plain text response. Structured outputs, such as JSON, make it much easier to integrate your AI-powered app with external systems or display specific data on the frontend. In this post, we'll explore how to achieve that using LangChain. We'll also walk through some personal notes on how we've set up our React components, and finally we'll dive into our code to see it all in action. Why Structured Output? If you've ever tried to build an API around an LLM, you may have run into a significant challenge: the LL...

This post shows how to create a simple React application that communicates with an LLM using LangChain. It includes steps for installing dependencies, building a prompt, integrating with OpenAI’s GPT-3.5-turbo, and extracting country, state, and ZIP code information. Project Setup Dependencies llm.js AddressInformationExtractor.jsx App.jsx Running the App Project Setup Unix-like Shells pnpm create vite my-llm-app --template react Mac pnpm create vite my-llm-app --template react Windows Command Prompt (cmd) ...

If you want to use pnpm instead of npm on your AEM application for better performance or additional features, here's a comprehensive guide on how to make the switch. In this post, you will learn how to: Create AEM App Modify root's pom.xml Select pnpm's Version Modify ui.frontend's pom.xml Build the project Hi there, I'm Manuel Gutierrez from dlighthouse.co, and in this quick tips series, I will share snackable videos focusing on just one feature or problem. Let's start by creating a new app using Adobe's archetype. Make sure you define the appTitle, appId, and groupId: Unix-like Shells mv...

If you want to use Yarn instead of npm on your AEM application for better performance or additional features, here I will guide you through the process. On this post you will: Create AEM App Modify root's pom.xml Select Yarn's Version Modify ui.frontend's pom.xml Build the project Generate the yarn.lock file First, let’s create a new app if you don't have one already using Adobe's archetype. Make sure you define the appTitle, appId, and groupId: Unix-like Shells mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \ -D archetypeGroupId=com.adobe.aem \ -D archetypeArtifactId=aem-project-archetype \ -D ar...

Sometimes you may want to initialize an object by setting the property names dynamically using strings defined somewhere else. You can use the ES6’s Computed property names for this, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have a browser like Chrome, Edge or Firefox installed 2. Using Computed Property Names in Javascript Initialize and Object with a computed property name ...

blog-static-generator-new If you want to integrate your javascript or non-reactjs application with a reactjs app and be able to access reactjs components and call their methods to execute actions or get information out of them, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have node.js installed 2. Exposing React JS to Javascript or non-reactjs applications ...

When testing an application for XSS vulnerabilities it can be sometimes hard to come up with a successful attack and test multiple alternatives. You can use an app like XSStrike to automate this, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have node.js installed for the sample app Have Docker installed 2. Using XSStrike ...

When testing an application for XSS vulnerabilities it can be sometimes hard to come up with a successful attack and test multiple alternatives. You can use an app like XSSer to automate this, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have node.js installed for the sample app Have Docker installed 2. Using XSSer ...

If you want to be able to publish npm packages to a local npm registry so that they can be used and tested, either before publishing them to a remote one or because npm link or even yalc are not working for you or if you just need a really easy to use and install private npm registry, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have node.js installed Have Docker installed 2. Using Verdaccio as a local Private NPM registry ...

Sometimes you have a javascript object and you would like to just populate some variables with its properties or pass them as parameters to a function in a quick, clean and easy way or if it’s an array, extract its elements without having to use the indexes for each element. You can use the Destructuring assignment for this, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have a browser like Chrome, Edge or Firefox installed 2. Using the Destructuring Assignment ...

Sometimes you want to copy files to or from a container that doesn’t have a volume previously created, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have Docker installed 2. Start a Docker container For this video I will be using a Jenkins image as an example, so let’s first download it by using docker pull docker pull jenkins/jenkins:lts ...

Sometimes you need to run a particular command on a running container perhaps to check where some files are located or to see their contents, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have Docker installed 2. Start a Docker container For this video I will be using a Jenkins image as an example, so let’s first download it by using docker pull ...

When you want to use a particular HTML element and define its styles using CSS classes in Reactjs and also reuse it elsewhere, it can be helpful to be able to define it as a react component and style it in the same file without recurring to inline styling. You can achieve this by using the styled-components library, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have node.js installed 2. Create the Styled Component ...

If you want to pass some nested HTML elements or components to be rendered in a specific place by a parent component in react.js and create some reusable components that define the surrounding structure like defining a generic dialog or modal component to wrap arbitrary elements in, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have node.js installed 2. Rendering a Nested Component in React.js ...

In the previous video we saw How to create an AEM SPA component using Angularjs , but we found one problem, whenever we made a change we had to refresh the page to see the changes. In this second part I will show how to configure the sling model to expose the component's properties to fix the issue, above is the vid and below you will find some useful notes. 1. Pre-reqs Have access to an Adobe Experience Manager instance. You will need aem 6.4 Service Pack 2 or newer. Have Maven installed, understand how it works and also understand how to use Adobe's archetype, you can watch my video about Adobe's archetype here: Creating an AEM Appl...