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

«Сайты не должны выглядеть одинаково во всех браузерах» - главная мысль выпуска! Когда это до всех дойдёт?!

@panicjan

6 жыл бұрын

Боюсь, что никогда … :,(

@artempolukarov6155

6 жыл бұрын

Последний раз слышал про пиксел перфект года полтора назад, даже фриланс подопустило от это херни

"Усложнять простое проще, чем упрощать сложное" -- це генiально!

Вадим, ты крутой!

"Пиксель-перфект - это попасть в сетку и в горизонтальные размеры блоков, то у вас есть шанс" Это шедеврально !!!!

Бомбезный формат. Автор спасибо!

Спасибо, Вадим! Всегда интересно и по делу!)

Мало что поняла, но главную мысль вроде ухватила.Спасибо. Ведущий Огонь! :)))

Очень толково!

Блестяще!

Расскажите пожалуйста об conditional comments вроде:

Лайк и подписка за детали и полезность

Расскажи про will-change в каких случаях его лучше использовать, и про оптимизацию как таковую.

Жаль, что закрыли эту рубрику

Вадим, расскажите в каких относительных размерах задавать padding: в % или rem? а margin? Что лучше для резиновости? (вопрос стоит только в рамках % и rem)

Спасибо теска)))

Вадим, а можешь рассказать про организацию html и css? Например, большинство верстальщиков обнуляют стили в своих css файлах, затем пишут правила для заголовков, дальше хедер, футер и т.д. Разбиваешь ли ты файлы стилей (думаю, да). Можешь рассказать об этом подробнее?

смотрю на замедленном воспроизведении капец, обычно наоборот бывает)

А что насчет разных разрешений экранов в мониторах одного размера? Не могу найти информацию про это. К примеру 100 пикселей же будут визуально меньше на fullhd в сравнении со ста пикселями на hd экране, если размеры мониторов одинаковые. Это в верстке как-то учитывается?

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

Макеев, подскажи или объясни. В каком плане = bem - это не просто договоренности? Bem помогает создавать страницу адаптивной без media запросов, как это?

ВОПРОС. Почему Firefox так плохо поддерживает 3D анимации (WebGl и в частности ThreeJS) почему падает FPS и как с этим бороться?

ВОПРОС. Стоит ли пытаться угодить всем? Например есть ли смысл адаптировать сайт под какие-нибудь неизвестные китайские телефоны со встроенными в них неизвестными китайскими браузерами? И где эта черта? Что обязательно на ваш взгляд, а что опционально?

О***нное видео! Спасибо вам!

Добрый день!Расскажите о future detection в верстке.

Вадим, напомните пожалуйста где вы покупаете футболки =)

Прекрасный путеводитель, чудесная история очень интересно и здорово. Вадим , у меня, у новичка один единственный вопрос - почему люди имеющие кучу опыта в верстке и разработке , уделяют инструментам по устранению проблем в браузерах, 1 слово за весь выпуск а именно "префиксы" , я больше ни чего из этого видео полезного не вынес . Первый раз пишу комментарий такого тона , от непонимания соотношений опыта и конечного результата в виде баллад о движках. Вы говорите о пожеланиях в коменты , вот мои : -Рассказывайте нам новичкам о инструментах для решения проблем, а не о том о чем вы холиварите на элитных автопартях ("сайты не должны выглядеть одинаково" и бла бла бла - какая к черту разница если это в конечном счете всё равно индивидуально ), я рассчитывал открыть видео и увидеть на что сейчас актуально обратить внимание, с чем познакомиться , что научиться использовать а тут чудесная байка. -Расскажите нам новичкам про стандарты Js , я учу js что мне нужно знать о стандартах какой учить, что актуально чем отличается и т.д . Буду очень благодарен.

@wrGraff1

6 жыл бұрын

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

@user-in4oc2py6b

6 жыл бұрын

Полностью с вами согласен , префиксы не решают всех проблем , но какое то количество -да. Байка про движки же не решает ни каких проблем , кроме необходимости счастья от написании байки про движки. Полная картина же заключена в самом термине "Кроссбраузерность" , картина понятна а вот как раз как нам с этим жить не понятно из ролика , и уж тем более как с этим справится. Я просто оставил пожелание , не утверждая к слову что префиксы самое главное =) , согласитесь очень странно наблюдать информацию о конкретных инструментах , во втором эшелоне комментариев , а не одной из ссылок в описании , рядом с тулзами для предпросмотра (которые по словам автора не отражают реальности), холиварами и прочими чудесными заметками.

