Liferay Front End Developer – First steps

1. Environment Setup

A tutorial will be presented for the environment setup and first steps on the Liferay platform for Front End Developers, based on the official Liferay training and some information provided by the Liferay USA team. All steps were run in Linux environment, distribution Ubuntu 16.04.

1.1 Java JDK

To run the local Liferay server, you must install version 1.8 of the Java Development Kit (JDK) and append the address of the bin folder of the JDK at the beginning of the PATH variable (through the ~ / .bashrc file). You also need to set the JAVA_HOME and JDK_HOME environment variables, with the JDK installation address, without the bin folder.

At the end of the .bashrc file, the following lines were inserted:

export JAVA_HOME=/path/to/jdk (replace)
export JDK_HOME=$JAVA_HOME
export PATH="$JDK_HOME/bin:$PATH"

1.2 MySQL 5.6

It is necessary to install MySQL 5.6, although the Liferay Platform uses by default the HSQL (Hyper SQL), it is not recommended for production. Installation can be done through these commands.

sudo add-apt-repository 'deb http://archive.ubuntu.com/ubuntu trusty universe'
sudo apt-get update
sudo apt install mysql-server-5.6
sudo apt install mysql-client-5.6

1.3 Node.JS and NPM

For many tasks in the Front End, it is indispensable Node.JS, for Liferay is no different, the Node platform is used to enable the creation and testing of new themes. We will use NVM to install Node, as it is a way to allow multiple versions of the Node to be installed, making it easier to test in other versions and return to previous versions when necessary. To install Node.JS in Ubuntu, the following commands were used:

sudo apt-get update
sudo apt-get install build-essential libssl-dev
curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile

To list the available versions of the Node for installation, use the nvm ls-remote command, the latest and stable version available at the time of this writing is 8.11.1, so to do the installation, use the commands:

nvm ls-remote
nvm install –delete-prefix v8.11.1
nvm use v8.11.1

1.4 Yeoman

Yeoman is an environment for code generation run in Node.JS that allows you to use plugins to create quick starts for various purposes, such as themes for Liferay. To install Yeoman the npm is used:

npm install -g yo

1.5 Gulp

Gulp is a tool for automating front end tasks, such as importing dependencies, code lint, watchers and so on. Liferay has a set of Gulp tasks to facilitate the development process.

npm install -g gulp

1.6 Code generator

For the generation of Liferay codes, a plugin installed via npm is used, which will be used by Yeoman.

npm install -g generator-liferay-theme@7.2.0

For further details, check out the section Liferay Theme Generator.

1.7 Liferay + Tomcat Bundle

The Liferay platform can be run locally through the bundle provided by Liferay at this address (Liferay Portal CE bundled with Tomcat). It already has a built-in Tomcat server, so you only need to download and unzip to some known location, the manual suggests separating the bundles inside a folder like ~/liferay/bundles/, for example. To start the Tomcat server running the Liferay portal, simply open the place where the bundle was unzipped inside the tomcat-[version]/bin folder and run the command:

./startup.sh

The platform logs are exported in the tomcat-[version]/logs/catalina.out file, so to see the logs in real time, the command used is:

tail -f catalina.out

The server takes a few seconds to initialize, when the startup process finishes, a browser tab is launched with the Liferay portal open on the initial configuration page, where it is possible to set the administrator user account, the name of the main site and choose the database. To terminate execution of the Tomcat server, the following script is executed in the tomcat-[version]/bin folder:

./shutdown.sh

Like startup.sh, shutdown.sh also takes a few seconds to run, but it does happen in the background, so you do not need to keep any windows open for it to complete.

2. Fundamentals

Liferay is a platform for developing websites and systems for the web, mobile devices and other devices that are connected to the internet. It has easy customization using the WYSIWYG technique (What you see is what you get), the components can be simply dragged onto the screen and the way they are displayed there is how they will be presented to users. Business rules can be configured directly in the editor, since each component has its own characteristics and can easily be customized to meet the most varied criteria. The platform also allows managing user accounts and permissions, managing media and content in general.

3. Tools

3.1 Blade CLI

