DEV Community: Vishang

How to add lang option in custom components.

Vishang — Mon, 25 Mar 2024 20:42:16 +0000

How to add language option with custom component using CRXDE

Scenario Adding three language option with your custome component. English, Spanish and French.

Create i18n folder in your component.
Create Subfolders for each languages within i18n
en
es
fr
Component structure will look like this 👇

Add Mixins.. to these folders with type mix:language

After adding mixins. Add a property called jcr:language with language iso code i.e french it will be fr

Within those folder create node with exect same name as an item in your component with primaryType: sling:MessageEntry
Now add two properties

sling:key
sling:message Sling:key is same for all language and change the sling:message properties with your desire custom value in each language.

Test
Change the prefered language from profile->prefrences and check in the component weather the lang is chages to your custom meesage attached to the lanaguage.

Hope this is helpful.

Thank you!

Develop a component with Style System in AEM

Vishang — Tue, 03 May 2022 19:53:33 +0000

🐣 Creating a heading component with style system

Creating a heading component from title component.

Create a component called heading inside /apps/your-project-flder/components/content/~create component

create heading.html

<div class="cmp_heading_textbox" data-sly-use.headingObject="heading.js">
    <h1 class="cmp_heading_text" data-sly-element=${currentStyle.type}>${headingObject.title}</h1>
</div>

create heading.js

"use strict";
use(function() {
    var titleByAuthor = granite.resource.properties["titleProperty"];
    var jcrtitle = currentPage.title;
    var pageName = currentPage.name;
    var title = titleByAuthor || jcrtitle || pageName;

    return {
        title:title
    };
});

Next thing we need is the dialog boxes. So copy cq:dialog and cq:design_dialog from title component.

Now in order to have style tab. Copy styletab node from any core component and paste it inside items node in cq:design_dialog

Add a styles in your clientlib-components folder. Create a clientlib folder for your component. create css.txt and styles.less files inside css folder as per the standard practice for adding styles to the component.

We are using BEM notation to create the styling.
style.less

.headingTextBox-dark {
    .cmp_heading_textbox {
    padding: 2px;
        background-color:#555555;
    }
    .cmp_heading_text {
    color: #ffffff;
    }
}
.headingTextBox-light {
    .cmp_heading_textbox {
    padding: 2px;
        background-color:#FFFFFF;
    }
    .cmp_heading_text {
    color: #555555;
    }
}
.headingTextBox-bordered {
    .cmp_heading_textbox {
    border: 2px solid #00b2b2;
    }
}
.headingText-center {
    .cmp_heading_text {
    text-align: center;
    }
}

Once done content author can create styling by adding styles to the component via component policy.
Something like this 👇

Once done you can see pencil ✎ symbol in your component which shows different styles assigned.

Extend Core Components in AEM

Vishang — Tue, 19 Apr 2022 15:03:58 +0000

Core Components vs Foundation components

Capability	Core Components	Foundation Components
Storage	/apps	/libs
Logic	java POJO with sling model	JSP
Markup	HTL Syntax	JSP
CSS class Naming	BEM Notation	Custom Scheme
Dialog Definition	Coral 3	Coral2+ classic UI
JSON Output	Sling Model exporter with Jackson Serialization	Default Sling servlet
License	Apache	Adobe propriety

👨‍💻 How to extent core components

Core components can not be directly used. So we can use property component to refer to the core component.

Select the component you want to extend from core component library /apps/core/wcm/components copy the path of the component.

Create a proxy components in your project
Go to /apps/project-name/components/content/~create component

Fill in all details in dialog box. In Super Type: use Path without /apps/ to the core component.

Now you will be able to select and add components to your template.

👨‍💻 How to add styles to your components

Create a clientlibs-components folder under your app folder.

Create a client library under clientlibs-components folder

/clientlibs-components/~create node of Type (cq:CllientLibraryFolder)

If you want to use client library provided by core component you can embed multi string categories property to your component.

Use your own client library
Create a Catagories property with multi string value and point it to your-project-folder.components.yourcomponent i.e training.components.breadcrumb in this case.

