Даниил Постнов
UX/UI дизайнер
Написать в Telegram

Месяц: Апрель 2025

Как настроить Github Actions

Posted on by Даниил Постнов

Неудобно гонять файлы на хостинг вручную, хочется чтобы при коммите изменённые файлы отправлялись автоматически. С этим нам поможет Github Actions.

Вводные данные

  • Хостинг — Beget
  • Редактор — Cursor
  • FPT-клиент — Forklift

Если у вас что-то отличается, ищите похожие кнопки, настройки.

План

  1. Создаём доступ на хостинге
  2. Прописываем Secrets
  3. Создаём файл workflow
  4. Делаем коммит, который запускает автозагрузку.

Создаём доступ

Как настроить Github Actions 1

На хостинге создаём FTP-доступ. На Бегете это находится на главном экране.

Как настроить Github Actions 2
  1. Прописываем логин, сохраняем
  2. Создаём пароль, сохраняем.
  3. В выпадающем списке выбираем путь до папки проекта. Если у вас такого нет, вы потом сможете прописать путь до папки.
  4. Сохраняем сервер.
  5. Кликаем на Включить SSH
  6. Нажимаем на Добавить

Прописываем Secrets

Переходим в настройки репозитория и нажимаем на Secrets and Variables и нажимаем Actions.

Как настроить Github Actions 3

После этого нам необходимо нажать на кнопку New repository secret

Как настроить Github Actions 4

После этого откроется форма для заполнения.

Как настроить Github Actions 5

Здесь мы должны вписать те данные, которые мы сохраняли при создании FTP-доступа. Для каждого из нижеперечисленных надо создать свой Secret.

FTP_SERVER — название сервера

FTP_USERNAME — логин

FTP_PASSWORD — пароль

FTP_SERVER_DIR — путь до папки должен быть просто /, так как мы уже в FTP-доступе прописали путь до папки. Но если у вас не было выбора папки при создании FTP доступа, вы здесь указываете полный путь до папки. На конце обязательно должен быть /

В итоге это будет выглядеть так

Как настроить Github Actions 6

Если вы писали что-то неправильно, не переживайте. Вы можете удалить Secret и создать заново.

Создаём файл deploy. yml

Как настроить Github Actions 7
  1. В корне проекта создаём папку .github,
  2. Внутри папку workflows
  3. Внутри неё файл deploy.yml

Содержание файла deploy.yml

Мне его написала нейронка. Если вы используете Cursor, то попросите её написать файл под ваш проект.

name: Deploy Project

on:
  push:
    branches: [ main, master ]
    paths-ignore:
      - 'README.md'
      - '.github/**'
      - '.gitignore'
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 1
        
      - name: Deploy to production
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: ${{ secrets.FTP_SERVER_DIR }}
          dangerous-clean-slate: false
          dry-run: false
          exclude: |
            **/.git*
            **/.git*/**
            **/node_modules/**
            README.md
            .htpasswd
            .env
            .env.*
          local-dir: ./
          timeout: 60000
          protocol: ftp
          state-name: .ftp-deploy-sync-state.json

Делаем коммит

Делаем коммит и после коммита должна запуститься загрузка на хостинг. Проверять во вкладке Actions

Как настроить Github Actions 8

Вы можете кликнуть на него и посмотреть, как он проходил. Если будут какие-то ошибки, он покажет их здесь. После исправления ошибок можно перезапустить конкретно этот Action, чтобы не делать много коммитов.

Писал заметку для себя. Если вам пригодилось, влепите ниже лайкос ❤️

Фидбек по дизайну SingularityApp

Posted on by Даниил Постнов

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

Сейчас я пользуюсь Things. С точкий зрения визуального дизайна — это лучшее приложение для списка дел. С точки зрения UX — не лучшее. Там есть проблемы.

Поэтому я пробую новые приложения, которые могли бы заменить Things. Пока не нашёл. Но у меня есть проблема — я дизайнер. Поэтому приложениями с плохим визуалом мне сложно пользоваться.

Что мне нравится в приложении

  • Возможность разбивать на канбан доску.
  • Функционал проверки проектов.
  • Режим будильника — это важно, потому что уведомления сыпятся ото всюду
  • Геозаметки — это очень важная вещь, потому что часто тебе нужны конкретные задачи в конкретном месте.
  • Возможность делиться ссылками на задачи даже с теми, у кого нет доступа к вашим задачам.
  • Телеграм-бот, который добавляет задачи во входящие.
  • Замечательный онбординг

Проблемы и идеи

Разная скорость закрытия при нажатии на Esc и клике вне задаче. Это раздражает. Кажется, что приложение тормозит. Время закрытия должно быть моментальным, без задержек.

Фидбек по дизайну SingularityApp 9

Если у вас идентично называется подпроект, в общем списке задачи будет казаться, что они из одного проекта. Да, цвет помогает, но не решает проблему. Я хотел бы, чтобы показывали название первого и конечного проекта. Тогда я буду понимать, откуда идёт задача.

Не понимаю логики дизайна названий. Мне приходится отгадывать, что имели виду дизайнеры приложения. Когда я кликаю и светло-синее поле мигает, мне хочется докликать, чтобы это выделение цветом наконец пропало. У меня создаётся ощущение, что это поле активно. Такое выделение цветом надо делать тогда, когда я кликаю на название проекта, секции.

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

Когда я выполнил избранную задачу, у меня первая мысль — кликнуть на квадратик, чтобы она выполнилась, галочка поставилась. Да, потом я проверил, что это просто отображение статуса. Но это все равно путает и может создавать нагрузку на тех.поддержку.

Фидбек по дизайну SingularityApp 10

На телефоне, чтобы выбрать дату, нужно сделать свайп влево и кликнуть один раз на иконку календаря. У вас в приложении, когда свайпаешь, есть две иконки — «Выполнение задачи» и «Выбор даты».

В списке задач у каждой есть квадратик, чекбокс, на который мы кликаем и отмечаем задачу выполненной.

Какой смысл нам свайпать, чтобы кликнуть на значок выполненности? Или свайпать полностью? Ведь от нас нужен просто клик. Я считаю, клик гораздо проще, чем свайп с точки зрения движения.

Вы могли бы сделать функцию свайпа, это выбор даты, как сделано в Things — свайпаем, у нас сразу открывается окно выбора даты. Это экономит время.

Фидбек по дизайну SingularityApp 11
Фидбек по дизайну SingularityApp 12

При выполнении задач проекта иконка завершённости проекта незаметная — это тоненькая полоска. В приложении Things это сделано лучше. Там закрашивается полностью весь кружок. Это создает лучшую обратную связь с точки зрения того, насколько выполнен проект.

Выбор даты

Фидбек по дизайну SingularityApp 13

В Things, когда я хочу установить дату, фокус ставится на поле свободного заполнения. Я вижу и календарь, и время, но фокус стоит на поле, куда я сразу могу вписать дату.

Фидбек по дизайну SingularityApp 14

В Singularity фокус ставится на дате, хотя я вообще могу захотеть изменить и дату и время. Чтобы дойти до поля сободного заполнения, надо кликнуть на элемент «Сегодня в 16:00». Это лишнее действие.

Фидбек по дизайну SingularityApp 15

Нет визуального отображения вложенности проектов друг в друга. Проект «Сделать это» вложен в проект «Фирсов», но на странице рабочих проектов этого не показано.

Продолжение следует…

Хочется, чтобы на российском рынке было приложение, которые выше на голову Things и Todoist. Я буду уделять время этому приложению, чтобы найти то, что можно сделать лучше.