Вёрстка сайта с 0 до результата | HTML, SCSS, БЭМ - Подробное ПОШАГОВОЕ объяснение | Часть 2

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: t.me/friendlyFrontendChat ℹ Основной канал: t.me/friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@Rostyagai-dev]

На этом канале просто бесценные уроки! Они спокойно могут заменить большинство платных курсов. Спасибо за твой труд!

[@pablo_barnes7329]

Нервов убил кучу, потратил на весь мастер класс наверное около 20 часов, каждую строчку кода пытался понять... И это того стоило, объяснения в целом понятны хоть у меня и возникали ошибки и сам же их решал. Получил много опыта с данным мастер-классом. Разобрался как работать с БЭМ методологией и препроцессором SCSS. Александр, вы лучший преподаватель которых я только видел, огромное спасибо. Работать в ВК и одновременно заниматься менторством, пилить видосы, ввести телеграмм канал и отвечать каждому у кого возникли вопросы - это сильно. Подписочку на бусти уже оформил, считаю такие труды должны поощряться. Перехожу на курсы JS:)

[@AleksanderLamkov]

Спасибо тебе за обратную связь и поддержку! Очень рад, что мои материалы принесли столько пользы :)

[@xvii5753]

2:06:00 то есть ты мало того, что работаешь в вк, снимаешь ролики, занимаешься менторством, отвечаешь на комментарии и ребятам в чате, ты еще и настолько внимательно и досконально просматриваешь свои двухчасовые БЕСПЛАТНЫЕ мастерклассы?)) Ты мега крут

[@MathInfo-ye1gf]

я сам поражен, как он старается!!

[@AlexAlex-bp9il]

Очень круто ! Правда эти четыре часа у меня на неделю растянулись +)) Местами люто тупил не понимая ПОЧЕМУ ТАК ?)) Спасибо !

[@RumataEstoria]

Александр, большое спасибо за труд, для моего обучения этот мастер-класс оказался очень полезен: помог понять БЭМ методологию и файловую структуру. Я очень вам признателен, ещё раз большое спасибо!

[@jekakavaltchuk2714]

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

[@ЭлайтСолт]

Спасибо за урок по БЭМ! Очень интересно было понять именно файловую структуру.

[@MathInfo-ye1gf]

Вот только закончил мастер класс, спасибо тебе Ламков за твою работу, на него ушло примерно 10 дней, каждый день после работы по 2 часа, бывало что на какой то кусок кода уходило 20 -30 минут, что бы понять как устроена механика его работы, столько тем приходилось освежать из плейлистов html и css. Самые лучшие пожелания тебе!!!!!!

[@ilya10rus]

Фууф, добил) Блин, круто, но никогда так не верстал) Спасибо😊

[@kuparty]

Александр, большое спасибо за мастер-класс. Это было тяжеловато, но я осилил.

[@ridaruuu]

Спасибо большое за ваш труд! Прошла 2 ваших мастер-класса по вёрстке, было очень много полезной информации, буду продолжать смотреть ваши уроки по js

[@АндрійЛємак]

не понимаю почему так мало лайков, материал + подача просто супер

[@ivenzo]

Спасибо, было очень полезно, кайфанул от процесса!

[@biscvie]

Спасибо за видео и спасибо за чат, очень много полезного там)

[@egorsparr0w619]

Делать аккордеон было очень познавательно! Большое спасибо! До этого я переписывал кривой Jquery.

[@iuliiapankevych547]

Спасибо за подробный разбор.

[@alanmerkif8621]

29:19 Что бы не убирать 0 и не играться с :nth-child, можно воспользоваться content: counter(custom-counter, decimal-leading-zero);

[@ВячеславСтроков-х4з]

Многа! Спасибо)

[@ВаняФлюндро]

56:30 Как я не пытался, но translate у меня работает только если прописывать его через transform: translate() Но в целом это самый лучший урок по верстке из тех что я видел. Уже месяц слежу за каналом, самый лучший и подробный контент по фронтенду из тех что я видел. В будущем как только появится денюжка обязательно оформлю ваш бусти

