Кому нужны флексы - 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

Пікірлер: 104

  • @HTMLAcademyTV
    @HTMLAcademyTV4 жыл бұрын

    По промокоду «YouMeow» скидка 900 рублей на интенсив или программу профессии в Академии - tml.io/mbf87

  • @user-qg5fi2eq6k
    @user-qg5fi2eq6k6 жыл бұрын

    HTML Academy, скажите честно, Шорты выпускаются не каждый день только потому, что вы ждёте, когда Вадим купит новую футболку? =)

  • @pepelsbey

    @pepelsbey

    6 жыл бұрын

    Пока есть стратегический запас! Но скоро уже придётся что-то придумывать.

  • @mexvision-3556
    @mexvision-35563 жыл бұрын

    Когда начал использовать флексы, продуктивность выросла в несколько раз.

  • @The0bytes
    @The0bytes6 жыл бұрын

    Интересный формат видео. Спасибо.

  • @maximzabara
    @maximzabara6 жыл бұрын

    Как всегда коротко и по делу! Так держать!

  • @evilblackheart
    @evilblackheart6 жыл бұрын

    Вадим,спасибо Вам за очередной выпуск!Теперь конечно же интересно подробнее узнать о "Гридах")

  • @HTMLAcademyTV

    @HTMLAcademyTV

    6 жыл бұрын

    Расскажем и о них

  • @SashaBookWitch
    @SashaBookWitch6 жыл бұрын

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

  • @ArMikael
    @ArMikael6 жыл бұрын

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

  • @_trelis_2811
    @_trelis_28116 жыл бұрын

    Отдельно спасибо за недельный фримиум о флексбах на курсах)

  • @Mirk047
    @Mirk0475 жыл бұрын

    Какооой классный видос!

  • @maxxbf
    @maxxbf6 жыл бұрын

    Спасибо Вадим.

  • @dbuzeninka8005
    @dbuzeninka80055 жыл бұрын

    Пишу из 2019 . Делаю каждый сайт на флексе + гриды. Они друг другу не мешают .

  • @fein7068

    @fein7068

    4 жыл бұрын

    Тебя палкой не бьют за grid? В США и Европе может еще норм, но в России еще очень много кто сидит на древних IE и заказчики хотят угодить всем.

  • @nexgenua

    @nexgenua

    4 жыл бұрын

    Fein - ну не знаю как они сидят на старых IE, но я недавно накатил на старый ноут систему и решил посидеть на родном IE вроде 9 версия была, так больше чем на половине сайтов я встречал табличку, что браузер устарел и для доступа к сайту нкжно обновить браузер и я был вынужден скачать хром. Так что у меня большие сомнения, что кто-то реально пользуется IE в качестве основного браузера

  • @fein7068

    @fein7068

    4 жыл бұрын

    @@nexgenua 9 версию давно отменили, поддерживают еще ie11 и edge

  • @nexgenua

    @nexgenua

    4 жыл бұрын

    @@fein7068 ты писал про древние IE, а теперь пишешь про IE 11 т.е. самая последняя версия, которая поддерживает как flex так и grid, в чем проблема?

  • @fein7068

    @fein7068

    4 жыл бұрын

    @@nexgenua Ты не понял, для меня IE вообще древность и 10 и 11 версия имеют масса проблем, тот же флекс работает не так как во всех браузерах, есть свои тонкости, грид пока боюсь использовать, обругают так как грид только в последних версиях браузеров поддерживается нормально.

  • @leader7700
    @leader77006 жыл бұрын

    молоцец мужик! так хорошо и просто дает инфу.!b полезно и времени тратишь по минимому! спасибо!

  • @victormuryn6106
    @victormuryn61065 жыл бұрын

    Флексы классные, дайте две)))))

  • @KocaHocTpa
    @KocaHocTpa6 жыл бұрын

    Спасибо большое. Приходиться сталкиваться с "верстальщиками-староверами", которые упорно верстают флоатами, и абсолютно уверены что это истина в последней инстанции. Буду ссылаться на это видео :)

  • @ruxsora2172
    @ruxsora21724 жыл бұрын

    Крутые футболки)

  • @user-pu7ey9iw7x
    @user-pu7ey9iw7x6 жыл бұрын

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

  • @user-tb3mm6dl3z
    @user-tb3mm6dl3z10 ай бұрын

    Я из будущего флексы везде 😅

  • @Olegatorius1
    @Olegatorius16 жыл бұрын

    Роскажите тогда и про гриды пожалуйста!

  • @HTMLAcademyTV

    @HTMLAcademyTV

    6 жыл бұрын

    😺

  • @Anttoshka47
    @Anttoshka476 жыл бұрын

    Расскажите пожалуйста про will-change. Когда его стоит применять и как именно.

  • @HTMLAcademyTV

    @HTMLAcademyTV

    6 жыл бұрын

    Спасибо за вопрос 🙂

  • @user-ym9rc1qj7l
    @user-ym9rc1qj7l6 жыл бұрын

    уже можно? Спасибо!

  • @vladsenko392
    @vladsenko3926 жыл бұрын

    Здравствуйте, Вадим! Недавно смотрел запись Вашего доклада "Мой ванильный CSS" и понячл, что Вы не являетесь поклонником SASS, хотя, наверняка у Вас большой опыт его использования :) Поэтому хочу спросить: в каких случаях такой инструмент как SASS-maps является очень удобным и есть ли какие-то особенности его использования? Я буду безумно благодарен, если этот мой вопрос будет затронут в одном из выпусков HTML-shorts. И спасибо за подкасты!

  • @HTMLAcademyTV

    @HTMLAcademyTV

    6 жыл бұрын

    Мы записали ваш вопрос 😊

  • @nbarinov
    @nbarinov6 жыл бұрын

    Вадим, откуда такие майки берешь? :)

  • @pepelsbey

    @pepelsbey

    6 жыл бұрын

    Никита Баринов в основном с Threadless, но не только

  • @nbarinov

    @nbarinov

    6 жыл бұрын

    Спасибо!

  • @kksss53

    @kksss53

    4 жыл бұрын

    это не майки это вадим *хуенен

  • @user-ke9up3vy1d
    @user-ke9up3vy1d6 жыл бұрын

    Ура! Новый выпуск шоу Вадима Макеева! Спасибо за выпуск

  • @iDobroslavin
    @iDobroslavin5 жыл бұрын

    Вадим, сейчас через bootstrap 4 можно делать позиционирование, очень крутые возможности. Стоит ли пользоваться флексом?

  • @pepelsbey

    @pepelsbey

    5 жыл бұрын

    Иван Доброславин Bootstrap позволяет вам делать только то, что умеет Bootstrap. Флексы - всё, что умеет Bootstrap и всё, что он не умеет.

  • @shoutinglime
    @shoutinglime6 жыл бұрын

    Вадим, можно подкинуть вопрос? Зачем и как древние верстальщики использовали однопиксельный gif? Может, эта тема будет интересна и другим.

  • @HTMLAcademyTV

    @HTMLAcademyTV

    6 жыл бұрын

    Спасибо за вопрос 🙂

  • @alextopsite
    @alextopsite6 жыл бұрын

    с выходом "Bootstrap 4" сайтов на флексах станет больше)

  • @kovtunos

    @kovtunos

    6 жыл бұрын

    Пока он выйдет Grid Layout в браузерах заработает на полную катушку.

  • @vorobiovk

    @vorobiovk

    6 жыл бұрын

    он пока выйдет то уже grid устареет

  • @user-hj6vz5mz8r

    @user-hj6vz5mz8r

    6 жыл бұрын

    Только вот четвертый бутстрап уже почти готов, и в течении пары месяцев, скорей всего, будет уже в продакшене. А гриды за пару месяцев, да даже за год, не сделают аналогичную поддержку. Так что, пока флексы, а года через 1,5-2 и гриды подойдут.

  • @wswebus922

    @wswebus922

    6 жыл бұрын

    Бутстрап достаточно компонентный, что бы просто взять оттуда только сетку на флексах и использовать её. И она сделана очень хорошо и работает как надо. Не обязательно ждать пока весь бутстрап выйдет

  • @user-po2vz8zx5h
    @user-po2vz8zx5h6 жыл бұрын

    добрый день! про гриды очень хотелось был послушать. есть ли смысл делать всю страницу на гридах вместо флексов? интересна актуальность применения display: grid; спасибо!

  • @AartRainey
    @AartRainey6 жыл бұрын

    Здравствуйте, интересно было бы услышать о стайлгайдах. Допустим в css. Например сейчас сижу и думаю, ставить ведущий ноль на манер: "8px 0.3px" или не ставить Я привык не ставить и codestyle.co говорит не ставить, а stylelint-config-standard говорит ставить, кому верить? и таких примеров много

  • @HTMLAcademyTV

    @HTMLAcademyTV

    6 жыл бұрын

    Спасибо за вопрос👍

  • @jmmmas
    @jmmmas6 жыл бұрын

    Флексы нужно юзать с умом, например у нас есть отчеты, которые потом рендерятся в PDF, там свой рендерер на базе QT, так вот там флексы не работают. Получился сюрприз, хотя и не сильно глобальный (мы их пробовали применять только в одном месте).

  • @user-nm8gl2jg3d
    @user-nm8gl2jg3d6 жыл бұрын

    на 1:46 ошибка. должно быть transform: translate(-50%, -50%), а у вас без запятой )

  • @pepelsbey

    @pepelsbey

    6 жыл бұрын

    Дмитрий Русаков спасибо, но опечатку в видео поправить нельзя (

  • @HTMLAcademyTV

    @HTMLAcademyTV

    6 жыл бұрын

    сейчас так сделать на ютубе нет возможности.

  • @user-tb3mm6dl3z
    @user-tb3mm6dl3z2 жыл бұрын

    Пишу из мая 2022 тут флексы и гриды повсюду что повсеместное использование flex gap😎

  • @user-ur4pu5br1v
    @user-ur4pu5br1v6 жыл бұрын

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

  • @HTMLAcademyTV

    @HTMLAcademyTV

    6 жыл бұрын

    Вопрос записали 😉

  • @Gurylyov
    @Gurylyov6 жыл бұрын

    «Сайты не должны быть одинаковыми во всех браузерах, что бы там ни требовали заказчики». Но ведь платит заказчик, а не Вадим Макеев. Как доказать заказчику необязательность идентичности картинки в браузерах?

  • @iDobroslavin

    @iDobroslavin

    5 жыл бұрын

    Заказчиков нужно на место ставить и гнуть свою линию. Они много чего хотят.

  • @younglipetsk

    @younglipetsk

    5 жыл бұрын

    а врачу платит пациент. Но ни один врач, в здравом уме, не пришьет никому запасную почку "на всякий случай", просто потому что заканчик платит, а значит он главный.

  • @evgenysmirnov4762
    @evgenysmirnov47622 жыл бұрын

    Из 2021... А что в 2017 году сайты на таблицах и флоатах ещё делали?!

  • @user-ut4hj7kc1t
    @user-ut4hj7kc1t6 жыл бұрын

    Мне кажется на 28-й секунде можно было бы закончить XD

  • @besuhoff
    @besuhoff6 жыл бұрын

    У нас с ребятами вопрос назрел, как раз для шортов. Как подружить нативный функционал лейбла на форме с симпатичным чекбоксом? Симпатичные чекбоксы обычно верстают через , а не вложенностью, чтобы использовать + селектор без джс-костылей, но ведь придумывать айди к каждому чекбоксу ужасно!

  • @PoroLLIo4eG

    @PoroLLIo4eG

    6 жыл бұрын

    Sergiy Pereverziev делай вложенные, а вместо + используйте ~ Элементарно же, ну

  • @HTMLAcademyTV

    @HTMLAcademyTV

    6 жыл бұрын

    Спасибо за вопрос

  • @besuhoff

    @besuhoff

    6 жыл бұрын

    интересно, как ~ мне поможет с вложенными

  • @PoroLLIo4eG

    @PoroLLIo4eG

    6 жыл бұрын

    воу, я чет написал не подумав. Конечно же > а не ~

  • @PoroLLIo4eG

    @PoroLLIo4eG

    6 жыл бұрын

    я просто не пойму в чем проблема со вложенностью? Делается по тому же принципу, только выбирается не первый правый сосед, а дочерний элемент. А дальше все так же, before и after

  • @wswebus922
    @wswebus9226 жыл бұрын

    Спасибо за видео! А значит ли это что теперь можно писать собственные таблицы на флексах, не используя ? =] Или это очередное использование технологии не по назначению? :) П.С. Зелёная плашка в конце видео не выровнена по центру cl.ly/1R3Z0H301V3n ¯\_(ツ)_/¯

  • @pepelsbey

    @pepelsbey

    6 жыл бұрын

    У , как и других семантических элементов, есть много полезных встроенных механизмов, включая доступность. Имитировать таблицы стоит только если у вас совсем нет выбора.

  • @Anttoshka47

    @Anttoshka47

    6 жыл бұрын

    На флексах нужно делать если блок напоминает таблицу. Если же это настоящая таблица, то зачем лишнее делать?

  • @vyrdik87
    @vyrdik876 жыл бұрын

    Почему академию переводете на флекс, а не на грид? Еще рано?

  • @pepelsbey

    @pepelsbey

    6 жыл бұрын

    Новыйх гридов не будет в IE11, а доля у него приличная, так что рановато переводить на них интенсивы. Но курсы по гридам делать конечно будем.

  • @user-zr8oq8zy5j
    @user-zr8oq8zy5j6 жыл бұрын

    Спасибо за шорты) Но ооочень странное впечатление, как будто все живое вырезали и оставили робота правильно говорить. В подкасте гораздо лучше без всякой этой постановочной мишуры.

  • @user-ut4hj7kc1t
    @user-ut4hj7kc1t6 жыл бұрын

    Стоит один дизлайк... хм... видимо Алексей тоже посмотрел это видео )))

  • @danil_pugovkin
    @danil_pugovkin5 жыл бұрын

    Веб жив?

  • @danil_pugovkin

    @danil_pugovkin

    5 жыл бұрын

    @Melorum XZ нормальный вопрос, лебедев говорит веб мертв, фэйсбук говорит все съел

  • @kosxp
    @kosxp6 жыл бұрын

    Что значит не делают? weacom.ru/

  • @beholderrk
    @beholderrk6 жыл бұрын

    а вот такой вопрос. Куда лучше ставить свойство transition, на класс или на его hover?

  • @kksss53
    @kksss534 жыл бұрын

    моргни пожалуйста..

  • @serufim
    @serufim6 жыл бұрын

    Терпеть не могу float'ы но иногда надо чтоб была поддержка ie9. А так для верстки админки самое то

  • @DmitrijBolshakov

    @DmitrijBolshakov

    6 жыл бұрын

    Поддержка flexbox в мире 97.59%, а в России всего 84.13% (согласно caniuse.com/#search=flexbox). Так что остается использовать float в России. Пока что!

  • @user-nf8gm7wx1i
    @user-nf8gm7wx1i6 жыл бұрын

    Первый что-ли)

  • @dorzlatan
    @dorzlatan5 жыл бұрын

    Си эс эс, а не цэ эс эс

  • @pepelsbey

    @pepelsbey

    5 жыл бұрын

    Dorian Zlatan нет. (поддерживаю уровень аргументации)

  • @dorzlatan

    @dorzlatan

    5 жыл бұрын

    @@pepelsbey потому что это английский термен! Буквы читаютьса на английском как СИ ЭС ЭС! А не какой то там ЦЭ!

  • @pepelsbey

    @pepelsbey

    5 жыл бұрын

    Dorian Zlatan а скажите мне как правильно произносить тег и свойство border и margin тогда. Транслитерируйте по-русски. Наверняка вы скажете аудио, бордер и марджин. Только они читаются как одио, бодэ и маджин. Что же делать? А я вам скажу: не говорить другим как говорить правильно :) Меня в школе на геометрии научили, что ABC - это а-бэ-цэ. А у некоторых в школе немецкий и для них тем более а-бэ-цэ. Есть наречия, есть вариации нормы, есть разные произношения.

  • @DmitrijBolshakov
    @DmitrijBolshakov6 жыл бұрын

    Поддержка flexbox в мире 97.59%, а в России всего 84.13% (согласно caniuse.com/#search=flexbox). Так что остается использовать float в России

  • @vorobiovk
    @vorobiovk6 жыл бұрын

    Вадим, большая просьба, не говорите "цсс", есть только СSS

  • @mikemerezhko

    @mikemerezhko

    6 жыл бұрын

    А как правильно?

  • @user-tt1vn2go1w

    @user-tt1vn2go1w

    6 жыл бұрын

    сиэсэс, если не ошибаюсь

  • @pepelsbey

    @pepelsbey

    6 жыл бұрын

    Кирилл Воробьев в русском есть устоявшаяся традиция называть английскую «си» на немецкий манер цэ, а эйч как аш и так далее. Вас же в школе на геометрии учили, что у треугольника а-бэ-цэ, а не ай-би-си, правда? Поэтому продолжу, а вы будьте терпимее - это самое распространённое произношение, насколько я слышу.

  • @vorobiovk

    @vorobiovk

    6 жыл бұрын

    Vadim Makeev традиции это одно, а правильное произношение это уже другое, я не знаю как у вас там в школе учили, но на немецкий манер, английский на русский не переводят. Вы же не говорите, я надеюсь, яваскрипт потому как есть только джаваскрипт и есть пайтон а не питон (но это ладно, опустим) А еще мне интересно как вы произносите SCSS ? тоже как сцеэсес ?. Насколько я слышу то то произносят сиєсєс и это правильно.

  • @user-sy4wc5qt4e

    @user-sy4wc5qt4e

    6 жыл бұрын

    У переводчиков есть два подхода к переводу: транскрипция и транслитерация. При транскрипции стараются сохранить звучание иностранного языка, при транслитерации просто переводят по буквам. Оба подхода используются, оба подхода хороши. Так что понятия "правильно" здесь просто нет.