Статьи с тегом «Frontend»

FrontendCSSa11y

Настройка одного набора цветов для светлого и тёмного режимов

CSS переменные можно использовать, чтобы сделать цвета темнее, когда они отображаются на светлом фоне, и светлее, когда они отображаются на тёмном, что делает их более яркими в обоих случаях.
FrontendJavaScript

Эксперимент: Автоматическое включение View Transitions с MutationObserver

Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.
FrontendCSSHTMLJavaScripta11y

Переходите на сторону light-dark()

За последние несколько лет интерфейсы с темным режимом сильно изменились. Все мы знаем традиционный подход с использованием медиа-запросов, но в этой статье Sara Joy демонстрирует современные CSS-функции, благодаря которым соблюсти предпочтения пользователя в выборе цветовой схемы становится чертовски просто.
JavaScriptFrontend

Улучшение производительности с делегированием событий

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

Различные (и современные) способы переключения контента

Давайте уделим немного времени рассмотрению Dialog API, Popover API и остальных. Рассмотрим, когда лучше использовать каждый из них в зависимости от требований. Модальные или немодальные? JavaScript или чистый HTML/CSS? Не уверены? Не волнуйтесь, мы разберёмся во всём этом.
FrontendCSS

CSS min() — всё, что нужно

Victor Ayomipo экспериментирует с CSS функцией min(), исследуя её гибкость с помощью различных единиц измерения, чтобы определить, является ли она абсолютной гарантией отзывчивости. Узнайте, какие предостережения он делает против догматических подходов к веб-дизайну, основываясь на своих выводах.
FrontendSass

Sass: @import объявлен устаревшим

В 2019 году была выпущена система модулей Sass, добавившая в язык новые правила @use и @forward, призванные заменить @import и сделать таблицы стилей более удобными и менее подверженными ошибкам. Теперь можно объявить, что @import официально устарел, начиная с версии Dart Sass 1.80.0.
FrontendCSS

Напоминание, что @scope и блоки стилей HTML — это мощное сочетание

Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации.
Frontenda11yHTML

Практические советы по доступности, которые можно применить сегодня

Мы все бывали там, когда, торопясь уложиться в срок, создавали выпадающее меню или модальное окно, не задумываясь о его доступности. Но что, если внести несколько небольших изменений, которые могли бы значительно улучшить работу с сайтом для широкого круга пользователей? Доступность не должна быть сложной задачей или галочкой в графе соответствие. Речь идёт о создании продуктов, которыми могут пользоваться все, независимо от их способностей, технической грамотности, операционной системы или устройства.
FrontendHTML

Использование async и defer для управления скриптами

В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script>async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.
FrontendCSS

Новые значения и функции в CSS

Рабочая группа CSS выпустила первый публичный рабочий проект CSS Values and Units Module Level 5. В нем описаны общие значения и единицы измерения, принимаемые свойствами CSS, и синтаксис, используемый для них, а также добавлено несколько интересных новых функций.
FrontendCSS

Синтаксис относительного цвета — примеры использования

Поддержка синтаксиса относительного цвета в CSS теперь повсеместна (вперёд, к взаимодействию!), поэтому рассмотрим некоторые базовые (и всё ещё очень полезные) варианты использования, например, применение альфы к цвету, который у вас есть под рукой.
FrontendCSS

Предоставление определения типа для CSS с @property

Пишите более безопасный CSS, используя @property, позволяющий определять типы для пользовательских свойств. Узнайте, почему традиционные запасные значения могут не сработать и как функции @property повышают устойчивость определений пользовательских свойств.
FrontendCSS

Что, если использовать контейнерные единицы измерения для... всего

Однажды я спросил себя: а что, если использовать контейнерные единицы измерения для каждого элемента дизайна? Я задался этим вопросом, отчасти потому, что мне показалось, что ответ может быть таким: ну, тогда всё будет очень хорошо масштабироваться!
FrontendCSS

Как вычисляется значение пользовательских свойств в CSS

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

