Дизайнер и код. Как я писал генератор превью попапа

Ввод
Отказаться от кнопки «Просмотреть» мне помог здравый смысл и события input, которое реагирует на каждое изменение текста в поле ввода, и change, которое сработает при потере фокуса с поля:

$(document).ready(function() {
$("#myTitle, #myDesc, #myBtn").on("input", delayChange);
$("#myTitle, #myDesc, #myBtn").on("change", doChange);
});

Чтобы после каждой набранной буквы весь текст не отправлялся в попап, я добавил функцию delayChange(). Она ждёт одну секунду, если больше не было нажатий, и отправляет обработанный текст в попап. Если же вставлять в поле скопированный текст и переходить сразу на следующее, то сработает событие change. Здесь задержка без надобности и достаточно функции doChange().

function doChange(e) {
obj = e.target;
var inpID = $(obj).attr("id");
$("."+inpID).html(nl2br(obj.value));
}
var timeout = null;
function delayChange(e) {
clearTimeout(timeout);
timeout = setTimeout(function() {
doChange(e);
}, 1000);
}

Добавление иллюстраций
Чтобы добавить иллюстрации, я вставил стандартный инпут , но чтобы стилизовать внешний вид под себя — подключил библиотеку FileInput.

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

После выбора файла, также как и с вводом текста, надо подставить его в попап. По знакомому нам событию change вызывается функция previewFile().

$(document).ready(function() {
$("#picture").on("change", previewFile);
});

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

function previewFile() {
var preview = document.querySelector("#mixpanel-notification-img");
var file = document.querySelector("input[type=file]").files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) { reader.readAsDataURL(file); }
}

Скачивание
Что представляет собой скачивание превью? Нужно текущее состояние блока попапа на html-странице превратить в растровое изображение и после скачать. Для этого решил использовать открытую библиотеку html2canvas. Она в общих чертах берёт содержимое указанного нами блока и отрисовывает, как графику, в элементе .

$(document).ready(function() {
$("#download").on("click", screenshot);
});
function screenshot() {
var canvasPromise  = html2canvas(document.getElementById("mixpanel-notification-mainbox"), {
useCORS: true
});
canvasPromise.then(function(canvas) {
saveAs(canvas.toDataURL("image/png"), "mixpanel-web.png");
});
}

Это только часть дела. Полученное в канвасе изображение нам ещё нужно скачать. Сразу после отрисовки вызывается функция saveAs(), которая создаёт временную ссылку для скачивания канваса и эмулирует клик по ней, подчищая всё за собой:

function saveAs(uri, filename) {
var link = document.createElement("a");
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
window.open(uri);
}
}

Ниже видно текущую версию генератора превью, через которую можно тестировать внешний вид иллюстраций и текста для новых рассылок. Для удобства я разместил его на отдельном домене, чтобы коллеги имели к нему доступ с любого устройства и можно было быстро вносить будущие улучшения в код.

Оглядываясь на проделанную работу всё кажется простым, но когда сталкиваешься с некоторыми вещами в первый раз, не всегда с ходу получается заставить их работать.

Например, я делал страничку локально и c html2canvas не работало скачивание, пока в консоли Хрома не обнаружил ошибку. При запуске из папки не выполнялся метод toDataURL: Хром считал, что в канвас попадают данные с другого домена и нарушается Same Origin Policy. Стоило загрузить генератор на хостинг и всё сразу заработало.

Заключение

Знать хотя бы немного код — отличный мастхев для дизайнеров. Вы сможете лучше понимать разработчиков и верстальщиков. Вы сможете самостоятельно делать простые прототипы и автоматизировать собственную работу. Да и лишний навык — это +1 балл в резюме и лишний 0 к возможной зарплате.

Я рекомендую хотя бы немного изучить языки программирования. Насколько глубоко? Каждый определяет сам, насколько это интересно и от наличия свободного времени.

Если не понравится — ок, у дизайнеров столько направлений для развития, что можно найти любое по душе. Не стоит заставлять себя изучать то, что не нравится, потому что это написали в вакансии или «все вокруг говорят, что надо». Вы так или иначе найдёте применение своим сильным сторонам.

Когда несколько строк кода немного улучшают жизнь , находишь в этом особое очарование. Если нравится это направление, то находишь время для практики, идёшь к поставленным целям и запускаешь свои проекты. Я по-прежнему не обладаю сильными знаниями в языках программирования, но мне нравится работать с кодом. И это главное.