MATRASKA23

Подборка статей прочитанных в июне

2019-06-24T02:10:00.001-07:00

Frontend

Делаем таблицу с бесконечной прокруткой без event listener
Концепт реализации бесконечного скрола при помощи IntersectionObserver API.

Настройка окружения unit тестирования javascript
Advanced Patterns in React

Backend

Введение в Spring, или что делать, если по всему проекту @Autowired и @Component, а вы не понимаете, что это

Python

Python потребляет много памяти или как уменьшить размер объектов?
Обзор структур данных python по объему требуемой оперативной памяти

Operation Systems

Redox
Redox is a Unix-like Operating System written in Rust, aiming to bring the innovations of Rust to a modern microkernel and full set of applications.

IOT

Вывод информации на дисплей покупателя
Статья про вывод произвольного теста на внешний дисплей Raspberry Pi.

Office trends in 2k2*

Asciidoctor

Текстовый процессор для подготовки документов в различных форматах.

Обзоры инструментов для подготовки презентаций:

Some new interesting repositories

2019-05-09T01:58:00.003-07:00

Js library that detects mobile devices https://github.com/hgoebl/mobile-detect.js

Параметризация установки расширения из Chrome Web Store

2015-12-04T07:51:00.003-08:00

С благими намерениями Google закрыла для разработчиков возможность установки плагинов за пределами магазина (с небольшим списком исключений).
Поэтому единственный вариант дистрибуции плагина со своего ресурса это публикация ссылки на страницу Chrome Web Store.
Если надо добавить какой нибудь уникальный параметр плагину при установке, то можно добавить параметр в url ссылки на плагин (например в хэш), а затем найти его при помощи history api.
Публикуем подобную ссылку:
https://chrome.google.com/webstore/detail/link-checker-web-console/picifgoheidimhdnaghmacegokgglgeh?hl=ru#hashmark=one_two_three

В расширении при установки ищем в истории ссылку с заданным хешем:

var URL_MARK = '#hashmark=';

chrome.history.search({
 text: URL_MARK,
 maxResults: 10,
}, function(results){
 var  url = results[0] ? results[0].url : '', 
   pos = url.indexOf(URL_MARK), 
   options = pos != -1 && url.substr(pos + URL_MARK.length);
 
 if(options){
  // Do something
 }
});

Статус загрузки страницы в iframe

2015-10-22T08:52:00.002-07:00

Ирония в том, что загрузив что то в iframe, нет никаких параметров по которым можно было определить статус загрузки.
Событие onload у iframe сработает в обоих случаях и если страница была успешно загружена или не найдена.

Если в iframe подгружается с того же домена, что и страница то мы можем просто скачать страницу по ajax, получить статус операции.

В примере использую обертку jQuery для загрузку через ajax.

var $frame = $('iframe')

$.get(url).done(function(content, status, x){
var _doc = $frame[0].contentWindow.document;
_doc.open('text/html', 'replace');
_doc.write(content);
_doc.close();
$frame.css('height', _doc.documentElement.scrollHeight);
}).fail(function(x, status, message){
// Do another magic
});

П.С.
В одном списке вопросов для фронтендеров в качестве ответа на вопрос, когда бы вы использовали метод document.write(), был предложен ответ - никогда (или в 1999-м). Вообщем, это первый случай, когда я нашел применения этому методу.

П. П. С.
Обнаружил один существенный недостаток - невозможно определить когда завершится отрисовка содержимого, вставленного через document.write(). Поэтому полученный размеры контента могут не соответствовать реальным.

Лучшее из прочитанного в августе

2015-09-05T05:54:00.001-07:00

Короткий конспект собранных ссылок понравившихся статей.

Браузер - это развитие ОС
http://siliconrus.com/2015/08/browsers-future/

Касперский попал под раздачу
http://geektimes.ru/post/259750/
Особенно полезно, что возможное решение сейф браузинга Dr.Web будет иметь похожее воплощение.

Занимательная вероятностная статистика
http://geektimes.ru/post/259090/

Как победить проституцию
http://w-o-s.ru/article/16030

Откуда берется ксенофобия
http://w-o-s.ru/article/14704

"Традиции износилования"
http://w-o-s.ru/article/14823

Чем бороться с локерами/вымогателями
http://geektimes.ru/company/icover/blog/259968/

Исповедь фронтендера в поисках работы. Стоит иногда перечитывать, чтобы приходить в чувства.
http://siliconrus.com/2015/08/kozulya-job/