Popover API

Popover API предоставляет разработчикам стандартный, последовательный и гибкий механизм для отображения контента всплывающего поверх другого содержимого страницы. Управление всплывающим контентом может осуществляться как декларативно с помощью атрибутов HTML, так и с помощью JavaScript.
FrontendJavaScript

Тесты поддержки браузерами современных веб-функций на JavaScript

Иногда важно знать, поддерживается ли функция браузером или нет, чтобы можно было что-нибудь предпринять. Возможно, загрузить полифилл или просто выбрать другой подход. В статье рассматриваются новые возможности браузеров и тесты их поддержки браузером.
FrontendHTML

Тонкая настройка текстовых полей

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

Использование CSS анимации, основанной на прокрутке, для индикации прогресса прокрутки на основе секций

Индикатор прогресса прокрутки — довольно простая вещь, которую можно создать с помощью анимации, основанной на прокрутке в scroll()-стиле. Но мы создадим индикаторы для каждого раздела страницы, используя view()-стиль.
FrontendHTMLCSS

Бесконечная прокрутка логотипов на чистом HTML и CSS

Помните HTML-элемент marquee? Он устарел, поэтому вряд ли стоит его использовать, когда понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нём есть все необходимые инструменты для реализации этой функции.
FrontendCSS

Atomic CSS: Масштабируемая архитектура в современной веб-разработке

Atomic CSS — новый подход к написанию CSS, позволяющий вместо работы с длинными именами классов и сложными селекторами использовать крошечные, одноцелевые, небольшие классы, о чём и пойдёт речь в статье.
FrontendCSS

Заблуждения о Специфичности CSS

Всякий раз, когда публикуется статья о Специфичности в CSS — и, как следствие, о самом Каскаде — я очень радуюсь, ведь это основная концепция языка, которую должен знать каждый. Чем больше статей об этом, тем лучше!
JavaScriptFrontend

Проблема с new URL(), и как URL.parse() её решает

Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.
FrontendJavaScript

Методы жизненного цикла веб-компонента

Вчера мы изучили различные способы инстанцирования веб-компонента. В статье был упомянут метод жизненного цикла connectedCallback(). Сегодня поговорим об остальных методах жизненного цикла веб-компонентов.
FrontendCSS

Что может сломать aspect-ratio в CSS

В CSS есть свойство aspect-ratio, полностью поддерживаемое примерно с 2021 года. Это свойство может быть очень полезным и помочь там, где нельзя использовать фиксированный размер. Но всё может пойти не так, и в результате получится элемент, не соблюдающий aspect-ratio.
FrontendCSS

Масштабируемый CSS с архитектурой ITCSS

В веб-разработке управление крупными CSS проектами сопряжено со значительными трудностями. Важность масштабируемого и поддерживаемого CSS невозможно переоценить для долгосрочного успеха проекта. В статье рассматривается архитектура Inverted Triangle CSS как решение этих проблем, а также даётся глубокое понимание, причины её использования, практические шаги по реализации и сравнение с другими методологиями.
FrontendCSS

Исследование переноса текста и слов

Давайте поговорим о различных способах управления переноса текста на веб-странице. CSS даёт множество инструментов, позволяющих сделать текст таким, каким мы хотим его видеть. Также рассмотрим трюки с использованием HTML и специальных символов.
FrontendCSSJavaScript

Работа с CSS переменными

Одно из преимуществ CSS переменных — хранение таких значений, как цвета, размеры и другие элементы дизайна, в одном месте, с последующим использованием их во всей таблице стилей. Мы расскажем о значении CSS переменных и о том, как упростить поддержку и обновление стилей, что позволит повысить навыки фронтенд-разработки.
FrontendHTML

Доводы против самозакрывающихся тегов в HTML

Хотя мы, как индустрия, в целом отказались от большинства требований XHTML, оформление самозакрывающегося тега, похоже, сохранилось, несмотря на то, что является пережитком спецификации, от которой отказались более 10 лет назад. Люди даже добавляют пробел перед /, который был добавлен для совместимости с браузерным движком из прошлого тысячелетия.
FrontendCSS

