So you’ve created your shiny new web application using DDS and everything is really cool, except for the display of rich text. You’ve figured out that there is a multipart MIME object in the JSON delivered by DDS, and it has the HTML in that, but it still looks crappy. It has tags littered throughout and just doesn’t look good. Well, I think I’ve got the solution for you. If you look at that multipart MIME Object and find the ‘text/html’ entry you’ll notice a ‘contentTransferEncoding’ property that equals ‘quoted-printable’ or maybe ‘base64’.  There’s the cause of your html display issue. You need a decoder for those 2 encoding types. Now, let’s

close

So you’ve created your shiny new web application using DDS and everything is really cool, except for the display of rich text. You’ve figured out that there is a multipart MIME object in the JSON delivered by DDS, and it has the HTML in that, but it still looks crappy. It has tags littered throughout and just doesn’t look good. Well, I think I’ve got the solution for you. If you look at that multipart MIME Object and find the ‘text/html’ entry you’ll notice a ‘contentTransferEncoding’ property that equals ‘quoted-printable’ or maybe ‘base64’.  There’s the cause of your html display issue. You need a decoder for those 2 encoding types. Now, let’s

Read more

At MWLUG a lot of people seemed surprised that I would create a component just for an avatar. My response to that is why wouldn’t you build an avatar component? So, in this post I’m going to show you how to build one for your applications. Let’s start out with the use case. We want to show an avatar for a person in various locations throughout our application. This avatar should do a few different things: Should show a picture of a person if one is attached to their person document If no picture is available and the person is in the domino directory should show the first letter of their first name

close

At MWLUG a lot of people seemed surprised that I would create a component just for an avatar. My response to that is why wouldn’t you build an avatar component? So, in this post I’m going to show you how to build one for your applications. Let’s start out with the use case. We want to show an avatar for a person in various locations throughout our application. This avatar should do a few different things: Should show a picture of a person if one is attached to their person document If no picture is available and the person is in the domino directory should show the first letter of their first name

Read more

Posted in Polymer

When working with Polymer you’ll need a development environment. Google has created some great tools for doing this, mainly the Polymer-CLI. This is a command line interface for creating elements, applications, building applications (though I prefer a Gulp build system), a web server and some other misc. tools. This should be your starting point for setting up your development environment. To setup the polymer-cli you’ll need a few dependencies: Git Node.js (4.x) Bower Once those are installed you can just use npm to install the polymer-cli: npm install -g polymer-cli Now to use the polymer-cli, create a directory for your project. If you’re creating a custom element I’ve found it best

close

When working with Polymer you’ll need a development environment. Google has created some great tools for doing this, mainly the Polymer-CLI. This is a command line interface for creating elements, applications, building applications (though I prefer a Gulp build system), a web server and some other misc. tools. This should be your starting point for setting up your development environment. To setup the polymer-cli you’ll need a few dependencies: Git Node.js (4.x) Bower Once those are installed you can just use npm to install the polymer-cli: npm install -g polymer-cli Now to use the polymer-cli, create a directory for your project. If you’re creating a custom element I’ve found it best

Read more

Posted in Polymer

I had a need to enable drag-n-drop for a particular part of our portal. In the past I’ve always used jQuery-UI as it’s quite easy to enable drag-n-drop. Doing some research I came across a StackOverflow question about enabling drag-n-drop with Polymer. One of the answers mentioned sortablejs. This is a very minimalist library to enable drag-n-drop. Best part about this library is that it has a port for Polymer. BONUS! But there are several ports available: Angular, Knockout, Meteor, etc. So implementation is super easy: bower install –save polymer-sortablejs Then where you want to use it: <sortable-js draggable=”div” group=”divs”> <template is=”dom-repeat” items=”{{repeatableItems}}”> <div>{{item}}</div> </template> </sortable-js> This will enable all the

close

I had a need to enable drag-n-drop for a particular part of our portal. In the past I’ve always used jQuery-UI as it’s quite easy to enable drag-n-drop. Doing some research I came across a StackOverflow question about enabling drag-n-drop with Polymer. One of the answers mentioned sortablejs. This is a very minimalist library to enable drag-n-drop. Best part about this library is that it has a port for Polymer. BONUS! But there are several ports available: Angular, Knockout, Meteor, etc. So implementation is super easy: bower install –save polymer-sortablejs Then where you want to use it: <sortable-js draggable=”div” group=”divs”> <template is=”dom-repeat” items=”{{repeatableItems}}”> <div>{{item}}</div> </template> </sortable-js> This will enable all the

Read more

Posted in JavaScript, Polymer

