HTML *

Привет, Хабр!

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

В частонсти, в статье рассмотрены следующие вопросы:

- Как сделать таблицу с фиксированной шапкой и скроллом в body?

- Как быть, когда cодержимое таблицы съезжает относительно шапки при появлении скролла? Как избежать использования overflow: 'scroll' в данной ситуации. Установка css-переменной scroll-width.

- Оптимизация и кастомизация скролла: плавность, scroll margin, изменение цвета и формы.

Я всегда мечтал о функциональности, которую можно было бы использовать на любом web проекте. Еще я мечтал иметь максимально гибкое решение для абсолютной кастомизации под себя. Два года назад мы начали работать над воплощением этой смелой мечты в реальность. Первой такой функциональностью стала именно Uni Локализация.

Продолжение исследования головоломки technicalseo.expert которая будет сломана самым нетривиальным образом.

Предыдущий уровень и чуть подробнее о самой головоломке в первом посте: ссылка

technicalseo.expert - это головоломка для SEO, хотя я сел не имея никакого бэкграунда в SEO, а сейчас работаю скромным датасаентистом. Разработала головоломку Алексис Сандерс, работающая в международном агентстве маркетинга Merkle Inc. Алексис объясняет "Идея игры заключалась в том, чтобы позволить SEO-специалистам изучить технические аспекты своей профессии. Но второй уровень требует глубочайших познаний в HTML, CSS, PHP и Java. Третий уровень был спроектирован так, чтобы никто никогда его не прошёл"

technicalseo.expert - это головоломка для SEO, хотя я сел не имея никакого бэкграунда в SEO, а сейчас работаю скромным датасаентистом. Разработала головоломку Алексис Сандерс, работающая в международном агентстве маркетинга Merkle Inc. Алексис объясняет "Идея игры заключалась в том, чтобы позволить SEO-специалистам изучить технические аспекты своей профессии. Но второй уровень требует глубочайших познаний в HTML, CSS, PHP и Java. Третий уровень был спроектирован так, чтобы никто никогда его не прошёл"

Эта статья — расширенный вариант нашего внутреннего документа о том, как подготавливать изображения для сайтов и веб-приложений. В ней мы описали актуальные форматы и собрали рекомендации, как добавить поддержку WebP и AVIF на сайт и какие инструменты можно использовать. В заключительной части обзора расскажем, как мы внедрили эти форматы на нашем сайте и какие результаты получили.

htmx — инструмент для создания сложных и интерактивных веб-приложений на HTML, альтернатива клиентскому рендерингу на Javascript. В этой статье рассказываем, как библиотека помогает переиспользовать элементы на сервере, сократить объем кода на Javascript и отказаться от сборки.

Коллекция советов и приёмов вёрстки с сайта HTMHell.

Привет, Хабр! Меня зовут Максим Васянович, я спикер курса “Веб-верстка” в Skillbox. Сегодня поговорим о верстке, а точнее - о нюансах работы с псевдоэлементами before и after. Статья будет полезна, прежде всего, начинающим верстальщикам. Но, возможно, и профи будет интересно освежить эти моменты в памяти. 

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

В конце сентября Симо Ахава поделился материалом, в котором подробно рассказал о влиянии блокировщиков рекламы. Но не стал делать акцент на способах обхода, а решил рассказать о технологии, которая помогает понять, применяется ли блокировка.

Digital Analyst MediaGuru Тимур Леденёв перевел для вас эту статью.

Многим кажется, что server-side (GTM для сервера) GTM устойчив к блокировщикам рекламы и контента. В конце концов, благодаря использованию JS-контейнера на собственном домене можно избежать многих современных технологий блокировки.

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

Однако это не очередная статья, в которой вновь поднимается тема несовпадения интересов жадных до инсайтов аналитиков и ничего не подозревающих посетителей сайтов.

Напротив, мне бы хотелось осветить технологию, которая позволяет нам не обходить блокировку, а определять, применяется ли она.

Уверен, что наряду с тем, чтобы позволять блокировщикам рекламы и контента выполнять свою работу, необходимо также оценивать их влияние. Речь идёт о том, чтобы анализировать, какое число аналитических и рекламных запросов блокируется этими инструментами.

Перед началом чтения пройдите простой тест — каким будет значение свойства background-color в первом и во втором варианте, и почему именно так?

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

p.s. Если у вас отключены картинки в ленте на Хабре, то сразу заходите под кат — тест дублируется и там.

Как я спарсил WebGL карту с Федерального сайта. Написал эту статью для тех, у кого похожая задача.

Быстрые сайты любят и пользователи, и поисковики.

С первыми всё просто: если страница долго грузится, пользователь её закроет и перейдёт на другой сайт. С поисковиками похожая история: скорость загрузки, скорее всего, влияет на ранжирование сайта в поисковой выдаче.

Lighthouse — один из известных инструментов для проверки производительности сайтов. Он тестирует сайт, показывает оценку производительности и даёт конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.

Lighthouse можно запустить тремя способами:

С помощью Node CLI. Для этого установите в свой проект пакет Lighthouse с помощью команды npm install -g lighthouse.

Через расширение для браузера Chrome или Firefox. Установите расширение, затем откройте свой сайт и запустите проверку с помощью кнопки Generate report.

С помощью инструментов разработчика — Chrome DevTools. Чтобы запустить проверку, откройте инструменты разработчика, переключитесь на вкладку Lighthouse и нажмите на кнопку Generate report.