@pepelsbey

6 жыл бұрын

Олег, эти видео не заменяют учебный курс. У нас для этого есть интенсивы - htmlacademy.ru/intensive Мы здесь стараемся очень точечно ответить на частые или просто важные вопросы, которые нам задают. Мы, безусловно, сами выбираем на какие отвечать - такие, которые считаем достаточно интересными.

@user-in4oc2py6b

6 жыл бұрын

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

@pepelsbey

6 жыл бұрын

Олег Иванович можно ведь и про префиксы выпуск записать ;)

Моё мнение таково: сайты не должны выглядеть одинаково в разных браузерах, но обязаны быть компактными лёгкими и удобными во всех браузерах. И жрать как можно меньше трафика. Вот например сейчас я в Opere сохранил вот эту самую страницу youtube, и она весит 2 с лишним мегабайта (не считая картиночек)!!! Если бы я до сих пор сидел на EDGE (2G), эта страница грузилась бы таааааааак долго.

С каждым разом паузы между репликами всё заметнее (

Вот на сайте академии, когда проходишь курсы, футер на мониторе 4к висит над нижней границей экрана. Нужно ли что-то делать с такими ситуациями, например, устанавливать min-height: 100vh (или calc(100vh - футер и хедер)) для контента или и так сойдет?

@HTMLAcademyTV

6 жыл бұрын

Тут всё зависит от дизайна и содержания страницы. Когда содержание текстовое и его много, таких проблем не возникает. Но если интерфейс более сложный, как в наших курсах, то резиновость по высоте будет не лишней. Мы добавили такую резиновость в обновлённом интерфейсе курсов, который сейчас используется в курсах по JS. Можете сами посмотреть, как он себя ведёт. Правда, там у резиновой высоты есть минимальные и максимальные значения.

@artemeesenin9552

6 жыл бұрын

Огромное спасибо за ответ! :)

Ты где пропал?

Как правильно добавлять изображения на сайт? С помощью img или с помощью свойства background для div'a, например?

@ruslanshikhaliev9341

6 жыл бұрын

Через img ,если это контент и bg ,если это декорация. (в большинстве случаев так).

дойдет что html... должен быть везде одинаково) а привычки....пофигу) А то жопа будет полная!!!!

Эх! Стоило бы про автопрефиксеры упомянуть.

Я скинул, конечно же, это видео тестировщикам и некоторым заказчикам, но, думаю, им нет дела до всего этого - надо, чтобы было красиво везде. Ты сверстать это, что ли, не можешь? Пф...

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

@HTMLAcademyTV

6 жыл бұрын

Не забросили, обновляли кое-чего.

Так ты раскроешь секрет, где ты берешь эти майки ?

«Сайты не должны выглядеть одинаково во всех браузерах» - только, как мне помнится, пиксель-перфект в критериях в академии :)

@HTMLAcademyTV

6 жыл бұрын

У нас есть критерий про соответствие макету с достаточно большими допусками (5px по вертикали и 2px по горизонтали внутри блока). Это очень далеко от пиксельпёрфекта.

Вадим, мы с другом начали спорить, о том какой из селекторов быстрее для браузера. Друг утверждает, что селекторы типа: ".nav-list .nav-item a", быстрее чем "nav__link", т.е селектор из трёх элементов против одиночного селектора, какой из них будет быстрее?

@mdevils1

5 жыл бұрын

В силу специфики работы CSS-движка селектор ".nav__link" гораздо быстрее селектора ".nav-list .nav-item a". В случае селектора ".nav__link" браузер обратиться к индексу по классам, который он заблаговременно выстроил и извлечет оттуда напрямую все элементы, которые соответствуют этому CSS-классу без обращения к DOM-дереву. В случае селектора ".nav-list .nav-item a" браузер сначала соберет все элементы "A", а потом будет фильтровать их по признаку наличия одного из родительских элементов с классом ".nav-item", а потом оставшиеся будет фильтровать по признаку наличия у соответственных ".nav-item" одного из родителей с классом ".nav-list".

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