Looking at the Polymer app-layout elements I have to say these are pretty cool! Some of it is old news because it was/is supported via the paper-drawer-panel, paper-header and paper-toolbar elements. However by taking the lessons learned with those elements and creating their “app” siblings I think it makes for a much nicer implementation. The basic use of the app-layout elements would look something like this: <app-drawer-layout id=”layout” narrow=”{{drawerClosed}}” fullbleed> <!– Drawer content –> <app-drawer id=”drawer”> <app-toolbar> <a href=”/view1″ top-item> <img src=”../images/Logo.png” /> </a> </app-toolbar> <div class=”drawerContent content”> <!– drawer content goes here –> </div> </app-drawer> <!– Main content –> <app-header-layout> <app-header scroll-target=”content”> <app-toolbar> <paper-icon-button icon=”menu” drawer-toggle></paper-icon-button> <div class=”flex” title>[[contentTitle]]</div> <paper-icon-button icon=”search” on-tap=”openSearch”></paper-icon-button>

close

Looking at the Polymer app-layout elements I have to say these are pretty cool! Some of it is old news because it was/is supported via the paper-drawer-panel, paper-header and paper-toolbar elements. However by taking the lessons learned with those elements and creating their “app” siblings I think it makes for a much nicer implementation. The basic use of the app-layout elements would look something like this: <app-drawer-layout id=”layout” narrow=”{{drawerClosed}}” fullbleed> <!– Drawer content –> <app-drawer id=”drawer”> <app-toolbar> <a href=”/view1″ top-item> <img src=”../images/Logo.png” /> </a> </app-toolbar> <div class=”drawerContent content”> <!– drawer content goes here –> </div> </app-drawer> <!– Main content –> <app-header-layout> <app-header scroll-target=”content”> <app-toolbar> <paper-icon-button icon=”menu” drawer-toggle></paper-icon-button> <div class=”flex” title>[[contentTitle]]</div> <paper-icon-button icon=”search” on-tap=”openSearch”></paper-icon-button>

Read more

Posted in Polymer

When developing modern web applications, we want to build components that are re-usable. The more reusable it is, the better. When things are re-usable we get a lot of benefits going forward with future applications, mainly speed of development. But we also get the ability to update a component in one place and the next update to any app that uses that component, we just get the new version. One thing that is pretty popular in Domino apps and some modern web apps is a picker. A list of items on the left which you select from, then move the things which are selected into another list on the right. With

close

When developing modern web applications, we want to build components that are re-usable. The more reusable it is, the better. When things are re-usable we get a lot of benefits going forward with future applications, mainly speed of development. But we also get the ability to update a component in one place and the next update to any app that uses that component, we just get the new version. One thing that is pretty popular in Domino apps and some modern web apps is a picker. A list of items on the left which you select from, then move the things which are selected into another list on the right. With

Read more

Posted in Modernization, Polymer

For about the last 6 to 8 months I’ve been doing a lot of development using Polymer Web Components. I started with the 0.5 developer release version. My experience so far has been a little bitter sweet.  Using version 0.5 I had to jump quite a few hoops to get things working, but once I figured out the patterns all was well with the world. In the Beginning I had chosen to use Backbone Marionette for the MVC architecture for my apps. I already knew Marionette so I felt the logical choice was to stay productive and just use what I already knew and use the web components in my templates. If I

close

For about the last 6 to 8 months I’ve been doing a lot of development using Polymer Web Components. I started with the 0.5 developer release version. My experience so far has been a little bitter sweet.  Using version 0.5 I had to jump quite a few hoops to get things working, but once I figured out the patterns all was well with the world. In the Beginning I had chosen to use Backbone Marionette for the MVC architecture for my apps. I already knew Marionette so I felt the logical choice was to stay productive and just use what I already knew and use the web components in my templates. If I

Read more

It's been a while since I've posted here so… how about an end of year recap for anyone interested. Red Pill Development changed it's name to Red Pill Now with a whole marketing campaign around it I spoke at MWLUG and ATLUG I started messing around with Polymer Web components and think this is the way web development should be done. I did a couple of training sessions on Javascript and Backbone/Marionette Red Pill hired a creative director, Bob Kadrie and is contracting with a new developer from the JSF/Web Components/Javascript world, Kito Mann Red Pill became a Microsoft partner Red Pill redefined our Graph Database to be more relevant for analytics

close

It's been a while since I've posted here so… how about an end of year recap for anyone interested. Red Pill Development changed it's name to Red Pill Now with a whole marketing campaign around it I spoke at MWLUG and ATLUG I started messing around with Polymer Web components and think this is the way web development should be done. I did a couple of training sessions on Javascript and Backbone/Marionette Red Pill hired a creative director, Bob Kadrie and is contracting with a new developer from the JSF/Web Components/Javascript world, Kito Mann Red Pill became a Microsoft partner Red Pill redefined our Graph Database to be more relevant for analytics

Read more

Posted in Polymer, Rambling