Порядка трёх лет назад Microsoft объявила об улучшении рендеринга текста в Edge, чтобы браузер отображал шрифты с улучшенной гаммой и контрастностью. Это стало возможно благодаря методу ClearType Text Tuner для всей Windows. Теперь Microsoft помогает Google внедрить аналогичную систему в Chrome для Windows 11 и Windows 10.

Проблема заключается в том, что Chromium использует рендеринг текста Skia с установленными значениями контрастности и гаммы для каждой платформы. В такой ситуации невозможно скорректировать или настроить эти параметры. В связи с этим текст в Chrome и других браузерах на базе Chromium выглядит тоньше и светлее.

Различные компоненты фронтенда традиционно являются вотчиной веб-разработчиков и дизайнеров и они не всегда задумываются о безопасности контента. В этой статье я предлагаю поговорить о безопасности CSS.

Для начала вспомним, что такое кросссайтскриптинг (CSS). XSS это тип атаки на веб-ресурсы, заключающийся во внедрении в выдаваемую сайтом страницу произвольного кода (который будет выполнен на компьютере пользователя при открытии им этой страницы) и взаимодействии этого кода с веб-сервером злоумышленника.

В течение нескольких лет современные браузеры, такие как Chrome или Firefox, пытались защитить пользователей веб-приложений от различных атак, в том числе XSS. Они делали это с помощью XSS-фильтров, которые во многих случаях позволяли им блокировать такие атаки.

Однако эти фильтры оказывались все менее и менее эффективными, и браузеры, такие как Chrome, постепенно отключают их в поисках альтернативных методов защиты.

Спикер рассматривает возможности интеграции графического редактора Figma и кода, а также показывает, как эта интеграция может оптимизировать рабочий процесс дизайнеров и разработчиков. Разбирает примеры автоматизации, синхронизации и совместной работы – узнаем, что позволит командам легко сотрудничать, улучшить коммуникацию и ускорить процесс разработки.

Один из наиболее популярных способов сделать элемент UI выразительным и аутентичным состоит в том, чтобы заполнить его картинкой, градиентом или анимированной гифкой.

Ниже приведен пример реализации данных эффектов на Flutter. Представленный подход будет работать с любым виджетом на всех поддерживаемых платформах. В качестве примера мы будем заполнять графикой Text.

По данным 2023 JavaScript Rising Stars библиотека htmx заняла второе место в разделе Front-end Frameworks (первое место вполне ожидаемо принадлежит React) и десятое место в разделе Most Popular Projects Overall.

htmx — это библиотека, которая предоставляет доступ к AJAX, переходам CSS, WebSockets и Server Sent Events прямо из HTML через атрибуты, что позволяет создавать современные пользовательские интерфейсы (насколько сложные — другой вопрос), пользуясь простотой и мощью гипертекста. На сегодняшний день у библиотеки почти 30 000 звезд на Github.

Удивительно, что до такого решения мы додумались только сейчас, учитывая, что весь функционал был доступен уже 10 лет назад (вы сами убедитесь в этом, когда мы изучим исходный код htmx).

Я покажу свой способ сборки компонента List Cell, объясню, почему считаю его гибким, а также приложу ссылку на Figma.
Этот компонент ещё называют List Item, Data Cell или просто Cell, но смысл один: это элемент списка. Я решил рассказать об этом потому, что не нашёл подходящих материалов, как собрать свой List Cell. Есть какие‑то статьи и компоненты в Figma, но оно работало не так, как мне нужно. В нашей дизайн‑системе этот компонент уже был, но в первой версии он был нескольких видов, каждый из которых имел множество различных вариантов.

Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит)

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

Хотел бы поделиться своими мыслями о том, почему виртуального DOM можно избежать при создании реактивности.

Реактивность - это когда представление привязано к данным таким образом, что изменение данных вызывает изменение в самом представлении.

Я подумал, что отличной идеей будет не только заморочить голову максимальному количеству народа, но и параллельно добиться прекрасного Lighthouse-рейтинга.

В Интернете можно найти множество платных онлайн курсов от разных школ, которые за 1-6 месяцев сделают из вас frontend-разработчика, однако HTML и CSS вполне можно выучить бесплатно. Раньше для этого были нужны бумажные книги (по ним как раз я училась), но сейчас кроме книг вся необходимая информация есть в Интернете. Однако надо понимать, что ознакомительные курсы предоставляются бесплатно, а вот продвинутую часть придется собирать по кусочкам из разных источников.

Большинство онлайн-школ предоставляют базовый курс изучения HTML и СSS бесплатно, такие курсы можно найти у htmlacademy.ru, ru.hexlet.io, wayup.in, itproger.com, stepik.org. Рекомендую выбрать несколько школ и пройти их бесплатные курсы, чтобы получить общее представление о верстке.

При необдуманном использовании, списки Tailwind-классов становятся огромными и приводят CSS в хаос. Разберём, как предотвратить эти печальные последствия...