To facilitate the creation of Liferay 7.0 modules, services, or any other structure, as well as deploy, local server management, and other platform-related tasks, you can use Blade CLI, which is an Gradle environment-based command-line tool. It has subcommands that assist in creating and deploying modules in a Liferay instance. This tool is built into the Liferay Workspace, and can be installed following the instructions in Liferay Official Documentation - Installing Blade CLI. To list the CLI Blade commands with their respective functions, simply execute the blade help command, the following commands will be listed:

    create          Creates a new Liferay module project from several available
    convert         Converts a plugins-sdk plugin project to a gradle WAR project
    deploy          Builds and deploys bundles to the Liferay module framework.
    gw              Execute gradle command using the gradle wrapper if detected
    help            Get help on a specific command
    init            Initializes a new Liferay workspace
    install         Installs a bundle into Liferay module framework.
    open            Opens or imports a file or project in Liferay IDE.
    outputs
    samples         Generate a sample project
    server start    Start server defined by your Liferay project
    server stop     Stop server defined by your Liferay project
    sh              Connects to Liferay and executes gogo command and returns output.
    update          Update blade to latest version
    upgradeProps    Helps to upgrade portal properties from Liferay server
    version         Show version information about blade

Blade relies on templates to create the modules, there are several templates available for use, which gives the developer plenty of flexibility in using it. The available templates are shown by the command blade create -l and this is the return of the command:

    activator                          Creates a Liferay module project that customizes the starting and stopping of a Liferay bundle.
    api                                Creates a Liferay API module project with an empty public interface.
    content-targeting-report           Creates a Liferay Audience Targeting report as a module project.
    content-targeting-rule             Creates a Liferay Audience Targeting rule as a module project.
    content-targeting-tracking-action  Creates a Liferay Audience Targeting metric as a module project.
    control-menu-entry                 Creates a Liferay module project that customizes Liferay Portal's Control Menu.
    form-field                         Creates a Liferay form field module project using the Soy templating language.
    fragment                           Creates a Liferay fragment module project that customizes existing Liferay modules.
    freemarker-portlet                 Creates a FreeMarker portlet as a module project.
    layout-template                    Creates a Liferay layout template module project.
    mvc-portlet                        Creates a Liferay MVC portlet as a module project.
    npm-angular-portlet                Creates a Liferay MVC portlet with npm and Angular support as a module project.
    npm-billboardjs-portlet            Creates a Liferay MVC portlet with npm and Billboard.js support as a module project.
    npm-isomorphic-portlet             Creates a Liferay MVC portlet with npm and isomorphic code support as a module project.
    npm-jquery-portlet                 Creates a Liferay MVC portlet with npm and jQuery support as a module project.
    npm-metaljs-portlet                Creates a Liferay MVC portlet with npm and Metal.js support as a module project.
    npm-portlet                        Creates a Liferay MVC portlet with npm support as a module project.
    npm-react-portlet                  Creates a Liferay MVC portlet with npm and React support as a module project.
    npm-vuejs-portlet                  Creates a Liferay MVC portlet with npm and Vue.js support as a module project.
    panel-app                          Creates a Liferay panel app that customizes a panel category (e.g., Control Panel) by inserting an entry that gives access to an application.
    portlet                            Creates a Liferay portlet extending the "javax.portlet.GenericPortlet" class as a module project.
    portlet-configuration-icon         Creates a Liferay module project that customizes a Liferay portlet's configuration icon.
    portlet-provider                   Creates a Liferay module project that finds appropriate portlets to manage requests.
    portlet-toolbar-contributor        Creates a Liferay module project that customizes a Liferay portlet's toolbar.
    rest                               Creates a Liferay JAX-RS module project.
    service                            Creates a Liferay OSGi service module project implementing a chosen interface.
    service-builder                    Creates a Liferay Service Builder project by generating an API and implementation module.
    service-wrapper                    Creates a Liferay service wrapper module project extending a chosen service wrapper class.
    simulation-panel-entry             Creates a Liferay panel app module project that customizes Liferay Portal's Simulation Menu.
    soy-portlet                        Creates a Liferay Soy portlet as a module project.
    spring-mvc-portlet                 Creates a Spring MVC portlet as a WAR project.
    template-context-contributor       Creates a Liferay module project that injects custom non-JSP template variables into Liferay Portal.
    theme                              Creates a Liferay WAR-style theme project.
    theme-contributor                  Creates a Liferay module project that packages UI resources (e.g., CSS and JS) independent of a theme to include on a Liferay Portal page.
    war-hook                           Creates a Liferay WAR-style Hook project.
    war-mvc-portlet                    Creates a Liferay WAR-style MVC portlet project.

It is possible to create a Liferay environment using Blade CLI, from the command sequence:

