{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Здоровий глузд: дописи з тегом автоматизація",
    "_rss_description": "Олександр Колодько. Інформаційний та навігаційний дизайнер. Співзасновник команди ARC, співзасновник та головний дизайнер в Агентах змін (А3). Пишу про дизайн і цікаве мені · alexkolodko.com · wayfinding.systems",
    "_rss_language": "uk",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/blog-archive.alexkolodko.com\/tags\/avtomatizaciya-2\/",
    "feed_url": "https:\/\/blog-archive.alexkolodko.com\/tags\/avtomatizaciya-2\/json\/",
    "icon": "https:\/\/blog-archive.alexkolodko.com\/pictures\/userpic\/userpic@2x.jpg?1768915547",
    "authors": [
        {
            "name": "Олександр Колодько",
            "url": "https:\/\/blog-archive.alexkolodko.com\/",
            "avatar": "https:\/\/blog-archive.alexkolodko.com\/pictures\/userpic\/userpic@2x.jpg?1768915547"
        }
    ],
    "items": [
        {
            "id": "166",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/automation-shortcuts-macos-ocr\/",
            "title": "Швидке розпізнавання тексту з екрана чи файлів у macOS",
            "content_html": "<p>Ті, хто користуються macOS починаючи з версії 11, могли помітити, що у Preview є можливість виділяти та копіювати текст з зображень. У систему вбудований непоганий розпізнавач тексту (OCR). Але не всі знають, що його можна викликати не тільки у Preview, а застосувати до будь-чого.<\/p>\n<p>За допомогою Shortcuts я створив два сценарії розпізнавання тексту: з виділеної частини екрана, як при скриншоті, та з вибраного файлу у Finder. Результат копіюється образу в буфер і його можна образу вставляти куди треба. При цьому можна також додати гарячі клавіші для виклику кожного, наприклад, для розпізнавання з екрану у мене це ⌘7.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/automation-shortcuts-macos-ocr-1.png\" width=\"2400\" height=\"1564\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/automation-shortcuts-macos-ocr-2.mp4#t=0.001\" width=\"2560\" height=\"1604.4444444444\" controls alt=\"\" \/>\n\n<\/div>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/automation-shortcuts-macos-ocr-3.mp4#t=0.001\" width=\"2560\" height=\"1604.4444444444\" controls alt=\"\" \/>\n\n<\/div>\n<p>Нижче викладаю самі файли Shortcuts, які можете додати собі. Продуктивної роботи всім 🦾<\/p>\n<ul>\n<li><a href=\"https:\/\/www.icloud.com\/shortcuts\/dd40af84219846368d24a2222b110d4b\">Розпізнавання з частини екрану<\/a><\/li>\n<li><a href=\"https:\/\/www.icloud.com\/shortcuts\/295019a1b8a14a1095ac99f5fa961a62\">Розпізнавання з файлу<\/a><\/li>\n<\/ul>\n",
            "date_published": "2026-01-25T19:28:43+02:00",
            "date_modified": "2026-01-25T19:28:39+02:00",
            "tags": [
                "automator",
                "mac os x",
                "shortcuts",
                "автоматизація"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/automation-shortcuts-macos-ocr-1.png",
            "_date_published_rfc2822": "Sun, 25 Jan 2026 19:28:43 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "166",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/automation-shortcuts-macos-ocr-1.png"
                ]
            }
        },
        {
            "id": "163",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/qa-design-and-coding\/",
            "title": "QA: Кодинг у дизайні",
            "content_html": "<p><b>Q: Привіт! Хотів спитати, бо я іноді заходжу на твій сайт, і часто бачу кодінг. Як взагалі відносишся до кодінгу у дизайні? думаю, може варто вивчити щось і закодіть, бо я бачу ти часто використовуєш програмування у дизайні<\/b><\/p>\n<p>A: В принципі, для дизайну, як такого, кодінг не потрібен. Це просто додатковий інструмент для спрощення деяких видів задач у повсякденній роботі. Або ж можливість самостійно можна закривати більшу частину рутини, без додаткової комунікації (комусь, як мені, це в плюс 😅).<\/p>\n<p>Мені нещодавно сказали, що вже є термін Design Engineer, про дизайнерів-кодерів. Виходить це оформлюється в цілий напрям, особливо з розвитком технічних інструментів.<\/p>\n<p>Ще мені особисто просто подобається програмування, я його розумію і тому, напевно, часто використовую. Але мої знання все одно неглибокі, я досконало не знаю жодної мови програмування.<\/p>\n<p>Основне — розуміти алгоритми, як взагалі працюють будь-які програми (змінні, умови, цикли, типи даних тощо). З цим знанням вже можна пошукати в Гуглі рішення чи приклади коду на Stackoverflow в цей алгоритм. Зараз все частіше ще питаю у ChatGPT\/Gemini\/Claude3 і вони все частіше видають робочий код.<\/p>\n<p>І дивлячись на практики розробників, можна собі в дизайн роботу щось теж взяти. Наприклад CI\/CD (continuous integration and continuous delivery). Це автоматична збірка коду, його тестування та публікація. Це дозволяє дуже швидко вносити зміни.<\/p>\n<p>У дизайні цей приклад можна порівняти з підтримкою проєкта та оновленням макетів.<\/p>\n<p>Наприклад, схема метро має кілька видів: у вагон біла, у вагон прозора, на стенди та на стінах швидкісний трамвай (при чому з відміткою на кожній станції, це 18 макетів). Коли перейменовують якусь станцію чи відбуваються якісь зміни, то потрібно оновлювати цей весь парк.<\/p>\n<p>Є два основних макети в АІ: біла схема і темна. Далі всі світлі через різні шаблони в ID готуються під різні розміри (вагон, стенд, трамвай). А в кінці окремі скрипти нарізають, масштабують і перейменовують однаково всі трамвайні схеми. Щось ще перезберігається в TIFF, бо так вимагає типографія.<\/p>\n<p>Налаштування цього займає певний час, але потім окупається. Бо робити це все руками при кожному оновленні займає кожен раз купу часу. Якщо ви стикаєтесь з тим що вже більше трьох разів робите одні і ті самі дії, то можна подумати як то автоматизувати. Бо один раз це випадковість, два — збіг, три — тенденція 😌<\/p>\n<p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>?<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Якщо у вас є питання або приклад дизайну, які потрібно подивитись та прокоментувати, напишіть на <a href=\"mailto:alexkolodko@gmail.com\">пошту<\/a> або у <a href=\"https:\/\/t.me\/alexkolodko\">телеграм<\/a>.<\/p>\n<\/div><\/div>",
            "date_published": "2024-09-29T15:13:08+02:00",
            "date_modified": "2024-09-29T15:13:05+02:00",
            "tags": [
                "q\/a",
                "автоматизація",
                "дизайн"
            ],
            "_date_published_rfc2822": "Sun, 29 Sep 2024 15:13:08 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "163",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "148",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/automation-excel-and-word\/",
            "title": "Автоматизація Excel та Word",
            "content_html": "<p>Гарний <a href=\"https:\/\/x.com\/MisterDimon\/status\/1801676484093816850\">тред<\/a> про автоматизацію документів у ЗСУ на основі шаблонів Word та даних в Excel.<\/p>\n<blockquote class=\"twitter-tweet\"><p lang=\"uk\" dir=\"ltr\">Може комусь згодиться. Тред, як я роблю 100 рапортів на відпустку менше ніж за 10 хвилин🧵<\/p>\n<p>&mdash; Mr.Dimon (@MisterDimon) <a href=\"https:\/\/twitter.com\/MisterDimon\/status\/1801676484093816850?ref_src=twsrc%5Etfw\">June 14, 2024<\/a><\/p>\n<\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<p>Ще:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.google.com\/document\/d\/1h8wstTB5kuBmGWpUb3ro4v56_4QcxFeqObB06d0mTVQ\/edit\">Тред, як один Google Doc<\/a><\/li>\n<li><a href=\"https:\/\/www.dropbox.com\/scl\/fi\/ickva9ob4k7i3jmfbso9c\/Excel-Word.pdf?rlkey=13jk6e89ykpz8lpn3t5vvfpf6&dl=0\">Тред, як PDF<\/a><\/li>\n<\/ul>\n<p><hr><\/p>\n<p>Дано: треба зробити 100 рапортів на відпустку для військовослужбовців. Для прикладу візьмемо уявну базу даних в Excel із В\/Ч де служать 100 найбагатших зі списку Форбс 2021 (у прикладі всі адреси і телефони, посади і звання вигадані)<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXOXOWYAAeiwr.jpeg\" width=\"1628\" height=\"909\" alt=\"\" \/>\n<\/div>\n<p>Щоб це зробити я користуюсь функцією «злиття» у Word. Тепер покроково. Підготуємо шаблон рапорту на відпустку (за основу взято зразок із turbota.mil.gov.ua) виділяємо жирним або курсивом поля, які треба змінити: адреса, телефон, звання, посада, ПІБ, ПІБ в родовому відмінку<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXPIzW4AEJO7y.jpeg\" width=\"1929\" height=\"1039\" alt=\"\" \/>\n<\/div>\n<p>Далі переходимо у вкладку «Розсилки». Вибираємо «Розпочати злиття» і «Майстер злиття електронних повідомлень»<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXPx-XEAAMKGQ.jpeg\" width=\"1920\" height=\"969\" alt=\"\" \/>\n<\/div>\n<p>Справа відкриється вікно для злиття документів. У перших двох кроках нічого не змінюємо. На першому кроці залишаємо «Листи». Переходимо до другого кроку і там лишаємо «Поточний документ»<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXQgMXsAAxowW.jpeg\" width=\"1929\" height=\"983\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXQgUWMAAFccW.jpeg\" width=\"1929\" height=\"983\" alt=\"\" \/>\n<\/div>\n<p>На третьому кроці лишаємо активним «Використання списку». Далі натискаємо «Огляд» та вибираємо файл Excel зі створеним списком військовослужбовців, яким треба зробити рапорт<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXRIvW4AATqCH.jpeg\" width=\"1845\" height=\"803\" alt=\"\" \/>\n<\/div>\n<p>Якщо у файлі Excel було декілька аркушів, то обираємо той, де внесені наші дані<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXRuaWMAE9Noc.jpeg\" width=\"1908\" height=\"964\" alt=\"\" \/>\n<\/div>\n<p>У наступному вікні відкриється наш список із військовослужбовцями і їх даними. При потребі його можна редагувати використовуючи доступні у вікні параметри. Я ж лишаю все без змін<\/p>\n<p>Переходимо до четвертого кроку. Заповнюємо поля, які мають змінюватися. Виділяємо текст, який буде змінюватися, наприклад «адреса». У вікні «Злиття», тому що справа обираємо «Інші елементи»<br \/>\nта додаємо поле злиття адреса<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXS7nWEAAoZyM.jpeg\" width=\"1920\" height=\"969\" alt=\"\" \/>\n<\/div>\n<p>І так покроково робимо зі всіма полями для злиття<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXS7oXAAADIgA.jpeg\" width=\"1926\" height=\"966\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXSWbXAAAGOx2.jpeg\" width=\"1923\" height=\"975\" alt=\"\" \/>\n<\/div>\n<p>Переходимо до пʼятого кроку і бачмо, що всі поля для злиття змінилися на дані, що були у нашій Excel таблиці. Якщо натискати на стрілки у вікні «Злиття» то вони будуть відповідно змінюватися<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXTugWQAAhNCC.jpeg\" width=\"1024\" height=\"532\" alt=\"\" \/>\n<\/div>\n<p>На завершальному шостому кроці зберігаємо результати у 100 рапортів. Для цього у вікні «Злиття» обираємо «Змінити окремі листи», або зверху у вкладці розсилки обираємо «Завершити і обʼєднати». Залишаємо активним поле «Усі» та натискаємо ОК<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXUrEXIAA4DRN.jpeg\" width=\"1024\" height=\"520\" alt=\"\" \/>\n<\/div>\n<p>На виході отримуємо 100 рапортів. При потребі, перевіряємо чи немає помилок і друкуємо<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXVH-W8AELc4w.jpeg\" width=\"1899\" height=\"984\" alt=\"\" \/>\n<\/div>\n<p>Дякую, всім хто дочитав до кінця. Якщо інформація була корисною пишіть і діліться своїми лайфхаками, що спрощують боротьбу зі святою українською бюрократією😉<\/p>\n<p><hr><\/p>\n<p>Від себе додам ще посилання:<\/p>\n<p><b>Зразки документів від МО<\/b><\/p>\n<p><a href=\"https:\/\/turbota.mil.gov.ua\/zrazky-documentiv\">https:\/\/turbota.mil.gov.ua\/zrazky-documentiv<\/a><\/p>\n<p><b>Зразки рапортів<\/b><br \/>\nЩе один сайт з рапортами<\/p>\n<p><a href=\"https:\/\/legal100.org.ua\/uchasnykam-rosiisko-ukrainskoi-viiny\/zrazky-raportiv-ta-zaiav\/\">https:\/\/legal100.org.ua\/uchasnykam-rosiisko-ukrainskoi-viiny\/zrazky-raportiv-ta-zaiav\/<\/a><\/p>\n<p><b>Інструменти і поради з автоматизації документів від Bot&Partners<\/b><br \/>\nПідбірка інструментів автоматизації документів (ворд, ексель, гугл тощо):<\/p>\n<p><a href=\"https:\/\/bot-partners.notion.site\/f8233690f8554651adb43f144231c83c\">https:\/\/bot-partners.notion.site\/f8233690f8554651adb43f144231c83c<\/a><\/p>\n<p><b>Doc Variables (Google Docs)<\/b><br \/>\nРозширення для Гугл Документів для замінили зміниих у тексті документу. Воно працює в межах одного документу, без таблиць.<\/p>\n<p><a href=\"https:\/\/workspace.google.com\/u\/0\/marketplace\/app\/doc_variables\/232821636920\">https:\/\/workspace.google.com\/u\/0\/marketplace\/app\/doc_variables\/232821636920<\/a><\/p>\n<p><b>Відмінювання ПІБ<\/b><br \/>\nРобив простий сайт де можна пачкою закинути і відмінювати піб. Щоб вставити в таблицю і з неї вже автоматизовувати. Робив для знайомого діловоду.<\/p>\n<p><a href=\"http:\/\/pib.a3.kyiv.ua\/\">http:\/\/pib.a3.kyiv.ua\/<\/a><\/p>\n<p>Там є режим де всі відмінки разом і кнопка приведення до формату на документи.<\/p>\n<p><a href=\"http:\/\/pib.a3.kyiv.ua\/all\">http:\/\/pib.a3.kyiv.ua\/all<\/a><\/p>\n<p><b>Заповнення ПДФ-форм<\/b><br \/>\nКористуватись для заповнення PDF, як окремої форми можна цим:<\/p>\n<p><a href=\"https:\/\/phihag.github.io\/pdfform.js\/docs\/demo.html\">https:\/\/phihag.github.io\/pdfform.js\/docs\/demo.html<\/a><\/p>\n",
            "date_published": "2024-06-15T10:44:45+02:00",
            "date_modified": "2024-07-31T10:37:00+02:00",
            "tags": [
                "excel",
                "word",
                "автоматизація"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXOXOWYAAeiwr.jpeg",
            "_date_published_rfc2822": "Sat, 15 Jun 2024 10:44:45 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "148",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXOXOWYAAeiwr.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXPIzW4AEJO7y.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXPx-XEAAMKGQ.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXQgMXsAAxowW.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXQgUWMAAFccW.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXRIvW4AATqCH.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXRuaWMAE9Noc.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXS7nWEAAoZyM.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXS7oXAAADIgA.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXSWbXAAAGOx2.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXTugWQAAhNCC.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXUrEXIAA4DRN.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/GQDXVH-W8AELc4w.jpeg"
                ]
            }
        },
        {
            "id": "147",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/adobe-illustrator-and-indesign-scripts\/",
            "title": "Скрипти Adobe Illustrator та InDesign",
            "content_html": "<p>У роботі все частіше якісь повторювані дії переношу у скрипти. І створив підбірку своїх місцями доволі простих скриптів і хочу з вами поділитись<\/p>\n<p>Сторінка:<\/p>\n<blockquote>\n<p><a href=\"https:\/\/alexkolodko.github.io\/adobe-scripts\/\">alexkolodko.github.io\/adobe-scripts<\/a><\/p>\n<\/blockquote>\n<p>Репозиторій на Github:<\/p>\n<blockquote>\n<p><a href=\"https:\/\/github.com\/alexkolodko\/adobe-scripts\">github.com\/alexkolodko\/adobe-scripts<\/a><\/p>\n<\/blockquote>\n<h3>Найцікавіші скрипти<\/h3>\n<p>Масштабує об’єкти у заданій пропорції, наприклад, якщо є макет наліпки на якій qr-код розміром 50×50, а потрібно масштабувати весь макет під розмір коду 80×80 (не у відсотках).<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/scale-objects-x2.mov#t=0.001\" width=\"1852\" height=\"1360\" controls alt=\"\" \/>\n\n<\/div>\n<p>По розміру шрифту рахує приблизну відстань читабельності і це можна вивести текстом;<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/font-distance-readability-x2.mov#t=0.001\" width=\"1852\" height=\"1360\" controls alt=\"\" \/>\n\n<\/div>\n<p>Нумерує об’єкти зліва-направо та зверху-вниз, наприклад, щоб пронумерувати варіанти дизайну;<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/numbering-objects-x2.mov#t=0.001\" width=\"1852\" height=\"1360\" controls alt=\"\" \/>\n\n<\/div>\n<p>Виводить текстом всі кольори CMYK вибраних об’єктів.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/list-of-cmyk-colors-x2.mov#t=0.001\" width=\"1998\" height=\"1440\" controls alt=\"\" \/>\n\n<\/div>\n<p><hr><br \/>\nУ створенні скриптів мені дуже допомагає ChatGPT, я його навіть співавтором вказав 😅.<\/p>\n<p>Рік тому писав про автоматизацію з ChatGPT: <a href=\"https:\/\/blog.alexkolodko.com\/all\/adobe-scripting-with-chatgpt\/\">частина 1<\/a> та <a href=\"https:\/\/blog.alexkolodko.com\/all\/design-automation-with-chatgpt-part2\/\">частина 2<\/a>. Весь час користувався суто безкоштовною версією ChatGPT 3.5, так і не купив доступ до версії 4, але результат і без того виходив робочий. Також за цей час порівнював і інші моделі (MS Copilot, Claude), але вони видають гірший результат коду, який частіше не працює.<\/p>\n<p>І ще нагадаю, що <a href=\"https:\/\/github.com\/agentyzmin\/adobe-scripts\">в А3 теж є гарні скрипти транслітерації та збереження файлів<\/a>, може будуть корисні.\u2028<\/p>\n",
            "date_published": "2024-06-10T22:29:54+02:00",
            "date_modified": "2024-06-10T22:29:45+02:00",
            "tags": [
                "інструменти",
                "автоматизація"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/github-as.png",
            "_date_published_rfc2822": "Mon, 10 Jun 2024 22:29:54 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "147",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/github-as.png"
                ]
            }
        },
        {
            "id": "132",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/url-shortener-with-qr\/",
            "title": "Скорочувач посилань на своєму сайті та генерація QR-кодів",
            "content_html": "<p>Під час роботи над проєктом ознакування в заповіднику Тустані стикнувся з задач показувати на табличках QR код з більш детальною інформацією про обʼєкти. Але самі посиланні вели на <a href=\"https:\/\/wiki.tustan.ua\/index.php\/%D0%9F%D0%B5%D1%80%D1%88%D0%B0_%D0%BB%D1%96%D0%BD%D1%96%D1%8F_%D0%BE%D0%B1%D0%BE%D1%80%D0%BE%D0%BD%D0%B8\">wiki-сайт<\/a>, тому посилання були дуже довгими. Відповідно QR-коди містили більше точок і потреб вали більших розмірів, інакше камера їх просто не зчитувала. Тому треба було мати короткі посилання, які б перенаправляли на потрібні сторінки. Тоді це питання вирішив якось адмін сайту.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2348\" data-ratio=\"1.8117283950617\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/tustan-2.png\" width=\"2348\" height=\"1296\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/tustan-1.png\" width=\"2140\" height=\"1604\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\"><a href=\"https:\/\/guide.tustan.ua\/preview\/1\/guide\/1?ui.scrollTo=%D0%97%D1%83%D0%BF%D0%B8%D0%BD%D0%BA%D0%B0%201&ui.player=%D0%97%D1%83%D0%BF%D0%B8%D0%BD%D0%BA%D0%B0%201&ui.collapsible.expand=%D0%97%D1%83%D0%BF%D0%B8%D0%BD%D0%BA%D0%B0%201\">Довге посилання<\/a>, що перенаправляє потім в апці на потрібний розділ<\/div>\n<\/div>\n<p>Потім вже в іншому кейсі стикнувся з необхідністю зробити на табличці QR, який в майбутньому можна було б змінити чи перенаправити.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/irpin.jpeg\" width=\"951\" height=\"960\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Табличка біля монумента в Ірпені<\/div>\n<\/div>\n<p>Авжеж є різні сервіси, на кшталт bit.ly, але опція зміни посилань платна і заради одного-двох випадків не вартує того. Окрім цього будь-які зовнішні сервіси можуть в якусь мить закритись і ніяких даних потім не лишиться, на відміну від надрукованого десь посилання.<\/p>\n<p>Тож я пішов пошукати альтернативи та знайшов два непоганих методи, якщо ви маєте свій сайт чи хостинг. Можливо посилання буде вже не таке коротке, як це було б з коротким доменом, але це дасть зручний інтерфейс, який коротко та у зрозумілому вигляді передавати якісь довгі посилання на ті ж Гугл Документи чи інші сторінки.<\/p>\n<h2>htaccess — шлях адміна<\/h2>\n<p>Якщо ви адміністратор сайту, то логічно можна прописати редіректи (перенаправлення) у файлі <i>.htaccess<\/i>. Але це дещо складно адмініструвати та треба знати як.<\/p>\n<p>Наприклад, коли ми міняли структуру сайту А3, то зробили додаткові редіректи, щоб працювали посилання, які були десь використані раніше: <i><a href=\"http:\/\/a3.kyiv.ua\/metromap\">a3.kyiv.ua\/metromap<\/a> <\/i> → <i><a href=\"http:\/\/a3.kyiv.ua\/projects\/metromap\">a3.kyiv.ua\/projects\/metromap<\/a><\/i>.<\/p>\n<p>Рядок у файлі виглядає так:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">Redirect \/metromap \/projects\/metromap<\/code><\/pre><h2>JS + TXT — найпростіше рішення<\/h2>\n<p>Інше рішення яке я знайшов — <a href=\"https:\/\/github.com\/robsd\/js-url-shortener\">js-url-shotener<\/a> — це JS-скрипт, який зчитуватиме введену адресу та окремий TXT-файл в якому зберігатимуться самі редіректи. У самому текстовому файлі перенаправлення записуються у дуже простому вигляді: коротке посилання, далі стрілка з символів <i>=><\/i> і далі довге посилання.<\/p>\n<blockquote>\n<p><i>Shortlink => Longlink<\/i><\/p>\n<\/blockquote>\n<p>І далі використовуємо  посилання має бути через символ решітки #. Наприклад, якщо ми розмістимо скрипт і текстовий файл у піддиректорії з назвою l, то коротке посилання матиме вигляд:<\/p>\n<blockquote>\n<p><a href=\"https:\/\/wayfinding.systems\/l#a\"> wayfinding.systems\/l#a <\/a><\/p>\n<\/blockquote>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/js&txt-x2.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Як працює скрипт<\/div>\n<\/div>\n<p>Плюси:<\/p>\n<ul>\n<li>Все працює максимально просто, як текст.<\/li>\n<li>Якщо посилання зникне чи буде не потрібно, то коротке посилання вестиме на головний сайт і не видаватиме помилку.<\/li>\n<\/ul>\n<p>Мінуси:<\/p>\n<ul>\n<li>Потрібно додавати до адреси символ #.<\/li>\n<li>Немає адмінки та статистики переходів чи якоїсь аналітики.<\/li>\n<\/ul>\n<h3>Додаємо адмінку<\/h3>\n<p>А в якості адмінки, яка дасть доступ не через FTP, а прямо на сайті, є простий файловий менеджер на PHP — <a href=\"https:\/\/github.com\/pheditor\/pheditor\">Pheditor<\/a>.<\/p>\n<p>NB: Якщо розмістити всі файли та піддиректорії, то Pheditor матиме доступ тільки до них, а та решти сайту ні.<\/p>\n<blockquote>\n<p><i>site.com\\l\\<\/i><\/p>\n<\/blockquote>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/pheditor-x2.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Як працює адмінка Pheditor<\/div>\n<\/div>\n<h2>Yourls — PHP-рішення зі зручною адмінкою та <s>блекджеком<\/s> плагінами<\/h2>\n<p>Якщо маєте хостинг з підтримкою PHP, то є гарне опенсорс рішення, яке ви можете встановити, наприклад, на піддомені — движок <a href=\"https:\/\/yourls.org\/\">Yourls<\/a>. По факту база даних з адмінкою, в якій ви вписуєте довге посилання і короткий відповідник. Сервіс містить аналітику для відстеження кількості переходів та звідки були ці переходи.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/yourls-site.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Сайт Yourls<\/div>\n<\/div>\n<p>Приємний плюс — можливість створити свій плагін, що розширятиме функції сайту або знайти <a href=\"https:\/\/github.com\/YOURLS\/awesome\">у цій прекрасній галереї<\/a> вже готовий. Також можна створити свою тему оформлення, якщо хочете зробити сайт подібним до інших своїх сторінок.<\/p>\n<p>Для оформлення рекомендую тему <a href=\"https:\/\/sleeky.flynntes.com\/\">Sleeky<\/a>, яка виглядає найбільш сучасно і простою. Плюс ця тема містить модуль для додавання посилань без входу в адмінку, може буде корисно і можна цю сторінку оформити під себе.<\/p>\n<h2>Бонус: плагін, що генерує QR-код<\/h2>\n<p>Захотілось мати можливість швидко створити QR-код для нових коротких посилань.<\/p>\n<p>Тож <a href=\"https:\/\/github.com\/alexkolodko\/yourls-local-qr-code\/tree\/main\">зробив плагін<\/a>, який при додаванні до посилання сполучення <i>.qr<\/i>, на сайті відкривається окрема сторінка зі згенерованим кодом який можна зберегти у векторних форматах SVG та PDF, або растрових PNG та JPG.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/yourls-short-qr-x2.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Як працює плагін<\/div>\n<\/div>\n<p>Стиль QR-коду за замовчуванням чорний на прозорому тлі, але через параметри можна на це впливати. Наприклад, жовтий код (ff0, без символу #), тло кольору tomato та відступ від краю у 3 клітинки:<\/p>\n<ul>\n<li>color=ff0<\/li>\n<li>background=tomato<\/li>\n<li>padding=3<\/li>\n<\/ul>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/qr-custom.png\" width=\"1600\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<p>Якщо ви хочете зафіксувати стиль, який буде застосовувати одразу при генерації, то у файлі плагіну<i> plugin.php<\/i> пропишіть потрібні параметри, тоді вони передаватимуться разом з текстом.<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">header(&#039;Location: \/qr?content=&#039;.YOURLS_SITE.&#039;\/&#039;.$keyword.&#039;&amp;color=ff0&amp;background=tomato&amp;padding=3&#039;);<\/code><\/pre><p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>₴<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️, задонатити чи підписатись:<\/p>\n<ul>\n<li style=\"margin-bottom:0;\">на <a href=\"https:\/\/base.mono.bank\/EDCkFUWg3Tp64e\">Базу<\/a><\/li>\n<li style=\"margin-bottom:0;\">на <a href=\"https:\/\/www.buymeacoffee.com\/alexkolodko?l=uk\">Buy Me a Coffee<\/a><\/li>\n<li style=\"margin-bottom:0;\">напряму <a href=\"https:\/\/alexkolodko.com\/pay\/\">на картку Монобанку<\/a> або <a href=\"https:\/\/send.monobank.ua\/5jVrTaRziu\">через сайт<\/a>.<\/li>\n<\/ul>\n<\/div><\/div>",
            "date_published": "2024-02-09T18:58:17+02:00",
            "date_modified": "2024-02-10T13:18:44+02:00",
            "tags": [
                "qr",
                "інструменти",
                "автоматизація"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/tustan-2.png",
            "_date_published_rfc2822": "Fri, 09 Feb 2024 18:58:17 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "132",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js",
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/tustan-2.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/tustan-1.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/irpin.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/yourls-site.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/qr-custom.png"
                ]
            }
        },
        {
            "id": "130",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/link-to-images-from-gdrive-to-gsheet\/",
            "title": "Додаємо у Google Sheets посилання на всі файли у теці Google Drive",
            "content_html": "<p>Досліджував автоматизацію у Фігмі (напишу окремо). В ній для автоматизованого додавання картинок, потрібно давати на них прямі посилання. Можна завантажувати файли на FTP або копіювати напряму з сайтів. Але часто це не дуже зручно і якщо ви працюєте з Google Drive та тримаєте там робочі файли, то буває потрібно отримати прямі посилання на картинки у Драйві.<\/p>\n<p>Також буває необхідно скопіювати багато прямих посилань на файли, наприклад, щоб вставити їх у брендбук або відправити клієнту.<\/p>\n<p>Тож я створив простий гугл-скрипт для використання Google Sheets. Працює так:<\/p>\n<ol start=\"1\">\n<li>Додаєте до вашої таблиці скрипт через <i>Extensions\/Apps Script<\/i>, вставляєте код, запускаєте та даєте всі доступи до вашого облікового запису, оновлюєте сторінку з таблицею.<\/li>\n<li>У комірку <i>A1<\/i> вставляєте посилання на теку у Драйві (вона може бути як публічною, так і ні), треба взяти посилання з вікна <i>Share<\/i>, яке містить в собі …\/<i>folder\/…<\/i>.<\/li>\n<li>У меню з’явиться новий пункт Links to files, в якому можна вибрати один з варіантів.<\/li>\n<li>Скрипт створить заголовки колонок і вставить всі дані у рядки нижче.<\/li>\n<\/ol>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/List-Files-in-Folder---Demo-x2.mov#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<\/div>\n<p>Скрипт виводить такі колонки:<br \/>\n- <b>Name<\/b> — повна назва файлу<br \/>\n- <b>Type<\/b> — розширення файлу, знаходить по назві файлу<\/p>\n<ul>\n<li><b>Date<\/b> — дата та час зміни файлу<\/li>\n<li><b>Size, KB<\/b> — розмір у КБ<br \/>\n- <b>URL<\/b> — посилання на файл (якщо вся тека доступна для перегляду не тільки вам, то всі файли в ній теж будуть доступні)<br \/>\n- <b>URL Download<\/b> — інший формат прямого посилання на файли, який можна використати, наприклад, щоб вставити картинку у таблицю функцією <i>=IMAGE()<\/i>.<\/li>\n<\/ul>\n<p>Я зробив кілька варіантів функцій у скрипті:<\/p>\n<ol start=\"1\">\n<li>Вивід всіх файлів по черзі у певній теці.<\/li>\n<li>Вивід окремих типів файлів (картинки, відео, документи тощо).<\/li>\n<li>І окремою опцією вивід всіх файлів у тій теці та у всіх підтеках (додається ще колонка Folder з назвою теки).<\/li>\n<\/ol>\n<p><hr><\/p>\n<p><a href=\"https:\/\/www.dropbox.com\/scl\/fi\/n44gl8dpk5w809mljvjy0\/List-Files-in-Folder.gs?rlkey=hruc1cfuhtoci3c39lu8yhf8i&dl=0\">Завантажити скрипт<\/a> або переглянути на <a href=\"https:\/\/gist.github.com\/alexkolodko\/791507868c326c859059e67ddff0497b\">Github Gist<\/a>.<\/p>\n<p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>₴<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️: картка Монобанку: <tt>4441114450427339<\/tt> або <a href=\"https:\/\/send.monobank.ua\/5jVrTaRziu\">через сайт<\/a>.<\/p>\n<\/div><\/div>",
            "date_published": "2023-12-25T12:40:44+02:00",
            "date_modified": "2023-12-25T12:40:39+02:00",
            "tags": [
                "figma",
                "google apps script",
                "google sheets",
                "автоматизація"
            ],
            "_date_published_rfc2822": "Mon, 25 Dec 2023 12:40:44 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "130",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "125",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/automation-pdfscale\/",
            "title": "Конвеєр: масштабування PDF-файлів за допомогою pdfscale",
            "content_html": "<p>Іноді буває треба робити однакові макети у різних масштабах. Наприклад, якій знаки, що можуть зчитуватись зблизька і здалека. І можна під ці випадки робити окремі макети, але оновлювати весь цей парк знаків не зручно.<\/p>\n<p>Краще мати якийсь один майстер-макет, як компонент у Фігмі, який можна розтягнути або зменшити до потрібного розміру. Для цього можна зробити основу в AI\/ID, а масштабні копії робити в окремому ID, де макет буде вставлений лінком, і будуть налаштовані нові розміри. Потім це все діло можна експортувати у PDF вже у новому розмірі.<\/p>\n<p>Але це знову зайві дії: оновити майстер-файл, відкрити копії, оновити лінки, експортувати, зберегти у потрібну теку. А якщо у вас в одному файлі ще й різні макети які потрібно нарізати, то взагалі жах.<\/p>\n<p>Тому виходом може бути вже масштабування вже готових PDF-файлів, з одного розміру в різні. В принципі так працює експорт для екранів в Adobe Illustrator або ж у Фігмі, але це для екранів, а в тому ж Індизайні таких функцій взагалі немає.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/pdfscale-principle.png\" width=\"1200\" height=\"675\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Принцип масштабування<\/div>\n<\/div>\n<h2>Скрипт pdfscale<\/h2>\n<p>Знайшов гарний bash-скрипт саме для масштабування PDF — <a href=\"https:\/\/github.com\/tavinus\/pdfScale\">pdfscale<\/a> (для роботи він потребує встановлених gs, iamgemagick, xpdf, все написано у документації в розділі <i>Dependencies<\/i>). Сам скрипт можна встановити як команду у терміналі, наприклад, через wget<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">wget -q -O \/tmp\/pdfScale.sh &#039;https:\/\/raw.githubusercontent.com\/tavinus\/pdfScale\/master\/pdfScale.sh&#039; &amp;&amp; bash \/tmp\/pdfScale.sh --install<\/code><\/pre><p>У документації детально розписані всі функції і є приклади. Тож скрипт дозволяє масштабувати та змінювати розміри PDF: має вбудовані друкарські розміри і можливість вказати свої довільні у різних видах величин.<\/p>\n<p>Наприклад, можна макет розтягнути до 1500×1500 мм:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">bash pdfScale.sh -r &quot;custom mm 1500 1500&quot; file.pdf newfile.pdf<\/code><\/pre><p>де:<\/p>\n<ul>\n<li><i>— r «custom mm 1500 1500»<\/i> — ключ resize, довільний розмір, у mm, а далі ширина та висота.<\/li>\n<li><i>file.pdf<\/i> — вихідний файл<\/li>\n<li><i>newfile.pdf<\/i> — змінений файл<\/li>\n<\/ul>\n<p>При цьому не важливо у якому розмірі оригінал, він масштабується пропорційно.<\/p>\n<p>Все це можна упакувати у цикл, який буде змінювати розмір всіх pff-файлів у теці й одразу складати їх у іншу теку 1500:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">#!\/bin\/bash\n\nfor i in *.pdf\ndo\n\tpdfScale -r &quot;custom mm 1434 1500&quot; $i 1500\/$i\n\techo &quot;$i - Done&quot;\ndone<\/code><\/pre><p>Або ж те саме можна викликати одним рядком у Терміналі:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">for i in *.pdf; pdfScale -r &quot;custom mm 1434 1500&quot; $i 1500\/$i; echo &quot;$i - Done&quot;<\/code><\/pre><h2>Додаткове перейменування<\/h2>\n<p>Далі також всі змасштабовані файли можна перейменувати. наприклад, основні макети я мав у розмірі 660×690 мм і відповідно у самих файлах був написаний цей розмір. Для цього у скрипт додав рядок, з функцією rename, що заміняє у нових файлах текст «-660x690» на «-1434x150»:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">rename &#039;s\/-660x690\/-1434x1500\/g&#039; 1500\/$i<\/code><\/pre><p>Весь скрипт:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">#!\/bin\/bash\n\nfor i in *.pdf\ndo\n\tpdfScale -r &quot;custom mm 1434 1500&quot; $i 1500\/$i\n\techo &quot;$i - Done&quot;\n    rename &#039;s\/-660x690\/-1434x1500\/g&#039; 1500\/$i\ndone<\/code><\/pre><p>Або для Термінала:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">for i in *.pdf; pdfScale -r &quot;custom mm 1434 1500&quot; $i 1500\/$i;rename &#039;s\/-660x690\/-1434x1500\/g&#039; 1500\/$i; echo &quot;$i - Done&quot;<\/code><\/pre><div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/01-bash-x2.mp4#t=0.001\" width=\"2560\" height=\"1510.8431044109\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Як працює скрипт<\/div>\n<\/div>\n<h2>CMD-файл<\/h2>\n<p>І далі можна перетворити це на виконуваний command-файл, який можна просто запускати з теки.<\/p>\n<p>Сам код:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">#!\/bin\/bash\n\n# Change directory to be where the command is.\ncd &quot;$(cd &quot;$(dirname &quot;$0&quot;)&quot; &gt; \/dev\/null &amp;&amp; pwd)&quot;\n\n# Run commands\nfor i in *.pdf\ndo\n\tpdfScale -r &quot;custom mm 1434 1500&quot; $i 1500\/$i\n\trename &#039;s\/-660x690\/-1434x1500\/g&#039; 1500\/$i\n\techo &quot;$i - Done&quot;\ndone<\/code><\/pre><p>Завантажити <a href=\"https:\/\/www.dropbox.com\/scl\/fi\/fc61wol3kummir3fchu5k\/pdfscale.command?rlkey=q7lvg6z6tuc66rcyqus2qyc8n&dl=0\">pdfscale.command<\/a> — приклад виконавчого файлу запуску скрипту. Розміри та назви тільки вкажіть свої.<\/p>\n<p>А якщо потрібно зробити кілька розмірів, то можна скопіювати рядки pdfScale та rename і<br \/>\nвказати додаткові розміри.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/02-cmd-x2.mp4#t=0.001\" width=\"2560\" height=\"1510.8431044109\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Як це виглядає в роботі<\/div>\n<\/div>\n<p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>₴<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️: картка Монобанку: <tt>4441114450427339<\/tt> або <a href=\"https:\/\/send.monobank.ua\/5jVrTaRziu\">через сайт<\/a>.<\/p>\n<\/div><\/div>",
            "date_published": "2023-12-07T17:47:49+02:00",
            "date_modified": "2023-12-07T17:51:59+02:00",
            "tags": [
                "автоматизація",
                "дизайн-конвеєр",
                "конвеєр"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/pdfscale-principle.png",
            "_date_published_rfc2822": "Thu, 07 Dec 2023 17:47:49 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "125",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/pdfscale-principle.png"
                ]
            }
        },
        {
            "id": "124",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/automation-pdf-split\/",
            "title": "Конвеєр: автоматизоване нарізання PDF на різні файли",
            "content_html": "<p>В роботі над дизайном багатьох макетів буває дуже зручно їх всі робити в одному файлі: можна простіше копіювати елементи та стилі, мати єдину базу символів, бачити загальну картинку одразу на всіх макетах тощо.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/ai-file.jpg\" width=\"2400\" height=\"1381\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Багато макетів різних розмірів у Adobe Illustrator<\/div>\n<\/div>\n<p>Але редактори погано пристосовані для збереження потім таких робочих файлів, що йтимуть на виробництво. Процес збереження купи файлів починає нагадувати нудну справу, в якій ви вибираєте що зберігати, якось розділяєте на окремі файли та при збереженні у різні формати правильно називаєте все. Така безглузда трата робочого часу і це нууудно 🥱. І в такій ручній роботі точно виникатимуть помилки, тож доведеться починати наново.<\/p>\n<p>У ІнДизайні є можливість зберігати PDF посторінково. Але можливості обмежені й потім все одно треба перейменовувати файли, як треба. У Ілюстраторі взагалі така опція є тільки для збереження окремих артбордів для екранів (у RGB), тож для друку це не підходить. І вирішувати це можна сторонніми скриптами, як-то скрипт для збереження файлу у різні формати, який ми робили для своєї роботи.<\/p>\n<p>Але це не вирішує задачу, коли у вас частина макетів двосторонні й ці різні сторони мають зберегтись, наприклад, в один PDF на кілька сторінок.<\/p>\n<p>А якщо вже після збереження потрібно буде внести якісь зміни, то весь цей нудний процес треба робити спочатку і добре якщо не для всіх файлів.<\/p>\n<h2>Конвеєр та алгоритм<\/h2>\n<p>Мені цікаво шукати і організовувати дизайн-конвеєр під такі задачі, оскільки вони точно повторюватимуться, тож автоматизація дає шалену економію часу, який можна витратити на цікавіші речі.<\/p>\n<p>Колись писав про <a href=\"https:\/\/blog.alexkolodko.com\/all\/mass-rename\/\">масове перейменування файлів<\/a>, які перед цим нарізав в Акробаті на окремі файли. Але це все одно довго, треба ще швидше.<\/p>\n<p>Спочатку потрібно подумати над наявними можливостями й алгоритмом. Кожен редактор може за раз зберігати всі або діапазон сторінок у суцільний PDF-файл. Тож якщо мати інструкцію, яка скаже які сторінки мають піти в який файл і як ці файли назвати. Така інструкція — своєрідна «маска», яку можна застосувати для файлу.<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">1-2=filename01\n3=filename02\n4-5=filename03\n6-8 10=filename04\n…<\/code><\/pre><p>де:<\/p>\n<ul>\n<li>1-2 — сторінки документа (може містити одну цифру, діапазон через дефіс, перелік окремих сторінок через пробіл, також доступні параметри початку і кінця документа <tt>start-10<\/tt> чи <tt>57-end<\/tt> )<\/li>\n<li>= — технічний розділювач (у назвах файлах його не повинно бути)<\/li>\n<li>filename01 — назва вашого майбутнього PDF-файлу, в який в який увійдуть сторінки з діапазону (без розширення .pdf)<\/li>\n<\/ul>\n<h2>bash + PDFtk<\/h2>\n<p>Для цього bash (потрібна версія 4 і вище, перевіряється у терміналі через <tt>bash -v<\/tt>, встановлюється через <tt> brew install bash<\/tt>) та <a href=\"https:\/\/www.pdflabs.com\/tools\/pdftk-server\/\">PDF Toolkit (PDFtk<\/a>).<\/p>\n<p>За допомогою ChatGPT в кілька ітерацій зробив скрипт, що бере вказаний PDF-файл, окремо бере текстову «маску» у TXT, як масив назв, в яких<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">#!\/bin\/bash\n\ninput_file=&quot;Tustan-Signs-All.pdf&quot;\ndata_file=&quot;range.txt&quot;\n\n# Read page ranges and custom names from the external file into a single array\nreadarray -t page_data &lt; &quot;$data_file&quot;\n\n# Loop through the array and split the PDF\nfor data in &quot;${page_data[@]}&quot;; do\n    IFS=&quot;=&quot; read -r range custom_name &lt;&lt;&lt; &quot;$data&quot;\n    output_file=&quot;${custom_name\/\/ \/_}.pdf&quot;  # Replace spaces with underscores in the custom name\n    pdftk &quot;$input_file&quot; cat $range output &quot;$output_file&quot;\n    echo &quot;$output_file — Done&quot;\ndone<\/code><\/pre><p>Для більшої універсальності я виніс вказання файлів, як аргументів у командному рядку. Тож тепер можна скопіювати скрипт у потрібну теку та запустити командою:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">bash splitter-pro.sh filename.pdf mask.txt<\/code><\/pre><p>де:<\/p>\n<ul>\n<li>filename.pdf — назва вашого PDF-файлу<\/li>\n<li>mask.txt — текстовий файл з «маскою»<\/li>\n<\/ul>\n<p>Сам скрипт виглядає так ($1 — перший аргумент, тобто PDF-файл; $2 — другий аргумент, тобто TXT-файл):<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">#!\/bin\/bash\n\ninput_file=$1\ndata_file=$2\n\n# Read page ranges and custom names from the external file into a single array. Requaire bash 4.0\nreadarray -t page_data &lt; &quot;$data_file&quot;\n\n# Loop through the array and split the PDF\nfor data in &quot;${page_data[@]}&quot;; do\n    IFS=&quot;=&quot; read -r range custom_name &lt;&lt;&lt; &quot;$data&quot;\n    output_file=&quot;${custom_name\/\/ \/_}.pdf&quot;  # Replace spaces with underscores in the custom name\n    pdftk &quot;$input_file&quot; cat $range output &quot;$output_file&quot;\n    echo &quot;$output_file — Done&quot;\ndone<\/code><\/pre><p>Приклад «маски», де спочатку номери сторінок, символ =, а далі назва файла (Проект-Знак-Точка-Розмір):<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">1-2=Tustan-WF-Sign-Т1-400x600\n3=Tustan-WF-Sign-Т2.1-200x350\n4=Tustan-WF-Sign-Т2.2-200x350\n5=Tustan-WF-Sign-Т3.1-200x350\n6=Tustan-WF-Sign-Т3.2-200x350\n7-8=Tustan-WF-Sign-Т4.1-T4.2-200x600\n9-10=Tustan-WF-Sign-Т4.3-T4.4-200x600\n11=Tustan-WF-Sign-Т5.1-200x600\n12=Tustan-WF-Sign-Т5.2-200x600\n13=Tustan-WF-Sign-Т6.1-200x600\n14=Tustan-WF-Sign-Т6.2-200x600\n15=Tustan-WF-Sign-Т7.1-200x600\n16=Tustan-WF-Sign-Т7.2-200x600\n17=Tustan-WF-Sign-Т8.1-200x600\n18=Tustan-WF-Sign-Т8.2-200x600\n19=Tustan-WF-Sign-Т9.1-200x600\n20=Tustan-WF-Sign-Т9.2-200x600\n21=Tustan-WF-Sign-Т9.3-200x600\n22-23=Tustan-WF-Sign-Т10-200x600\n…<\/code><\/pre><p>Весь процес виглядає ось так:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/tustan-wf-signs-automation-x2.mp4#t=0.001\" width=\"2560\" height=\"1507.1428571429\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Розділення PDF-файлу по «масці»<\/div>\n<\/div>\n<p>Також можна цей підхід використовувати для нарізання макетів по одному і одразу з правильним перейменуванням файлів. Колись робив скрипт для перейменування пачки файлів, але тепер можна цей крок пропустити й робити все швидше.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/metromap-tram-x2.mp4#t=0.001\" width=\"2560\" height=\"1477.9676158571\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Розділення на файли по одній сторінці<\/div>\n<\/div>\n<h2>Нюанси<\/h2>\n<p><b>№1. <\/b>Порядок артбордів\/сторінок у файлі має завжди зберігатись і співпадає з «маскою». Тож при зміні порядку, треба міняти й маску.<\/p>\n<p><b>№2. <\/b>При збереженні PDF з Ілюстратора рекомендую прибирати прапорець <i>Preserve Illustrator Editing Capabilities<\/i>. Так при розділенні PDF у файлі не буде нічого, що було поза потрібного артборду. Якщо ж цей прапорець увімкнутий, то навіть якщо ви бачитиме у прев’ю лише один артборд, все одно при відкритті файлу в Ілюстраторі в ньому будуть всі артборди й об’єкти, що були в оригінальному AI-файлі.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/ai-save-pdf-settings.png\" width=\"1436\" height=\"1182\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Налаштування при збереженні PDF<\/div>\n<\/div>\n<p><b>№3. <\/b>Як і з будь-якою автоматизацією її треба уважно перевірити, коли створюєте. Наприклад, можна помилково вказати не ті сторінки в «масці» і файл нарізатиметься неправильно.<\/p>\n<h2>Бонус №1: запуск скрипку одразу в теці<\/h2>\n<p>Щоб ще прискорити процес і навіть не запускати консоль, то можна зібрати виконавчий файл .command, який запускатиме все в наявній теці.\u2028<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">#!\/bin\/bash\n\n# Change directory to be where the command is.\ncd &quot;$(cd &quot;$(dirname &quot;$0&quot;)&quot; &gt; \/dev\/null &amp;&amp; pwd)&quot;\n\u2028# Run script with arguments\nbash pdf-splitter.sh metromap_tram_v1.12.pdf Metromap-Tram-Range.txt<\/code><\/pre><p>Єдина маніпуляція, яку треба зробити — дати системі права на виконання скрипту в нашій теці:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">chmod u+x splitter.command<\/code><\/pre><p>Таким чином у теку копіюються сам bash-скрипт, маска .txt, вхідний .pdf та у command файлі замінюються значення. Тепер просто зберігаєте PDF, запускайте файл, п’єте каву ☕️, готово.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/command-file-x2.mov#t=0.001\" width=\"2560\" height=\"1469.3914014517\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Скрипт упакований у виконавчий файл<\/div>\n<\/div>\n<h2>Бонус №2: артборди в AI → «маска»<\/h2>\n<p>Якщо ви називали артборди в Ілюстраторі так, як би ви хотіли мати готові файли, то можна теж це використати і скриптом вже в самому AI зберегти всі назви артбордів, як «маску» у текстовому файлі. Знову ChatGPT запропонував доволі простий скрипт, що робить на робочому столі готовий txt-файл з маскою.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/ai-artboards-to-txt-x2.mp4#t=0.001\" width=\"2560\" height=\"1470.8207705193\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Робота скрипта<\/div>\n<\/div>\n<p>Трохи допиляв, що він робив одразу потрібний вигляд:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">\/\/ Function to export artboard names to a text file\nfunction exportArtboardNames() {\n    var doc = app.activeDocument;\n    var artboards = doc.artboards;\n    var file = new File(&quot;~\/Desktop\/artboard_names.txt&quot;);\n    file.open(&quot;w&quot;);\n\n    for (var i = 0; i &lt; artboards.length; i++) {\n        var artboard = artboards[i];\n        var artboardName = artboard.name;\n        file.writeln(&quot;&quot; + (i + 1) + &quot;=&quot; + artboardName);\n    }\n\n    file.close();\n    alert(&quot;Artboard names exported to ~\/Desktop\/artboard_names.txt&quot;);\n}\n\n\/\/ Run the exportArtboardNames function\nexportArtboardNames();<\/code><\/pre><p>Напевно було б можна написати скрипт саме для Ілюстратора, який би з «маскою» зберігав певні артборди, але всі подібні скрипти в Adobe Illustrator працюють доволі повільно. Тому найшвидше створювати конвеєр іншими інструментами.<\/p>\n<h2>Бонус №3: зробити зі скрипта окрему cli-програму (Mac OS)<\/h2>\n<p>Копіювати скрипт у кожну теку не зручно, тож можна піти далі і зробити з цього скрипта cli-програму, яку можна буде викликати просто у певній теці одразу з терміналу (описав як зробити це у Mac OS, але думаю у Windows це так само можливо; якщо хтось напише як це зробити, то додам у статтю).<\/p>\n<p>Для цього модифікуємо спочатку сам скрипт. У першому рядку міняємо шлях до bash:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">#!\/usr\/local\/bin\/bash\n\ninput_file=$1\ndata_file=$2\n\n# Read page ranges and custom names from the external file into a single array. Requaire bash 4.0\nreadarray -t page_data &lt; &quot;$data_file&quot;\n\n# Loop through the array and split the PDF\nfor data in &quot;${page_data[@]}&quot;; do\n    IFS=&quot;=&quot; read -r range custom_name &lt;&lt;&lt; &quot;$data&quot;\n    output_file=&quot;${custom_name\/\/ \/_}.pdf&quot;  # Replace spaces with underscores in the custom name\n    pdftk &quot;$input_file&quot; cat $range output &quot;$output_file&quot;\n    echo &quot;$output_file — Done&quot;\ndone<\/code><\/pre><p>Потім краще прибрати розширення і назвати файл так, як ви будете викликати команду. У моєму випадку — <i>pdfsplitter<\/i>.<\/p>\n<p>Далі скопіювати файл у директорію \/<i>usr\/local\/bin<\/i>, можна одразу в терміналі:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">sudo cp pdfsplitter \/usr\/local\/bin<\/code><\/pre><p>Тепер можна у терміналі викликати нашу команду. Якщо ж при цьому буде відображатись помилка доступу, на кшталт, «<i>zsh: permission denied: pdfsplitter<\/i>», то треба дати системі дозвіл використати нашу програму. Наприклад, командою:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">chmod 755 \/usr\/local\/bin\/pdfsplitter<\/code><\/pre><p>Відтепер ви самі додали програму у термінал і її можна запускати у будь-якій теці, не копіюючи туди скрипт.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/script-as-cli-program-x2.mp4#t=0.001\" width=\"2560\" height=\"1470.8207705193\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Скрипт, як cli-програма<\/div>\n<\/div>\n<p><hr><br \/>\nЗавантажити скрипти:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.dropbox.com\/scl\/fi\/zpdpqvcjau4ps7qaoqn9b\/pdf-splitter.sh?rlkey=nsgiia85dj5noveqgoab3o9hz&dl=0\">pdf-splitter.sh<\/a> — розділювач PDF<\/li>\n<li><a href=\"https:\/\/www.dropbox.com\/scl\/fi\/sequwpl5crthcnsyb8pfn\/artboard-names-to-file.jsx?rlkey=0eysee0w68fa99c8yg9vpu4p4&dl=0\">artboard-names-to-file.jsx<\/a> — назви артбордів AI у TXT файл<\/li>\n<li><a href=\"https:\/\/www.dropbox.com\/scl\/fi\/303ikqdr93bt0ypzwgzet\/splitter.command?rlkey=7uj309zmg2ijodxpqr42zx1qo&dl=0\">splitter.command<\/a> — приклад виконавчого файлу запуску скрипта; має розміщуватись в одній теці з маскою та pdf-splitter.sh.<\/li>\n<\/ul>\n<p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>₴<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️: картка Монобанку: <tt>4441114450427339<\/tt> або <a href=\"https:\/\/send.monobank.ua\/5jVrTaRziu\">через сайт<\/a>.<\/p>\n<\/div><\/div>",
            "date_published": "2023-11-30T17:07:41+02:00",
            "date_modified": "2023-12-05T13:07:07+02:00",
            "tags": [
                "chatgpt",
                "інструменти",
                "автоматизація",
                "дизайн-конвеєр",
                "конвеєр"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/ai-file.jpg",
            "_date_published_rfc2822": "Thu, 30 Nov 2023 17:07:41 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "124",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/ai-file.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/ai-save-pdf-settings.png"
                ]
            }
        },
        {
            "id": "94",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/design-automation-with-chatgpt-part2\/",
            "title": "Автоматизація дизайну з ChatGPT. Частина 2: скрипти для InDesign, Figma, Google Docs, Automator",
            "content_html": "<p>Продовжую експерименти написання простих скриптів з допомогою ChatGPT. Тут <a href=\"https:\/\/blog.alexkolodko.com\/all\/adobe-scripting-with-chatgpt\/\">перша частина<\/a> зі скриптами для Adobe Illustrator.<\/p>\n<h2>1. Заміна шрифтів у InDesign<\/h2>\n<p>Перше, що захотілося зробити, це перенести скрипт з Ілюстратора в Індизайн (хоч скрипти й схожі, але у програм всередині різна специфіка).<\/p>\n<p>Тож спочатку я спробував подібними до попередніх запитами згенерувати скрипт. Але з 5-6 спроб робочого коду не вийшло. Тому далі я знайшов <a href=\"https:\/\/community.adobe.com\/t5\/indesign-discussions\/font-replacement-scripting-javascript\/td-p\/11021763\">у спільноті Адоб<\/a> шматок коду схожий на те, що мені треба.<\/p>\n<p>Але для його використання для різних накреслень і шрифтів не вистачало масиву значень на початку та циклу його виконання. Тому я скопіював код і попросив ChatGPT додати мені ці модулі. І за кілька уточнень вийшло робоче рішення.<\/p>\n<p>Далі зробив ще одну версію, попросивши додати виклик модального вікна, в яке можна ввести руками потрібні назви шрифтів. І він мені це теж зробив:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/automation-1-1-2-indesign-x4-noaudio.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Створення скрипту заміни шрифту в InDesign<\/div>\n<\/div>\n<p>Завантажити скрипти:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.dropbox.com\/s\/lgcoaglq2yl7lkn\/Font%20Replacer%20INDD.jsx?dl=0\">Версія<\/a>, яка заміняє усі шрифти у всіх фреймах;<\/li>\n<li><a href=\"https:\/\/www.dropbox.com\/s\/sh4p04jj41wq4j9\/Font%20Replacer%20INDD%20Selected.jsx?dl=0\">Версія<\/a>, яка заміняє шрифт лише у виділеному тексті;<\/li>\n<li><a href=\"https:\/\/www.dropbox.com\/s\/zdouo1ppa8sq9ka\/Font%20Replacer%20INDD%20SelectedORNot.jsx?dl=0\">Версія<\/a>, заміняє шрифт або у виділених фреймах, або в усіх;<\/li>\n<li><a href=\"https:\/\/www.dropbox.com\/s\/6ifotvcavyeinit\/Font%20Replacer%20INDD%20with%20window.jsx?dl=0\">Версія<\/a> з двома вікнами введення назви старого і нового шрифтів;<\/li>\n<li><a href=\"https:\/\/www.dropbox.com\/s\/eiazxfnj92d09ze\/Font%20Replacer%20INDD%20ww2.jsx?dl=0\">Версія<\/a> з одним вікном, в якому можна ввести кілька шрифтів.<\/li>\n<\/ul>\n<h2>1.2. Заміна стилів у InDesign<\/h2>\n<p>Окрім зміни шрифтів, попросив придумати скрипт, для заміни одних стилів на інші та ще попросив додати вікно, в якому ці назви можна ввести. Отримав <a href=\"https:\/\/www.dropbox.com\/s\/l252xyt2flartv8\/Change%20style%20with%20one%20window.jsx?dl=0\">такий скрипт<\/a>.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/indesign-1-2-1-changestyles-x2.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Скрипт для InDesign, який заміняє один стиль на інший<\/div>\n<\/div>\n<p>А далі попросив замість полів для введення тексту зробити спадні списки зі всіма наявними стилями у документі. Але скрипт сходу не запрацював, але його можна об’єднати з попередніми.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/indesign-1-2-2-changestyles-dropdowns-x2.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<\/div>\n<h2>2. Збереження Google Docs у тій самій теці на Драйві<\/h2>\n<p>У мене є потреба періодично зберігати поруч з Гугл Документом також і PDF, який я потім можу відправити. При збереженні через меню документів сам документ у мене завантажується у Downloads, як і решта файлів. Але потім мені потрібно знову завантажувати PDF у ту саму теку на драйв. Не складно, але це витрата часу.<\/p>\n<p>Шукав приклади скриптів, які  б могли зберігати PDF у ту саму теку, але робочих не знайшов. І от попросив ChatGPT запропонувати мені такий скрипт. І з першого разу отримав робочий варіант:<\/p>\n<pre>\nfunction onOpen() {\n  var ui = DocumentApp.getUi();\n  ui.createAddonMenu()\n      .addItem(’Convert to PDF’, ’convertDocToPDF’)\n      .addToUi();\n}\n\nfunction convertDocToPDF() {\n  var docFile = DocumentApp.getActiveDocument().getId();\n  var doc = DriveApp.getFileById(docFile);\n  var pdfFile = DriveApp.createFile(doc.getAs(’application\/pdf’)).setName(doc.getName() + «.pdf»);\n  var parentFolder = doc.getParents().next();\n  pdfFile.makeCopy(parentFolder);\n  pdfFile.setTrashed(true);\n}\n\n<\/pre>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/google-script-with-chatgpt-x2.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<\/div>\n<p>Також ChatGPT описав інструкцію, як цей скрипт опублікувати, щоб він працював не тільки у конкретному документі, але це виявилось не так просто, як зробити скрипт 😅.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.6\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-2-1.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-2-2.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<\/div>\n<\/div>\n<h2>3. Транслітерація тексту в Figma<\/h2>\n<p>Колись для транслітерації назв зробили разом з програмістами простий сайт з простим JS, якій заміняв літери на інші за певними правилами. Потім з цього створили скрипти для AI та ID. А потім я стикнувся з такою з задачею у Фігмі, але робочих рішень не знайшов. Щось покрутив, але кинув, бо моїх знань було недостатньо.<\/p>\n<p>І от спробував згодувати цю задачу ChatGPT. Взяв увесь наявний скрипт, як приклад, і попросив придумати, як з цього скрипту зробити скрипт для Фігми. Спочатку запропонований код транслітерував всі тексти на сторінці. Через уточнення він це робив для виділеного тексту, а якщо не виділений, то вже для всього.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/automation-3-figma-x2.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<\/div>\n<p>І у першому варіанті цей код навіть працює, транслітерує, лишилось тільки допиляти для виключень і різних випадків. Далі вже можна туди додати якийсь інтерфейс за потреби. Тест вважаю вдалим.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.6\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-3-1.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-3-2.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-3-3.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Код транслітерації для Фігми від ChatGPT<\/div>\n<\/div>\n<h2>4. Створення регулярних виразів для GREP \/ RegEx<\/h2>\n<p>Про грепи (або регулярні вирази, або regex) розповідав у лекції і все хотів написати детальну статтю зі всіма посиланнями, які назбирав, але все не знаходив час. GREP дуже потужна штука, але в неї був дуже високий поріг входу, щоб розуміти як будувати потрібні правильні вирази.<\/p>\n<p>І от тепер з ChatGPT цей поріг можна вважати зниженим, бо він дуже гарно конструює навіть складні вирази.<\/p>\n<p>Наприклад, давайте в Індизайні після всіх прийменників додамо нерозривні пробіли у всьому тексті через GREP-стилі. Для цього потрібно знайти у тексті всі прийменники. Тож створюємо стиль для символів без перенесень (no break) та питаємо у ChatGPT список всіх прийменників у вигляді регулярного виразу.<\/p>\n<p>Він розуміє українську і віддає згенерований вираз вже у потрібній формі. Єдине що цей regex не зовсім підійде у Індизайн, тому уточнюємо що це має бути саме GREP для Індизайну і отримуємо робочий запит.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/automation-4-1-indesign-grep-find-x4.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<\/div>\n<p>Так само можна конструювати грепи, які знаходять прізвища та ініціали, одиниці вимірювання, дати та місяці, номери телефонів у різних видах тощо. Далі потім знайдені дані (одразу всі, в усьому тексті) можна або переформатовувати або задавати їм потрібний стиль.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.6\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-1.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-2.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-3.png\" width=\"1694\" height=\"950\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-4.png\" width=\"1650\" height=\"1936\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-5.png\" width=\"1614\" height=\"1074\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-6.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-7.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-8.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-9.png\" width=\"1604\" height=\"1176\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Приклади різних регулярних виразів<\/div>\n<\/div>\n<p>Регулярні вирази — дуже технічно-орієнтований інструмент. Тому тепер до цього інструменту є людино-орієнтований інтерфейс, який трансформує ваш запит у зрозумілу машині форму.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/automation-4-2-indesign-grep-replace-x4.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">GREP заміни кириличних лапок латинськими<\/div>\n<\/div>\n<h2>5.1 Зібрати відео зі скріншотів (з використанням ffmpeg)<\/h2>\n<p>Також в лекції згадував, що також у автоматизації дуже допомагають різні консольні команди (cli, command line interface), які заточені на певні дії. З ними така сама ситуація — щоб ними користуватись, потрібно розбиратись в прикладах та документації, що теж техно-орієнтованість.<\/p>\n<p>Тому тут можна теж ChatGPT використовувати, як посередника для пошуку потрібної команди з потрібними параметрами. Наприклад, маємо купу скріншотів зроблених автоматично з різницею у 4-5 секунд, з яких хочемо зробити скрінкаст.<\/p>\n<p>Для роботи з відео є потужна програма <a href=\"https:\/\/ffmpeg.org\/download.html\">ffmpeg<\/a>, яка працює з командного рядка. Тож попросив ChatGPT запропонувати команду для ffmpeg, яка б об’єднала картинки у відео. З першого разу отримуємо варіант, який на 100% працює та робить відео з заданою кількістю кадрів, які можна скоригувати.<\/p>\n<pre>\nffmpeg -framerate 30 -pattern_type glob -i ’\/path\/to\/folder\/*.jpg’ -c:v libx264 -pix_fmt yuv420p \/path\/to\/output.mp4\n<\/pre>\n<p>Таким чином не потрібні ніякі додаткові програми, для створення відео з картинок: за допомогою Автоматора робимо скріншоти, а через ffmpeg отримуємо відео.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/automation-5-1-x4.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Збір відео з окремих картинок<\/div>\n<\/div>\n<h2>5.2 Компресія відео (з використанням ffmpeg)<\/h2>\n<p>Так само можна пошукати запити і на інші задачі з відео, наприклад, перезберегти з певною компресією чи зміною розміру, або прискоренням.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/automation-5-2-compress-video-x4-noaudio.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<\/div>\n<p>Раніше я шукав налаштування команд на Stackoverflow, а зараз швидше спитати у ChatGPT. Приклади запитів.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.6\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-5-2-1-compress-video.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-5-2-2-compress-video.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Компресія відео з ffmpeg<\/p>\n<h2>6. Зміна в наявному скрипті для Автоматора (Apple Script)<\/h2>\n<p>До попереднього пункту: для створення скрінкасту у мене був скрипт, який робив скріншот екрану і клав у потрібну теку в Дропбоксі, а потім зі скріншотів збиралося відео.<\/p>\n<p>Зараз Дропбокс змінив і виходить старий скрипт некоректно працює. Йти шукати у документації до AppleScript як змінити шлях було б довго. Тому скопіював наявний скрипт і попросив замінити шлях збереження скріншотів у теку \/<i>Desktop<\/i>.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/automation-6-applescript-x4.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<\/div>\n<h2>7. Збереження в TIFF у Adobe Illustrator<\/h2>\n<p>Ще попросив зробити скрипт для швидкого збереження артборду у TIFF з заданим DPI. Отримав отакий варіант, який видавав помилку. Знайшов у спільноті Адоба відповідь зі схожою частиною, та побачив що один з параметрів замість IBM має називатись IBMPC, замінив, запрацювало. Тобто весь скрипт робочий, але помилка була в одному з параметрів. <a href=\"https:\/\/www.dropbox.com\/s\/g6u54xerw8lg4v4\/toTIFF.jsx?dl=0\">Завантажити скрипт<\/a>.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/automation-7-1-w2400.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Збереження артбоду в TIFF 300dpi<\/div>\n<\/div>\n<h2>8. OSM Overpass Query<\/h2>\n<p>Деякі системи хоч і доступні всім, але поріг входу в них занадто високий. Але ChatGPT і тут зможе допомогти його подолати.<\/p>\n<p>У OpenStreetMap (карта\/база даних, які відкриті для всіх) зберігається величезна база геоданих, доступ до яких не суперпростий. І в OSM є мова запитів Overpass, яка дозволяє вивантажувати \/ запитувати якусь певну частину тих даних. Так от Overpass супер-неінтуітивна мова, і тут Chat GPT допомагає перекласти запит з людської на машинну.<\/p>\n<p><a href=\"https:\/\/twitter.com\/lemonodor\/status\/1636849040548675584\">twitter.com\/lemonodor\/status\/1636849040548675584<\/a><\/p><h2>P.S.<\/h2>\n<p>І це я скористався лише безкоштовною версією ChatGPT (модель GPT 3.5), і вже відчув, що стаю продуктивнішим ніби маю ще один механізований маніпулятор на додачу до рук, який розуміє що я хочу зробити та робить це швидше,<\/p>\n<p>Тепер спробую модель Codex (Github Copilot), яка створювалась як раз для написання коду, а також GPT4. Напишу потім, що з цього вийшло.<\/p>\n<p><i>Також хотів проілюструвати цю думку згенерувавши картинку людини з ще оною механізованою рукою, накшталт, технодесандників з Вархаммеру, але з 20 спроб у Midjourney v4 мого задуму не вийшло<\/i> ¯\\_(ツ)_\/¯<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1024\" data-ratio=\"1\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_5e4ed387-75ea-434f-80ad-54a6bbf25a92-transformed.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_c97b8485-4aa5-4fcc-aba3-c6bbdc06f756-transformed.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_augmentics_stay_with_laptop_at_the_large_f_35d6b34f-06c8-42a9-bb5f-a9f7d0228c89.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_augmentics_stay_with_laptop_at_the_large_f_366792c8-fc63-431c-adb1-e75029104bb6.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_augmentics_stay_with_laptop_at_the_large_f_b5de7f02-f43b-4fd6-b01c-4c33fcdace3e.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_bionic_robotic_mechanical_manipulator_in_h_4edd41d4-5a33-488d-ad2c-58255555764f.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_bionic_robotic_mechanical_manipulator_in_h_79d5dd21-a324-4f24-b5c2-ce37832c925b.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_5e4ed387-75ea-434f-80ad-54a6bbf25a92.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_15cc879c-6032-47b5-883c-56ccb48732cb.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_bb7622b8-8dac-41de-9925-d14892d79a05.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_c97b8485-4aa5-4fcc-aba3-c6bbdc06f756.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_techmarine_warhammer_40k_style_with_robotic_arm_sit_092b8d8f-7132-4b40-9394-dd83607d6cb8.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_techno_spacemarine_warhammer40k_style_with_robotic__b100e5a6-8d87-4b47-83cf-3151991a242a.png\" width=\"1024\" height=\"1024\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>?<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Якщо у вас приклади вашого повторюваного дизайн-процесу, який ви повторюєте щоразу і витрачаєте свій час, напишіть на <a href=\"mailto:alexkolodko@gmail.com\">пошту<\/a> або у <a href=\"https:\/\/t.me\/alexkolodko\">телеграм<\/a>.<\/p>\n<\/div><\/div><p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>₴<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️: картка Монобанку: <tt>4441114450427339<\/tt> або <a href=\"https:\/\/send.monobank.ua\/5jVrTaRziu\">через сайт<\/a>.<\/p>\n<\/div><\/div>",
            "date_published": "2023-03-24T22:37:31+02:00",
            "date_modified": "2023-03-24T22:38:54+02:00",
            "tags": [
                "adobe",
                "automator",
                "chatgpt",
                "figma",
                "grep",
                "illustrator",
                "indesign",
                "автоматизація",
                "ші"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-2-1.png",
            "_date_published_rfc2822": "Fri, 24 Mar 2023 22:37:31 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "94",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js",
                    "https:\/\/platform.twitter.com\/widgets.js",
                    "embedded-tweet\/embedded-tweet.js"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-2-1.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-2-2.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-3-1.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-3-2.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-3-3.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-1.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-2.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-3.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-4.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-5.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-6.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-7.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-8.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-4-9.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-5-2-1-compress-video.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/_automation-5-2-2-compress-video.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/automation-7-1-w2400.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_5e4ed387-75ea-434f-80ad-54a6bbf25a92-transformed.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_c97b8485-4aa5-4fcc-aba3-c6bbdc06f756-transformed.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_augmentics_stay_with_laptop_at_the_large_f_35d6b34f-06c8-42a9-bb5f-a9f7d0228c89.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_augmentics_stay_with_laptop_at_the_large_f_366792c8-fc63-431c-adb1-e75029104bb6.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_augmentics_stay_with_laptop_at_the_large_f_b5de7f02-f43b-4fd6-b01c-4c33fcdace3e.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_bionic_robotic_mechanical_manipulator_in_h_4edd41d4-5a33-488d-ad2c-58255555764f.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_bionic_robotic_mechanical_manipulator_in_h_79d5dd21-a324-4f24-b5c2-ce37832c925b.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_5e4ed387-75ea-434f-80ad-54a6bbf25a92.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_15cc879c-6032-47b5-883c-56ccb48732cb.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_bb7622b8-8dac-41de-9925-d14892d79a05.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_man_with_extra_bionic_robotic_mechanical_manipulato_c97b8485-4aa5-4fcc-aba3-c6bbdc06f756.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_techmarine_warhammer_40k_style_with_robotic_arm_sit_092b8d8f-7132-4b40-9394-dd83607d6cb8.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/alexkolodko_techno_spacemarine_warhammer40k_style_with_robotic__b100e5a6-8d87-4b47-83cf-3151991a242a.png"
                ]
            }
        },
        {
            "id": "93",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/adobe-scripting-with-chatgpt\/",
            "title": "ChatGPT як помічник з автоматизації",
            "content_html": "<p>Знайшов для себе цікавий кейс застосування ChatGPT — створення простих скриптів для Ілюстратора.<\/p>\n<p>У лекції про дизайн-конвеєр я розповідав, що можна дуже прискорити роботу автоматизуючі окремі дії. І тут дуже допомагають екшени та різного роду скрипти. Але екшени покривають точно не всі функції, а поріг входу у скрипти доволі високий.<\/p>\n<p>Так от, нейромережа може допомогти створювати прості скрипти (до об’ємних вони поки не доросли).<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/Screen-Recording-2023-03-14-at-23.32.20-x2.mp4#t=0.001\" width=\"2560\" height=\"1600\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">ChatGPT → JSX → Adobe Illustrator<\/div>\n<\/div>\n<p>Наприклад, є задача: маємо купу інфографіки для звіту двома мовами. І в усіх картинках треба поміняти шрифт на інший та замінити кому на крапку у числах (45,5% → 45.5%).<\/p>\n<p>У картинках використовуються різні накреслення, тож просто все виділити і поміняти не підходить. Треба йти в Find\/Replace font і там вручну задавати зміну кожного накреслення. Довго. Те саме  заміною символів: Find and Replace, ввести символи, замінити, підтвердити. Довго.<\/p>\n<p>Спочатку, як завжди, пошукав у гуглі відповідь, бо можливо хтось вже писав такий код. Сходу не знайшов щось робоче.<\/p>\n<p>Тож далі я запитав у ChatGPT, щоб він описав скрипт, який би замінював один шрифт на інший. Вийшов скрипт, який міняє шрифт, але робить все одним накресленням. Другим запитом я уточнив, щоб і накреслення враховувалось. Перевірив — працює. Тож у кожному документі просто запускався скрипт і все саме мінялось.<\/p>\n<p>На цю задачу можна було залучити програміста, який на цьому розуміється, але з конкретною простою задачею навіть безплатний ChatGPT впорався непогано.<\/p>\n<p>Далі можна ще допиляти скрипт додати заміну кількох шрифтів на інші. І ось, ще один службовий інструмент у вас є.<\/p>\n<p>Авжеж, не весь код працює або не враховує якісь крайні ситуації. Але через кілька уточнень можна спробувати трохи іншу версію.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.6\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/adobe-scripting-with-chatpgpt-1.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/adobe-scripting-with-chatpgpt-2.png\" width=\"2400\" height=\"1500\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Відповіді ChatGPT<\/div>\n<\/div>\n<p>Ось вам приклад цього скрипта, який я частково докрутив: <a href=\"https:\/\/www.dropbox.com\/s\/5c26qlafyo225sq\/Font%20Replacer.jsx?dl=0\">https:\/\/www.dropbox.com\/s\/5c26qlafyo225sq\/Font%20Replacer.jsx?dl=0<\/a><\/p>\n<p>\u2028На початку у масиві вказуються назви старого і нового шрифтів та їхні накреслення. Також можна вказати декілька змін для різних шрифтів і накреслень.<\/p>\n<pre>\n{\n«oldFontName» : «Daikon»,  \/\/ Назва старого шрифта\n«oldFontWeight» : «Bold»,  \/\/ Накреслення старого шрифта\n«newFontName» : «DM Sans», \/\/ Назва нового шрифта\n«newFontWeight» : «Bold»   \/\/ Накреслення нового шрифта\n},\n\n<\/pre>\n<p>Не обов’язково треба вивчати кодування для програм Адоб, буде достатньо розуміння, що ви хочете отримати в результаті. Чим простіша і точкова задача, тим буде простіше поставити питання нейромережі й отримати більш-менш робоче рішення. <\/p>\n<p>І замість витрачання на часу на ручне клацання в інтерфейсі, можна створювати такі скрипти. Для своєї задачі я зекономив десь пів години, але чим більше картинок, тим більша буде й економія.<\/p>\n<p>Цікаво, як з такою задачею впрорається анонсований вчора GPT-4. Уявіть плагін, який би працював безпосередньо в Ілюстраторі, в який можна написати задачу і він видаватиме робочий скрипт, який можна запускати одразу у редакторі.<\/p>\n",
            "date_published": "2023-03-15T11:37:29+02:00",
            "date_modified": "2023-03-15T13:43:31+02:00",
            "tags": [
                "adobe",
                "chatgpt",
                "автоматизація",
                "ші"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/adobe-scripting-with-chatpgpt-1.png",
            "_date_published_rfc2822": "Wed, 15 Mar 2023 11:37:29 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "93",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/adobe-scripting-with-chatpgpt-1.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/adobe-scripting-with-chatpgpt-2.png"
                ]
            }
        },
        {
            "id": "91",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/automatisation-with-customisation\/",
            "title": "Автоматизація з кастомізацією",
            "content_html": "<p>Після того, як я опублікував відео про генератори, мене попросили зробити такий інструмент для створення табличок Природного заповідного фонду України для дерев. Зробив першу ітерацію:<br \/>\n<a href=\"https:\/\/g.wayfinding.systems\/pzfu\">g.wayfinding.systems\/pzfu <\/a><\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/blog-archive.alexkolodko.com\/video\/pzfu-demo-speedx4.mp4#t=0.001\" width=\"2560\" height=\"1736.245912361\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Демо роботи генератора<\/div>\n<\/div>\n<h2>Процес<\/h2>\n<p><a href=\"https:\/\/capture.dropbox.com\/aA9xUetXOC0PBMjo\">Новий стиль заповідників<\/a> розробляла студія happy, дуже велика і змістовна робота. В основі стилю був зроблений патерн, який повторює текстуру дерева. І на цих табличках він також використовується.<\/p>\n<p>У матеріалах з брендбука ця текстура зроблена однією великою картинкою, щоб потім дизайнер міг на свій розсуд її вставляти у макети та обирати зручний ракурс. У макетах, які мені дали як приклад, текстура для всіх табличок однакова. Але мені хотілося не просто відтворити, а зробити так, щоб для кожної таблички цей патерн був унікальним.<\/p>\n<p>Перша думка була — треба на основі алгоритму якось генерувати подібні лінії. Але я не маю достатньо знань, що створити потрібний алгоритм.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/tree-random-texture-2400.png\" width=\"2400\" height=\"906\" alt=\"\" \/>\n<\/div>\n<p>Але трохи подумав, як можна обійтись тією однією текстурою. Придумав такий підхід:<\/p>\n<ol start=\"1\">\n<li>обрізаємо текстуру, щоб отримати рівний прямокутник великого розміру (у 3-4 рази більший за розмір таблички);<\/li>\n<li>беремо цю текстуру і вставляємо у маску, що має розмір самої таблички;<\/li>\n<li>випадково міняємо: \u2028<br \/>\na) положення текстури у масці, \u2028<br \/>\nb) масштаб текстури від 100 до 120%,<br \/>\nc) віддзеркалення текстури по осі x.<\/li>\n<\/ol>\n<p>Таким чином маючи одну фіксовану текстуру можна отримати безліч комбінацій. Хоча підхід неідеальний: при певних параметрах текстура занадто сильно з’їжджає в якийсь з боків.<\/p>\n<p>\u2028За допомогу окрема подяка dnipro.design, Ігорю та Максиму Крижановським.<\/p>\n",
            "date_published": "2023-03-06T22:26:12+02:00",
            "date_modified": "2023-03-06T22:26:07+02:00",
            "tags": [
                "{△}",
                "автоматизація",
                "генератор",
                "проекти"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/tree-random-texture-2400.png",
            "_date_published_rfc2822": "Mon, 06 Mar 2023 22:26:12 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "91",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/tree-random-texture-2400.png"
                ]
            }
        },
        {
            "id": "76",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/generator-kyivparking\/",
            "title": "{Генератор} + Паркувальні таблички Києва",
            "content_html": "<p>У мене є ідея замість окремих інструментів, створити один спільний генератор, в який можна потім буде простіше додавати різні макети по різних містах, і він стане такою точкою генерації всього: від табличок до розкладів транспорту.<\/p>\n<p>Першим підпроєктом став генератор паркувальних інформаційних табличок Києва — <a href=\"https:\/\/g.wayfinding.systems\/kyivparking \">g.wayfinding.systems\/kyivparking <\/a><\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/f-KxvLUCaNU?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>У залежності від зони паркування, змінюється колір таблички, тарифи та штрафи, а також генерується унікальний qr-код який містить номер паркомісця, що дозволить у майбутньому на лендингу використати цей номер. Наприклад, щоб одразу вести у застосунок Київ Цифровий, в якому буде вже обраний автоматично потрібний паркувальний майданчик, тож потрібно буде лише натиснути одну кнопку і почати паркування.<\/p>\n<p>p.s. А ще зацініть фавікону і логотип, який можна написати текстом — {△}<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/generator-favicon.png\" width=\"982\" height=\"254\" alt=\"\" \/>\n<\/div>\n",
            "date_published": "2022-11-03T18:43:51+02:00",
            "date_modified": "2022-11-03T18:43:46+02:00",
            "tags": [
                "{Генератор}",
                "автоматизація",
                "проекти"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-f-KxvLUCaNU-cover.jpg",
            "_date_published_rfc2822": "Thu, 03 Nov 2022 18:43:51 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "76",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-f-KxvLUCaNU-cover.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/generator-favicon.png"
                ]
            }
        },
        {
            "id": "75",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/automation-online-generators\/",
            "title": "Автоматизація дизайну: генератори макетів",
            "content_html": "<p>Одним з напрямків автоматизації, яким я цікавлюсь, є створення нових інструментів — онлайнових генераторів макетів, які дають можливість прямо з браузера отримати готовий макет зроблений за всіма правилами, в розмірах, в кривих, готовий до друку.<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/2fa3ddVkJVk?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<div class=\"e2-text-caption\">Приклади створених генераторів<\/div>\n<\/div>\n<p>Генератори макетів підвищують ефективність роботи, дозволяють:<\/p>\n<ul>\n<li>☑️ за той самий час зробити більшу кількість макетів;<\/li>\n<li>☑️ створювати макети без залучення дизайнерів;<\/li>\n<li>☑️ не шукати та не купувати шрифти.<\/li>\n<\/ul>\n<p>Які переваги дає такий генератор:<br \/>\n\u2028🟢 Відповідність дизайну. Неможливо зробити неправильний макет.<\/p>\n<p>🟢 Економія коштів та людських ресурсів. Автоматичне створення макетів займає менше робочого часу та зменшує витрати на роботу.  Можна взагалі не залучати дизайнера для створення чергових типових макетів.<\/p>\n<p>🟢 Унеможливлення помилок. Менше ручної роботи зменшує кількість можливих помилок при введенні тексту.<\/p>\n<p>🟢 Масове впровадження. Дає можливість обробити більше макетів за той самий проміжок часу, а відповідно впровадити велику кількість носіїв.<\/p>\n<p>🟢 Не потрібні шрифти. Виконавцям не треба купляти ліценцію на шрифт кожен раз, а передавати їм шрифти зазвичай забороняє ліценція. Генератор віддає макети «в кривих», тому потрібна лише одна ліценція для сайту під час розробки.<\/p>\n<p>Онлайн-генератор макетів буде корисним для навігаційних та інформаційних знаків: адресні покажчики, навігаційні покажчики, інформаційні знаки зі змінною інформацією, розклади на зупинках, дорожні знаки тощо. А також буде корисним при створенні фірмових макетів зі змінною інформацією: візитівки, бейджі, наліпки з qr-кодами тощо.<\/p>\n<p>Приклади реалізованих публічних генераторів:<\/p>\n<ul>\n<li><a href=\"http:\/\/touristroadsign.a3.kyiv.ua\/b-1-constructor.php\">Туристична навігація на дорогах України<\/a>: ми написали правила та додатково зробили для деяких типів знаків генератор макетів.<\/li>\n<li><a href=\"https:\/\/streetsigns.dnipro.design\/signs\/name\">Адресні таблички Дніпра<\/a><\/li>\n<li><a href=\"http:\/\/kyivstreetsign.a3.kyiv.ua\/#template-1-11-1\">Адресні покажчики Києва<\/a><\/li>\n<li><a href=\"https:\/\/g.wayfinding.systems\/kyivparking\"> Паркувальні таблички Києва<\/a><\/li>\n<\/ul>\n<p>✉️<br \/>\nЯкщо зацікавило і вам у роботі потенційно може бути корисним подібний генератор, напишіть на адресу <a href=\"mailto:generator@wayfinding.systems\">generator@wayfinding.systems<\/a> або в особисті у телеграмі <a href=\"t.me\/alexkolodko\">t.me\/alexkolodko<\/a> чи на пошту <a href=\"mailto:alexkolodko@gmail.com\">alexkolodko@gmail.com<\/a><\/p>\n",
            "date_published": "2022-11-03T18:32:36+02:00",
            "date_modified": "2022-11-03T18:32:33+02:00",
            "tags": [
                "{Генератор}",
                "автоматизація",
                "проекти"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-2fa3ddVkJVk-cover.jpg",
            "_date_published_rfc2822": "Thu, 03 Nov 2022 18:32:36 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "75",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-2fa3ddVkJVk-cover.jpg"
                ]
            }
        },
        {
            "id": "64",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/qa-automation-image-compression\/",
            "title": "QA: Автоматизація компресії зображень",
            "content_html": "<p><b>Q:  А якщо до імдж компресії? Чи можно автонакидувати термінальні команди?<\/b><\/p>\n<p>A: По компресії є кілька методів. Зняв відео, а нижче опис:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/mNzGMuvwl60?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<div class=\"e2-text-caption\">Автоматитизація компресії зображень<\/div>\n<\/div>\n<h2>1. ImageOptim<\/h2>\n<p>\u2028На Мак є програма <a href=\"https:\/\/imageoptim.com\/mac\">ImageOptim<\/a>. Пачкою оптимізує будь-яку кількість картинок. Працює на алгоритмі <a href=\"https:\/\/pngquant.org\">PNGQuant<\/a> і також доступний, як програма для терміналу.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/ImageOptim-app@2x.png\" width=\"514\" height=\"166\" alt=\"\" \/>\n<\/div>\n<h2>2. Terminal: optipng, jpegopti, gifsicle, svgo<\/h2>\n<p>Є кілька програм оптимізації зображень для термінала:<\/p>\n<p>а) Для PNG є <b>PNGQuant<\/b>, <b>pngcrush<\/b> та <b>optipng<\/b>. Останній також вміє конвертувати BMP, GIF, TIFF у PNG, сайт. На його прикладі і подивимось.<\/p>\n<p>Працює так: оптимізує всі файли PNG у теці<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">optipng *.png<\/code><\/pre><p>Або ще отакий :<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">find . -name &#039;*.png&#039; | xargs optipng -nc -nb -o7 -full<\/code><\/pre><p>А отак рекурсивно шукає та оптимізує PNG у всіх підтеках:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">find . -iname &quot;*.png&quot; -exec optipng -o7 {} \\;<\/code><\/pre><p>б) <b>jpegopti<\/b> для JPG. <a href=\"https:\/\/github.com\/tjko\/jpegoptim\">Github<\/a><\/p>\n<p>Працює так:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">jpegoptim -m70 img-name<\/code><\/pre><p>-m70 — відсоток стискання<\/p>\n<p>в) <b>gifsicle<\/b> для GIF. <a href=\"https:\/\/www.lcdf.org\/gifsicle\/\">Сайт<\/a>.<\/p>\n<p>Для одного зображення:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">gifsicle --batch -V -O2 image-name.gif<\/code><\/pre><p>Так само рекурсивно шукає та оптимізує GIF у всіх підтеках:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">find . -iname &quot;*.gif&quot; -exec gifsicle --batch -V -O2 {} \\;<\/code><\/pre><p>г) svgo для SVG.<\/p>\n<p>Працює так для всіх файлів:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">svgo *.svg<\/code><\/pre><p>Інсталюються всі вони через Homebrew:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">brew install optipng<\/code><\/pre><h2>3.1 Automator: quick action<\/h2>\n<p>Попередні команди збираємо у окремий bash-скріпт, сценарій для автоматора та сценарій на теку.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-workflow-quick-action.png\" width=\"847\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<p>Сценарій будується так:<\/p>\n<ul>\n<li>отримання файлів (у даному випадку всі виділені)<\/li>\n<li>встановлення хз як змінних для скрипта (Set Value та Get Value)<\/li>\n<li>запуск bash-скрипта на виділених файлах (Run Shell Script, з налаштуваннями Shell \/bin\/bash та Pass Input: as arguments)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.dropbox.com\/sh\/qxjv55wg5utwziz\/AAAn1n04lDgklL1G0ijjppNVa?dl=0\"> Завантажити цей сценарій<\/a> (попередньо треба встановити термінальні команди optipng, jpegopti, pngcrush, svgo).<\/p>\n<p>Сам скрипт:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">export PATH=\/opt\/homebrew\/bin:\/opt\/homebrew\/sbin:\/usr\/local\/bin:\/usr\/bin:\/bin:\/usr\/sbin:\/sbin:\/usr\/local\/munki:$PATH\n\nBIN_PATH=~\/Library\/Services\/.bin\n\nfor f in &quot;$@&quot;; do\n    if [ -d $f ]; then\n        echo &quot;TODO: nothing to compress now!&quot;\n    elif [[ $f == *.png ]]; then\n        if hash optipng 2&gt;\/dev\/null; then\n            optipng -o7 &quot;$f&quot;\n        else\n            $BIN_PATH\/optipng -o7 &quot;$f&quot;\n        fi\n        if hash pngcrush 2&gt;\/dev\/null; then\n            pngcrush -brute -reduce -ow &quot;$f&quot;\n        else\n            $BIN_PATH\/pngcrush -brute -reduce -ow &quot;$f&quot;\n        fi\n    elif [[ $f == *.jpg ]]; then\n        if hash jpegoptim 2&gt;\/dev\/null; then\n            jpegoptim &quot;$f&quot; --strip-all --force --all-progressive --size=150k\n        else\n            echo &quot;No jpegoptim installed, skipped.&quot;\n        fi\n    elif [[ $f == *.svg ]]; then\n        if hash svgo 2&gt;\/dev\/null; then\n            svgo &quot;$f&quot;\n        else\n            echo &quot;No SVGO installed, skipped.&quot;\n        fi\n    else\n        echo &quot;TODO: nothing to compress now!&quot;\n    fi\ndone;<\/code><\/pre><h2>3.2 Automator: folder action<\/h2>\n<p>А на теку попередній сценарій підлаштовується просто з відключеним першим кроком. А на теку попередній сценарій підлаштовується просто з відключеним першим кроком. <a href=\"https:\/\/www.dropbox.com\/sh\/29ntmizetk2w3wo\/AAB_R1ieTaHli6267gIxUzT-a?dl=0\">Завантажити скрипт для теки<\/a>.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-workflow-folder.png\" width=\"855\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>?<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Розкажіть, будь ласка, які дії з файлами вам доводиться періодично повторювати? Які рутинні задачі у вас бувають? Мені цікаво, які задачі можливо автоматизувати. Напишіть на <a href=\"mailto:alexkolodko@gmail.com\">пошту<\/a> або у <a href=\"https:\/\/t.me\/alexkolodko\">телеграм<\/a>. ▶️ Більше у телеграм-каналі «Здоровий глузд» — <a href=\"https:\/\/t.me\/alexkolodko1\">https:\/\/t.me\/alexkolodko1<\/a><\/p>\n<\/div><\/div><p>—<\/p>\n",
            "date_published": "2022-10-12T11:50:53+02:00",
            "date_modified": "2022-10-22T21:13:21+02:00",
            "tags": [
                "automator",
                "mac os x",
                "інструменти",
                "автоматизація"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-mNzGMuvwl60-cover.jpg",
            "_date_published_rfc2822": "Wed, 12 Oct 2022 11:50:53 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "64",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-mNzGMuvwl60-cover.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/ImageOptim-app@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-workflow-quick-action.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-workflow-folder.png"
                ]
            }
        },
        {
            "id": "63",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/qa-rename\/",
            "title": "QA: Автоматизоване перейменування файлів",
            "content_html": "<p><b>Q: Часто доводиться додавати декілька слів на початку назв 10 файлів у папці. Цікаво, чи можна зробити так, щоб можна було прописувати ці декілька слів один раз, а вони додавалися до назв всіх файлів у папці автоматично?<\/b><\/p>\n<p>A: Так, на Маку по перше можна напіввручну через функцію перейменування файлів додавати всім файлам на початку назви певне слово.<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/RLHfAcvF_6E?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>А також в Автоматорі → Rename Finder Items. Там серед варіантів є додавання тексту до чи після назви файлу. До речі, ця функція в Автоматорі більш просунута, ніж звичайне перейменування у Finder. І використовувати можна або через контекстне меню → Quick Actions, або створити автоматизацію для теки.<\/p>\n<p>Ще можна перейменовувати файли у певному форматі, наприклад, по днях року, за допомогою  bash-скрипта: <a href=\"https:\/\/blog.alexkolodko.com\/all\/mass-rename\/\">https:\/\/blog.alexkolodko.com\/all\/mass-rename\/<\/a><\/p>\n<p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>?<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Розкажіть, будь ласка, які дії з файлами вам доводиться періодично повторювати? Які рутинні задачі у вас бувають? Мені цікаво, які задачі можливо автоматизувати. Напишіть на <a href=\"mailto:alexkolodko@gmail.com\">пошту<\/a> або у <a href=\"https:\/\/t.me\/alexkolodko\">телеграм<\/a>. ▶️ Більше у телеграм-каналі «Здоровий глузд» — <a href=\"https:\/\/t.me\/alexkolodko1\">https:\/\/t.me\/alexkolodko1<\/a><\/p>\n<\/div><\/div><p>—<\/p>\n",
            "date_published": "2022-10-11T23:50:07+02:00",
            "date_modified": "2024-02-10T13:51:01+02:00",
            "tags": [
                "automator",
                "mac os x",
                "автоматизація"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-RLHfAcvF_6E-cover.jpg",
            "_date_published_rfc2822": "Tue, 11 Oct 2022 23:50:07 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "63",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-RLHfAcvF_6E-cover.jpg"
                ]
            }
        },
        {
            "id": "59",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/macos-folder-automation\/",
            "title": "Автоматизація у папках у Mac OS за допомогою Automator",
            "content_html": "<p>На Маку можна на певні теки повісити автоматизацію, при чому можна створити доволі багато різних дій, які обмежені тільки функціями Автоматора (а при знанні Apple Script так і взагалі будь-що у системі можна зробити). Реалізація дещо крива, але в цілому працює.<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/b9FgHx6RE2c?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<div class=\"e2-text-caption\">Швидке демо: файл HEIC конвертується у JPG, а далі копіїються у окрему теку, зменшується на 50% та у назву додається текст «_50%».<\/div>\n<\/div>\n<h2>Як це працює<\/h2>\n<p>Для цього знадобляться два системні інструменти: <b>Automator<\/b> та <b>Folder Action Setup<\/b>. У Автоматорі створюється саме автоматизація для теки (folder action), обирається конкретна тека та налаштовується конкретна послідовність дій (workflow) з файлами, які до неї потрапляють. <\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-create-folder-action.png\" width=\"2400\" height=\"1786\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Створення дії для теки в Автоматорі<\/div>\n<\/div>\n<p>Приклади послідовностей:<\/p>\n<ol start=\"1\">\n<li>Конвертація картинок у формат JPG.<\/li>\n<li>Збереження копії картинки у теці під назвою «50», конвертування картинки у JPG, зміна розміру та  додавання до назви тексту «_50%».<\/li>\n<\/ol>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.3437849944009\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-flow-1-convert.png\" width=\"2400\" height=\"1786\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-flow-2-resize-rename-move.png\" width=\"2400\" height=\"1786\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Приклади послідовностей<\/div>\n<\/div>\n<p>У Folder Action збираються всі наявні дії на теках, які можна переглянути, додати, вимкнути чи видалити. При цьому створивши одну послідовність дій, її можна застосовувати для різних тек. А також для однієї теки можна налаштувати будь-яку кількість сценаріїв, які відтворюватимуться послідовно: наприклад, конвертувати всі картинки у JPG, а потім зробити копію з розміром 50% від оригіналу та покласти цю копію в окрему теку.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.2182741116751\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/folder-actions-setup-1.png\" width=\"2400\" height=\"1970\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/folder-actions-setup-2-add-action.png\" width=\"2400\" height=\"2100\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Інтерфейс Folder Action Setup<\/div>\n<\/div>\n<p>Також детальне пояснення автоматизації тек: <a href=\"https:\/\/macosxautomation.com\/automator\/folder-action\/index.html\">https:\/\/macosxautomation.com\/automator\/folder-action\/index.html<\/a><\/p>\n<p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>?<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Розкажіть, будь ласка, які дії з файлами вам доводиться періодично повторювати? Які рутинні задачі у вас бувають? Мені цікаво, які задачі можливо автоматизувати. Напишіть на <a href=\"mailto:alexkolodko@gmail.com\">пошту<\/a> або у <a href=\"https:\/\/t.me\/alexkolodko\">телеграм<\/a>.<\/p>\n<\/div><\/div>",
            "date_published": "2022-10-07T17:07:45+02:00",
            "date_modified": "2022-10-07T17:07:29+02:00",
            "tags": [
                "automator",
                "mac os x",
                "інструменти",
                "автоматизація"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-create-folder-action.png",
            "_date_published_rfc2822": "Fri, 07 Oct 2022 17:07:45 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "59",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-create-folder-action.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-flow-1-convert.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/automator-flow-2-resize-rename-move.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/folder-actions-setup-1.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/folder-actions-setup-2-add-action.png"
                ]
            }
        },
        {
            "id": "47",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/dropbox-folder-automatisation\/",
            "title": "Автоматизація у папках Dropbox",
            "content_html": "<p>У Дропбоксі є така неочевидна функція: деякі типові автоматизації для окремих тек, в яких відбувається якась проста дія:<\/p>\n<ul>\n<li>сортування файлів за певним параметром;<br \/>\n* перейменування файлів (наприклад, додати до назви слово, назву теки чи дату);<br \/>\n* автоматичне збереження PDF поруч з кожним файлом (корисно для текстових документів та таблиць)<br \/>\n* конвертація всіх картинок у формат PNG або JPG (наприклад, переводити фото з HEIC у JPG);<\/li>\n<li>конвертація відео у MOV або MP4 (це відео зберіг через цю функцію, MOV→MP4, розмір не змінився);<\/li>\n<li>розпаковування архіву;<\/li>\n<li>конвертація аудіо у MP3 або WAV;<\/li>\n<li>переведення аудіо у текст.<\/li>\n<\/ul>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/rxAejg3naCU?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Довідка, як увімкнути автоматизацію: <a href=\"https:\/\/help.dropbox.com\/organize\/dropbox-automations\">help.dropbox.com\/organize\/dropbox-automations<\/a><\/p>\n<p>—<br \/>\nМузика: Yevhen Lokhmatov<br \/>\n<a href=\"https:\/\/www.lokhmatovmusic.com\">https:\/\/www.lokhmatovmusic.com<\/a><\/p>\n",
            "date_published": "2022-10-06T23:34:37+02:00",
            "date_modified": "2024-02-10T13:42:34+02:00",
            "tags": [
                "інструменти",
                "автоматизація",
                "цікавинки"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-rxAejg3naCU-cover.jpg",
            "_date_published_rfc2822": "Thu, 06 Oct 2022 23:34:37 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "47",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-rxAejg3naCU-cover.jpg"
                ]
            }
        },
        {
            "id": "48",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/dizayn-konveyer-avtomatizaciya-roboti-ta-masoviy-dizayn-lekciya\/",
            "title": "Дизайн-конвеєр: автоматизація роботи та масовий дизайн (лекція)",
            "content_html": "<p>Взяв участь у <a href=\"https:\/\/cases.media\/creativepractice\/marathon\">Марафоні Креативної практики<\/a> від Cases на підтримку ЗСУ, та записав лекцію про автоматизацію дизайну, дизайн-конвеєр та можливість створювати масовий дизайн. А взагалі це про підвищення власної продуктивності і цінності, як спеціаліста.<\/p>\n<p>По-перше, в основі продуктивної роботи лежить просунуте знання можливостей робочих інструментів (як і що робити швидше), вивчення нових інструментів у зв’язці з робочими (гугл-таблиці, термінальні команди тощо) та створення своїх інструментів під задачі (форматування даних, генератори макетів тощо). Розповідаю на прикладі дизайну паркувальних табличок та інших навігаційних проєктів, в яких кількість макетів легко може сягати 500+ шт.<\/p>\n<p>По-друге, щоб почати робити велику кількість макетів, потрібно подивитись на процес дизайну, як на алгоритм і створити конвеєр, на якому можна автоматизовувати якусь окрему частину створення макета та робити це швидко і багато. Наприклад, згенерувати 3000+ qr-кодів та вставити їх у макети в Індизайні.<\/p>\n<p>Подивитись лекцію можна на ютуб-каналі Креативної практики:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/YkFWijLZDvg?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Або на сторінці марафону: <a href=\"https:\/\/cases.media\/creativepractice\/marathon\">https:\/\/cases.media\/creativepractice\/marathon<\/a><\/p>\n<p>Ставайте крутішими спеціалістами та зробіть переказ в один з фондів на підтримку ЗСУ для наближення нашої перемоги ✊🇺🇦<\/p>\n",
            "date_published": "2022-08-01T22:58:00+02:00",
            "date_modified": "2022-10-06T23:15:58+02:00",
            "tags": [
                "автоматизація",
                "дизайн",
                "лекція"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-YkFWijLZDvg-cover.jpg",
            "_date_published_rfc2822": "Mon, 01 Aug 2022 22:58:00 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "48",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-YkFWijLZDvg-cover.jpg"
                ]
            }
        },
        {
            "id": "41",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/dnipro-streetsigns-generator\/",
            "title": "Генератор адресних покажчиків Дніпра",
            "content_html": "<p>Команда <a href=\"https:\/\/dnipro.design\">dnipro.design<\/a> розробили нові адресні покажчики Дніпра, описали у правилах та <a href=\"https:\/\/www.dropbox.com\/s\/377c1kscx7h5j7t\/streetsigns.pdf?dl=0&utm_source=streetsigns&fbclid=IwAR17EfC7O-wrPODckH1Tgd0HgFybT17CCRjGX4Vzeghsq5VkuROOmYWu_xc\">затвердили<\/a> правила нових адресних покажчиків. Розумію, який то об’єм. Гарна велика робота, респектую всій команді 👏<\/p>\n<p>А для того, щоб правила не лишались на папері ми допомогли створити інструмент для генерації всіх видів макетів:<\/p>\n<p>👉 <a href=\"https:\/\/streetsigns.dnipro.design\/g-name.html\">https:\/\/streetsigns.dnipro.design\/g-name.html<\/a><\/p>\n<p>Такий інструмент допомагає всім охочим зробити потрібні макети за всіма правилами.<\/p>\n<ul>\n<li>Вам не потрібен дизайнер.<\/li>\n<li>Вам не потрібно шукати чи купувати необхідні шрифти.<\/li>\n<li>Вам не потрібна ліценція Adobe, Corel чи інших програм.<\/li>\n<\/ul>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/EtIg5--4d_c?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<div class=\"e2-text-caption\">Як працює генератор<\/div>\n<\/div>\n<p>Хочете табличку → Заповнюєте кілька полів → Натискаєте кнопку → Отримуєте готовий до виробництва макет → Замовляєте покажчик → Вішаєте.<\/p>\n<p>Дуже просто, правда?<\/p>\n<p>А далі процес безкінечно масштабується на величезні об’єми знаків через застосування таблиць: заповнюєте таблицю у відповідному форматі → вставляєте посилання → отримуєте 100500 готових макетів.<\/p>\n<p>Окрім очевидних плюсів є ще кілька.<\/p>\n<ol start=\"1\">\n<li>Прагматичне. Чим менше людини у процесі, тим менша ймовірність людських помилок, які призводять до витрат уваги, часу на знаходження і виправлення цих помилок.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Егоїстичне. Навіщо витрачати час на нецікаву роботу по створенню ще одного типового макету, якщо можна той самий час приділити вивчення чогось або просто відпочинку.<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>Футуристичне. Чим далі, тим більше роботи на себе заберуть машини, тож варто йти попереду.<\/li>\n<\/ol>\n<p>Застосовувати можна всюди де є багато макетів з різними даними:<\/p>\n<ul>\n<li>адресні покажчики<\/li>\n<li>розклади транспорту<\/li>\n<li>навігаційні покажчики та вказівники<\/li>\n<li>паркувальні та інформаційні таблички<\/li>\n<li>дорожні знаки<\/li>\n<li>автомобільні номери<\/li>\n<li>тощо…<\/li>\n<\/ul>\n<p>Вважаю майбутнє не тільки за розробкою дизайну, а й за створенням інструментів для створення дизайну. Уявіть брендбук, який не просто у ПДФці розповідає, як робити якийсь макет, а одразу його робить за всіма правилами.<\/p>\n<p>Ми зробили генератор табличок Києва, тепер Дніпра, а в роботі ще кілька таких інструментів, які покажемо згодом. А якщо у вас є потреба спростити собі роботу або зробити у себе такий інструмент, то напишіть мені (або розкажіть про це вашому знайомому меру чи головному архітектору 😉).<\/p>\n",
            "date_published": "2022-02-16T20:38:21+02:00",
            "date_modified": "2022-02-16T20:38:14+02:00",
            "tags": [
                "ARC",
                "інструменти",
                "автоматизація",
                "проекти"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-EtIg5--4d_c-cover.jpg",
            "_date_published_rfc2822": "Wed, 16 Feb 2022 20:38:21 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "41",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-EtIg5--4d_c-cover.jpg"
                ]
            }
        },
        {
            "id": "29",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/automatisation-with-google-sheets\/",
            "title": "Автоматизація з Google Sheets",
            "content_html": "<p>У контексті автоматизації таблиці можна застосовувати для переформатування (роз’єднання та з’єднання тексту, заміна тексту іншим і так далі) вхідних даних у необхідному вигляді для подальшої роботи у Data Merge в InDesign, JSON для використання на сайтах, консольних командах тощо.<\/p>\n<p>Найцікавіші функції у Google Sheets:<\/p>\n<ul>\n<li><tt>CONCATENATE<\/tt> — об’єднання текстів з різних комірок та з заданим вручну текстом. Наприклад, <tt>CONCATENATE (A1;»-«;B1;».svg»)<\/tt> візьме текст з A1, додасть дефіс, додасть текст з B1 та в кінці додасть «.svg».<\/li>\n<li><tt>JOIN<\/tt> — схоже на <tt>CONCATENATE<\/tt>, об’єднає два тексти з вказаним розділювачем між ними. Наприклад, <tt>JOIN(»—«;A1;B1)<\/tt> візьме текст з A1, додасть два дефіси та додасть текст з B1.<\/li>\n<li><tt>SPLIT<\/tt> — розділить текст у комірці на кілька частин по вказаному символу-розділювачу. Наприклад, <tt>SPLIT(B3; “-”)<\/tt> розділить текст з комірки B3 на дві частини: ліворуч від дефіса “-” та праворуч від нього. Розділені дані будуть у кількох комірках праворуч від комірки з формулою.<\/li>\n<\/ul>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/function-split@2x.png\" width=\"658\" height=\"171\" alt=\"\" \/>\n<\/div>\n<ul>\n<li><tt>SUBSTITUTE<\/tt> — замінить текст в комірці іншим. Наприклад, <tt>SUBSTITUTE (A1;«ex«;«pex»)<\/tt> візьме текст з комірки A1 та замінить всі комбінації «ex» на «pex».<\/li>\n<li><tt>REPLACE<\/tt> — замінить певну кількість символів тексту в комірці, яка починається з певної позиції. Наприклад, <tt>REPLACE(A1;2;4;«0000»)<\/tt> візьме текст з комірки A1, та починаючи з другого символу заміняємо чотири символи на «0000».<\/li>\n<li><tt>REGEXREPLACE<\/tt> — замінить частини тексту іншим через регулярні вирази (regex). Наприклад, <tt>REGEXREPLACE(A1; $E$2; «„)<\/tt> візьме текст з A1, подивиться у комірку E2, сприйме текст звідти, як <a href=\"https:\/\/github.com\/google\/re2\/blob\/master\/doc\/syntax.txt\">регулярні вирази<\/a>, та замінить все що підходить на пропонований текст.<\/li>\n<li><tt>REGEXEXTRACT<\/tt> — видалить частину тексту за допомогою регулярних виразів.<\/li>\n<li><tt>LEFT, MID, RIGHT<\/tt> — функції, які дозволяють взяти конкретну кількість символів з лівої частини, з середини або з правої частини від тексту. Наприклад, <tt>LEFT(A1, 2)<\/tt> візьме перші два символи з A1, <tt>MID(A1, 5, 2)<\/tt> візьме два символи з A1 після п’ятого символу, а <tt>RIGHT(A1, 2)<\/tt> візьме останні два символи.<\/li>\n<li><tt>LOWER()<\/tt> — робить всі літери маленькими (lower case).<\/li>\n<li><tt>UPPER()<\/tt> — робить всі літери великими (UPPER CASE він же ALL CAPS).<\/li>\n<li><tt>PROPER()<\/tt> — робить всі перші літери великі, а ніші маленькі (Title Case).<\/li>\n<li><tt>SENTENCE()<\/tt> — робить перша літера речення велика, інші маленькі (Sentence case).<\/li>\n<li><tt>TRIM<\/tt> — прибирає в тексті всі пробіли.<\/li>\n<li><tt>GOOGLETRANSLATE(A2;“uk»;«en»)<\/tt> — переклад тексту в комірці A2 з української <i>uk<\/i> на англійську <i>en<\/i>.<\/li>\n<\/ul>\n<p>Рекомендую переглянути <a href=\"https:\/\/support.google.com\/docs\/table\/25273?hl=en\">всі функції Google Sheets<\/a>. Функції в MS Excel можуть відрізнятись, але в ньому можна робити більшість таких самих дій.<\/p>\n<h2>CSV та Data Merge<\/h2>\n<p>Наприклад, у навігації потрібно створити список орендарів з номерами корпусів та офісів. На вході ми маємо базу орендарів у виглядів excel-таблиці, яка записана у якійсь своїй логіці у базі даних. Можна переформатувати цю таблицю вручну, але такий список постійно оновлюється. І, щоб кожен раз не робити вручну, краще мати інструмент, який зробить це за тебе. <\/p>\n<p>Отримуємо <a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/199OB6-NLIyMUcCXg7xI-8n-tY1DIAULMCM1g9b-sYW8\/edit#gid=0\">таблицю<\/a>, в яку можна копіювати дані з бази та отримувати правильно відформатовані дані. Потім ці дані можна підключати з зовнішнього csv-файлу в InDesign (панель Data Merge) або Illustrator (панель Variables).<\/p>\n<p>Далі по кроках.<\/p>\n<p>У окремій комірці через символ «|» перелічуємо конструкції, які треба буде прибирати включно з пробілами, наприклад, «ТОВ », «ФОП » тощо. Потім за допомогою <tt>REGEXREPLACE<\/tt> у кожному рядку видаляємо всі конструкції, перелічені у першій комірці та отримуємо назву орендаря без зайвого тексту, який у навігації буде зайвим.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-01@2x.png\" width=\"1200\" height=\"708\" alt=\"\" \/>\n<\/div>\n<p>За допомогою <tt>SPLIT<\/tt> розділяємо номер, щоб відокремити номер корпусу за входу, наприклад, 1(D), від номера офісу.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-02@2x.png\" width=\"1200\" height=\"708\" alt=\"\" \/>\n<\/div>\n<p>Через <tt>PROPER<\/tt> форматуємо кожну назву в однаковій вигляд з першою прописною та іншими заголовними.<br \/>\n<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-03@2x.png\" width=\"1200\" height=\"708\" alt=\"\" \/>\n<\/div>\n<p>За допомогою <tt>LEFT, MIDDLE, RIGHT<\/tt> виокремлюємо з номерів входів та офісів окремі фрагменти, щоб сформувати номер у форматі <i>1D-003<\/i>.<br \/>\n<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.6949152542373\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-04@2x.png\" width=\"1200\" height=\"708\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-05@2x.png\" width=\"1200\" height=\"708\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-06@2x.png\" width=\"1200\" height=\"708\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-07@2x.png\" width=\"1200\" height=\"708\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Через <tt>CONCATENATE<\/tt> об‘єднуємо номер в одну сутність та додаємо розділювач-тире.<br \/>\n<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-11@2x.png\" width=\"1200\" height=\"708\" alt=\"\" \/>\n<\/div>\n<p>Далі цю таблицю можна експортувати у CSV та під’єднати у макет в InDesign через панель Data Merge. Про це у мене було окреме відео:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/m6HxcWWCFz4?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<h2>JSON<\/h2>\n<p>Якщо буде потрібно для сайту сформувати JSON-файл з даними для автодоповнення у формі чи десь ще, наприклад, у генератори покажчиків підказуємо правильні назви вулиць, то так само можна зібрати дані у потрібному форматі у таблиці.<br \/>\n\u2028Через <tt>CONCATENATE<\/tt> беремо назви вулиць та об‘єднуємо у рядок вигляду {“name”: “Назва”, “type”: “вулиця”}, у два підходи:<\/p>\n<ol start=\"1\">\n<li>Оскільки сама функція використовує подвійні лапки тож їх не можна просто так додати, то спочатку збираємо рядок з одинарними лапками <tt>CONCATENATE(«{’name’: ’»;C2;«’, ’type’: ’»;D2;«’},»)<\/tt>.<\/li>\n<li>Через функцію <tt>SUBSTITUTE(G2;«’»;«»»»)<\/tt> заміняємо всі одинарні лапки на двійні.<br \/>\n<\/li>\n<\/ol>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.7021276595745\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/JSON-1@2x.png\" width=\"1200\" height=\"705\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/JSON-2@2x.png\" width=\"1200\" height=\"705\" alt=\"\" \/>\n<\/div>\n<\/div>\n<h2>Консольні команди<\/h2>\n<p>Наприклад, потрібно зробити кількадесят макетів з різними qr-кодами, в яких закладені різні посилання (номери автоматів, якісь коди, посилання у бот зворотного зв‘язку тощо). І можна ці коди робити через різні онлайн-генератори або плагіни до Photoshop, Illustrator або InDesign. Але якщо потрібно таких кодів зробити 100 чи 1500, краще знайти інший спосіб.<\/p>\n<p>На мою думку, найкращий — генерація кодів через консоль (термінал). Взагалі через термінал можна робити багато цікавих речей, але потрібно трохи розібратись.<\/p>\n<p>Для генерації qr-кодів, якщо встановлений python, є команди <a href=\"https:\/\/github.com\/lincolnloop\/python-qrcode\">qr<\/a> або <a href=\"https:\/\/pypi.org\/project\/segno\/\">segno<\/a>. Друга мені подобається більше, бо в ній можна задати додатково кольори, розміри самого коду та зберегти одразу в EPS.<\/p>\n<p>Для команди segno потрібно створити рядок вигляду:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">segno  --border 2 --dark=2D2424 --light=D2C7B9 --output=TradingStalls.eps &quot;https:\/\/reherit.org.ua\/object\/tsentralnyj-rynok-torgovi-ryady\/&quot;<\/code><\/pre><p>Де border, dark та light це налаштування границі та кольорів коду, output — назва файлу на виході, а в лапках потрібне посилання чи інший текст.<\/p>\n<p>Тут так само допоможе функція таблиць <tt>CONCATENATE<\/tt>, щоб сформувати рядки команд. Потім ці команди просто копіюємо у консоль та запускаємо: комп‘ютер виконає кожну по черзі. Далі готові qr-коди вставляємо вже куди потрібно.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/reherit-qr@2x.png\" width=\"1200\" height=\"645\" alt=\"\" \/>\n<\/div>\n<h2>Комбінування та застосування<\/h2>\n<p>Іноді в одній таблиці простіше формувати, і консольні команди для створення qr-кодів, і дані для підставляння в InDesign. Далі кілька кейсів, в яких я це застосовував.<\/p>\n<p><b>ProstoPay.<\/b> Я робив дизайн комунікації про безготівкову оплату для ProstoPay (оплата у вендингових автоматах телефоном через  Apple|Google pay). Спочатку розробив дизайн, а потім треба було розмножити цей дизайн на 1500+ наліпок.<\/p>\n<p>На вході нам потрібен лише номер автомата та формат посилання, яке потрібно закласти у qr-код. Все інше можна сформувати всередині таблиці. Ось як це виглядає:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/_lUC6E5euTs?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<div class=\"e2-text-caption\">Магія створення наліпок безготівкової оплати ProstoPay<\/div>\n<\/div>\n<p><b>Peremoga.<\/b> Наліпки зворотного зв’язку у різних частинах коворкінгу Peremoga. Кожен код веде у налаштованого бота в телеграмі. На вході маємо чіткі посилання та назви локацій. Через таблицю робимо мітку локації, яку потім підставимо на макет, та команди генерації кодів.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.5727391874181\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-qr-1@2x.png\" width=\"1200\" height=\"763\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-qr-2@2x.png\" width=\"1200\" height=\"763\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-qr-3@2x.png\" width=\"1200\" height=\"763\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-qr-4@2x.png\" width=\"1200\" height=\"763\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Таблиця<\/div>\n<\/div>\n<p>Як наліпки виглядають наживо:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-real@2x.jpg\" width=\"1000\" height=\"640\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Наліпки зворотного зв’язку у різних частинах Peremoga Space<\/div>\n<\/div>\n<p><b>Паркувальні таблички.<\/b> Маючи затверджений дизайн табличок, потрібно було зробити такі макети на купу майданчиків. На вході маємо номер майданчику, з якого можна взяти зону (перша цифра), для кожної зони маємо фіксований тариф та фіксований штраф (тариф×20). Далі також з номера формуємо посилання, з якого потім формуємо команду генерації коду.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"2.020202020202\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-3@2x.png\" width=\"1200\" height=\"594\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-4@2x.png\" width=\"1200\" height=\"594\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-5@2x.png\" width=\"1200\" height=\"594\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-6@2x.png\" width=\"1200\" height=\"594\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-7@2x.png\" width=\"1200\" height=\"594\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-8@2x.png\" width=\"1200\" height=\"594\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-9@2x.png\" width=\"1200\" height=\"594\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-10@2x.png\" width=\"1200\" height=\"594\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Таблиця для табличок<\/div>\n<\/div>\n<p>У макет додаємо змінні у потрібних місцях:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-11@2x.png\" width=\"1200\" height=\"690\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Макет в InDesign<\/div>\n<\/div>\n<p>Отримуємо купу макетів, готових до друку.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-2@2x.png\" width=\"1189\" height=\"841\" alt=\"\" \/>\n<\/div>\n<p>У такого автоматизованого створення та підключення qr-кодів є додатковий плюс: якщо все вірно налаштовано, то не можливо буде сплутати коди та підставити не той, не витрачати час на перевірку та нерви, якщо знайдеться ця помилка.<\/p>\n<p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>?<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Напевно можна знайти ще більше прикладів використання таблиць в автоматизації роботи або якоїсь окремої її частини. Напишіть на <a href=\"mailto:alexkolodko@gmail.com\">пошту<\/a> або у <a href=\"https:\/\/t.me\/alexkolodko\">телеграм<\/a>, які дії ви виконуєте постійно та монотонно та які вас бісять. Думаю, більшість такої роботи має виконувати машина замість людини, а ви тим часом витрачатимете свій час на цікавіші речі або просто відпочинете.<\/p>\n<\/div><\/div><p><hr><\/p>\n<div><div style=\"float: left;\"><p><span style=\"font-weight:bold; font-size: 3em\"><b>₴<\/b><\/span><\/p>\n<\/div><div style=\"padding: 1em 0 0 4em\"><p>Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️: картка Монобанку: <tt>4441114450427339<\/tt> або <a href=\"https:\/\/send.monobank.ua\/5jVrTaRziu\">через сайт<\/a>.<\/p>\n<\/div><\/div>",
            "date_published": "2021-05-16T22:50:44+02:00",
            "date_modified": "2024-02-14T11:35:26+02:00",
            "tags": [
                "google sheets",
                "інструменти",
                "автоматизація",
                "дизайн"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-08@2x.png",
            "_date_published_rfc2822": "Sun, 16 May 2021 22:50:44 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "29",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js",
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-08@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-09@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-10@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-real-1.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-real-2.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-real-3.jpeg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-1@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/function-split@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-01@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-02@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-03@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-04@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-05@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-06@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-07@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/bc-11@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-m6HxcWWCFz4-cover.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/JSON-1@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/JSON-2@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/reherit-qr@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/remote\/youtube-_lUC6E5euTs-cover.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-qr-1@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-qr-2@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-qr-3@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-qr-4@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/peremoga-real@2x.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-3@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-4@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-5@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-6@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-7@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-8@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-9@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-10@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-11@2x.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/parking-info-2@2x.png"
                ]
            }
        }
    ],
    "_e2_version": 4134,
    "_e2_ua_string": "Aegea 11.3 (v4134)"
}