From Fedya With 💚

Наливаем чаёчек и начинаем стрим ❤️ https://youtube.com/live/bDPpapXPc2w?feature=share https://youtube.com/live/bDPpapXPc2w?feature=share

Катя, спасибо! Этот пост оказался суперполезным ❤️ получилось разобраться с специфичностью и сделать то, чего не хватало!

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

Сегодня на стриме я продолжу верстать необычный концепт с раздельным скроллом каждой стороны {такое только я на тильде могла замутить 😎} Чтобы не тратить драгоценное время стрима на перенос контента и оформление блоков в стандартных настройках — я уже сделала это вне стрима. А также дописала оболочку, которую начала писать на прошлом стриме. Глобально хочется побыстрее уже сделать этот проект, добавив в копилку странных вещей, которые я делала из стандартных блоков {прошлый пример тут}. Традиционно встречаемся на youtube в 16:00 часов. Напоминаю, что на стримах по переделке блоков ничему не учу — просто показываю 🤩 Я выписала себе пару вопросов из опросника, на которые хочется ответить. Забегайте поздороваться или поболтать. ✨ссылка появится перед стримом ✨

😰 Извиняюсь за задержку розыгрыша консультации (я почему-то запомнила, что 7 февраля — это четверг) В начале хочу поблагодарить всех, кто ответственно ответил на все вопросы. Благодаря вам я смогла выписать пять направлений для консультаций и выделить темы, которыми я точно не смогу поделиться (о многом я вообще не задумывалась). А бесплатную консультацию забирает Диана — ShakerovaDiana 😌 Основные направления: 1. Кастомизация стандартных блоков {что можно делать, схемы} 2. Виды верстки и адаптив {как подружить Zero со стандартными блоками, виды верстки и не только} 3. Аудит сайта c отчетом {что нужно сжать, что переделать} 4. Базюлька {базовые знания по сайтам, которых многим не хватает} Каждая тема требует отдельной программы, дополнительных материалов и подробных презентаций. Поэтому я вернусь к вам со всей информацией и анонсом 15 февраля 🙂 На пару оставленных вопросов отвечу на следующем стриме.

🤪 Возвращение блудной модификации по созданию шума на Тильде. Мой уже бывший стажер Женя пересобрал хаос разных блоков T123 и поправил некоторые вещи. Я же переделала дизайн страницы и переписала решение {потому что нет предела совершенству}. 1. На странице появилось меню и футер со всеми нужными ссылками (главная и обо мне появятся позже). 2. В последнем пункте можно поддержать выход решений любым способом. 3. У решений теперь есть описание до демонстрации, которого не хватало. 4. В мобильной версии страницы больше нет формы и блока с кодом {потому что мне лень делать адаптив для десктоп-решений 🙂}. Шум навести охота Почему решение лучшее: 1️⃣Для создания шума не используется уже анимированная GIF, шум реально можно сделать с любого изображения {даже так, ЛЮБОГО изображения}. Я оставила ссылку на конструктор шума, а еще можно взять с этого сайта любую картинку и навести шум. 2️⃣ Можно редактировать: размер фоновой картинки, прозрачность, режим наложения, выбрать блоки исключение (поверх которых не будет шума), отключить на мобильном устройстве. 3️⃣На мобильном устройстве шум подстроится под высоту экрана (без полоски снизу при скрытии панели поиска). Помните, что все решения в этом канале всегда будут лежать по тегу #халявное.

[котья шапка №1] Пост с котами в шапках собрал столько реакций, что я просто не могла слиться :D В качестве модели и моего фамильяра выступил Крапа. Я решила начать не с того варианта, который был на референсах и связала аналог чепчика. Вердикт Шапень скользит по гладкой шерсти (а может и щеки пухлые мешают ❤️). Если провернуть такое с лысым котом — держаться будет, но это не отменяет попытки снять ее лапами. Стартап по кошачьим шапкам пока отменяется 😏 В процессе примерки ни один коть не пострадал 😂