Mac app store free apps. Листинг скидок в app store
http://appshopper.com/mac/prices/free

В чём истинное предназначение «Косынки» и «Сапёра»
http://geektimes.ru/post/260292/

Небольшой обзор Алисы в стране чудес с точки зрения анализа работы мозга.
Мне всегда нравился сюрриализм в этом произведении, и по всей видимости он не случаен.
http://www.factroom.ru/books/secrets-of-alice-in-wonderland

Мара Сальватруча из Центральной америки
http://lenta.ru/articles/2015/08/18/ms13/?pasa

Реабилитируем селфи
http://www.lookatme.ru/mag/how-to/inspiration-howitworks/216209-psycho-selfie

Признаю, что выработал у себя такую привычку - держать по множеству открытых вкладок.
И две вещи которые вынуждают их закрывать - не читаемость заглавий вкладок и нехватка памяти. Из за физических ограничений монитора и компьютера.
http://www.lookatme.ru/mag/how-to/better-life/216309-lifehack-singletasking

Небольшая история как появился ноль и отрицательные числа
http://www.lookatme.ru/mag/how-to/books/216125-excerpt-negative

Хороший рассказ о выборе фотоаппарата или чем снимать
http://geektimes.ru/company/icover/blog/260740/

Познавательная статья о прослушке (с красочными примерами)
http://habrahabr.ru/company/neuronspace/blog/265457/

VirtualBox: как объединить две виртуальные машину в одну сеть

2015-07-20T09:19:00.002-07:00

Было необходимо поправить багу в верстке под IE9, который был доступен из одной ВМ, а сервер был на другой ВМ. Поэтому потребовалось настроить работу двух ВМ в VirtualBox в одной сети.
Составил небольшой конспект, основных действий. Может пригодится в будущем.

Создание виртуальной сети
Переходим по пунктам меню "Файл > Настройки"
Открываем вкладку "Сеть".
Создаем/выбираем сеть
Задаем настройки сети в попапе:

Имя сети: "NatNetwork"
CIDR сети: 10.0.2.0/24

IP адресс хоста потом надо будет искать в диапазоне указанного CIDR сети.

Настройка виртуальной машины
Выбираем пункт меню "Настройка" контекстного меню ВМ.
Во вкладке "Сеть" в настройках Адаптера (добавляем новый если требуется).
Выбираем "Тип подключения" - "Сеть NAT", в выпадающем списке "Имя" выбираем созданную сеть.
Задаем такие настройки для всех ВМ, которые надо подключить

Проверка
В ВМ в которой запущен сервер узнаем ip адрес машины
Debian/Ubuntu к примеру
#: ifconfig
В ВМ в которой открыт браузер в адресной строке указываем хост и порт сервера.

Двоеточие в идентификаторе css селектора

2015-01-26T03:02:00.003-08:00

Опытным путем нащупал отличия в работе методов document.getElementById() и document.querySelector()
Был в DOM-е элемент с идентификатором layout:rightcol
<div id="layout:rightcol"></div>

Так для него document.getElementById('layout:rightcol') вернет правильный элемент, а для
document.querySelector('#layout:rightcol') и $('#layout:rightcol') будет получено исключение

chrome 40: DOMException: Failed to execute 'querySelectorAll' on 'Document': '#layout:rightcol' is not a valid selector.
firefox 35: SyntaxError: An invalid or illegal string was specified

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

2014-10-02T11:33:00.001-07:00

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

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

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

2014-09-16T23:19:00.000-07:00

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

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

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

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

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

2014-09-06T14:14:00.003-07:00

Сухим текстом представляю мои впечатления от знакомства с 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 объекты (без доступа к дочерним под объектам). Но пока эта мысль у меня развивается.

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

2014-09-01T12:23:00.001-07:00

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

Сжималки и пере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

2014-08-24T03:06:00.003-07:00

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

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

2014-08-03T11:56:00.002-07:00

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

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

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

2014-08-01T13:45:00.003-07:00

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

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-е

2014-07-29T13:28:00.000-07:00

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

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

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

2014-06-15T10:29:00.001-07:00

Выкладываю на всеобщее обозрение свой вариант реализации наследования в 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

2014-02-02T12:51:00.003-08:00

Когда вы задаете или получаете какое-нибудь значение хранящееся в 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

исполняемые комментарии в Internet Explorer

2013-10-13T09:48:00.002-07:00