blade init [WORKSPACE_NAME]
cd [WORKSPACE_NAME]
./gradlew initBundle
blade server start -b

The -b parameter starts the server in the background. Alternatively, the -d parameter can be used to use debug mode. After executing these commands the server will initialize, just like startup.sh script. To see the logs in real time, you can watch the bundles/tomcat-[version]/logs/catalina.out file with the tail command:

tail -f bundles/tomcat-[version]/logs/catalina.out

This will show all the inserts in the catalina.out file which is where the logs are logged. If errors occur, they will also be shown in this file.

To stop the execution of the service and stop the server, use the command:

blade server stop

To create a Liferay Theme using the Blade CLI, use the command at the root of the workspace [WORKSPACE_NAME]:

blade create -t theme [THEME_NAME]

This command will create the folder [WORKSPACE_NAME]/wars/[THEME_NAME], with the folder structure below:

[THEME_NAME]
└── src
    └── main
        ├── resources
        │   └── resources-importer
        └── webapp
            ├── css
            └── WEB-INF

To deploy the project, just go to the root folder of [THEME_NAME] and use the Blade command:

blade deploy

This will generate the build structure of folders and will look like this:

[THEME_NAME]
├── build
│   ├── buildTheme
│   │   ├── css
│   │   │   ├── application
│   │   │   ├── aui
│   │   │   │   └── lexicon
│   │   │   │       ├── atlas-theme
│   │   │   │       │   └── variables
│   │   │   │       ├── bootstrap
│   │   │   │       │   └── mixins
│   │   │   │       ├── fonts
│   │   │   │       │   └── alloy-font-awesome
│   │   │   │       │       ├── font
│   │   │   │       │       └── scss
│   │   │   │       └── lexicon-base
│   │   │   │           ├── mixins
│   │   │   │           └── variables
│   │   │   ├── base
│   │   │   ├── layout
│   │   │   ├── navigation
│   │   │   ├── portal
│   │   │   ├── portlet
│   │   │   └── taglib
│   │   ├── images
│   │   │   ├── add_content
│   │   │   ├── api
│   │   │   ├── application
│   │   │   ├── arrows
│   │   │   ├── aui
│   │   │   │   ├── common
│   │   │   │   ├── menu
│   │   │   │   └── panel
│   │   │   ├── blogs
│   │   │   ├── bookmarks
│   │   │   ├── calendar
│   │   │   ├── common
│   │   │   ├── control_panel
│   │   │   ├── diff
│   │   │   ├── dockbar
│   │   │   ├── document_library
│   │   │   ├── emoticons
│   │   │   ├── file_system
│   │   │   │   ├── large
│   │   │   │   └── small
│   │   │   ├── forms
│   │   │   ├── image_gallery_display
│   │   │   ├── journal
│   │   │   ├── language
│   │   │   ├── lexicon
│   │   │   ├── login
│   │   │   ├── mail
│   │   │   ├── message_boards
│   │   │   ├── messages
│   │   │   ├── navigation
│   │   │   ├── portlet
│   │   │   ├── progress_bar
│   │   │   ├── ratings
│   │   │   ├── shadow
│   │   │   ├── shopping
│   │   │   ├── social
│   │   │   ├── social_bookmarks
│   │   │   ├── staging_bar
│   │   │   ├── trees
│   │   │   ├── users_admin
│   │   │   └── wiki
│   │   ├── js
│   │   ├── templates
│   │   └── WEB-INF
│   ├── libs
│   ├── resources
│   │   └── main
│   │       └── resources-importer
│   └── tmp
│       └── war
└── src
    └── main
        ├── resources
        │   └── resources-importer
        └── webapp
            ├── css
            └── WEB-INF

To edit any file in the build, you can create (or copy) the file from the build folder to the src folder, with the same name, in a corresponding directory, so when the blade deploy is executed again, the files in the src folder will replace the files in the build folder. Editing portions of these files will affect the functioning of the portal as a whole, including native portal functions, so this must be taken into account in all customizations.

The build structure of folders is similar to the structure when created by Yeoman, most of the files consist of modularized SCSS in multiple folders and files. There is also a JavaScript file in the build/buildTheme/js folder called main.js, which at the moment is practically empty, but can be duplicated insrc/main/webapp/js (not yet created) and will replace buildwith the JavaScript functionalities implemented insrc/main/webapp/js/main.js.

