Один великий китайский философ сказал: «каждый разработчик должен понимать, как исполняется его программа». Что ж, давайте разбираться. Говорить будем про рендеринг и его производительность. Меня зовут Глеб Михеев, я CTO Skillbox Holding, а также руководитель программного комитета FrontendConf. Уже как 19 лет работаю в коммерческой разработке. Сегодня я расскажу, как устроен браузерный конвейер поставки кадров на экран и что нужно знать каждому разработчику, чтобы его интерфейсы были…
Подробнее
В этом мини туториале я расскажу вам о том, как решить проблему отсутствия масштабирование страницы при ширине экрана меньше чем body min-width в браузерах Firefox и Safari, с помощью функции, решающей эту проблему. Читать далее
Подробнее![[Перевод] Взлет и падение Bootstrap](https://habrastorage.org/webt/47/al/1p/47al1p1ttes7a8fedvjxf46gpgc.png)
Как Tailwind стал ведущим CSS-фреймворком Недавно мне довелось поработать с Bootstrap 5, и в сравнении с Tailwind это был сущий кошмар В последнее время я занялся созданием небольших учебных пособий для разработчиков. Цель состоит в том, чтобы показать младшим разработчикам, как размышляют их старшие коллеги в процессе работы с кодом. Например, как старшие разработчики изучают документацию или новые фреймворки, с которыми они еще не знакомы, и как можно обнаружить, что что-то идет не…
Подробнее
Если поменять порядок названий классов CSS в атрибуте «class» HTML-элемента, то поменяется ли отображение HTML-страницы в браузере? Точно не поменяется? Или точно поменяется? А, может быть, есть нюансы? Давайте попробуем разобраться. Для этого я загляну в действующий стандарт языка HTML, буду на основании определений из этого стандарта делать выводы и проверять их на практических примерах. Читать далее
Подробнее
Итак, работая над... ну не знаю... каким-нибудь замечательным генератором статики, вы, возможно, захотите импортировать в свой код зависимости напрямую из текстовых файлов, таких как: HTML, MD, CSS, SVG или JSON. Конечно, можно использовать бандлер с соответствующим лоадером. Но, допустим, ваш кодекс самурая велит вам - никаких лишних npm install xxx и промежуточных билдов! Только хардкор! Что делать? Выход есть. Читать далее
Подробнее
Я честно пытаюсь понять идею tailwind, читаю официальную документацию и в преимуществах вижу полную ересь: Разобраться
Подробнее
За последнее время в CSS появилось достаточно новых возможностей, которые позволяют нам создавать новые решения для старых задач. Мне захотелось рассказать вам о тех, которые работают в современных браузерах, и их можно использовать прямо сейчас. Я подобрал, как мне кажется, наиболее распространенные задачи и покажу вам, как они решаются с помощью современного CSS. Надеюсь, вам будет интересно, и вы узнаете что-то новое. Так что не буду задерживаться, давайте начнем. Читать далее
Подробнее
Я развиваю скрипт на языке PowerShell для обхода и визуализации HTML-дерева из файла на языке HTML для анализа кода HTML на ошибки. В частности, для поиска ошибок при именовании классов CSS. Для этого сначала нужно получить набор классов из атрибута class HTML-элементов, а затем перебрать эти названия классов в цикле. Для разбора HTML я использую библиотеку «HTML Agility Pack». Также я разбираю, как можно обработать ссылки на символы (их еще называют по-английски «HTML-entities»)
Подробнее
Это заключительная статья из цикла статей о работе браузеров. Ссылка на первые два перевода: Часть 1: навигация и получение данных Часть 2: парсинг и выполнение JS Статьи предназначена для начинающих разработчиков и тех, кто интересуется разработкой. Здесь нет глубоких технических деталей, хотя, возможно, вы найдете что-то новое для себя. Помимо деревьев, о которых мы уже говорили — DOM, CSSOM и AST — браузеры также строят дерево специальных возможностей. Деревья, построенные на этапе…
Подробнее
При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например, можно ли названия классов писать по-русски? Или китайскими иероглифами? Или с помощью эмодзи? В этой статье я разбираю этот вопрос со ссылками на действующие стандарты HTML и CSS, даю ответы, привожу примеры с проверкой соответствующими валидаторами. Читать далее
Подробнее
Привет, друзья! В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года. "Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности. Читать дальше →
Подробнее
Всем привет, с вами Кирилл Мыльников, frontend разработчик компании Usetech. Сегодня я хочу рассказать о вертикальном и горизонтальном центрировании CSS (Cascading Style Sheets). В сети есть много статей на эту тему, но я хочу выделить все виды горизонтального и вертикального центрирования с примерами. Тема довольно популярная для тех, кто просто верстает или занимается полноценной frontend-разработкой (ведь нам всегда нужно что-то центрировать). Существует множество способов, как…
Подробнее