Обнаружил для себя новую приблуду в IE. Когда делал комит в SVN получил предупреждение, что с поставленным в js коде комментарием что-то не так. Нагуглил инфы и обнаружил,что Interner Explorer может исполнять js код оставленный в комментариях. Код должен:

обернут символами собачками `@` ;
между собачками и символами открывающими/закрывающими комментарии не должны быть пробелы.

Такой код выполнится в IE8, IE9, но в других будет проигнорирован:

/*@ document.body.innerHTML="123" @*/

Ивроде и не баг. Но почему то я раньше с ним негде не встречался. Осталось, теперь придумать, как это можно использовать.

Подробнее можно почитать
http://support.microsoft.com/kb/323487/en
http://stackoverflow.com/questions/3894079/multiple-js-comment-bug-in-ie

Тестирование почтовой рассылки с помощью blat

2013-09-29T13:26:00.003-07:00

Для автоматизации процесса верстки - тестирования почтовых рассылок под Windows я использую консольный почтовый сервер blat.
Загрузить blat можно с сайта проекта http://www.blat.net.

После распаковки в архиве. Перед тем как начать использовать утилиту, необходимо настроить параметры учетной записи smtp сервера.
Все указанные параметры будут сохранены в реестре.
#: blat.exe -install -server smtp.server.ru -port 25 -f your@mail.box -u your@mail.box -pw __password__
где smtp.server.ru адрес smtp сервера твоего любимого почтового сервиса. smtp.server.ru - учетная запись и имя отправителя. __password__ пароль.

Как послать письмо с вложением
#: blat.exe -charset windows-1251 -to mail@yandex.ru -subject "Тема" -body "Тело письма" -attach "attach.txt"
Письмо по умолчанию будет отправлено в utf-8 (о чем следует помнить). Ключ -charset windows-1251 у меня почему то не срабатывает.

Как отправить html файл (сверстанное письмо)
#: blat.exe body.html -s "Test mail" -i "Cybergavin Tester" -to mail@yandex.ru,mail@mail.ru,mail@gmail.com -html
Описание ключей:
-s => Тема письма ( тема письма по умолчанию "Contents of file: stdin.txt" )
-i => Имя отправителя (адрес отправителя указывается при настройке параметров smtp сервера)
-to => Адреса назначения через запятую
body.html => файл с версткой письма
-html => ключ для указания mime типа документа - HTML (Content-Type : text/html)

Если письмо содержит графику с сервера. То на время тестирования ее можно брать из расшаренной папки google drive. Google drive позволяет делать статические сайты из расшаренных папок (как и DropBox), поэтому в них можно сложить необходимую графику.

Полезные gem-ы ruby. chunky_png

2013-09-29T12:55:00.000-07:00

Ruby удобный язык для создания подсобного инструментария. И основную ценность придает ему доступная система пакетов gem-ов. Одним из таких пакетов является gem chunky_png. [ <) https://github.com/wvanbergen/chunky_png ] chunky_png добавляет легкий api для работы с png. И в основном я его использую для генерации спрайтов - склейки png с небольшими трансформациями. Собственно, для этих целей он используется в compass.

Ставим gem
#: gem install chunky_png

Пример склейки png #1

require 'chunky_png'

files = ['btn1.png','btn2.png','btn3.png','btn4.png','close.png']
# Создадим png файл в который все поместим все картинки. 1-й параметр width, 2-й - height
png = ChunkyPNG::Image.new(70,70*4+32, ChunkyPNG::Color::TRANSPARENT)
yPos=0
files.each{|fname| # Перебираем файлы
    img = ChunkyPNG::Image.from_file(fname)
    png.compose!(img,0,yPos) # размещаем картинку в нужном месте
    yPos=yPos+img.dimension.height
}
png.save("btnSprites.png")

Пример склейки посложнее #2

require 'chunky_png'

# в спрайт нужно вставить оригинальное изображение, но иногда и отцентрировать в заданном периметре
files = [{
            :file => "attention.png" 
        },{
            :file => "check.png"
        },{
            :file => "coin.png"
        },{
            :file => "desctop.png",
            :width => 50, # зададим ширину и высоту квадрата в центр которого нужно вставить изображение
            :height => 50
        },{
            :file => "mobile.png",
            :width => 50,
            :height => 50
        },{
            :file => "question.png"
        },{
            :file => "letter.png",
            :width => 50,
            :height => 50
        }]