Декодирование специфичности CSS

CSS — это основа, при помощи которой разработчики превращают HTML-документы в визуально привлекательные и функциональные для посетителей веб-сайты. Для фронтенд-разработчика понимание правил, регулирующих CSS, имеет решающее значение для повышения мастерства в оформлении веб-сайтов. В статье рассмотрим концепцию специфичности CSS, разберём её составляющие и покажем, как более глубокое понимание может улучшить навыки стилизации веб-сайтов.
FrontendCSS

Как скрыть полосу прокрутки (скроллбар) с помощью CSS

С помощью новых CSS атрибутов полосу прокрутки можно стилизовать и скрывать, не влияя на возможность пользователя прокручивать страницу. Мы покажем, как скрыть полосу прокрутки в большинстве браузеров с помощью CSS.
JavaScriptFrontend

Пользовательские события CustomEvent

JavaScript CustomEvent расширяют функциональность встроенной системы событий. Проще говоря, они позволяют программистам создавать и обрабатывать события, уникальные для их приложения, и в этой статье мы расскажем о них всё.
Frontend

Создание меню "вне холста" с <dialog> и веб-компонентами

Меню "вне холста" — распространённый паттерн в веб-дизайне. Его часто можно увидеть на мобильных сайтах, где вы кликаете на кнопку гамбургер, и меню выдвигается сбоку экрана, обычно перекрывая контент, находящийся за ним.
FrontendCSS

Именование переменных в CSS

"Именовать вещи сложно", — гласит аксиома программной инженерии, и CSS не является исключением. Здесь собраны некоторые соображения, связанные с именованием пользовательских свойств CSS. Я буду использовать термины "переменная" и "пользовательское свойство" как взаимозаменяемые, поскольку для целей определения того, как их называть, это фактически одно и то же.
FrontendCSS

Руководство для начинающих по блочной модели CSS

Блочная модель/Box Model CSS — фундаментальная концепция, позволяющая размещать и выравнивать элементы на веб-странице. Владение блочной моделью необходимо для управления отступами, размерами, позиционированием и разработкой макета веб-страницы в целом.
FrontendCSS

Текучая типографика для отзывчивого дизайна

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

Как создать favicon/фавикон в 2024 году

Отдавайте предпочтение SVG, а не PNG, доверяйте браузерам в вопросах уменьшения масштаба, отказывайтесь от непонятных форматов — это полное, исчерпывающее руководство по favicon/фавикон для современного веба. Включает шаги для статического HTML и Webpack.
FrontendCSS

Как использовать CSS свойство gap

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

Основные псевдоклассы фокуса :focus, :focus-within, и :focus-visible

Состояние фокуса пользователя совершенно не учитывается веб-разработчиками. Представьте себе навигацию по сайту без чёткого указания того, где вы находитесь и с чем взаимодействуете; это сбивает с толку. Именно здесь на помощь приходят CSS-псевдоклассы, такие, как :focus, :focus-within и :focus-visible. Цель этой статьи — пролить свет на важность состояния фокуса в веб-разработке.
FrontendCSS

Несколько способов упростить CSS в 2023 году

Мы переживаем некий ренессанс CSS: новые возможности, техники, эксперименты и идеи появляются в таком количестве, какого мы не видели со времён "CSS3". Легко почувствовать себя подавленным, когда, кажется, что твоя профессия развивается с бешеной скоростью, но Джефф Грэм (Geoff Graham) считает, что "современный" CSS в 2023 году фактически сделал CSS "проще" в написании.
SEOFrontend

Действительно ли редиректы (301, 302, ...) влияют на SEO

Как работать с редиректами и каковы последствия их использования — вот несколько вопросов, возникающих в процессе SEO-аудита. Некоторые SEO-эксперты более фаталистично, чем другие, относятся к тому, как редиректы могут повлиять на рейтинг вашего сайта на страницах результатов поисковых систем (SERP).
FrontendCSS