3.2 Liferay Theme Generator

Liferay Theme Generator can help with the start of a new theme and other related details such as layouts and color schemes among others.

Themes are packages built to customize the general layout of the page, such as header and footer, navigation menu, positioning of portlets and so on.

3.2.1 Creating a new theme

In the project's themes folder, use the command:

$ yo liferay-theme

Soon after the configuration settings, the Yeoman will create an initial structure for the theme (maybe it needs administrator privileges like sudo), and soon it will run npm install to install and the necessary dependencies, creating the following structure:

my-theme
├── node_modules                                     // Folder with dependencies installed
├── build                                            // Build theme (folder created only after the first build)
├── src                                              // Top theme files
│   │
│   ├── css                                          // Custom CSS
│   ├── js                                           // Custom JS
│   └── WEB_INF                                      // Liferay Metadata
│       │
│       ├── liferay-look-and-feel.xml                // File with display settings
│       └── liferay-plugin-package.properties        // File with details to view, such as name and description
│
├── gulpfile.js                                      // File with gulp's tasks
├── liferay-theme.json                               // Theme details such as ID, URL to deploy, and more
└── package.json                                     // Dependency details

The deploy and build commands of the theme are made through gulp:

$ gulp build        // Build the theme and create the components in the `my-theme/build` folder
$ gulp deploy       // Build and deploy the theme to the server
$ gulp watch        // Deploy, watch to changes and apply them continuously

3.2.2 Customizing page structure

After creating a theme, make the first build with gulp. This will create the build folder within your theme. Inside it you will find the folder templates inside it you will find the base structure of the Theme.

templates
├── init.ftl                     // Initial settings of FTL variables (not recommended to change this file)
├── init_custom.ftl              // Used to append at the end of init.ftl
├── navigation.ftl               // Portal navigation menu template
├── portal_normal.ftl            // Initial portal structure
├── portal_pop_up.ftl            // Portal popups template
└── portlet.ftl                  // Structure Template involving Portlets

Copy and paste the component you want to change in your src folder and so gulp will replace the file when running build.

Templates allow you to completely change the structure of the page, such as HTML tags, and even embed some portles, so they can not be removed.

It is possible to call the portlets with the following tag:

<@liferay_portlet["runtime"]
    instanceId="INSTANCE_ID"
    portletName="PORTLET_NAME"
/>

Where portletName is the name of the portlet package, changing the dots by underline Ex: com.liferay.portal.search.web.portlet.SearchPortlet = com_liferay_portal_search_web_portlet_SearchPortlet

InstanceId needs to be called if the portlet can be used multiple times.

For example, to embed the search portlet into page, put in your code:

<@liferay_portlet["runtime"]
    portletName="com_liferay_portal_search_web_portlet_SearchPortlet"
/>

+ More about this.

3.2.3 Creating new layouts

When creating a site or page in the Liferay portal, you need to define a layout for portlet placement

But it is possible to create a new layout if necessary, with the Liferay Theme Generator and the command

$ yo liferay-theme:layout

And follow the generator's instructions, like choosing name, id and how many columns and rows the layout will have.

Remembering that the 12-column bootstrap system is used.

When you finish defining the options, the system will create a tpl extension file with the structure of its layout, and an image of the same name to use as an icon.

If the generator is used in a folder with a theme created by it, it will create the files in the src/layouttpl folder.

In the next deploy, the layout will appear as an option among others when creating or editing a page.

3.2.4 Creating Themelets

There is a component called themelet, which is an extension to a theme and can add style sheets, images, templates and JavaScript functionality to it. It is suitable for small changes and aims to bring more modularity to the themes and avoid repetition of code.

In the npm record there are themelets available for reuse.

The creation of themelets is done from Yeoman, with the liferay-theme: themelet task:

yo liferay-theme:themelet

After this command the created folder structure is as follows:

[THEMELET_ROOT]
├── package.json
└── src
    └── css
        └── _custom.scss

Within the src folder, you can create js, template and images folders, following the same naming and structure of a theme, so that the files are allocated correctly at the moment of the build.

To make the themelet available for use, you can use two npm methods:

npm link: Creates a symlink of the themelet directory in the global folder of node_modules, so any changes in the themelet will be instantly available for the themes that extend it.
npm install -g: This method copies the themelet files to the global node_modules folder, but does not maintain the link to the original folder, so when there are changes in the themelet you will need to run the command again.

For more information about themelets, click here.