❕ Вчера на тильде вышло первое реально-полезное обновление {подумала я} — группировка объектов в Zero Block. Я не делаю репосты новинок, не пытаюсь их обсуждать, но не могу пройти мимо. Потому что эта херня реализована настолько ужасно, что мне не понятно как вообще проводились тесты. Что мы получили: 🔵Невозможно выбрать тип позиционирования группе: window или grid. Сначала позиционируем элементы, потом группируем и получаем не то, что видим в редакторе: элементы смещаются так, словно группа — это отдельный zero block. 🔵Группа не дружит с Autoscale. Zoom применяется и группе, и каждому элементу внутри группы {как это вообще можно было не проверить}. Мы попросту получаем двойное увеличение элементов в группе. 🔵Группе нельзя задать класс. Работать с tn-group__700084637170686913507317610 в стилях мне совсем не хочется 😳 🔵Баги в Firefox. В сочетании Autoscale и Firefox случаются неожиданные смещения элементов {словно в firefox новинка не проверялась вовсе 🌈} ☺️ А теперь о положительном. Можно выбрать тег для группы элементов, что не только важно для SEO, но и для иных способов воспроизведения сайта {механизм тоже сделан косячно, но не будем об этом уже}. Ставьте самые странные смайлики под этот пост и я напишу подробно про каждый тег. Потому что не все теги имеют смысл внутри Zero Block. отдельная боль — комментаторы, которые хотят auto layout на тильде. но если уж с группой вышло так уделаться, то страшно представить что будет с auto layout.

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

У меня есть убеждение, что для такого нужно быть не просто дизайнером, которым довольны клиенты. Не просто рисовать штуки, которые кому-то нравятcя. Нужно получить больше опыта, чем я имею сейчас. Нужно столкнуться с разными типами клиентов, сделать разные по стилю и тематике проекты, научиться видеть заебистые детали {которые сейчас я могу легко упустить из виду 😮}. в общем, еще 84 проекта по моему личному счетчику и я буду считать себя достаточно способным дизайнером для передачи опыта. но желательно еще курсы какие-то пройти, конечно 😂

🤒 Анонса стрима не было не потому что я забыла {сделать все заранее опять}, просто першение в горле перешло в вирусную ангину. Ночью мне казалось, что жизнь закончится прямо сейчас: ломило кости и суставы, зашкаливала температура и я лежала под мокрым холодным полотенцем чтобы не вскипеть. Муж испугался и вызвал скорую. По приезду скорой выяснилось, что закончилось действие полиса страхования (на руках только ДМС 🥹). Пока скорая стояла в дверях, а муж искал мой потрёпанный бумажный полис убежал Сэр Ёжа на чердак в подъезде (и пока не спустился, а ключ от люка не знамо где). 😳 Поэтому переносим стрим с версткой этого проекта на следующую неделю. Напоминаю, что вы можете заполнить небольшой опрос и выиграть бесплатную консультацию по верстке. А также не стесняйтесь предлагать мне интересующие вас темы для стримов {что-то обсудить я всегда рада}. особенный шик в том, что я не могу есть и слышу процентов на 40 хуже {дораму теперь слушают и соседи}

🤩 Я уже спойлерила на стримах, что планирую запустить консультации по верстке сайтов на тильде. Чтобы консультации получились действительно полезными — я сделала небольшой опрос на 5 минут, заполнив который вы не просто поможете мне составить программу, но и примете участие в розыгрыше консультации {которую сможете взять когда она вам понадобится}. ✨пройти опрос У меня всегда были и будут проблемы с определением своих сильных сторон, а также того чем я могу быть полезна другим людям (о продаже своих навыков даже не спрашивайте). Поэтому я буду рада вашей помощи, это очень поможет мне сделать крутую страницу с информацией и удобной оплатой {чтобы все было по закону, без переводов на карту}. А также осознать, чему именно вы хотели бы поучиться. Уточняю, что полноценная оптимизация не входит в консультацию (ну не получится уместить все за 90 минут консультации 🥺). розыгрыш проведем через неделю 7 февраля 🥇

