Alex Arriaga

alex-arriaga July 3, 2018

How to reset page navigation component to render the content items from first page in IBM WCM

Enterprise Development, IBM Web Content Manager, IBM WebSphere No Reply

The problem

When working with navigation components, it is common to share the same pagination in several menu or personalization components, however this introduces an issue because when clicking on the “Next” or “Previous” page the URL is going to have a parameter with the paging state which causes the problem of keeping the page as the last clicked option.

The solution;

IBM WCM provides a parameter to force the pagination component to render from the very first page. This parameter can be appended in the query string when generating links within the pagination component: WCM_Page.ResetAll=TRUE.

alex-arriaga April 26, 2018

What is a render parameter in IBM WCM and how it is related to the Plugin RenderParam?

Enterprise Development, IBM Web Content Manager No Reply

Today, while I was reading the IBM WCM plugins documentation I found a plugin called The render parameter plug-in, which definition is formally:

Use the RenderParam rendering plug-in to access public and private render parameters from your web content.

Taken from The render parameter plug-in article in IBM Knowledge Center.

So, these questions came into my mind:

what is it considered a “render parameter”?
Any example or use case?

I asked these questions in our Slack Base22 channel, and here is what I got:

Technical Definition

Render Parameters are a Portlet 2.0 (JSR286) feature that allow for coordination between portlets and are useful for building composite applications out of portlet components. Portlet 1.0 only had the portlet application session scope for coordination (only usable within one portlet application, not across portlet applications). 2.0 introduced public render params providing greater ability for cross-portlet communication. IBM describes them as follows:

Public render parameters allow JSR 286 portlets to share navigational state information. They are specially useful for coordinating the multiple navigation or viewer portlets that display different information items that are all related to the same parameter name. The portal stores all portlet render parameters, including public render parameters, as an encoded part of the current portal URL. Therefore, public render parameters are correctly preserved by typical browser navigation actions such as the Back button and bookmarking.

Taken from Public render parameters article in IBM Knowledge Center.

Here is a conclusion, given by Cody Burleson:

My guess, therefore, is that the plugin allows you to intercept (parse) render parameters from the URL, which may have been sent to the page by some portlet on the same or another page. This was probably introduced most specifically in support of the Script Portlet.

The usefulness can be best understood from the example use cases found here in this article about Inter-Portlet Communication in IBM Script Portlet Using Public Render Parameters

In short: You can send data from one (IBM Script) portlet to another (even to another portlet on different portal page) and use the plugin in WCM to get a handle on the data that was sent.

Simple Possible Example: Script portlet 1 creates a menu. Script portlet 2 renders body of selected item. Content ID is sent from portlet 1 to portlet 2 via public render param.

Have you used this IBM WCM plugin? I will be glad to read more about it.

See you next time.

alex-arriaga April 16, 2018

How to use Plugin CopyText in IBM WCM 8.5 and 9

Enterprise Development, IBM Web Content Manager No Reply

The problem

Being able to process text using client code is useful for many reasons, for example: sometimes you want to cut text or extract specific patterns, etc. However, we usually have a issues because of special characters like line breaks (\n), let’s go back for a moment to remember how a well-formatted JavaScript variable looks:

var articleDesc = 'Description read from IBM WCM';

1	var articleDesc = 'Description read from IBM WCM';

As you see, previous variable is well-defined, everything looks good; but what happen if the “value” is something like this:

// Notice the line is broken because of a invisible "\n"
var articleDesc = 'Description read from IBM WCM
';

// Notice the line is broken because of a invisible "\n"

var articleDesc = 'Description read from IBM WCM

Previous variable definition is going to fail because \n character is not valid! you could answer, well lets’ use template strings… but those ones are not compatible with our “favorite” browser: Internet Explorer, so avoid the temptation.

The solution

Ok, now the question is: is there any feature of IBM WCM to clean those line breaks? Sure, there is, just add the CopyText plugin as in following block which is not intended for this kind of tasks but it works smoothly:

var articleDesc = '[Plugin:CopyText format="trim" escape="json" text="SOMETHING_THAT_CAN_HAVE_BREAK_LINES"][/Plugin:CopyText]';

