I just modernized an application

Introduction

While following the buzz from IBMConnect16 remote I have been working in spare time on my Bildr project available on OpenNTF.

This time I have been focussing on improving the UI by adding more material design principles which should make it easier to distinguish content on a page. Beside that it is just good fun to work with UI sometimes it forces you to improve the back-end logic also.

Capture02

The image above demonstrates the display of related content on a single page where a profile contains lists of related documents.

NoSQL is a party

The following image demonstrates the information (e.g. categories) abstracted from a list of documents and on the right a random selected document from that list and showing some abstracted information from that document.

Capture04

Here you can see well IBM Notes works as a nosql database where documents are loosely coupled and may contain almost anything (well I try to avoid rich text). Especially in a rapid application development paradigm I like the flexibility of nostrict data structure at the time you start developing.

I have not heard much news about NSF from IBMConnect (Solr? Graph features? Performance improvements?) to make it competitive to other nosql options (why do I not see NSF back in this list?).

I hope IBM is aware of NSF’s image problem and admits steps need to be taken to improve it.

Bluemix

I am not sure what the next step for the app will be but I haven’t tried it on Bluemix yet, which could be interesting. The XGallery demo on YouTube shows some great potential.

 

Cards

Yesterday I received an email from Socialbiz UserGroup (I highly recommended to join this UG) with some updates regarding Bootstrap. Among one of the updates is the pre-announcement of Bootstrap 4. One of the main new features in BS4 turns out to be Cards.

Cards

Cards? What’s new about that? In my current development project I am using cards to display content in a container:

cards_design01

cards_design02

Components not Cards

And in a long ago blast (year 2002) we were already using cards:

philips_design

Material Design

Excuse me, by that time we called cards ‘components’. Heck we were even using Material Design principles with layered information:

philips_material_design

 

If you want to take a look at web design early 2000’s or you want to get inspiration how to set up a guide for your application developers  here is a link to a style guide.

Meanwhile I will be looking forward to the upcoming updates in Bootstrap 4. Nevertheless I welcome the ability to work with standardized definitions of cards =)

grouped cards

Links of interest

https://scotch.io/bar-talk/whats-new-in-bootstrap-4

http://iamkevinrhodes.com/top-5-bootstrap-4-features-coming-2015/

Applying some golden ratio to my XPages app

Introduction

A Friday XPages and beer tonight and I decided to tackle a beauty-contest problem I was confronted with earlier this week.

In an XPages application I am mixing material design principles and bootstrap together, more specific I am using the CSS grid system in Bootstrap to display collections of data in a tiled display format (better known as cards).

Golden ratio

Bootsrap enables me to make the tiled display responsive so for xs devices I display max 1 card per row, sm devices max 2 cards, md or lg max 4 cards. This works well for the width of a card BUT to make the cards look more aesthetic/ecstatic I want to apply some golden ratio or divine proportions.

Gold Bootstrap

First I thought to look if there is something available out there and I came along Gold Bootstrap, since I am already using Bootstrap, but this did not help me.

DIY

So I decided to pop open a beer and do it myself. This turned out to be rather simple… with the help of the responsive bootstrap toolkit.

The code below will check the viewport and depending on which viewport change the height style property of a card. Since I do not want large cards for xs and sm devices I set a width of 90 pixels then. For md and lg devices the cards may grow in size (width & height) but respect this golden ratio:

(function($, document, window, viewport){
$(document).ready(function() {
console.log(‘Current breakpoint:’, viewport.current());

if( viewport.is(“<md”) ) {
$( ‘.card-holder .list-item’ ).css( ‘height’, ’90px’);
}

if (viewport.is(‘>sm’)){
var firstCard = $( “.card-holder” ).first();
var firstCardWidth = firstCard.width();
$( ‘.card-holder .list-item’ ).css( ‘height’, (firstCardWidth/1.618) + ‘px’);
}
});

$(window).resize(function(){
console.log(‘Current breakpoint:’, viewport.current());
if( viewport.is(“<md”) ) {
$( ‘.card-holder .list-item’ ).css( ‘height’, ’90px’);
}
if (viewport.is(‘>sm’)){
var firstCard = $( “.card-holder” ).first();
var firstCardWidth = firstCard.width();
$( ‘.card-holder .list-item’ ).css( ‘height’, (firstCardWidth/1.618) + ‘px’);
}
});

})(jQuery, document, window, ResponsiveBootstrapToolkit);

As a result I get smaller cards in xs and sm devices:

gold-sm

and bigger cards in a 4 column layout on md and lg devices which resize really nice:

gold-lg

Now I just need to fill up this additional landscape on a card with some usefull information…