[@ovikarakel5923]

37:25 не могу понять здесь и далее для элементов этого же блока Вы пишете именно псевдокласс &:not(:last-child) почему так? зачем ограничивать ограничивать применение свойств для последнего элемента? что ещё более меня запутало, так это что всё равно написанные свойства для этого псевдокласса применяются для всех 6 элементов, а не для первых 5, если я правильно понимаю поведение написанного псевдокласса. что я упустил из виду? Спасибо за мастеркласс

[@AleksanderLamkov]

Селектор с not last child применяется к team-card__image. Это никак не связано с шестью элементами team__item. Такая комбинация псевдоклассов делает верстку более гибкой: при отсутствии следующих за изображением элементов, которые лежат на том же уровне вложенности, margin-right не применится. Можно бесконечно спорить на счет целесообразности такого подхода в конкретных случаях, но я пишу так скорее уже по привычке, т. к. в своей коммерческой практике частенько встречал ситуации, когда после передачи проекта заказчику, его бэкендер или контент-менеджер перекраивает разметку так, что margin у элемента без not last child начинает «двигать воздух», что нередко приводит к тому, что вся верстка вокруг элемента «едет».

[@ovikarakel5923]

@@AleksanderLamkov Понял, спасибо за ответ!)

[@ovikarakel5923]

@@AleksanderLamkov Кстати искал у Вас на канале ваши настройки и плагины VS Code, но не нашёл такого материала. Он есть? Или планируется? Было бы интересно посмотреть 😁

[@AleksanderLamkov]

Такого нет. Да я и не пользуюсь VSCode. Если и будет видеоматериал по настройке IDE, то по WebStorm’у. В планах есть, но пока другие приоритеты.

[@АнтонЛучкин-н4й]

Александр, спасибо Вам за такую замечательную работу. Не могли бы Вы объяснить когда нужно использовать margin-bottom через псевдоклас :not(:last-child)?

[@AleksanderLamkov]

Спасибо за обратную связь! Я использовал всегда, когда нужно было задать элементу внешний отступ вниз или вправо. Так верстка получается надежной: если в будущем элемент внезапно станет последним среди своих соседей, то лишний отступ не добавится. P. S. В следующем мастер-классе по верстке, который выйдет буквально через месяц, я применяю другой подход для задания промежутков между элементами. Вместо not last child и margin я использую display grid / flex и gap. Этот способ гораздо удобнее и чище. Лишь требование к наличию оберток в HTML добавляется, но при грамотной разметке это не проблема.

[@АнжеликаБатуркина]

Александр, спасибо огромное за такой потрясающий контент! Очень развернуто и наглядно🙏 Расскажите пожалуйста, что вы думаете о Figma и их нововведений? И стоит ли использовать Pixso?

[@AleksanderLamkov]

Привет! Спасибо за комментарий :) Мне дев-режим фигмы никогда не был важен, в нём в неидеальных макетах (а таких большинство) выяснять отступы сложнее из-за хаоса в слоях. Сейчас разве что тени и градиенты сложнее в дизайн-режиме искать, но есть куча плагинов, в чате t.me/friendlyFrontendChat мы это уже обсудили с ребятами. Заходи, скинем названия. Pixso не пробовал, но, судя по тому, что говорят другие - инструмент хороший, к тому же наверняка будет развиваться и будет ещё круче.

[@K0mariki]

Если проект по верстке не предполагает частых изменений, то в Pixso можно один раз загрузить файл из Figma и все. Однако, какой смысл когда есть плагин Inspect Styles в Figma

[@ИльяКочуров-ю6в]

Шикарно, спасибо за труды. Заметил у себя проблему с медиазапросами: аккурат на 767px частично пропадает стилизация блока studies__list. Не понимаю, где промашка :(

[@AleksanderLamkov]

Напиши в чат: t.me/friendlyFrontendChat Тебе помогут разобраться.

[@OleksiiBaranovskyi]

Подскажите как скрыть scroll bar )

