- PVSM.RU - https://www.pvsm.ru -

Несколько интересностей и полезностей для веб-разработчика #19

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

DC.js [1]

Несколько интересностей и полезностей для веб разработчика #19 [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());
    });
})

Odyssey [3]

Несколько интересностей и полезностей для веб разработчика #19 [3]
Очень интересный проект от команды CartoDB. Скрипт позволяет создавать интерактивные истории с привязкой к определенным локациям. Все оформляется с помощью Markdown. Словами очень трудно описать, что делает Одиссея, поэтому лучше увидеть живой пример [4].

Web Starter Kit [5]

Несколько интересностей и полезностей для веб разработчика #19 [5]
Web Starter Kit от Google — это такой большой конструктор/шаблон для кроссплатформенной веб разработки. В него заложены лучшие практики из Web Fundamentals [6] и советы PageSpeed Insights [7]. В общем там много все полезного, в том числе уже и «собранный» сборщик Gulp. За двое суток проект успел собрать почти 2500 старов на GitHub.

Ouibounce [8]

image [8]
Очень интересный скрипт с точки зрения UX. Я помню относительно недавно на Хабре в разделе «Я пиарюсь» был пост про стартап, который позволяет удерживать покупателей в интернет магазине. К примеру, потенциальный клиент достаточно долго изучал товар, но в конечном итоге его курсор направляется к закрытию вкладки. Сервис определяет этот момент и запускает попап с предложением о скиде. Ouibounce, конечно же, значительно проще, но ведь силы opensource сообщества безграничны… смайл

Storage.js [9]

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) {});

Outdated browser [11]

Несколько интересностей и полезностей для веб разработчика #19 [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'
    })
    );

Spin.js [12]

Несколько интересностей и полезностей для веб разработчика #19

Западные мысли или что стоило бы перевести на Хабре:

Напоследок:

  • Платформа для любителей анимэ
    image [24]
  • lazy-ads [25] — очень полезный скрипт для «ленивой подгрузки» всех ваших баннеров.
  • loadCSS [26] — а это решение для динамичной загрузки CSS от известной Filament Group.
  • Octicons [27] — иконочный шрифт от команды GitHub.
  • Videogrep [28] — поиск по видео на Python.
  • webkit.js [29] — полноценный JavaScript порт WebKit.
  • mdwiki [30] — JavaScript CMS/Wiki на Markdown.
  • HTTPie [31] — command line HTTP client.
  • MotorCortex.js [32] — еще одна (уже была AniJS) библиотека для декларативного описания CSS анимаций
  • TraceIt [33] — jQuery плагин, который решает только одну неординарную задачу — скевоморфичная обводка элементов.
  • MapBuildr [34] — функциональный интрумент для создания Google Map, еще бы такую штуку для Яндекс.Карт.
  • Penthouse [35] — Critical Path CSS Generator, где critical path есть самый необходимый CSS. Подробнее об этом в статье CSS and the critical path [36]. Идеи о производительности/оптимизации фронта пробираются все глубже.
  • es6features [37] — репозиторий, в котором описываются все фичи ECMAScript 6.
  • Релиз Dojo 1.10 [38]
  • Релиз Sencha Ext JS 5 [39]
  • JSNice [40] — умный и обучаемы деобфускатор для JavaScript, который выполняя свою задачу, ищет соответствия в opensource проектах и пытается восстановить оригинальные названия переменных.
    Несколько интересностей и полезностей для веб разработчика #19 [40]

                                                         Предыдущая подборка (Выпуск 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/