- PVSM.RU - https://www.pvsm.ru -
Доброго времени суток уважаемые читатели. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
[1]
Бибиотека позволяет создавать великолепные многоуровневые/масштабируемые кроссплатформенные графики и диаграммы с моментальным перерендерингом при пользовательском взаимосдействии. За процесс визуализации отвечает знаменитая d3.js, а за анализ многомерных наборов данных crossfilter.js [2]. Кстати кроссфильтр — проект небезызвестной компании 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());
});
})
[3]
Очень интересный проект от команды CartoDB. Скрипт позволяет создавать интерактивные истории с привязкой к определенным локациям. Все оформляется с помощью Markdown. Словами очень трудно описать, что делает Одиссея, поэтому лучше увидеть живой пример [4].
[5]
Web Starter Kit от Google — это такой большой конструктор/шаблон для кроссплатформенной веб разработки. В него заложены лучшие практики из Web Fundamentals [6] и советы PageSpeed Insights [7]. В общем там много все полезного, в том числе уже и «собранный» сборщик Gulp. За двое суток проект успел собрать почти 2500 старов на GitHub.
[8]
Очень интересный скрипт с точки зрения UX. Я помню относительно недавно на Хабре в разделе «Я пиарюсь» был пост про стартап, который позволяет удерживать покупателей в интернет магазине. К примеру, потенциальный клиент достаточно долго изучал товар, но в конечном итоге его курсор направляется к закрытию вкладки. Сервис определяет этот момент и запускает попап с предложением о скиде. Ouibounce, конечно же, значительно проще, но ведь силы opensource сообщества безграничны… смайл
Cвоеобразная обертка для localForage [10] от 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) {});
[11]
Самый изящный способ сообщить пользователю о том, что его браузер устарел. Вообще этот проект нужно расценивать как призыв веб-разработчиков мотивировать своих пользователей обновить браузер, дабы все нам проще жилось в будущем.
<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'
})
);
Предыдущая подборка (Выпуск 18) [41]
Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите пожалуйста в личку.
Спасибо всем за внимание.
Автор: ilusha_sergeevich
Источник [42]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/62952
Ссылки в тексте:
[1] DC.js: https://github.com/dc-js/dc.js
[2] crossfilter.js: https://github.com/square/crossfilter
[3] Odyssey: http://cartodb.github.io/odyssey.js/
[4] живой пример: http://cartodb.github.io/odyssey.js/editor/editor.html#md/slides/YGBgCi10aXRsZTogIk9keXNzZXkgZXhhbXBsZSBGVFciCi1hdXRob3I6ICJDYXJ0b0RCIgpgYGAKCiNZb3VyIGZpcnN0IG9keXNzZXkuanMgc3RvcnkKYGBgCi0gY2VudGVyOiBbMzcuNzYyMCwgLTEyMi40Mzg1XQotIHpvb206IDkKTC5tYXJrZXIoWzM3Ljc2MjAsIC0xMjIuNDM4NV0pLmFjdGlvbnMuYWRkUmVtb3ZlKFMubWFwKQpgYGAKCk1vdmUgdGhlIG1hcCBhcm91bmQgYW5kIHNhdmUgdGhlIHBvc2l0aW9uIGJ5IGNsaWNraW5nIG9uICJBREQgPiBNb3ZlIG1hcCB0byB0aGUgY3VycmVudCBwb3NpdGlvbiIuIEFzIHlvdSBjYW4gc2VlLCBub3cgd2UgYXJlIGhpZ2hsaWdodGluZyBTYW4gRnJhbmNpc2NvLgoKVGhlbiBhZGQgaGVyZSB0aGUgZGVzY3JpcHRpb24gZm9yIHlvdXIgc2xpZGUgc28gaXQncyBzaG93biBvbiB0aGUgbGVmdCBzaWRlIGJveC4KCgojSG93IHRvIGFkZCBtb3JlIHN0YXRlcwpgYGAKLSBjZW50ZXI6IFs0MC43MzQ4LCAtNzMuOTk3MF0KLSB6b29tOiA5CkwubWFya2VyKFs0MC43MzQ4LCAtNzMuOTk3MF0pLmFjdGlvbnMuYWRkUmVtb3ZlKFMubWFwKQpgYGAKCkJ5IGFkZGluZyBuZXcgW01hcmtkb3duXSAoaHR0cDovL2RhcmluZ2ZpcmViYWxsLm5ldC9wcm9qZWN0cy9tYXJrZG93bi9dKSBoMSBlbGVtZW50cyAoIykgeW91IGFkZCBuZXcgc3RhdGVzIHRvIHlvdXIgc3RvcnkuCgoKI0FkZGluZyBpbWFnZXMgdG8geW91ciBzdG9yeQpgYGAKLSBjZW50ZXI6IFs0MC43MzY1LCAtNzMuOTk4Ml0KLSB6b29tOiAxMwpgYGAKCkJ5IGRlZmF1bHQsIGltYWdlcyBhcmUgYWxzbyBzdXBwb3J0ZWQuIAoKIVtOZXcgWW9ya10oaHR0cDovL3d3dy5ib3N0b24tZGlzY292ZXJ5LWd1aWRlLmNvbS9pbWFnZS1maWxlcy9uZXcteW9yay0xLmpwZykKCiNFeHBvcnRpbmcgeW91ciBzdG9yeQpgYGAKLSBjZW50ZXI6IFs0MC40NDY5LCAtMjguNTY0NV0KLSB6b29tOiAzCmBgYAoKWW91IGhhdmUgZGlmZmVyZW50IG9wdGlvbnMgZm9yIGV4cG9ydGluZyB5b3VyIG9keXNzZXkuanMgdmlzdWFsaXphdGlvbi4gWW91IGNhbiBlaXRoZXIgZW1iZWQgdGhpcyB1c2luZyBhbiBpZnJhbWUsIHB1Ymxpc2hpbmcgd2l0aCBhIGNsaWNrIG9uIGJsLm9ja3Mgb3IganVzdCBzaGFyZSB0aGUgVVJMIG9mIHRoaXMgdmlzdWFsaXphdGlvbi4KCklmIHlvdSB3YW50IHRvIGN1c3RvbWl6ZSBpdCBmdXJ0aGVyLCB5b3UgY2FuIGRvd25sb2FkIHRoZSBnZW5lcmF0ZWQgc291cmNlIGNvZGUgYnkgY2xpY2tpbmcgb24gdGhlIGJ1dHRvbiBiZWxvdy4KCiNBZHZhbmNlZCB1c2VycwoKQ2hlY2sgb3V0IG91ciBbZG9jdW1lbnRhdGlvbl0oaHR0cDovL2RvY3MudXJsKSB0byBsZWFybiBob3cgdG8gdXNlIG9keXNzZXkgdG8gY3JlYXRlIG1vcmUgY3VzdG9tIHRoaW5ncy4gSXQncyBjcmF6eSB0aGUgYW1vdW50IG9mIGNvb2wgdGhpbmdzIHRoYXQgY2FuIGJlIGRvbmUgd2l0aCB0aGUgbGlicmFyeS4KCkFsc28gaWYgeW91IGFyZSBhIGRldmVsb3BlciwgdGFrZSBhIGxvb2sgYXQgb3VyIGNvbnRyaWJ1dGluZyBndWlkZWxpbmUgc28geW91IGNhbiBwdXNoIGNvZGUgdG8gdGhlIGFjdHVhbCBsaWJyYXJ5LgoKQ2hlZXJzIQo=
[5] Web Starter Kit: https://developers.google.com/web/starter-kit/
[6] Web Fundamentals: https://developers.google.com/web/fundamentals/
[7] PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/?hl=ru
[8] Ouibounce: https://github.com/carlsednaoui/ouibounce
[9] Storage.js: https://github.com/ask11/storage
[10] localForage: https://github.com/mozilla/localForage
[11] Outdated browser: https://github.com/burocratik/outdated-browser
[12] Spin.js: http://fgnass.github.io/spin.js/
[13] A Hacker’s Guide to Git: http://wildlyinaccurate.com/a-hackers-guide-to-git
[14] Everything You Need to Know About the CSS will-change Property: http://dev.opera.com/articles/css-will-change-property/
[15] Getting to know CSS Blend Modes: http://dev.opera.com/articles/getting-to-know-css-blend-modes/
[16] Inside the Guardian’s CMS: meet Scribe, an extensible rich text editor: http://www.theguardian.com/info/developer-blog/2014/mar/20/inside-the-guardians-cms-meet-scribe-an-extensible-rich-text-editor
[17] Scoop: A Glimpse Into the NYTimes CMS: http://open.blogs.nytimes.com/2014/06/17/scoop-a-glimpse-into-the-nytimes-cms/
[18] Implement Custom Gestures: https://developers.google.com/web/fundamentals/input/touch/touchevents/
[19] What's Your Favorite Hack?: https://litmus.com/community/discussions/84-what-s-your-favorite-hack
[20] Building a responsive SVG map: http://responsivenews.co.uk/post/87988072178/building-a-responsive-svg-map
[21] Sharing Data Between Sass and JavaScript with JSON: http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json
[22] UX Crash Course User Psychology: http://thehipperelement.com/post/87574750438/ux-crash-course-user-psychology
[23] Brand = User Experience: The Interface Of A Cheeseburger: http://www.smashingmagazine.com/2009/10/24/brand-user-experience-the-interface-of-a-cheeseburger/
[24] Image: https://github.com/hummingbird-me/hummingbird
[25] lazy-ads: https://github.com/madgex/lazy-ads
[26] loadCSS: https://github.com/filamentgroup/loadCSS/
[27] Octicons: https://github.com/github/octicons
[28] Videogrep: https://github.com/antiboredom/videogrep
[29] webkit.js: https://github.com/trevorlinton/webkit.js
[30] mdwiki: https://github.com/Dynalon/mdwiki
[31] HTTPie: https://github.com/jakubroztocil/httpie
[32] MotorCortex.js: http://motorcortexjs.com/
[33] TraceIt: https://github.com/yunap/traceit
[34] MapBuildr: http://mapbuildr.com/
[35] Penthouse: https://github.com/pocketjoso/penthouse
[36] CSS and the critical path: http://www.phpied.com/css-and-the-critical-path/
[37] es6features: https://github.com/lukehoban/es6features
[38] Релиз Dojo 1.10: http://dojotoolkit.org/blog/dojo-turns-1-10
[39] Релиз Sencha Ext JS 5: http://habrahabr.ru/post/225169/
[40] JSNice: http://jsnice.org/
[41] Предыдущая подборка (Выпуск 18): http://habrahabr.ru/post/224751/
[42] Источник: http://habrahabr.ru/post/227069/
Нажмите здесь для печати.