misc/class
lib/jquery_pnotify, lib/moment, lib/lodash, misc/notification, site/engine, misc/social
if( $.browser.msie && $.browser.version <= 8 ) include('lib/respond'); $._social.__cfg = {"init":[{"service":"basic"},{"fb_app_id":"1997094873850041","service":"fb"},{"vk_app_id":"2978320","service":"vk"},{"service":"twi"}],"like":[{"service":"fb"},{"service":"vk"},{"via":"","channel":"","hash_tag":"","service":"twi"}]}; window._SiteEngine = new classes.SiteEngine( { user_id: 0, controller: 'homepage', action: 'index', content_css_version: '1459538664', social_enabled: 0} );

Faiwer

Блог web-программиста

IT Заметки про OSX, часть 2

1 апреля 2016

  1. dmg файлы всё таки открываются, это установщики. Образы директорий. Для установки может потребоваться изменить настройки безопасности, чтобы можно было устанавливать ПО из неблагонадёжных источников. А так как в Store практически ничего нет…
  2. Похоже, что для OSX в целом характерно не показывать никаких ошибок, будто их нет. Упало и упало. 
  3. Для открытия zip-архивов есть предустановленная софтина, похоже запароленные zip-архивы она не умеет. И как обычно никакой ругани. ПО просто молча падает и всё. Мде. Воспользовался The Unarchiver.
  4. Почти всё на 13" выглядит мелким. На DELL было также, но я сменил разрешение экрана на комфортное и стало зашибись... Теперь и тут. Видимо производители ультрабуков считают, что каждый ходит с лупой.
  5. Клик по неактивному окну не срабатывает, как клик по тому месту, куда вы кликнули. Он только активирует окно. Нужно повторно нажать, скажем на кнопку, чтобы её запустить. В принципе, это удобно.
  6. В зависимости от того, с какой стороны я смотрю на экран, сильно меняется картинка, вплоть до негатива. Печаль. Я уже отвык от таких экранов... Привык к IPS матрицам даже на телефонах.... На DELL XPS 13 экран гораздо лучше.
  7. Я всё ещё не понял, как пользоваться F1-12 кнопками. Вместо них срабатывают FN-кнопки. Видимо придётся гуглить ;)
  8. Dock-панель можно настраивать: размеры, расположение, анимации. Подумываю о том, чтобы разместить её сбоку, ибо по вертикали места маловато. Зато по вертикали всё на расстоянии одного движения на тачпаде.
  9. В обновлениях системы висело обновление штатного видео-редактора iMovie. Каких-то 2 GiB… Зачем он там такой огромный нужен?
  10. Без шамнаских бубнов переключение раскладки по capslock не настроить. Большая часть существующих гайдов на этот счёт устарела. В конечном счёте идея такая: устанавливается приложение, которое умеет заменять клики по capslock-у на какой-либо другой клик (например на клик по вирт. кнопке F19), а уже его биндить в настройках. Для его установки мне потребовалось обновлять систему.
  11. Похоже новая версия OSX пока не умеет ходить по SMB-шарам. Никакой LAN-сетки вобщем, грустно. А вот с Mint-а до AIR-а я добраться смог, причём по какому-то экзотичному протоколу. Но без бубнов, оно само взлетело. Причём получил полный картбланш к системе (о_О). 
  12. Помимо Store есть ещё homebrew. Это местный аналог aptitude. Принцип работы с ним примерно такой же, как и с apt-get. Сами приложения при этом устанавливаются как в nix-ах, а не в /Applications.
  13. Стандартный терминал неудобен, а цветовые схемы в нём просто ужасны. Буду искать другие решения. Или как-нибудь домкратить этот. Хотя бы не такой вырвиглазный шрифт поставлю.
  14. Я всё ещё не понял как жать клавишу delete. На клавиатуре её просто нет. А cmd+backspace срабатывает как delete только в Finder-е. 
  15. Диалоги сохранения и открытия файлы такие же убогие, как и в этих наших линуксах. Т.е. ничего кроме как выбрать файл сделать не позволяют, увы. Это один из тех пунктов где стоило бы равняться на Windows. Для показа скрытых файлов нужно жать не cmd+H или ctrl+H, а ctrl+shift+..
  16. Как и в Ubuntu, тут наличиствует sudo. Используется также.

IT Заметки про OSX, часть 1

30 марта 2016

