Решил посмотреть мультфильм «Марс Экспресс» на Кинопоиске.

В каталоге он есть, но когда попадаешь на страницу и не глядя кликаешь на акцентную кнопку, тебя перекидывает на другую страницу.

И на этой странице показаны «Что смотрят сейчас» и список других картин.

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

Тут с визуальной точки зрения переход на страницу с другими картинами является главным действием с точки зрения дизайна.

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

Как пользователь я пришел мультфильм посмотреть. И если его нет, я не понимаю зачем размещать его в таком виде, в каталоге кинопоиск hd.

Надо явно показать, что он недоступен уже на страницах до, например, добавить яркое уведомление в каталоге с текстом: "Недоступно в вашей стране" или иконку с пояснением. Это сэкономит время пользователя и избавит от ненужных кликов.

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

P.S.
Оказывается на сервисе он доступен, но в моей геолокации нет. С ВПН работает. Это ещё хуже, потому что дизайн показывает нам, что его нельзя посмотреть. Но не показывает почему.

Если бы он написал "Недоступен в вашей стране" прямо на странице мультфильма или отобразил эту информацию с помощью заметного баннера с соответствующей иконкой, я бы решил проблему. А так я даже пытаться не стал, потому что подумал, что мультфильма там нет.

Если в Figma в начале названия вставить смайлик, он заменит стандартную иконку

Хочу порекомендовать шикарный фильм.

Сейчас время для Гарри Поттера и прочих новогодних картин. Но этот фильм заслуживает внимания.

Я часто слышал про него, но не мог найти время. Только что закончил смотреть и не пожалел.

Одна комната, 12 мужчин и попытка найти справедливость. Посмотрел на одном дыхании.

Фильм черно белый, экшена нет, но держит в напряжении все время. Актеры отыграли блестяще.

12 разгневанных мужчин (1957, США)

Я смотрел на одноклассниках в советском дубляже.

Привет, мои хорошие!

Итогами года спамить не буду 😁 Они уже всех достали.

Если кратко, то год был пиздец какой сложный. Были события, которые создают развилку в жизни.

Спасибо 2024 за то, что дал мне хороших друзей. Кажется ближе к 30 начал понимать, насколько это важно.

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

С наступающим вас 🌲

Виджет сбора ID уроков и тренингов

В одной из школ надо было собрать айдишники. Быстро собрал код, который при клике копирует все айди со страницы.

Понял, что можно сделать его удобнее, особенно если страниц много и нужно отделять тренинги от уроков.

Чем он удобен
👉 При копировании отделяет тренинги от уроков с помощью комментария
👉 При открытии многих страниц не перезаписывает содержимое буфера обмена
👉 Удаляет дубликаты

Установить можно через Tampermonkey или Violentmonkey.
https://greasyfork.org/en/scripts/522901-getcourse-id-collector

Как работает — в видео.

p.s. Возможно где-то уже есть и chatium-решение, ай донт ноу. У меня принцип простой, сделал что-то полезное — пошёл делиться с вами)

p.s.s добавил показ каждого айди каждого тренинга и урока

Для барабанщика важно тренировать координацию.

Чтобы твои руки и ноги работы отдельно друг от друга.

Это кажется простым, но на самом деле очень сложно.

Просто мы не часто делаем ритмичные движения разными конечностями 😁

Пошел гуглить такой тренажер — не нашел. Подумал, а почему бы не сделать его самому.

Сел и собрал его с помощью ИИ.

Работали 2 нейронки и1 редактор: claude, o1 и Cursor.

Потно, мама не горюй. Задолбался жуть, но от результата кайфую.

Поиграться можно тут
https://dev-postnov.ru/sandbox/drum-trainer/

Приложение по аренде велосипедов выдает странную ошибку.

Сканируешь велик, а он тебе «Устройство вне полигона».

❌ Почему плохо
— Слово «полигон» мне ни о чем не говорит.
— Приложение не помогает мне добиться своей цели → арендовать велосипед

✅ Как лучше
— Назвать своим именем. «Полигон» → »Парковка». «Устройство» → «Велосипед».
— Кнопку «Понятно» заменить на «Ближайшая парковка»

Что бы я написал, если бы меня взяли дизайнером.

Вообще я бы топил за то, чтобы пользователь мог его взять. А если нет, то:

Заголовок: «Этот велосипед нельзя арендовать»
Описание: причина, почему я не могу это сделать. В моём мире. Я честно не знаю, зачем они это делают.
Кнопка: «Ближайшая парковка» + количество метров до неё.


Суть проблемы

У некоторых компаний есть правило, что оставлять велики надо на парковке.

Странно то, что его не дают взять, если он не на парковке. Я ведь не нарушил правил, а арендовать не дают.

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

Это расход и упущенный доход.

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

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

Друг написал с проблемой по таймеру

«Когда провожу мастермайнды, даю людям конкретное время для того, чтобы сказать. Пользуюсь Яндекс Таймером. Но как-то несолидно. Можем сделать свой такой же таймер и стилизовать его?»

Спустя 12 запросов в редакторе Cursor с ИИ.

Ну и чуть-чуть подредачил стили.

Потратил ~15 минут 🤯
Раньше бы ушло минимум часов 5.