Новые возможности CSS облегчающие вашу жизнь

CSS — постоянно развивающийся язык. С каждой итерацией он становится все лучше и лучше. Поэтому важно следить за новейшими возможностями CSS, чтобы использовать их в своих проектах и меньше зависеть от библиотек сторонних разработчиков.
FrontendCSS

Отзывчивая типографика с CSS clamp

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

9 распространённых ошибок в CSS, которые мы совершаем

Каскадная таблица стилей (CSS) — это мощный язык стилей, помогающий фронтенд разработчикам оформлять обычные веб-страницы. Однако при использовании этого языка стилей можно допустить ряд ошибок мешающих писать эффективный код. В данной статье рассматриваются некоторые распространённые ошибки и предлагается решение для каждой из них.
FrontendCSSBEM

Как CSS @scope может заменить БЭМ

Одним из наиболее распространённых и сложных вопросов, с которыми сталкиваются фронтенд-инженеры, являются соглашения об именовании CSS. С популярностью метода Блок Элемент Модификатор (БЭМ) многие привыкли организовывать свои стили по удобной схеме.
FrontendCSS

Новая CSS функция light-dark() для переключения цвета темы

В Интернете существует множество способов переключения между светлыми и тёмными темами. Мы можем использовать JavaScript или медиазапрос prefers-color-scheme в CSS для переключения между темами на основе системных предпочтений пользователя.
FrontendCSS

Более современный сброс CSS

Я написал A Modern CSS Reset почти 4 года назад, и, да, он не слишком хорошо сохранился. Несколько дней назад я заметил, что на него снова ссылаются, и подумал, что, вероятно, это хорошая идея — опубликовать обновлённую версию.
FrontendCSS

Повышение эффективности кодирования с соглашениями об именовании CSS

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

Написание CSS в 2023 году: Отличается ли он от того, что было раньше?

CSS развивается быстрее, чем когда-либо. С учётом всех новых возможностей, которые появились — и ещё появятся — после появления Flexbox и Grid несколько лет назад, меняется и способ написания CSS. В этой статье Geoff Graham рассказывает о том, какие функции оказали наибольшее влияние на его нынешние подходы к CSS, а также о тех, которые не оказали (по крайней мере, пока).
FrontendCSS

Как избежать CSS-сдвигов макета связанных с ch

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

Преимущества пользовательских свойств в CSS

Пользовательские свойства CSS, известные как переменные, — это мощная функция, позволяющая разработчикам определять многократно используемые значения в таблицах стилей. Использование пользовательских свойств позволяет значительно повысить удобство повторного использования и сопровождения кода, а также создавать динамические стили для своих веб-проектов. Цель данной статьи — всесторонне объяснить пользовательские свойства CSS и их применение с помощью функции var.
FrontendJavaScriptCSSHTML

Как реализовать пагинацию с помощью HTML, CSS и JavaScript

В Интернете пагинация — это способ разбиения больших фрагментов содержимого на более мелкие части. В этой статье мы рассмотрим простой способ разделения содержимого на ряд "страниц" с помощью HTML, CSS и обычного JavaScript.
FrontendCSS

Рефакторинг CSS: Оптимизация размера и производительности (часть 3)

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

Понимание логических свойств CSS

Логические свойства CSS — эффективный способ управления макетом веб-страниц. С течением времени CSS развивался в соответствии с требованиями современного веб-дизайна, и одним из значительных достижений последних лет стало появление логических свойств CSS. В этой статье мы познакомимся с логическими свойствами CSS, покажем, что они собой представляют, чем отличаются от традиционных (физических) свойств и почему они важны для создания гибких и отзывчивых макетов.
FrontendCSS

Освоение z-index в CSS

z-index — свойство, используемое для управления порядком расположения слоёв в документе. Элементы с большим значением z-index располагаются над элементами с меньшим значением. Подобно тому, как оси x и y на странице определяют расположение элементов по горизонтали и вертикали, z-index определяет, как они располагаются друг над другом по оси z.
FrontendCSS