[@AleksanderLamkov]

Привет! .hide-scrollbar { scrollbar-width: none; overflow: -moz-scrollbars-none; &::-webkit-scrollbar { width: 0 !important; } }

[@OleksiiBaranovskyi]

Спасибо большое @@AleksanderLamkov

[@ДенисБерезюк-ч3ш]

1:40:30 а не лучше сделать в footer теги header для навигации и footer для нижний части ?

[@AleksanderLamkov]

Вроде как нельзя вкладывать в footer тег header и footer. По caninclude проверяю.

[@ДенисБерезюк-ч3ш]

@@AleksanderLamkov Понял, спасибо, слушай сними видео 24 часа твоей жизни, работа в ВК и так далее, интересно

[@AleksanderLamkov]

Пока не совсем понимаю, что показывать в подобном видео. Для меня всё уже настолько обыденно… Вообще, я рассказывал о своем рабочем дне где-то в этом видео: kzbin.info/www/bejne/norMhGCKbsZjjaMsi=_qkr_Z1QejYVCy_Q Но я подумаю, как можно полноценное видео об этом сделать. Спасибо)

[@akylbekbaizakov]

На 16:57 пропадает стрелка выпадающего списка, после прописывания стилей для process__accordion-header, почему?

[@AleksanderLamkov]

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

[@akylbekbaizakov]

@@AleksanderLamkov Понял, спасибо! 👍

[@Shurakenchik]

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

[@AleksanderLamkov]

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

[@Shurakenchik]

@@AleksanderLamkov понял. Сам за последние полгода года на этапе вёрстки тестирую расширение контента. Ещё бывает что блок со слайдером, например новости, дизайнер отрисовал несколько элементов, а у заказчика новость пока только одна на сайте, и соответственно выглядит довольно стрёмно. А материал у тебя отличный. Вот если вдруг ещё над расширением контента покажешь мастер класс, было бы круто. Ну или уже отдельный ролик.

[@AleksanderLamkov]

Отдельный ролик по этой теме сделаю, интересная тема. Спасибо за идею! :)

[@bodystr]

Привет, спасибо за твой огромный труд, ты красавчик :) Скажи пожалуйста, почему ты пишешь каждый раз новый инклюд медиазапросов для адаптации в одном файле для одинакового брекпойнта? не лучше ли писать в каждом файле лишь по одному инклюду на каждый брекпоинт и внутри писать все классы которые мы хотим адаптировать, так же будут сокращения sass через & тоже работать. или есть какойто плюс от написания инклюдов для каждого класса отдельно? или просто привычка?

[@bodystr]

Я имею ввиду, что внутри каждого класса ты пишешь инклюд по новой --- почему не один инклюд на уровне бэм-блока или столько, сколько у нас бэм блоков, а в инклюде писать названия всех бэм элементов, если нужно?

[@AleksanderLamkov]

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

[@bodystr]

@@AleksanderLamkov Спасибо еще раз тебе, ты лучший, верю что канал будет больше и больше расти

[@egorrublev5529]

Александр , пятничное утро как всегда на высоте спасибо и продолжайте дальше

[@tortik_0162]

Александр, а после работы/стилизации с кнопками radio теперь ведь не будет динамического изменения атрибута cheked. Как при отправке формы сервер поймёт что мы выбрали?

[@AleksanderLamkov]

Почему не будет? Мы ведь фактически кликаем по label, который связан с input, тем самым его активируя. Возможно тебя смутило то, что при открытом DevTools на вкладке Elements не видно, как убирается и добавляется атрибут checked при взаимодействии с компонентом. Ну так это и не должно быть не в SPA приложении. Если бы у нас разметка рендерилась и затем обновлялась через JS, как в React, то изменение атрибута мы бы увидели. Но в обычном веб-приложении актуальное checked состояние хранится под капотом DOM-дерева. Можешь это проверить через консоль девтулз и обращение к checked свойству элемента, на который только что кликнул: document.querySelector('.checkbox__input').checked На сервер форма отправится с корректно выбранным чекбоксом / радиокнопкой.

