Находки в сети за сентябрь

Заметки и все интересное, что мне попадалось в сети.

Js и веб разработка
Советы по хорошему оформлению angular кода
http://habrahabr.ru/post/235873/
https://github.com/johnpapa/angularjs-styleguide
V8 JavaScript stack trace API
https://code.google.com/p/v8/wiki/JavaScriptStackTraceApi
коллекция шаблонов сайтов
http://templated.co/
Сервис отдающий ip адрес по запросу строкой
https://secure.informaction.com/ipecho/
Проект на github-е ruby api for google drive
https://github.com/gimite/google-drive-ruby

Веб разработка под мобильные устройства
Список физических размеров экранов мобильных устройств
mydevice.io
подборка мобильных меню
http://www.dejurka.ru/web-design/menu-list-mobile-design/

Служебные разделы доступные только в браузере
Некоторые служебные разделы браузеров, которые могут пригодится при разработке расширений (аддонов)
Кэш в chromium-based браузерах - chrome://cache/
Превью страниц в chromium-based браузерах - chrome-search://thumb/http://mail.ru
Список сторонннего ПО, которое используется в Yandex браузере - browser://credits/

Приватность
Подробное описание заголовка запроса Content-Security-Policy
http://content-security-policy.com/
Статья про XSS
http://habrahabr.ru/post/149081/
Деаномизация пользователей
http://habrahabr.ru/post/238565/

Интересные статьи с Adme.ru
25 пророческих цитат Джорджа Оруэлла
Как обманывают наивных талантов
Эволюция мозга

Life Hack
Как составить план задач на день, понять на сколько он выполним и не забыть про него. Записывайте его в форме истории.
И прочитайте эту статью

Linux Дистрибутив
Сайт проекта занимающегося разработкой одноименного минималистичного Linux дистрибутива.
Damn Small Linux Remake

Уроки биологии
http://science.compulenta.ru/688541/

Android
Engineer Mode на Android смартфоне
UCSD comand: *#*#3646633#*#* К примеру на смартфоне c Android 4.2 нашел сообщение о состоянии батареи
Log and Debugging > BatteryLog > battery healthy

Макет резиновой таблицы

Придумал решение, которое позволяет вписать таблицу с несколькими колонками в контейнер фиксированного размера.  При выходе за пределы размеров контейнера, скролл не портит верстку. Решение представлено на github-е.

Размер html таблицы зависит от размера содержимого. Поэтому таблицу почти не возможно вписать в какой-либо контейнер. Отдельной проблемой может стать скролл, размер которого не контролируется.


В таблице есть одна колонка, которая должна занимать все свободное пространство. Остальные колонки имеют фиксированный размер или ограниченный.

Основное ограничение, это не учитывается высота "резиновой" колонки, потому что он находится в блоке с абсолютным позиционированием. Этот эффект в примере прикрыт обрезанием длинных строк. Чтобы преодолеть это ограничение нужно добавить немного кода на js.

Погружение в Angular

Сухим текстом представляю мои впечатления от знакомства с Angular.
До этого работал с Backbone и обратить на него внимания меня вынудили разговоры с командами которые его используют.
Чтобы лучше понять на каких принципах построен Angular реализовал небольшое приложение, которое разместил на github-е.

Что сразу бросилось в глаза.
Динамика интерфейса приложения скорее всего будет в верстке. Если же, разработчик не испытывает отвращение к "декларативному подходу".
Благодаря использованию директив обычная верстка перейдет в разряд шаблонов. Встроенная логика - дополнительный синтаксис, на подобии  SQL, LINQ. В таком примере
ng-options="key as value for (key, value) in categories"
часть после for относится к источнику, выражение до for определяет, какое значение использовать в качестве атрибута value опции, а какое в качестве текста опции.
Параметризация шаблонов с возможностью двунаправленного биндинга поддерживается изначально.
<h3>{{[«Добавление»,«Изменение»][(item.id>0)+0]}} записи</h3>
По слухам, в шаблоне не работает тернарный оператор, поэтому в этом примере он был заменен такой конструкцией.

