Dear %username%,

I have recently come across several interesting and useful tools/libraries/events I would like to tell you about.

DC.js


DC.js
This library allows creating great multi level/scalable cross-platform charts and diagrams providing instant feedback on user's interaction. A popular d3.js is in charge of the viewing process. crossfilter.js deals with the analysis of multi-dimensional data sets.

chart.renderlet(function(chart){
    // smooth the rendering through event throttling
    dc.events.trigger(function(){
        // focus some other chart to the range selected by user on this chart
        someOtherChart.focus(chart.filter());
    });
})


Odyssey


Odyssey
Is an extremely interesting project by CartoDB team. The script allows creating interactive stories attached to specified locations. You can design all of that with the help of Markdown. Odyssey is really great and I can’t describe it to you enough. You’d better look at the online example.

Web Starter Kit


Web Starter Kit
Web Starter Kit by Google is a big template for cross-platform web development. It includes the best practices from Web Fundamentals and PageSpeed Insights advices. Web Starter Kit has plenty of useful things, including the already “built” Gulp. In 48 hours this project got almost 2500 likes on GitHub.

Ouibounce


Ouibounce
It’s a very interesting script from UX point of view. I have recently read an article about startup that allows keeping customers online at online store. For example, a potential customer has been scrutinizing some product for a while and now his cursor is moving towards closing the window. The service determines this moment and triggers a community popup with a discount offer. Ouibounce is definitely simpler, but open source community powers are infinite…

Storage.js

Is a peculiar wrapper for localForage by Mozilla. Storage is an asynchronous browser repository with IndexedDB, WebSQL, localStorage that is created for better offline experience.

<script src="storage.js"></script>
<script>window.storage('key', fn);</script>

// set
storage({ key: 'val', key2: 'val2'}, function(err) {});

// get
storage('key', function(err, val) {});
storage(['key', 'key2'], function(err, all) {}); // all.length == 2

// count
storage(function(err, count) {}); // count == 2

// delete
storage('key', null, function(err) {});
storage(['key', 'key2'], null, function(err) {});

Outdated browser


Outdated browser
It’s the most elegant way of notifying a user that his browser is outdated. This project should be considered as web-developers’ appeal motivating users to update the browser for better experience.

<script src="outdatedBrowser.min.js"></script>
<style type="text/css" src="outdatedBrowser.min.css"></style>
<div id="outdated">
     <h6>Your browser is out-of-date!</h6>
     <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a></p>
     <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">×</a></p>
</div>

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
//call plugin function after DOM ready
addLoadEvent(
    outdatedBrowser({
        bgColor: '#f25648',
        color: '#ffffff',
        lowerThan: 'transform'
    })
);

Spin.js


Spin.js

Useful Links


More

0 comments

Read Next