Кілька цікавих і корисних для веб-розробника # 19

    Доброго часу доби шановні хабравчане. За останній час я побачив кілька цікавих і корисних інструментів / бібліотек / подій, якими хочу поділитися з Хабре.
 
 

DC.js

 
Бібліотека розроблена дозволяє створювати чудові багаторівневі / масштабовані Кросплатформені графіки та діаграми з моментальним перерендерінгом при користувальницькому взаімосдействіі. За процес візуалізації відповідає знаменита d3.js, а за аналіз багатовимірних наборів даних crossfilter.js . До речі кроссфільтр — проект відомої компанії Square.
 
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

 
Дуже цікавий проект від команди CartoDB. Скрипт дозволяє створювати інтерактивні історії з прив'язкою до певних локаціях. Всі оформляється за допомогою Markdown. Словами дуже важко описати, що робить Одіссея, тому краще побачити живий приклад .
 
 

Web Starter Kit

 
Web Starter Kit від Google — це такий великий конструктор / шаблон для кроссплатформенной веб розробки. У нього закладені кращі практики з Web Fundamentals та поради PageSpeed ​​Insights . Загалом там багато все корисного, в тому числі вже і «зібраний» складальник Gulp. За дві доби проект встиг зібрати майже 2500 зірок на GitHub.
 
 

Ouibounce

 image
Дуже цікавий скрипт з точки зору UX. Я пам'ятаю відносно недавно на Хабре в розділі «Я піарюсь» був пост про стартап, який дозволяє утримувати покупців в інтернет магазині. Наприклад, потенційний клієнт досить довго вивчав товар, але зрештою його курсор направляється до закриття вкладки. Сервіс визначає цей момент і запускає попап з пропозицією про СКіД. Ouibounce, звичайно ж, значно простіше, але ж сили opensource спільноти безмежні… смайл
 
 

Storage.js

Cвоеобразная обгортка для localForage від Mozilla. Storage — це асинхронне браузерні сховище з IndexedDB, WebSQL, localStorage, створене для «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

 
Самий витончений спосіб повідомити користувача про те, що його браузер застарів. Взагалі цей проект потрібно розцінювати як заклик веб-розробників мотивувати своїх користувачів оновити браузер, щоб все нам простіше жилося в майбутньому.
 
<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

 
 

 
 

Західні думки або що варто було б перевести на Хабре:

  
 

Наостанок:

 
     
  • Платформа для любителів аніме
     image
  •  
  • lazy-ads — дуже корисний скрипт для «ледачою подгрузки» всіх ваших банерів.
  •  
  • loadCSS — а це рішення для динамічної завантаження CSS від відомої Filament Group.
  •  
  • Octicons — іконочние шрифт від команди GitHub.
  •  
  • Videogrep — пошук по відео на Python.
  •  
  • webkit.js — повноцінний JavaScript порт WebKit.
  •  
  • mdwiki — JavaScript CMS / Wiki на Markdown.
  •  
  • HTTPie — command line HTTP client.
  •  
  • MotorCortex.js — ще одна (вже була AniJS) бібліотека для декларативного опису CSS анімацій
  •  
  • TraceIt — jQuery плагін, який вирішує тільки одну неординарну задачу — скевоморфічная обведення елементів.
  •  
  • MapBuildr — функціональний интрумент для створення Google Map, ще б таку штуку для Яндекс.Карт.
  •  
  • Penthouse — Critical Path CSS Generator, де critical path є найнеобхідніший CSS. Детальніше про це у статті CSS and the critical path . Ідеї ​​про продуктивність / оптимізації фронту пробираються все глибше.
  •  
  • es6features — репозиторій, в якому описуються всі фічі ECMAScript 6.
  •  
  • Реліз Dojo 1.10
  •  
  • Реліз Sencha Ext JS 5
  •  
  • JSNice — розумний і здатні навчатися деобфускатор для JavaScript, який виконуючи своє завдання, шукає відповідності в opensource проектах і намагається відновити оригінальні назви змінних.
     
     
  •  
 
                                                          Попередня добірка (Випуск 18)
 
Приношу вибачення за можливі помилки. Якщо ви помітили проблему — напишіть будь ласка в личку.
 
Спасибі всім за увагу.
 
  

    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.