Bootstrap 3 buttons

Just for myself not to forget - good constructor for bootstrap buttons with icons - http://www.bootsnipp.com/buttons

Lazy loaded list with infinite scroll in AngularJS

I've created small project on GitHub to demonstrate how to display lazy loaded list on the page with infinite scrolling of remote webservice results. Feel free to checkout / comment / participate / whatever else - https://github.com/maxaus/ng-lazy-load :) Run it with Grunt and you should get the same list of public events, retrieved from GitHub public API.

Make text in ExtJS GridPanel cell selectable

I suppose it one of the most annoying thing in great in general ExtJS framework, that user can't select and copy-paste text from the grid. To fix this for your users pleasure just add simple fix to gridPanel configuration

new Ext.create('Ext.grid.Panel', {
    title: 'My Grid with selectable text',
    // Here the fix comes!
    viewConfig: {
        enableTextSelection: true
    },
    ...

Calculating linear trend line for the chart components in JS

Display trend line is quite common problem while working with charts as front-end developer. Here I provide example of JS function for calculation linear trend line values and adding values to provided array of JSON values.

function(scores) {
    // Calculating the Slope (m) of the Trendline

    var count = scores.length;
    var ySum = 0, xSum = 0, xySum = 0, xSqSum = 0;
    $.each(scores, function( index, value ) {
        xSum += value.day;
        ySum += value.score;
        xySum += value.day * value.score;
        xSqSum += Math.pow(value.day, 2);
    });
    var slope = ((count * xySum) - (xSum * ySum)) / ((count * xSqSum) - Math.pow(ySum, 2));
    // Calculating the y-intercept (b) of the Trendline

    var yIntercept = (ySum - slope*xSum) / count;

    $.each(scores, function( index, value ) {
        value.trend = (value.day * slope) + yIntercept;
    });
};

Correctly display of negative ranges on ExtJS bar graphs

Bar graphs from Sencha ExtJS are great, but not without challenges for developers:) On of such issue I found during building graph with both, positive and negative, ranges. For example, your values are in the range [-100, 100].  In this case default behaviour of bar chart will be to have bars drawn from "zero" vertical line, but you need to be drawn from -100. My solution was to change values first to be "actualValue+100" (always positive in our case) and then make labels display correct value, it's done with customized render function:

axes: [{
        type: 'numeric',
        position: 'bottom',
        fields: 'score',
        minimum: 0,
        maximum: 200,
        majorTickSteps: 4,
        renderer: function (v) {
            // Make axis label display correct actual value
            return v - 100;
        }
    },
    ...

Crossbrowser solution to copy canvas elements

Sometimes you need to clone exisitng canvas elements to the new place, keeping its content. Solution for this problem is simple, but for IE additional workaround should be implemented, as always:)

/**
 * Copy canvas element image content.
 * @param oldCanvas old canvas element
 * @param newCanvas new canvas element
 * @param document current window document
 */
copyCanvas: function (oldCanvas, newCanvas, document) {
        if (oldCanvas) {
            try {
                // For IE browser replace canvas element with img with
                // source of old canvas, as drawImage causes
                // TypeMismatchError
                var agent = window.navigator.userAgent;
                // Check for both, IE11 and older versions
                if ((agent.indexOf('MSIE ') > -1) || (agent.indexOf('Trident/') > -1)) {
                    var oldImage = oldCanvas.toDataURL();
                    var img = document.createElement("img");
                    img.src = oldImage;
                    $(newCanvas).replaceWith(img);
                } else {
                    var context = newCanvas.getContext('2d');
                    context.drawImage(oldCanvas, 0, 0);
                }
            } catch (e) {
                console.log(e.name);
            }
        }
    }

Sample app on modern Java and JS stack

I'm ready to announce that started open project with sample application, having Java EE stack on backend (including Spring and build up with Gradle) and AngularJS on front-end part. Now it uses embedded HSQLDB storage, but will be migrated to MongoDB. Checkout: https://github.com/maxaus/ee-grad