• Multi-character Google Maps cluster marker labels

    Multi-character Google Maps cluster marker labels

    Turns out Google Maps API does not allow for more than a single character on marker labels (everything past the first character gets trimmed). Not even stackoverflow was able to provide me with a good way of going around this (take a look at this and this). So, a little digging was required…

    Fortunately, folks who made google-maps-clustering-csharp were able to go around this restriction by implementing a custom “label element” through prototyping the OverlayView element and then using it instead of a string for Marker’s label property. I extracted and cleaned up the code from their MVC application. What’s left is all you need to render markers that support multiple characters (feel free to break it into multiple files – perhaps a service and a controller if you’re using AngularJS or something similar):

    And this is the CSS that’s needed to make it all work (you can find the cluster icons here):

    Cheers!

  • Detecting no-Internet / user-offline in Angular

    Detecting no-Internet / user-offline in Angular

    Sometimes, a user might find himself disconnected from the Internet after he already got to your page. Given the nature of SPA apps, this situation might not be very obvious to the user at first and he might end up thinking that the “site doesn’t work”. If the user goes offline after he already landed on your AngularJS site, the back-end API’s won’t be accessible any more but all the client-side stuff will still remain loaded if the user does not refresh the page. The problem is – because the page is still visible and some events still respond to his input, he might not notice (or even understand) what actually happened.

    This may result with a call from your client. :) To prevent having to explain the whole situation, it might be easier to handle this situation in advance. For example, you could detect if the user is offline and then redirect him to a “warning” or an “error” page (you might want to precache the error page template upon page load).

    There is a very simple way in AngularJS to detect whether the user is disconnected from the Internet or not. Simply use/attach the following http-request-interceptor to your app.

  • Contributing back – InfluxData.Net NuGet

    Contributing back – InfluxData.Net NuGet

    On project that I currently work on in Dovetail, we’re using the InfluxDb time-series database. And it’s a really cool thing to be working with.

    Recently we had to move to a newer version of InfluxDb and the library that we were using at the time became a bit stale and didn’t support the newest version of InfluxDb (v0.9.6) which we had to move to. So, partially out of necessity, and partially “because I can” and wan to, I decided to update the currently existing library and then re-release it as a NuGet package under a slightly different name.

    *drumroll* – the code for the InfluxData.Net NuGet is available on Github. It already had a few code contributions which is quite exciting. The whole codebase has been refactored, additional tests written and I believe that the codebase is now quite stable. I plan on expanding the library API to support most of the stuff that InfluxDb provides, and I also plan on implementing the API’s for other InfluxData products such as Kapacitor and Telegraf.

    If people keep using it in the future, I’ll consider it a success and it will make me happy. :)

  • Loading embedded resource images into PdfSharp/MigraDoc for non-web projects layers

    Loading embedded resource images into PdfSharp/MigraDoc for non-web projects layers

    There are some cases (for example on Azure) when you can’t really rely on ASP’s Web-layer file resources or “server paths” and file management libraries to access your static resource files. For example if you have a business layer which doesn’t really have a direct access to another layer’s files but you need to generate a PDF using PdfSharp/MigraDoc inside that layer.

    How it can be done is – you need to add an image file to your layer, then right-click on it and go to it’s properties. There you need to set the “Build Action” to Embedded Resource, and the “Copy to Output Directory” to Copy if newer. After that, use these three simple methods to load up the image from the assembly into a Stream, convert it to a byte[] array and then encode it as a base64 string.

    By using the base64 representation of the image, you will be able to embed it into your PDF document.

    Cheers!

  • Pre-caching HTML templates with AngularJS ui-router directive

    Pre-caching HTML templates with AngularJS ui-router directive

    Unless you’re using gulp-angular-templatecache (which you probably should) to bundle your HTML templates into an Angular Javascript module, you might in some cases want to pre-cache certain HTML files. For example if you have a specific “error page” HTML template used to display a specific error message telling the user he lost his Internet connection. If you don’t pre-cache such a template, your Angular app won’t be able to fetch it from the server (because the browser is obviously off-line) and as a consequence it will be unable to display this important message.

    If you’re using ui-router, there is an easy way to pull the template from the server before it’s even used. I like having an abstract root state which I setup in my app.config() (inside app.js) to kind of abstract my base layout. Views from this root state can then be overridden by any child state which is very handy for having a few different types of layouts. For example, some with a sidebar, some without, etc.

    The cool thing about the abstract root state is that it will fetch all templates specified inside its views property even if they’re not used right away and it will put them into Angular’s template cache. The next time any of our child ui-router states requires one of these cached templates, it won’t make a request against the server but it will simply reuse the cached template.

    You can use this simple trick to if needed cache any other templates as well. Obviously don’t overdo it because you want to make the smallest amount of initial requests you can to speed-up the loading time. Or even better – use angular-templatecache, it’s wonderful. :)

    Cheers!

  • Global day of code retreat – Dublin, 2015

    Global day of code retreat – Dublin, 2015

    Yesterday I went to a very fine event organized by folks from Intercom here in Dublin. It was the global day of code retreat which is organized in many cities around the world. Initially I got interested because the topic of this years code retreat was Conway’s Game of Life which I had my eye on for some time now but the whole event turned out to be a really pleasant experience.

    The idea is very simple:

    • try to solve a simple problem – Game of Life in this case
    • do it with a partner for 45 minutes
    • add some kind of restrictions to make it more interesting and consider different approaches
    • you don’t really need to implement the whole thing
    • reflect on the session and wipe your code at the end of each one

    We ended up doing 5 or 6 sessions, each with a different person. What’s interesting is that the whole event wasn’t really about the Game of Life but the Test Driven Development approach. Usually one person would write unit tests, and the other one would work on the implementation of Game of Life rules. The restrictions that were placed on us were: use only primitive types, use only objects, do not talk to your partner (apparently everyone’s favourite)… It ended up being funny that my “silent session” partner didn’t really think it through nicely so he wrote his first unit test in such a way that I basically had to make the whole thing work before the first test passed. He realized it and later on added tests with smaller increments. :)

    What I really liked about the coding sessions was pair programming. This was my first real exposure to it and I loved it, I think it’s a great approach to coding. I felt like my concentration was boosted and that I was somehow more motivated because I was coding with someone else on the same thing at the same time. It also felt a bit more safe/secure because both people get to complement each others ideas and code. In general is timply felt more productive than programming on your own.

    It seems that everyone ended up doing all their stuff in Javascript because it turned out to be the most common language between the participants. I believe we all used tryjasmine which makes it really easy to write both the implementation and unit tests (in Jasmine JS testing framework) in browser with literally zero configuration. That’s quite handy for an event such as this.

    We got treated very well – organizers fed us, shoved coffee down our systems and even invited us for pints in a nearby pub afterwards. I got to meet some new, interesting people which was nice. Considering all of this, I was a bit surprised that only 7-8 people actually showed up for the event although it was a stay-late-in-bed kind of Saturday.. But whatever!

    I enjoyed it. Would come again. :D

    Thanks organizers!

Back to top