Tuesday, March 21, 2017

Frontend Work Samples

Two new sample projects emerged into my github repositories collections:

Angular Jukebox (github)

Angular Jukebox is a fork from arey/angular-musicbrainz. Arey implemented a music search client querying an elasticsearch instance, that you install on your local device or connect to a default service. The implementation serves data from musicbrainz: artists, albums and meta data. I replaced elasticsearch service, changing the service to query data from the spotify web api eddiemoore/angular-spotify.

Geek Label (github)

Geek Label is a simple sample for one page scrolling sites, describing the services of a pseudo company called "Geek Label". Given the design, the implementation provides page slides. It is enhanced by jquery, elegant icon font animating the scolling and MargotFF. The project can be a template for small companies.

Friday, March 17, 2017

jQuery Simple Websocket

Why implementing a websocket wrapper, you may ask. Because the current websocket api implementation is cumbersome, specifically handling errors asynchronously.
Let's assume you want to send a message and if the connection drops or the post failed you want to send the message again, it requires you to implement this by yourself:

"As establishing a connection is asynchronous and prone to failure there is no guarantee that calling the send() method immediately after creating a WebSocket object will be successful. We can at least be sure that attempting to send data only takes place once a connection is established by defining an onopen handler to do the work." [1].
jQuery Simple WebSocket does this for you, it implements jquery deferreds for handling connection drops. For example send a hello message:
    webSocket.send({ 'text': 'hello' }).done(function() {
      // message send
  }).fail(function(e) {
      // error sending
Listening for a message is simple, jQuery Simple WebSocket reconnects automatically in case the connection drops due to for example bad mobile network:
     webSocket.listen(function(message) {
A few benefits of jQuery Simple WebSocket:
  • deferred handling of asynchrounous code, handles websocket reconnects and errors gracefully
  • json, xml and text payload
  • a fluent interface

[1] https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications
[2] https://github.com/jbloemendal/jquery-simple-websocket
[3] http://jbloemendal.github.io/jquery-simple-websocket/