Достоинства:

• Не требует зависимостей. В Backbone, для примера, потребуется jquery и underscore;
• Встроенная реализация привязки данных. В Backbone для аналогичного функционала придется создать удобный подсобный инструментарий или использовать стороннее решение (epoxy.js, ribs);
• Приемлемая архитектура построенная на патернах.

Недостатки :

• Не  имеет 100% эквивалентной замены функционала jquery для работы с DOM. К примеру, метод $element.find() работает только с названиями тегов и не работает с селекторами атрибутов (elem.find('[type=submit]'));
• Из личного, не так просто взять и вставить в нужное место вьюшку как в Backbone. Надо все обставить в специально "приготовленные" для этого директивы.

Сравнение с Backbone
Backbone по содержанию напоминает фреймворк кастомных MV* фреймворков. Необходимо самому реализовать вывод представления (метод render()). Можно использовать любой другой шаблонизатор по мимо underscore.template и т. п. Как связать атрибуты модели к вьюшке кодер решает сам. Т.е. то что будет использовано под "вывеской бекбона" будет удовлетворять вкусу и взглядам на правильный подход конечного разработчика. Поэтому необходимо, что бы у разработчика были представления о best practise и способах их достижений:

• Декларативное описания логики в шаблоне или перенос их в js код представления;
• Отдельное представление для каждой коллекции или коллекции будет вставлятся в DOM представления;
• Одна модель - одно представление или у одной модели может быть много представлений.

Разные слои абстракции. 
Backbone: Backbone.Events, Backbone.Model, Backbone.Collection, Backbone.View
под девизом "расширяй и наследуй".
Angular: service, fabric, module, controller, directive, filters Внедрение зависимостей.
В Angular роль бэкбоновской модели выполняют scope и сервисы, коллекции так же размыты.

Оффтоп
В Backbone для представления списка однотипных элементов имеется абстракция - Backbone.Collection (коллекции). Когда мне приходилось реализовывать коллекцию связанную с моделью представления в котором она размещается, всегда терзался вопросом правильной реализации. Вплоть до того, что стал коллекции выносить в отдельные дочерние представления. Ситуация осложнялась, тем что нет в Backbone механики для взаимодействия модели представления с моделями коллекции.

В последнее время у меня появилась мысль, что коллекции в Backbone (Backbone.Collection) получили ход, благодаря тому что в модели поддерживаются только plain объекты (без доступа к дочерним под объектам). Но пока эта мысль у меня развивается.

Находки в сети за август

Самые интересные проекты и статьи которые я видел и читал за месяц. В основном по веб разработке и всему такому.

Сжималки и переcжималки графики
https://tinypng.com/
http://www.jpegmini.com/
http://pnggauntlet.com/

Фотосток со свободными изображениями
www.raumrot.com/10/

Неистовый sublime
Что делать с sublime-ом если вы не кодер
http://xakep.ru/howtos/sublime-text-not-for-coding/
Полезное описание, как прикрутить Package Control
Описание хоткеев
http://nosensus.com/sublime-text-3-hot-keys/

Язык программирования
LENS - встраиваемый язык программирования для .Net
https://github.com/impworks/lens/

API virustotal.com
https://www.virustotal.com/ru/documentation/public-api/
https://www.virustotal.com/ru/documentation/browser-extensions/

Node.js
Электронные таблицы
https://ethercalc.org/
sublime подобный редактор
https://github.com/slap-editor/slap
Изменения в Express 4.0
http://scotch.io/bar-talk/expressjs-4-0-new-features-and-upgrading-from-3-0

Css3 animation library
http://anijs.github.io/

Подробнее о strict mode в js
http://stepansuvorov.com/blog/2014/07/strict-mode/#more-1730
Unit tests
http://xakep.ru/howtos/js-unit-testing/

.gitconfig
http://stepansuvorov.com/blog/2014/02/gitconfig/#more-1131

Верстка почтовых рассылок
Теги поддерживаемые gmail
http://xakep.ru/news/gmail-tags/

