search

htmlacademy / html2-basic-template

Gulp сборка: html, sass, stack, webp.
36 stars 222 forks source link

Вынести `icons/` из `images/` #68

Closed firefoxic closed 6 months ago

firefoxic commented 9 months ago

Проблема

Практика расположения иконок по пути source/images/icons/ выявила несколько проблем:

  1. Невозможность в файловом менеджере развернуть папку иконок, свернув при этом все остальные картинки, коих к моменту работы с иконками (в 5 разделе) в images/ уже несколько десятков файлов (потому что добавляются в 4 разделе). При этом работа с иконками подразумевается (в идеале) в стилях или (допустимо) в разметке. Местоположение файлов для обоих вариантов сильно ниже, и свернуть ненужные на данный момент папки — вполне естественное желание, чтобы меньше (или вообще не) скроллить список файлов, То есть жить можно, но неудобно. И не понятно зачем страдать, когда можно не страдать.
  2. Дев-сервер за картинками вместо build/images/ ходит в source/images/ включая всю вложенность. И когда браузер просит у него файл стека иконок, дев-сервер идёт за ним в source/images/icons/, что приводит к невозможности использовать:
    • пустой файл stack.svg для удобства набора пути к фрагменту итогового стека, или
    • иконку с именем stack.svg, а это валидное имя, которым может быть названа иконка например кнопки-бургера (студент вполне имеет право на желание назвать так иконку, и очень странно запрещать ему это).
  3. Файловая структура не помогает отделять (для объяснения разницы) иконки от остальных картинок, при том, что иконки особым образом обрабатываются и используются. К тому же в images/ часто появляются подпапки catalog/, products и тп, что превращает icons/ в просто ещё одну подгруппу картинок наряду с остальными — разница размывается, понимания не прибавляется.
  4. В тасках сборки есть никому теперь ненужные исключения путей до иконок. Эти исключения были раньше нужны, как пример того как их вообще делать, но сейчас студентам самим сборку не приходится писать (вернее копипастить готовую из материалов 8 раздела) и эти исключения просто лишний код и лишняя нагрузка на поддержку автоматизации.

Решение

Вынести icons/ на уровень выше.

./
└── source/
    ├── icons/
    │   ├── htmlacademy.svg
    │   ├── README.md
    │   └── stack.svg
    └── images/
        ├── hero.png
        ├── logo.svg
        └── README.md

Это и решит разом все выше перечисленные проблемы, и приблизит учебные проекты к прод-проектам (давно в таких не видел icons/ внутри images/ — либо отдельно, либо иконки вообще по соответствующим компонентам раскиданы)

Возражения на возражения

Пустышка stack.svg это хак, который не должен существовать.

Не соглашусь, я использовал сам в прод-проектах. Если это удобно и ускоряет разработку, при этом не мешается и не лезет в прод — почему запрещать себе такое? Да можно наверное запилить сниппет, который будет разворачивать из пути до иконки в путь до фрагмента стека. Но это вылечит лишь одну из болячек.

Задача обучить пользоваться путями, а такая помогалка мешает, так как не все редакторы в состоянии нормально подсказывать пути.

Укорочение пути на один уровень вложенности никак не мешает обучать путям, ибо остаются те же самые пути, с теми же самыми двумя подъёмами вверх от текущего стилевого файла, и с той же обработкой пути до иконки в путь до фрагмента стека (будь то с помощью сниппета, или помогалки-пустышки, или просто ручным переписыванием пути). Редактор же всё-таки подсказывает, потому что у 99% студентов это VS Code, у какой-то части оставшегося процента это WebStorm. А со всем остальным я бы отправлял за установкой VS Code, просто потому что помощи по работе с редактором студент тогда получит около нулевой.

Если же очень надо большую вложенность в путях создать, то лучше это в более безопасном месте сделать, например в путях до шрифтов, как я это сделал у своего студента:

./
└── source/
    └── fonts/
        ├── lato/
        │   └── 400.woff2
        ├── oswald/
        │   └── 400.woff2
        └── README.md
nikolai-shabalin commented 6 months ago

Угу, давай