now-confirm-dialog an OpenSource element

We needed a means to produce a “pretty” confirm dialog instead of the old and busted default JavaScript confirm dialog. While the JavaScript confirm dialog is functional and probably provides more functionality than this one, we’ve found this meets our needs quite nicely. For reference, here is a default JavaScript confirm dialog. This shows up centered right under the address bar:

Here is our our now-confirm-dialog which shows up in the center of the screen:

The goal of this element is to provide a simple confirmation dialog and then have the ability to do something based on which button the user clicked.

Continue Reading

now-context: Opensource Project

Happy New Year! Lately I’ve been working on ways to simplify and enhance the way in which we develop applications. I watched this video: The Reusable JavaScript Revolution which really got my brain working and trying to come up with a solution for Red Pill Now. One of the pieces of the application part of that project is a context element (now-context) that provides a few different features:

  • Performs and records all AJAX requests
  • Provides a basic PubSub system
  • Provides a basic Request/Response service
  • Provides a global variable to interact with the context

The entire idea here is to provide a communication channel similar to that found in Backbone/Backbone Marionette for application specific communication.

Continue Reading

Web Component Thoughts….

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.

Continue Reading

Work with Rich Text from DDS

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’

Continue Reading

A Polymer Avatar component

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 and have a background color that is the same throughout the system
  • If the person is not in the domino directory just show a person icon
  • Should be able to click the avatar and it should do something (i.e.

Continue Reading

Setting up a Polymer development environment

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:

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,

Continue Reading

sortablejs – Drag-n-Drop without jQuery UI

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.

Continue Reading

Polymer app-layout Elements

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> Continue Reading

Progressive Web App Summit – 2016

Here is the Live Stream for the Progressive Web App Summit going on now in Amsterdam. Enjoy!

 

Continue Reading

New Polycast is out!

Continue Reading