Кому нужны флексы - HTML Шорты
- Flexbugs - github.com/philipwalton/flexbugs
- Display property usage - developer.microsoft.com/en-us...
- CSS Box Alignment - www.w3.org/TR/css-align-3/
Все шорты - htmlacademy.ru/shorts
- Flexbugs - github.com/philipwalton/flexbugs
- Display property usage - developer.microsoft.com/en-us...
- CSS Box Alignment - www.w3.org/TR/css-align-3/
Все шорты - htmlacademy.ru/shorts
Пікірлер: 104
По промокоду «YouMeow» скидка 900 рублей на интенсив или программу профессии в Академии - tml.io/mbf87
HTML Academy, скажите честно, Шорты выпускаются не каждый день только потому, что вы ждёте, когда Вадим купит новую футболку? =)
@pepelsbey
6 жыл бұрын
Пока есть стратегический запас! Но скоро уже придётся что-то придумывать.
Когда начал использовать флексы, продуктивность выросла в несколько раз.
Интересный формат видео. Спасибо.
Как всегда коротко и по делу! Так держать!
Вадим,спасибо Вам за очередной выпуск!Теперь конечно же интересно подробнее узнать о "Гридах")
@HTMLAcademyTV
6 жыл бұрын
Расскажем и о них
Курс по флексбоксам очень полезный и познавательный, спасибище! Прошла первую часть, сегодня пройду вторую.
Посмотрел пару выпусков Шортов и остался с приятным послевкусием. Вроде бы, все факты известные, но где-то историческая справка интересная когда и с чего все началось, а где-то какие-то мелочи подмечаете. Понравилось! Очень бы хотелось, чтобы вы вернулись в эфир а занялись вторым сезоном шортов.
Отдельно спасибо за недельный фримиум о флексбах на курсах)
Какооой классный видос!
Спасибо Вадим.
Пишу из 2019 . Делаю каждый сайт на флексе + гриды. Они друг другу не мешают .
@fein7068
4 жыл бұрын
Тебя палкой не бьют за grid? В США и Европе может еще норм, но в России еще очень много кто сидит на древних IE и заказчики хотят угодить всем.
@nexgenua
4 жыл бұрын
Fein - ну не знаю как они сидят на старых IE, но я недавно накатил на старый ноут систему и решил посидеть на родном IE вроде 9 версия была, так больше чем на половине сайтов я встречал табличку, что браузер устарел и для доступа к сайту нкжно обновить браузер и я был вынужден скачать хром. Так что у меня большие сомнения, что кто-то реально пользуется IE в качестве основного браузера
@fein7068
4 жыл бұрын
@@nexgenua 9 версию давно отменили, поддерживают еще ie11 и edge
@nexgenua
4 жыл бұрын
@@fein7068 ты писал про древние IE, а теперь пишешь про IE 11 т.е. самая последняя версия, которая поддерживает как flex так и grid, в чем проблема?
@fein7068
4 жыл бұрын
@@nexgenua Ты не понял, для меня IE вообще древность и 10 и 11 версия имеют масса проблем, тот же флекс работает не так как во всех браузерах, есть свои тонкости, грид пока боюсь использовать, обругают так как грид только в последних версиях браузеров поддерживается нормально.
молоцец мужик! так хорошо и просто дает инфу.!b полезно и времени тратишь по минимому! спасибо!
Флексы классные, дайте две)))))
Спасибо большое. Приходиться сталкиваться с "верстальщиками-староверами", которые упорно верстают флоатами, и абсолютно уверены что это истина в последней инстанции. Буду ссылаться на это видео :)
Крутые футболки)
Хихи - а в презентациях по гридам рассказываете, что флексы вообще-то не для сеток) Но видосы клевые)) Особенно шуточка про "смотри, парни сняли шорты" огонь!
Я из будущего флексы везде 😅
Роскажите тогда и про гриды пожалуйста!
@HTMLAcademyTV
6 жыл бұрын
😺
Расскажите пожалуйста про will-change. Когда его стоит применять и как именно.
@HTMLAcademyTV
6 жыл бұрын
Спасибо за вопрос 🙂
уже можно? Спасибо!
Здравствуйте, Вадим! Недавно смотрел запись Вашего доклада "Мой ванильный CSS" и понячл, что Вы не являетесь поклонником SASS, хотя, наверняка у Вас большой опыт его использования :) Поэтому хочу спросить: в каких случаях такой инструмент как SASS-maps является очень удобным и есть ли какие-то особенности его использования? Я буду безумно благодарен, если этот мой вопрос будет затронут в одном из выпусков HTML-shorts. И спасибо за подкасты!
@HTMLAcademyTV
6 жыл бұрын
Мы записали ваш вопрос 😊
Вадим, откуда такие майки берешь? :)
@pepelsbey
6 жыл бұрын
Никита Баринов в основном с Threadless, но не только
@nbarinov
6 жыл бұрын
Спасибо!
@kksss53
4 жыл бұрын
это не майки это вадим *хуенен
Ура! Новый выпуск шоу Вадима Макеева! Спасибо за выпуск
Вадим, сейчас через bootstrap 4 можно делать позиционирование, очень крутые возможности. Стоит ли пользоваться флексом?
@pepelsbey
5 жыл бұрын
Иван Доброславин Bootstrap позволяет вам делать только то, что умеет Bootstrap. Флексы - всё, что умеет Bootstrap и всё, что он не умеет.
Вадим, можно подкинуть вопрос? Зачем и как древние верстальщики использовали однопиксельный gif? Может, эта тема будет интересна и другим.
@HTMLAcademyTV
6 жыл бұрын
Спасибо за вопрос 🙂
с выходом "Bootstrap 4" сайтов на флексах станет больше)
@kovtunos
6 жыл бұрын
Пока он выйдет Grid Layout в браузерах заработает на полную катушку.
@vorobiovk
6 жыл бұрын
он пока выйдет то уже grid устареет
@user-hj6vz5mz8r
6 жыл бұрын
Только вот четвертый бутстрап уже почти готов, и в течении пары месяцев, скорей всего, будет уже в продакшене. А гриды за пару месяцев, да даже за год, не сделают аналогичную поддержку. Так что, пока флексы, а года через 1,5-2 и гриды подойдут.
@wswebus922
6 жыл бұрын
Бутстрап достаточно компонентный, что бы просто взять оттуда только сетку на флексах и использовать её. И она сделана очень хорошо и работает как надо. Не обязательно ждать пока весь бутстрап выйдет
добрый день! про гриды очень хотелось был послушать. есть ли смысл делать всю страницу на гридах вместо флексов? интересна актуальность применения display: grid; спасибо!
Здравствуйте, интересно было бы услышать о стайлгайдах. Допустим в css. Например сейчас сижу и думаю, ставить ведущий ноль на манер: "8px 0.3px" или не ставить Я привык не ставить и codestyle.co говорит не ставить, а stylelint-config-standard говорит ставить, кому верить? и таких примеров много
@HTMLAcademyTV
6 жыл бұрын
Спасибо за вопрос👍
Флексы нужно юзать с умом, например у нас есть отчеты, которые потом рендерятся в PDF, там свой рендерер на базе QT, так вот там флексы не работают. Получился сюрприз, хотя и не сильно глобальный (мы их пробовали применять только в одном месте).
на 1:46 ошибка. должно быть transform: translate(-50%, -50%), а у вас без запятой )
@pepelsbey
6 жыл бұрын
Дмитрий Русаков спасибо, но опечатку в видео поправить нельзя (
@HTMLAcademyTV
6 жыл бұрын
сейчас так сделать на ютубе нет возможности.
Пишу из мая 2022 тут флексы и гриды повсюду что повсеместное использование flex gap😎
Вадим, может рассмотрите такой вопрос? Стоит ли ради семантики классов отказываться от css-фреймворков, потому, что в нем очень многие классы описывают лишь внешний вид элемента, совершенно не поясняя разработчику, чем по сути является элемент?
@HTMLAcademyTV
6 жыл бұрын
Вопрос записали 😉
«Сайты не должны быть одинаковыми во всех браузерах, что бы там ни требовали заказчики». Но ведь платит заказчик, а не Вадим Макеев. Как доказать заказчику необязательность идентичности картинки в браузерах?
@iDobroslavin
5 жыл бұрын
Заказчиков нужно на место ставить и гнуть свою линию. Они много чего хотят.
@younglipetsk
5 жыл бұрын
а врачу платит пациент. Но ни один врач, в здравом уме, не пришьет никому запасную почку "на всякий случай", просто потому что заканчик платит, а значит он главный.
Из 2021... А что в 2017 году сайты на таблицах и флоатах ещё делали?!
Мне кажется на 28-й секунде можно было бы закончить XD
У нас с ребятами вопрос назрел, как раз для шортов. Как подружить нативный функционал лейбла на форме с симпатичным чекбоксом? Симпатичные чекбоксы обычно верстают через , а не вложенностью, чтобы использовать + селектор без джс-костылей, но ведь придумывать айди к каждому чекбоксу ужасно!
@PoroLLIo4eG
6 жыл бұрын
Sergiy Pereverziev делай вложенные, а вместо + используйте ~ Элементарно же, ну
@HTMLAcademyTV
6 жыл бұрын
Спасибо за вопрос
@besuhoff
6 жыл бұрын
интересно, как ~ мне поможет с вложенными
@PoroLLIo4eG
6 жыл бұрын
воу, я чет написал не подумав. Конечно же > а не ~
@PoroLLIo4eG
6 жыл бұрын
я просто не пойму в чем проблема со вложенностью? Делается по тому же принципу, только выбирается не первый правый сосед, а дочерний элемент. А дальше все так же, before и after
Спасибо за видео! А значит ли это что теперь можно писать собственные таблицы на флексах, не используя ? =] Или это очередное использование технологии не по назначению? :) П.С. Зелёная плашка в конце видео не выровнена по центру cl.ly/1R3Z0H301V3n ¯\_(ツ)_/¯
@pepelsbey
6 жыл бұрын
У , как и других семантических элементов, есть много полезных встроенных механизмов, включая доступность. Имитировать таблицы стоит только если у вас совсем нет выбора.
@Anttoshka47
6 жыл бұрын
На флексах нужно делать если блок напоминает таблицу. Если же это настоящая таблица, то зачем лишнее делать?
Почему академию переводете на флекс, а не на грид? Еще рано?
@pepelsbey
6 жыл бұрын
Новыйх гридов не будет в IE11, а доля у него приличная, так что рановато переводить на них интенсивы. Но курсы по гридам делать конечно будем.
Спасибо за шорты) Но ооочень странное впечатление, как будто все живое вырезали и оставили робота правильно говорить. В подкасте гораздо лучше без всякой этой постановочной мишуры.
Стоит один дизлайк... хм... видимо Алексей тоже посмотрел это видео )))
Веб жив?
@danil_pugovkin
5 жыл бұрын
@Melorum XZ нормальный вопрос, лебедев говорит веб мертв, фэйсбук говорит все съел
Что значит не делают? weacom.ru/
а вот такой вопрос. Куда лучше ставить свойство transition, на класс или на его hover?
моргни пожалуйста..
Терпеть не могу float'ы но иногда надо чтоб была поддержка ie9. А так для верстки админки самое то
@DmitrijBolshakov
6 жыл бұрын
Поддержка flexbox в мире 97.59%, а в России всего 84.13% (согласно caniuse.com/#search=flexbox). Так что остается использовать float в России. Пока что!
Первый что-ли)
Си эс эс, а не цэ эс эс
@pepelsbey
5 жыл бұрын
Dorian Zlatan нет. (поддерживаю уровень аргументации)
@dorzlatan
5 жыл бұрын
@@pepelsbey потому что это английский термен! Буквы читаютьса на английском как СИ ЭС ЭС! А не какой то там ЦЭ!
@pepelsbey
5 жыл бұрын
Dorian Zlatan а скажите мне как правильно произносить тег и свойство border и margin тогда. Транслитерируйте по-русски. Наверняка вы скажете аудио, бордер и марджин. Только они читаются как одио, бодэ и маджин. Что же делать? А я вам скажу: не говорить другим как говорить правильно :) Меня в школе на геометрии научили, что ABC - это а-бэ-цэ. А у некоторых в школе немецкий и для них тем более а-бэ-цэ. Есть наречия, есть вариации нормы, есть разные произношения.
Поддержка flexbox в мире 97.59%, а в России всего 84.13% (согласно caniuse.com/#search=flexbox). Так что остается использовать float в России
Вадим, большая просьба, не говорите "цсс", есть только СSS
@mikemerezhko
6 жыл бұрын
А как правильно?
@user-tt1vn2go1w
6 жыл бұрын
сиэсэс, если не ошибаюсь
@pepelsbey
6 жыл бұрын
Кирилл Воробьев в русском есть устоявшаяся традиция называть английскую «си» на немецкий манер цэ, а эйч как аш и так далее. Вас же в школе на геометрии учили, что у треугольника а-бэ-цэ, а не ай-би-си, правда? Поэтому продолжу, а вы будьте терпимее - это самое распространённое произношение, насколько я слышу.
@vorobiovk
6 жыл бұрын
Vadim Makeev традиции это одно, а правильное произношение это уже другое, я не знаю как у вас там в школе учили, но на немецкий манер, английский на русский не переводят. Вы же не говорите, я надеюсь, яваскрипт потому как есть только джаваскрипт и есть пайтон а не питон (но это ладно, опустим) А еще мне интересно как вы произносите SCSS ? тоже как сцеэсес ?. Насколько я слышу то то произносят сиєсєс и это правильно.
@user-sy4wc5qt4e
6 жыл бұрын
У переводчиков есть два подхода к переводу: транскрипция и транслитерация. При транскрипции стараются сохранить звучание иностранного языка, при транслитерации просто переводят по буквам. Оба подхода используются, оба подхода хороши. Так что понятия "правильно" здесь просто нет.