file_buf = []
max_width = 0
max_height = 0
css = "" # попутно сгенерируем css, раз мы и так знаем все координаты
css_x_pos = 0
css_y_pos = 0
save_file_name = "sprite" # название спрайта
css_class_name_prefix = ".home-room-free-fm-" # а в css будем вставлять классы с таким префиксом

files.each{|image|
    # вставляем оригинальное изображение
    if image[:width].nil? || image[:height].nil? 
        img = ChunkyPNG::Image.from_file(image[:file])
    # или  помещаем изображение в заданный периметр
    else
        img = ChunkyPNG::Image.new(image[:width],image[:height], ChunkyPNG::Color::TRANSPARENT)
        buf = ChunkyPNG::Image.from_file(image[:file])
        x_pos = ((image[:width] - buf.dimension.width)/2).round
        y_pos = ((image[:height] - buf.dimension.height)/2).round
        #puts "image[:width] `#{image[:width]}`, img.dimension.width `#{img.dimension.width}`, x_pos: `#{x_pos}`"
        img.compose!(buf,x_pos,y_pos)
    end
    
    if img.dimension.width > max_width
        max_width = img.dimension.width
    end
    max_height = max_height + img.dimension.height
    file_buf << img
}
png = ChunkyPNG::Image.new(max_width,max_height, ChunkyPNG::Color::TRANSPARENT)

# помещаем получившиеся фрагменты в спрайт
file_buf.each_with_index{|file,index|
    png.compose!(file,css_x_pos,css_y_pos)
    # а данные о координатах сохраняем в CSS:
    css = css +"#{css_class_name_prefix}#{files[index][:file]}{\n\tbackground:url(#{save_file_name}.png) #{css_x_pos > 0 ? (-css_x_pos).to_s+"px":"0"} #{css_y_pos > 0 ? (-css_y_pos).to_s+"px":"0"} no-repeat;\n\twidth:#{file.dimension.width}px;\n\theight:#{file.dimension.height}px;\n}\n"
    css_y_pos = css_y_pos+file.dimension.height
}
#css можно сохранить в отдельный файл

Рисование окружностей:

require 'chunky_png'

png = ChunkyPNG::Image.new(57, 57, ChunkyPNG::Color::TRANSPARENT)

png.circle(28, 28, 27, ChunkyPNG::Color(0x7b0f34FF), ChunkyPNG::Color::TRANSPARENT)
png.circle(28, 28, 25, ChunkyPNG::Color::TRANSPARENT,ChunkyPNG::Color(0x7b0f344D))
png.save("out3.png",:fast_rgba)

Гем поддерживает возможность рисования. Но по пиксельно, поэтому получившиеся окружности смотрятся хуже в отличие от прямых линий, чем если это делать в photoshop или gimp.

В место заключения. С помощью chunky_png можно с автоматизировать рутинные действия с графикой. Не дергать дизайнера при каждом изменении в наборе фрагментов.

Вариант дропдаун меню

2013-07-10T12:25:00.002-07:00

В своем уголке самописных костылей я хочу представить концепт контекстное меню (дропдаун меню) реализованного на inlin-овых js скриптах с CSS3 переходами. Бэкендеры на работе обратились ко мне с просьбой накастылять нехитрую реализацию контекстного меню, содержимое которого они могли править не сильно погружаюсь в js код. Грубо говоря копипастить на страницу чистым php. Полученную демку я представляю здесь.

Достоинства и недостатки:
+ не требует предварительной инициализации объектов, не требуется ожидания готовности DOM;
+ удобный доступ к содержимому для бэкенда;
- код сложнее для анализа.

html:

<div class="frame">
    <div onclick="CtxInlineController.open(this)" class="menu-target ">
        <div class="ctx-wrapper">
            <div  style="display:none;"  class="ctx-menu" onmouseout="CtxInlineController.out(this,event)" onclick="event.stopPropagation()">
                <span class="line" onclick="alert('12');CtxInlineController.closeCtx(this)">123456</span>
                <span class="line" onclick="alert('ab');CtxInlineController.closeCtx(this)">abcdef</span>
            </div>
        </div>
    </div>
</div>

css:

.frame{
    position:relative;
    width:200px; 
    height:100px;
    border: 1px solid #666;
}
.line{
    display: block;
    width:100%;
    font-size:11px;
    line-height: 16px;
    cursor:pointer;
}

