From Fedya With 💚

Пост получился длинным, ибо я накопила много крутых сайтов (часть из которых мы рассматривали на стриме). В следующие разы я хочу оставлять более подробный фидбек, но уменьшить количество сайтов. Попробуйте угадать какой сайт из списка стал референсом для новой переверстки? Пока я готовлю все материалы, но мы обязательно будем его верстать на стриме. Традиционно ставьте реакции на пост, чтобы я могла уаловить интересно вам или стоит забубенить что-то другое 🩷🩷

Подборка странных сайтов №2 Я обещала в недавней навигации продолжить тег #референсы. Хочется сделать рубрику постоянной, ибо мне нравятся необычные сайты с деталями, которые вы никогда не увидите в Моте. [1] benkwallace.com Сайт с раздельной перемоткой, которую можно без проблем реализовать на тильде. Нравятся блоки, словно прикрепленные скрепкой на пробковую доску, закругления и затемнение страницы при наведении на публикации. [2] studioroder.com Экран разделен на три смысловые части (по типам объектов), каждую можно перематывать отдельно. Такой принцип сохраняется на внутренних страницах. Догадайтесь, могу ли я повторить такое с товарами на тильде 😉 [3] bernardo-rodrigues.com На сайте не просто реализована раздельная перемотка. Проекты в каждой колонке при перезагрузке меняются. [4] carolinebagley.co Обычно, мы пытаемся спрятать Scrollbar, делаем его тоньше или вовсе отключаем (кидаю в вас помидорку, если вы так делаете, потому люди часто листают сайты ползунком и злятся, когда их нет). Тут же дизайнер сделал огромную кнопень для перемотки 😆 [5] hothouseseries.com Сайт выглядит немного нелепо на первый взгляд, но меня очень зацепило зонирование, в центре которого новость о мероприятии. Слева и справа же дополнительная информация. Представьте как можно применить такую компоновку для выставок, ивентов и даже продажи курсов (для фоточек установлен mix-blend-mode: screen) [6] stripe.press Сайт с кучей деталей, которые я еще продолжу разглядывать: верстка в виде книги, книжное меню-бургер, красивые гарнитуры/цвета, летающий мужик. Трудно остановиться. Поэтому разглядывайте сами 😌 [7] newterritory.studio Я планирую переделывать сайт-портфолио и постоянно подглядываю интересные детали. Сам сайт очень простой, но видим: необычное подменю, время работы, бегущую строку в кнопке и краткое Details+ проектов. [8] bee-home Милые и полезные домики для пчёлок. Нравится возможность настройки страницы: палитра, отключение анимаций, более низкое качество изображений.

😔 Разрушающие мысли накануне дня рождения На эту неделю я запланировала пару полезных постов (юбилейный выпуск уверстки), но уже в понедельник накрыла мысль "мне скоро 31, я ничего не достиг, почти нигде не был, плачу два кредита за лечение, умер Аркаша {огромная алоказия, которую я засушила}, до миллиона в этом месяце не хватило 942.000". В последнее время в моей жизни была только разработка (кроме задач по уже готовым проектам). Совсем монотонная из разряда "сверстать, скопировать, вставить". Я пыталась разнообразить свои будни и верстала вечерами то, что мне интересно. Но это угнетало еще сильнее 😔. Я даже не успела заметить, как обесценила всю свою жизнь и весь пройденный опыт из-за поста, в котором девушка озвучила фразу "те, у кого что-то не получается — просто мало делают или являются хроническими неудачниками", а далее были переживания на тему "мне 24 и я не успела заработать миллион за месяц". Хочется сесть с кем-то, пожаловаться обоюдно на жисть, поплакать от души и поесть кексики. #личное

😢 Я уже рассказывала, что скоро на месте мастерской мужа будут строить престижный район. Всё это время мы искали новое помещение (пока безрезультатно), переживали и пили двойную порцию магния. Но есть и нормальные новости: ✧ Нам дали субсидию для покупки нужных инструментов (вы не представляете, как сильно мы рады купить их не в кредит😭). ✧ Я предложила делать скидку 5-10 процентов за отзыв. За пару недель прибавилось 16 отзывов на разных площадках. Хотя муж был уверен, что никто не станет писать отзыв прямо в мастерской. ✧ Составила письма для рассылки и написала в местные музыкальные школы, а также репетиторам, предложив скидку ученикам за небольшой пост в их социальных сетях. ✧ Вместе с субсидией были выделены деньги на создание сайта и фирменного стиля. Которые я не получу 😒 {на самом деле, я бы с радостью делегировала создание логотипа, но мы тот самый клиент с нулевым бюджетом, которому надо красивенько}. На мне лежит написание постов, создание группы в TG, создание сайта с запросом "я не знаю, что мне нужно" и всё бесплатно 😃 Самый сложный клиент в моей жизни. Помогите.