Получил презент от конторы - заряженный MacBook AIR. Начал понемногу осваивать OSX. Честно говоря, я не думал, что она покажется мне такой странной после нескольких версий Windows и штук пяти различных Linux DE. Здесь почти всё подругому. Поэтому я решил, что имеет смысл строчить небольшие заметки про особенности OSX.

  1. Добавить второй язык в систему несложно. Это можно сделать в системных настройках. Настоящим же квестом было понять как тут переключать раскладки. Все стандартные известные мне схемы тут же дали сбой. Ни ctrl+shift, ни alt+shift, ни ctrl+alt, ни capslock... Оказывается cmd+пробел. Но.... И эта комбинация клавиш не работает. По ней запускается Spotlight поиск. Его нужно в настройках сочетаний клавиш предварительно отключить. Но... Всё равно не работает. Теперь нужно включить hotkeys для смены раскладки. Называется графа очень не очевидно: Inpus Sources -> Select the previous input sources.
  2. По-умолчанию все окна занимают не всю область экрана. Часть съедает системная панель, дофига и больше съедает докер, и приличный такой зазор остаётся по бокам. Через этот зазор виден рабочий стол. В чём смысл так нерационально тратить пространство я не понял.
  3. Набор кнопок у заголовка окна похож на привычный... Но кнопка закрытия окна закрывает окно, не выключая приложения. Как на android-е. Для выхода нужно воспользоваться какой-нибудь специальной опцией в меню.
  4. Кнопка развернуть работает как-то специфично. Как вернуть окну прежний размер я пока не понял. Можно навести мышь на то место где ранее был заголовок окна и подождать пока он появится. А там уже снова нажать на эту кнопку. Полагаю, что должны быть способы и поудобнее.
  5. Скроллить можно и неактивные окна. Тачпадом. Т.е. тачпад скроллит то окно, над которым курсор, не передавая в него фокус. Непривычное, но интересное поведение.
  6. В качестве проводника по файлам какое-то упрощённое приложение под названием Finder. В нём по умолчанию нет адресной строки. А может оной и вообще нет. По клавише enter при активном элементе не происходит перехода внутрь него... вместо этого система предлагает его переименовать. Backspace не возвращает вас на уровень выше, а вот cmd+вверх возвращает.
  7. Дебильная система со скроллбаром. Он отображается везде только тогда, когда вы скроллите. А до тех пор не всегда даже понятно, помещается ли весь контент в блок, или же его нужно проскроллить. UPD: это настраивается.
  8. На MacBook-ах очень удобный тачпад. Главная его идея в том, что он целиком является одной прожимаемой кнопкой. И клик будет защитан именно тогда, когда кнопка прожмётся. С характерным звуком. Гораздо удобнее, чем любой другой тачпад, которым мне приходилось пользоваться. Нет ложных срабатываний. Помимо прочего этот тачпад по разному реагирует на одно и два прикосновения одновременно. По сути тут есть дву-пальцевые жесты. Очень удобно скроллить ими.
  9. В стандартных интерфейсах ОС я часто сталкиваюсь с непониманием - сработала ли кнопка или нет. Обычно становится ясно только спустя некоторое время.
  10. По субъективным ощущениям ОС работает медленнее, чем мой аналогичный по железу Dell XPS 13. А ещё монитор не сенсорный и не переворачивается как на Dell-е :)
  11. Меню у всех приложений не в окнах, а верхней панели. Тянуться приходится далеко. Меня эта фича ещё в Unity раздражала. Впрочем Unity много странных UI решений из OSX спёр. Тот же поиск и докер.
  12. При копировании и переключении языка система всплывающей подсказкой уведомляет вас об этом. Классная фича. Мне на Mint-е такой не хватает.
  13. Даже текстовые комбинации клавиш другие. Придётся изучать новые. К примеру я пока не знаю, как перенести курсор на одно слово левее. Но нашёл альтернативу клавишам home и end: cmd+вправо и cmd+влево.
  14. С непривычки часто включаю контекстное меню на тачпаде двумя пальцами... случайно. 
  15. Хотел проставить браузер Vivaldi. Официальный сайт предложил мне скачать некий dmg-файл. Что с ним делать система не знает. Пока не разбирался почему. А в Store его пока нет. UPD: оказывается установщик просто молча дохнет, но таки запускается.
  16. Этот Store притча во языцах. По дурацки построенное, не очевидное и не продуманное приложение с кучей бюрократии. Прежде чем я смог установить yandex.disk оттуда мне пришлось по 10 раз заполнять одну и ту же форму, кликать одни и те же кнопки, пока я не понял что именно и в какой последовательности от меня хотят. Одна из форм чуть ли не мою родословную затребовала. 

IT V8 & unicode RegExp-ы

22 марта 2016

Не так давно в V8 движок добавили поддержку флага /u (т.е. поддержку unicode) для регулярных выражений. В nodeJS можно подключить флагом --harmony_unicode_regexps. Вот небольшой обзор по новым возможностям. При установленном флаге . понимает иероглифы, их же стало можно использовать в описании регулярного выражения без экранирования, появилась поддержка i флага.

Но! Они недобавили самого вкусного ― \p{L}. При помощи модификатора \p можно кратко описать многие вещи (см. раздел Unicode Categories). К примеру можно описать в пару символом регулярку, которая будет проверять принадлежность символа к алфавиту какого-либо языка. Например, /^\p{L}[\p{L}\d-_ ]+$/u отлично подойдёт для валидации имени пользователя, не поставив в незавидное положение ни грузин, ни китайцев, ни русских. Но отлично отфильтрует рандомный бред с клавиатуры.

