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

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

Basket.js ^[1]

^[1]
Basket немного похож на RequireJS, только с его помощью все подключаемые скрипты и стили кешируются в localStorage. Тесты ^[2] Google и Bing демонстрируют улучшение производительности при использовании локального хранилища по сравнению с обычным браузерным кешем. Проект изначально появился как эксперимент, который полностью оправдал результаты этих тестов.

basket
    .require({ url: 'missing.js' })
    .then(function () {
        // Success
    }, function (error) {
        // There was an error fetching the script
        console.log(error);
    });

ngrok ^[3]
^[3]

Знакомьтесь, ngrok, простой сервис который позволяет прокидывать локальный веб- сервис (любого толка: Node.js, ColdFusion, PHP и так далее) в интернет. Он позволяет не только просматривать ваши локальные сайты по доступному для всех урлу, но также тестировать входящие запросы также хорошо, как и повторять их (это может стать решающим фактором, если вы тестируете сервис с ограничениями, вы можете попросить ngrok повторить запрос без использования «настоящего» удалённого сервиса).

Frontender Magazine — «Покажите себя с помощью ngrok». ^[4]

Fenix 2.0 ^[5] как альтернатива ngrok, а еще есть srvdir ^[6].
^[5]

Xdomain ^[7]

CORS альтернатива на чистом JavaScript. Xdomain весит всего 25кб (12кб в минифицированном виде), не зависит от сторонних библиотек, не требует каких либо изменений на сервере, достаточно лишь добавить proxy.html к нужному домену. Простой XHR доступ к файловым серверам Amazon и Dropbox.

//do some vanilla XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://xyz.example.com/secret/file.txt');
xhr.onreadystatechange = function(e) {
  if(xhr.readyState === 4)
    alert(xhr.responseText);
};
xhr.send();

//or if we are using jQuery...
$.get('http://xyz.example.com/secret/file.txt').done(function(data) {
  console.log("got result: ", data);
});

jsPDF ^[8]

^[8]
Замечательный инструмент для генерации .PDF на клиенте с помощью JavaScript. Радуют новые возможности, отныне многие необходимые документы можно легко и просто генерировать.

Dense.js ^[9]

^[9]
Самое изящное решение проблемы отзывчивых изображений для дисплеев с высоким разрешением, я бы даже сказал самое хитрое. Суть в том, что скрипт при определении Retina делает размытие всех картинок и все выглядит так, как будто так и надо. По-моему очень юзабельно:

<script src="jquery.min.js"></script>
<script src="dense.min.js"></script>
<script>
    $('img').dense();
</script>

The Elements of HTML — для тех кто чтит семантику ^[10]
Несколько интересностей и полезностей для веб разработчика #23

Chroma.js ^[11]

Функциональная библиотека для работы с цветом. «Хрома» для цвета это как «Момент для даты. Послужной список для выполнения соответствующих задач бесконечен.

Позволяет манипулировать цветами:

chroma('#D4F880').darken().hex();  // #9BC04B

Масштабировать цвета:

scale = chroma.scale(['white', 'red']);
scale(0.5).hex(); // #FF7F7F

Управлять режимами:

chroma.scale(['white', 'red']).mode('lab');

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

Говорит и показывает Хабр:

«О плюсах и минусах Go» ^[29] от zuborg ^[30]
«YaLinqo (LINQ to Objects для PHP) — версия 2.0» ^[31] от Athari ^[32]
«Эффективная многопоточность в Python» ^[33] от homm ^[34]
«Syringe — декларативный IoC Container на PHP» ^[35] от AgreGADz ^[36]
«Функциональный JavaScript, Часть 1: Введение» ^[37] от domix32 ^[38].
Я недавно писал об это в разделе «Западные мысли» и будует здорово, когда на Хабре будут все три части.
«Лучшие способы использования Angular.js» ^[39] от mova ^[40]
«Angular Light 0.6» ^[41] от lega ^[42]
«Материалы MoscowJS 12» ^[43] от filipovskii_off ^[44]
«Доступна для скачивания WordPress 4.0 Beta 1» ^[45] от galk_in ^[46]