[@tortik_0162]

@@AleksanderLamkov Да, именно это меня и смутило, большое спасибо за разъяснения)

[@SmoggyRus]

Когда будет курс по JavaScript? Очень хорошие видео получаются 😊

[@AleksanderLamkov]

Привет! Спасибо за комментарий) Курс по JS начинается завтра утром, будут выходить 1-2 видео в неделю.

[@SmoggyRus]

@@AleksanderLamkov Спасибо, жду с нетерпением!

[@pablo_barnes7329]

У меня вопрос на 43:46 . А смысл эти переменные переопределять, пусть останутся значения в цифровом формате, а не переменном. Или переменные как то лучше оптимизируют css файл?

[@AleksanderLamkov]

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

[@pablo_barnes7329]

Благодарю

[@jpogoriliy1468]

Привет, вопросик по 59:02 Может вопрос и глупый, но задам. Как такие условия научиться задавать? Выглядит очень удобно и хочется в будущем применять в собственных проектах. Может у этого есть название ( да-да, математика :DD ). P.S. Контент суперский. Сколько верстал макетов по видосам, впервые наткнулся на такой информативный курс. Буквально каждые 5 минут надо делать паузу и самому разбирать. У тебя очень круто получается! Желаю гореть создаванием следующих видео.

[@AleksanderLamkov]

Слушай, ну это просто насмотренность. Все эти паттерны «что от чего зависит» определяются на автоматизме, когда в коде приходится второй и более раз юзать одно и то же значение. На счет ситуации по таймкоду - да, там ещё и математика есть, но она примитивная, никаких даже формул гипотенузы и подобного. P. S. За фидбек спасибо, мне приятно 🙂

[@Triplanar]

Привет, а почему svg иконки/ svg изображения мы вставляем то через тег , то через , есть какие то определенные правила когда что использовать?. Спасибо за контент)

[@AleksanderLamkov]

Если нужна возможность изменять цвет иконки, то нужно вставлять её как , в ином случае будет достаточно .

[@Triplanar]

@@AleksanderLamkov ааааа, понял, спасибо)

[@kalts_daniil]

Это был офигеннейший мастер-класс! Никогда не думал, что можно настолько удобно верстать) Теперь хочу реализовать этот макет снова, но на этот раз буду пытаться самостоятельно, практически не подглядывая в видео. Надо же закрепить) Но на этот раз я добавлю Gulp и Swiper.js. Хочу ещё добавить отправку сообщений на почту. Есть какие-нибудь решения без использования язык программирования? И ещё вопрос. В папке с стилями (blocks) было очень много файлов. Тяжеловато ориентироваться. Может быть там тоже стоит указывать папки по секциям и туда уже добавлять необходимые scss файлы?

[@AleksanderLamkov]

Привет! Спасибо за обратную связь :) Для отправки сообщений на почту можно взять популярную библиотеку-скрипт PHPMailer. Без кода не обойтись, но по настройке миллион гайдов в гугле и ютубе. А про blocks - да, можно декомпозировать ещё больше, главное не запутаться в иерархии. По-хорошему то нужен сборщик проектов с шаблонизатором разметки, деление всей разметки на компоненты, на отдельные папки с файлами, относящимися к компоненту, в т. ч. и файлы стилей, тогда папки styles/blocks/ в принципе существовать не будет. После текущего курса по JS я расскажу о работе с этими инструментами и сделаю как минимум один МК по верстке, где будем их использовать.

[@kalts_daniil]

@@AleksanderLamkov буду ждать с нетерпением! 🔥

[@hjetwd]