Then create css.text file with 👇 below content
#base=css style.less

Create a folder structure in you client library
/css/style.less

So the folder structure looks something like this ⛺️.

In order to use these styles on your site. We need to embed this into our clientlibs-site as well. This holds similar structure as clientlibs-components folder with additional embed multi string property
which points to your component.

Creating Dynamic Templates in AEM

Vishang — Thu, 14 Apr 2022 21:46:54 +0000

✅ Benefits

Allow template authors to create and edit templates
Provide templates that retain a dynamic connection to any of the pages created from them
Make the page component more generic so that the core page component can be used without customization

👋 How To

Create configuration 🥨

Go to AEM Tools -> Configuration Browser -> Create Configuration Give the title and tick the checkbox Editable Templates

Once the configuration is created. You can go to CRXDE /conf/your-configuration/settings/wcm you can see the structure is created with
-templates
-policies
-template-types

Template node should be empty as we have not created any templates.

Go to AEM tools -> Templates -> Pick your folder you just created using configuration (in this case i have MyDynamicTemplate folder is available then) -> create a template -> choose any out of the box base template. -> Give Title & Description of the template

Now, the template is created you can edit this template in template editor as per your requirements.

I keep adding few layout container to create the structure of the page.

👋 Content policies for editable templates

Content policies are used to define the design properties of a component
These polices are applicable to the templates and pages created from the templates

Initially, all the components available on the templates are locked. So template author can not do anything on the page. Unlock components in order for authors to make changes by simply click on the unlock button in the editable template.

Lock: unlock the component so authors can edit the components.
Page Policy: You can create and define the policy so only allowed components are available to authors.

👋 Use Template to create a page

In order to use the created template to create a page you have to enable the template first.

** 📣 One last step before your template show up to create page.**

If the template does not show up in the options where you want to create a page.

Go to -> Properties(p) -> Advanced Tab
Scroll to Template Settings options and add the editable template path Save and Close.

Now the template is available. 🙌

👉Notes on Static Templates in AEM👈

Create Static Template with AEM

Vishang — Thu, 14 Apr 2022 20:03:00 +0000

These are my notes which I have taken while learning AEM

Static templates are created in apps🗂 directory

Go to CRXDE lite
Navigate to apps/your-project-folder/templates/~create template

If you're starting fresh. You may need to create "Your project folder" and "templates" folder under apps directory

In resource type add the path to your page structure. This will be a page rendering component.

I have added /apps/training2/components/structure/staticpagetemplate Again create the folder structure if this does not exists

Click next

