Веб-компоненты в 2023: нужно поговорить

Веб-компоненты в 2023: нужно поговорить

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

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

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

Что ожидается в статье: Три новые функции CSS позволяют легко добавлять плавные анимации появления и исчезновения. Вычисление наборов данных более высокого порядка с помощью группировки массивов. DevTools упрощает процесс локальных переопределений. И многое другое. Читать далее

Подробнее
[Перевод] Типизированные CSS переменные с @property

[Перевод] Типизированные CSS переменные с @property

Типы CSS - это достойное вложение в безопасность типов при работе с внешним интерфейсом. Мы все еще ожидаем кроссбраузерности, но мы к этому придем 🙂 . Читать далее

Подробнее
Как HTML и CSS влияют на доступность

Как HTML и CSS влияют на доступность

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это. Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности…

Подробнее
Компилирование «железного» бинарника Java-программы Google Closure Stylesheets с GraalVM

Компилирование «железного» бинарника Java-программы Google Closure Stylesheets с GraalVM

Google Closure Stylesheets -- это компилятор для CSS, написанный Гугл в рамках набора инструментов Closure для веб-разработки, который в свое время обладал внушительными функциями такими как экспансия браузерных префиксов, переменными и др. Прошло уже более 10 лет с начала этого проекта, и в прошлом году его архивировали. Я же продолжил вести свой форк, и сегодня собрал его как нативный binary с помощью Oracle GraalVM. Под катом рассказ о том, какие моменты пришлось проработать, а так же…

Подробнее
Вышел Firefox 117

Вышел Firefox 117

Стала доступна версия Firefox 117. Теперь браузер поддерживает автоматический перевод веб-контента. Однако поддержка автоматического перевода Firefox не основана на облаке, а скорее опирается на локальные ресурсы. Это позволяет ей работать, когда устройство находится в автономном режиме. Читать далее

Подробнее
[recovery mode] Подборка VS Code-плагинов для Frontend-разработчиков и не только

[recovery mode] Подборка VS Code-плагинов для Frontend-разработчиков и не только

Одним из наиболее ценных аспектов Visual Studio Code является его расширяемость с помощью плагинов, которые значительно облегчают и улучшают рабочий процесс. В этой статье мы собрали инструменты - от простых до продвинутых - которые сделают вашу разработку более продуктивной и приятной, позволяя сосредоточиться на творческой части процесса. Читать далее

Подробнее
[Перевод] Дебаты по Tailwind CSS: ещё один классный инструмент, отвергнутый веб-разработчиками

[Перевод] Дебаты по Tailwind CSS: ещё один классный инструмент, отвергнутый веб-разработчиками

Tailwind CSS — как фреймворк для разработчиков довольно прост в понимании. По сути, он позволяет вам встраивать код CSS в ваш HTML код. Чтобы, как говорится в слогане Tailwind: «быстро создавать современные веб‑сайты, не покидая HTML». Таким образом, это избавляет разработчиков от необходимости контекстно переключаться с HTML на таблицу стилей CSS. Собственная документация Tailwind указывает на распространенное возражение против такого подхода: «разве это не просто встроенные стили?» Те…

Подробнее
Ох уж эти CSS-переменные

Ох уж эти CSS-переменные

Я люблю создавать компоненты везде и всегда, поэтому пользовательские CSS-свойства, также известные как CSS-переменные, являются одной из моих любимых фишек, которая позволяет писать более модульный код. При работе с ними я набил достаточно шишек, выпил литры чая и убил кучу времени. Теперь я «мастер», и хочу поделиться своим опытом. Читать дальше →

Подробнее
[Перевод] Вышел Chrome 116

[Перевод] Вышел Chrome 116

Традиционный перевод анонса от команды Google Chrome о нововведениях • Document Picture-in-Picture API • Улучшена отладка отсутствующих таблиц стилей в DevTools • Свойство notRestoredReasons И многое другое! Читать далее

Подробнее
5 новинок CSS в адаптивной верстке, которые можно использовать уже сейчас

5 новинок CSS в адаптивной верстке, которые можно использовать уже сейчас

Hola, Amigos! На связи Игорь Мельников, Frontend-разработчик компании Amiga. Возможно, вы уже слышали про технологии, которые я описываю в статье, но не использовали их, потому что думали, что они не поддерживаются актуальными браузерами. Теперь можете смело брать их во всеоружие и применять в своих проектах! Я решил в одном месте собрать информацию о нескольких новых фичах, которыми начал пользоваться сам и вам советую. А если эта статья покажется вам полезной, то дайте знать в…

Подробнее
Работа с Sass в приложении ASP.NET Core

Работа с Sass в приложении ASP.NET Core

Sass (Syntactically Awesome Style Sheets) — это скриптовый язык, используемый для создания каскадных таблиц стилей (CSS-файлов). Его синтаксис очень похож на обычный CSS, но вдобавок он поддерживает использование переменных, вложенность, миксины и наследование для селекторов, чего очень не хватает в базовом CSS, ведь эти фичи незаменимы в организации и поддержке стилей вашего веб-приложения. В этой статье я продемонстрирую вам шаги, необходимые для добавления и настройки Sass в вашем

Подробнее