1	var articleDesc = '[Plugin:CopyText format="trim" escape="json" text="SOMETHING_THAT_CAN_HAVE_BREAK_LINES"][/Plugin:CopyText]';

For example, let’s imagine we are reading the description of pieces of content:

var articleDesc = '[Plugin:CopyText format="trim" escape="json" text="[Property field='description' type='content' context='current']"][/Plugin:CopyText]';

1	var articleDesc = '[Plugin:CopyText format="trim" escape="json" text="[Property field='description' type='content' context='current']"][/Plugin:CopyText]';

After applying the plugin, no more break lines will make our front-end to be broken 🙂

var articleDesc = 'Description read from IBM WCM';

1	var articleDesc = 'Description read from IBM WCM';

That’s it for today, be happy with your code, see you soon!

alex-arriaga April 6, 2018

Fractal, an awesome library to generate documentation for style guides and components

JavaScript, Web Development No Reply

During the last four months I have been involved in creating UI Kits for a government, so part of my job is to document every single front-end asset (component) we generate. In the past I have worked with Assemble.io which is more an static site generator (something like Hexo) than a library for components documentation, in fact Assemble.io is kind of out-dated.

I started my search for a mechanism to create documentation for UI style guides and UI components, after some hours of investigation and testing I found this great library: Fractal, built as a NPM package (which is even better, because you can integrate it with a task runner like Gulp.js.

From the official guide from Fractal:

Fractal is a tool to help you build and document web component libraries, and then integrate them into your projects.

And it is true, I am glad I found this great tool which is working smoothly in my current workflow.

Do you want to see an example of an style guide and component library built using Fractal?

Visit Carbon Design System by IBM, all those pages (documentation) is built on top of Fractal. Impressive and beautiful.

Would you like to learn how to start with Fractal?

See the workshop available in Webtraining.Zone: Documentación de componentes con Fractal

See you next time.

alex-arriaga April 6, 2018

What is a namespace in JavaScript?

JavaScript, Web Development No Reply

There was a time when we didn’t have the power of ES2015 JavaScript modules to create applications; so, we had to invent a system to keep our code well-organized, avoid collisions in names, share functions among JavaScript blocks or files, etc. that is when the concept of namespace came into play in the JavaScript world.

For someone coming from Java language, the concept of namespace is basically the same as a Java package, that means is an unique “group of related code”.

How to implement it in JavaScript?

Simple, let’s imagine we are creating a chat application that has configuration (including predefined values), utility functions, etc.

(function(window){
	// 1) Verify no one has created the namespace before
	var Webtraining = window.Webtraining || {};
	Webtraining.chat = Webtraining.chat || {};

	// 2) Create your internal sets of functions or data
	var utils = {
		sendMessage: function () { console.log('Message sent'); }
	};	

	var configuration = {
		welcomeMessage : 'Hello there, how is everything going?',
		logo : '/img/logos/logo-chat.png'
	};

	// 3) Add your sets of functions or data to your namespace
	Webtraining.chat.utils = utils;
	Webtraining.chat.configuration = configuration;

	// 4) Expose your namespace into the global
	if( typeof window.Webtraining === 'undefined' ) {
		window.Webtraining = Webtraining;
	}

})(window);

(function(window){

// 1) Verify no one has created the namespace before

var Webtraining = window.Webtraining || {};

Webtraining.chat = Webtraining.chat || {};

// 2) Create your internal sets of functions or data

var utils = {

sendMessage: function () { console.log('Message sent'); }

};

var configuration = {

welcomeMessage : 'Hello there, how is everything going?',

logo : '/img/logos/logo-chat.png'

};

// 3) Add your sets of functions or data to your namespace

Webtraining.chat.utils = utils;

Webtraining.chat.configuration = configuration;

// 4) Expose your namespace into the global

if( typeof window.Webtraining === 'undefined' ) {

window.Webtraining = Webtraining;

}

})(window);

Previous code will expose the namespace Webtraining.chat in the window, and now you will be able to run:

Webtraining.chat.utils.sendMessage();
// It will print "Message sent"

1 2	Webtraining.chat.utils.sendMessage(); // It will print "Message sent"

As you see, you don’t need anything fancy or modern (like Webpack), it is just plain ES5 code. Easy and pretty isn’t it?

See you next time.

alex-arriaga April 6, 2018

What is semantic versioning?

Angular, Enterprise Development, JavaScript No Reply

Have you seen how a project like Angular is versioned? You have maybe noticed when a brand-new release of that framework is created they release it with three numbers, e. g. Angular 5.0.0, now the question is: what those three digits mean?

The answer is simple: they are using a system called Semantic Versioning or mostly know as Semver. In this version system the three digits have a meaning:

From the official homepage of semver we can read:

Given a version number MAJOR.MINOR.PATCH, increment the:

MAJOR version when you make incompatible API changes,
MINOR version when you add functionality in a backwards-compatible manner, and
PATCH version when you make backwards-compatible bug fixes.
Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

So, in our Angular example 5.0.0 means:

Angular 5.0.0 has breaking changes compared with 4.x.y
Angular 5.1.0 would mean a new feature was added to Angular 5.0.0
Angular 5.1.1 would say a bug was fixed regarding the features in 5.1.0

Awesome, isn’t it? Now you know it, try to use a versioning system for your own projects and if it is semver, much better.

alex-arriaga February 23, 2018

Nos vemos pronto mi preciosa, nos vemos pronto mi amor

Personal No Reply

Hoy es 23 de Febrero del 2018, estás a dos días de cumplir un año más de vida, agradezco al universo por ponerte en mi camino, este va a ser de los pocos artículos que escribiré en español en este lugar, mientras me sea permitido tener uso de razón.

He querido dedicarte estas palabras en el idioma terrenal que mejor conozco, hoy no estás aquí conmigo y te extraño, te extraño mucho, sé que la distancia física es mucha, pero la distancia emocional es nada entre nosotros.

Te he dicho muchas veces que el amor para mi no es sólo un sentimiento, representa algo mucho más grande, algo que puede transcender dimensiones, que hasta la dimensión temporal le tiene miedo.

Algo intangible; algo que quizá nunca podremos comprender con las leyes físicas que nuestro raciocinio alcanza a discernir hasta hoy.

No sé cómo explicar toda la emoción que me da verte cuando regreso, es simple, es bello, supongo que eso es felicidad. No sé que nos depara el futuro, pero sé que hay cosas muy grandes por vivir juntos.

Espero verte en mi siguiente vida, espero que nos volvamos encontrar. Sé que nuestro tiempo juntos aquí y ahora serán sólo algunos años; pero sabes qué… estos años han sido de los mejores que he tenido y espero estar a tu lado muchos más.

Creo que lo que llamamos alma, es algo inmortal y mi alma de alguna forma te encontrará, dentro de 100, 500 o 10,000 años. Estoy seguro, que nos volveremos a sentir como si ya nos conociéramos desde mucho tiempo antes.

¿Te acuerdas cuando estuvimos sentados frente al mar y vimos la arena donde te dije que si la vida se me acababa antes que a ti, ahí me gustaría que se quedaran la mitad de mis cenizas y la otra mitad en la tierra donde nací? Pero mientras ese día llega, voy a hacer todo lo que esté en mis manos para hacerte feliz…

Esa imagen la tengo presente en estos momentos, tu, la inmensidad del mar y yo, recuerdos que atesoro, recuerdos que llevaré conmigo en lo más profundo de mi ser.

Nos vemos pronto, mi preciosa, nos vemos pronto mi amor…

alex-arriaga February 20, 2018

How to Install Node.js on CentOS 7

Enterprise Development, GNU/Linux, Node.js No Reply

The Problem

Today, I was testing the new Angular 4 Scripting Application sample provided by IBM as a starting point for creating Script Portlet based Apps. However, my development environment is a CentOS 7 computer, and I usually don’t work with Node.js in that computer, so here the simple steps to install Node.js in a CentOS 7 machine, let’s proceed:

The Solution

Since CentOS 7 uses RPM as the package manager by default (CentOS is basically the open version of Red Hat Enterprise Linux or RHEL), the easiest way to install Node.js is following the instructions in the official Node.js documentation.

Step 1. Download the installation binaries of the Node.js version you are interested in, in my case I wanted to have the latest stable version or long term support (LTS) which is version 8.x:

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -

1	curl --silent --location https://rpm.nodesource.com/setup_8.x \| sudo bash -

Step 2. Proceed to install

sudo yum install -y nodejs

1	sudo yum install -y nodejs

Step 3. Check the installation was successful

node --version

# You will see something like
v.8.9.4

node --version

# You will see something like

v.8.9.4

If previous command gives you the Node.js version, you are all set. You also have npm so you can continue building awesome apps.

That’s it!

Hope you find this information useful, see you next time and remember be happy with your code.

alex-arriaga February 15, 2018

Enable CORS in a Node.js Application

Enterprise Development, Node.js No Reply

The Problem

So… you are creating an awesome Single Page Application with your favorite front-end framework (Vue.js, Angular, etc…) you need to connect your app with an external service; you have selected a JavaScript library to make the AJAX calls (like Axios), everything seem to be perfect, you create your method to get the remote data with something like this:

var serverURL = 'http://example.com:3000/my-rest-api-end-point-to-get-data';
var _this = this;
var configAxios = {
    url: serverURL,
    method: 'get',
    responseType: 'json',
    data: {},
    headers: {}
};

// Getting information using Axios library
axios.request(configAxios).then(function(response) {
    console.log(response);
    _this.myData = response.data;
});

var serverURL = 'http://example.com:3000/my-rest-api-end-point-to-get-data';

var _this = this;

var configAxios = {

url: serverURL,

method: 'get',

responseType: 'json',

data: {},

headers: {}

};

// Getting information using Axios library

axios.request(configAxios).then(function(response) {

console.log(response);

_this.myData = response.data;

});

And suddenly, your app is broken, why? If you go to the console, you will see an error similar to this one:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access. The response had HTTP status code 401.

The Solution

Because of security, you cannot request resources that are not in your domain (same server, same port). The solution is quite simple:

You need to authorize the origins that can make this type of calls.

This authorization is known as enabling CORS, this operation needs to be done in your SERVER. Here is an example using an Express.js application, see step 3 in the comments:

const express = require('express');
const app = express();
const path = require('path');
const server = require('http').createServer(app);

const morgan = require('morgan');
const bodyParser = require('body-parser');

const port = process.env.PORT || 3300;

const pollsRouter = require('./api/routers/polls-router');
const pollsService = require('./api/services/polls-dummy.service');

// 1. Morgan middleware for logging
app.use(morgan('dev'));

// 2. Express static index.html file
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

// 3. Enable CORS on ExpressJS to avoid cross-origin errors when calling this server using AJAX
// We are authorizing all domains to be able to manage information via AJAX (this is just for development)

app.use(function(req, res, next) {
    // Instead of "*" you should enable only specific origins
    res.header('Access-Control-Allow-Origin', '*');
    // Supported HTTP verbs
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    // Other custom headers
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

// 4. Body parser middleware to auto-parse request body to JSON
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


// 5. Run the server
server.listen(port, () => {
    console.log('Server active on port: %d', port);
});

const express = require('express');

const app = express();

const path = require('path');

const server = require('http').createServer(app);

const morgan = require('morgan');

const bodyParser = require('body-parser');

const port = process.env.PORT || 3300;

const pollsRouter = require('./api/routers/polls-router');

const pollsService = require('./api/services/polls-dummy.service');

// 1. Morgan middleware for logging

app.use(morgan('dev'));

// 2. Express static index.html file

app.get('/', (req, res) => {

res.sendFile(path.join(__dirname, 'index.html'));

});

// 3. Enable CORS on ExpressJS to avoid cross-origin errors when calling this server using AJAX

// We are authorizing all domains to be able to manage information via AJAX (this is just for development)

app.use(function(req, res, next) {

// Instead of "*" you should enable only specific origins

res.header('Access-Control-Allow-Origin', '*');

// Supported HTTP verbs

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

// Other custom headers

res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

next();

});

// 4. Body parser middleware to auto-parse request body to JSON

app.use(bodyParser.urlencoded({ extended: true }));

app.use(bodyParser.json());

// 5. Run the server

server.listen(port, () => {

console.log('Server active on port: %d', port);

});

Simple and fast, I hope you find this useful for your implementations.

See you next time!

alex-arriaga February 15, 2018

How to set moment.js timezone when creating a date

JavaScript, Web Development No Reply

The Problem

Since Moment.js is a library that runs client-side, when you create a new date using it; the constructor will take the current user’s timezone. This is not convenient when you want to display a list of dates that don’t depend on the user’s browser.

Let’s see an example of this, imagine you have an URL with an event that will start on Feb 15th, 2018 at 7 PM in the GTM-6 timezone, following table will be correct ONLY if you are in the GMT-6 timezone! because it represents hours in several timezones around the world taking that timezone as the relative time. This can be confusing for an user in Spain or for a visitor from New York.

Zone	Time
America/Mexico_City	7pm CST
America/Bogota	8pm -05
America/Caracas	9pm -04
America/Lima	8pm -05
America/Guayaquil	8pm -05
America/Santiago	10pm -03
America/El_Salvador	7pm CST
America/Argentina/Buenos_Aires	10pm -03
Europe/Madrid	2am CET
America/Los_Angeles	5pm PST
America/Denver	6pm MST
America/New_York	8pm EST

Solution

Fortunately, Moment.js provides an out-of-the-box feature that allows to set the timezone we want to use when creating our original date, let’s see following code as an example:

var startDateAndTimeString = '2018-02-15 19:00:00';

// We set the timezone as a second parameter
var startDateAndTime = moment(startDateAndTimeString).tz('America/Mexico_City');

// Now, you could format your date to be displayed in different timezones
function formatDateToAnotherTimezone(anotherTimezone, startDateAndTime) {
 return moment(startDateAndTime).tz(anotherTimezone).format('ha z');
}

// This will get: 2am CET
var startDateAndTimeForMadridSpain =formatDateToAnotherTimezone('Europe/Madrid',startDateAndTime);

var startDateAndTimeString = '2018-02-15 19:00:00';

// We set the timezone as a second parameter

var startDateAndTime = moment(startDateAndTimeString).tz('America/Mexico_City');

// Now, you could format your date to be displayed in different timezones

function formatDateToAnotherTimezone(anotherTimezone, startDateAndTime) {

return moment(startDateAndTime).tz(anotherTimezone).format('ha z');

}

// This will get: 2am CET

var startDateAndTimeForMadridSpain =formatDateToAnotherTimezone('Europe/Madrid',startDateAndTime);

For this to work, please be sure you have loaded the Moment Timezone plugin.

That’s it! Awesome, isn’t it?

See you next time…

What would you like to know about?

Alex Arriaga

How to reset page navigation component to render the content items from first page in IBM WCM

The problem

The solution;

What is a render parameter in IBM WCM and how it is related to the Plugin RenderParam?

Technical Definition

How to use Plugin CopyText in IBM WCM 8.5 and 9

The problem

The solution

Fractal, an awesome library to generate documentation for style guides and components

What is a namespace in JavaScript?

How to implement it in JavaScript?

What is semantic versioning?

Nos vemos pronto mi preciosa, nos vemos pronto mi amor

How to Install Node.js on CentOS 7

The Problem

The Solution

Enable CORS in a Node.js Application

The Problem

The Solution

How to set moment.js timezone when creating a date

The Problem

Solution

Join me, have fun and learn!

Recent Posts

Recent Comments

Join me, have fun and learn!

Recent Posts

Day quote…

Recent Comments

Categories

Archives

Join me, have fun and learn!

Recent Posts

Archives

Recent Comments

Categories

What would you like to know about?

The problem

The solution;

Technical Definition

The problem

The solution

How to implement it in JavaScript?

The Problem

The Solution

The Problem

The Solution

The Problem

Solution

Join me, have fun and learn!

Tag Cloud

Recent Posts

Recent Comments

Join me, have fun and learn!

Recent Posts

Day quote…

Recent Comments

Categories

Tag Cloud

Archives

Join me, have fun and learn!

Recent Posts

Archives

Tag Cloud

Recent Comments

Categories