The past 1.5 years I’ve been working exclusively with Web Components and specifically Polymer. The more I use this technology the more convinced I am that this is the technology I should be using. Now, I’m not saying that Web Components and Polymer are hammers and every problem/project is a nail. However it’s quite refreshing that Polymer’s goal is to make itself irrelevant. What does that mean, Polymer is there temporarily until the browsers decide upon common standards and implement those standards. Which, they’re doing. The Custom Elements 1.0 spec has been released. As far as complimentary technology goes, I’m still a little on the fence about which technologies are the

close

The past 1.5 years I’ve been working exclusively with Web Components and specifically Polymer. The more I use this technology the more convinced I am that this is the technology I should be using. Now, I’m not saying that Web Components and Polymer are hammers and every problem/project is a nail. However it’s quite refreshing that Polymer’s goal is to make itself irrelevant. What does that mean, Polymer is there temporarily until the browsers decide upon common standards and implement those standards. Which, they’re doing. The Custom Elements 1.0 spec has been released. As far as complimentary technology goes, I’m still a little on the fence about which technologies are the

Read more

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