Сделал tiny-ремейк своей игры на PuzzleScript

Случайно обнаружил замечательный движок PuzzleScript и за вечер сделал ремейк своей игры-головоломки, которую делал давным-давно.

Поиграйте:
https://www.puzzlescript.net/play.html?p=82a11696801f5375f3fb383867c20848

Если интересно разобраться — под плеером с игрой ссылка на редактор кода этой игры.

Оригинальная игра называется Vampire’s Gold Logic Puzzle, в ней 100 уровней, вот ссылка:
https://play.google.com/store/apps/details?id=ru.podhod.vampire.

Буду рад, если вы поиграете в мою игру!

Дизайн системы UI в Figma

Сегодня нет никакого смысла с нуля создавать стили для типовых интерфейсов, кроме случая когда это является самим предметом вашей работы. В Figma в полном доступе есть сотни готовых решений. В каждую дизайн систему UI вложено сотни часов труда, и лучше сперва потратить свои несколько часов на изучение готовых решений, в поисках подходящего, чем окунаться с головой в создание своего.

Если вы про дизайн-системы ничего не знаете — начните изучение вопроса с этих библиотек дизайнов интерфейсов доступных в Фигме или просто используйте их:

Bootstrap 5 https://www.figma.com/community/file/1044316192441037087

United UI https://www.figma.com/community/file/1020079203222518115

Tailwind CSS UI https://www.figma.com/community/file/768809027799962739

Medusa UI https://www.figma.com/community/file/1278648465968635936

Align UI https://www.figma.com/file/PJ630SzPS3x2D807GYKHOk/

Box-shadow и rectangle-shadow

Для оформления веб-страниц часто нужна тень. В CSS есть тень, которую назвали почему-то «box-shadow», которая создаёт тень как от плоского прямоугольника, которая выглядит как его размытая исходная форма, а, не как ожидается из названия, как тень от коробки (box).

При этом достаточно часто нужна псевдотрехмерная тень, которая имела бы имитацию высоты предмета — когда в близи от объекта тень имеет небольшое размытие, а на расстоянии уже размывается. Например, для кнопок или карточек, или для изображений, которым надо сделать тень, чтобы она выглядела не как тень от открытки, а как тень от книги, которая имеет высоту. Такая псевдотрехмерная тень сильно бы спасла дизайнеров и фронтенд-разработчиков, сейчас такой эффект или имитируется картинкой или набором из теней «размытых форм», что приемлемо выглядит только при имитации теней от объекта небольшой высоты. 

И, соответственно, стоило бы назвать такие тени по их объёмности: тень, которая создается от плоского прямоугольника назвать «rectangle-shadow», а тень которая имитирует выдавливание прямоугольного параллелепипеда — «box-shadow».

Дизайн ФУД-системы Лукино

Опубликовал на сайте студии «Разумный подход» рассказ про ФУД-систему Лукино. Автоматизация учёта обработки заказов на кухне интернет-магазина.
https://podhod.ru/portfolio/lukino-kitchen

Давно сделал.
Если это не продуктовый дизайн, то что.

Как запустить Python из Notepad++

В текстововм редакторе Notepad++ есть возможность запуск комманд через пункт в меню «Запуск (Run) F5». В том же меню можно сохранить эти команды как шорткаты. Таким образом можно запускать скрипты на Питоне, не надо никаких SDK устанавливать, самое простое это написать в Run:

python "$(FULL_CURRENT_PATH)"

Это подойдет для выполнения простого скрипта, но не всегда достаточно. Поскольку такое выполнение команды в Windows будет запущенно из папки выполняемой программы Notepad++. И если в вашем скрипте используется обращение к файлам относительно расположения самого скрипта, эти файлы не обнаружатся. Поэтому надо запускать выполнение не python а строчной консоли cmd с использованием оператора &, позволяющего выполнять команды друг за другом.

Правильная строчка для запуска редактируемого скрипта Python для команды Run в Notepad++:

cmd /c "cd /D $(CURRENT_DIRECTORY) & python "$(CURRENT_DIRECTORY)\$(FILE_NAME)""

или, если надо для отладки не закрывать окно Python при закрытии окна выполняющегося скрипта, добавить ключ -i:

cmd /c "cd /D $(CURRENT_DIRECTORY) & python -i "$(CURRENT_DIRECTORY)\$(FILE_NAME)""

Список Notepad++ $переменых описан в справочнике https://npp-user-manual.org/docs/config-files/#userdefinedcommands