.menu-target{
    position:absolute;
    right:5px;
    top:5px;
    width:24px;
    height:24px;
    border:1px solid #666;
    background-color: #CCC;
}
.menu-target:hover{
    background-color: yellow;
}
.ctx-wrapper{
    position: relative;
    width:100%;
    height:0;
}

.ctx-menu{
    position:absolute;
    top:25px;
    right:-1px; 

    background-color:rgba(0,0,0,.7);
    color:white;
    width:166px;
    margin-top:50px;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.ctx-menu-behavior{
    margin-top:0;
    opacity: 1;
}

js:

var CtxInlineController = {
    // Const for configure:
    MENU_SELECTOR:".ctx-menu",
    TRANSITION_CLASS:"ctx-menu-behavior",
    // Inline methods:
    // @memberOf CtxInlineController - onclick handler
    // @param {HtmlElement} self - target element
    open:function(self){
        var     $self = $(self),
                ctxMenu = $self.find(this.MENU_SELECTOR);
        
        if(ctxMenu.css("display")=="none"){
            ctxMenu.removeClass(this.TRANSITION_CLASS);
            ctxMenu.show();
            ctxMenu.addClass(this.TRANSITION_CLASS);
        }else{
            ctxMenu.removeClass(this.TRANSITION_CLASS);
            setTimeout(function(){
                ctxMenu.css("display","none");
            },300);
        }
    },
    // @memberOf CtxInlineController - onmouseout handler
    // @param {HtmlElement} self - target element
    // @param {MouseEvent} event
    out:function(self,event){
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == self ||  e == self) {
            return;
        }
        if(self.style.display!='none'){
            $(self).removeClass(this.TRANSITION_CLASS);
            setTimeout(function(){
                self.style.display='none';
            },300);
        }
    },
    // @memberOf CtxInlineController api for closing menu
    // @param {HtmlElement} self - target element
    closeCtx:function(self){
        var ctxMenu = $(self).closest(this.MENU_SELECTOR);
        
        ctxMenu.removeClass(this.TRANSITION_CLASS);
        setTimeout(function(){
            ctxMenu.css("display","none");
        },300);

    }
};

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

Реализация двухстороннего флипа картинки

2013-06-16T13:36:00.002-07:00

Представляю реализацию двухстороннего флипа картинки на css3. Данный трюк был реализован на работе в процессе работы над новым функционалом. И чтобы наработки не потерялись, я оставлю их здесь.

Работающее демо так же доступно по ссылке.

Весь механизм выполняется с помощью css3. Две картинки вращаются вокруг одной оси с одинаковой скоростью, но с фазовым сдвигом периода вращения 180 градусов (От -180 до 0 градусов и от 0 до 180 градусов). Кого физика сбила столку могут ознакомится с исходниками.

HTML:

<div class="rotor">
    <div id='curr' class="rotor-flip" style="background-image: url(/img/image.jpg);"></div>
    <div id='next' class="rotor-flip next" styLe="background-image: url(/img/next.jpg);"></div>
</div>
<button onclick="rotor()" class="m12">Flip</button>

CSS:

