From Fedya With 💚

❕ Сегодня на стриме я начну делать не совсем обычную сетку, вдохновленную одним из сайтов с прошлого эфира. Конечно, я её переделала ибо вообще не просекла принцип расположения элементов (представьте, что вам нужно объяснить разработчику абсолютно не повторяемый, не логичный принцип повторения элементов). Я такое никогда не делала, поэтому стрим будет чисто for fun 👊 16:00 по МСК (встреча на утуб): включить оповещение еще маленькая новость в футере. стримы теперь можно просто смотреть на канале, а не искать по тегу #стрим (хотя очень старые стримы останутся только по закрытой ссылке).

😳 Сейчас будет небольшая рефлексия и небольшой опрос. Уверстка с небольшими решениями приближается к 20-му выпуску. За это время один не хороший человек успел украсть наш общий аккордеон для нулевого блока и выставить за свой. А я успела понять, что времени на создание своей группы с подпиской у меня просто нет* 😭 Предлагаю вам выбрать удобный вариант: 🦄 — если стоит оставить всё как есть 👾 — если стоит сделать отдельный канал для уверстки и анонсов стримов * а теперь будет рефлексия. в скрытом. Когда меня кто-то спрашивает о собственном сервисе с модификациями — я замыкаюсь, потому что любой ответ будет звучать как "я не хочу денег" в ушах слушателя. Кратко: ❌я могу впасть в ступор и просто не понимать, про какой эффект мне написать в очередной раз {когда смотришь на сайты и видишь ни*уя вместо потенциальных верстальных инфоповодов} ❌я могу ненавидеть тильду в некоторые дни и предпочту попрактиковаться в чем-то другом ❌я не люблю, когда меня представляют так:"Это Катя, она круто переделывает тильду" {потому что разработчик внутри орёт и трясется от слова конструктор} ❌я искренне считаю, что сервисов стало хоть котов корми {ни одним из которых я не пользуюсь} ❌я создаю только то, что мне искренне нравится и никогда не буду делать популярные эффекты просто для привлечения внимания Бонусом меня покинул стажер Женя, который безуспешно прошел 72! собеседования и устроился Junior Python разработчиком, решив положить болтяру на завышенные требования вебдева. Без его помощи я не успеваю даже просто доделать старые решения, которые есть в поисковике и было бы правильно их закончить (спасибо Tim, я не знала что меня можно нагуглить 😄). Можно сказать, что моя миссия — показывать как всё можно переделать, а ваша вдохновляться и, быть может, приходить ко мне за переделкой блоков. #личное

‼️ Ранее мы уже рассматривали кастомизацию привычного text-decoration (который многие разработчики используют только в стандартном виде 😕). Но сегодня я хочу рассмотреть text-emphasis. Emphasis в типографике — акцентное выделение другим шрифтом или жирностью слова/фразы в тексте. И, фактически, text-emphasis действительно выделяет текст, но совсем другим образом. Словно вы поставили над (или под) каждой буквой символ. Плюс свойства в том, что можно не просто поставить свой символ, но и сделать небольшой эффект при наведении. Код для использования я оставляю ниже. А сейчас давайте разберемся, что вообще можно делать:

/* Обращаться нужно именно к текстовому элементу */
.text--emphasis .tn-atom {
  /*В кавычки свой символ*/
  text-emphasis: "☽;";
  /*Цвет символа*/
  text-emphasis-color: transparent;
  /*Расположение under или over*/
  text-emphasis-position: over;
}

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

/* Обращаюсь к тексту в нулевом блоке с заданным классом */
.text--emphasis .tn-atom {
  text-emphasis: "☽;";
  text-emphasis-color: transparent;
  text-emphasis-position: over;
  transition: all 0.3s linear;
}
    
.text--emphasis:hover .tn-atom span {
  /*Делаем символы зелеными*/
  text-emphasis-color: green;
}

🧷 Целую кучу символов можно найти на этом сайте ✨ Если нужно выделить только одно слово из абзаца — выделите текст и выберите ту же жирность, которую используете для текста, а в коде добавьте к .tn-atom через пробел span.

Буду рада вашим реакциям под постом ❣️ Сказать спасибо: кинуть на общак 😻. Пробустить уровень канала {что откроет мне возможность пилить сторис}

* про свойство знают только 20% разработчиков по результатам State of CSS 2023 #уверстка №17 🥳

