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

Я человек простой:вижу новый выпуск HTML шортов-ставлю лайк

Футболки Вадима Макеева - мой личный сорт героина

кажется это был самый крутой выпуск

Много полезной информации,спасибо за новый выпуск.

спасибо, очень полезный видос. Хотелось бы серию про LocalStorage, sessionStorage и возможно еще какие то хранилища))

@HTMLAcademyTV

6 жыл бұрын

Спасибо, подумаем👌

Спасибо, Вадим! С удовольствием смотрю HTML шорты, но мне хотелось бы увидеть мастер класс, то есть как вы верстаете с использованием всех инструментов которыми вы пользуетесь: инструменты сборки, препроцессоры (или нет :) смотрел выступление "Мой ванильный CSS"), из одного такого видео мы бы почерпнули бы огромный опыт.

@mukhammadmaksudkhodzhaev8169

6 жыл бұрын

Спасибо за ссылку.

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

О, круто. Очень полезно!

Крутая футболка

Подскажите есть ли норм софт для генерации веб-шрифтов или лучше использовать онлайн сервисы? На Mac OS X я использую FontPrep, не знаю насколько хорош

Спасибо, Вадим! В сети есть много вариантов того, каким должен быть чек лист для проверки верстки перед передачей ее в продакшин или интеграцией, а какие вы выделяете основные поинты такого списка?

@HTMLAcademyTV

6 жыл бұрын

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

Здравствуй, уважаемая академия! Подскажи, зачем подключают несколько начертаний шрифта к стр. Почему нельзя указать начертание через font-weight и обойтись только одним подключенным начертанием(например: opensansregular)?

я слышал, что в каком то варианте стандарта html 5.xx типа можно шрифты подключать не в head , а внизу body, это деза или действительно можно?

Спасбо за такой удобный и нужный формат передач! Мой вопрос: как лучше всего сделать структуру файлов css стилей с @media запросами? 1. В одном файле основные стили, в другом все media запросы (получается беспорядок - стили от одного блока написаны в разных местах файла) 2. В одном файле основные стили, а к каждому media запросу свой файл стилей (уже более структурированно) 3. Писать все стили в одном файле, причем группировать стили одного блока и media запросы от этого же блока рядом (вроде визуально смотрится хорошо, но правильно ли?)

@HTMLAcademyTV

6 жыл бұрын

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

Вадим и компания, ответьте на следующий вопрос: как браузер распределяет приоритеты при загрузке файлов на страницу и как этим манипулировать?

@pepelsbey

6 жыл бұрын

Если быстро: для вас как раз статья вышла css-tricks.com/the-critical-request/ Но мы может ещё расскажем в Шортах.

@worddoc4322

6 жыл бұрын

Vadim Makeev да, как раз ее прочитал у моменту задания вопроса. Для тех, кто в танке, стараюсь)

Я тоже нифига не понял. Протараторил, с примерами было бы куда понятней

Поключил шрифт локально - но данный шрифт не рабоает с русскоязычным текстом (с киррилицей) что делать, как заставить шрифт работать и с русскими символами тоже?

Не пойму о каких проблемах с загрузкой шрифтов говорит товарищ? Десятилетиями пользуюсь интернетом и даже во времена, когда в интернет заходили по телефонной линии, и по карточкам, я не помню чтобы шрифты долго грузились. А сейчас, когда уже запускают 5G интернет разве проблема с загрузкой актуальна?

А такое вот подключение шрифтов достаточное, или надо что-то еще? @import url('fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

@forgettd

6 жыл бұрын

Не стоит использовать css-импорт, он блокирующий. Используйте link в html. И да, вам явно не нужно так много стилей. Сократите это количество до тех, что реально используются.

@pepelsbey

6 жыл бұрын

Андрей Францев откройте этот адрес отдельно в браузере и посмотрите, что там: тот же font-face, свой для каждого браузера, который его запрашивает. То есть FOIT и ничего нового.

Расскажите можно ли применить CSS к содержимому и как?

@HTMLAcademyTV

6 жыл бұрын

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

Как разобраться с fontfaceobserver? В консоли ошибка с промисом какая то.

@pavelkalinin201

6 жыл бұрын

Возможно у вас не указан обработчик на onRejected для load. Проверьте, что у вас 2 функции в then: font.load().then(function () { console.log('ok'); }, function() { console.log('error'); });

Хочу список книг на фоне! :)

@HTMLAcademyTV

6 жыл бұрын

🤔

@Jerry-ho8le

6 жыл бұрын

Осенью в подкасте вы говорили, а том что в августе должна выйти новая книга Эрик А. Мейер, в 79 выпуске снова о нем упоминали, поискав в интернете никакой информации о выходе книги не нашел (наверно плохо искал). Будет ли она? Если вы внесете вклад в ассортимент книг издательства Питер ну и др. очень будем благодарны(имхо)

