--- image: https://i.imgur.com/63Kv3O4.png description: В данной статье описывается процесс возникновения идеи и зарождения новых фич небольшого приложения на HTML/CSS/Vue, которое помогает мне не злоупотреблять соцсетями. tags: open source, html, css, javascript, vue, GTD, social media addiction --- # Как генератор пароля в форме новогодней ёлки спас меня от соцсетевой аддиктивности и выгорания (HTML/CSS/Vue) В данной статье описывается процесс возникновения идеи и зарождения новых фич небольшого приложения на HTML/CSS/Vue, которое помогает мне не злоупотреблять соцсетями. 3 года я работал с React (react-native, material-ui), готовыми библиотеками компонентов и почти не соприкасался с HTML/CSS. Периодически встречал похвалу в адрес Vue, что он: "самый простой и по сути является упорядочиванием ванильного js". Мне было интересно и "вернуться к истокам" HTML/CSS и опробовать Vue - причём я это сделал самым простым образом, без компиляторов и сборки. Здесь нет пошагового описания создания кода (я планирую записать скринкаст), но зато есть сам код: [Github: Crypto-Fanny](https://github.com/apayrus/crypto-funny/) [Работающее демо](https://apayrus.github.io/crypto-funny/) Читайте с улыбкой на лице и долей юмора. ![crypto-funny animated password generator with mixers](https://apayrus.github.io/crypto-funny/images/crypto-funny.gif) ## Проблема Если у меня есть аккаунты в социальных сетях, я постоянно туда захожу и залипаю. В редкие дни получается гармонично совместить их с работой. Но часто это как провалы в памяти: 1. сталкиваюсь по работе со сложной задачей 2. напряженно думаю о ней до неприятных ощущений 3. заглядываю в твиттер на 2 минуты расслабиться, переключить фокус 4. уже вечер и я всё ещё там... У меня 13 лет опыта активного использования соцсетей. Были периоды когда я 1.5-2 года не использовал их. Были взлеты и падения зависимости, но гарантированно меня спасала от них только деактивация аккаунта. В декабре 2020 я снова отключил все обжитые площадки: Фейсбук, Инстаграм, ВКонтакте. Нормально жил и трудился до октября 2021. И вдруг завел твиттер на английском: "чисто для работы". И вот у меня уже 185 друзей айтишников по всему миру и там веселей чем во всех прошлых соцсетях вместе взятых. Удаляться и жалко -- теряются полезные связи с людьми. И как-то стыдно. Когда я замечаю исчезновение человека, возникает беспокойство (вдруг с ним что-то случилось). А потом он появляется и говорит "да я просто отключал аккаунт". Это как-то не серьезно, бро. У нас тут связи социальные. Может мне нужен был какой-то твит с твоей страницы. Или спросить что-то у тебя -- а ты удалился. Так некрасиво, несерьезно, безответственно, по-детски! Но а как ещё спастись от них? ## Решение И вот я придумал вместо деактивации -- генерацию сложного пароля, который невозможно запомнить и к которому у меня не будет доступа на определенное время. Первая мысль была такая: распечатать пароль на бумажке и разрезать пополам, одну половинку отдать супруге, а вторую оставить у себя. Через неделю она отдаст мне половинку и я смогу зайти... Но это лишние телодвижения: печать, бумажки, набор с бумажки. А вдруг она подшутит надо мной и не отдаст? А вдруг найдёт вторую половинку? Надо доверить пароль нескольким людям. Но деление на части не гарантирует что я всем дам одинаковые половинки, тут легко ошибиться. И вот я придумал давать друзьям полный "сырой" пароль и видоизменять его известным мне образом. У них будет основа пароля, а у меня -- ключ к нему. Примерно по такому принципу работает защищенный протокол HTTPS (certificate, public/private key). И всё это совпало с моим увлечением HTML/CSS/Vue... Я подумал -- а почему бы не сделать этот процесс наглядным? ## Постпроцессор ![postprocessor](https://i.imgur.com/zoyU8DN.gif) Изначально я сгенерировал пароль на другом сайте и сделал 3 функции для его видоизменения: * сдвиг на заданное число символов * инверсию заглавных/строчных букв * отражение Позже я нозову этот элемент постпроцессором - потому что он обрабатывает сырой пароль, доводя его до готовности по сохранённому рецепту. ## Генератор с микшером Пока я искал генератор, где-то успел прочитать, что хороший пароль состоит из: * цифр * строчных букв * заглавных букв * символов Конечно я и раньше об этом знал, но там были явно выписаны 4 ряда: * 1234567890 * abcdefghijklmnopqrstuvwxyz * ABCDEFGHIJKLMNOPQRSTUVWXYZ * ~\`!@#$%^&*()_-+={[}]|\\:;"'<,>.?/ И в моей голове пошёл необратимый процесс создания своего генератора из этих символов. Вот она, ДНК всех паролей в моих руках 10+(26*2)+32 = 94 символа... Я захотел микшер как в музыкальном редакторе, которым я буду регулировать соотношение разных типов символов в моём пароле. Может я захочу пароль только из значков и цифр? Или только из букв. А может всё вместе, но в заданных пропорциях? Щепотка цифр среди 100 больших букв, ммм... ## Визуализация случайных событий Когда генератор был готов и я мог создавать пароли разной консистенции, мне захотелось визуально видеть: какие поля выпали на "рулетке". Изначально это была таблица с 4 рядами, где в углу подсвечивалось количество выпаданий. Я упорядочил ряды по возрастанию длины и получилось подобие ёлки. А так как в сети сейчас много разговоров и фотографий об этом, я подумал: почему бы не придать визуализации вид ёлки с гирляндами? После одной неудачной ёлки возник вариант, который вы видели. Позже можно сделать переключатель между разными видами. ## Результаты Этот метод реально сработал. Возможно, первый раз в жизни я не заходил в соцсети больше недели, при этом не удаляя там аккаунтов. 1. я сгенерировал пароль и разослал его в телеграме помимо жены ещё двум друзьям (для подстраховки), с просьбой не отдавать его мне в течении недели 2. довел сырой пароль до готовности "постпроцессором" и установил его в соцсети 3. удалил сообщения с поролем у себя из чатов (тут главное не поставить галочку "удалить у собеседника") 4. наслаждался 100% концентрацией в работе и творчестве, и даже увлекся шахматами... Неделя уже прошла, но я так и не запросил пароль обратно. Когда я почувствую, что доделал все запланированные дела (в том числе подготовлю к публикации эту статью и ещё другую) -- я попрошу пароль обратно. ## Развитие идеи Далее (как любой добропорядочный айтишник) я хочу исключить из процесса людей и заменить их, например, телеграм ботом. 1. Я пишу боту количество часов, которое хочу оставаться вне соцсетей (например, 24*7) 2. Бот шлёт мне сырой пароль 3. Я его меняю и записываю как изменил (сдвиг на 10, инверсия регистра) 4. устанавливаю везде 5. удаляю переписку с ботом 6. Через неделю бот присылает мне пароль и я могу воспользоваться соцсетями ## Слабые места метода и реализации 1. `Math.random`, который я использую в коде, говорят, плохой для "криптографических" целей 1. Процедура "восстановления пароля" может испортить весь замысел. У меня не было тяги прибегнуть к ней, но вы можете подумать заранее как подстраховаться от этого. 1. В статье нет пошагового описания создания приложения, но есть открытый репозиторий и если возникнут вопросы можете открывать [issues](https://github.com/ApayRus/crypto-funny/issues). ## Зачем Почему я взялся это писать? Устал от основной работы и оказался на грани выгорания, наверное поэтому много и зависал в соцсетях в последнее время, а они утомляют ещё больше. Захотелось сделать что-то лёгкое и приятное, и поделиться с людьми, чтобы отвлечься от рутины на 100%. Кажется получилось. Пока я делал этот проектик, возникла мысль записать сринкаст. Я не эксперт по Vue, мне хотелось поупражняться в HTML/CSS и мне показалось что это самый оптимальный путь. Как думаете, стоит ли записать скринкаст c этой ёлкой? У меня возникло видение идеального блога, где часть информации подаётся текстом для донесения замысла приложения, а техническая реализация делается скринкастом. У меня ещё есть "[говорящая клавиатура для детей](https://github.com/ApayRus/keyboard-for-babies)", тоже на Vue. Пока что там только английская раскладка. Я планирую добавить русскую и потом опубликовать.