DLightHouse

Brighten Up Your AEM Assets: How to Configure Default Backgrounds and Transparent Modes in Adobe Dynamic Media

2025-02-27T16:00:00.000-08:00

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 transparency—or even that explicit background color, if you're feeling bold (or a little red, as we'll see).

Whether you're a seasoned AEM pro or just starting to dabble in Dynamic Media, this guide will help you set the stage for impeccable image presentation. So, sit back, relax, and let's set the right background for your digital assets!
The Importance of a Good Background

A background is more than just a blank canvas—it's the stage that elevates your image content. In Dynamic Media Classic, you have the power to define a default background that ensures a consistent look across your assets.

Think of it like picking the perfect wall color for your living room: it can either highlight your art or, if done poorly, clash horribly with every other element. We all want our images to be dressed for success!
Defining Your Default Background in Dynamic Media Classic

In Adobe Dynamic Media Classic, setting a default background is a breeze. Simply click on the user icon to access your personal settings, then navigate to Application Setup > Publish Setup > Image Server. Once there, head over to the Request Attributes section where you'll find the Default Background Color field with its built-in color picker.

Use the color picker to choose the perfect backdrop for your images—whether that's a classic white (#FFFFFF) or a more adventurous hue.
Defining Your Default Background in AEM

Configuring your default background in Adobe Experience Manager is just as straightforward. Start by opening the Global Navigation Panel by clicking on the Adobe Experience Manager link at the top-left of your screen. Next, click on the Tools icon, then navigate to Assets > Dynamic Media Publish Setup. In the Request Attributes tab, locate the Default Background Color field to access the color picker.

With these intuitive tools at your disposal, choosing the ideal default background for your images has never been easier.
Transparent Images with fmt=png-alpha

When it comes to transparency, Dynamic Media Classic has your back—literally. By appending the fmt=png-alpha parameter to your image URL, you instruct the server to process your image with an alpha channel, allowing for a transparent background.

This is ideal for when you need your images to seamlessly blend into varying backgrounds without the harsh edges of a solid backdrop. Consider it your magic wand for making images disappear into the background—while still remaining visible!
Transparent Image URL Example
```
https://example.com/path/to/image.jpg?fmt=png-alpha
```
Explicit Background Colors with ?bgc

Sometimes, you might want to force a specific background color for your images. Enter the ?bgc parameter. For example, using ?bgc=255,0,0 will render an explicit red background. (Warning: as one might say in the world of backgrounds, that red is so ugly it might just steal the spotlight from your image!)

This parameter offers granular control over the background rendering and is particularly useful when you need a precise color output. For more technical details on this parameter, check out the official documentation.
Explicit Background Color Example
```
https://example.com/path/to/image.jpg?bgc=255,0,0
```
Final Thoughts

In the end, the right background can make or break your image presentation. By configuring default background settings in Dynamic Media Classic, utilizing the magic of fmt=png-alpha for transparency, and even forcing an explicit color with ?bgc when necessary, you're well on your way to creating visually stunning and consistent digital assets.

Remember: in the world of images, the background might be the unsung hero. So, give it the attention it deserves—and maybe even a little joke now and then to lighten the mood.

Dynamic Media Publish Settings Documentation

HTTP Protocol: ?bgc Parameter Reference

Transparent PNG Images Discussion

Langchain Basic LLM with a Simple Schema Javascript

2024-12-30T12:00:00.000-08:00

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 LLM typically returns unstructured text. For a human reader, this is totally fine. But if you plan to feed that output into another process or system, you need a consistent structure—like JSON objects or arrays—to reliably parse the returned data.

In this post, we'll transform an ordinary text output into something more predictable. Whether you want to expose an API to external consumers or simply structure your own UI, having predictable keys and values will save you time and headaches.
Explanation & Code Walkthrough

Here's the general idea behind how to achieve a structured response using LangChain:

1. You can define a schema (for example, with fields for the country, state, and zip code) that instructs the LLM to return data in JSON format.

2. By leveraging LangChain's StructuredOutputParser, you can specify which fields you want the LLM to fill.

3. Then, by adding a “formatInstructions” variable to your prompt, you give the LLM a clear signal about how you want the final response to look.

4. Finally, you parse the LLM's raw text output into a structured JSON object that your code can easily consume.

Incorporating these points into your own project is quite straightforward. Let's see how our own code structure implements them.

Set up a small React project with the following files:
- App.jsx where I import AddressInformationExtractor and display it as my main component.
- llm.js which handles the LangChain logic, including thePromptTemplate and StructuredOutputParser.
- AddressInformationExtractor.jsx which is a React component that takes user input, sends it to the LLM, and displays the extracted country, state, and zip code.

1. App.jsx

App.jsx

import './App.css'
import { AddressInformationExtractor } from './components/AddressInformationExtractor'

function App() {
  return (
    <>
      <AddressInformationExtractor />
    </>
  )
}

export default App

2. llm.js

llm.js

import { OpenAI } from "@langchain/openai";
import { LLMChain } from "langchain/chains";
import { PromptTemplate } from "@langchain/core/prompts";
import { StructuredOutputParser } from "langchain/output_parsers";

const simpleParser = StructuredOutputParser.fromNamesAndDescriptions({
  country: "The country extracted from the text",
  state: "The state extracted from the text",
  zipcode: "The zipcode extracted from the text",
});

const formatInstructions = simpleParser.getFormatInstructions();

const model = new OpenAI({
  modelName: "gpt-3.5-turbo",
  openAIApiKey: "API-KEY",
});

const myPrompt = new PromptTemplate({
  template: `Extract from the following text the country, state and zipcode: {text}
${formatInstructions}`,
  inputVariables: ["text"],
  partialVariables: { formatInstructions },
});

const myChain = new LLMChain({
  llm: model,
  prompt: myPrompt,
  outputKey: "questions",
  verbose: true,
  outputParser: simpleParser,
});

export const executePrompt = async (promptKeys) => {
  const response = await myChain.call(promptKeys);
  return response;
};

3. AddressInformationExtractor.jsx

AddressInformationExtractor.jsx

import React, { useState } from "react";
import { executePrompt } from "./llm"

export const AddressInformationExtractor = () => {
  const [text, setText] = useState(
    "there is a place in USA, a really interesting place and inside something called New York, in particular 10001."
  );
  const [addressInfo, setAddressInfo] = useState("");

  const extractAddressInfo = async () => {
    const response = await executePrompt({ text });
    setAddressInfo(response);
  };

  return (
    <div>
      <h1>Address Information Extractor</h1>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter text here"
      />
      <button onClick={extractAddressInfo}>Extract Address Information</button>
      <p>{addressInfo.questions?.country}</p>
      <p>{addressInfo.questions?.state}</p>
      <p>{addressInfo.questions?.zipcode}</p>
    </div>
  );
};

Conclusion

And that's it! With just a few tweaks—defining a schema, adding format instructions, and parsing the response—you can quickly turn a ChatGPT response into JSON that is easy to consume. Whether you are building a front-facing UI or an external API endpoint, structured outputs make your applications more robust.

Ready to expand this approach with more complex schemas or even local LLMs? Stay tuned for the next steps in this series!

Langchain Basic LLM Javascript

2024-12-23T16:00:00.000-08:00

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)

pnpm create vite my-llm-app --template react

Windows PowerShell

pnpm create vite my-llm-app --template react

Dependencies

Unix-like Shells

pnpm add langchain @langchain/core @langchain/openai

Mac

pnpm add langchain @langchain/core @langchain/openai

Windows Command Prompt (cmd)

pnpm add langchain @langchain/core @langchain/openai

Windows PowerShell

pnpm add langchain @langchain/core @langchain/openai

llm.js

llm.js

import { OpenAI } from "@langchain/openai";
import { LLMChain } from "langchain/chains";
import { PromptTemplate } from "@langchain/core/prompts";

const model = new OpenAI({
  modelName: "gpt-3.5-turbo",
  openAIApiKey: "API_KEY"
});

const myPrompt = new PromptTemplate({
  template: `Extract from the following text the country, state and zipcode: ${text}`,
  inputVariables: ["text"]
});

const myChain = new LLMChain({
  llm: model,
  prompt: myPrompt,
  outputKey: "questions",
  verbose: true
});

export const executePrompt = async (promptKeys) => {
  const response = await myChain.call(promptKeys);
  return response;
};

