Игорь Штанг разыгрывает три места на курс про таблицы на конкурсной основе

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

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

Все это вылилось в визуализацию данных, работой с табличными данными и бутылочкой вина в понедельник вечером. Заметка на будущее: не делать такие штуки в последний момент)

Но получилось как получилось, целых три варианта и описание процесса в блоге.
🔗 Посмотреть и почитать к чему и как я пришел

Настройка Мака для продуктивной работы

У Вани Замесина вышла классная заметка, где много ссылок, инструкций и костылей.

Есть что подергать оттуда под свои задачи. Например, я узнал про Paste — менеджер буфера обмена. Он сохраняет всё, что попадает в буфер и с помощью шоркатов помогает не потерять и быстро оперировать скопированными материалами.

🔗 Почитать у Вани в блоге

Апдейт личного сайта на Вебфло

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

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

🔗 Смотрите, что получается [WIP]


🪨 Что есть сейчас

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

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

По контенту еще далеко не финал, описания написал поздно вечерком, чтобы хоть чем-то оперировать на сайте и не вставлять совсем рыбу. Содержимое и проекты еще буду редактировать. Их, кстати, сделал с помощью Вебфло ЦМС, позже покажу как это все работает изнутри.

🚀 Чего еще хочу сделать

В будущем предполагаю, что на вебфло переедет и блог, и резюме и всё, что я хочу от сайта. Разделов точно будет больше.

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

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

💬 Потыкайте, посмотрите как это выглядит с десктопа и мобилы, поставьте эмодзю какую или напишите комент)

#webflow #portfolio

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

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

В Вебфло нельзя без боли и страданий настроить домен без 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