Рефакторинг CSS: Стратегия, тестирование и сопровождение

В этой статье мы подробно рассмотрим сам процесс рефакторинга, стратегию инкрементного рефакторинга, визуальное регрессионное тестирование и сопровождение отрефакторенной кодовой базы.
FrontendCSS

Рефакторинг CSS: Введение

Рефакторинг CSS — задача не из лёгких: его нужно провести так, чтобы не создать проблем. Сначала необходимо проанализировать существующую кодовую базу, провести аудит состояния CSS-кодовой базы, выявить слабые места, согласовать подход и убедить руководство в необходимости вложения времени и ресурсов в этот процесс.
FrontendCSSSCSSSass

Повторное использование кода: Освоение SCSS-миксинов

Миксины SCSS обеспечивают эффективный способ повторного использования CSS-кода. Миксины уменьшают дублирование и улучшают структуру кода за счёт инкапсуляции стилей в блоки многократного использования. Благодаря возможности принимать аргументы, миксины становятся невероятно адаптивными и универсальными. В этой статье мы расскажем о том, как SCSS-миксины улучшают разработку фронтенда, способствуя модульности и согласованности кода, и упрощая написание CSS.
FrontendCSS

Руководство по стилизации скроллбара (полосы прокрутки) в CSS

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

Как использовать CSS background-size и background-position

Со свойствами фона CSS можно сделать очень многое. В этой статье мы рассмотрим, как использовать свойство background-size для установки размера фонового изображения, а также изучим варианты позиционирования фонового изображения с помощью background-position.
FrontendCSS

Как использовать CSS aspect-ratio

Бывают случаи, когда действительно необходимо поддерживать определённое соотношение между шириной и высотой отзывчивых элементов на веб-странице. Долгое время это можно было сделать с помощью различных CSS-трюков. Свойство CSS aspect-ratio изменило ситуацию: теперь мы можем задавать соотношение сторон элемента в одной строке кода. Давайте рассмотрим, как использовать свойство aspect-ratio.
Frontend

Варианты использования Web Storage API в HTML

Существуют различные способы использования веб-хранилищ в веб-приложениях. Front-end разработчики используют современный браузерный API веб-хранилища для создания более персонализированных, эффективных и отзывчивых веб-сайтов. В этой статье мы рассмотрим множество примеров использования, которые помогут вам создавать привлекательные веб-приложения.
FrontendCSSHTML

Mobile-First подход с HTML и CSS

В современном цифровом ландшафте подход, ориентированный на мобильные решения (mobile-first), приобрёл большое значение в веб-дизайне и разработке. Применяя подход mobile-first в HTML и CSS, вы отдаёте приоритет потребностям мобильных пользователей и обеспечиваете бесперебойную и увлекательную работу вашего сайта на небольших экранах. В этой статье мы расскажем о принципах и преимуществах mobile-first дизайна и реализации конкретных стратегий в HTML и CSS, чтобы вы могли применить эту методику.
FrontendCSS

Техники рефакторинга CSS

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

Руководство по семантическому HTML

Если вы новичок в веб-разработке, то, возможно, слышали термин "Семантический HTML" и задавались вопросом, что он означает. Проще говоря, Семантический HTML — это использование разметки HTML для передачи смысла содержимого веб-страницы, а не только её внешнего вида.
FrontendSass

Sass для веб-разработки

Написание CSS имеет решающее значение для создания красивых и функциональных веб-сайтов, но управление CSS может стать сложной задачей по мере роста размеров и сложности сайтов. Вот тут-то и появляются препроцессоры CSS, такие, как Sass. В этой статье вы познакомитесь с Sass и узнаете, как он может упростить рабочий процесс и помочь писать более эффективный и удобный код.
SEOFrontend

10 лучших SEO рекомендаций для веб-разработчиков

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

Написание более чистого CSS кода с помощью БЭМ