не понимаю, почему поддержку font-display нельзя проверить через @supports. это было бы идеальное решение: для самых современных браузеров показать кастомный шрифт, а для остальных - стандартный, всё это в паре строчек CSS и без JS

@pepelsbey

6 жыл бұрын

Свойство font-display - это управляющая конструкция, а не свойство как таковое. Видимо, какие-то нюансы реализации мешают это проверять. Если очень хочется целиться со шрифтами в новые браузеры - отдавайте только WOFF 2.

Жаль многие заказчики принимают FOUT эффект за баг...

А как же подключение через link в ?

@pepelsbey

6 жыл бұрын

Вы про rel=stylesheet или rel=preload? Первое - это про стили, второе предзагрузка, а не подключение. Ну и вообще другая история :)

@marina7935

6 жыл бұрын

Vadim Makeev не совсем понятно, почему нельзя подключать шрифты через link href=. Ведь на google fonts именно этот способ (или импорт) предлагается. Объясните, пожалуйста.

@pepelsbey

6 жыл бұрын

Арина, можно. Но я объяснил, что бывает если просто подключить шрифт: в этот момент происходит ужасное - большинство браузеров показывают сайт, но прячут текст, который ждёт шрифта. Три секунды без текста (в большинстве браузеров) или вечность (в Safari 9 или на старых Android) - это проблема, которую нужно решать загрузчиком.

@marina7935

6 жыл бұрын

Вадим, спасибо, теперь ясно!

Вадим, спасибо за урок! Поставь ссылку на русский перевод, пожалуйста: css-live.ru/articles/ischerpyvayushhee-rukovodstvo-po-strategiyam-zagruzki-veb-shriftov.html. Вначале Илья там даже объясняет от себя про всякие FOIT и другие вещи, о которых ты рассказывал.

Почему всего так много, в итоге чтобы сделать один сайт нужно годами сидеть...

@HTMLAcademyTV

3 жыл бұрын

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

Слишком быстро. Я не успеваю понять о чем речь. Можно в следующем выпуске рассказать про адаптивность. Медиа выражения, какие точки ставить.

@igorzakusilov9590

6 жыл бұрын

Dmitry Morozov, чувак, на название посмотри. Это ШОРТЫ от слова SHORT

@FranklinDKitamory

6 жыл бұрын

Так коротко и по делу != быстро говорим т.к. у нас время ограничено

@PacoOfficial

6 жыл бұрын

Dmitry Morozov ставь точки как у бутстрап 4

@HTMLAcademyTV

6 жыл бұрын

Ютуб позволяет скорость воспроизведения для удобства сделать медленнее.

@AntonEfanov333

6 жыл бұрын

А ещё Вадим отлично смотрится на скорости 1,5 (=

Насколько материал из видео актуален в 2022 году?

@no_pressure

2 жыл бұрын

местами всё ещё актуален - например про форматы и сжатие шрифтов woff2, а font-display сейчас очень даже актуален

Не понял ничего.

Сколько не смотрю его видосы то очень плохо заходит. Много говорит и ни чего не показывает.

А разве нельзя добиться эффекта Font Face Observer, указав в head пару строчек inline стилей с указанием системных шрифтов для популярных ОС. А уже в CSS прописать кастомные шрифты? Т.к. логика получится вот такая: 1. При парсинге HTML ,раузер наткнется на inline ытили и применит их. 2. Документ отобразится уже с системными шрифтами. 3. Догружается CSS с шрифтами/бандл где они указаны в самом конце. 4. Браузер применяет катсомные шрифты Profit! Итого, если CSS долго тянется мы уже видим текст, если у нас отключен JS это тоже сработает.

@MrGreLI

6 жыл бұрын

Нет, браузер сначала дождётся загрузки всех стилей и потом применит их. Если только применять технику загрузки «критичного кода», но, боюсь, не будет ли моргать, надо проверять. На каком-нибудь Kremlin.ru шрифт заголовков так три раза меняется, тоже не айс.

@pepelsbey

6 жыл бұрын

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

@grantorino3465

6 жыл бұрын

1. При парсинге HTML ,раузер наткнется на inline ытили и применит их. - к чему применит? К несуществующему (незагруженному еще пока) контенту?

@FranklinDKitamory

6 жыл бұрын

Gran Torino он распарсит стили и как только распарсится html у него будут стили.

@FranklinDKitamory

6 жыл бұрын

MrGreLI я забыл уточнить что у нас критичный код для первого экрана, добавляется через инлайн, весь оставшийся грузится через link rel=preload. Поэтому он не блокирующий. Шрифты не мерцают т.к. Прописаны в инлайн. Подключаем не гугл фонт, он дико медленный

к чему так тараторить??? мне, как новичку понять нужно откуда ноги растут

ОЧЕНЬ НЕ ПОНЯТНО

У вас с дикцией что-то не то: тараторите, сжёвываете слова