Tuesday, August 29, 2017

A gem from sockjs sources...

var area = that._send_area = _document.createElement('textarea'); 
... 
try {
    area.value = payload;
} catch(e) {
    utils.log('Your browser is seriously broken. Go home! ' + e.message);
}

Wednesday, May 10, 2017

Marionette Carousel


The amount of javascript frameworks increases every day, though the majority of projects implements angular, backbone or react. Searching for an example implementation for a foundation learning marionette I found TodoMVC. TodoMVC laverages examples of many recent javascript frameworks and provided the basis for marionette-carousel.
"Developers these days are spoiled with choice when it comes to selecting an MV* framework ...
To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today."

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


https://github.com/jbloemendal/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) {
     console.log(message.text);
  });
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/

Monday, August 8, 2016

Hippo Site Toolkit Scaffolding

Play framework, ruby on rails, grails and klein have it why hippo not? I'm talking about routing and centralized configuration adhering the design patterns don't repeat yourself and convention over configuration [1]. The main principle of Hippo CMS is the idea of letting the content determin the design and structure of code and website. Usually websites are driven by there menu / page structure, semantic URLs were implemented since people and search engines didn't like query parameters and url rewriting also is part of todays php implementations. Hippo CMS facilitates this principle due to a flexible hostname and url configuration, serving content via distinct urls, channels and websites. Theoretically speaking content can be mounted into any part of the website (facets, mounts), though from my point of view the content is not the main driver of the configuration model. The core of the configuration model are sitemap items like part of route based frameworks. Configuration freedom and flexibility provides with it the burden of maintainance if you create a trade of chart, I assume there is a beak even that at some point complexity becomes expensive, and outweights flexibility so you should always try to minimize complexity even if the model allows you to create complex inheritance structures.

Humans make mistakes and don't like repedetive error prone tasks, so I though I do the attempt to apply play frameworks routing and combine it with a component notation which indicates the basic structure of a website and provides a comprehendable overview of the main idea of the configuration model.

#HST scaffold example

#URL                   CONTENTPATH                          COMPONENTS
/                       /home                                home(header,&main(banner, doc),footer)
/contact                /contact                             &text(header,*main,footer)            
/simple                 /simple                              simple                                
/news/:date/:id         /news/date:String/id:String          news(header,*main,footer)             
/news                   /news                                newsoverview(header,list, footer)     
/text/*path             /text/path:String                    *text                                 
/text/content/*path     /text/content/path:String            *text 
 
You see the same url content path placeholders as play framework provides, combined with a c - function like notation that let's you create page component structures. From my point of view it is easier to comprehend a text tree view where components are in place instead of mapping a model in your head. The remaining head mapping part are pointers and references where you need to imagine aggregated components and structures, though the jcr model doesn't force you to abstract and reuse structures either. Initially you can create the configuration structure of your project and than scaffold your project by convention, hst-scaffold creates the respective component and tempate structure, pages, sitemap-items, freemarker templates, includes and java files. Where you just fill in the codes. Warning: the current status of the project is still experimental and not supported by Hippo. Additionally when you build a scaffold there is the hidden directory .scaffold created that saves a history of changes for possible rollbacks, default templates for java and freemarker files as well as a configuration file.

The other way around, the attempt of creating a scaffold from an existing project, is a challanging task. There is still work to do, I don't know if I will continue finishing the idea, depending on time and interest. Though basically it would allow you to compare configurations of for example acceptance and production enviroments and see what differences or changes are regardless of the hassle to compare xml files, jcr trees and directories.

If you like to join or reuse the code feel free to charm in, for details have a look at:

[1] https://github.com/jbloemendal/hst-scaffold

Monday, May 23, 2016

Integrating Play Framework & Hippo CMS

Some people ask if I advice using Hippo CMS, I work at Hippo so usually I say I do... but Hippo CMS is a content centric CMS which can be used for enterprise purposes where it maintains a lot content, if I say a lot content I mean minimum 100 documents. Given this situations I though what if you could combine the simplicity of play framework with the core strength and stability of Hippo CMS?

PlayHippo[1] is the attempt integrating Hippo Content Beans into PlayFramework, which let's you use your HippoBeans and Queries in Play Controllers.

Add the following module dependency in your build.sbt:

resolvers += (
  "Play Hippo Repository" at "http://jbloemendal.github.io/play-hippo/releases/"
)

libraryDependencies ++= Seq(
  "org.onehippo" % "playhippo_2.11" % "1.1",
  ...
)

I have to say the RMI connector is not the most efficient way of connecting to Hippo CMS, you need to active RMI support[2].

Skipping an entire project setup from scratch, checkout the hippo demo project gogreen [3], which ships a project which you can use right from the start, you don't have to do anything. If you want to remove features which you can't use comment out the HST site deployable and channel manager dependencies:

cms/pom.xml
<!--dependency>
<groupId>org.onehippo.cms7</groupId>
<artifactId>hippo-addon-channel-manager-frontend</artifactId>
</dependency-->
<!--dependency>
<groupId>org.onehippo.cms7</groupId>
<artifactId>hippo-addon-channel-manager-repository</artifactId>
</dependency-->
 pom.xml 
<!--deployable>
<location>${project.basedir}/site/target/site.war</location>
<type>war</type>
<properties>
<context>/site</context>
</properties>
</deployable-->
 
Activate RMI connections by adding these lines to your cms/src/main/webapp/WEB-INF/web.xml file:
<context-param>
  <description>The address of the repository</description>
  <param-name>repository-address</param-name>
  <param-value>rmi://localhost:1099/hipporepository</param-value>
</context-param>
<context-param>
  <description>The address of the repository</description>
  <param-name>start-remote-server</param-name>
  <param-value>true</param-value>
</context-param>

Build and start hippo gogreen

mvn clean verify
mvn -P cargo.run

PlayHippo [1] contains an example play project, using the PlayHippoTool Service[4]. Clone or download PlayHippo, use the activator and run the project.

./activator
run 

Now you should be able to access hippo content from your play project, for example view a HippoFacetNavigation http://localhost:9000/content/documents/gogreen/newsfacets/, add your own hippo document beans [5], create some hst queries.

This article should provide a starting point and ideas which you can integrate in your own project. To get it going just add the PlayHippo dependency like described. In a production usecase ensure you configure your own credentials.

conf/application.conf
hippo.rmi.uri = "rmi://localhost:1099/hipporepository"
hippo.rmi.user = "admin"
hippo.rmi.password = "admin"


[1] https://github.com/jbloemendal/play-hippo
[2] http://www.onehippo.org/library/concepts/content-repository/repository-deployment-settings.html
[3] http://www.onehippo.org/binaries/content/assets/connect/trails/developer-trail/hippo-10.2/gogreen-iteration-2-3.2.0.zip
[4] https://github.com/jbloemendal/play-hippo/blob/master/app/controllers/HippoController.java
[5] https://github.com/jbloemendal/play-hippo/blob/master/app/model/HippoGoGreenNewsDocument.java