3.2.5 Importing themes

This liferay-theme feature allows you to import other themes found in the folder into the Liferay Theme Generator template.

yo liferay-theme:import

4. Front End Components

Below are some components that help in the development of Front End, its main features and functionalities.

4.1 Languages used

4.1.1 HTML & Structure

FreeMarker

For the HTML structure of the page and the portlets is used the FreeMarker which is a language that mixes Java and HTML.

To build elements using HTML typically:

<ul>
    <li>Example</li>
</ul>

In FreeMarker we could use variables and interpolation:

<#assign variable = "Example" />

<ul>
    <li>${variable}</li>
</ul>

We also could have loops, logical structures, objects, includes and so on:

<#assign objectList = ["Example 1","Example 2", "Example 3"] />

<ul>
    <#if objectList?has_content>
        <#list objectList as object>
            <li>${object}</li>
        </#list>
    </#if>
</ul>

+ More about.

Soy Templates (Google Closure)

Although not used by ADTs and Web Content Displays, soy can be used to build portlets in conjunction with metal.js. For more details on soy, click here.

4.1.2 CSS

For the CSS is used SCSS, the preprocessed CSS with functions like variables, nesting, mixins and so on:

div .text {
    color: blue;

    &.red {
        color: red;
    }
}

Built:

div .text {
    color: blue;
}
div .text.red {
    color: red;
}

Also used are Bootstrap and Lexicon/Clay libraries that have several mixins and components already styled.

To get more about:

Bootstrap.
Lexicon.

Some elements from Lexicon can be called by the liferay-ui taglib.

4.1.3 JavaScript

For JavaScript, preference is for ES6, but it is possible to use other libraries, such as jQuery, which is already included in the package. It is also possible to add more libraries via NPM, or add to the JS folder of your theme, and import into the head tag of your portal_normal.ftl template.

4.2 ADTs

Application Display Templates or ADTs, are templates that allow customization of portlets. They are templates in FreeMarker (ftl), with classes and custom structure.

The CSS comes from the theme classes, or an inline style that can be placed in portlet by the portal.

The portlets that support ADTs are:

Asset Categories Navigation;
Asset Publisher;
Asset Tags Navigation;
Blogs;
Media Gallery;
RSS;
Breadcrumb;
Language;
Navigation Menu;
SiteMap;
and Wiki.

Each portlet has a specific ADT, with some presets and ready-made calls to make it easy to customize.

4.3 Web Content Structures & Templates

Web Contents are elements used to present content either through the Web Content portlet itself or an Asset Display, which can list all the contents of the portal in an organized way, as well as a Blog, but in a more open and customizable way. In conjunction with the ADTs, it is possible to produce elements such as galleries, listing of posts, photo album, among others. It is one of liferay's most customizable portlets.

Web Content uses a structure that must be created to define what can be used by a web content, and each structure can have several templates that, like an ADT, use FreeMarker to customize its display.

You can find the Structure and Templates options in the Web Content sub-menu:

The Asset Display uses ADTs to customize the Web Contents listing, but the Web Content itself, when maximized, uses the Template structure.

+ More Details.

4.3.1 Web Content Structures

With the structures you can define what a web content will present, among several options like image publishing, common text, html and select boxes. And set options as either mandatory or optional content for Web Content publishing.

4.3.2 Web Content Templates

With the templates you can define how the structure will be displayed, from a ftl script.

Just like in ADTs, you can find alongside some variables ready to assist in building the code, along the calls of the elements that were determined in the structure, but it is also possible to use some restricted variables to access other elements of Web Content. (See more).

4.4 Liferay UI Components

The Application Display Templates (ADTs) and the Web Content Templates in FreeMarker Template (ftl) have full UI and Utils taglibs support, using the following structure:

<@liferay_ui['property']
    param="value"
/>

For example: If you want to create a User Display, you need:

<@liferay_ui["user-display"]
    markupView="lexicon"
    userId=userId
    userName=userName
    showUserDetails=false
    showUserName=true
/>

You can also use other elements, such as Lexicon icons:

<@liferay_ui["icon"]
    cssClass="additional-class"
    icon="name-of-the-icon"
    markupView="lexicon"
    message="An message popup"
/>

You can change the types of icons, replacing markupView with Glyphicon, or Font-Awesome.

For a complete reference of the icons, go to Lexicon Icons.

You can see a complete list with all available tags and their parameters in the following link.