Сейчас я делаю проект под руководством Маши и он буквально открывает двери к осознанию многих вещей 😳 {я множко в шоке} 1️⃣ Я разучилась расслабляться в процессе дизайна {а может и не умела никогда}. Постоянно в рамках из-за строгих ТЗ, ибо в 2023 я часто работала с фирмами и отступить в сторону было нельзя совсем. Теперь мне хочется ломать, делать непривычные и непонятные вещи без привязки к тому, привлечет ли это потенциальных клиентов или нет. 2️⃣ Я не умею добавлять к макетам неосмысленные свистоперделки 🐱 Сначала мы учились убирать всё лишнее: только по фактам, только хардкор. Когда теперь нужно добавить непонятные циферки, кавычечки и прочую символьную штуку — я впадаю в ступор. Хочется рассматривать полиграфию, впитывать и делать странные вещи. Которые сначала вообще не понимаешь, а потом как понимаешь и открывается метавселенная 🌸 3️⃣ Я хочу больше работать с webflow или taptop потому что это интересно. Точка 🐱

Иногда, pinterest подкидывает мне очень интересные вещи среди классных сайтов и мемасов с котами. Хочется задать один вопрос:"Вяжем?" 😍 баб Катя уже представляет пять котов в цветных шапульках. уже и зарисовки сделала какими способами можно связать кошачий чепец. о приучении к шапке пока не думаем 👊

Спасибо всем кто смог забежать на стрим и поддержать меня ❤️ В посте хочу кратко подвести итоги и выделить свои личные плюсы платформы TapTop. 🟢можно собирать любые блоки: добавлять иконку в кнопку, делать нужную вложенность. при этом получая чистый, аккуратный и современный код (хотя некоторые вопросы у меня таки имеются) 🟢большое количество стандартных блоков с широкой кастомизацией разделенных на группы 🟢возможность задавать свои классы всем элементам и делать НОРМАЛЬНЫЙ адаптив на всех устройствах 🟢можно загрузить большое изображение и установить, какие размеры вы реально хотите загружать 🟢можно сделать свою библиотеку блоков и использовать в проектах 🟢благодаря нормальной возможности задать класс {а не эта ссань с одним классом на тильде} удобно кастомизировать элементы: переписывать сетку, подключать GSAP и ваять анимации Лучше ли тильды? В чем-то превосходит, но пока нет анимаций {я напишу их сама, если понадобится} и кучи интеграций. Ждём и болеем за конструктор ❤️ 💙💙💙💙💙💙 🏃‍♂️А теперь давайте про движ. Мне хочется поддержать команду платформы и показать вам, что такого вида конструкторы — это не страшная непонятная вещь. Поэтому хочу сделать небольшую группу по верстке проекта под моим кураторством на TapTop. Возможно, у вас есть черновики проектов не принятые клиентом или минималистичные красивые концепты с курсов и вы хотели бы их сверстать. С меня заранее записанные пояснения, помощь с вашими проектами, фидбек и стикеры в чат. Не бешплатно, а за небольшую денежку {которая поддержит меня и котов}. Проголосовать или накидать плюсиков можно прямо под этим сообщением.

Хватаю водичку и начинаем стрим 🏃‍♀️ https://youtube.com/live/ExpQXE2Q7XM?feature=share https://youtube.com/live/ExpQXE2Q7XM?feature=share

Я сегодня сильно-грустняш ибо врач не стал снижать дозировку препарата и нужно выжить ещё месяц в режиме варёной сосиски 😰 Плюс всего этого в том, что я наконец отдыхаю. Минус в отказе от пары проектов на разработку потому что слово "скорость" сейчас не про меня 😔. Напоминаю, что сегодня в 16:00 по МСК будем смотреть новый конструктор TapTop {которым бы очень хотелось заменить тильду 🤣}.

🤔 Маленькие факты о специфичности и !important ⚪️На реальных проектах в первую очередь используется каскадность {про это я вам пока не рассказывала} и специфичность, и только в последнюю очередь !important ⚪️На собеседованиях я часто просила объяснить как работает специфичность и очень редко получала нормальный ответ. Если вы пусть и с третьего раза поняли что это, то вы круче многих опытных дядь-разрабов ⚪️Если я увижу в написанном проекте множество !important, то автоматически отсею такого разработчика в корзину. Это так же непрофессионально, как в 2024 использовать jQuery 🤮 ⚪️Не многие знают, что можно писать ! important так и это тоже не будет ошибкой, но не понятно зачем ⚪️Я включаю режим агрессивной сволочи если человек пытается доказать мне, что на тильде !important нужен везде {товарищ, пытавшийся мне доказать это поставь бургер, если ты все еще тут} ⚪️Можно до бесконечности писать класс элемента в стилях .class.class.class и специфичность будет увеличиваться (0.3.0) Помните, что мне приятно когда вы ставите ❤️и прочих дикобразов под посты. У меня подобралась исключительно молчаливая аудитория (либо я мало пишу жестких постов 😂. писать о своей депрессии мне уже самой тошно), но я напоминаю что рада вашим комментариям и вопросам под постами.