16:14 что бы объединить разные селекторы в 1 запись, в sass есть плейсхолдеры (placeholder или заполнитель), глобальные плейсхолдеры выносятся в отдельный файл _placeholders.scss и подключаются @use '../abstracts/placeholders'; (новый @use для плейсхолдера используется строго без as, т.к. для него пространство имен не работает) или локально в этом же файле, если повторяющийся код уникальный, затем в теле добавляется запись: &__accordion { ... &:hover { @extend %hover-background-color-acent; // @extend % + имя плейсхолдера } ... &[open] { @extend %hover-background-color-acent; // повторяем плейсхолдер там, где код повторяется } } // локальный пример использования плейсхолдера %hover-background-color-acent { backgorund-color: var(--color-accent); } итого sass сгенерирует это: .process__accordion:hover, .process__accordion[open] { backgorund-color: var(--color-accent); }

[@AleksanderLamkov]

Большое спасибо за подробное разъяснение! Забыл, что в Sass такое есть :)

[@ДмитрийКрюков-к8м]

Ребята , а как быть тогда , когда допустим у секцией разные паддинги.Не как здесь в макете.Какие-то модификаторы навешивать на бэм блок?

[@AleksanderLamkov]

Если у каждой секции уникальные внутренние вертикальные отступы, то лучше задать каждой секции уникальный класс БЭМ-блока, характеризующий содержимое секции: catalog, about, feedback и т. д. Если же большинство секций с одинаковыми отступами, и лишь некоторые имеют нестандартные значения, то, да, таким секциями нужен БЭМ-модификатор, section--padding-y-small, к примеру.

[@proArs13]

спасибо неделю делал ахах! классно!!

[@СтаниславГорячев-г1ъ]

Спасибо

[@akylbekbaizakov]

Почему у вас скроллбар для элемента previews__slider-list не появился, а у меня в Chrome он есть?)

[@AleksanderLamkov]

Из-за разных операционных систем. На MacOS по умолчанию скроллбары невидимы, на Windows - видны всегда. На канале среди первых шортсов было видео про то, как скроллбар стилизовать. Можно его глянуть и переделать как-то интереснее. Или же можно вовсе его скрыть (там какие-то специальные селекторы нужны, не помню, нужно поискать).

[@akylbekbaizakov]

@@AleksanderLamkov Благодарю 🙌

[@KirillPriker]

@@akylbekbaizakov .reviews__slider-list::-webkit-scrollbar { display: none; /* Скрыть скроллбар для Webkit-браузеров */ }

[@Schraibikus77]

Александр добрый день!! Спасибо за Вашу работу!! Есть один вопрос, обязательно ли прописывать переменные в root, если scss даёт возможность писать их через $, да и потом не нужно все время писать var(), у меня просто не настроен vs-code, приходится постоянно искать переменные в файле и копировать оттуда))

[@AleksanderLamkov]

Привет! Спасибо за обратную связь 🙂 CSS-переменные (через var) и Sass-переменные (через $) кардинально отличаются друг от друга и служат разным целям. Sass-переменные пропадают после компиляции (после преобразования scss/sass-файла в css-файл). В местах их использования подставляются конкретные значения переменных. CSS-переменные же работают в рантайме (то есть браузер их видит и вычисляет динамически), в частности, ими можно манипулировать через JS. Раньше, когда в нативном CSS не существовало переменных, использовать переменные Sass (с синтаксисом через $) было необходимостью. Сейчас же смысл в использовании Sass-переменных есть только в Sass-миксинах, Sass-функциях и Sass-медиазапросах, то есть там, где обычные CSS-переменные использовать не получится. Вывод: везде, где можно обойтись без Sass-переменных, стоит использовать CSS-переменные с var, так как с ними у тебя будет больше возможностей.

[@Schraibikus77]

@@AleksanderLamkov Я только недавно перешел на scss и для меня это было загадкой, ведь синтаксис проще с переменными через $, спасибо что просветили. В том курсе который я прохожу об этом никто не говорит))

[@the.lightfall]

Господа, мне вот что интересно, нормально наличие СКРОЛЛБАРА в секции со слайдером Reviews? У меня он нативный и некрасивый весь. Я решил добавить свойство к слайдеру: &::-webkit-scrollbar { width: 0px; background: transparent; /* make scrollbar transparent */ } Но мб есть другие подходы?

