Статьи с тегом «Frontend»
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 При разработке программного обеспечения важно согласовывать общий курс, технологии и методологии. Эти соглашения должны быть результатом обсуждений, знаний, а иногда голосований.