.rotor{
    width:180px;
    height:180px;
    position: relative;
    -webkit-perspective:1400px;
    -moz-perspective:1400px;
    -o-perspective:1400px;
    perspective:1400px;
}
.rotor>.rotor-flip{
    position: absolute;
    width:100%;
    height:100%;
    -webkit-backface-visibility:hidden;
    -webkit-transition:-webkit-transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-backface-visibility:hidden;
    -moz-transition:-moz-transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-backface-visibility:hidden;
    -o-transition:-o-transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    backface-visibility:hidden;
    transition:transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.next{
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -o-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
}
.flipped {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    webkit-transform:rotateY(180deg);
}

JS:

function rotor(){
    var     curr = document.getElementById('curr'),
            next = document.getElementById('next');

    if(curr.className == "rotor-flip"){
        curr.className = 'rotor-flip flipped';
        next.className = 'rotor-flip';
    }else{
        curr.className = 'rotor-flip';
        next.className = 'rotor-flip next';
    }           
}

node.js express и шаблонизатор underscore

2013-05-12T11:54:00.000-07:00

Так как уже имеется сайт с работающим underscore-вским шаблонизатором то писать пост приходится не на пустом месте.
По этому все замеченные мною детали, которых не указаны в документации к uinexpress или underscore я объединил в этом посте.

Почему express и underscore.
Простая реализация шаблонизатора. Вся логика реализуется на javascript-е в обычной html верстке. В шаблонах имеется доступ к методам библиотеки underscore (но это на любителя underscore). Если вы никогда им не пользовались, то я могу сказать, что все конструкции на js нужно помещать в конструкции <% ... print(variable_name); %> или <%-variable_name%>, <%=variable_name %>.

Устанавливается с пакетом uinexpress через npm. Версия которую я использовал 0.05. По номеру версии видно, что пакет совсем "маленький".

Добавление параметров в шаблон
Ситуация такая, имеется layout файл:

<!DOCTYPE html>
<html>
<head>
    <title><%=$title%></title>
</head>
<body><%=body%></body>
</html>

По умолчанию основной текст представления подставляется в шаблон на место переменной body. Но иногда требуется чтобы в шаблоне подставлялись и другие значения, например значения для meta-тегов.
Соответственно значения необходимых параметров можно задать:

в настройках роутинга
в самом представлении

В настройках роутинга:

// Так можно задать дефолтные параметры в шаблон
var defaultOptions={
    $title:"",
    $description:"",
    $keywords:""
};
app.get('/', function(req, res){         
    res.render('index.html', defaultOptions);
});

В самом представлении:

<% $title="simple page" %>

Правда если в шаблоне обнаружится что переменная нигде не было про инициализирована, то приложение выбросит exception. Поэтому в шаблоне может пригодится и такой код:

<% if(typeof $title != "undefined"){ %>
    <title><%=$title%></title>
<% } %>

Задание дефолтного шаблона
Пакет uinexpress в качестве дефолтного шаблона использует файл layout с указанным в настройках расширением и адресом папки с представлениями.

Чтобы иметь возможность задать произвольный файл шаблона в настройках приложения и в представлении я немного модифицировал код библиотеки. То что получилось доступно по ссылке на гитхабе.

Partials
С этим в uinexpess плохо. Partials не реализованы и вообще как нибудь их реализовать в шаблонном движке underscore проблематично.
Так как во время компиляции шаблона невозможно подставить значение из асинхронной callback функции. Именно это будет если считывать файлы из файловой системы. Возможный вариант решения, который мне видится - это при запуске приложения заносить в кэш uinexpress все необходимые partials а уже в самом шаблоне извлекать их значения.

IE следит за твоей мышкой...

2013-02-04T08:48:00.001-08:00

IE следит за твоей мышкой...
Нашел дивную серию статей про уязвимость Internet Explorer:
Что-то на подробнее вот этого:
"Пользователи веб-браузера Internet Explorer оказались в щекотливой ситуации: согласно данным западных экспертов в области кибер-безопасности, уязвимость, скрывающаяся в интерпретаторе javascript данного браузера, позволяет злоумышленникам отслеживать движения курсора мыши удаленного пользователя.
Уязвимости подвержены версии Internet Explorer с 6 по 10. А считывание позиции курсора мыши происходит даже при неактивном окне веб-браузера, что ставит под удар пользователей банковских продуктов. Также можно говорить об угрозах для тех, кто использует виртуальные клавиатуры, включая и некоторых пользователей планшетов.
Между тем, корпорация Microsoft уже начала расследование инцидента и, вероятно, в скором времени выпустит патч.
Примечательно, что помимо злоумышленников, данной уязвимостью могут активно пользоваться рекламные компании, осуществляющие рекламу в Сети."
Так сильно удивился эпичности содержания решил проверить эту самую уязвимость.
<div id="detector"></div>

window.attachEvent("onload",function(){
    var     det = document.getElementById("detector");
    det.attachEvent("onmousemove",function(e){
        det.innerHTML = e.screenX + ", " + e.screenY;
    });
    setInterval(function(){
        det.fireEvent("onmousemove");
    },100);
});

Можно использовать и другие события не только mousemove.
Доступны только значения:
e.altKey {Bool} - состояние [ALT]
e.altLeft {Bool} - [ALT Left]
e.altKey {Bool} - состояние [CTRL]
e.altLeft {Bool} - [CTRL Left]
e.clientX {Int} - координаты мыши относительно просматриваемой области документа
e.clientY {Int}
e.offsetX {Int}
e.offsetY {Int}
e.screenX {Int} - координаты мыши относительно верхнего левого угла экрана (0,0) - верхний левый угол экрана
e.screenY {Int}
e.x {Int} - координаты относительно родительского компонента
e.y {Int}

Что нельзя узнать:
1) А был ли клик
2) какую клавишу нажали кроме (Alt,Schift, Ctrl)
3) правую или левую кнопку мыши нажали
Т.е. нужны еще уязвимости или доп. информация о происходящем на десктопе, что бы сделать какой-нибудь вывод.