[@AleksanderLamkov]

Можно стилизовать, как показывал в этом шортсе: kzbin.infopgjRYNT2LQA

[@the.lightfall]

@@AleksanderLamkov Спасибо. В очередной раз натыкаюсь на полезный шортс именно от Вас!

[@AjkCsgo]

Александр привет! Подскажите, что делать если теорию выучил и понимаешь, а на практике сидишь и не можешь сообразить что применить и каким образом, может верстать сначала что то полегче? Потому что проект с седоном очень тяжко идëт.

[@AleksanderLamkov]

Привет! Я в свое время смотрел многочасовые мастер-классы / марафоны по верстке от разных авторов, смотрел маленькими кусками по 3-10 минут, ставил на паузу и пытался сначала сделать сам, затем смотрел как делает автор и если меня устраивало моё решение, то оставлял, а если я наворотил глупостей, то переделывал под то, как показывал мастер. В скором времени я все реже и реже подсматривал в то, как делают другие, так как мне мои решения нравились все больше и больше :)

[@AjkCsgo]

@@AleksanderLamkov Спасибо! Буду пробовать, вы очень крутой спасибо за ваш труд 💯

[@cheshirecat1080]

@@AjkCsgo Привет. Поищи похожий макет на тот что в видеоуроке (в фигме режим разработчика сделали платным, загугли pixo), и делай сам, подглядывая в код что ты писал во время урока. Так начнет закрепляться. И не пытайся угнаться за тем, что тут показывается в видео. Eсли ты начинаешь с нуля, это будет довольно сложный для совсем новичка подход. В принципе попробуй, но если будет сложно, загугли верстка loftHouse. Тоже современный подход, но попроще.

[@PavelChupryna]

Я это сделал!)

[@АлександрСальников-с2ж]

Коммент в поддержку

[@hjetwd]

24:50 плавность для раскрытия ditails силами css можно без js. анимируется (можно через animation, но проще transition) grid-template-rows и visibility. погугли статью - CSS Grid Can Do Auto Height Transitions на css-tricks

[@hjetwd]

есть извращенный (я бы даже его назвал извращенским) вариант с новым свойством начального стиля @starting-style: .class { transition: .2s linear opacity; &:hover { @starting-style { display: none; opacity: 0; } display: block; opacity: 1; } люди шутят - УРА, теперь можно анимировать display: none но, во 1 - от него крашится интерпретатор sass, видимо не понимая, что это за чудовище влезло в код , а во 2 - 65% поддержки на can i use и нету записи Baseline (даже синей), что как бы намекает, что это лучше не использовать

[@AleksanderLamkov]

Интересная экспериментальная фича, будем за ней следить... Полезная инфа! Ещё раз благодарю за экспертизу :)

[@AleksanderLamkov]

Про способ через гриды не знал, нагулил, буду тестить. Спасибо! Применю в отдельном уроке по details. Это буквально всё меняет.

[@AleksanderLamkov]

С details, увы, способ не работает. Возможно добиться плавного открытия, но не закрытия, т. к. когда на details нет состояния open, то содержимое просто мгновенно скрывается, анимировать плавное закрытие невозможно. Вот тут пытались реализовать css-only решения, но безкостыльного универсального решения так и не придумали: css-tricks.com/how-to-animate-the-details-element/ Так что остается только JS. Хотя там строчек на самом деле не очень много, если не пытаться накрутить логику "открыл один, закрыл соседние".

[@hjetwd]

@@AleksanderLamkov бот ютуба удаляет комментарии с ссылкой =\ короче, вчера я написал страницу на кодпэне - кодпэн_ио/9poiiia/full/xxBjEPr - 0 javascipt, чистый css, смысл там какой, у css есть селектор следующего элемента + (плюс). к примеру у нас есть header и после него идет main. как нам стилизовать main, если на странице есть header? через плюс - header + main { стили для main, если до него есть header }... details выдёргивает содержимое своего контента из дерева dom (как display: none - для браузера этого элемента не существует, поэтому для display: none не работают анимации), поэтому выносим содержимое details за его пределы и кладем после него, затем details + .details__content стилизуем для закрытого и details[open] + .details__content стилизуем для открытого. все анимации работают.