AddressInformationExtractor.jsx

AddressInformationExtractor.jsx

import React, { useState } from "react";
import { executePrompt } from "./llm";

export const AddressInformationExtractor = () => {
  const [text, setText] = useState(
    "there is a place in USA, a really interesting place and inside something called New York, in particular 10001."
  );
  const [addressInfo, setAddressInfo] = useState("");

  const extractAddressInfo = async () => {
    const response = await executePrompt({ text });
    setAddressInfo(response);
  };

  return (
    <div>
      <h1>Address Information Extractor</h1>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter text here"
      />
      <button onClick={extractAddressInfo}>Extract Address Information</button>
      <p>{addressInfo.questions}</p>
    </div>
  );
};

App.jsx

App.jsx

import './App.css';
import { AddressInformationExtractor } from './components/AddressInformationExtractor';

function App() {
  return (
    <>
      <AddressInformationExtractor />
    </>
  );
}

export default App;

Running the App

Unix-like Shells

pnpm install \
pnpm run dev

Mac

pnpm install \
pnpm run dev

Windows Command Prompt (cmd)

pnpm install ^
pnpm run dev

Windows PowerShell

pnpm install `
pnpm run dev

Once the development server is running, open your browser at the provided URL and enter a text with a country, state, and ZIP code. Click “Extract Address Information” to see the response.

AEM - Switching from NPM to PNPM in your AEM Application

2024-07-15T17:00:00.000-07:00

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

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate  -D archetypeGroupId=com.adobe.aem  -D archetypeArtifactId=aem-project-archetype  -D archetypeVersion=48  -D appTitle="AEM Project"  -D appId="aem-project"  -D groupId="com.project"

Mac

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate  -D archetypeGroupId=com.adobe.aem  -D archetypeArtifactId=aem-project-archetype  -D archetypeVersion=48  -D appTitle="AEM Project"  -D appId="aem-project"  -D groupId="com.project"

Windows Command Prompt (cmd)

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate  -D archetypeGroupId=com.adobe.aem  -D archetypeArtifactId=aem-project-archetype  -D archetypeVersion=48  -D appTitle="AEM Project"  -D appId="aem-project"  -D groupId="com.project"

Windows PowerShell

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate  -D archetypeGroupId=com.adobe.aem  -D archetypeArtifactId=aem-project-archetype  -D archetypeVersion=48  -D appTitle="AEM Project"  -D appId="aem-project"  -D groupId="com.project"

After generating the app, open the root pom.xml file and replace all instances of the word npm with pnpm. The first instance should be the npm version:
Change npm to pnpm
```
<pnpmVersion>8.15.5</pnpmVersion>
```
Go to npmjs.com, search for pnpm, and select the desired version. In this case, use the latest version available, and remember to prefix it with a 'v':
pnpm Versions
Continue replacing instances of npm with pnpm throughout the file. Ensure the arguments configuration for the execution with id "pnpm ci" reflects the change:
Configuration
```
<arguments>install --frozen-lockfile</arguments>
```

com.github.eirslett frontend-maven-plugin configurations using pnpm:

Plugin Configuration

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>${frontend-maven-plugin.version}</version>
  <configuration>
    <nodeVersion>v16.17.0</nodeVersion>
    <pnpmVersion>8.15.5</pnpmVersion>
  </configuration>
  <executions>
    <execution>
      <id>install node and pnpm</id>
      <goals>
        <goal>install-node-and-pnpm</goal>
      </goals>
    </execution>
    <execution>
      <id>pnpm ci</id>
      <goals>
        <goal>pnpm</goal>
      </goals>
      <configuration>
        <arguments>install --frozen-lockfile</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

Next, navigate to the ui.frontend folder and update the pom.xml file similarly. Replace npm with pnpm in all relevant sections:

Frontend Plugin Configuration

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <executions>
    <execution>
      <id>pnpm run prod</id>
      <phase>generate-resources</phase>
      <goals>
        <goal>pnpm</goal>
      </goals>
      <configuration>
        <arguments>run prod</arguments>
      </configuration>
    </execution>
    <execution>
      <id>pnpm run dev</id>
      <phase>generate-resources</phase>
      <goals>
        <goal>pnpm</goal>
      </goals>
      <configuration>
        <arguments>run dev</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

Congratulations! You have successfully configured your AEM project to use pnpm instead of npm. Now you can push this code into your repository.

pnpm equivalent command for npm ci

AEM - Switching from NPM to Yarn in your AEM Application

2024-06-17T17:30:00.000-07:00

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 archetypeVersion=48 \
 -D appTitle="AEM using Yarn" \
 -D appId="aem-yarn" \
 -D groupId="com.usingyarn"

Mac

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=48 \
 -D appTitle="AEM using Yarn" \
 -D appId="aem-yarn" \
 -D groupId="com.usingyarn"

Windows Command Prompt (cmd)

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate ^
 -D archetypeGroupId=com.adobe.aem ^
 -D archetypeArtifactId=aem-project-archetype ^
 -D archetypeVersion=48 ^
 -D appTitle="AEM using Yarn" ^
 -D appId="aem-yarn" ^
 -D groupId="com.usingyarn"

Windows PowerShell

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate `
 -D archetypeGroupId=com.adobe.aem `
 -D archetypeArtifactId=aem-project-archetype `
 -D archetypeVersion=48 `
 -D appTitle="AEM using Yarn" `
 -D appId="aem-yarn" `
 -D groupId="com.usingyarn"

After generating the app, open the root pom.xml file and replace all instances of the word npm with yarn. The first instance should be the npm version:
Change npm to yarn
```
<yarnVersion>v1.22.22</yarnVersion>
```
Go to npmjs.com, search for Yarn, and select the desired version. In this case, use the latest version available, and remember to prefix it with a 'v':
Yarn Versions
Continue replacing instances of npm with yarn throughout the file. Ensure the arguments configuration for the execution with id "yarn ci" reflects the change:
Configuration
```
<arguments>install --frozen-lockfile</arguments>
```

com.github.eirslett frontend-maven-plugin configurations using Yarn:

Plugin Configuration

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>${frontend-maven-plugin.version}</version>
  <configuration>
    <nodeVersion>v16.17.0</nodeVersion>
    <yarnVersion>v1.22.22</yarnVersion>
  </configuration>
  <executions>
    <execution>
      <id>install node and yarn</id>
      <goals>
        <goal>install-node-and-yarn</goal>
      </goals>
    </execution>
    <execution>
      <id>yarn ci</id>
      <goals>
        <goal>yarn</goal>
      </goals>
      <configuration>
        <arguments>install --frozen-lockfile</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

Next, navigate to the ui.frontend folder and update the pom.xml file similarly. Replace npm with yarn in all relevant sections:

Frontend Plugin Configuration

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <executions>
    <execution>
      <id>yarn run prod</id>
      <phase>generate-resources</phase>
      <goals>
        <goal>yarn</goal>
      </goals>
      <configuration>
        <arguments>run prod</arguments>
      </configuration>
    </execution>
    <execution>
      <id>yarn run dev</id>
      <phase>generate-resources</phase>
      <goals>
        <goal>yarn</goal>
      </goals>
      <configuration>
        <arguments>run dev</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

Finally, build the project and then after the node folder has been created, delete the package-lock.json file and run Yarn to generate a yarn.lock file:
Unix-like Shells
```
./node/yarn/dist/bin/yarn
```
Mac
```
./node/yarn/dist/bin/yarn
```
Windows Command Prompt (cmd)
```
./node/yarn/dist/bin/yarn
```
Windows PowerShell
```
./node/yarn/dist/bin/yarn
```
Congrats! You have successfully configured your AEM project to use Yarn instead of npm. Now you can push this code into your repository.

AEM Project Archetype on GitHub

npm ci equivalent in Yarn

JavaScript ES6 Features - Computed Property Names

2020-10-12T15:34:00.001-07:00

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

Using Computed Property Names in Javascript

Initialize and Object with a computed property name

const fieldName = 'creature';

let myObject = {
  [fieldName]: '🐉'
};

Getting the values from the object using the dot or the bracket notation
```
console.log(myObject.creature);
console.log(myObject[fieldName]);
```

A more complex example of computed property names

let stuff = {
  ['food' + 1]: '🍌',
  ['something'.toUpperCase() + 1 + '_function' + 2]: () => '🏺'
}

console.log(stuff.food1);
console.log(stuff.SOMETHING1_function2());

Defining Class methods and getters or setters using computed property names

const aDynamicMethodName = 'weirdHuh',
      aDynamicPropertyName = 'something';

class SomethinInteresting {
  [aDynamicMethodName]() {
    console.log('Interesting way of naming methods');
  }

  get [aDynamicPropertyName]() {
    return 'a dynamic getter name is born!';
  }
}

Calling the methods or getters using the dot or the bracket notation

const myNewObject = new SomethinInteresting();

myNewObject[aDynamicMethodName]();
myNewObject.something;

3.

Resources

JavaScript: Computed Property Names

Javascript: Classes

Exposing Reactjs component methods to Javascript or non-reactjs applications

2020-09-28T17:58:00.002-07:00

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
- For a component created using classes you just need to add a ref attribute when including the component:
  <ComponentName ref={(componentReference) => {window.componentReference = componentReference}}/>
- If it is a component created using functions then, you would also need: to import forwardRef and useImperativeHandle
  import React, { useState, forwardRef, useImperativeHandle } from 'react';
- Use forwardRef when defining the functional component:
  const YourFunctionalComponent = forwardRef((props, ref) => {
- Finally, inside the useImperativeHandle hook, you need to define the methods you need to expose:
  useImperativeHandle(ref, () => ({ methodToExpose(name) { //Some code here! } }));
3.

Resources

Github link for the code

React.js

Create a New React App

How to test your application for XSS vulnerabilities using XSStrike

2020-09-14T16:48:00.001-07:00

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

Using XSStrike

Create the dockerfile with xsstrike

FROM continuumio/anaconda3

WORKDIR /workdir

RUN apt-get install -y unzip

ADD https://github.com/s0md3v/XSStrike/archive/master.zip ./

RUN unzip master.zip && \
    rm master.zip

RUN conda config --append channels conda-forge && \
    conda install fuzzywuzzy requests

ENTRYPOINT ["python", "./XSStrike-master/xsstrike.py"]

Build the image
```
docker build -t xsstrike .
```

Run xsstrike to check options

docker run -it --rm --name xsstrike xsstrike

Run xsstrike to test against the vulnerable app from the video

docker run -it --rm --name xsstrike xsstrike -u "http://192.168.99.1:3000/?name=testing"

3.

Resources

Github link for the code

XSStrike

continuumio/anaconda3 - Docker hub

Nodejs Hello world example App

How to test your application for XSS vulnerabilities using XSSer

2020-09-07T16:27:00.000-07:00

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

Using XSSer

Create the dockerfile with xsser

FROM kalilinux/kali-rolling

WORKDIR /workdir

RUN apt-get update && \
    apt-get install -y xsser

ENTRYPOINT ["xsser"]

Build the image
```
docker build -t xsser .
```

Run xsser to check options

docker run -it --rm --name xsser xsser

Run xsser to test against the vulnerable app from the video

docker run -it --rm --name xsser xsser -u "http://192.168.99.1:3000/?name=XSS"

3.

Resources

Github link for the code

XSSer

kalilinux/kali-rolling - Docker hub

Nodejs Hello world example App

Creating a Local Private NPM registry using Verdaccio

2020-08-31T16:58:00.001-07:00

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
- Download Verdaccio’s image
  docker pull verdaccio/verdaccio
  Start the container
  docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio
  Open the server in the browser http://localhost:4873/
- Add the user into Verdaccio:
  npm adduser --registry http://localhost:4873
  For publishing a package into Verdaccio use:
  npm publish --registry http://localhost:4873
- For downloading the nodejs library, either, create a '.npmrc' at the root of your nodejs application:
  registry=http://localhost:4873/
  Or set the new private registry globally:
  npm set registry http://localhost:4873/
- After that, as always use npm or yarn to install the package:
  npm install LIBRARY-NAME
3.

Resources

Github link for the code

Verdaccio - Docker Hub

Verdaccio

Javascript Destructuring assignment

2020-08-24T16:40:00.000-07:00

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

Using the Destructuring Assignment

Object Destructuring

let myObject = {
  a: 10,
  b: 20,
  c: 30
}
let { a, b, c } = myObject
console.log(a, b, c);

Object Destructuring for Function Parameters

function printValues({ a, b, c }) {
  console.log(a, b, c);
}
printValues(myObject);

Array Destructuring

let myArray = [
  40,
  50,
  60
];
let [ d, e, f ] = myArray;
console.log(d, e, f);

Array Destructuring for Function Parameters

function printValues([ d, e, f ]) {
  console.log(d, e, f);
}
printValues(myArray);

3.

Resources

Can I Use - JavaScript operator: Destructuring assignment

Destructuring assignment

How to copy files from and to a running Docker container

2020-08-16T16:04:00.000-07:00

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
- Then I will use one of the suggested ways to run the instance and do it in the background. If you don't use pull first this command will work given that it will also try to download the image if it's not found locally.
  docker run -d -p 8080:8080 -p 50000:50000 jenkins/jenkins:lts
- You can check what's the container id, you can just type docker ps for this
  docker ps
- for copying something into a docker container we just need to specify which local file or folder to copy, then the container id followed by a colon and the target folder inside the container You can execute a command in a running container with the following:
  docker cp LOCAL_FILE_OR_FOLDER CONTAINER_ID:TARGET_FOLDER_INSIDE_CONTAINER
  If you want to copy the local "./upload/test.txt" file into the "/var/jenkins_home/secrets" folder inside the container, do the following:
  docker cp ./upload/test.txt CONTAINER_ID:/var/jenkins_home/secrets
- Finally, for copying something from a container into your local file system, you just need to specify the container id, a colon, the source file or folder inside the container and then the target local folder where the files or folders will be placed
  docker cp CONTAINER_ID:SOURCE_FOLDER_INSIDE_CONTAINER LOCAL_FOLDER
  If you want to copy the local "/var/jenkins_home/secrets/initialAdminPassword" file, that is currently inside the container, into your local ".\download\" folder, do the following:
  docker cp CONTAINER_ID:/var/jenkins_home/secrets/initialAdminPassword .\download\
3.

Resources

Jenkins - Docker Hub

How to execute a command in running Docker container

2020-08-10T16:03:00.000-07:00

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
  docker pull jenkins/jenkins:lts
- Then I will use one of the suggested ways to run the instance and do it in the background. If you don't use pull first this command will work given that it will also try to download the image if it's not found locally.
  docker run -d -p 8080:8080 -p 50000:50000 jenkins/jenkins:lts
- You can check what's the container id, you can just type docker ps for this
  docker ps
- You can execute a command in a running container with the following:
  docker exec -ti CONTAINER_ID COMAND_TO_RUN
  To run bash and do stuff inside the container:
  docker exec -ti CONTAINER_ID /bin/bash
  To print the contents of a file, like the one with the initial password for the jenkins image (/var/jenkins_home/secrets/initialAdminPassword):
  docker exec -ti CONTAINER_ID cat /var/jenkins_home/secrets/initialAdminPassword
  To list files and folders:
  docker exec -ti CONTAINER_ID ls
3.

Resources

Jenkins - Docker Hub

Creating a Reactjs Component Using the Styled Components Library

2020-08-03T15:44:00.000-07:00

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
- Create the app using npx create-react-app
  npx create-react-app quick-tips-react-styled-components
- Install the styled-components library
  npm install --save styled-components
- Start the app
  npm start
- Create the styled component HTML element to use by typing styled.HTML-ELEMENT. In this case, I am using an h1 (styled.h1).
  import styled from "styled-components"; const Title = styled.h1` color: palevioletred; border-left: 5px palevioletred solid; padding-left: 5px; `;
- Use the new component in the same way you would for the type of styled component that you selected (h1 in this case).
  <Title> This is the styled Title </Title>
3.

Resources

Github link for the code

React.js

Create a New React App

Styled Components

Why styled-components? 💅

Creating a Reactjs Component that Renders Nested Children Components Inside

2020-07-27T16:26:00.000-07:00

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

Rendering a Nested Component in React.js

Create the app using npx create-react-app

npx create-react-app quick-tips-react-children

Start the app
```
npm start
```

Create the parent component using the children property

import React from 'react';

const ParentComponent = (props) => {
    return (
        <div>
            <p>Parent component</p>
            {props.children}
            <p>After children content</p>
        </div>
    );
};

export default ParentComponent;

Use the parent component and nest some components inside it

<ParentComponent>
    <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer">
        Learn React
    </a>
</ParentComponent>

3.

Resources

Github link for the code

React.js

Create a New React App

Composition vs Inheritance

How to configure the Sling Model for the AEM Angularjs component

2020-07-16T16:56:00.000-07:00

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 Application using Adobe's archetype version 23 and avoiding typical issues
2.
Exposing the model
- Go to your IDE or editor and look for the model inside the core module, the model name is BasicModel and should be located inside the models package
- First, let’s set the model’s adaptables to SlingHttpServletRequest and import the class
  import org.apache.sling.api.SlingHttpServletRequest; @Model(adaptables = SlingHttpServletRequest.class)
- Then we need to import and implement the ComponentExporter interface and also define the getExportedType method to return the name for the resource type associated with the basic component
  import com.adobe.cq.export.json.ComponentExporter; ... public class BasicModel implements ComponentExporter { protected static final String BASIC_COMPONENT_RESOURCETYPE = "angularjs-simple-example/components/basic-component"; ... public String getExportedType() { return BASIC_COMPONENT_RESOURCETYPE; } ... }
- Finally import ExporterConstants and the Exporter annotation, add the ComponentExporter as an adapter and define the resourceType. For the exporter set the name as SLING_MODEL_EXPORTER_NAME and the extension as SLING_MODEL_EXTENSION.
  import org.apache.sling.models.annotations.Exporter; import com.adobe.cq.export.json.ExporterConstants;
  
  @Model(adaptables = SlingHttpServletRequest.class, adapters = {ComponentExporter.class}, resourceType = BASIC_COMPONENT_RESOURCETYPE) @Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)
- Let’s build and deploy the app again
  mvn clean install -PautoInstallPackage -Padobe-public
- Go now to the page edit the component make some changes and click save, the changes get reflected right away
3.

Resources

Repository with the examples

Angular Augury

ComponentExporter Interface

Enabling JSON Export for a Component

How to create an AEM component using Angularjs

2020-07-06T17:24:00.000-07:00

If you want to create an AEM app using Angular.js components and add them into a page, in this series, you will learn how. Above is the vid and below you will find some useful notes. In the second part we will see How to configure the Sling Model for the AEM Angularjs component.

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 Application using Adobe's archetype version 23 and avoiding typical issues
2.
Creating an AEM application with Angular.js support
- You will need Adobe's archetype for creating your AEM application with SPA support. The support was added starting from the 23rd version of the archetype.
- So let’s create the app from scratch. I am providing the most important properties in a single line here given that the other properties will be inferred from them, notice that the frontendModule property was set to angular
  mvn -B archetype:generate ` -D archetypeGroupId=com.adobe.granite.archetypes ` -D archetypeArtifactId=aem-project-archetype ` -D archetypeVersion=23 ` -D aemVersion=6.5.0 ` -D appTitle="Angularjs Simple Example" ` -D appId="angularjs-simple-example" ` -D groupId="co.dlighthouse.aem.angularjs.simpleexample" ` -D frontendModule=angular ` -D includeExamples=y ` -D includeDispatcherConfig=n
- Let’s build and deploy our new app (make sure that you have AEM up and running)
  mvn clean install -PautoInstallPackage -Padobe-public
3.
AEM component using angularjs
- For creating an AEM component using angular we need at least 4 things, a skeleton AEM component with a dialog, a angular component, an entry importing the component inside the app.module.ts file and a sling model which I’ll be configuring in the next video.
- I am going to use the yeoman generator for creating the skeleton AEM component for me with some additional example fields in the dialog. I am calling it basic-component and I am making sure that the names for the folders and component group match my current application’s configuration.
  yo aem-application:aem-component ` mavenAppsModuleName=ui.apps ` componentParentPath=angularjs-simple-example/components ` componentNodeName=basic-component ` componentName="Basic Component" ` componentGroup="Angularjs Simple Example - Content" ` mavenBundleModuleName=core ` javaRootPackageName=co.dlighthouse.aem.angularjs.simpleexample.core ` javaModelRelativePackageName=models ` javaModelClassName=BasicModel
