maTooltip.com

Introduction

An open source JavaScript tooltip library. Unlike many modules out there, maTooltip provides only a small set of features and keep a focus on providing a rich API for the many needs of diverse front-end programmers. The accompanying site features all relevant documentation and a large count of demos.

Story behind

Given my own needs for a web site I once upon a time was working on, I could not find a plausible tooltip solution on the market. I adored the look and feel of the Twitter bootstrap tooltip, but the options provided are severely lacking. Indeed, there is no JavaScript API to begin with. maTooltip looks just like Twitter's solution, add an awesome API and cool animations.

maLivechat

Introduction

Inspired by Google Wave, my live chat software transmits each letter that the chat parties type, when they type. Thus chatting online using my software is transformed into something that reminds the user of a talk in real life. Of course, one party who do not want to live feed his typing may turn this feature on or off at will, even during an active ongoing conversation or message. The live chat software has built in customer queue support for when the help desk is too busy to respond. The user is simply put in line and will receive constant feedback for when his position changes. All communication goes through a WebSocket for blazing fast speed and responsiveness.

Above all, the protocol for message exchange has only user experience in mind. No name, email, registration, social security number or other dumb clicks are needed for the user to begin having a chat. In fact, nothing is required by the user. As soon as he has browsed his way to the magic URL, he is instantly connected with a person on the other end. If need be, the customer can always set his name or apply other settings during his ongoing chat by making an active choice to do so. This practice is very similar to an already established concept within the developer community called convention over configuration.

Before you continue, my software is up and running on this site. So why not give it a try and chat with me using either this window or a new window. Don't be shy, I love strangers!

Story behind

What inspired me to write the software was my own need for a lean live chat solution that I wanted to put on my personal web site. Most live chat solutions out there that I've looked at, reminds me of poorly managed companies that have grown too big. They do a bit of everything and each task they do suffers from poor quality. Littered with bureaucracy, they require the user to give up private information while going through multi-step registration processes. Customizing the visuals or behavior of an endpoint client is a pain in the ass and requires the programmer to spend at least half a year figuring out a proliferated API. Or accept a crappy product that looks like shit.

Want it?

Front-end client

Is written in TypeScript. Therefore, it was an easy task for me to honor object oriented best practices. One principle is that a class must have only one responsibility. Separation of concerns coupled with extensibility and customization was my chief design goal. I consider the web client as a success in this regard.

My own site does extend the behavior of maLivechat using maTooltip to display warning- and error messages. An extension of this kind can easily be done using nothing more than a neat API for registering callbacks. You can see for yourself how easy it is to initialize and extend maLivechat in the unobscured version of the script right here.

Back-end business logic

Written in Java EE 7. At the bottom of the business tier lies all persistence logic. I tend to favor fat models instead of outsourcing their logic to an explosion of other classes ("anemic domain model").

The heart of the business tier is two brokers who transfer users and messages around in the live chat system. The brokers are implemented as a @SingletonEJB (Enterprise JavaBean) with bean managed concurrency.

The web tier is a package of communication components. Different components are used during different phases and depending on the type of communication. Currently, only JMS (Java Message Service) and WebSocket transferring JSON data is supported. Besides connection and communication, the web tier also houses a Servlet that responds to queries for the server status.

Help desk application client

Written in JavaFX. I prefer to use FXML files for the layout of nodes. Moreover, I break down the layout to custom domain components. To provide you with an example, have a look at the next screenshot. A chat conversation, that is each Tab in the TabPane, and each message row in that conversation is different components that are loaded from different FXML files and coupled together with different controllers.

One cool thing about the application client is that it may be launched directly from the server using JNLP (Java Network Launch Protocol). Read more here.

Work in progress

maLivechat needs some more features before I can make some kind of release out of it, file transfer being one. I also plan on writing a mobile help desk client using either PhoneGap or a native app for Android if PhoneGap doesn't support all technologies that I need. Then I'm going to finalize maMenu; a TypeScript menu system that looks and behave just like the menus Facebook uses. My live chat web client's "more" button uses a beta version of maMenu. Then I'm going to rewrite maTooltip in TypeScript and add some stuff in there too.