Ну что ж, первые 10 километров в этом году Done ✅ В прошлом году мой муж получил травму колена, которая усугубилась из-за работы за верстаком. Наши совместные тренировки прекратились. И мне было очень одиноко бегать одной, поэтому бывший коллега приехал поддержать меня, забыв сказать что бегает марафон 😈. Мой старинный браслет выдал 12.6км, телефон 11км, apple watch коллеги 15.6км. Мы пробежали 30 кругов по 400 метров, значит ближе к правде оказался именно старый браслет. Темп 7 мин/км, ползли как черепахи из-за меня. Коллега сказал, что разминку пробежали :D бежать было легче, чем подниматься на четвертый этаж после. курьер самоката наблюдал как я ставлю руки на ступеньки и так иду 🤣

Сегодня будет коротенький стрим: посмотрим Auto Layout на тильде, попробуем их исправить. https://youtube.com/live/cNB64Z5KBhM?feature=share https://youtube.com/live/cNB64Z5KBhM?feature=share

Адекватно, ребятки просто прикрутили к функционалу группы display:flex и добавили выравнивание внутри flex-контейнера. Ничего общего с Auto Layout добавленный функционал не имеет 🤬. Пара плюсов есть: (1) Если вам нужно собрать простую группу с одинаковым отступом, то работа станет немного быстрее. (2) Можно задать внутренние отступы для группы элементов. На стриме сегодня я попробую поправить Auto Layout и расскажу, почему разработчиков тильды ругать таки не стоит.

😳 Думаю, уже все в курсе, что тильда выкатили долгожданную многими новинку — Auto Layout. В комментариях под новостью люди начали радоваться, что тильда заменит Figma. Честно, фанатство этого сервиса доходит до абсурда. Давайте вместе разберемся в плюсах и минусах новинки {я обещаю таки выжать из себя плюсы 😆 }

Как применить Auto Layout: группируем элементы, в панели инструментов выбираем Object и ниже выбираем в поле Flex — Auto.

Начнем с минусов: [1] Собрать группу из других групп нельзя Думаю многие в курсе, что при объединении разные группы превращаются в одну группу. Если указать display:flex такой группе, то все элементы встанут в строку (при этом тильда заботливо предложит переносить элементы на другую строку 😤). [2] Определить поведение внутренних элементов нельзя (кроме выравнивания align-self) Внутри flex-контейнера элементы способны сжиматься, растягиваться и переноситься на новую строку. Мы же имеем простую болванку, в которой элементы не связаны с самим контейнером: не сжимаются и не расширяются вместе с ним. [3] Высота блока не подстроится под изменение высоты группы Если вы хотели, чтобы клиенты редактировали контент сами и все высоты менялись автоматически — вы в пролете 😐. [4] Группа элементов по-прежнему не ощущается браузером при сужении экрана Группа с auto layout тоже имеет позиционирование absolute. При этом позиционировании элемент фактически не существует для родительского элемента, для браузера и крутецкий maagiiic 👸 c красивым переносом элементов не случается. Просто напомню вам, как красиво могут переноситься элементы при сужении экрана. [4] Корявое проставление размеров внутренних элементов Если вы хотите задать размер картинок внутри а.л. в процентах, то сделайте это до создания группы. Потому что проценты трагично исчезают из выбора после создания группы. Помним, что после публикации проценты пропадут и тильда сама посчитает ширину элементов. #дайджест

Только закончился созвон с клиентом длиной в почти три часа, я устала и осипла. 😏 Поэтому предлагаю обсудить обосрать Auto Lagaut тильды на пятничном стриме в 16:30 по МСК. Но если вам нужен пост с дайджестом и косяками новинки, то можем сделать. Голосуйте, за удобный вариант: ❤️ — стрим с обзором 🔥 — пост со скринами а вообще, на видео хотела показать как моя морда лица бликует чисто просто так, без кушонов всяких. новый ретинол и энзимка попадут в новые подборки.

После/До переделки и группировки элементов 😏 Забыла добавить, что карточка новости тоже была переделана: перенесен тег и дата. Живой пример можно посмотреть тут (ребята уже что-то переделали без меня, но потоки на месте). #переверстка