Телеграм не дает коменты к старым постам, если только что их включил. Поэтому вот пост для комментариев к этому посту.

Дальше в каждом посте будет кнопочка, можно спрашивать любые вопросы и комментировать всё, что я тут пишу)

В Вебфло нельзя без боли и страданий настроить домен без www по умолчанию

Вчера переносил сайт с домена Вебфло на основной и промудохался с этим часа 3. Отдурил всю голову поддержке хостинга, на котором лежит сайт с блогом иии…ничего не получилось)

Если не погружаться в технические детали, то там есть сложность с NS записями и SSL сертификатами со стороны Вебфло. По итогу мой хостер развел руками, сказал, что у нас то, что хочет Вебфло нельзя сделать, делай через регистратора домена. А там тоже нельзя так сделать.

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

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

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

Но уже сейчас можно посмотреть как это выглядит на
🔗 beladzed.com

#webflow #portfolio

Вебфло, про тарифы

У Вебфло хитрая система цен. На их поддомене типа beladzed.webflow.io можно хоститься бесплатно и даже использовать возможности CMS. Правда на сайте будет бирка о том, что сайт на Вебфло и есть ограничения по количеству отправленных форм — до 50 штук.

Дальше идет базовый тариф, за $18 в месяц, там уже можно убирать бирки, но нет CMS. А это слишком мощная штука, чтобы от нее отказываться. Зато, там уже можно ставить свой домен и количество отправки форм расширяется до 500.

Дальше идет тариф за $29 в мес, который мне и пришлось выбрать. Туда входит всё из тарифа выше + CMS + по формам до 1000. Дорого, но я готов платить за прикольный продукт с которым работаю.

Цены, кстати, с учетом оплаты раз в месяц. Если платить наперед за год, то получается на 20% дешевле. Я пока не на 100% уверен, что останусь с концами на Вебфло, хочу еще попробовать Фреймер.

#webflow

Иногда бывает забавно себя погуглить, можно найти всякие статьи с моими фотками или людей с похожими фамилиями и другими жизнями 🙃

Специалист по красоте звучит как отличная строка в резюме

Неразрывный дефис

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

Сразу я пытался это починить с помощью цсс, промудохался час со свойствами hyphens, word-break и line-break, но ничего не вышло. Скорее всего из-за того, что сайт на русском, а внутрибраузерные словари оно как-то хитро тянет через другие свойства. Забил и подумал, что наверняка есть решение проще.

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

Но если опубликовать, то все работает так, как должно. Слова не ломаются, читать стало проще 🎉

P.S. Когда писал заметку, вспомнил про Типограф Лебедева. Обкатал на нем — тоже все работает. Главное в настройках выставить «вставлять готовые символы».

#webflow #типографика

Вы только не подумайте, что теперь все посты будут про Вебфло)

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

Я даже перенес его на домен, чтобы начать платить за сам Вебфло, чтобы всё как-то начало двигаться пошустрее. Ведь когда платишь, то сразу хочется платить за что-то, что будет приносить пользу. Так что выжимаю из этих 30 баксов в месяц все, что могу)

Но в этом посте я хотел поделиться нашим недавним кейсом на Бихансе, который занял порядка 500+ часов, сменил несколько дизайнеров и, наконец, опубликовался.

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

И сделали классно) Я арт-директил, Саша Ревяко подсказывал, Стас Карпов рисовал, Женя Борисевич писала, Дима Хилькевич анимировал. И еще много-много людей участвовали в небольших кусочках.

🔗 Посмотреть можно по ссылке на Бихансе, а прокомментировать в комментариях к посту)

А вот побольше всяких картинок из кейса и репост со студийного акка. Если еще не подписаны — подпишитесь. Там не очень часто посты, зато можно смотреть чего интересного сейчас делаем)

Как быстро, бесплатно и просто сжимать картинки на маке

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

Хороший тон сжимать их при отправке или заливке в веб. Многие используют всякие онлайн сервисы, например tinypng, но это сложно:
Скачать → найти куда скачал → закинуть на сервис → подождать → скачать архив → распаковать → закинуть куда нужно.

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

Теперь процесс проще:
Скачать картинки → найти куда скачал → перетащить в окно ImageOptim → подождать пока обработается → профит, в исходной папке теперь оптимизированные картинки с теми же названиями.

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

🔗 Скачать для Мака

Сделал мобильное меню на сайте 📱

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

Основные критерии по которым я шел при разработке:

1. Меню должно быть сквозным, открываться с любого места на странице.

2. Под пальцем. Телефоны стали огромными, тянуться в правый, или не дай бог в левый угол, рисково для сохранности телефона.

3. Иметь одну точку открыть/закрыть. Напрягает, когда открываешь меню в одном месте, а закрываешь в другом.

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

5. Скролл меню не должен спорить с фоновым скроллом страницы. Меню это слой поверх сайта и при скролле не должна изменяться точка чтения основной страницы.

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

Больше всего потратил времени на понимание, как устроены тригеры и анимации в Вебфло, как строить зависимости и состояния. Для пункта 5 вообще пришлось расчехлить js, чтобы хитро добавлять классы при открытии.

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

Но это все мелочи, главное, что база и принципы заложены.

Потыкайте с телефона, напишите норм ли работает открыть/закрыть, хорошо ли работает скролл, насколько удобно расположение.

P.S. Добавил еще авку в мобильной версии и сделал верстку шапки поинтереснее относительно общей сетки)

🔗 Посмотреть все это работает

#webflow #portfolio

Согласился — делай как обычно

Бывают такие проекты, которые интересны, чтобы положить в портфолио, но абсолютно невыгодны по деньгам.

Я иногда беру такие, когда вижу, что могу не только дополнить портфель прикольным проектом, но и попробовать какие-то новые для себя штуки. И тут есть опасность.

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

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

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

Еще я постоянно держу в голове потенциал проекта. Часто бывало так, что клиент по завершении советовал меня кому-то и в итоге недополученные деньги окупали себя в несколько раз.

Согласился → делай так же как и всегда.

#принцип

Опа, получили очередную ленточку 🚀💥🍾

Добывать ленты становится все проще и проще. Осталось научиться кейсы делать быстрее)

Идеальный портрет кандидата при найме

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

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

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

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

После того, как составил файл — попросил всех посмотреть и откоментить. Через пару итераций мы зафиксировали, что да, именно такого дизайнера хотели бы найти в идеале.

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

Такой файл поможет составить структуру интервью и понять куда смотреть в портфолио. Для эйчаров отдельно еще сделал блок «Кто точно не подойдет», где расписал кто точно нет, а кто с меньшей вероятностью. Это сильно сократит моё время на отсмотр нерелевантных откликов.

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

#найм