Напоследок:

ToolsOfTheTrade ^[47] — лучшие сервисы и инструменты 2014 года по версии Hacker News.
awesome-machine-learning ^[48]
ApplePie ^[49] — еще один CSS фреймворк.
VLEX ^[50] — декларативный подход к работе с SVG и JS.
Papa Parse ^[51] — JavaScript CVS парсер.
Groovebasin ^[52] — музыкальный сервер на Node.js
Nodemailer ^[53] — посылаем email с помощью Node.js
Email.js ^[54] — библиотека для работы с email приложениями.
ng-cordova ^[55] — AngularJS Cordova wrappers.
ESLint ^[56] — command line утилита с системой плагинов для линтовки JS.
Ruby Bookmarks ^[57], да уже есть awesome-awesomeness ^[58], но может кто-то найдет для себя что-то нужное и здесь.
Goji ^[59] — минималистичный фреймворк для Go.
mailur ^[60] — mail клиент на Python
psdash ^[61] — Linux web dashboard на Python с psutils и flask.
ngx_pagespeed ^[62] — Automatic PageSpeed optimization module for Nginx.
Tessel ^[63] — микроконтроллер программируемый на JavaScript.
Can I Use готовят редизайн, которые уже доступен как beta версия ^[64]:
^[64]

Предыдущая подборка (Выпуск 22) ^[65]

Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите пожалуйста в личку.

Спасибо всем за внимание.

Автор: ilusha_sergeevich

Источник ^[66]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/65401

Ссылки в тексте:

[1] Basket.js: https://github.com/addyosmani/basket.js

[2] Тесты: http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/

[3] ngrok: https://ngrok.com/

[4] Frontender Magazine — «Покажите себя с помощью ngrok». : http://frontender.info/expose-yourself-with-ngrok/

[5] Fenix 2.0: http://fenixwebserver.com/

[6] srvdir: https://www.srvdir.net/

[7] Xdomain: https://github.com/jpillora/xdomain

[8] jsPDF: https://github.com/MrRio/jsPDF

[9] Dense.js: http://dense.rah.pw/

[10] The Elements of HTML — для тех кто чтит семантику: http://w3c.github.io/elements-of-html/

[11] Chroma.js: https://github.com/gka/chroma.js

[12] Structuring, Grouping, and Referencing in SVG – The <g>, <use>, <defs> and <symbol> Elements: http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

[13] Using SVG stroke Attributes: http://codepen.io/jonitrythall/blog/using-svg-stroke-attributes

[14] Understanding SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio: http://sarasoueidan.com/blog/svg-coordinate-systems/

[15] 18 Surprises From Reading jQuery's Source Code: http://quickleft.com/blog/18-surprises-from-reading-jquery-s-source-code

[16] Jonathan Snook – CSS is a Mess – beyond tellerrand Düsseldorf 2014: http://vimeo.com/99877232

[17] The Cordova Plugin Ecosystem Is a Mess — This Is What We’re Doing About It: http://developer.telerik.com/featured/cordova-plugin-ecosystem-mess/

[18] Use Elements as Background Images with -moz-element: http://davidwalsh.name/moz-element

[19] Scaling Down The BEM Methodology For Small Projects: http://www.smashingmagazine.com/2014/07/17/bem-methodology-for-small-projects/

[20] Creating distraction-free reading experiences: http://azumbrunnen.me/blog/creating-distraction-free-reading-experiences/

[21] Why link shorteners hurt the user experience and destroy the Web: http://t37.net/why-link-shorteners-harm-your-readers-and-destroy-the-web.html

[22] »RWD Is Bad for Performance" Is Good for Performance: http://timkadlec.com/2014/07/rwd-is-bad-for-performance-is-good-for-performance/

[23] open door user testing: https://medium.com/about-codecademy/open-door-user-testing-9c87d5c40d6

