Статьи с тегом «Frontend»
JavaScriptFrontend Делегирование событий — техника в веб-разработке, используемая для более эффективного управления событиями. Вместо того чтобы добавлять слушателей событий к каждому элементу, можно прикрепить один слушатель к родительскому элементу, повысив эффективность. Этот родительский элемент затем обрабатывает события для всех дочерних элементов и становится более эффективным, как продемонстрировано в статье.FrontendHTMLCSSJavaScripta11y Давайте уделим немного времени рассмотрению Dialog API, Popover API и остальных. Рассмотрим, когда лучше использовать каждый из них в зависимости от требований. Модальные или немодальные? JavaScript или чистый HTML/CSS? Не уверены? Не волнуйтесь, мы разберёмся во всём этом.FrontendCSS Анимация веерное раскрытие
подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания
. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.FrontendCSS Victor Ayomipo экспериментирует с CSS функцией min(), исследуя её гибкость с помощью различных единиц измерения, чтобы определить, является ли она абсолютной гарантией отзывчивости. Узнайте, какие предостережения он делает против догматических подходов к веб-дизайну, основываясь на своих выводах.FrontendCSS Используйте margin, избегая переполнения и горизонтальных полос прокрутки с width: stretchFrontendSass В 2019 году была выпущена система модулей Sass, добавившая в язык новые правила @use и @forward, призванные заменить @import и сделать таблицы стилей более удобными и менее подверженными ошибкам. Теперь можно объявить, что @import официально устарел, начиная с версии Dart Sass 1.80.0.FrontendCSS Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации.Frontenda11yHTML Мы все бывали там, когда, торопясь уложиться в срок, создавали выпадающее меню или модальное окно, не задумываясь о его доступности. Но что, если внести несколько небольших изменений, которые могли бы значительно улучшить работу с сайтом для широкого круга пользователей? Доступность не должна быть сложной задачей или галочкой в графе соответствие
. Речь идёт о создании продуктов, которыми могут пользоваться все, независимо от их способностей, технической грамотности, операционной системы или устройства.FrontendCSS Давайте анимируем CSS переменные! Это мощный способ применения CSS анимации, которая в противном случае была бы утомительной или непрактичной.FrontendHTML В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.FrontendCSS Рабочая группа CSS выпустила первый публичный рабочий проект CSS Values and Units Module Level 5. В нем описаны общие значения и единицы измерения, принимаемые свойствами CSS, и синтаксис, используемый для них, а также добавлено несколько интересных новых функций.FrontendCSS В наши дни градиентный текст довольно легко сделать с помощью background-clip: text; — но это убивает возможность использовать text-shadow. На помощь приходит SVG.FrontendCSS Можно ограничить распространение background-image элемента с помощью background-clip. Это означает, что можно применить различные фоны, скажем, к padding и border.FrontendCSS Современный CSS даёт множество новых, простых способов решения старых проблем, но часто новые функции не только решают старые проблемы, но и открывают новые возможности.FrontendCSS CSS Containment используется для оптимизации и открытия возможностей стилизации путём изоляции элементов от остальной части страницы. Различные значения contain (size, paint, layout и т. д.) обеспечивают различные преимущества и компромиссы.Frontend Компиляция Sass может быть узким местом в сборке, но это больше не так.FrontendCSS Поддержка синтаксиса относительного цвета в CSS теперь повсеместна (вперёд, к взаимодействию!), поэтому рассмотрим некоторые базовые (и всё ещё очень полезные) варианты использования, например, применение альфы к цвету, который у вас есть под рукой.FrontendCSS Пишите более безопасный CSS, используя @property, позволяющий определять типы для пользовательских свойств. Узнайте, почему традиционные запасные значения могут не сработать и как функции @property повышают устойчивость определений пользовательских свойств.FrontendCSS Однажды я спросил себя: а что, если использовать контейнерные единицы измерения для каждого элемента дизайна? Я задался этим вопросом, отчасти потому, что мне показалось, что ответ может быть таким: ну, тогда всё будет очень хорошо масштабироваться!FrontendHTMLCSSJavaScript Диалоговые окна — неотъемлемая часть любого пользовательского интерфейса, будь то веб-интерфейс, мобильный или любой другой, существующий на сегодня.FrontendCSS Ознакомьтесь с поведением, о котором следует знать, как браузер вычисляет окончательные значения пользовательских свойств. Непонимание этого процесса может привести к неожиданному или отсутствующему значению, а также к трудностям с поиском и устранением проблемы.Frontend Popover API предоставляет разработчикам стандартный, последовательный и гибкий механизм для отображения контента всплывающего поверх другого содержимого страницы. Управление всплывающим контентом может осуществляться как декларативно с помощью атрибутов HTML, так и с помощью JavaScript.FrontendHTMLCSSJavaScript В последнее время браузеры стремительно обретают довольно важные возможности. Возможности, для реализации которых могло потребоваться несколько библиотек JavaScript (или CSS), теперь доступны в браузерах из коробки
.FrontendCSS Понимание CSS свойства display и его значений важно для создания правильно организованных и привлекательных сайтов.FrontendCSS Коллекция простых однострочных CSS решений для добавления небольших улучшений на любую веб-страницу.FrontendCSS Наследование в CSS — это действительно суперспособность, и именно оно превращает разработку в Интернете в удовольствие, если вы принимаете его. В этой небольшой статье я собираюсь обратить вас в супер фанатов.FrontendCSS Каскад и специфичность, которых часто боятся разработчики, на самом деле очень просты, если использовать правильную модель мышления при создании CSS.FrontendCSS Часто упускаемое из виду CSS свойство mask-image может быть простым способом привнести немного индивидуальности в вашу работу над веб-дизайном.FrontendJavaScript Alpine.js — легковесный JavaScript фреймворк. Позволяющий создавать интерактивные пользовательские интерфейсы без написания большого количества JavaScript-кода.FrontendJavaScript Иногда важно знать, поддерживается ли функция браузером или нет, чтобы можно было что-нибудь предпринять. Возможно, загрузить полифилл или просто выбрать другой подход. В статье рассматриваются новые возможности браузеров и тесты их поддержки браузером.Frontenda11y Все знают, что нельзя использовать aria-hidden в интерактивных элементах. Но в чём проблема? Я решил выяснить это, чтобы в следующий раз, когда об этом спросят, я мог лучше объяснить.FrontendHTML Веб формы и поля ввода поддерживают множество дополнительных атрибутов, способных дать подсказку браузеру и улучшить пользовательский опыт заполнения форм в Интернете. Приложив совсем немного дополнительных усилий, можно сделать так, чтобы формы помогали, а не мешали.FrontendCSS В современной веб-разработке CSS сброс и нормализация — две важные техники, позволяющие добиться согласованности стилей в разных браузерах.FrontendCSS Индикатор прогресса прокрутки — довольно простая вещь, которую можно создать с помощью анимации, основанной на прокрутке в scroll()-стиле. Но мы создадим индикаторы для каждого раздела страницы, используя view()-стиль.FrontendCSS Давайте рассмотрим использование CSS в качестве альтернативы JavaScript для создания простых таймеров. Используем современные свойства CSS, такие, как @property, @keyframes, и псевдоэлементы со значениями counter().FrontendHTMLCSS Помните HTML-элемент marquee? Он устарел, поэтому вряд ли стоит его использовать, когда понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нём есть все необходимые инструменты для реализации этой функции.FrontendCSS Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete.FrontendHTMLCSSJavaScript Якорные ссылки — простой способ создать навигацию по странице. Например, в оглавлении можно использовать якорные ссылки для перехода к различным разделам страницы.JavaScriptFrontend Document.parseHTMLUnsafe — это новый улучшенный .parseFromStringFrontendJavaScript В предыдущей статье я писал о методе handleEvent() для работы со слушателями событий в веб-компонентах. Сегодня поговорим о том, как использовать его для обработки нескольких типов событий.FrontendCSS Atomic CSS — новый подход к написанию CSS, позволяющий вместо работы с длинными именами классов и сложными селекторами использовать крошечные, одноцелевые, небольшие классы, о чём и пойдёт речь в статье.FrontendCSS Всякий раз, когда публикуется статья о Специфичности в CSS — и, как следствие, о самом Каскаде — я очень радуюсь, ведь это основная концепция языка, которую должен знать каждый. Чем больше статей об этом, тем лучше!FrontendJavaScriptHTML Одна из проблем при выполнении кода в constructor() заключается в том, что иногда элемент создаётся, но вложенный в него HTML ещё не готов.JavaScriptFrontend Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.FrontendJavaScript Вчера мы узнали, как связать дочерний и родительский веб-компонент. Сегодня рассмотрим, как использовать пользовательские события Custom Event.FrontendJavaScript Меня спрашивали, как вложить веб-компоненты друг в друга и передавать информацию от одного к другому. Сегодня мы рассмотрим, как это реализовать.FrontendJavaScript Сегодня мы рассмотрим, как обнаружить и реагировать на изменение атрибутов веб-компонента.FrontendJavaScript Вчера мы изучили различные способы инстанцирования веб-компонента. В статье был упомянут метод жизненного цикла connectedCallback(). Сегодня поговорим об остальных методах жизненного цикла веб-компонентов.FrontendJavaScript Сегодня мы познакомимся с различными способами инстанцирования веб-компонентов (и проблемами, связанными с каждым из этих способов).FrontendCSS В CSS есть свойство aspect-ratio, полностью поддерживаемое примерно с 2021 года. Это свойство может быть очень полезным и помочь там, где нельзя использовать фиксированный размер. Но всё может пойти не так, и в результате получится элемент, не соблюдающий aspect-ratio.FrontendHTMLCSSJavaScript Сегодня рассмотрим одну из моих любимых фич веб-компонентов: прогрессивное улучшение.FrontendJavaScriptHTML Вчера мы рассмотрели, как создать собственный веб-компонент. Сегодня мы изучим, как добавлять опции и настройки.FrontendJavaScriptHTML Давайте рассмотрим, как создать свой первый веб-компонент.FrontendCSS Сегодня мы рассмотрим некоторые из удивительных способов, с помощью которых CSS позволяет выбирать целевые элементы на странице.FrontendCSS Вчера мы выяснили, как работает Flexbox. Сегодня я хочу рассказать о его практическом применении.FrontendCSS Flexbox — способ создания гибких макетов, расположенных в виде столбцов или строк.FrontendCSS Вчера мы познакомились с основами CSS Grid. Сегодня узнаем, как создать универсальную систему сеток, позволяющую быстрее и проще создавать различные макеты сайтов.FrontendCSS Сегодня мы изучим основы CSS Grid — создания макета на основе Grid. Приступим!FrontendCSS В веб-разработке управление крупными CSS проектами сопряжено со значительными трудностями. Важность масштабируемого и поддерживаемого CSS невозможно переоценить для долгосрочного успеха проекта. В статье рассматривается архитектура Inverted Triangle CSS как решение этих проблем, а также даётся глубокое понимание, причины её использования, практические шаги по реализации и сравнение с другими методологиями.FrontendCSS Рассмотрим CSS свойство text-wrap и то, как с его помощью можно улучшить перенос текста на веб-странице.FrontendCSS Давайте поговорим о различных способах управления переноса текста на веб-странице. CSS даёт множество инструментов, позволяющих сделать текст таким, каким мы хотим его видеть. Также рассмотрим трюки с использованием HTML и специальных символов.Frontend В веб-разработке понимание внутренней работы Document Object Model (DOM) имеет решающее значение. Два понятия, которые часто встречаются в дискуссиях о DOM, — это Virtual DOM и Shadow DOM.FrontendCSSJavaScript Одно из преимуществ CSS переменных — хранение таких значений, как цвета, размеры и другие элементы дизайна, в одном месте, с последующим использованием их во всей таблице стилей. Мы расскажем о значении CSS переменных и о том, как упростить поддержку и обновление стилей, что позволит повысить навыки фронтенд-разработки.FrontendCSSSass CSS уже не тот, что в 1996 году, и SASS тоже вырос с момента своего создания — какому из них отдать предпочтение сегодня? Мы рассмотрим плюсы и минусы обоих вариантов.FrontendHTML Хотя мы, как индустрия, в целом отказались от большинства требований XHTML, оформление самозакрывающегося тега, похоже, сохранилось, несмотря на то, что является пережитком спецификации, от которой отказались более 10 лет назад. Люди даже добавляют пробел перед /, который был добавлен для совместимости с браузерным движком из прошлого тысячелетия.FrontendCSS Я создал несколько примеров сниппетов :has(), используемых в реальных клиентских проектах.FrontendCSS CSS — это основа, при помощи которой разработчики превращают HTML-документы в визуально привлекательные и функциональные для посетителей веб-сайты. Для фронтенд-разработчика понимание правил, регулирующих CSS, имеет решающее значение для повышения мастерства в оформлении веб-сайтов. В статье рассмотрим концепцию специфичности CSS, разберём её составляющие и покажем, как более глубокое понимание может улучшить навыки стилизации веб-сайтов.FrontendCSS В CSS есть константа infinity. Когда я впервые узнал об этом, мозг озарило множество абсурдных возможностей. Давайте обсудим! Возможно, найдутся и практические варианты использования.FrontendHTMLJavaScript Сегодня я решил, что мы создадим HTML веб-компонент с нуля. Давайте создадим компонент, показывающий и скрывающий текст при переключении кнопки.FrontendCSS С помощью новых CSS атрибутов полосу прокрутки можно стилизовать и скрывать, не влияя на возможность пользователя прокручивать страницу. Мы покажем, как скрыть полосу прокрутки в большинстве браузеров с помощью CSS.Frontend В этой статье мы рассмотрим, что такое HTMX, и какие возможности он предоставляет разработчикам.JavaScriptFrontend JavaScript CustomEvent расширяют функциональность встроенной системы событий. Проще говоря, они позволяют программистам создавать и обрабатывать события, уникальные для их приложения, и в этой статье мы расскажем о них всё.Frontend Один из вопросов, который мне чаще всего задают в течение последнего года… Вы слышали о HTMX? Что вы думаете о нем?Frontend Меню "вне холста" — распространённый паттерн в веб-дизайне. Его часто можно увидеть на мобильных сайтах, где вы кликаете на кнопку гамбургер, и меню выдвигается сбоку экрана, обычно перекрывая контент, находящийся за ним.FrontendCSS Рассмотрим CSS-свойство field-sizing и то, как оно может улучшить удобство взаимодействия с веб формой.Frontend Когда я начинаю работать с новыми клиентами, одной из первых вещей, которые я люблю делать, это аудит их существующего сайта.FrontendCSS "Именовать вещи сложно", — гласит аксиома программной инженерии, и CSS не является исключением. Здесь собраны некоторые соображения, связанные с именованием пользовательских свойств CSS. Я буду использовать термины "переменная" и "пользовательское свойство" как взаимозаменяемые, поскольку для целей определения того, как их называть, это фактически одно и то же.FrontendCSS Блочная модель/Box Model CSS — фундаментальная концепция, позволяющая размещать и выравнивать элементы на веб-странице. Владение блочной моделью необходимо для управления отступами, размерами, позиционированием и разработкой макета веб-страницы в целом.FrontendCSS Внедрение текучей типографики означает создание текста, адаптирующегося к различным размерам экрана. По мере совершенствования технологий продолжают появляться устройства различных форм и размеров. Как фронтенд-разработчик, вы должны создавать приложения, которые хорошо адаптируются к различным размерам экрана. Дизайн с использованием текучей типографики улучшает пользовательский опыт и доступность; в этой статье мы расскажем как это сделать.FrontendCSS Сегодня я хочу рассказать о том, как я подхожу к CSS-архитектуре в своих проектах. Давайте покопаемся!FrontendCSS Сегодня я хочу поговорить о бесклассовых и основанных на классах дизайн-системах CSS, бойлерплейтах и фреймворках: чем они отличаются, какой подход я предпочитаю и так далее.FrontendTailwind Tailwind CSS - мой любимый CSS-фреймворк, которым я пользуюсь с 2018 года. Позвольте мне поделиться своими знаниями и соображениями, полученными благодаря многолетнему опыту.Frontend Отдавайте предпочтение SVG, а не PNG, доверяйте браузерам в вопросах уменьшения масштаба, отказывайтесь от непонятных форматов — это полное, исчерпывающее руководство по favicon/фавикон для современного веба. Включает шаги для статического HTML и Webpack.FrontendCSS В этой статье мы рассмотрим использование CSS свойства gap, позволяющее очень просто добавлять пространство между элементами и решающее ряд проблем с вёрсткой, беспокоивших разработчиков на протяжении многих лет.FrontendCSSa11y Состояние фокуса пользователя совершенно не учитывается веб-разработчиками. Представьте себе навигацию по сайту без чёткого указания того, где вы находитесь и с чем взаимодействуете; это сбивает с толку. Именно здесь на помощь приходят CSS-псевдоклассы, такие, как :focus, :focus-within и :focus-visible. Цель этой статьи — пролить свет на важность состояния фокуса в веб-разработке.FrontendCSS Мы переживаем некий ренессанс CSS: новые возможности, техники, эксперименты и идеи появляются в таком количестве, какого мы не видели со времён "CSS3". Легко почувствовать себя подавленным, когда, кажется, что твоя профессия развивается с бешеной скоростью, но Джефф Грэм (Geoff Graham) считает, что "современный" CSS в 2023 году фактически сделал CSS "проще" в написании.SEOFrontend Как работать с редиректами и каковы последствия их использования — вот несколько вопросов, возникающих в процессе SEO-аудита. Некоторые SEO-эксперты более фаталистично, чем другие, относятся к тому, как редиректы могут повлиять на рейтинг вашего сайта на страницах результатов поисковых систем (SERP).FrontendCSSa11y Иногда требуется, чтобы список отображался не вертикально, а в виде горизонтального списка (как в навигационном меню).Frontend Давайте разберёмся нужны ли бандлеры для сборки JavaScript проектов? Есть ли выгода от пакетирования, или лучше загружать множество небольших js-файлов?FrontendCSS В Chrome 120 включена функция заглядывающей вперёд вложенности.FrontendCSS Выберите оптимизированный перенос текста, для красоты, а не для скорости.FrontendCSSa11y Оптимизация и настройка под пользователей, предпочитающих непрозрачный пользовательский интерфейс.FrontendCSS CSS — постоянно развивающийся язык. С каждой итерацией он становится все лучше и лучше. Поэтому важно следить за новейшими возможностями CSS, чтобы использовать их в своих проектах и меньше зависеть от библиотек сторонних разработчиков.FrontendCSS Для frontend-разработчика одним из самых утомительных занятий является определение свойств текстовых элементов для различных размеров экрана с помощью медиа-запроса, что приводит к созданию большого файла css. В этой статье мы расскажем как сделать тексты на сайте отзывчивыми без использования медиа-запроса, тем самым сэкономив время и место.FrontendCSS Каскадная таблица стилей (CSS) — это мощный язык стилей, помогающий фронтенд разработчикам оформлять обычные веб-страницы. Однако при использовании этого языка стилей можно допустить ряд ошибок мешающих писать эффективный код. В данной статье рассматриваются некоторые распространённые ошибки и предлагается решение для каждой из них.FrontendCSSBEM Одним из наиболее распространённых и сложных вопросов, с которыми сталкиваются фронтенд-инженеры, являются соглашения об именовании CSS. С популярностью метода Блок Элемент Модификатор (БЭМ) многие привыкли организовывать свои стили по удобной схеме.FrontendCSS В Интернете существует множество способов переключения между светлыми и тёмными темами. Мы можем использовать JavaScript или медиазапрос prefers-color-scheme в CSS для переключения между темами на основе системных предпочтений пользователя.FrontendCSS Узнайте, как использовать @scope для выбора элементов только в ограниченном поддереве DOM.FrontendCSS Я написал A Modern CSS Reset почти 4 года назад, и, да, он не слишком хорошо сохранился. Несколько дней назад я заметил, что на него снова ссылаются, и подумал, что, вероятно, это хорошая идея — опубликовать обновлённую версию.FrontendCSS Соглашения об именовании CSS улучшают взаимодействие членов команды при работе над проектами, повышают сопровождаемость и масштабируемость проекта, позволяя разработчикам оптимизировать свои рабочие процессы. В этой статье мы погрузимся в мир соглашений об именовании CSS, покажем практические примеры и преимущества, которые они дают в процессе разработки.BackendPHPFrontendJavaScript Насладитесь быстрым процессом создания зависимостей front-end в ваших PHP-проектах благодаря возможностям управления пакетами Bun.FrontendCSS CSS развивается быстрее, чем когда-либо. С учётом всех новых возможностей, которые появились — и ещё появятся — после появления Flexbox и Grid несколько лет назад, меняется и способ написания CSS. В этой статье Geoff Graham рассказывает о том, какие функции оказали наибольшее влияние на его нынешние подходы к CSS, а также о тех, которые не оказали (по крайней мере, пока).FrontendCSS Сдвиги макета CSS означают неожиданное перемещение (или сдвиг) элементов в макете веб-страницы в процессе рендеринга. Это происходит при изменении размеров или положения элементов, что приводит к перетеканию или смещению содержимого на странице. Сдвиги макета могут привести к ухудшению пользовательского интерфейса, так как перемещение может нарушить взаимодействие с пользователем или затруднить чтение, или доступ к содержимому.FrontendCSS Пользовательские свойства CSS, известные как переменные, — это мощная функция, позволяющая разработчикам определять многократно используемые значения в таблицах стилей. Использование пользовательских свойств позволяет значительно повысить удобство повторного использования и сопровождения кода, а также создавать динамические стили для своих веб-проектов. Цель данной статьи — всесторонне объяснить пользовательские свойства CSS и их применение с помощью функции var.FrontendJavaScriptCSSHTML В Интернете пагинация — это способ разбиения больших фрагментов содержимого на более мелкие части. В этой статье мы рассмотрим простой способ разделения содержимого на ряд "страниц" с помощью HTML, CSS и обычного JavaScript.FrontendCSS Рефакторинг кодовой базы должен привести к аналогичной или повышенной производительности и улучшению состояния кодовой базы. В конце концов, если развёртывание обновлённой базы вызовет проблемы с загрузкой или производительностью, это приведёт к снижению трафика и доходов. К счастью, существует множество методов оптимизации, которые можно применить для решения потенциальных проблем с размером файлов и производительностью.FrontendCSS Логические свойства CSS — эффективный способ управления макетом веб-страниц. С течением времени CSS развивался в соответствии с требованиями современного веб-дизайна, и одним из значительных достижений последних лет стало появление логических свойств CSS. В этой статье мы познакомимся с логическими свойствами CSS, покажем, что они собой представляют, чем отличаются от традиционных (физических) свойств и почему они важны для создания гибких и отзывчивых макетов.FrontendCSS z-index — свойство, используемое для управления порядком расположения слоёв в документе. Элементы с большим значением z-index располагаются над элементами с меньшим значением. Подобно тому, как оси x и y на странице определяют расположение элементов по горизонтали и вертикали, z-index определяет, как они располагаются друг над другом по оси z.FrontendCSS В этой статье мы подробно рассмотрим сам процесс рефакторинга, стратегию инкрементного рефакторинга, визуальное регрессионное тестирование и сопровождение отрефакторенной кодовой базы.FrontendCSS Рефакторинг CSS — задача не из лёгких: его нужно провести так, чтобы не создать проблем. Сначала необходимо проанализировать существующую кодовую базу, провести аудит состояния CSS-кодовой базы, выявить слабые места, согласовать подход и убедить руководство в необходимости вложения времени и ресурсов в этот процесс.FrontendCSS Контейнерные запросы CSS — интересное дополнение к миру CSS. В этой статье мы дадим вам базовое представление о контейнерных запросах CSS и о том, как они работают.FrontendCSSSCSSSass Миксины SCSS обеспечивают эффективный способ повторного использования CSS-кода. Миксины уменьшают дублирование и улучшают структуру кода за счёт инкапсуляции стилей в блоки многократного использования. Благодаря возможности принимать аргументы, миксины становятся невероятно адаптивными и универсальными. В этой статье мы расскажем о том, как SCSS-миксины улучшают разработку фронтенда, способствуя модульности и согласованности кода, и упрощая написание CSS.FrontendCSS В этой статье мы рассмотрим несколько способов стилизации скроллбара в CSS, в разных браузерах, чтобы вы могли настроить скроллбар по умолчанию в соответствии с вашим брендом или дизайном.FrontendCSS Со свойствами фона CSS можно сделать очень многое. В этой статье мы рассмотрим, как использовать свойство background-size для установки размера фонового изображения, а также изучим варианты позиционирования фонового изображения с помощью background-position.FrontendCSS Бывают случаи, когда действительно необходимо поддерживать определённое соотношение между шириной и высотой отзывчивых элементов на веб-странице. Долгое время это можно было сделать с помощью различных CSS-трюков. Свойство CSS aspect-ratio изменило ситуацию: теперь мы можем задавать соотношение сторон элемента в одной строке кода. Давайте рассмотрим, как использовать свойство aspect-ratio.FrontendCSS В этой статье мы рассмотрим некоторые CSS трюки, которые позволят создать анимацию наведения для раскрытия наших изображений.Frontend Существуют различные способы использования веб-хранилищ в веб-приложениях. Front-end разработчики используют современный браузерный API веб-хранилища для создания более персонализированных, эффективных и отзывчивых веб-сайтов. В этой статье мы рассмотрим множество примеров использования, которые помогут вам создавать привлекательные веб-приложения.FrontendCSSBEM Следование CSS методологии гарантирует, что все, кто участвует в процессе разработки, говорят на одном языке. БЭМ и SMACSS отличаются друг от друга, но имеют ряд уникальных преимуществ.FrontendCSSHTML В современном цифровом ландшафте подход, ориентированный на мобильные решения (mobile-first), приобрёл большое значение в веб-дизайне и разработке. Применяя подход mobile-first в HTML и CSS, вы отдаёте приоритет потребностям мобильных пользователей и обеспечиваете бесперебойную и увлекательную работу вашего сайта на небольших экранах. В этой статье мы расскажем о принципах и преимуществах mobile-first
дизайна и реализации конкретных стратегий в HTML и CSS, чтобы вы могли применить эту методику.FrontendCSS Мы изучим различные подходы к сокрытию элементов веб-страниц с помощью CSS и оценим их производительность.FrontendCSS В статье объясняется и демонстрируется, как использовать два CSS свойства, которые могут помочь при создании отзывчивых макетов — object-fit и object-position.FrontendCSS Предварительная фильтрация набора дочерних элементов перед применением c к ним логики An+B.FrontendCSS Одна из наших любимых функций CSS препроцессора теперь встроена в CSS: вложения правил стиля.FrontendCSS В этой статье я расскажу о том, как лучше всего использовать CSS медиа-запросы для достижения отзывчивости сайта.FrontendCSS В постоянно развивающемся мире веб-разработки, где CSS является ключевым элементом стиля, освоение техники рефакторинга CSS имеет решающее значение для создания эффективных и удобных в обслуживании таблиц стилей. Рефакторинг CSS позволяет оптимизировать код, устранить избыточность и повысить общее качество кода. Применение правильных техник может превратить запутанные таблицы стилей в хорошо организованный, модульный и легко обслуживаемый код. В этой статье мы расскажем вам о техниках рефакторинга CSS.FrontendHTMLa11y Если вы новичок в веб-разработке, то, возможно, слышали термин "Семантический HTML" и задавались вопросом, что он означает. Проще говоря, Семантический HTML — это использование разметки HTML для передачи смысла содержимого веб-страницы, а не только её внешнего вида.FrontendSass Написание CSS имеет решающее значение для создания красивых и функциональных веб-сайтов, но управление CSS может стать сложной задачей по мере роста размеров и сложности сайтов. Вот тут-то и появляются препроцессоры CSS, такие, как Sass. В этой статье вы познакомитесь с Sass и узнаете, как он может упростить рабочий процесс и помочь писать более эффективный и удобный код.FrontendCSS Контейнерные запросы позволяют стилизовать элементы в зависимости от доступного пространства. Они позволяют создавать устойчивые адаптивные компоненты.FrontendCSS Узнайте, как Flexbox и Grid позволяют создавать плавно реагирующие макетные сетки без медиа-запросов.SEOFrontend Вы создали замечательный веб-сайт, но как сделать так, чтобы люди могли найти его через поисковые системы? В этой статье мы рассмотрим 10 лучших рекомендаций, чтобы ваша статья не только выделялась, но и хорошо ранжировалась в поисковых системах.FrontendCSSBEM Чистый и организованный код имеет решающее значение в современных веб-проектах, и разработчики постоянно ищут способы улучшить удобство сопровождения и организации кода. К счастью, для достижения этой цели существуют различные методы, включая популярную методологию Блок Элемент Модификатор (БЭМ), и в этой статье объясняется, как работает БЭМ и почему вы должны начать его применять.FrontendCSS Новые viewport единицы измерения — интригующая и мощная функция, которую рассматривают для включения в CSS, и эта статья поможет узнать о них и о том, как ими пользоваться.FrontendCSS Шпаргалка по CSS селекторам. С подсказками, как выбирать HTML элементы по классу, имени, атрибутам и списку дочерних селекторов.FrontendCSS В дополнение к математическим функциям CSS были добавлены тригонометрические функции sin(), cos(), tan(), asin(), acos(), atan() и atan2(). Эти функции определены в модуле Значения и единицы измерения CSS уровня 4
и доступны во всех браузерах.FrontendCSS Более детальный контроль над CSS трансформациями с помощью индивидуальных свойств трансформации элементов translate, rotate и scale.FrontendCSS CSS функция color-mix() появилась в Chrome 111. В этой статье объясняется, как использовать эту функцию для смешивания цветов в таблицах стилей.FrontendCSS В мире дизайна маскирование — популярная техника достижения уникальных дизайнерских эффектов. Как дизайнер, я использовал его много раз, но редко использую в Интернете. Думаю, причина, по которой я не использую CSS маски, заключается в поддержке браузеров. Они частично поддерживаются в браузерах blink (Chrome и Edge) и полностью поддерживаются в Safari и Firefox.FrontendCSSTailwind Tailwind CSS v3.3 уже здесь — он содержит множество новых функций, о которых люди давно просили, и множество новых вещей, о которых вы даже не подозревали.JavaScriptFrontend Cookie были единственным способом хранения временной и локальной информации, но теперь у нас есть localStorage. Он широко обсуждается и используется во множестве приложений JavaScript. В этой статье мы рассмотрим всё, что нужно знать о localStorage в JavaScript.JavaScriptFrontend Удалите функции таймаута и избавьтесь от связанных с ними багов, вот событие которое действительно нужно: scrollend.FrontendCSS CSS — важнейшая часть дизайна любого сайта, но разобраться в тонкостях его использования бывает непросто. Одна из самых важных вещей, которую нужно понять, — это разница между использованием rem и em в CSS и то, зачем/когда следует использовать тот или иной вариант.JavaScriptFrontendBackend Большинство языков программирования имеют концепцию модулей: способ определить функции в одном файле и использовать их в другом.JavaScriptFrontendHTMLCSS Во второй части рассмотрим несколько примеров непосредственного использования веб-платформы в качестве альтернативы некоторым решениям, предлагаемым фреймворкамиJavaScriptFrontend В этой статье подробно рассматривается несколько технических возможностей, которые являются общими для всех фреймворков. Объясняется как они реализуются в различных фреймворках и какова стоимость их применения.JavaScriptFrontendHTML Проверка формы — одна из основных причин использования клиентского JavaScript. Это может предотвратить ошибки ввода пользователя до того, как выше приложение попытается отправить данные на сервер.CSSTailwindFrontend Я продемонстрирую 10 лучших функций, предлагаемых в Tailwind CSS v3.0, чтобы вы могли начать использовать их и улучшать свой опыт фронтэнд разработки.SassFrontend В зависимости от размера проекта над которым вы работаете, вы можете структурировать Sass двумя способами: простым для небольших и более сложным для крупных проектов.TailwindCSSFrontend В этом году было много шумихи вокруг популярного CSS фреймворка Tailwind. Хочу поделиться мыслями и опасениями по поводу UI этого фреймворка. У меня был небольшой опыт написания utility-first CSS кода, когда я начинал свою карьеру во фронтенде несколько лет назад.JavaScriptFrontendBackend На днях коллега подошёл ко мне со строкой кода, которую нашёл на StackOverflow, и спросил, как это работает. И я подумал, что это отличный пример четырёх концепций от среднего до продвинутого уровня JavaScript, поэтому решил записать и обосновать своё объяснение.HTMLFrontend Семь редко используемых HTML атрибутов, о которых вы возможно не знали.CSSFrontend Часто хочется, чтобы был способ избежать возникновения определённой проблемы или поведения CSS. Вы знаете, что контент динамический, и на веб-странице всё может измениться, что увеличивает вероятность возникновения проблемы с CSS или странного поведения.JavaScriptFrontendBackend В JavaScript hoisting позволяет использовать функции и переменные до их объявления. В этой статье мы узнаем что такое hoisting, и как он работает.CSSFrontend Важно иметь постоянное соотношение ширины и высоты изображений и других отзывчивых элементов. Мы много лет использовали в CSS хак с отступами, но сейчас у нас есть встроенная поддержка соотношения сторон в CSS. В этой статье я расскажу, что такое соотношение сторон, как мы его использовали и как это делать по-новому. Конечно, будут варианты использования с подходящими запасными вариантами.CSSFrontend В этой статье я хочу поделиться, тем что я делаю при CSS масштабировании элементов в DevTools браузера.CSSFrontend Мы не можем говорить о веб-разработке, не упоминая Отзывчивый Дизайн. В наши дни это просто данность, и так было уже много лет. Медиа запросы — часть отзывчивого дизайна, и они никуда не денутся. С момента появления медиа-запросов (буквально десятилетия назад) CSS эволюционировал до такой степени, что существует множество трюков, которые могут нам помочь существенно сократить количество медиа-запросов. В некоторых случая я покажу вам, как заменить несколько медиа-запросов только одним CSS объявлением. Эти подходы могут привести к уменьшению объёма кода, упрощению обслуживания и большей степени привязаны к имеющемуся контенту.CSSGridFrontend Если вы когда-нибудь пытались разместить прилипающий элемент в макетной сетке grid и наблюдали, как элемент прокручивается вместе с остальным содержимым, вы могли прийти к выводу, что position: sticky не работает с CSS Grid.CSSFrontend Откройте возможности селекторов атрибутов CSS, их синтаксис и практическое применение, включая стилизацию по значению, состоянию и пользовательским атрибутам данных.CSSFrontend Недавно я добавил в этот блог простой визуальный эффект, который мне быстро понравился: когда вы наводите курсор на ссылку, анимированное подчёркивание ссылки раскрывается из центра. Создать этот эффект на удивление легко и не требует добавления каких-либо дополнительных элементов в DOM HTML.CSSGuideFrontend Рассмотрим лучшие способы обработки цветов в CSS, несколько советов по их использованию в дизайн-системе и то, что можно ожидать от цветов в ближайшем будущем.VimToolsHTMLFrontend Мы рассмотрим несколько возможностей Emmet плагина для vim на конкретных примерах, и к концу этой статьи вы будете выдавать html-код, как по волшебству, и вам будет интересно узнать больше!FrontendCSSBEM При разработке программного обеспечения важно согласовывать общий курс, технологии и методологии. Эти соглашения должны быть результатом обсуждений, знаний, а иногда голосований.