Познавательные статьи с Adme
http://www.adme.ru/vdohnovenie/dejstvitelno-ochen-krutaya-statya-650905/
http://www.adme.ru/tvorchestvo-fotografy/post-voshvaleniya-zhenschin-646305/
http://www.adme.ru/vdohnovenie/iskusstvo-ofisnogo-trollinga-619905/
http://www.adme.ru/svoboda-psihologiya/dumat-plohaya-ideya-561455/

На карандаш:
AndroidManifest.xml разрешения которые используют зловреды:
"android.permission.INTERNET"
"android.permission.ACCESS_NETWORK_STATE"
"android.permission.READ_PHONE_STATE"
"android.permission.RECEIVE_BOOT_COMPLETED"
"android.permission.WAKE_LOCK"
"android.permission.WRITE_EXTERNAL_STORAGE"
"android.permission.READ_EXTERNAL_STORAGE"

Ссылки на страницы с историей использования сервисов:
https://www.youtube.com/my_search_history
https://www.youtube.com/feed/history
https://history.google.com/history&hl=ru

Список спецификаций моделей mac mini
http://support.apple.com/kb/HT3476

HTMLayout от Terra Informatica

Небольшое описание процесса верстки для встраиваемого браузера, с которым мне пришлось познакомится.

HTMLayout - встраиваемый браузер разработанный компанией Terra Informatica, GUI библиотека которая использует html/css для построения интерфейса с api для различных языков программирования. Используется для создания GUI "коробочного" ПО.
Документацию немного, в основном на основном сайте.
По общему впечатлению, процесс верстки напомнил мне работу с Internet Explorer 8.

Поддерживает css 2.1, частично css3 и ряд своих css конструкций (CSSS!).
Из "+" в пику основным браузерам, поддерживает свойства, параметры связанные с настройками GUI Windows. Такие как стандартные настройки и параметры темы Windows. Ширина скрола, основной шрифт системы, цвет окон и т.п.

Отдельные особенности:

• Поддержка flow и flex-units. (Реализация их в последних версиях chrome и FFox все еще имеют различия);
• Поддержка переменных css, include html файлов;
• Встроенный в css язык сценариев! Поддерживаются обработка событий, выборка dom элементов. В целом, это оправдано тем, что тогда не придется на c++ писать логику  переключения блоков верстки.

Недостатки:

• Слабая документированность;
• Различия в обработке с основными браузерами;
• Отсутствие средств отладки.

Основной способ изменения состояния интерфейса это описание логики в css. Используемый синтаксис расширен дополнительными конструкциями. Называется он CSSS! или Active CSS. Приведу некоторые примеры кода, которые проиллюстрируют его работу.