- We should end up with a component inside componentParentPath=angularjs/components called Basic Component, if you check the dialog’s xml file you will find two example fields, one for the text and another for the checkbox.
  <items jcr:primaryType=\"nt:unstructured\"> <text jcr:primaryType=\"nt:unstructured\" sling:resourceType=\"granite/ui/components/coral/foundation/form/textfield\" fieldLabel=\"Text\" name=\"./text\"/> <checkbox jcr:primaryType=\"nt:unstructured\" sling:resourceType=\"granite/ui/components/coral/foundation/form/checkbox\" text=\"Checkbox\" uncheckedValue=\"false\" value=\"true\" name=\"./checkbox\"/> <checkboxType jcr:primaryType=\"nt:unstructured\" sling:resourceType=\"granite/ui/components/foundation/form/hidden\" name=\"./checkbox@TypeHint\" value=\"Boolean\"/> </items>
- Before creating the component make sure that you have the Angular command-line interface (CLI) by first installing it in your computer
  npm install -g @angular/cli
- Use the Angular.js CLI to create the component inside the components folder.
  ng generate component components/basic-component
  In the ui.frontend module you will find the Angular.js components inside the src/app/components folder. Add the imports for the Input annotation object from the angular/core library and the MapTo helper from adobe.
  import { Component, Input, OnInit } from '@angular/core'; import { MapTo } from '@adobe/cq-angular-editable-components';
