[Перевод] Что нового в Chrome 111?

[Перевод] Что нового в Chrome 111?

Давайте погрузимся внутрь и посмотрим, что нового ждет разработчиков в Chrome 111. Читать далее

Подробнее
Вышел Chrome 111

Вышел Chrome 111

Опубликован релиз браузера Chrome 111. Дополнительно поддерживается ветка Extended Stable, её сопровождение продлится восемь недель. Читать далее

Подробнее
Как достичь производительного рендеринга в браузере

Как достичь производительного рендеринга в браузере

Один великий китайский философ сказал: «каждый разработчик должен понимать, как исполняется его программа». Что ж, давайте разбираться. Говорить будем про рендеринг и его производительность. Меня зовут Глеб Михеев, я CTO Skillbox Holding, а также руководитель программного комитета FrontendConf. Уже как 19 лет работаю в коммерческой разработке. Сегодня я расскажу, как устроен браузерный конвейер поставки кадров на экран и что нужно знать каждому разработчику, чтобы его интерфейсы были…

Подробнее
[Перевод] Как работают браузеры, часть 3: деревья специальных возможностей и рендеринга

[Перевод] Как работают браузеры, часть 3: деревья специальных возможностей и рендеринга

Это заключительная статья из цикла статей о работе браузеров. Ссылка на первые два перевода: Часть 1: навигация и получение данных Часть 2: парсинг и выполнение JS Статьи предназначена для начинающих разработчиков и тех, кто интересуется разработкой. Здесь нет глубоких технических деталей, хотя, возможно, вы найдете что-то новое для себя. Помимо деревьев, о которых мы уже говорили — DOM, CSSOM и AST — браузеры также строят дерево специальных возможностей. Деревья, построенные на этапе…

Подробнее
[Перевод] Как работают браузеры. Часть 2: парсинг и выполнение JS

[Перевод] Как работают браузеры. Часть 2: парсинг и выполнение JS

Примечание переводчиков: статья предназначена для начинающих разработчиков и интересующихся разработкой. Здесь нет глубоких технических деталей, хотя, возможно, вы найдете что-то новое для себя. В прошлой статье мы обсудили навигацию и получение данных. Сегодня поговорим о HTML- и CSS-парсинге и выполнении JavaScript. Содержание: 1. HTML-парсинг: — Парсинг — Браузерные движки — Токенизация — Построение DOM — Предварительные загрузчики и ускорение страницы 2. CSS-парсинг: — Токенизация и…

Подробнее
[Перевод] Отступ 8px у body: история стиля, который никому не нужен

[Перевод] Отступ 8px у body: история стиля, который никому не нужен

Во всех браузерах элементу body через таблицу стилей по умолчанию добавляется внешний отступ 8px. Но почему именно 8px? Разбираемся вместе с автором книги Jump Start Sass: Get Up to Speed With Sass in a Weekend к старту курса по Fullstack-разработке на Python. Читать далее

Подробнее
Атака «Браузер внутри браузера». Как защититься

Атака «Браузер внутри браузера». Как защититься

Поддельное окно авторизации, чтобы выманить пароль пользователя Современные средства HTML/CSS позволяют сгенерировать фрейм, практически неотличимый от настоящего браузера, как на скриншоте вверху. Более того, можно нарисовать в нём «адресную строку» с любым URL. Это открывает двери для нового класса атак, который получил название BitB (браузер внутри браузера). Насколько реальны такие атаки и что можно противопоставить в качестве защиты? Читать дальше →

Подробнее
Полное руководство по CSS Flex + опыт использования

Полное руководство по CSS Flex + опыт использования

Как и CSS Grid, Flex Box довольно сложен, потому что состоит из двух составляющих: контейнера и элементов внутри него. Когда я начал изучать Flex, я хотел увидеть все, на что он способен. Но мне не удалось найти подробное руководство с примерами всех возможностей. Поэтому я решил самостоятельно создать диаграммы свойств Flex с «высоты птичьего полета». Читать!

Подробнее
Дайджест свежих материалов из мира фронтенда за последнюю неделю №439 (26 — 31 октября 2020)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №439 (26 — 31 октября 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →

Подробнее
[Перевод] Отзывчивый веб-дизайн и учёт высоты окна браузера

[Перевод] Отзывчивый веб-дизайн и учёт высоты окна браузера

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

Подробнее
[Перевод] Система font fallback: что происходит, когда шрифт не может найти нужный символ

[Перевод] Система font fallback: что происходит, когда шрифт не может найти нужный символ

Поднимите руку, если когда-нибудь сталкивались с такой ситуацией: вы получили текст со странными прямоугольниками или вопросительными знаками. Или эмодзи при отправке выглядело нормально, но у получателя оно отобразилось в странно разобранном виде. Вы видели, как пользователь Twitter использует крутые шрифты, хотя сайт, казалось бы, не разрешает выбирать шрифт. Или вы разобрались, как использовать эти шрифты в Twitter, но кто-то попросил вас подумать о читателях или жаловался,…

Подробнее
[Перевод] Продуманный front-end. Правильная архитектура для быстрых сайтов

[Перевод] Продуманный front-end. Правильная архитектура для быстрых сайтов

Привет, Хабр! Мы давно обходили вниманием тему браузеров, CSS и accessibility и решили вернуться к ней с переводом сегодняшнего обзорного материала (оригинал — февраль 2020). Особенно интересует ваше мнение об упомянутой здесь технологии серверного рендеринга, а также о том, насколько назрела необходимость в полноценной книге по HTTP/2 — впрочем, давайте обо всем по порядку. Читать дальше →

Подробнее