Я все узнала о SEO на Тильде. Из личного горького опыта Держите небольшую памятку👇 НАЧНЕМ С ОЧЕВИДНОГО: — Пока делаете страницу в общих настройках закройте весь сайт от индексации — Не забудьте перед релизом обратно включить индексацию — На страницах проставлен H1, у страниц есть title и description. — Не стесняйтесь в них добавлять слова из ключевых запросов, которые вы можете узнать из Вордстата — Не стестяйтесь ставить ключевые слова оттуда же — Заголовки страниц не должны повторяться. H1 тоже только 1 на странице — Ставьте фавикон — Включите защищенное подключение и редирект с http на https. — Товары и Статьи суперски индексируются — Одностраничные сайты не продвигаются по SEO ❌ просто забудьте, для этого нужна махина с кучей ненужных страниц с тупыми текстами, написанными чисто по ключевым запросам. Это правда. ИЗ НЕОЧЕВИДНОГО: — В общих настройках SEO обязательно подключите google search console и яндекс вебмастер. (Там еще внутри сервисов надо поковыряться) — Пользуйтесь микроразметкой — Если на странице много переходов в тг или вотсап (для записи например) в seo настройках страницы поставьте галочку у "запретить поисковикам переходить по ссылкам на этой странице", таким образом ваша страница не должна забаниться из большого кол-ва внешних ссылок — Если есть настройка у кнопки с внешней ссылок (не на ваш сайт) ставьте rel nofollow — В идеале ставьте описания alt для изображений — Проверьте битые ссылки в общих настройках сео — Архивируйте старые страницы, снимайте их с публикаций, а лучше удаляйте. — Удаляйте удаленные страницы отдельно из поиска гугл и яндекс. Вбиваете "удалить страницу из поиска" — это вообще аут — нужно в вебмастере склеить зеркала сайта — Пользуйтесь webpage bot, чтобы обновить превью сайта при шеринге, это позволит обновить превью вообще во всех чатах и куда там еще вашу ссылку закинули — Бонусом регайте бизнес в яндекс.справочник и в google business Кажется ничего не забыла, а если забыла — значит это очевидно. И помните, SEO — это очень долго! Отдельно еще надо узнать про закупку ссылок, но как-нибудь потом. Репостни другу, ставь 🔥

Сегодня на стриме я рассмотрела небольшую кучку сайтов и нашла пару идей для новой уверстки. Его запись остаётся в профиле по тегу #стрим, а также на моём канале. Мне будет приятно, если вы оставите фидбек к такому разговорному формату. Или, быть может, стоит просто делать разбор сайтов без перехода на другие темы ❔ Оставляю вам ссылки на просмотренное, как обещала (и иду качать престиж в фазме 😉): raphaelmaman.com — интересное открытие проектов во вторую колонку (муж описал как сложное и непонятное) www.rhysframpton.com — сетка, которую можно скомуниздить для оформления потоков (что мы сделаем) bee-home — сайт о домиках для пчелок, на котором можно углядеть панель настроек сайта, стрелочки в кнопках и поток с новостями в попап workwork.kr — король пунктирных линий, шикарный Space Mono https://www.saladseller.com — корейская доставка салатов, неожиданно приятный азиатский сайт на стрим залетал семён в лоточке.

Напоминаю о сегодняшнем стриме, на котором буду искать референсы для будущих переделок блоков и просто вдохновляться. Задерживаю начало на 20 минуток (случился неожиданный созвон с родными). https://youtube.com/live/Fj0g2yDAu9A?feature=share

☺️ Сегодня утром я прошла первое собеседование в этом году (ибо прошли два месяца, которые я давала себе на "отдых"). Решила не ставить себе цель найти работу срочно (потому что уже нашла подработку) и прислушиваюсь ко всем подозрительным звоночкам. В этот раз таким звоночком оказался вопрос о переработках {человек не видит ничего странного в неоплачиваемых переработках, потому что это норма в нашей сфере 😨}. И вообще получила от мужа наставление отказываться от всего странного, потому что он перенимает моё состояние и очень переживает. ⬆️⬆️⬆️ Я не хотела делиться этим фактом потому что каждый раз кто-то напоминает мне о том, как прекрасен фриланс. Когда ты просто получаешь заказы — да. Когда нужно делать холодные рассылки, ловить заказы на бирже, спорить с клиентами о том, что верстка за 5.000 не норм — нет (я вообще еще не могу оправиться от фразы Маши "верстка на webflow за $3000"). #личное