- Create an editconfig obj which will be used for displaying some text when the component is empty, in this case given that the component’s properties like the ones defined on the dialog are available through the angular’s cqModel object we can just check if cqModel.text doesn’t have a value so that we can mark this component as empty
  const BasicComponentEditConfig = { emptyLabel: 'Basic Component', isEmpty: cqModel => !cqModel || !cqModel.text || cqModel.text.trim().length < 1 };
- Then we have the component which looks like a typical angular component. Here we declare that we are going to receive the text and checkbox properties.
  export class BasicComponentComponent implements OnInit { @Input() text: string; @Input() checkbox: boolean; ...
- Finally we call the MapTo helper function that maps the angular component to a particular resourceType inside AEM so that aem knows which angular component to use when rendering our page
  MapTo('angularjs-simple-example/components/basic-component')( BasicComponentComponent, BasicComponentEditConfig );
- Then inside the app.module.ts file we just add an entry into the entryComponents array given that the basic component is added dynamically.
  @NgModule({ ... entryComponents: [TextComponent, PageComponent, BasicComponentComponent], ... }) export class AppModule {}
- Build and deploy the application again
  mvn clean install -PautoInstallPackage -Padobe-public
4.

Resources

Repository with the examples

Adobe's Archetype

Adobe's Archetype Releases

Creating an AEM Application using Adobe's archetype version 23

2020-06-22T16:45:00.000-07:00

In this tutorial, I will show how to use Adobe's archetype to create an AEM application using version 23rd and up, 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.3 Service Pack 3, AEM 6.4 or AEM 6.5

Creating an AEM application using archetype version 23

Look for the .m2 folder inside your user for your particular Operating System (C:\Users\YOUR-USERNAME\.m2\settings.xml for Windows or ~/.m2/settings.xml for Linux or Mac) and create or edit the settings.xml file inside that folder.

<settings xmlns="https://maven.apache.org/SETTINGS/1.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/SETTINGS/1.0.0
                      https://maven.apache.org/xsd/settings-1.0.0.xsd">
    <profiles>
        <!-- ====================================================== -->
        <!-- A D O B E   P U B L I C   P R O F I L E                -->
        <!-- ====================================================== -->
        <profile>
            <id>adobe-public</id>
            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
            <properties>
                <releaseRepository-Id>adobe-public-releases</releaseRepository-Id>
                <releaseRepository-Name>Adobe Public Releases</releaseRepository-Name>
                <releaseRepository-URL>https://repo.adobe.com/nexus/content/groups/public</releaseRepository-URL>
            </properties>
            <repositories>
                <repository>
                    <id>adobe-public-releases</id>
                    <name>Adobe Public Repository</name>
                    <url>https://repo.adobe.com/nexus/content/groups/public</url>
                    <releases>
                        <enabled>true</enabled>
                        <updatePolicy>never</updatePolicy>
                    </releases>
                    <snapshots>
                        <enabled>false</enabled>
                    </snapshots>
                </repository>
            </repositories>
            <pluginRepositories>
                <pluginRepository>
                    <id>adobe-public-releases</id>
                    <name>Adobe Public Repository</name>
                    <url>https://repo.adobe.com/nexus/content/groups/public</url>
                    <releases>
                        <enabled>true</enabled>
                        <updatePolicy>never</updatePolicy>
                    </releases>
                    <snapshots>
                        <enabled>false</enabled>
                    </snapshots>
                </pluginRepository>
            </pluginRepositories>
        </profile>
    </profiles>
    <activeProfiles>
        <activeProfile>adobe-public</activeProfile>
    </activeProfiles>
</settings>

With the 23rd version of the archetype's release there have been many changes to the properties that you can use to configure how the new AEM app is going to be generated.

So let’s create the app from scratch. I am providing the most important properties in a single line here given that the other properties will be inferred from them.

mvn -B archetype:generate "-DarchetypeGroupId=com.adobe.granite.archetypes" "-DarchetypeArtifactId=aem-project-archetype" "-DarchetypeVersion=23" "-DaemVersion=6.5.0" "-DappTitle=First App Example" "-DappId=first-app" "-DgroupId=co.dlighthouse.aem.firstapp" "-DfrontendModule=none" "-DincludeExamples=y" "-DincludeDispatcherConfig=n"

PowerShell

mvn -B archetype:generate `
  -D archetypeGroupId=com.adobe.granite.archetypes `
  -D archetypeArtifactId=aem-project-archetype `
  -D archetypeVersion=23 `
  -D aemVersion=6.5.0 `
  -D appTitle="First App Example" `
  -D appId="first-app" `
  -D groupId="co.dlighthouse.aem.firstapp" `
  -D frontendModule=none `
  -D includeExamples=y `
  -D includeDispatcherConfig=n

Let’s build and deploy our new app (make sure that you have AEM up and running)
```
mvn clean install -PautoInstallPackage -Padobe-public
```

If you're using a different port for AEM

mvn clean install -PautoInstallPackage -Padobe-public "-Daem.port=PORT-NUMBER"

3.

Resources

Configuring the settings.xml File with Adobe's Eepository

Adobe's Archetype

Adobe's Archetype Available Properties

AEM Supported Versions

Adobe's Archetype Releases

How to Create Feature Toggles in AEM

2020-02-29T07:04:00.000-08:00

In this is a tutorial I'll show how to configure and create Feature toggles in AEM using sling feature flags, 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 maven here: Creating an AEM application using Maven and Adobe's archetype

Implementing feature toggles in AEM

If needed, create the new aem-feature-toggles application by using adobe’s archetype

mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate "-DarchetypeGroupId=com.adobe.granite.archetypes" "-DarchetypeArtifactId=aem-project-archetype" "-DarchetypeVersion=19" "-DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/" "-DgroupId=co.dlighthouse.aem.featuretoggles" "-DartifactId=aem-feature-toggles" "-Dversion=0.1.0-SNAPSHOT" "-Dpackage=co.dlighthouse.aem.featuretoggles" "-DappsFolderName=feature-toggles" "-DconfFolderName=feature-toggles" "-DartifactName=Feature Toggles Example" "-DcomponentGroupName=Feature Toggles Example" "-DcontentFolderName=feature-toggles" "-DcssId=feature-toggles" "-DpackageGroup=feature-toggles" "-DsiteName=Feature Toggles Example" "-DoptionAemVersion=6.5.0"

Create a new file named org.apache.sling.featureflags.impl.ConfiguredFeature-someFeature.xml inside your /apps/my-app/config folder

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="sling:OsgiConfig"
    name="some-feature"
    description="This is Some Feature"
    enabled="{Boolean}false"/>

First, Import the Features interface

import org.apache.sling.featureflags.Features;

Inject it into the model by using the OSGiService annotation
```
@OSGiService
private Features features;
```

Add the code to enable or disable the new feature

if(features.isEnabled("some-feature")) {
    //New functionality that is only enabled when the feature toggle is enabled
}
else {
    //Original functionality that is disabled when the feature toggle is disabled
}

Build and deploy your application

mvn clean install -PautoInstallPackage -Padobe-public

3.
Configure the Feature Toggle in AEM
- Go to the Felix console(/system/console/configMgr), look for ConfiguredFeature then click on the “someFeature”
  
  Enable the feature toogle and after that check that the new feature is working now
4.

Resources

Github link for the code

Feature Toggles (aka Feature Flags) - Martin Fowler

Feature Flags - Optimizely

Feature Flags - Sling

Feature Flags - aemtreasury

Sling – Feature Flags in AEM - aemlab

Creating a tensorflow.js + react.js simple application in javascript

2020-02-16T14:46:00.000-08:00

In this tutorial I will show how to create a really simple Tensorflow.js model and use it for predicting values using React.js, above is the video and below you will find some of the steps followed.

1.
Pre-reqs
- Have node.js installed

React.js

Reactjs is a javascript framework for building user interfaces which is mostly used for creating Single-Page Applications, I am going to use it to create a simple static but interactive site and then deploy it into github pages.

First we need to create a React.js app

npx create-react-app <project-name>
npx create-react-app simple-reactjs-tensorflow

Run the app in development mode so that we can make changes in the code and see the results on the browser
```
npm start
```

Start by creating a simple empty component for the TensorflowExample.js (Don't forget to add it into the App.js file)

import React, { useState } from 'react';

const TensorflowExample = () => {
    return (
        <div className="tensorflow-example">
        </div>
    );
};

export default TensorflowExample;

Install the immutability helper for making changes to the model
```
npm install immutability-helper --save
npm start
```
Import the immutability helper inside the TensorflowExample.js file
```
import update from 'immutability-helper';
```

We need to keep the state for the value pairs to hold an array of inputs and outputs so that we can train our new model and the state to hold the properties related to the model.

//Value pairs state
const [valuePairsState, setValuePairsState] = useState([
    { x: -1, y: -3 },
    { x: 0, y: -1 },
    { x: 1, y: 1 },
    { x: 2, y: 3 },
    { x: 3, y: 5 },
    { x: 4, y: 7 },
]);

//Define the model state
const [modelState, setModelState] = useState({
    model: null,
    trained: false,
    predictedValue: 'Click on train!',
    valueToPredict: 1,
});

Add the handlers for managing changes to the inputs and outputs

//Event handlers
const handleValuePairChange = (e) => {
    const updatedValuePairs = update(valuePairsState, {
        [e.target.dataset.index]: {
            [e.target.name]: { $set: parseInt(e.target.value) }
        }
    })

    setValuePairsState(
        updatedValuePairs
    )
};

Adding new items

const handleAddItem = () => {
    setValuePairsState([
        ...valuePairsState,
        { x: 1, y: 1 }
    ]);
};

And also changes into the model's properties

const handleModelChange = (e) => setModelState({
    ...modelState,
    [e.target.name]: [parseInt(e.target.value)],
});

Add the controls for training the model by iterating over the value pairs properties and rendering a field per input and output. Also create a button for adding new items and another one for training the model.

<div className="train-controls">
    <h2 className="section">Training Data (x,y) pairs</h2>
    <div className="row labels">
        <div className="field-label column">X</div>
        <div className="field-label column">Y</div>
    </div>

    {valuePairsState.map((val, index) => {
        return (
            <div key={index} className="row">
                <input
                    className="field field-x column"
                    value={val.x}
                    name="x"
                    data-index={index}
                    onChange={handleValuePairChange}
                    type="number" pattern="[0-9]*" />
                <input
                    className="field field-y column"
                    value={val.y}
                    name="y"
                    data-index={index}
                    onChange={handleValuePairChange}
                    type="number" />
            </div>
        );
    })}

    <button
        className="button-add-example button--green"
        onClick={handleAddItem}>
        +
    </button>
    <button
        className="button-train button--green"
        onClick={handleTrainModel}>
        Train
    </button>
</div>

For the prediction controls create an input field to allow the user to enter a value so that its output can be predicted, a field to show the predicted value and a button to perform the actual prediction which will only be enabled once the model has been trained.

<div className="predict-controls">
    <h2 className="section">Predicting</h2>
    <input
        className="field element"
        value={modelState.valueToPredict}
        name="valueToPredict"
        onChange={handleModelChange}
        type="number"
        placeholder="Enter an integer number" /><br />
    <div className="element">
        {modelState.predictedValue}
    </div>
    <button
        className="element button--green"
        onClick={handlePredict}
        disabled={!modelState.trained}>
        Predict
    </button>
</div>

Tensorflow.js

Tensorflowjs is a javascript library that allows us to train and use machine learning models on the browser and nodejs.
Install tensorflowjs
```
npm install --save @tensorflow/tfjs
```

And import it into your react app

import * as tf from '@tensorflow/tfjs';

Add the train handler and create a simple model that just has one layer, one hidden unit and also that will receive just one input. The model will be compiled using the mean squared error loss function, stochastic gradient descent and will run for 250 epochs.

const handleTrainModel = () => {
    let xValues = [],
        yValues = [];

    valuePairsState.forEach((val, index) => {
        xValues.push(val.x);
        yValues.push(val.y);
    });

    // Define a model for linear regression.
    const model = tf.sequential();
    model.add(tf.layers.dense({ units: 1, inputShape: [1] }));

    // Prepare the model for training: Specify the loss and the optimizer.
    model.compile({ loss: 'meanSquaredError', optimizer: 'sgd' });
    const xs = tf.tensor2d(xValues, [xValues.length, 1]);
    const ys = tf.tensor2d(yValues, [yValues.length, 1]);

    // Train the model using the data.
    model.fit(xs, ys, { epochs: 250 }).then(() => {
        setModelState({
            ...modelState,
            model: model,
            trained: true,
            predictedValue: 'Ready for making predictions',
        });
    });
}

Add the predict handler and set the predictedValue property to the output from the model given the value to predict provided by the user.

const handlePredict = () => {
    // Use the model to do inference on a data point the model hasn't seen before:
    const predictedValue = modelState.model.predict(tf.tensor2d([modelState.valueToPredict], [1, 1])).arraySync()[0][0];

    setModelState({
        ...modelState,
        predictedValue: predictedValue,
    });
}

Go into the browser, add some more inputs, click on train and try different values.

4.
Github Pages
- To publish our code into github pages first make sure that the package.json file has the homepage property set to “.”
  "homepage": ".",
- Generate the static site and make sure to create a new repository for your project inside GitHub
  npm run build
- Initialize your local repository for the code, add all the files, commit the code, add the repository so that you can push the code into your repo and finally push the code.
  git init git add -A git commit -m "First version simple tensorflojs + react app" git remote add origin https://github.com/drginm/simple-reactjs-tensorflow.git git push origin master
- Create a detached branch with the special name gh-pages
  git checkout --orphan gh-pages git status
- Delete everything but the build directory and move its contents to the root of your git’s repository, then again add everything, commit the changes and push them into your new gh-pages branch
  git add -A git status git commit -m "Static site for - simple tensorflojs + react app" git push origin gh-pages
- Go into your page by using your github username and the name for the repository we just created and test that the application is working
5.

Resources

Github link for the code

Building for Relative Paths

Simple Tensorflow.js model

Create a New React App

Mutate a copy of data without changing the original source with the immutability-helper

How to configure the Sling Model for the AEM Reactjs component

2020-02-09T12:22:00.001-08:00

In the previous video we saw how to create an AEM component with react.js support 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 maven here: Creating an AEM application using Maven and Adobe's archetype
2.
Exposing the model
- Go to your IDE or editor and look for the model inside the core module, the model name is BasicModel and should be located inside the models package
- First, let’s set the model’s adaptables to SlingHttpServletRequest and import the class
  import org.apache.sling.api.SlingHttpServletRequest; @Model(adaptables = SlingHttpServletRequest.class)
- Then we need to import and implement the ComponentExporter interface and also define the getExportedType method to return the name for the resource type associated with the basic component
  import com.adobe.cq.export.json.ComponentExporter; ... public class BasicModel implements ComponentExporter { ... public String getExportedType() { return "react-simple-example/components/basic-component"; } ... }
- Finally import ExporterConstants and the Exporter annotation, add the ComponentExporter as an adapter and define the resourceType. For the exporter set the name as SLING_MODEL_EXPORTER_NAME and the extension as SLING_MODEL_EXTENSION.
  import org.apache.sling.models.annotations.Exporter; import com.adobe.cq.export.json.ExporterConstants;
  
  @Model(adaptables = SlingHttpServletRequest.class, adapters = {ComponentExporter.class}, resourceType = BASIC_COMPONENT_RESOURCETYPE) @Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)
- Let’s build and deploy the app again
  mvn clean install -PautoInstallPackage -Padobe-public
- Go now to the page edit the component make some changes and click save, the changes get reflected right away
3.

Resources

Github link for the code

React Developer Tools

ComponentExporter Interface

Enabling JSON Export for a Component

How to create an AEM component using Reactjs

2020-02-02T16:03:00.000-08:00

In this tutorial, I will show how to use use Adobe's archetype to create an AEM application with React.js support and also how to add a new React.js component so that it can be added into a page, above is the vid and below you will find some useful notes. In the second part we will see how to configure the Sling Model for the AEM React component.

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 maven here: Creating an AEM application using Maven and Adobe's archetype
2.
Creating an AEM application with React.js support
- You will need Adobe's archetype for creating your AEM application with SPA support. The support was added starting from the 23rd version of the archetype.
- If the 23rd version is not out yet you will have to clone and compile the archetype locally to be able to use it
  git clone https://github.com/adobe/aem-project-archetype.git
  Change into the new directory and build the archetype
  cd aem-project-archetype mvn clean install
- So let’s create the app from scratch. I am providing the most important properties in a single line here given that the other properties will be inferred from them, notice that the version that I am using is the 23-SNAPSHOT and that optionFrontendModule was set to react
  mvn archetype:generate "-DarchetypeGroupId=com.adobe.granite.archetypes" "-DarchetypeArtifactId=aem-project-archetype" "-DarchetypeVersion=23-SNAPSHOT" "-DoptionFrontendModule=react" "-DoptionAemVersion=6.5.0" "-DgroupId=co.dlighthouse.aem.reactsimpleexample" "-DappsFolderName=react-simple-example" "-DartifactId=aem-react-simple-example"
- Let’s build and deploy our new app (make sure that you have AEM up and running)
  mvn clean install -PautoInstallPackage -Padobe-public
3.
AEM component using reactjs
- For creating an AEM component using react we need at least 4 things, a skeleton AEM component with a dialog, a react component, an entry importing the component inside the import-components.js file and a sling model which I’ll be configuring in the next video.
- I am going to use the yeoman generator for creating the skeleton AEM component for me with some additional example fields in the dialog. I am calling it basic-component and I am making sure that the names for the folders and component group match my current application’s configuration.
  yo aem-application:aem-component mavenAppsModuleName=ui.apps componentParentPath=react-simple-example/components componentNodeName=basic-component componentName="Basic Component" componentGroup="react-simple-example - Content" mavenBundleModuleName=core javaRootPackageName=co.dlighthouse.aem.reactsimpleexample.core javaModelRelativePackageName=models javaModelClassName=BasicModel
- We should end up with a component inside react-simple-example/components called Basic Component, if you check the dialog’s xml file you will find two example fields, one for the text and another for the checkbox.
  <items jcr:primaryType=\"nt:unstructured\"> <text jcr:primaryType=\"nt:unstructured\" sling:resourceType=\"granite/ui/components/coral/foundation/form/textfield\" fieldLabel=\"Text\" name=\"./text\"/> <checkbox jcr:primaryType=\"nt:unstructured\" sling:resourceType=\"granite/ui/components/coral/foundation/form/checkbox\" text=\"Checkbox\" uncheckedValue=\"false\" value=\"true\" name=\"./checkbox\"/> <checkboxType jcr:primaryType=\"nt:unstructured\" sling:resourceType=\"granite/ui/components/foundation/form/hidden\" name=\"./checkbox@TypeHint\" value=\"Boolean\"/> </items>
- Inside the ui.frontend module you will find the React.js components inside the src/components folder. Create a new folder inside it, call it BasicComponent and also create an index.js file. Add the imports for the reactjs library and mapTo helper from adobe
  //Imports import React, { Component } from 'react'; import { MapTo } from '@adobe/cq-react-editable-components';
- Create an editconfig obj which will be used for displaying some text when the component is empty, in this case given that the component’s properties like the ones defined on the dialog are available through the react’s props object we can just check if props.text doesn’t have a value so that we can mark this component as empty
  const BasicComponentEditConfig = { emptyLabel: 'Basic Component', isEmpty: function(props) { return !props || !props.text; } };
- Then we have the component which looks like a typical react component with its render method. Here we can output the values for the text and checkbox properties inside the props object
  class BasicComponent extends Component { render() { return ( <div> My Text Property Value: {this.props.text}, and checkbox: {this.props.checkbox ? 'checked' : 'unchecked'} </div> ); } }
- Finally we call mapTo helper function that maps the react component to a particular resourceType inside AEM so that aem knows which react component to use when rendering our page
  export default MapTo('react-simple-example/components/basic-component')( BasicComponent, BasicComponentEditConfig );
- Then inside the import-components.js file we import the basic component
  import './BasicComponent';
- Build and deploy the application again
  mvn clean install -PautoInstallPackage -Padobe-public
4.

Resources

Repository with the examples

Adobe's Archetype

Adobe's Archetype Releases

React.Component

Create a custom AEM workflow process step with a dialog

2019-09-26T17:01:00.000-07:00

In this tutorial I talk about how to create a custom workflow step process with an additional dialog for configuring it, above is the vid and below you will find some useful notes.

1.
Pre-reqs
- Have access to an Adobe Experience Manager instance.
  
  Have Maven installed, understand how it works and also understand how to use Adobe's archetype, you can watch my video about maven here: Creating an AEM application using Maven and Adobe's archetype
2.
What is an AEM Workflow and workflow model
- Workflows allow you to automate different tasks inside AEM by defining a sequence of steps to be executed and the actions to be performed at each step.
- A workflow model represents the definition of a workflow using nodes for the steps or actions to be executed and transitions to define how the steps are organized and what is going to be the execution sequence

Creating the base app with the custom workflow step

Create the app using adobe's archetype

mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate "-DarchetypeGroupId=com.adobe.granite.archetypes" "-DarchetypeArtifactId=aem-project-archetype" "-DarchetypeVersion=20" "-DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/" "-DgroupId=co.dlighthouse.aem.workflowstepdialog" "-DartifactId=aem-workflow-step-dialog" "-Dversion=0.1.0-SNAPSHOT" "-Dpackage=co.dlighthouse.aem.workflowstepdialog" "-DappsFolderName=workflow-step-dialog" "-DconfFolderName=workflow-step-dialog" "-DartifactName=Workflow Step Dialog" "-DcomponentGroupName=Workflow Step Dialog" "-DcontentFolderName=workflow-step-dialog" "-DcssId=workflow-step-dialog" "-DpackageGroup=workflow-step-dialog" "-DsiteName=Workflow Step Dialog" “-DoptionIncludeExamples=n” “-DoptionIncludeFrontendModule=n” “-DoptionAemVersion=6.5.0”

Use the yeoman generator and create the custom workflow step, you can also check the code on github or do it by hand.

npm install -g yo
npm install -g generator-aem-application
cd aem-workflow-step-dialog
yo aem-application:workflow workflowName="Sample Application - Sample Workflow Process Step" componentParentPath=workflow-step-dialog/components/workflow componentNodeName=workflow-process javaRootPackageName=co.dlighthouse.aem.workflowstepdialog.core javaWorkflowClassName=SampleWorkflowProcess

For the dialog for the custom workflow step component we need the following:

Component node (.content.xml)

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Sample Application - Sample Workflow Process Step"
    sling:resourceSuperType="cq/workflow/components/model/process"
    allowedParents="[*/parsys]"
    componentGroup="Workflow"/>

cq:EditConfig node (_cq_editConfig.xml)

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    cq:dialogMode="floating"
    cq:inherit="{Boolean}true"
    jcr:primaryType="cq:EditConfig">
    <cq:formParameters
        jcr:primaryType="nt:unstructured"
        jcr:title="Sample Application - Sample Workflow Process Step"
        PROCESS="co.dlighthouse.aem.workflowstepdialog.core.workflows.SampleWorkflowProcess"
        PROCESS_AUTO_ADVANCE="true"/>
</jcr:root>

Touch UI dialog cq:dialog node (_cq_dialog/.content.xml)

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Sample Application - Sample Workflow Process Step Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <common
                jcr:primaryType="nt:unstructured"
                cq:hideOnEdit="true"/>
            <process
                jcr:primaryType="nt:unstructured"
                cq:hideOnEdit="true"/>
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Something Important"
                        name="./metaData/somethingImportant"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

We need the class that implements WorkflowProcess and overrides the execute method.

package co.dlighthouse.aem.workflowstepdialog.core.workflows;

import com.adobe.granite.workflow.WorkflowException;
import com.adobe.granite.workflow.WorkflowSession;
import com.adobe.granite.workflow.exec.WorkItem;
import com.adobe.granite.workflow.exec.WorkflowData;
import com.adobe.granite.workflow.exec.WorkflowProcess;
import com.adobe.granite.workflow.metadata.MetaDataMap;
import org.apache.commons.lang3.StringUtils;
import org.osgi.service.component.annotations.Component;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@Component(
    service=WorkflowProcess.class,
    property = {"process.label=Sample Application - Sample Workflow Process Step"}
)
public class SampleWorkflowProcess implements WorkflowProcess {
    private static final Logger log = LoggerFactory.getLogger(SampleWorkflowProcess.class);

    @Override
    public void execute(WorkItem workItem, WorkflowSession workflowSession, MetaDataMap args) throws WorkflowException {

        final WorkflowData workflowData = workItem.getWorkflowData();
        final String type = workflowData.getPayloadType();

        // Check if the payload is a path in the JCR; The other (less common) type is JCR_UUID
        if (!StringUtils.equals(type, "JCR_PATH")) {
            return;
        }
        // Get the path to the JCR resource from the payload
        final String path = workflowData.getPayload().toString();

        String somethingImportant = args.get("somethingImportant", "not set");

        log.info("Sample Application - Sample Workflow Process Step - somethingImportant: {} - payload: {}", somethingImportant, path);
    }
}

Finally build and deploy your new app into AEM

mvn clean install -PautoInstallPackage -Padobe-public

4.

Resources

Repository with the examples

AEM application - Yeoman Generator

Creating Workflow Models

Developing and Extending Workflows

Maven template to create new Adobe Experience Manager (AEM) projects that follow best practices

Integrating Nodejs and Maven using The Maven Frontend Plugin

2019-09-05T17:02:00.000-07:00

In this tutorial I show how to integrate nodejs with maven using the Maven Frontend Plugin, above is the vid and below you will find some useful notes.

1.
Pre-reqs
- Have access to an Adobe Experience Manager instance if you want to install the AEM application and test it. The same pom configs shown here can be used for different types of applications
  
  Have Maven installed, understand how it works and also understand how to use Adobe's archetype, you can watch my video about maven here: Creating an AEM application using Maven and Adobe's archetype

Creating the base app

Create the app using adobe's archetype

mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate "-DarchetypeGroupId=com.adobe.granite.archetypes" "-DarchetypeArtifactId=aem-project-archetype" "-DarchetypeVersion=19" "-DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/" "-DgroupId=co.dlighthouse.aem.firstapp" "-DartifactId=aem-first-app" "-Dversion=0.1.0-SNAPSHOT" "-Dpackage=co.dlighthouse.aem.firstapp" "-DappsFolderName=first-app" "-DconfFolderName=first-app" "-DartifactName=First App Example" "-DcomponentGroupName=First App Example" "-DcontentFolderName=first-app" "-DcssId=first-app" "-DpackageGroup=first-app" "-DsiteName=First App Example" "-DoptionAemVersion=6.4.0"

Create the nodejs module inside the multimodule maven project using yeoman

yo aem-application:galen-module
co.dlighthouse.aem.firstapp
aem-first-app
0.1.0-SNAPSHOT

Don't forget to add the submodule to the list of modules inside your parent pom file

<modules>
    <module>core</module>
    <module>ui.apps</module>
    <module>ui.content</module>
    <module>it.tests</module>
    <module>it.launcher</module>
    <module>ui.npm.galen</module>
</modules>

Maven Frontend Plugin

The maven Frontend Plugin allows you to integrate nodejs into your build by just adding a few configurations into the POM file.

For this, first you need a plugin configuration on your pom file using the group and artifact Id for the frontend plugin, a version and finally a list of executions that would configure a couple of things about the plugin.

<project>

    ...

    <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.8.0</version>
                <executions>
                    ...
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

The first execution allows you to set the version for node and npm (you can also use yarn).

    ...

    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <nodeVersion>v12.9.0</nodeVersion>
                <npmVersion>6.10.2</npmVersion>
            </configuration>
        </execution>

        ...

    </executions>

    ...

The second execution installs or updates the packages given what you’ve configured on the package.json file.

    ...

    <executions>
        ...

        <execution>
            <id>npm-install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>

        ...

    </executions>

    ...

Finally we just need one execution for galen, here we need provide the same name of the script that we have inside the package.json file


    ...

    <executions>
        ...

        <execution>
            <id>npm-galen</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run galen</arguments>
            </configuration>
        </execution>
    </executions>

    ...

4.

Resources

Repository with the examples

AEM application - Yeoman Generator

ChromeDriver - WebDriver for Chrome

Maven template to create new Adobe Experience Manager (AEM) projects that follow best practices

frontend-maven-plugin

Maven Frontend Plugin Versions

Nodejs and npm releases

House price prediction 3/4: What is One Hot Encoding

2019-07-14T17:09:00.001-07:00

A series about creating a model using Python and Tensorflow and then importing the model and making predictions using Javascript in a Vue.js application, above is the vid and below you will find some useful notes.

Here, in part 3 of this series, I will show what is and how does one hot encoding works.

In the first post, called House price prediction 1/4: Using Keras/Tensorflow and python, I talked about how to create a model in python, pre-process a dataset I've already created, train a model, post-process, predict, and finally about creating different files for sharing some information about the data for use on the second part.

Then in part 2, called House price prediction 2/4: Using Tensorflow.js, Vue.js and Javascript, I took the model, the data for pre and post processing and after loading everything we were finally able to predict hose prices using Vue.js.

And finally in part 4 I will show what and why normalizing the inputs is important.

1.
Pre-reqs
- Have node.js installed
  
  Have Python 3.x installed
  
  Have the code for the previous posts: Python Real Estate - Github and Real Estate price prediction using Tensorflow.js and Vue.js
2.
What is One Hot Encoding
- One hot encoding is a process with which we take a set of named categories in which the order between the values is not implicit, like colors, for example red, green and blue, or fruits, for example apples, lemons and blueberries and so on and transform them into a numeric representation so that a machine learning algorithm can perform operations on those values.
- A named category in which the order between the values is implicit does not need to be One Hot Encoded. One such category could be for example medals with values like Gold, Silver or Bronze which are awarded given a position in an ordered ranking like who came first, second or third, in such cases we can say that gold is better than silver, which is also better than bronze for example.
- So for a list of neighborhoods, at a high level, the encoding or transformation process would typically entail
  Neighborhoods: medellin aranjuez medellin centro medellin belen rosales medellin la castellana medellin la castellana
  Transforming the named categories into numbers by for example assigning an index into each one of them:
  Neighborhood: 0,medellin aranjuez 1,medellin centro 2,medellin belen rosales 3,medellin la castellana 4,medellin la castellana
  Then we would create a vector representation of them with as many columns as categories we have, in which case we would take the previous indexes and assign a “One” into the column that corresponds with the index of the category and “Zeros” on the other columns,
  Column Indexes,Neighborhood: 0,1,2,3,4 1,0,0,0,0,medellin aranjuez 0,1,0,0,0,medellin centro 0,0,1,0,0,medellin belen rosales 0,0,0,1,0,medellin la castellana 0,0,0,0,1,medellin la castellana

Using a Scikit Learn Preprocessor

For using a preprocessor like the label encoder you need to first instantiate it, fit it with the complete dataset and then use transform when you need to encode a particular set of values.

  
from sklearn.preprocessing import OneHotEncoder, LabelEncoder

neighborhoods = [
    'envigado',
    'poblado',
    'centro',
    'laureles',
    'bello',
]

labels_to_test = [
    'laureles',
    'centro',
    'laureles',
]

label_encoder = LabelEncoder()
label_encoder.fit(neighborhoods)

print('Label Encoded String', label_encoder.transform(labels_to_test))

Using the Label Encoder and the One Hot Encoder

First you should configure both encoders by calling fit on both of them and also transform on the Label encoder

  
label_encoder = LabelEncoder()
label_encoder.fit(complete_set_of_data)

onehot_encoder = OneHotEncoder(sparse=False)

categorical_column = label_encoder.transform(complete_set_of_data)
integer_encoded = categorical_column.reshape(len(categorical_column), 1)
onehot_encoder.fit(integer_encoded)

Then you would call transform on both when transforming a set of values

  
values_to_transform = label_encoder.transform(values_to_transform)
integer_encoded = values_to_transform.values.reshape(len(values_to_transform), 1)
onehot_encoded = onehot_encoder.transform(integer_encoded)

Onehot encode in Javascript

Before using the model created in python inside Javascript we have to One hot encode the data we want to predict, in this case I used a javascript library for that

  
import * as onehot from 'one-hot-enum';

let reducedlist = this.completeSetOfData.slice(1);
let enumaration = onehot.enumaration(reducedlist);
let encoded = onehot.encode(reducedlist);
let zeros = Array.apply(null, Array(encoded[0].length)).map(Number.prototype.valueOf, 0);

this.dictionary = {};

for (let i in enumaration) {
  this.dictionary[enumaration[i]] = encoded[i];
}

this.dictionary[this.neighborhoods[0]] = zeros;

Then for transforming a string into it's one hot encoded vector representation you just need to provide the string into the dictionary
```
  
this.dictionary[valueToTransform]
  
```

6.

Resources

Why One-Hot Encode Data in Machine Learning?

What is One Hot Encoding? Why And When do you have to use it?

sklearn.preprocessing.LabelEncoder

sklearn.preprocessing.OneHotEncoder

one-hot-enum

One-hot Encoding explained

DLightHouse

Brighten Up Your AEM Assets: How to Configure Default Backgrounds and Transparent Modes in Adobe Dynamic Media

Introduction

The Importance of a Good Background

Defining Your Default Background in Dynamic Media Classic

Defining Your Default Background in AEM

Transparent Images with fmt=png-alpha

Explicit Background Colors with ?bgc

Final Thoughts

Langchain Basic LLM with a Simple Schema Javascript

Introduction

Why Structured Output?

Explanation & Code Walkthrough

1. App.jsx

2. llm.js

3. AddressInformationExtractor.jsx

Conclusion

Langchain Basic LLM Javascript

Project Setup

Dependencies

llm.js

AddressInformationExtractor.jsx

App.jsx

Running the App

AEM - Switching from NPM to PNPM in your AEM Application

AEM - Switching from NPM to Yarn in your AEM Application

JavaScript ES6 Features - Computed Property Names

Pre-reqs

Using Computed Property Names in Javascript

Resources

Exposing Reactjs component methods to Javascript or non-reactjs applications

Pre-reqs

Exposing React JS to Javascript or non-reactjs applications

Resources

How to test your application for XSS vulnerabilities using XSStrike

Pre-reqs

Using XSStrike

Resources

How to test your application for XSS vulnerabilities using XSSer

Pre-reqs

Using XSSer

Resources

Creating a Local Private NPM registry using Verdaccio

Pre-reqs

Using Verdaccio as a local Private NPM registry

Resources

Javascript Destructuring assignment

Pre-reqs

Using the Destructuring Assignment

Resources

How to copy files from and to a running Docker container

Pre-reqs

Start a Docker container

Resources

How to execute a command in running Docker container

Pre-reqs

Start a Docker container

Resources

Creating a Reactjs Component Using the Styled Components Library

Pre-reqs

Create the Styled Component

Resources

Creating a Reactjs Component that Renders Nested Children Components Inside

Pre-reqs

Rendering a Nested Component in React.js

Resources

How to configure the Sling Model for the AEM Angularjs component

Pre-reqs

Exposing the model

Resources

How to create an AEM component using Angularjs

Pre-reqs

Creating an AEM application with Angular.js support

AEM component using angularjs

Resources

Creating an AEM Application using Adobe's archetype version 23

Pre-reqs

Creating an AEM application using archetype version 23

Resources

How to Create Feature Toggles in AEM