[@tangiro5340]

Александр добрый день, я хотел спросить в момент верстки секции team мы выгружали картинки в формате svg в team-card, это решение может и адекватное для большинства браузеров, но тот же файрфокс очень сильно ругался на них и не читал. Как я понял с прочитанного на stackoverflow, что эту проблему можно решить если залезть в сами вектора, но это заняло кучи времени, лично я выгрузил из фигмы в формате png и потом через компилятор прогнал в svg, да решение не очень уж красивое, но вместо 12мб на 1 из картинок вышло 70кб на каждую свгэшку.

[@AleksanderLamkov]

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

[@ortursucceeh]

А что это за штука футуристическая сзади тебя стоит?)

[@AleksanderLamkov]

Привет! Это ПК от HyperPC в корпусе Cyber: hyperpc.ru/gaming-pc/cyber

[@arti532]

В первом видео использовал тег dialog, но вопрос в другом стоит ли его использовать вместо самодельной модалки меню, тк анимировать диалог просто нереально! Сомневаюсь что пользователь получит хороший экспириенс от такого вида меню, а так да прикольно что он поверх любого z-index

[@AleksanderLamkov]

Анимировать реально, нужно лишь немного джаваскрипта. В отдельном видео покажу, как сделать такой компонент.

[@_Alhimik_]

Подскажи, у тебя dev mode рабочий на видео, это видос давно снимал или оплатил подписку?

[@AleksanderLamkov]

Привет! Снимал две недели назад, когда дев-мод был еще бесплатным.

[@_Alhimik_]

@@AleksanderLamkov а какие планы по этому поводу?)

[@AleksanderLamkov]

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

[@_Alhimik_]

@@AleksanderLamkov пили видос, сейчас актуально )

[@ДенисБерезюк-ч3ш]

А зачем ты везде иконки почти вставляешь svg кодом в html ? даже когда эффект например перекраски цвета не нужен

[@AleksanderLamkov]

Изначально некоторые иконки планировал таки перекрашивать. Ну и их действительно оптимальнее будет сделать через background, ты прав. Хотя «физическая» иконка в разметке с «встроенными» размерами гораздо удобнее, чем пустой див 0х0, к которому вручную необходимо задавать размеры, чтобы фоновая иконка отобразилась.

[@ДенисБерезюк-ч3ш]

@@AleksanderLamkov Значит какому лучше варианту придерживать ?

[@ДенисБерезюк-ч3ш]

@@AleksanderLamkov это ты сейчас сидишь в ВК, работаешь и параллельно на комментарии отвечаешь ?

[@AleksanderLamkov]

> Значит какому лучше варианту придерживать ? На самом деле без разницы. Можно делать так, как тебе удобно. Разница в количестве перегоняемой по сети информации, конечно, будет, но настолько критичная, чтобы её в принципе заметить. Есть проблемы куда более серьёзнее, над которыми надо думать в реальных проектах... > это ты сейчас сидишь в ВК, работаешь и параллельно на комментарии отвечаешь ? Типа того. Уведомления от YT получаю, не могу не ответить, если есть свободная минутка :)

[@ДенисБерезюк-ч3ш]

@@AleksanderLamkov слушай, ВК набирает разработчиков на удаленке ? И как в ВК важен Английский язык ?

[@true_candlejack]

1:33:00 У меня выдает Failed to load resource: net::ERR_FILE_NOT_FOUND при попытке подгрузить svg-элемент. Это странно, ведь все пути соблюдены корректно, а код проверен неоднократно. Не подскажете чем может быть ошибка?

[@AleksanderLamkov]

Напиши нам в чат, поможем: t.me/friendlyFrontendChat Можешь сразу архивом скинуть свой проект, чтобы время не терять.

[@true_candlejack]

@@AleksanderLamkov большое спасибо, мне сразу помогли!)