👍 Ребятки, несмотря на выходной день, в эту пятницу я буду в прямом эфире просматривать свои сохраненные сайты в поисках новых идей для верстки. Я не отмечаю гендерные праздники (потому что свой пол я не выбирала при рождении, предпочла бы родиться мужчиной) и приглашаю таких же не отмечающих человеков. Буду комментировать дизайн, отмечать детали, верстать в прямом эфире и разговаривать. В первую очередь это будет разговорный стрим. Готова отвечать на вопросы, составила себе план и хочу рассказать об обучении, своём месте в разработке, результатах рассылки старым клиентам, странной истории с заказами, что планирую делать для увеличения количества заказов. 8 марта в 16:00

📎Собрала подборку полезных постов, которые я делала {без сложных пояснений косяков тильды}. В подборке ссылки на полезные сервисы и лучшие посты уверстки. 🟡плавный скрол по якорным ссылкам без лишнего блока на тильде 🟡аккуратное подчеркивание ссылок без псевдоэлемента 🟡топовый аккордеон для нулевого блока (которым я пользуюсь сама и планирую расширить возможности оформления контента внутри) 🟡сложная, но полезная статья про специфичность 🟡сервисы для вдохновения часть 1 🟡сервисы для вдохновения часть 2 🟡поиск картинок на всех фотостоках разом 🟡изучение верстки в формате игры (жабьи игры 🐸) #ссылки

После нервного срыва я ушла в цифровой детокс и не проверяла ничего кроме рабочих чатов. Единственное, что я могла для себя сделать — это освободить кусочек вечера и много вязать. Потому что во время вязания меня больше беспокоят ровные петли, чем происходящее вокруг (можно официально сказать, что это медитация, но немного другая). Ранее я показывала один свитеров в этом посте, а еще не так давно вязала шапку для Крапы и вы сделали репост этого поста 64! раза {зачем эти ваши уверстки, нужно просто вязать котам одежду 🤣}. Связаны носки из пряжи с крапивой (70% шерсти и 30% крапивы), бини из твида для бывшего коллеги (такую же я ношу уже год), розовая шапка из ангоры. В прошлом году такую розовую шапку забрала подписчица из Казани. Эта тоже ищет дом и если вам нравится можно написать мне в личку @kate_stoltz. Иначе шапка отправится в коробку ждать своего счастливого часа. А вы вяжете что-нибудь или боитесь брать спицы в руки? ❔ в комментарии кину чисто домашнюю себя в свитере с первой фотографии, который еще в работе #личное

Сегодняшнего стрима не будет ибо я закончила вчерашний стрим и ушла в нервный срыв. Я всегда была зависима от чужого мнения. В спокойные моменты я просто пропускала мимо ушей плохие слова. Но сейчас результатом стало то, что действие некоторых людей нехило ранило. Я не хожу к психологу уже месяц (только за рецептом) потому что она ушла в декретный отпуск и больше нельзя сэкономить, записавшись на обычный приём в больнице. Я экономлю деньги, чтобы оплатить в скором времени новый курс лечения родному человеку и трясусь, что ремиссия не случится как это обещает врач. Мне часто снится, что его* не стало из-за того, что я не справилась и утро начинается особенно бодряще. Моей небольшой отдушиной был этот блог, который я решила исправить из блога вечно-сопливого человека, который лечит депрессию во что-то другое. Но итогом стали сниженные вдвое просмотры, охват, реакции и почти полное отключение оповещений и это тоже ранило. Я все больше начала бояться рассказывать что-то неправильное по мнению многих (где нескончаемый рост, где работа и полное излечение?). Всё накопилось и все упражнения, которые мы разбирали с психологом не помогли, я просто рыдала без остановки. *я не упоминаю в блоге конкретную роль родных людей, т.к. это может быть для них неприятно.

Начинаю стрим через пару минут ) https://youtube.com/live/8EmePdeQZdI?feature=share https://youtube.com/live/8EmePdeQZdI?feature=share

🤗 Пушистая булочка Сергей напоминает вам о сегодняшнем стриме в 16:00 по Московскому времени. https://www.youtube.com/live/8EmePdeQZdI?si=0RfFKQzpyIDhHd3f А ещё Ёжа сбросил 500 грамм на диетическом корме и теперь весит 9.2кг.