[24] Prioritizing Devices: Testing And Responsive Web Design: http://www.smashingmagazine.com/2014/07/14/testing-and-responsive-web-design/

[25] A Roadmap To Becoming An A/B Testing Expert: http://www.smashingmagazine.com/2014/07/11/roadmap-to-becoming-an-a-b-testing-expert/

[26] How To Profit From Selling Digital Products (Part 1): http://www.smashingmagazine.com/2014/07/10/how-to-profit-from-selling-digital-products-part-1/

[27] How To Profit From Selling Digital Products (Part 2): http://www.smashingmagazine.com/2014/07/16/how-to-profit-from-selling-digital-products-part-2/

[28] Turning All Clients Into Dream Clients (or Common Client Difficulties): http://www.smashingmagazine.com/2010/09/24/common-client-difficulties-or-turning-all-clients-into-dream-clients/

[29] «О плюсах и минусах Go»: http://habrahabr.ru/post/229169/

[30] zuborg: http://habrahabr.ru/users/zuborg/

[31] «YaLinqo (LINQ to Objects для PHP) — версия 2.0»: http://habrahabr.ru/post/229763/

[32] Athari: http://habrahabr.ru/users/athari/

[33] «Эффективная многопоточность в Python»: http://habrahabr.ru/post/229767/

[34] homm: http://habrahabr.ru/users/homm/

[35] «Syringe — декларативный IoC Container на PHP»: http://habrahabr.ru/post/229879/

[36] AgreGADz: http://habrahabr.ru/users/agregadz/

[37] «Функциональный JavaScript, Часть 1: Введение»: http://habrahabr.ru/post/229893/

[38] domix32: http://habrahabr.ru/users/domix32/

[39] «Лучшие способы использования Angular.js»: http://habrahabr.ru/company/trackduck/blog/230257/

[40] mova: http://habrahabr.ru/users/mova/

[41] «Angular Light 0.6»: http://habrahabr.ru/post/229691/

[42] lega: http://habrahabr.ru/users/lega/

[43] «Материалы MoscowJS 12»: http://habrahabr.ru/company/moscowjs/blog/229563/

[44] filipovskii_off: http://habrahabr.ru/users/filipovskii_off/

[45] «Доступна для скачивания WordPress 4.0 Beta 1»: http://habrahabr.ru/post/229815/

[46] galk_in: http://habrahabr.ru/users/galk_in/

[47] ToolsOfTheTrade: https://github.com/cjbarber/ToolsOfTheTrade#user-content-social-media-marketing

[48] awesome-machine-learning: https://github.com/josephmisiti/awesome-machine-learning

[49] ApplePie: http://www.apppie.org/

[50] VLEX: https://github.com/indus/VLEX

[51] Papa Parse: https://github.com/mholt/PapaParse

[52] Groovebasin: https://github.com/andrewrk/groovebasin

[53] Nodemailer: https://github.com/andris9/Nodemailer

[54] Email.js: http://emailjs.org/

[55] ng-cordova: https://github.com/driftyco/ng-cordova

[56] ESLint: http://eslint.org/

[57] Ruby Bookmarks: https://github.com/dreikanter/ruby-bookmarks

[58] awesome-awesomeness: https://github.com/bayandin/awesome-awesomeness

[59] Goji: https://github.com/zenazn/goji

[60] mailur: https://github.com/naspeh/mailur

[61] psdash: https://github.com/Jahaja/psdash

[62] ngx_pagespeed: https://github.com/pagespeed/ngx_pagespeed

[63] Tessel: https://tessel.io/

[64] уже доступен как beta версия: http://beta.caniuse.com/

[65] Предыдущая подборка (Выпуск 22): http://habrahabr.ru/post/229607//

[66] Источник: http://habrahabr.ru/post/230405/

Нажмите здесь для печати.

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

Basket.js [1]

Xdomain [7]

jsPDF [8]

Dense.js [9]

Chroma.js [11]