Надеюсь, что это временно. А пока можно воспользоваться, к примеру, XRegExp-ом.

IT Подключаем HTTPS к Nginx за счёт Let’s Encrypt

21 марта 2016

Небольшая заметка про подключение letsencrypt на сайт с nginx сервером. За основу взял хабра-статью от @questor-а. Наша задача добавить поддержку https на сайт малой кровью. letsencrypt позволяет нам это сделать, взяв на себя всю чёрную работу по подготовке, выдаче, загрузке и обновлению сертификатов (подробнее). Всё нижеописанное я привожу для linux debian-like систем.

Принцип работы

Для подключения HTTPS необходимы сертификаты (для шифрования и аутентификации). Причём эти сертификаты должны быть выданными доверенными серверами, список которых вшит в браузеры. Обычно это дело было платным, но с недавних пор, появилось несколько доступных и бесплатных альтернатив. Одна из которых это Let’s Encrypt.

Let’s Encrypt выпускает сертификаты бесплатно и в автоматическом режиме на 3 месяца. Для работы с ним подготовлено ПО с открытым кодом и есть открытое API для взаимодействия вручную. Мы воспользуемся готовым рекомендованным ПО.

Принцип работы этого ПО заключается в том, что сервер запрашивает у letsencrypt-центра выпуск новых сертификатов для указанных доменным имён. Для этого letsencrypt-центр ломится на ваш сервер по конкретным URL-ам с этими доменными именами, и убеждается в том, что они принадлежат вам. Затем выпускает новые сертификаты и передаёт их на сервер сайта. ПО складирует их в указанной директории. Вам остаётся лишь подключить их к nginx и настроить автоматическое обновление по cron-у.

Подготовка, подключение и обновление под катом.

подробности…

IT Resize изображений на стороне браузера

21 марта 2016

В этой заметке я опишу, как, относительно несложным способом, можно организовать resize изображений на стороне браузера перед отправкой на сервер.

Для начала нам потребуется <input type="file"/>. Без него нам не открыть диалог для выбора файла. Чтобы вызвать его вручную необходимо в обработчике вида onclick (onkeydown и пр. отпадают из-за Firefox) вызвать file.click(). Вызвать диалог в произвольный момент времени не получится.

Отслеживаем изменение выбора файла по onchange. Сам же файл достаём из file.files[index]. Если наш <input/> работает не в multiple режиме, то index, соответственно, равен 0. Присмотревшись к свойствам этого объекта мы увидим его mime тип, размер, имя файла. Но не содержимое.

Для получения содержимого воспользуемся FileReader-ом.

const reader = new FileReader();
reader.onload = e => { e.target.result; /* base64 string */ };
reader.readAsDataURL(file);

Через него получаем DataURL вариант содержимого файла (асинхронно). Затем создаём новый Image, вешаем обработчик на onload, задаём этот dataURL ему как аттрибут src. В результате получаем валидный <img/> тег с загруженным готовым к использованию изображением.

Resize изображения будем осуществлять за счёт <canvas/>. У contextcanvas-а есть метод drawImage, который сделает за нас всю грязную работу. Ниже пример работы с ним (стояла задача вписать изображение в определённые рамки, но только если оно превышает эти сами рамки):

const canvas = document.createElement('canvas');

const w_ratio = img.width / width;
const h_ratio = img.height / height;
let ratio = Math.max(w_ratio, h_ratio);
if(ratio < 1)
	ratio = 1;

const w = Math.floor(img.width / ratio);
const h = Math.floor(img.height / ratio);

canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, w, h);
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, w, h);

return canvas.toDataURL('image/jpeg', 80);

Обратите внимание на то, что <canvas/> даже не обязательно цеплять к DOM-у браузера, и тем более делать его видимым. В результате получаем снова dataURL, но уже правильного вида и размера. Но что нам теперь с ним делать? 

Вариантов много. К примеру можно послать на сервер строкой, как и другие поля. Но можно воспользоваться FormData, и тогда работа с такой выдачей клиента ничем не будет отличаться от обычной:

const fd = new FormData(form);
fd.append('image', blob);

Обратите внимание на blob. Дело в том, что для маскировки под обычный input[type=file] нам нужно нашу dataURL перевести в Blob вариант. Я взял готовое решение со stackoverflow:

function dataUriToBlob(dataURI)
{
	let byteString;
	if( dataURI.split(',')[0].indexOf('base64') >= 0 )
		byteString = atob(dataURI.split(',')[1]);
	else
		byteString = window.unescape(dataURI.split(',')[1]);

	// separate out the mime component
	const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

	// write the bytes of the string to a typed array
	const ia = new Uint8Array(byteString.length);
	for(let i = 0; i < byteString.length; i ++)
		ia[i] = byteString.charCodeAt(i);

	return new Blob([ ia ], { type: mimeString });
}

Задача решена. Относительно без крови. Однако, мы воспользовались FormData, FileReader, Blob, Uint8Array,  Canvas. Тот же самый IE9 всего этого не умеет.