Allowed Paths
I want this available under my content path so i have added
/content/*

Click next

You can further restrict the template by choosing Allowed Parents and Allowed Children. I kept it blank and click ok 👌

📄 Now create your page rendering components under apps/your-project-folder

Create folders like apps/your-project-foolder/components

Inside the component folder create /content and /structure folders

Create a components inside structure folder

Use resource super type to /libs/wcm/foundation/components/page
so rather than creating page component from scratch. we are inheriting it from out of the box page component.

Now you will be able to create a page out of template you have created.

Go to site and from root you can create page and you will be able to see the template you have created to choose from. Now you can create a page out of that template.

📂 Your folders structure in CRXDE looks something like this.👇

If this helps and want to know more on creating Dynamic Templates with AEM stay tuned. I will also be sharing my notes on how can you create Dynamic templates.

👉Notes on Dynamic Templates in AEM👈

Quick Read on Basics of BEM (Block,Element,Modifier)

Vishang — Mon, 20 Jul 2020 16:32:22 +0000

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.

CSS example writing in BEM way

Block : A top-level abstraction of a new component, for example a card: .card {}. Think Block as PARENT

Elements: child items can be placed inside the block element. For example .btn__title {}. Think Elements as a CHILD.

Modifiers: can be used to manipulate the block so that we can theme or style that particular component without inflicting changes on a completely unrelated module. For example .card--light {} or .card--dark {}

So the card markup might look like this.

So if another developer look at this code who's not familiar should get a good idea of which classes are responsible for what and how they depend on each other. So developers can add many different combinations of cards simply changing a class in the markup

Why BEM

If we want to make a new style of a component, we can easily see which modifiers and children already exist. We might even realize we don’t need to write any CSS in the first place because there is a pre-existing modifier that does what we need.
If we are reading the markup instead of CSS, we should be able to quickly get an idea of which element depends on another (in the previous example we can see that .card__title depends on .card, even if we don’t know what that does just yet.)
Designers and developers can consistently name components for easier communication between team members. In other words, BEM gives everyone on a project a declarative syntax that they can share so that they’re on the same page.

Netlify Forms with FaunaDB

Vishang — Fri, 10 Apr 2020 16:40:31 +0000

It's nice to see the form data to be stored in netlify.

Jamstack Registration Form

Vishang ・ Apr 8 '20

#javascript #jamstack #serverless #webdev

Now, what's next. I am going to store my form data to FaunaDB.

Create a db-schema

Create a Db-schema folder with registration.gql

Create DB with FaunaDB

Login to FaunaDB Console
Create new DB with FaunaDB
Import schema (DB Console -> GraphQL -> Import Schema)
Create a new FUANA_DB_SECRET with security tab in console

Create Environment Variable

In netlify console.
- Go to Deploy Settings -> Environment -> Edit variable Add FAUNA_DB_SECRET -> Copy paste your secret here. This is used for authentication purpose.

Create Nelify Functions

Create netlify functions manually

create a functions folder at root level
within functions folder create your netlify functions i.e for the form submission create submission-created.js under the functions folder. The functions name also needs to match the specific event name with netlify events. The available event triggers available here on netlify docs

Folder structure will look something like this.

Create netlify functions with netlify-cli

$ netlify functions:create submission-created

$ To deploy netlify function via netlify-cli

$ netlify deploy --prod

Now, in netlify console in functions tab all available netlify functions will be listed. Click on function for debug purposes.

Netlify Config

Functions to run in netlify we need a netlify.toml (configuration) file

Now the data which is pushed on netlify forms will also be available in FuanaDB for use.

Jamstack Registration Form

Vishang — Wed, 08 Apr 2020 16:24:39 +0000

It's very easy to setup serverless registration form using Jamstack.

🛠 Tools & Tech

Visual Studio Code
Terminal
Github
Netlify

⚙️ Initial Setup

Setting up Jamstack app

Create an empty folder (i.e. jamstack-registration-form)

$ mkdir FOLDER_NAME

Setting up jamstack app (make sure you are running node 10 and above)

$ yarn init -y

Now create a folder called src

$ mkdir src

Create index.html file within src folder which contains registration form.

Only netlify setup with the form is form tag data-netlify="ture" which actually sends form data to your site. And for Spam Management netlify-honeypot="bot-field" to avoid any spam.

📁 Folder Structure

📷 Create a GIT Repo

Create a new repo and pushing your code to the git.

git init
git add -A
git commit -m 'COMMIT MESSAGE'
git remote add origin YOUR REPO URL
git push -u origin master

🚀 Continuous Deployment with Netlify-cli

To install netlify CLI follow the Netlify Documentation
Netlify-cli Installation Docs
To create new netlify site with netlify-cli

netlify init

Answer series of questions

? what would you like to do? + Create & configure a new site
? Team: Your Team 
? Site name(optional): Your site name
? Your build command: I leave it blank at this point
? Directory to deploy: src

Done! ✅

The site is ready. Now, whenever user make any submission to this form it will get recorded in netlify forms. The data can be exported in .csv or with custom functions data can be recorded in any databases like FaunaDB or Hasura etc.

Revamping my portfolio with GatsbyJS

Vishang — Sat, 15 Feb 2020 20:03:08 +0000

My portfolio needed an update for a long time and I wanted to make it happen in Gatsbyjs. It's been delayed for one another reason. But finally, it's completed and I am happy to share updates on how I build it.

1. Why Gatsby

Gatsbyjs is powerful and popular static site generator out there and the only one which I have tried. It does not need an introduction. Though, I put my thoughts on it.

It's blazing fast ⚡️
It's easy if you already know react 🖌
99 percent of time you think of implementing something and gatsby gets you covered with their rich plugin ecosystem 🙋‍♂️
Basic SEO and performance is out of the box so you can concentrate more on building 🍳
Initially, I struggled a bit. But once I understand few parts it's get easier day by day.
It took me long to get it completed,as i think it was my learning curve. But now I am confident enough to produce new site very fast. Though, I am not an expert on it. Exploring new things as I am building.

Let's check out my processes

2. My processes

I follow simple processes throughout building an application.

🎮Design- yes, I can produce simple and clean design.

📇UX development on top of my design. Believe me if you have design in front of you. It helps in scoping your requirements.

🥨Gatsby integration - Settings up the pages and basic structure of all pages. Setting up page queries to source data from contentful. Gatsby has plugin to pull you contentful space into graphql API. So you can structure your page queries to pull necessary information.

🌾Building contentful model- I am using contentful to source my entire site. So in future if there are updates I can handle it via contentful.

🚀Deployment with Netlify and Gatsby cloud. I have added a webhooks for both environments so whenever I make changes to contentful data modal the build is created automatically and for github page I dont have any automation. So I build the site locally and commit to the master so github pages can update the site.

So, Overall I am happy with this process and will continue with this for next projects.

🖥 Final Result
vish448.github.io

🐞Github Repo

vish448 / vish448.github.io

Build a personal portfolio page with github

How to setup Local GraphQL API

Vishang — Thu, 30 May 2019 20:44:50 +0000

Requirements

nodejs
babel

Assume that you already have Node js installed in your system.

Create a folder i.e graphql-local-server

initialize package.json with following command. we just keep all defaults with it.

npm init

Add a start script to your package.json file

Setup babel

Install babel dependencies.

Run following commands in order to install latest version of babel compiler and babel preset

npm install babel-cli babel-preset-env

babel-cli is a babel compiler and babel-preset-env will tell babel what it should change so the browser can understand the JS code.

Now create a single file called .babelrc in your root folder which will tell our presets which environment to use.

import GraphQL-yoga library

Official documentation

npm install graphql-yoga

create an index.js file inside your src root folder with following content.

Now when you run

npm run start

you will see the log with "The server is up!" text.

By default, graphql-yoga starts the server on port 4000

Open the http://localhost:4000/ to see your first graphQL api.

Your first available GraphQL query

query {
hello
}

Folder Structure

JS Promise

Vishang — Sat, 11 May 2019 21:53:50 +0000

A Promise is an object representing the eventual completion or failure of an async operation. Essentially, a promise is returned object to which you attach callback, instead of passing callback into a function.

A Promise is one of these states:

Pending: Initial(default) state, neither fulfilled nor rejected.
Fullfilled: Operation completed successfully
Rejected: Operation Failed

Pending promise can either be full-filled with a value, or rejected with a reason (error). when either of these options happens, the associated handlers queued up by a promise's then method are called.

Three main questions about the promises

1.How to create a Promise

2.How to change the status of a promise

How to listen for when status of a promise changes

How to create a Promise

A Promise object is created using the new keyword and its constructor.
const promise = new Promise()

How to change the status of a promise

The Promise constructor a single callback function which takes two args. resolve callback function called when the result of the promise is resolve and reject callback function is called when the result of the promise is to rejected.

const promise = new Promise((resolve, reject)=>{
    resolve(); // When the promise is fulfilled it change the status of the promise to resolve
    reject(); // When the promise is rejected it change the status of the promise to rejected.
})

How to listen for when status of a promise changes

We can listen to the changes to the two method available with promises.

.thenIf promise is fulfilled(resolve) the function attached to .then method is invoke
.catchIf promise is rejected(rejected) the function attached to .catch method invoke

If you log the empty promise you can see the method attached to it's prototype.

Simple Example

Methods

Promise.all(iterable)

Returns a promise that either fulfills when all of the promises in the iterable args have fulfilled or rejects as soon as one of the promises in the iterable args rejects.

if the returned promise fulfills, it is fulfilled with an array of the values from the fulfilled promises in the same order as defined in the iterable.

If the returned promise rejects, it is rejected with reason from the first promise in the iterable that rejected.

Promise.race(iterable)
Returns a promise that fulfills or rejects as soon as one of the promises in the iterable fulfills or rejects, with the value or reason from that promise.

Promise.reject(reason)
Returns a Promise object that is rejected with the given reason.

Promise.resolve(value)
Returns a Promise object that is resolved with the given value. If the value is a thenable (i.e. has a then method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value.

How promises make confusing callback code lil easier

Old ways of doing several async operation in a row will create classic callback pyramid of doom

doSomthing(function(result)){
    doSomethingElse(result, function(newResult){
        doThirdThing(newResult, function(finalResult){
            console.log(finalResult)
        }, failureCallback);
    }, failureCallback);
},failureCallback);

With modern functions, we attach our callbacks to the returned promises instead, forming a promise chain:

doSomething()
.then(result=> doSomethingElse(result));
.then(newResult => doThirdThing(newResult));
.then(finalResult => console.log(finalResult));
.catch(failureCallback)

Now you can compare which is easy to read and follow.

Codesandbox

Adding the codesandbox.

OnClick it will call a function which is returning a promise !
axios.get
Once the promise gets resolved it will call another function ".then" which is generating an actual UI for our component.

React Router V4

Vishang — Fri, 03 May 2019 21:38:48 +0000

React Router is a collection of navigational components that compose declaratively with your application.

Prerequisite

React router requires react router package to be installed first in order to use it.

npm install --save react-router-dom

Insert into component

import {
    BrowserRouter,
    Route,
  } from 'react-router-dom'

BrowserRouter: to wrap entire nav into this wrapper
Route: to create individual routes which points to dedicated components. It takes two params path and component

In Action


import {
    BrowserRouter,
    Route,
  } from 'react-router-dom'

import Nav from './nav'

class App extends React.Component{
    render(){
        return(
            <BrowserRouter>
                <div className ="container">
                    <Nav />
                    <Route exact path="/" component = {home} />
                    <Route path="/about" component = {about} />
                    <Route path="/contact" component = {contact} />
                </div>
            </BrowserRouter>

        )
    }
}

Creating links

Once we have our router ready which points to the individual component we can create anchor links which points to this route.

let's call this as nav.js. In this file we believe to add all our routes links.


import React from 'react'
import {
    Link,
    NavLink
  } from 'react-router-dom'

function nav(){
    return(
        <ul className='nav'>
        <li><NavLink exact activeClassName ='active' to ='/'>Home</NavLink> </li>
        <li><NavLink activeClassName ='active' to='/about'>About</NavLink></li>
        <li><NavLink activeClassName ='active' to='/contact'>Contact</NavLink></li>
        </ul>
    )

}
module.exports = nav

We first imported Link and NavLink component form react-router-dom. Navlink has special tags which helps to create more meaningful links.

we can pass to attribute to NavLink which is mainly the path to the route. We can also pass activeClassName attribute and pass some styling to it.

we also added exact attribute to our root path. it's needed as we have '/' in front of all our other routes. So to avoid confusion we tell react to go to exect that path only.

i.e

.active { font-weight: bold; }

We have created three paths here

/
/about
/contact

If we create dedicated components, it will directed to their dedicated path. Here, we have to add exact to our root route as well or else all other links will be loading that component.

404 Route

We can add 404 not found route with the use of Switch component of 'react-route-dom'


import {
    BrowserRouter,
    Route,
    Switch
  } from 'react-router-dom'

import Nav from './nav'

class App extends React.Component{
    render(){
        return(
            <BrowserRouter>
                <div className ="container">
                    <Nav />
                    <Switch>
                        <Route exact path="/" component = {home} />
                        <Route path="/about" component = {about} />
                        <Route path="/contact" component = {contact} />
                        <Route render= {()=> <p>Not found</p> />
                    </Switch>
                </div>
            </BrowserRouter>

        )
    }
}

So whenever it does not found the Route it will render not found. Instead of creating entire new class we just render the text directly from our route.