Monthly Archives: November 2014

Kafka & Storm integration talk

This June I had the pleasure of attending the annual DORS/CLUC conference in Zagreb. It’s a convention for the Croatian Linux users group devoted to open systems in general. There was a bunch of interesting talks but my favorite of the day was definitely Mario Borna Mjertan, an elementary school student that’s been using Linux (as a user and as a developer) for 6 years already. Talking about a real interest in computers 🙂

Also, I had the pleasure of talking about integrating Kafka & Storm at my dev shop. The basic idea was to build a system that can process incoming data stream (in the range of about 5,000 events per second) and build end user dashboard data (trends, current submit rate etc.) in near real-time. In the talk I gave a short intro to the technology stack and basic concepts but also an overview of bottlenecks and issues we experienced along the way.

Below you can find the video of the talk:

And the related slides:

Video can also be found here.

Tagged , , , , , , ,

jQuery UI slider for dynamic content

On one of the projects I’ve worked on, we used jQuery UI slider for dynamic content. The slider’s handle needed to resize according to that dynamically loaded content.

The main issue was that with the usual suggested ways to do it, there was a jump for first mouse initiated movement on the slider. That rather ugly behavior is related to the slider’s requirement that the slider bar and handle parent must be of same width[1]. That, in combination with the requirement to give the handle a half margin offset[2] due to handle sizing, causes that ugly jump to occur.

This is how the default setup looks like:


You can see that the bar and the handle parent are of the same size. Slider is initialized on bar element.

The fix is rather simple. Instead of initializing the slider on bar element, do it on ui-handle-helper-parent. Then you can size that element as needed, and the slider does not exhibit the ugly jump. The ui-handle-helper-parent element needs to be centered in bar and a bit of custom styling is needed, but in the end it works nicely. This is how the setup looks like after the fix:


Due to peculiar sizing of the ui-handle-helper-parent element, another fix was needed as well. When clicking on the area of bar element that the ui-handle-helper-parent element doesn’t cover, the slider value needs to be recalculated and set accordingly. All of these changes and fixes are packaged in the DynamicSlider[4] component and there is a working example[3].


  1. Jquery UI Scroll Bar not fitting the contents
  2. jQuery UI slider jumps
  3. A working example @ CodePen
  4. The gist of the example
Tagged , , ,