Чистый и организованный код имеет решающее значение в современных веб-проектах, и разработчики постоянно ищут способы улучшить удобство сопровождения и организации кода. К счастью, для достижения этой цели существуют различные методы, включая популярную методологию Блок Элемент Модификатор (БЭМ), и в этой статье объясняется, как работает БЭМ и почему вы должны начать его применять.
FrontendCSS

Тригоно­метриче­ские функции в CSS

В дополнение к математическим функциям CSS были добавлены тригонометрические функции sin(), cos(), tan(), asin(), acos(), atan() и atan2(). Эти функции определены в модуле Значения и единицы измерения CSS уровня 4 и доступны во всех браузерах.
FrontendCSS

Что такое CSS маски и зачем они нужны

В мире дизайна маскирование — популярная техника достижения уникальных дизайнерских эффектов. Как дизайнер, я использовал его много раз, но редко использую в Интернете. Думаю, причина, по которой я не использую CSS маски, заключается в поддержке браузеров. Они частично поддерживаются в браузерах blink (Chrome и Edge) и полностью поддерживаются в Safari и Firefox.
JavaScriptFrontend

JavaScript: Руководство по localStorage

Cookie были единственным способом хранения временной и локальной информации, но теперь у нас есть localStorage. Он широко обсуждается и используется во множестве приложений JavaScript. В этой статье мы рассмотрим всё, что нужно знать о localStorage в JavaScript.
FrontendCSS

CSS: em и rem — всё, что нужно знать

CSS — важнейшая часть дизайна любого сайта, но разобраться в тонкостях его использования бывает непросто. Одна из самых важных вещей, которую нужно понять, — это разница между использованием rem и em в CSS и то, зачем/когда следует использовать тот или иной вариант.
JavaScriptFrontend

Зачем нужны веб-фреймворки и как обойтись без них

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

Рассмотрим Tailwind CSS

В этом году было много шумихи вокруг популярного CSS фреймворка Tailwind. Хочу поделиться мыслями и опасениями по поводу UI этого фреймворка. У меня был небольшой опыт написания utility-first CSS кода, когда я начинал свою карьеру во фронтенде несколько лет назад.
JavaScriptFrontendBackend

JavaScript: Четыре хитрых концепции в одной строке

На днях коллега подошёл ко мне со строкой кода, которую нашёл на StackOverflow, и спросил, как это работает. И я подумал, что это отличный пример четырёх концепций от среднего до продвинутого уровня JavaScript, поэтому решил записать и обосновать своё объяснение.
CSSFrontend

Защитный CSS — коллекция сниппетов

Часто хочется, чтобы был способ избежать возникновения определённой проблемы или поведения CSS. Вы знаете, что контент динамический, и на веб-странице всё может измениться, что увеличивает вероятность возникновения проблемы с CSS или странного поведения.
CSSFrontend

CSS: Соотношение сторон или aspect-ratio

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

CSS: Отзывчивые макеты, меньше CSS медиа запросов

Мы не можем говорить о веб-разработке, не упоминая Отзывчивый Дизайн. В наши дни это просто данность, и так было уже много лет. Медиа запросы — часть отзывчивого дизайна, и они никуда не денутся. С момента появления медиа-запросов (буквально десятилетия назад) CSS эволюционировал до такой степени, что существует множество трюков, которые могут нам помочь существенно сократить количество медиа-запросов. В некоторых случая я покажу вам, как заменить несколько медиа-запросов только одним CSS объявлением. Эти подходы могут привести к уменьшению объёма кода, упрощению обслуживания и большей степени привязаны к имеющемуся контенту.
CSSFrontend

CSS: Анимация подчёркивания ссылок

Недавно я добавил в этот блог простой визуальный эффект, который мне быстро понравился: когда вы наводите курсор на ссылку, анимированное подчёркивание ссылки раскрывается из центра. Создать этот эффект на удивление легко и не требует добавления каких-либо дополнительных элементов в DOM HTML.