Дайджест свежих материалов из мира фронтенда за последнюю неделю №496 (29 ноября — 5 декабря 2021)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №496 (29 ноября — 5 декабря 2021)

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

Подробнее
[Перевод] Как я в десять раз ускорил работу таблицы Google одной строкой CSS

[Перевод] Как я в десять раз ускорил работу таблицы Google одной строкой CSS

Наша компания использует Google Search Console для проверки статуса индексации и оптимизации видимости наших веб-сайтов. Также в консоли можно проверить, какие внешние веб-сайты ссылаются на вашу страницу. Однажды я просматривал страницу «Top linking sites» и заметил сильное торможение скроллинга. Оно происходило, когда я выбирал отображение большого массива данных (500 строк) вместо стандартных 10 результатов. Раздел «Top linking sites» в Google Search Console, 500 строк на страницу Я…

Подробнее
Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объем кода

Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объем кода

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

Подробнее
[Перевод] Как сделать удобное 3D-меню на CSS

[Перевод] Как сделать удобное 3D-меню на CSS

В новых AR/VR-играх часто заставляют меню как будто парить в воздухе. Воссоздадим основу этого эффекта, добавим адаптивную цветовую схему и учтём пользователей, предпочитающих поменьше анимации. Меню будет работать со скринридером, геймпадом, сенсорным вводом и не только. Подробностями делимся к старту курса по Frontend-разработке. Читать далее

Подробнее
CSS и XPath для QA: чтобы разобраться с локаторами, нужно всего лишь…

CSS и XPath для QA: чтобы разобраться с локаторами, нужно всего лишь…

Привет! Меня зовут Иван, я руковожу горизонталью автоматизации тестирования в Skyeng. Часть моей работы — обучать ручных тестировщиков ремеслу автоматизации. И тема с поиском локаторов, по моему опыту, самая тяжкая для изучения. Здесь куча нюансов, которые надо учитывать, но стоит разобраться и локаторы начинают бросаться в глаза сами. Хороший автоматизатор должен идеально уметь находить читабельные и краткие локаторы на странице. Об этом и пойдет речь ниже. Наливаем чай-кофе и…

Подробнее
Дайджест свежих материалов из мира фронтенда за последнюю неделю №495 (22 — 28 ноября 2021)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №495 (22 — 28 ноября 2021)

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

Подробнее
Никто не знает, как работает каскад

Никто не знает, как работает каскад

Перед началом чтения пройдите простой тест — каким будет значение свойства background-color в первом и во втором варианте, и почему именно так? Неожиданный для многих ответ сразу после ката. Там же подробный рассказ о том, как работает каскад — фильтрует, обрабатывает и вычисляет значения свойств. Например, что будет, если указать в трёх разных местах цвет одного и того же элемента. p.s. Если у вас отключены картинки в ленте на Хабре, то сразу заходите под кат — тест дублируется и…

Подробнее
Styled Components — идеальная стилизация React-приложения

Styled Components — идеальная стилизация React-приложения

Это статья о Styled Components будет полезна новичкам и старичкам. Для понимания материала нужны базовые навыки работы с React и TypeScript. Styled Components — одно из популярных решений написания кода методом CSS in JS. Гибкое, простое и, главное, идеально вписывается в архитектуру React приложения. Разберём данную библиотеку на базовых примерах в связке с TypeScript. Также поделюсь своими лучшими практиками при написание кода. Читать далее

Подробнее
Дайджест свежих материалов из мира фронтенда за последнюю неделю №494 (14 — 21 ноября 2021)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №494 (14 — 21 ноября 2021)

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

Подробнее
[Перевод] Как избавиться от position: absolute в CSS

[Перевод] Как избавиться от position: absolute в CSS

Пару месяцев назад автора этого материала спросили о проблеме, которая возникла именно из-за этой строки CSS. В решении свойства position не оказалось вообще. Пока у нас стартует новый поток курса по фронтенду, рассказываем о случаях, когда position: absolute вполне заменим современным CSS. Читать далее

Подробнее
Основные варианты использования CSS-переменных (Custom Properties)

Основные варианты использования CSS-переменных (Custom Properties)

CSS Variables или CSS Custom Properties уже давно используются в разработке и поддерживаются большинством популярных браузеров. Если у вас нет обязательного требования разрабатывать под IE, то вполне вероятно, вы уже успели оценить их преимущества. По этой теме написано множество статей, но я сфокусируюсь на том, чтобы показать распространенные кейсы по использованию, которые сам применял на практике. Будет мало теории, но много кода. Читать далее

Подробнее
Дайджест свежих материалов из мира фронтенда за последнюю неделю №493 (8 — 14 ноября 2021)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №493 (8 — 14 ноября 2021)

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

Подробнее