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 accompanied 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, adds an awesome API and cool animations.

Screenshot of maTooltip.com

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 has grown too old. 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?

Contact me and ask for it.

Front end client

Is written in TypeScript. As so, it was an easy task for me to honor object oriented best practices. One being that a class must only do one thing. Separation of concerns coupled with extensibility and customization was my chief design goal. I consider the web client as a success in this regard. One example is that the only class (yes! Using TypeScript I can talk about classes!) that manages how-to put or read chat messages from the HTML page is a message controller. Thus restructuring the already miniature DOM layout can at best require a minor modification of this class, or in a worst case scenario, will require that you write a new controller.

My own site do extend the behavior of maLivechat using maTooltip to display a warning message if the user tries to send an empty message. 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 non obscured version of the script right here.

Screenshot of maLivechat web client

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. This way, I reduce dependencies and I increase the utility of my JPA (Java Persistence API) entities as small units of functionality instead of just dealing with them as boring DTO:s (Data Transfer Object).

The centerpiece of the business tier is two brokers who transfer users and messages around in the live chat system. The brokers are implemented as a @Singleton EJB (Enterprise JavaBean) with bean managed concurrency. The user broker connect users together and manages their life cycle. He also manages the queue a web user can be put in. The message broker deals with messaging either explicitly or implicitly. As per the implicit part, there are some cross-cutting concerns the broker tap into in order to properly inform affected endpoints.

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 is 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.

Screenshot of maLivechat app client

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 look 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.

I'm always working on a new certification. Today I'm waiting for Oracle to release a new Java EE 7 certificate, once they do I'll grab my third from them. Given that every single Java EE book on the market is pure crap, I've always been thinking about writing my own book. One that is not a copy paste from Wikipedia with added insecure sentences driving the computer science student insane.