4.5 Gulp Tasks

Liferay have predefined gulp tasks to help in the theme build and deploy, this tasks allows to compile all theme files in a WAR file, and do the deploy in the application server, it also allows to extend themes with themelets, that help make little changes without creat a complete new theme.

4.5.1 Gulp build

This taks compiles all the source-code in a file .WAR, in the dist folder.

4.5.2 Gulp deploy

The task deploy executes the build task before, to create the WAR, and after that publishes this file on the specified application server. If the Bundle is in execution, you can use the taks deploy:gogo, that is a fast method than the deploy

The documentation suggests that only one deploy method is used, that means, if for the first deploy the task deploy is used, it is advisable that the deploy:gogo task not to be used.

4.5.3 Gulp watch

This task its similar to the deploy:gogo, and only works when the bundle is running. It keeps looking the files and when it finds alterations on the files, it makes a fast deploy, but it doesn't have a BrowserSync, which is the technology that allows you to view the changes in the browser instantly, so to see the changes you need to refresh the page.

4.5.4 Gulp init

This task is used to specify the application server address that will be used by the deploy task.

It is automatically called by the Yeoman liferay-theme and liferay-theme:import.

As propriedades geradas por essa tarefa ficam salvas no arquivo liferay-theme.json, no diretório raiz do tema.

4.5.5 Gulp extend

This task allows to configure the base theme and also allows to add and install themelets to it. When the base theme is changed, there is two possibilities: styled or unstyled.

The Base Theme Styled has all the portal native style and features (like login, edition tools and content management tool), and all default SCSS are avaliable, including the Bootstrap, Lexicon, etc., but the portlets and the pages aren't stylized.
The Base Theme Unstyled, doesn't have any style predefinition, ever for the portal and its features. It used when its needed to recreate all the portal visual structure.

Both Base Themes are published as npm packages, Styled and Unstyled. Its also possible to extend the theme from other themes published on npm and, according to the documentation, do not necessarily need to be installed.

4.5.6 Gulp status

This task only repotrs the Base Theme that has been used, and which themelets are been used.

5. Front End Good Practices

5.1 Configuration

Regardless of the editor/IDE that is used, it's recommended using some options to help with the little details on the code. If possible look for these options on your favorite editor:

Remove trailing whitespace This option automatically removes any trailer whitespace at the end of the lines.

VSCode has this options, and Sublime Text has packages that implement this feature.
Indents and Spacing Liferay uses as default the 4-spaces tab indent. A lot of editors can easily change the file indentation from space to tabs, they just need to have the same size. The priority here is to not mix them both.
Render/Show whitespace Some IDEs has an option to show the file whitespace, and let this option turned on can help with double spaces, and trailing spaces:
Remove extra lines There is no need to add blank lines between the code blocks or at the end of the file. Only one line is enough to separate statement variables, code blocks, and so on. There should be no additional line at the end of the file.
Comments and JSDoc Comments with /* */ should be reserved only for multi-line comments or for comments that we wish to retain in CSS after compiling. JSDoc-style comments are not required.

.

5.2 Code Formatting

5.2.1 HTML/TPL/FTL

Organize the attributes of HTML alphabetically, for example: <input type =" "class =" "id =" "> should be <input class="" id="" type="">
Organize attribute values (such as classes) alphabetically as well, for example: <div class =" box alert custom "> should be <div class =" alert box custom ">
The HTML parameters should be written on the same line. There is no limit for line size;
Block-level elements need a class or an id (div, aside, sections);
It is preferable to use only double quotation marks for properties and strings;
In FreeMarker for the declaration of multiple variables with <#assign />, you must separate each one in your line.

5.2.2 CSS/SCSS

