Вы можете бросить! … С помощью Vue и Dexie

Я смиренно предполагаю, что у каждого из нас есть дурная привычка, от которой мы хотим избавиться. По крайней мере, у меня есть такие привычки 😅. Будь то фиксация непроверенного кода, кодирование без надлежащей документации, просто копирование и вставка кода или даже отсутствие программирования или связанных с компьютером вещей, таких как слишком мало времени с семьей или друзьями, обвинение других в любых ошибках вместо того, чтобы брать на себя ответственность или есть слишком много конфет 🍭🤷🏻‍♂️.

Еще в июле 2018 года я дошел до того, что действительно разочаровался в своей неспособности слушать жену. Я имею в виду настоящее слушание. Слушая, не забывая сразу, что она сказала в следующие минуты. Слушайте, уделяя ей все внимание. Хотя трудно быть прерванным, когда вы действительно занимаетесь чем-то вроде программирования, я мог бы, по крайней мере, правильно сообщить, что сейчас не лучшее время для разговора, вместо того, чтобы делать вид, что слушаю, и не зная, что она сказала, когда выходила из комнаты. Это часто приводило к дискуссиям типа «Я думал, мы говорили об этом» или «Я просил вас сделать это, а вы этого не сделали». Мне это не нравилось, и я знал, что надо что-то с этим делать.

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

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

Как это выглядит

Я размещаю это приложение на youcanqu.it. Просто зайдите и поиграйте, протестируйте или используйте его по своему усмотрению. Я решил разрабатывать макет и стили самостоятельно, а не использовать CSS Framework. Ниже приведены основные разделы приложения.

Просмотр месяца и фактическая область ввода

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

Статистика

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

Достижения

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

Просмотр года

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

Администрация

Здесь вы можете экспортировать, импортировать или удалить свои данные.

Как это работает

Это так же просто, как установить прошлые дни успешными или неудачными, в зависимости от того, достигли ли вы своей цели в этот день или нет. Для этого просто наведите курсор на один из прошедших дней в ежемесячном обзоре и нажмите появившуюся левую или правую кнопку (при желании вы также можете установить для этого дня значение «не определено»). Вы можете сделать это, например, каждый день утром в течение прошедшего дня. С каждым успешным днем ​​ваша статистика и достижения будут расти.

Под капотом это Vue.js SPA, использующий Dexie.js для хранения данных через Indexed Database API вашего браузера. Это означает, что никакие данные не покидают ваш компьютер и не синхронизируются с сервером. Конфиденциальность ✅!

Если вы хотите узнать подробности, загляните в репозиторий проекта.

Приглашаем вас поддержать этот проект Github, просмотрев его ⭐, создав проблемы 🐛 или запрос на перенос 🏗. Может быть, у вас есть идеи для дополнительных достижений или вы хотите перевести этот инструмент на свой родной язык? См. Эти рекомендации, если вы хотите внести свой вклад 💚

Заключительные слова

Я очень надеюсь, что этот проект будет полезен для некоторых из вас так же, как и для меня. Я все еще нахожусь в процессе улучшения своих коммуникативных навыков, но это помогло мне буквально увидеть свой прогресс и успех. Я всегда люблю что-то создавать, зная, что люди на самом деле это используют, и это им действительно помогает! В этом суть Open Source, не так ли?

Не стесняйтесь поделиться своей историей о вредной привычке в комментариях. Я уверен, что мы все можем помогать друг другу становиться немного лучше с каждым днем!

DEV-сообщество-🤗! Так держать, ты классный.

Опубликовано: 27 апреля 2020 г. на dev.to