Some Useful and Interesting Things for Web Developers

Dear %username%,

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

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

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 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

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.

// 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

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.

     
Your browser is out-of-date!
     
Update your browser to view this website correctly. Update my browser now 
     
×

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

Useful Links

• A Hacker’s Guide to Git
• Everything You Need to Know About the CSS will-change Property
• Getting to know CSS Blend Modes
• Inside the Guardian’s CMS: meet Scribe, an extensible rich text editor
• Scoop: A Glimpse Into the NYTimes CMS
• Implement Custom Gestures
• What's Your Favorite Hack?
• Building a responsive SVG map
• Sharing Data Between Sass and JavaScript with JSON
• UX Crash Course User Psychology
• Brand = User Experience: The Interface Of A Cheeseburger

More

• Platform for anime fans
  
• lazy-ads is a really useful script for “lazy loads” of all your ads.
• loadCSS is a solution by Filament Group for loading CSS asynchronously.
• Octicons is an icon font by GitHub team.
• Videogrep is video search written in Python.
• webkit.js is a full-fledged JavaScript port of WebKit.
• mdwiki is JavaScript CMS/Wiki using Markdown.
• HTTPie is the command line HTTP client.
• MotorCortex.js is another (besides AniJS) library for declarative describing of CSS animations.
• TraceIt is jQuery plug-in that allows you dynamically trace page elements.
• MapBuildr is a functional tool for creating Google Maps
• Penthouse is Critical Path CSS Generator, in which path is the most necessary CSS. You’ll find more details about it in CSS and the critical path article.
• es6features is a repository that describes all ECMAScript 6 features.
• Dojo 1.10 Release
• JSNice is a smart and taught deobfuscator for JavaScript. When carrying out a task it looks for regularities in open source projects and tries to restore original names of variables.