@StyledJavaScript

6 жыл бұрын

Вадим сразу два способа предложил, или на устройстве пальцем, или сервисы вроде BrowserStack.

ВОПРОС. Как правильно тестировать сайт на предмет кроссплатформенности? неужели нужно покупать все модели телефонов и планшетов?

@SK-lx1zd

6 жыл бұрын

Есть эмуляторы. С помощью них и тестить.

лоооол, вы так похожи на Ходорковского)

Футболка уже была!

Всем привет! Вопрос на засыпку ) Мне пока, что никто толком не сказал ответа. Есть множество сайтов, где ссылки сделаны с эффектом transition. Я специально сделал пустую страницу, где всего лишь одна ссылка с эффектом transition, вот она: ambientfeel.com/test2/index.html , если обновлять страницу (CTRL+F5) либо открывать в новой вкладке, то можно увидеть мерцание - переход от синего цвета до заданного мною цвета в стилях, белого. Это наблюдается только в хроме. Я задавал вопрос владельцам сайтов, у которых есть в меню допустим транзишоны у ссылок, но никакого мерцания нет, и самое интересное, что они сами не могли понять, почему его нет у них на сайте, хотя сделано всё тоже самое, ссылка с эффектом transition. В интернете очень мало инфы про этот баг, но мне больше интересно, неужели люди делают сайты и непроизвольно, непонятным для себя образом решают эту проблему. У кого какие догадки? )

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

@HTMLAcademyTV

2 ай бұрын

Уметь разрабатывать проекты под разные версии браузеров. А уж какие версии компания для себя считает важным, в каждом случае будет разное.

Ребят, куда пропали шорты?

@HTMLAcademyTV

6 жыл бұрын

Не пропали, пока в отпуске. Ждём потепления - будут шорты!

Шортов больше не завезут?

@HTMLAcademyTV

6 жыл бұрын

Завезут второй сезон, нужно немного подождать. Уже почти нужная температура.

ВОПРОС. как тестировать сайт на Сафари если нет макбука?

@doszh9899

5 жыл бұрын

Скачай вм и установи мак ос. Или торрентах есть уже установленными мак ОС с виртуальной машинами.

Вот откуда новые баги в хроме на айфонах.

У фанатов CSS3 есть боевой клич: "Веб-сайты не должны выглядеть абсолютно одинаково на всех браузерах". dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

На слух плохо ложиться инфа....

@HTMLAcademyTV

6 жыл бұрын

Есть текстовая версия - htmlacademy.ru/shorts/21

Если можно, то чу-чуть по медленее

BrowserStack - самый бесполезный инструмент для тестирования iOS. Сколько раз уже было - тестировщики проверяют сайт в BrowserStack под какой-нить ретина Ipad и рапортуют об обнаруженном баге. Часто это касается поворота устройства - содержимое не перестраивается на всю ширину. Или проблемы с брекпойнтами... Все это проблемы с масштабированием в BrowserStack. Физически разрешение машины, на котором идет процесс тестирования меньше разрешения эмулируемого устройства. Отсюда и все эти траблы. Стоит протестировать на реальном планшете - всех этих багов нет.

Вадим, как победить Google PageSpeed Tools на 100/100

Самый нормальный браузер Netscape до сих пор пользуюсь

Я заметил, что на каждом видосе по 2% дислайков

Всё? Шорты мертвы?

@HTMLAcademyTV

6 жыл бұрын

Нет, работаем над улучшением.

а как же Амиго и Тор?

@dimap.7298

6 жыл бұрын

амиго тоже хромиум, а тор просто фаирфокс без хистори и прочих следов на компе.

@WhiteBriar

6 жыл бұрын

А как же браузер Gavno от фирмы Рога и Копыта?

Сумбур. История вперемешку с чем-то... Что-то с чем-то. Нет визуализации - кто-то в кадре быстро говорит. О технологиях почти ноль. За что-то тут лайк?

@NazironX

4 жыл бұрын

Полезной информации процентов 20 на всё видео.

опять этот тормоз все теорию говорит.ты практику говори

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

@HTMLAcademyTV

3 жыл бұрын

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

Тааак неинтересно преподнесено...