Свеженькие анонсы стримов этой недели 🐱 Пятница 16:00: заключительный стрим с версткой сложного проекта. Я уже очень хочу завершить этот сайт и пойти рисовать что-то новое, но такое же странное. Львиную часть работ я уже сделаю до стрима. 〰️〰️〰️〰️〰️〰️〰️ Суббота 14:00: разговорный стрим с просмотром сайтов. После прошлого стрима мне сказали, что пришли смотреть на верстку, а не слушать болтовню 😔 — поэтому болтливый стрим перенесла на субботу. Буду просматривать сохраненные сайты и сходу какие-то штуки верстать. Приходите, если просто хотите пообщаться и послушать про бренный фриланс (прошлая неделя принесла мне клиента, который в 2017-ом угрожал меня зарыть в лесополосе). записи болтливого стрима не будет #стрим

Заметила вчера, что текст в нулевом блоке таки стал параграфом и это отлично (подробнее было в посте, который вы не оценили 😭). Но зачем-то разработчики добавили КО ВСЕМУ ТЕКСТУ В ZERO новое свойство text-wrap: balance и я опять словила facepalm 🤦‍♂️. Что делает это свойство? Оно сбалансированно переносит слова на новую строку. Чтобы все строки текста были примерно одинаковой длины без резких переносов {еще не перенос предлогов, но помолимся и в 2030 сделают}. У этого свойства есть пара особенностей: ⚪️чрезмерное использование влияет на скорость рендеринга страницы (потому что браузеру нужно все просчитать: количество строк, количество слов в строке); ⚪️свойство работает только для текста длиной 6 строк (10 в firefox) ⚪️рекомендуется использовать его для заголовков и крупных цитат. большие параграфы браузер пока перестроить не в состоянии. было бы оптимальнее, если бы такую опцию добавили для заголовков. В общем, когда нашел новое свойство, не прочитал документацию и добавил везде. Теперь вы знаете больше, чем разрабы тильды :D Оставляю вам статью с developer.chrome, на которой есть визуальные примеры и доказательство того, что я не звездю 🤔 #дайджест

⌨️ Правильная верстка обратных втяжек или выпуск уверстки №16. Сейчас я учусь на курсе Дизайн взаимодействия и уже на первой неделе задумалась, что все знают о свойстве text-indent, но весьма костыльно* при этом делают обратную втяжку/вылет с помощью отдельных блоков текста: первой строки и абзаца. Итак, нам понадобится абзац текста, которому вы уже задали класс и немножечко полезных строчек кода.

/*Вместо page__text напишите свой класс*/
.page__text .tn-atom {
    position: relative;
}
.page__text .tn-atom::before {
    content: '';
    float: left;
    /*Если задать размеры в процентах будет красиво сжиматься*/
    width: 170px;
    height: 250px;
    /*Отрезаем от фигуры 30px сверху*/
    /*По часовой стрелке: сверху, справа, снизу, слева*/
    shape-outside: inset(30px 0 0 0);
}

Что мы делаем? Добавляем для элемента псеводоэлемент ::before с нужными размерами, который по сути отодвигает текст. Чтобы не влиять на верхнюю строчку используем свойство shape-outside. В процессе создания эффекта нужно учитывать смещение текста и изменение его размеров, чтобы не поплыли все размеры и отступы. ✨ попробуйте заменить значение float с left на right и выровнять текст по правому краю. Получится тоже классная крутотень. ✨если нужно использовать для стандартного блока — уберите в коде .tn-atom и обратитесь к элементу просто по классу Пример использования был на экспериментальной странице с бокалами.

Не забывайте ставить невообразимые реакции под пост, а также поддерживать меня денюжкой: кинуть на общак 😻.

*костыль — гадостливое, кривое решение проблемы #уверстка

Я знаю, что вы любите До/После переделки блоков на тильде 😎 Нужно было сделать страницу для публикации новостей и стилизовать её под сайт. Что я сделала: 1. Переделала сетку потоков под ту, которая используется на всём сайте. 2. Сделала нормальный адаптив для сетки потоков. 3. Переделала убогие кнопки разделов в менее активные. 4. Самую малость поправила popup с новостью. Но больше всего на этом сайте горжусь эффектом перехода по страницам, имитирующим переход без перезагрузки {когда очень хочется роутинг на тильде} 😍 Кстати, у ребят на Ozon очень милые обложки и появилось средство для мытья фруктов и овощей (поставь лайк, если терпеть не можешь отскребать воск с яблок 😭). #работа

