Меню для меню, гриды или Бутстрап, целесообразность удобства

Поделиться
HTML-код
  • Опубликовано: 25 ноя 2024

Комментарии • 103

  • @pepelsbey
    @pepelsbey  6 лет назад +11

    00:17 Меню для меню
    08:08 Гриды или Бутстрап
    11:49 Целесообразность удобства

  • @pavelarseyev452
    @pavelarseyev452 6 лет назад +71

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

  • @demven04
    @demven04 6 лет назад +4

    За мысль о том, что нужно сразу делать максимально хорошо и считать доступность как один из стандартов качества - поставил бы десять лайков если бы можно было)

  • @shaukote
    @shaukote 5 лет назад +2

    Тот случай, когда одного лайка недостаточно. :) Материал о том "как сделать" - хорошо, материал о том, "почему делать именно так" - бесценно.

  • @druidushkadruid7569
    @druidushkadruid7569 3 года назад

    Твои слова да босу в уши..!

  • @ОтецФёдоръ
    @ОтецФёдоръ 6 лет назад +12

    Кебаб-меню - это божественно))) Гриды или Бутстрап? Див или Кебаб?)) Спасибо за видео, Вадим!

  • @a.d.3019
    @a.d.3019 5 лет назад +2

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

  • @sobchenyuk
    @sobchenyuk 5 лет назад +1

    Крутые ролики. Как по мне сетка лучшая у балмы

  • @getmanele
    @getmanele 6 лет назад +3

    Ушёл учить cssGrid 🥰 и как обычно спасибо за полезное видео! 👏👏👏👏👏

  • @MrSergey11
    @MrSergey11 6 лет назад +4

    Вадим, как всегда очень доступно и интересно! Спасибо вам за вашу работу! Ждем новых видео.

  • @Nerossoul
    @Nerossoul 5 лет назад +1

    Молодцом. Прям приятно посмотреть. Качество на высоте.

  • @hoqpe
    @hoqpe 6 лет назад +3

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

  • @andrew.piasetskyi
    @andrew.piasetskyi 6 лет назад +5

    Отличный выпуск! И хотелось бы побольше практических юзкейсов в видео, непосредственно кода. К примеру, реализации форм регистрации/авторизации от Вадима и т.п.

  • @AliaksandrRutkevich
    @AliaksandrRutkevich 6 лет назад +1

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

  • @yuribeliakov13
    @yuribeliakov13 6 лет назад +4

    Спасибо за подробный разбор тега menu. Обещаю не использовать его для навигации. )

  • @maksimgrudin1234
    @maksimgrudin1234 6 лет назад +2

    Спасибо за отличное видео. Хотелось бы побольше о плюсах и минусах бутстрапа услышать. О случаях, когда без него ну совсем никак нельзя. И возможно о сравнении его с другими CSS фреймворками.

  • @GlebKrishin
    @GlebKrishin 6 лет назад +14

    Вадим, если вы затронули тему гридов, то не могли бы вы рассказать про то, что могут гриды , кроме того чтобы сделать сетку и распределить контент по ней

  • @cocochen8349
    @cocochen8349 5 лет назад

    Красавчик. Еще и говорит складно

  • @vladprodan2379
    @vladprodan2379 6 лет назад +12

    Нужен специальный чек-лист по доступности!

    • @maksimgrudin1234
      @maksimgrudin1234 6 лет назад +3

      moritzgiessmann.de/accessibility-cheatsheet/ Вот есть один. На мой взгляд не достаточный, но не плохой.

  • @jdw7577
    @jdw7577 5 лет назад

    Сам себе всегда задавал вопрос, а зачем (часто выигрывала лень).
    Это видео ооочень круто мотивирует, спасибо :)

  • @loginov2030
    @loginov2030 6 лет назад +3

    Вадим, я только что осознал что значит быть Веб евангелистом ))

  • @sukhomozgii
    @sukhomozgii 5 лет назад +1

    Вадим, все как всегда по делу! Привет из JetRockets %)

  • @overstrides
    @overstrides 6 лет назад +1

    Спасибо, отличное видео

  • @dmitrijponkin
    @dmitrijponkin 6 лет назад +1

    Круто! Спасибо))

  • @Alex-ni2uv
    @Alex-ni2uv 6 лет назад +2

    супер, Вадим

  • @zatochiSiberian
    @zatochiSiberian 5 лет назад

    Большое спасибо!

  • @martDKNY
    @martDKNY 6 лет назад +1

    Вадим, это очень хорошо. А еще я вам svg'шку сделал, но запутался с оформлением, попозже пришлю.

  • @cheekymescalito3249
    @cheekymescalito3249 6 лет назад +28

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

  • @klu2596
    @klu2596 6 лет назад

    Как же я вас обожаю))

  • @kondakov90
    @kondakov90 6 лет назад +24

    Вы под каждый выпуск клевую футболку покупаете? )

    • @pepelsbey
      @pepelsbey  6 лет назад +13

      Нет, пока есть архив на полгода вперёд. Потом будут повторы )

    • @АндрейП-с9о
      @АндрейП-с9о 6 лет назад +5

      +Vadim Makeev Потом спонсора футболок найдете жеж 😎

  • @sashasagan2510
    @sashasagan2510 6 лет назад +7

    Привет Вадим, в каком состоянии лучше находиться навигациии, до того, как пользователь нажал на гамбургер? display: none; .visibility-hidden или еще где?

  • @alenache1
    @alenache1 3 года назад

    лишки получают маркер от браузера всегда - независимо от того, вложены они в меню или в ул или ол или никуда не вложены

  • @zx3796
    @zx3796 5 лет назад

    11:00 нужны бенчмарки производительности и потребления памяти. Сам не верстальщик, но люблю быстрые сайты.

  • @БарсуковСергей-ж1к
    @БарсуковСергей-ж1к 6 лет назад +1

    Привет! Хорошо бы делать перебивки между вопросами, а то сейчас слишком резкие переходы. Например как в подкасте.

    • @pepelsbey
      @pepelsbey  6 лет назад +2

      Будут перебивки, пока рисую графику и джинглы

  • @pupizoid100
    @pupizoid100 Год назад

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

  • @ulibkaify
    @ulibkaify 3 года назад

    Вадим, скажите пожалуйста - сейчас в 2021 году, по Вашему мнению - есть ли какое то ограничение по использованию grid ?
    Поддержка grid стала практически повсеместной (конечно за исключением IE).
    Нужен ли bootstrap в 2021 году ?

    • @pepelsbey
      @pepelsbey  3 года назад +1

      Bootstrap так популярен не только из-за сеток и гриды вполне нормальная технология, если вы можете себе позволить отказаться от IE11. Даже Яндекс недавно перевёл IE11 на упрощённую версию поисковой выдачи, думаю и вам можно :)

  • @annasukhoparova565
    @annasukhoparova565 6 лет назад

    за "Целесообразность удобства" огромнейший 👍! Только вот иногда возникает дилемма, когда проект начинал делать кто-то другой: переделывать ли всё по-нормальному или забить и уложиться в сроки заказчика. Для себя пока решила, что переделывать постепенно, точечно... Иначе иногда душа болит от уже имеющегося кода)))

  • @MrYurgens
    @MrYurgens 6 лет назад +2

    16:49 А почему не прятать outline у интерактивных элементов? Всегда так они не нравятся визуально в макетах, что всегда хочется их скрыть сразу же, без них аккуратнее ))

    • @pepelsbey
      @pepelsbey  6 лет назад +4

      Потому, что не видно где фокус. И интерфейс становится недоступен с клавиатуры. Смотрите моё видео про это: ruclips.net/video/eh-yMJzZUJ4/видео.html

  • @angrybeaver3425
    @angrybeaver3425 4 года назад +1

    Вадим, подскажите, пожалуйста, где можно почитать или посмотреть про правильную работу с mobile first. Как правильно писать код и подключать файлы? Какой Профит от этого?

    • @pepelsbey
      @pepelsbey  4 года назад

      Почитайте на Смэшинге duckduckgo.com/?t=ffab&q=mobile+first+site%3Asmashingmagazine.com&ia=web

    • @angrybeaver3425
      @angrybeaver3425 4 года назад

      @@pepelsbey спасибо! Видел Вы будете выступать на KharkivCss 2020, а какая будет тема?

  • @terehovsergej
    @terehovsergej 4 года назад

    Спасибо за видео! Всегда узнаю какие-то полезные вещи из них!
    Есть вопрос, по поводу иконок.
    Не раз в твоих видео (в этом, например, или с конференции) слышу что для иконок использовать не лучший вариант. А почему? И что лучше, по твоему мнению? , или что-то другое?
    Я имею в виду иконки типа таких share.getcloudapp.com/xQuDZbpJ , например, или часто в контактах бывает (share.getcloudapp.com/QwulYEGg), или что-то такое share.getcloudapp.com/WnubdYbX. Про использование формата самих иконок (svg инлайн / svg через / png / иконочный шрифт) - тут понятно, зависит от ситуации. А вот вопрос именно про тег, какой лучше?:) Речь только о доступности, я правильно понимаю?
    Продублировал вопрос на почту на всякий случай.
    Спасибо!

    • @pepelsbey
      @pepelsbey  4 года назад +1

      Всё очень просто. Например, в JS принято называть переменные camelCase, использовать встроенные методы, писать понятный код и следовать правилам языка и лучшим практикам. И это мало у кого вызывает вопросы, даже если эти лучшие практики не оказывают никакого влияния на работу приложения. В HTML тоже есть правила использования тегов, они описаны в спецификации HTML и помогают: авторам кода понять друг друга, пользователям и их агентам (браузерам, поисковикам, скринридерам) однозначно понимать и воспроизводить интерфейс и контент. У тега есть вполне понятная роль, описанная в спецификации, поэтому для иконок нужно использовать что-то другое.

    • @pepelsbey
      @pepelsbey  4 года назад +1

      Эксперимент с почтой не удался, поэтому лучше все вопросы задавать прямо здесь.

  • @THEGhost902
    @THEGhost902 6 лет назад

    у вас резонанс в звуке на 463х герцах, лечится эквалайзером, узкой полосой убираете пару децибел (что бы его лучше услышать, можете такой же полосой приподнять)

    • @pepelsbey
      @pepelsbey  6 лет назад

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

  • @skeelo3157
    @skeelo3157 5 лет назад

    Обязательно ли вкладывать ul/ol в nav?

    • @pepelsbey
      @pepelsbey  5 лет назад

      Это вопрос, за которым виднеется какой-то контекст, без которого не ответить. Nav - это навигация, ul и ol - это списки. Ничего обязательного в такой вложенности нет, всё зависит от интерфейса, который вы создаёте. Когда-то списки могут пригодиться, когда-то можно без них обойтись.

  • @user-ir5zd2jy9e
    @user-ir5zd2jy9e 6 лет назад

    ... бутстрап шагает...эхх..
    Имхо его только для админ панелей лучше применять..

  • @UserSo4reUsu75ry
    @UserSo4reUsu75ry 6 лет назад +1

    расскажите как лучше писать медиа запросы:
    1) в отдельном файле для ВСЕХ медиа запросов ?
    2) внизу файла стилей конкретной секции/блока ?
    3) под стилем конкретного блока/элемента ?

    • @MrYurgens
      @MrYurgens 6 лет назад

      Их можно писать где угодно и как вам удобно, а сборщик типа Gulp сможет вам их собрать куда захотите: либо в отдельный файл, либо либо под каждым блоком либо в конце файла.

    • @artemsapegin
      @artemsapegin 6 лет назад +2

      Имеет смысл держать их рядом с компонентом, чтобы можно было импортировать в проект вместе с компонетном, и можно было удалить весь компонент, и не оставалось никаких хвостов.
      Как-то так:
      .foo {
      color: var(--colors--base);
      font-size: var(--fontSizes--small);
      @media (min-width: 55em) {
      font-size: var(--fontSizes--medium);
      }
      }
      (Это всё при условии, что компонент настолько уникален, что ему вообще нужны свои стили.)

    • @WapSter92
      @WapSter92 5 лет назад

      Использовать webpack, и пишите как хотите

  • @pekarskiy_nikolai
    @pekarskiy_nikolai 6 лет назад

    Если диву пустой элемент, мы даём role="menu" и его нормально воспринимает скринридер и можно передать какие-то значения. Тег menu, как выяснили тоже пустой, так вот если сделать так то роль явно будет задана и скринридер должен увидеть его. Можно ли так его использовать, ведь для восприятия этот тег логичней?

    • @pepelsbey
      @pepelsbey  6 лет назад +1

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

    • @pekarskiy_nikolai
      @pekarskiy_nikolai 6 лет назад

      @@pepelsbey Спасибо за разъяснение!

  • @UserSo4reUsu75ry
    @UserSo4reUsu75ry 6 лет назад

    расскажите стоит ли вообще использовать вложенность стилей ?
    Во многих примерах код написан вложенными стилями (scss/sass),
    но в то же самое время в телеграме встречал мнение, что такое оформление неудобно по разным критериям. Меня самого смущает &-hell, когда начальный селектор находится высоко вверху и не понятно кому принадлежат все эти &.

    • @TsA1ex
      @TsA1ex 6 лет назад +3

      &-hell это не вложенность, это дополнение имени селектора, чтобы каждый раз префикс не писать. Если у вас короткие префиксы или вам не лень их каждый раз набирать, то пишите полностью. & удобно использовать вместе с БЭМ, где длинные имена классов

    • @artemsapegin
      @artemsapegin 6 лет назад

      Обычно имя компонента (класса) очевидно по имени файла. Один файл - один компонент.

  • @АндрейП-с9о
    @АндрейП-с9о 6 лет назад +2

    Использовать нестандартизированные тэги (как и пренебрегать проверками поддержки браузером того или иного "псевдо" тэга) ну такое, конечно, занятие. P.s. Бутстрап захватил мир и сопротивляться все сложнее и сложнее 😄 Недавно нашел ваш канал, приятно смотреть и слушать.

    • @Богдан-р4ы1э
      @Богдан-р4ы1э 6 лет назад

      фреймворки как-бы сейчас рулят, и не всегда в связке с ими для построения идет бутстррап, например для Vue намного популярней Vuetify. Поэтому эра бутстрап уже идет к закату, но хоронить его рано, много легаси.

  • @gorodiskiy4
    @gorodiskiy4 6 лет назад

    Возможно глупый вопрос, но все же.
    Отличие навигации от меню ?
    есть role="navigation" и role="menu"
    когда что использовать ? я так понимаю что nav.role="navigation">ul.role="menu">li.menuitem ?
    а если у меня в проекте просто див внутри которого ссылки, это навигацию или же меню ? запутался)

    • @pepelsbey
      @pepelsbey  6 лет назад +1

      Я раза три повторил в видео :) Если у вас меню, выполняющее команды, типа контекстного меню в ОС или выпадающего меню типа File - это тру-меню. Всё остальное - навигация (если ссылки) или просто список, если ресторанное. Если ещё проще: забудьте про роли, используйте теги. Полезного тега не существует. Когда вам на самом деле понадобятся роли - вы узнаете.

  • @loginov2030
    @loginov2030 6 лет назад

    Я всё понимаю....но почему цвет ремешка для часов #81c784?

    • @pepelsbey
      @pepelsbey  6 лет назад +2

      Под цвет моего велосипеда :) instagram.com/p/Bl3HAFnA7dF/

    • @loginov2030
      @loginov2030 6 лет назад

      @@pepelsbey Я должен был догадаться! ))

  • @toneyf
    @toneyf 6 лет назад

    Кто-то ещё верстает в новых проектах используя буцтрап в 2018? :D

    • @WapSter92
      @WapSter92 5 лет назад

      Не использую с 2015

  • @MONEY_AKIMOV
    @MONEY_AKIMOV 6 лет назад

    А почему нельзя тегу меню задать роль "меню"?
    ???

    • @pepelsbey
      @pepelsbey  6 лет назад +1

      Можно, но зачем?

    • @MONEY_AKIMOV
      @MONEY_AKIMOV 6 лет назад

      ИМХО такой код приятнее читать :)

    • @pepelsbey
      @pepelsbey  5 лет назад +1

      Главное используйте его для настоящего меню, а не каждого навигационного списка со ссылками. И как именно - ваше дело :)

  • @DeanRie
    @DeanRie 6 лет назад +1

    Вадим, где футболку с твитботом взял?)

    • @pepelsbey
      @pepelsbey  6 лет назад +1

      Они иногда на Cotton Bureau делают кампании со своими футболками cottonbureau.com/products/tweetbot

  • @pctea
    @pctea 6 лет назад

    skillbox.ru/ разбери этот сайт, пожалуйста. Вроде бы онлайн-университет для IT хороший, но почему-то очень виснет.

  • @dahamyr
    @dahamyr 6 лет назад +2

    Бутстрап или Foundation?

  • @ismailalekperov6283
    @ismailalekperov6283 6 лет назад +1

    Я юзаю пробелы вместо табов.

    • @pepelsbey
      @pepelsbey  6 лет назад +14

      Удобно: можно за каждый пробел больше денег брать, а за табы вышло бы в 2-4 раза дешевле :)

    • @TsA1ex
      @TsA1ex 6 лет назад +1

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

    • @kar1kam1
      @kar1kam1 6 лет назад

      @@pepelsbey как я понял, к табам претензия что в разных система/редакторах они эквивалентны разному количеству пробелов, или я не так понял?

  • @Otshelnik-Fm
    @Otshelnik-Fm 6 лет назад

    Правило 20/80 - если 20 процентов доступности будет требовать 80% времени - зачем оно надо?
    Нет доступности (aria) - если нет этого в т.з. то и не надо его внедрять. Вы можете на альтруизме погореть внедрив поверхностно. Потом заказчик будет бесплатно требовать довести все до нормального вида. Ведь что-то вы уже сделали? А почему же вы это не протестировали и не довели до конца?
    Так что тут с Вадимом не соглашусь. Доступность имеет кучу подводных камней и без упоминания в т.з. если вы часть его сделает по той причине что вы "хороший разработчик" - записывайте себе это в бесплатное тестирование и поддержку. Может тогда и внедрение всей спецификации schema.org делать? Даже если заказчик этого не просил? Нет ребята - эти пункты должны быть в т.з. или отдельно оплачены потом.

    • @pepelsbey
      @pepelsbey  6 лет назад

      Если разработчики просто не будут мешать доступности интерфейсов - это уже будет большой шаг. Про это я и говорю: отключение фокуса, пустые ссылки, пустые или отстутствующие альты, лейблы и заголовки. Про эту базовую доступность идёт речь. Просто выучите HTML, это полезно не только вам.

  • @juliazjochova4737
    @juliazjochova4737 6 лет назад +1

    Интересно, а когда нибудь наступит день когда в русском языке Цсс поменяется на Сисс и Аштмл на Эйчтмл? Почему в русском английские слова читаются по немецки? Это от человека, который 25 лет не живет в России и разработку выучил на английском. Я не критикую, просто странная вещь, согласитесь.

    • @pepelsbey
      @pepelsbey  6 лет назад

      Я когда-то тоже так делал: приходил к людям и объяснял как им говорить п р а в и л ь н о (то есть как я привык). А потом перестал. Отвечая на вопрос: когда-нибудь обязательно поменяется, только в неожиданную сторону. Язык не спрашивает «как правильно», язык делает «как удобно».

  • @dmitriymovchan6563
    @dmitriymovchan6563 5 лет назад +1

    Автор, ну ты насмешил )) Как бутстрап может перейти на грид? Грид - это замена бутстрапа.

    • @pepelsbey
      @pepelsbey  5 лет назад +2

      Поговорим через пару лет, когда выйдет следующая версия Бутстрапа.

    • @WapSter92
      @WapSter92 5 лет назад

      Флексы тоже замена бутстрапа, что мы теперь видим?

    • @РачилаАлександр
      @РачилаАлександр 4 года назад

      Вы сравниваете теплое с мягким. Гриды - свойства для построения макетов (сетки по сути), бутстрап же фреймворк для верстки интерфейсов. Да, там есть сетка, но бутсрап не только из-за сетки используется. Он актуален тогда, когда вам нужно быстро накидать какой-то прототип, интерфейс админ-панели например. А просто ради сетки тянуть целый фреймворк со стилями, которые вы нигде не используете нет смысла. Верстка на бутсрапе тоже то еще удовольствие, переопределение кучи стилей, копаться в конфиге и переопределять переменные... Да порой легче с нуля все написать. Лично для меня бутсрап оказался полезен на ранних этапах как наглядное пособие. Мне было интересно, как устроен тот или иной элемент, как работает сетка и т.д. Кстати, если посмотреть sass-исходники, то можно реально скомпилить только сетку + классы базового макета. Более того, начиная с четвертой версии это можно сделать еще проще. У вас уже есть готовый для компиляции файл bootstrap-grid.scss
      P. S. Прошло 1.5 года и судя по всему 5-ая версия останется на флексах, во всяком случае как я понял по v5.0.0-alpha1. Хотя все может быть.

  • @newyork4er
    @newyork4er 6 лет назад

    не Артикал, а Атикл

    • @pepelsbey
      @pepelsbey  6 лет назад

      Да что вы говорите! Не может быть. А какие ещё слова мне нужно говорить как вам нравится?

    • @newyork4er
      @newyork4er 6 лет назад

      @@pepelsbey к примеру не "ли", а "эл-ай", ведь это не русские слова. Ведь когда ты ведешь речь об "i", ты говоришь "ай".
      Но когда ты произносишь аббревиатуру ul, ты всё-таки делишь её на две буквы - вроде правильно, но снова нюанс - не "у", а "ю". Я уверен ты сам всё знаешь.
      Мне много чего может не нравится, но тут дело в том, что твое правильное произношение повышает грамотность тех кто тебя слушает. Хотя может это и не нужно.
      Кто считает, что не нужно?

    • @pepelsbey
      @pepelsbey  6 лет назад +2

      Руслан, у вас, к сожалению, очень максималистское понимание лингвистики. Оно очень далеко не то, что от научного, даже от реальности. Весь язык строится не на правильности, а на удобстве. И нам удобно, в случае английского и русского (достаточно разных языков), переключать фонетические контексты. То есть когда я говорю по-английски, я говорю: маджин, бодэ, твитэ, одио, инстагрэм. Когда по-русски: марджин, бордер, твиттер, аудио, инстраграм. В среднем, я предпочитаю сохранять правильное ударение и примерное произношение английских слов. Например, хайт, а не хейт - как говорит большинство, поскольку не знает некоторых правил чтения. Но когда речь идёт про неестественные для русского языка звуки, я не сомневаюсь ни секунды - слова русеют. И это удобно не только мне говорить, но и другим слушать. Послушайте как говорят по-русски те, кто давно переехал в англоязычные страны, в их речи прямо слышно: русский, русский, русский ENGLISH русский, русский ENGLISH русский. Я бы мог, вслед за вами, сказать «это неправильно», но нет, это просто сложно, неудобно и замедляет коммуникацию.

    • @newyork4er
      @newyork4er 6 лет назад

      Vadim Makeev я со всем согласен, но слово «ли» заставило тебя сказать list item - это баг, может не страшный не каждый этого заметит. Но, можешь считать меня человеком с ограниченными возможностями, особенности которого надо тоже учитывать при подготовки контента. Так учит Вадим Макеев из аштэмель академии)))) ✌🏼

    • @pepelsbey
      @pepelsbey  6 лет назад +1

      Вы человек с особенными требованиями и я предлагаю их вам умерить. На меня уже устроили охоту за ЦСС, а я всё продолжаю, гад такой, говорить как удобно :) Завязывайте с формализацией разговорного языка, он ей не подчиняется.

  • @HowManyShrimps-g7z
    @HowManyShrimps-g7z 6 лет назад

    bootstrap