Компенсация не работающего атрибута for
<label for="elem"><input type="checkbox" id="elem"/> awesome checkbox</label>
Чтобы он заработал, необходим небольшой css код
/* Some magic: [for] not supported by default */
[for]{
hover-on!: $1(#< self.for >):hover = true;
hover-off!: $1(#< self.for >):hover = false;
active-on!: item = $1(#< self.for >), item:checked = !item:checked;
cursor: pointer;
}

Поддержка псевдокласса :checked
#elem:checked // работает
#elem + span // работает
#elem:checked + span // уже не работает

По умолчанию click event поддерживает только тег button. Выявлено опытным путем, в документации ни слова.
button{
click!: // Do something
}

Переключение блоков на странице
Требуется примитивная логика, которая позволит переключать блоки:
<button switch-view="view1">turn on View1</button>
<div view="view1" style="display: none;">...</div>
CSS:
/* View switcher */
[switch-view]{
click!:
relView = self.switch-view,
$([view]:not([view=<relView>]))::display = "none",
$([view=<relView>])::display = "block",
;
}

Вариант реализации переключения табов
button[tab]{
click!:
relTab = self.tab,
$([tab]:not([tab=<relTab>])).class = "inst_tab-item",
$1([tab=<relTab>]).class = "inst_tab-item inst_tab-active",
$([rel-tab=<relTab>])::display = "block",
$([rel-tab]:not([rel-tab=<relTab>]))::display = "none",
;
}
где
$() - функция выборки элементов по селектору
$1() - выбирает первый элемент по указанному селектору
::display - свойство display атрибута style элемента
.class - атрибут class элемента

Ссылки
http://habrahabr.ru/post/154697/
http://www.terrainformatica.com/2006/08/h-smile-core-popup-and-context-menus-htmlayout-and-sciter-engines/
http://www.terrainformatica.com/2008/02/built-in-drag-and-drop-support-in-h-smile-core/

Настройка отступов в Komodo Edit

Все настройки задаются в разделе Edit > Preferences, но для файла они могут быть переопределены в CurrentFileSettings.

Настройки находятся в группе Editor/Indetation.
Чтобы использовать табы в место пробелов ставим галочку для пункта Prefer Tab characters over spaces. Там же необходимо задать длину отступа табуляции.

Интернет банк Банка Авангарда

Небольшие детали, беглым взглядом, которые там нашел.

1) Сделан на Bitrix.
https://www.avangard.ru/bitrix/admin/index.php#authorize
2) В js коде jquery партянка. Не всегда ставят точки с запятой.
3) Таким запросом https://www.avangard.ru/ibAvn/ping/session.json можно фиксировать активную сессию юзера.
Если юзер покинул сессию, то его редиректнет на https://www.avangard.ru/ibAvn/site.jsp, а следом https://www.avangard.ru/login/www/ibank_enter.php

Ответ при активной сессии в скриншоте.

Data url изображения в Firefox-е

Обнаружил для себя интересные тулзы для фронтендера в FireFox-е. Возможность получить изображение из data url и на оборот.

Подробности в скриншотах:

Наследование в javascript

Выкладываю на всеобщее обозрение свой вариант реализации наследования в js.
Выкладки и демонстрационный пример уже доступны на https://github.com/matraska23/es5_inheritance_implementation

Реализация использует возможности Object.create() и ряд других новых методов появившихся в ES5. Поэтому в отличие от аналогичного механизма применяемого в Backbone отличается:

• объект потомка проходит проверку на instanceof для всех объектов предков (т. е. поддерживается реализация цепочки из объектов предков);
• имеется возможность для переопределения методов объекта и в вызова метода предков;
• IE8 не поддерживается (а он вам нужен?).

Код не отличается особой оригинальностью, поэтому вероятно что-то подобное вы сможете увидеть еще где-нибудь:

function inherit(Constructor, Base, extendProperties){
    var buf = Constructor.prototype;
    
    Constructor.prototype = Object.create(Base.prototype, extendProperties);
    Constructor.prototype._base = Base;
    _.extend(Constructor.prototype, buf);
    
    return Constructor;
}

Метод _.extend() осталось заменить на свою реализацию для 100% независимости от сторонних библиотек

Скользкие моменты при работе c data атрибутами в Jquery

Когда вы задаете или получаете какое-нибудь значение хранящееся в data-атрибуте DOM элемента JQuery  делает часть грязной рутинной работы за вас.
Что бы было понятно о чем речь, пример Data атрибута data-text-value

<div data-text-value="abc" id="example">...</div>

Вы можете получить значение или задать:
$("#example").data("text-value")
$("#example").data("text-value","123")

Метод $.data является оберткой над объектом dataset DOM элемента. При этом когда вы пытаетесь считать хранимое значение (строку), Jquery конвертирует значение в ближайший по смыслу тип:
"true" => true,
"123" => 123
и т.п. При этом еще кэширет значение чтобы не парится с распарсиванием в будущем.

Вот здесь и можно подскользнутся на банановой кожуре. Если через дата data атрибут задать такое число выходящее за 32 бита 83735748785296303. То можно получить что нибудь отличное, к примеру 83735748785296300. По всей видимости для приведения строки в число используется функция parseInt:
parseInt("83735748785296303")
#: 83735748785296300

Код для доказательства:

var d = document.createElement('div')
d.innerHTML = '<div data-value="83735748785296303"></div>';
$(d).data('value') == 83735748785296300