😻 Мне хотелось начать уверстку в этом году с чего-то теоретически-полезного. И я решила начать cо специфичности c привязкой к тильде. Заранее прошу простить меня за длинный лонгрид. Несмотря на мои попытки изложить все просто — пост будет тяжелым для тех, кто с трудом пишет стили или вообще боится это делать. Помним о том, что знать базовые HTML и CSS, если вы пресекли границу дизайна очень желательно. В выпуске уверстки о том, как железно сделать блок на 100% высоты экрана можно было увидеть странную конструкцию (которая состоит из кучи селекторов):

.t-rec#rec537025463 .t396 [data-artboard-recid="537025463"]

Зачем написано столько разных классов и атрибутов, если можно просто обратиться к элементу по классу .t396__filter или добавить к стилям модификатор !important❓ Дело в том, что в некоторых случаях тильда добавляет стили элементу внутрь HTML {атрибут style}, либо самостоятельно пишет стили сразу с !important. Перекрыть все варварским модификатором повторно уже не получается.

Катя, почему эти ваши импотанты не работают?

❕Поэтому нужно помнить о специфичности или весе селекторов, который помогает браузеру понять какие именно стили из кучи написанных нужно применить к элементу. Вес записывается в виде трех чисел 0.0.0, где каждому типу селекторов отведено свое место: ID занимает первую колонку, класс вторую колонку, а элементы третью колонку. Если в стилях элемент ищется по классу, то число во второй колонке увеличивается на единицу (0.1.0). Если классов в записи будет несколько, то число во второй колонке будет равняться количеству классов (0,n,0). Понимаю, что выглядит очень не понятно 😒. Как вообще считать все это, когда хочется злиться на разработчиков тильды за очередной косяк? И я скажу вам, что запоминать схему подсчета вовсе не обязательно. Достаточно помнить, что !important это не единственная таблетка для тильды. Предлагаю вам перейти на один из калькуляторов и протестировать примеры, которые я привожу ниже. 1️⃣ на русском 2️⃣ красивый с пояснениями На тильде мы можем найти элемент по ID (#rec633628894), классу (.uc-block), элементу (div, a), и data-атрибуту (data-artboard-recid="633628894”). Попробуем найти текст в Zero Block с классом .text--underline {как понятно, он будет подчеркнутым} разными способами и измерим специфичность.

#rec633628894 .text--underline .tn-atom

1 — ID блока; 2 — класс текста в Zero блоке; 3 — класс внутреннего элемента у всех элементов в Zero блоке. Специфичность 1.2.0 (потому что класса два)

.uc-block .text--underline>div.tn-atom

1 — класс блока; 2 — класс элемента в Zero блоке; 3 — первый div в блоке с классом .tn-atom. Специфичность 0.3.1 (потому что три класса и один div) Браузер выберет первую группу селекторов ибо вес ID выше, чем вес классов. Если написанные стили не работают (и вы уверены, что написали их правильно), то специфичность поможет изменить вид элемента на желаемый. Упражнение для бесстрашных: берете любой элемент в стандартном блоке и пытаетесь его найти, как я сделала это выше.

Мой канал постепенно мутирует в канал с оповещениями о стримах, но я должна сказать что в эту пятницу будем рассматривать новый конструктор taptop ✨ На самом деле я не удержалась и уже изучила площадку, и даже словила пару багов. Поэтому на стриме посмотрим конструктор в деталях {кроме моего любимого блока с кодом}. 26.01 — 16:00 По Мск надпись "русский вебфлоу" написана таким шрифтом не просто так. шрифт со смыслом. дам подсказку BIZ...