You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

git-budget.html 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5. <style>
  6. #header
  7. {
  8. background: #2BA6E3;
  9. padding: 0.7em;
  10. text-align: left;
  11. }
  12. #header a
  13. {
  14. color: white;
  15. text-decoration: none;
  16. padding: 0.5em 1em 0.5em 1em;
  17. }
  18. #lang
  19. {
  20. float: right;
  21. }
  22. .news_item
  23. {
  24. background: #FFFFFF;
  25. width: 720px;
  26. padding: 1em;
  27. margin-top: 2em;
  28. margin-bottom: 2em;
  29. border: 1px solid #E0E0E0;
  30. text-align: left;
  31. }
  32. .news_item_contents
  33. {
  34. color: #444;
  35. line-height: 1.5em;
  36. }
  37. .news_item_date
  38. {
  39. margin-bottom: 2em;
  40. color: #aaa;
  41. }
  42. html
  43. {
  44. font-family: sans-serif;
  45. }
  46. body
  47. {
  48. background: #FAFAFA;
  49. }
  50. code, pre
  51. {
  52. font-family: monospace, serif;
  53. font-size: 1em;
  54. color: #7f0a0c;
  55. }
  56. /*
  57. figure
  58. {
  59. margin: 0px;
  60. padding: 0px;
  61. }
  62. */
  63. img
  64. {
  65. width: 720px;
  66. }
  67. a
  68. {
  69. color: #3A91CB;
  70. }
  71. table
  72. {
  73. border-collapse: collapse;
  74. }
  75. table, th, td
  76. {
  77. border: 1px solid #aaa;
  78. padding: 0.5em;
  79. margin-top: 0.5em;
  80. margin-bottom: 0.5em;
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <div id="header">
  86. <strong id="title">Open Game Studio</strong>
  87. <a href="../../ru/news/index.html">Новости</a>
  88. <a href="../../ru/game/index.html">Игры</a>
  89. <a href="../../ru/tool/index.html">Инструменты</a>
  90. <a href="../../ru/page/about.html">О нас</a>
  91. <div id="lang">
  92. <a href="../../en/news/git-budget.html">EN</a>
  93. <a href="../../ru/news/git-budget.html">RU</a>
  94. </div>
  95. </div>
  96. <center>
  97. <h1>В новостях...</h1>
  98. <div class="news_item">
  99. <h2 class="news_item_title">
  100. <a href="git-budget.html">Почему я сделал личный проект учёта трат на Git+JS</a>
  101. </h2>
  102. <p class="news_item_date">
  103. 2020-05-03 00:00
  104. </p>
  105. <div class="news_item_contents">
  106. <p><img src="../../images/2020-05-06_гит-бюджет_снимок.png" alt="ГитБюджет" /></p>
  107. <p>В этой статье Михаил поделится опытом использования Git+JS.</p>
  108. <p>Здравствуйте, господа, в этой статье я поделюсь опытом создания приложения учёта трат, в частности отвечу на следующие вопросы:</p>
  109. <ol>
  110. <li>Зачем мне приложение учёта трат?</li>
  111. <li>Почему это личный проект?</li>
  112. <li>Почему проект на Git+JS?</li>
  113. </ol>
  114. <p><strong>1. Зачем мне приложение учёта трат?</strong></p>
  115. <p>Как и многие другие люди я давно хотел стать богатым и практиковать <a href="https://успешный-успех.рф">успешный успех</a>. Одной из рекомендаций в таких случаях часто выступает предложение вести собственный бюджет, чем я и занялся несколько лет назад. Скажу сразу, что ведение бюджета не сделало меня богатым и успешным, а своё материальное положение я улучшил обычным переездом в Москву.</p>
  116. <p>Вести бюджет я начал, если не изменяет память, где-то в 2012-м году. В то время у меня уже была профессиональная деформация программиста, выражающаяся формулой "сделано не мной" и попыткой написать всё самому. Тем не менее, по неопытности я решил начать с "проверенных" решений и приобрёл <a href="https://www.youneedabudget.com">YNAB</a> (You Need A Budget), т.к. приложение позволяло работать и с ПК, и с телефона.</p>
  117. <p>Я честно пытался задавать план трат на месяц и укладываться в него года три. Однако, где-то в 2015-м году авторы выпустили новую версию приложения, за которую <strong>опять хотели денег</strong>, старую же версию эти недальновидные капиталисты выкинули на обочину истории. В итоге мне пришлось выбирать из двух вариантов:</p>
  118. <ol>
  119. <li>Заплатить за новую версию и пользоваться "совершенно новым" приложением с другим интерфейсом.</li>
  120. <li>Послать их нафиг, сохранить деньги, но потерять текущую историю трат.</li>
  121. </ol>
  122. <p>Я рассудил, что:</p>
  123. <ol>
  124. <li>приложение уже оплачивал;</li>
  125. <li>старая версия меня устраивала;</li>
  126. <li>новую версия я не просил;</li>
  127. <li>если бы они мне до покупки сказали, что будут каждый раз драть с меня деньги, я бы им не заплатил и первый раз;</li>
  128. <li>спонсировать такое хамство я не буду;</li>
  129. </ol>
  130. <p>и выбрал второй вариант: послал их нафиг и <strong>потерял историю трат</strong>.</p>
  131. <p>Эта ситуация меня довольно сильно разочаровала, поэтому я забросил ведение бюджета где-то на год. Однако, в один из дней "болезненной синхронизации" (также известной как "выяснение отношений") я <strong>не смог отбить финансовый наброс</strong> вида "ты транжира, вечно тратишь деньги на ерунду", после чего ясно осознал важность учёта трат.</p>
  132. <p>В этот раз я решил не повторять ошибку и не отдавать свои данные неизвестно куда с потенциальной возможностью их потерять, поэтому начал вести учёт трат в самых обычных заметках телефона. Формат был довольно простым и выглядел следующим образом:</p>
  133. <p><img src="../../images/2020-05-06_гит-бюджет_заметки.png" alt="Заметки" /></p>
  134. <p>Заметки продержались у меня до середины 2018-го, пока я всё-таки не захотел иметь возможность <strong>работать с тратами на ПК</strong>, чтобы анализировать их. Я решил поискать решение, которое позволит мне <strong>бесплатно работать</strong> с историей трат и на ПК, и на телефоне. Таким решением оказался обычный календарь:</p>
  135. <p><img src="../../images/2020-05-06_гит-бюджет_календарь-день.png" alt="Календарь" /></p>
  136. <p><img src="../../images/2020-05-06_гит-бюджет_календарь-запись.png" alt="Новая запись" /></p>
  137. <p>В календаре я использовал учётку Google, чтобы иметь доступ к <a href="https://developers.google.com/apps-script?hl=ru">Apps Script</a> (фактически JavaScript) для анализа записей. Делать скрипты оказалось не очень удобно, т.к. формат хранения календарных записей мало подходит для трат. Вопрос владения данными также оставался нерешённым: мои данные опять пылились на неизвестном и неподконтрольном мне сервере, а доступ к ним был лишь через неподконтрольный мне и <strong>изменяющийся по чужой прихоти</strong> API.</p>
  138. <p>Во время использования календаря меня периодически посещали две мысли:</p>
  139. <ol>
  140. <li>как здорово было бы все свои данные хранить в Git, чтобы легко анализировать траты;</li>
  141. <li>как здорово было бы использовать интерфейс без всего лишнего, чтобы ускорить запись трат.</li>
  142. </ol>
  143. <p>Осенью 2019-го я наткнулся на проект <a href="https://isomorphic-git.org/">Isomorphic-Git</a>, позволяющий работать с Git из JavaScript, бегло проверил его работоспособность и понял, что нашёл свой Святой Грааль. Недавно я завершил создание первой версии приложения ГитБюджет, функциональность которого можно увидеть в следующем видео: </p>
  144. <iframe width="720" height="405" src="https://www.youtube.com/embed/ii_cLXAy3S0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  145. <p>В итоге, сейчас учёт трат на телефоне у меня выглядит следующим образом:</p>
  146. <p><img src="../../images/2020-05-06_гит-бюджет.png" alt="ГитБюджет" /></p>
  147. <p>Данные в Git выглядят cледующим образом: <a href="https://gitlab.com/kornerr/git-budget-sample-data/-/blob/me/gb.log">https://gitlab.com/kornerr/git-budget-sample-data/-/blob/me/gb.log</a></p>
  148. <p>Отмечу некоторые важные моменты:</p>
  149. <ul>
  150. <li>по ссылке представлено хранилище Git, отражающее действия из видео;</li>
  151. <li>свои траты я храню в отдельном закрытом хранилище, так следует делать каждому;</li>
  152. <li>приложение работает полностью на устройстве и не имеет сервера: используется хостинг GitHub Pages;</li>
  153. <li>приложение общается с внешним миром лишь в момент синхронизации с Git;</li>
  154. <li>пароль хранит браузер, приложение использует его лишь в момент синхронизации с Git;</li>
  155. <li>приложение необходимо загружать по HTTP, т.к. используемая версия Isomorphic-Git (0.70.0) некоторые запросы (метаданные) к Git выполняет по HTTP, а браузеры нынче запрещают обращения к HTTP из HTTPS.</li>
  156. </ul>
  157. <p><strong>2. Почему это личный проект?</strong></p>
  158. <p>На ГитБюджет я потратил 40 часов своей жизни в течение первого квартала 2020-го, т.е. в среднем каждый день я тратил около получаса.</p>
  159. <p>Личный проект обладает следующими преимуществами по сравнению с рабочим:</p>
  160. <ol>
  161. <li>Можно делать всё, что угодно, и учиться на своих ошибках.</li>
  162. <li>Никто не стоит над душой и не ограничивает фантазию.</li>
  163. <li>Предыдущие два пункта дают душевный покой и возможность совершенно спокойно принимать и исполнять самые идиотские решения на работе.</li>
  164. <li>Шишки, набитые в личном проекте, колоссально расширяют кругозор.</li>
  165. </ol>
  166. <p>У личного проекта также есть и недостатки:</p>
  167. <ol>
  168. <li>На твой проект пофиг всем в мире, кроме тебя.</li>
  169. <li>Никто не даст тебе ни гроша.</li>
  170. <li>Нужно умудряться выкраивать время на личный проект каждый день.</li>
  171. <li>Жена не скажет тебе "спасибо", даже если сама потом будет использовать приложение.</li>
  172. </ol>
  173. <p>Легко заметить, что все недостатки личного проекта перекрываются преимуществами рабочего проекта. А все недостатки рабочего проекта перекрываются преимуществами личного проекта. Инь и янь.</p>
  174. <p><strong>3. Почему проект на Git+JS?</strong></p>
  175. <p>Хранение данных в Git вместо неизвестного сервера/API даёт следующие преимущества:</p>
  176. <ol>
  177. <li>Git является самым распространённым решением для децентрализованного хранения проектов среди разработчиков, т.е. практически каждый разработчик умеет работать с Git.</li>
  178. <li>Для работы с Git не нужен очередной API: вы просто работаете с файлами.</li>
  179. <li>Есть много сервисов, предоставляющих хранилище Git бесплатно, если вы не помешаны на безопасности или не хотите платить денег за сервис.</li>
  180. <li>Владелец сервиса Git, конечно, может через несколько лет <a href="https://habr.com/ru/post/413215/">быть выкуплен крупной корпорацией</a>, однако, вы легко сможете перенести свои данные Git.</li>
  181. <li>Для максимальной безопасности данных вы всегда можете поднять свой Git.</li>
  182. </ol>
  183. <p>Использование JS с HTML/CSS вместо Swift/Kotlin/C#/Python даёт следующие преимущества:</p>
  184. <ol>
  185. <li>Ваше приложение будет работать и на телефоне, и на планшете, и на ПК.</li>
  186. <li>Вам не нужно проходить никаких проверок вроде AppStore, для того чтобы попасть в каждое устройство.</li>
  187. <li>Ввиду того, что стандарты HTML/CSS/JS согласуются огромным количеством компаний, ни одна из компаний не может <a href="https://habr.com/ru/post/413335/">в одностороннем порядке прекратить поддерживать какую-либо технологию</a> или <a href="https://arm1.ru/blog/pro-perehod-na-swift-3-i-swift-2-4">в очередной раз поменять API</a>, так что обратная совместимость может достигать <a href="on-the-way-to-durable-applications.html">20 лет</a> и больше.</li>
  188. <li>Ввиду отсутствия сервера вся логика размещается в JS, исполняемый на клиенте, что даёт возможность сохранить ту версию приложения, которая устраивает лично вас, и забыть про обновления, зачастую <a href="https://pikabu.ru/story/android_skoree_vsego_stanet_platnyim_6052457?cid=118211967">приводящие лишь к увеличению тормозов</a>.</li>
  189. </ol>
  190. <p>ГитБюджет является лишь первым испытанием возможностей Git+JS. Посмотрим, что удастся сделать ещё.</p>
  191. </div>
  192. </div>
  193. <div id="footer">
  194. Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
  195. из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
  196. Сайт размещён на <a href="https://pages.github.com">GitHub Pages</a>.
  197. </div>
  198. </center>
  199. </body>
  200. </html>