Hexadecimal colors must be capitalized for ease of viewing: - #2c2c3c -> #2C2C3C
- This can be done by using find and replace with regex:
  - Search: (#[0-9a-fA-F]{3,6})
  - Replace for: \U\1
Comments need a line before and after the text.
Rules and properties should be written in a block and not in single lines.
Use 0 instead of 0px when applicable.
Always check if all properties end with semicolons.

Each priority must have its own line and must be organized in alphabetical order:

.class-style {
    margin: 0 auto;
    max-width: 1170px;
    padding: 0 15px;
    width: 100%;
}

@ includes must have a line of spacing between them:
```
@include "CSS"

@include "Another CSS"
```
Avoid going more than 3 levels deep in the SASS hierarchy to facilitate maintenance, max 4.
To facilitate understanding, it is desirable to adopt a folder structure to separate the SCSS files contextually and within them to modularize files for each purpose, for example, portlet-related scripts should be in the css/portlets folder and variable files, animations, or general styles can be inside a css/partials folder, each group in a separate file: css/partials/_variables.scss, css/partials/_animations.scss, css/portlets/_blogs.scss and so on.
In the nomenclature of the archives one should be as clear and objective as possible, the standard for the format of the name is all lowercase letters and separated by hyphens when they are names composed of more than one word, the underline at the beginning of the name serves for telling SASS that it is a partial file and a CSS file should not be generated for it. Examples: _blogs.scss, _blogs-entry-view.scss.
When using properties that need to be prefixed to ensure compatibility with other browsers, you should prefix or use Bourbon mixins, which is a library that is already available by default in the Liferay environment, and ensures compatibility with known browsers.

5.2.3 JS

Just like in the CSS, comments should have a separating line before and after the text.
Place each argument of a function on a separate line.
Separate variables declaration and the code by one line.
Newlines should be added to create logical groupings of statements.

    // bad

    door.knock();
    door.openDoor();
    person.greet();
    home.enter();
    person.sit();

    // good
    door.knock();
    door.openDoor();

    person.greet();

    home.enter();

    person.sit();

Functions as arguments should be on their own line:

    // Bad
    $(window).scroll(function() {
        // code
    });

    // Good
    $(window).scroll(
        function() {
            // code
        }
    );

Sort variables declaration alphabetically, if possible.

Spacing the functions of your arguments:

var param1 = someFunc();
var param2 = otherFunc();
var param = funcThatUsesParams(param1, param2);

// Comment

if (param == true) {
    do something;
}
else {
    do other thing;
}

Remove all console.log from code.

5.3 Liferay Front End Source Formatter

The Liferay Front End Source Formatter is an npm command that helps you to check if your code follows Liferay patterns, looking for errors and unfollowed practices, such as those cited above, and shows the line for the correction.

To install, simply run the command:

$ npm install -g check-source-formatting

Remember that you need node.js v6.0 or greater.

The basic mode of use is:

$ csf path/to/file

And just below it returned the errors found:

Or check multiple files at the same time with the command:

$ find . -name '*.css' | xargs csf

And it's also possible to integrate with git, to check only the last changed files. In your .gitconfig file, include the following alias:

sfm = "!f() { git diff --stat --name-only master.. | tr \"\\n\" \"\\0\" | xargs -0 -J{} csf {} $@; }; f"

So you can run the command directly from your terminal:

$ sfm

+ More information.

5. Util

FreeMarker Docs.
Liferay Docs.
Taglibs Docs.
Liferay Certification Service.

6. Liferay Certification

Liferay has an Certification Service, that is a test with 50 question, ranging from questions of true or false and multiple choice, with 90 minutes of duration and a cost of USD 200.00. This test allows an official recognition of the skill and experience with the Liferay environment. In the moment, there is three avaliable certifications, one for Liferay 6.2, and two others for Liferay DXP (Front-End and Back-End).

6.1 Liferay 6.2 Certified Professional Developer

The Liferay 6.2 Professional Developer comprises the following items:

Liferay Development Best Practices (10%)
- Development Environment Setup;
- Understanding Liferay Plugins.
Liferay Architecture and APIs (25%)
- Understanding Liferay Architecture;
- Service Builder;
- Liferay Utilities;
- User Management and Group APIs;
- AlloyUI;
- Expando API;
- Application Display Templates.
Liferay Portlet Plugin Development (20%)
- Portlet API;
- Configuration;
- IPC;
- Liferay MVCPortlet;
- JSP and UI Technologies;
- Permissions.
Liferay Hook Plugin Development (25%)
- Best Practices;
- Configuration Hook;
- JSP Hook;
- Language Hook;
- Indexer Post Processor Hook;
- Service Wrapper Hook;
- Struts Action Hook;
- Servlet Filter Hook.
Liferay Theme Plugin Development (5%)
- Understanding Liferay Theme Development;
- Color Schemes and Theme Settings;
- Embedded Portlets.
Liferay Layout Template Plugin Development (5%)
- Understanding Liferay Layout Template Development.
Liferay Advanced Customization (10%)
- Understanding EXT Plugins;
- Modifying Portal Configuration;
- Customizing Core Portlets.