Мощная уязвимость?

Автоматизация работы с Google Forms

2012-12-26T10:19:00.001-08:00

Предыстория
Сервисом Google Docs пользуюсь хорошо и давно, но только относительно недавно, до меня дошло, что его можно использовать еще лучше (спасибо habrу).
Вся прелесть Google Docs это синергия его компонентов, так:

Google Forms – позволяет кастомизировать формы и встраивать на свои странички
Google Spreadsheet – поддерживает автоматизацию, с помощью скриптов на javascript, имеется поддержка триггеров и событий.

В каком-то посте на habrahabr узнал, что формы в Google Forms можно не только создавать и открывать для публичного доступа, но и кастомизировать по своему вкусу. Что очень пригодилось — форму можно публиковать на своем сайте, и в своем профиле Google docs собирать данные. Второй момент, эти данные нужны не только мне, и поэтому их требуется как то пересылать другим людям, которые ими будут заниматься. В такой схеме работы Google выступает как прокси, пересылает сообщения через gmail. О том как я реализовал такую схему будет посвящен этот пост.

Реализация
Так как все данные собираются в Spreadsheet, то средства автоматизации должны работать оттуда.
И так у вас есть работающая форма Google Forms, которая связана с таблицей в сервисе Google SpreadSheet (Рис. 1). Необходимо реализовать отправку на определенные email адреса заполненных пользователями данных формы при отправке формы.

Рис. 1 Таблица, с полученными данными формы

Для создания скрипта в Spreadsheet необходимо в меню сделать переход «Инструменты» → “Редактор скриптов». В появившемся окне необходимо выбрать пункт «Создать пустой проект».
Появится вкладка с редактором (Рис. 2).

Рис. 2

function sendOnSubmit(e){
  // Тестовый вариант триггера с отправкой всех данных
  var messageString="",
      data = e.namedValues;// исходный объект с заполненными данными
/*  То как выглядят данные от формы — json с заголовками колонок и их значения:
{"Разрешает обработку данных":["желает подписаться"],"Наименование  
организации":["zanussi"],"Желаемый срок кредитования (в  
мес.)":["12"],"Регион в котором осуществляется  
деятельность":["Москва"],"Контактный номер телефона":["+7 (122)  
222-22-22"],"Электронная почта":["www333@mail.ru"],"Желаемая сумма в  
рублях":["10 000 000"],"Как к Вам обращаться":["леопольд2"],"Отметка  
времени":["26.11.2012 22:57:14"]}
Приводим полученный объект к виду удобном для восприятия: */
  
  for(var key in data){
    messageString+=key+" : "+(data[key]&&data[key][0]?data[key][0]:JSON.stringify(data[key]))+"\r\n";
  }
  
  MailApp.sendEmail("mail@yandex.ru", "Заявка", messageString);
}

В данном редакторе можно создать как обычные запускаемые функции (через меню), так и запускаемые по событиям. Такие функции могут принимать в качестве аргумента объект события.
Так функция sendOnSubmit(e) — получает объект e, в котором свойство e.namedValues содержит в JSON формате значения заполненных полей. Объект e.namedValues «обрабатывается» в текстовое сообщение (messageString), которое затем рассылается по email адресам с помощью метода MailApp.sendEmail() .

Теперь осталось созданную функцию привязать к событию отправки формы.
Во вкладке с редактором кода переходим в меню «Ресурсы» → “Триггеры текущего скрипта”.
Появится диалоговое сообщение о необходимости настройки Триггеров текущего проекта (если они не были настроены) (Рис. 3).

Рис. 3

Кликаете по гиперссылке. Должно появиться окно с настройкой триггера (Рис. 4).

Рис. 4

В открывшемся окне необходимо выбрать нужную функцию, «Из таблицы» и событие «Отправка формы». Нажимаете кнопку «Сохранить».
Теперь от Вас потребуются подтвердить ваши действия. А именно разрешения на отправку почты. Ведь все сделанное будет выполняться от вашего имени (учетной записи). Даже почту будет отправляться от вашего gmail профиля.

«Авторизуемся» и окончательно сохраняем триггер.