Вот так я попросил его собрать таймер. Он сам пошел делать файлы, все прописывать.

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

В одном Ташкентском парке есть такая табличка.

Первый раз прошел, смотрю на картинку: «Ну ок, не лопать пузыри, странно конечно, ну может у узбеков свои приколы».

Во второй раз прочитал текст и задумался: «нахрена, сбственно?»

Я начал было критиковать: «здесь картинка не совпадает с текстом».

Потом подумал, как бы я изобразил выбрасывание жвачки, и не смог.
p.s. вариант есть, в комментах закину

И тут можно задать вопрос: «А как ты тогда собрался сделать, чтобы жвачку не кидали?»

Подойдем с другой стороны. Что такое выброшенная жвачка? Правильно, мусор.

Значит надо, чтобы у нас не только жвачку не кидали, а вообще не мусорили. Если у нас будут мусорить всем и не кидать жвачки, будет не ок.

Значит надо сделать общий знак, чтобы не мусорили.

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

Ответ.

Если у людей нет воспитания, они будут бросать мусор, какую бы вы табличку там не поставили.

Размер поля должен быть соразмерен будущему содержанию.

Часто встречаю этот баг, просят расписать поэму, а поле для этого из одной строки.

Как надо: прикиньте, сколько пользователь может добавить туда информации. Можете попробовать заполнить сами и посмотреть, сколько получилось.

Собрал генератор css для перекраски svg

При верске бывает проблема, когда вставляешь svg через фоновое изображение, непонятно как менять цвет. Обычно использую fill, но он не работает и я такой: «Ааай, пойду в Figma перекрашу.»

Я не так часто верстаю, поэтому не вспоминаю о маске. Решил сначала просто написать как писать это. А потом собрал с ИИ простой генератор кода.

https://dev-postnov.ru/svg-recolor/

— Я был хорошим дизайнером?
— Нет, ты был лучшим

Ходил в кино на днях, мой зал 6.

Стою перед этой цифрой и такой: «Блять, идти-то куда»

Балдежные аватарки для ботов

Вчера захотелось пол-дня убить на создание ботов, которые решали бы насущные задачки.

3 бота уже готовы. Про них расскажу в ближайшие дни. Сейчас делаю Дедлайнера.

От чего кайфую, так это от создания аватарок 💕

Бот, который найдет шрифты за вас

Часто надо быстро скачать шрифт и ты понимаешь, что тебе предстоит ходить по сайтам и искать.

Теперь за вас это будет делать бот.

Ты знаешь, кому его отправить 💜
@grab_fonts_bot

День упавшего сервера

В четверг создал написал 4 ботов. На радостях залил их все на сервер, довольный такой. Рассказал другу, он запостил про них в канал на 5000 человек и мой сервер прилёг полежать. Боты тупо не работали.

А боты были такие:
— создание favicon из картинки
— поиск шрифта
— скачивание шрифтов с любого сайта
— проверка адаптивности

Первые 3 работают нормально.

А вот последний мне все и поломал. Он работал так: ты ему сайт, а он тебе 5 скриншотов сайта в разных разрешениях. Звучит клёво.

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

Но есть нюанс: этот бот для сервера очень прожорливый. Он для каждого сайта запускает «браузер», заходит на сайт, делает скриншоты.

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

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

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

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

Каждый раз читаю рассуждения нейронки и внутри щекочет. Просходит какая-то магия.

Делаю аудит сайта, попросил переписать отзыв для примера.

Переводчик видео для Chrome и Safari

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

Ребята собрались и сделали такой плагин для хрома. Сам использую только на Ютубе. Дизайн и функционал как в Яндекс Браузере. Голоса слегка деревянные. Пример работы на видео.

Что в нём хорошего
— Работает с ускорением
— Открытый код
— Быстро переводит
— Много настроек

Как установить за 1 минуту
1. Установите расширение Tampermonkey (Альтернатива для Safari: UserScripts)
2. Нажмите на «Установить Скрипт»
3. Если не активируется сам, то нажмите на черный квадратик и переключите тумблер.

Если не получилось, пишите в комментах, подскажу.

Исходный код
https://github.com/ilyhalight/voice-over-translation

Данные пользователя — священны

Знакомы с проблемой, когда долго-долго заполняешь форму, случайно обновил страницу и пуф — данных нет?

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

Надеяться на то, что пользователь будет супер-аккуратен и никогда не обновит страницу — так себе затея.

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

Я недавно обновлял калькулятор себестоимости на сайте и решал там эту проблему.

Сейчас даже если ты только закончил слово вводить и у тебя выключился компьютер — все сохранится.

Сохранять надо через localstorage или cookie. С нейронкой дописать такой код стало легко.

Калькулятор себестоимости. 3 версия 🔥

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

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

Теперь можно отправлять результат в телеграм или скачивать текстовым файлом.

https://dev-postnov.ru/works/count-cost/

Ненужный выбор типа устройства

Есть приложение по аренде велосипедов и повербанков.

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

Я каждый раз сканирую, а потом такой: «Ой, надо же правильный выбрать».

Это можно доверить приложению. Я уверен, что приложение может определить, что я сканирую.

Этот выбор типа устройства каждый раз создает раздражение и потерю времени.