Хочу поделиться своими своими мыслями о неуверенности или ощущении себя не в своей тарелке. В этом году я решила, что больше не буду сидеть на попе смирно. Не буду стесняться и бояться делать свои мастер-классы, платные эфиры и прочие вещи. Но это СОВЕРШЕННО не отменяет ощущение, что это все не про меня и не для меня. Не знаю, испытывали ли вы подобные чувства? Вызовет ли это у вас отторжение? (потому что многих раздражает, когда более опытные по их мнению люди смеют сомневаться в себе). Пару лет назад меня называли Екатерина Сергеевна, я дважды в неделю вела лекции и хотела защитить кандидатскую диссертацию. В моей голове это выстроилось как что-то серьезное. Я мечтала еще в школе, что буду не просто работать в сфере IT, но и стану преподавателем в вузе. Мечты рухнули в первый же год преподавания 😶 Я считаю себя недостаточно профессиональной, не воспринимаю обучение как часть бизнеса (я же ИП оформляла как разработчик и дизайнер, в конце концов). И очень не хочу создавать ощущение человека, который просто перекочевал из своей профессии в сферу онлайн-образования {никогда не пойду к таким людям учиться}. В конце напрашиваются приемы отработки собственных возражений. Но их не будет, потому что либо делаешь, либо возвращаешься верстать компоненты в офис. p.s. на фотке есть спойлер новой вязальной работы.

Небольшой спойлер моей плотной работы все прошлые недели ✨ Я решила, что в этом году не буду раньше времени рассказывать о вещах, над которыми работаю (пока точно не смогу убедиться, что всё получается). Но я вышла на финишную прямую с идеей, за которую вы проголосовали: написала программу уроков, сделала обложки для будущих постов, спроектировала дизайн сайта (который уже наполовину написан), почти закончила все нужные материалы и скинула паре человек на оценку. Которые развернули пару уроков и попросили изложить всё подробнее. моё лицо, когда очевидные для меня вещи не понимают 🙄 План запустить всё на этой неделе улетел из планера в корзину. Но я делюсь с вами небольшим спойлером {обещаю, это будет очень круто}. Помните, что ваши сердечки и редкие комментарии очень радуют меня и подталкивают стараться еще сильнее (активность только на решениях и постах с котами меня расстраивает 😔).

😮 В этом посте мы все дружно охренели от новинки тильды, которая не работает. Но больше всего меня смутил набор тегов, которые разработчики добавили для группы*. Понимаю, что это будет лонгрид. Но я хочу не только рассказать о разных тегах, но и донести что тильда буквально инвалид в мире сайтов с правильной семантикой. 💙💙💙💙💙💙💙💙 HTML-теги нужны не только для лучшего понимания поисковиком контента на странице (поисковик может вывести H5 в результатах запроса, а не H1). Но и для скринридеров — программ, превращающих контент в речь или шрифт Брайля. Тильда полностью написана на <div>, который является обычной оболочкой {сравним с Ctrl + G в Figma}. Весь текст тоже лежит в <div>, а не в предназначенном для этого теге <p> (параграф). Мы буквально получаем полностью обезличенный для поисковиков и скринридеров сайт. Давайте пробежимся по каждому тегу: 🔵div — это обычная группа элементов, как в Figma 🔵section — это осмысленный блок с контентом, в котором обязательно присутствует заголовок h1-h6. К примеру: блок о комании, блок с преимуществами, блок с отзывами. Этот тег важен для SEO, но его не рекомендуют помещать в тег <div>, что и происходит на тильде. 🔵header — так называемая шапка, которая может использоваться для меню (с логотипом и самой навигацией), баннера после меню, для заголовка новости и т.д. 🔵footer — подвал для размещения ссылок, информации об авторе и авторском праве. Как и header может быть не только внизу страницы, но и в отдельных блоках. 🔵article — повторяемая информация, которая должна содержать в себе заголовок h2-h6. Пример: статья, карточка товара. 🔵aside — привычно используется для создания боковой навигации {sidebar}. Не нужно использовать в Zero Block. 🔵main — тег с основным контентом, в который помещается все кроме меню (header), боковой навигации (aside) и подвала (footer). Добавлять его в Zero Block не просто неправильно, это какой-то уровень звенящей пошлости 🥴. Очень важен для поисковиков. 🔵nav — навигация по сайту или внешним ресурсам. Внутри всегда лежат ссылки ❕. Важен для SEO.

Катя, я ничего, блять, не понял(а).

Понимаю вас, просто не используем section, main и aside внутри Zero Block. Несмотря на вывод лучше таки прочитать описание каждого тега, это поможет вам в дальнейшем лучше понимать другие конструкторы. * как все работает: группируем элементы в Zero, в панели справа выбираем Group - Object(Beta) и ниже Tag.