Как генератор пароля в форме новогодней ёлки спас меня от соцсетевой аддиктивности и выгорания (HTML/CSS/Vue)

В данной статье описывается процесс возникновения идеи и зарождения новых фич небольшого приложения на HTML/CSS/Vue, которое помогает мне не злоупотреблять соцсетями.

3 года я работал с React (react-native, material-ui), готовыми библиотеками компонентов и почти не соприкасался с HTML/CSS. Периодически встречал похвалу в адрес Vue, что он: "самый простой и по сути является упорядочиванием ванильного js". Мне было интересно и "вернуться к истокам" HTML/CSS и опробовать Vue - причём я это сделал самым простым образом, без компиляторов и сборки.

Здесь нет пошагового описания создания кода (я планирую записать скринкаст), но зато есть сам код:

Github: Crypto-Fanny

Работающее демо

Читайте с улыбкой на лице и долей юмора.

Проблема

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

1. сталкиваюсь по работе со сложной задачей
2. напряженно думаю о ней до неприятных ощущений
3. заглядываю в твиттер на 2 минуты расслабиться, переключить фокус
4. уже вечер и я всё ещё там…

У меня 13 лет опыта активного использования соцсетей. Были периоды когда я 1.5-2 года не использовал их. Были взлеты и падения зависимости, но гарантированно меня спасала от них только деактивация аккаунта.

В декабре 2020 я снова отключил все обжитые площадки: Фейсбук, Инстаграм, ВКонтакте. Нормально жил и трудился до октября 2021. И вдруг завел твиттер на английском: "чисто для работы". И вот у меня уже 185 друзей айтишников по всему миру и там веселей чем во всех прошлых соцсетях вместе взятых.

Удаляться и жалко – теряются полезные связи с людьми. И как-то стыдно. Когда я замечаю исчезновение человека, возникает беспокойство (вдруг с ним что-то случилось). А потом он появляется и говорит "да я просто отключал аккаунт". Это как-то не серьезно, бро. У нас тут связи социальные. Может мне нужен был какой-то твит с твоей страницы. Или спросить что-то у тебя – а ты удалился. Так некрасиво, несерьезно, безответственно, по-детски! Но а как ещё спастись от них?

Решение

И вот я придумал вместо деактивации – генерацию сложного пароля, который невозможно запомнить и к которому у меня не будет доступа на определенное время.

Первая мысль была такая: распечатать пароль на бумажке и разрезать пополам, одну половинку отдать супруге, а вторую оставить у себя. Через неделю она отдаст мне половинку и я смогу зайти… Но это лишние телодвижения: печать, бумажки, набор с бумажки. А вдруг она подшутит надо мной и не отдаст? А вдруг найдёт вторую половинку?

Надо доверить пароль нескольким людям. Но деление на части не гарантирует что я всем дам одинаковые половинки, тут легко ошибиться. И вот я придумал давать друзьям полный "сырой" пароль и видоизменять его известным мне образом. У них будет основа пароля, а у меня – ключ к нему. Примерно по такому принципу работает защищенный протокол HTTPS (certificate, public/private key).

И всё это совпало с моим увлечением HTML/CSS/Vue… Я подумал – а почему бы не сделать этот процесс наглядным?

Постпроцессор

Изначально я сгенерировал пароль на другом сайте и сделал 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, который я использую в коде, говорят, плохой для "криптографических" целей
2. Процедура "восстановления пароля" может испортить весь замысел. У меня не было тяги прибегнуть к ней, но вы можете подумать заранее как подстраховаться от этого.
3. В статье нет пошагового описания создания приложения, но есть открытый репозиторий и если возникнут вопросы можете открывать issues.

Зачем

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

Захотелось сделать что-то лёгкое и приятное, и поделиться с людьми, чтобы отвлечься от рутины на 100%. Кажется получилось. Пока я делал этот проектик, возникла мысль записать сринкаст. Я не эксперт по Vue, мне хотелось поупражняться в HTML/CSS и мне показалось что это самый оптимальный путь. Как думаете, стоит ли записать скринкаст c этой ёлкой?

У меня возникло видение идеального блога, где часть информации подаётся текстом для донесения замысла приложения, а техническая реализация делается скринкастом. У меня ещё есть "говорящая клавиатура для детей", тоже на Vue. Пока что там только английская раскладка. Я планирую добавить русскую и потом опубликовать.