Добро пожаловатьhttps://shabalin.online/https://shabalin.online/blog/ally/guiding-principles-default-or-death/https://shabalin.online/blog/ally/guiding-principles-default-or-death/Sat, 26 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/ally/guiding-principles-design-for-implementation/https://shabalin.online/blog/ally/guiding-principles-design-for-implementation/Sun, 15 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/ally/guiding-principles-parity-is-paramount/https://shabalin.online/blog/ally/guiding-principles-parity-is-paramount/Sun, 27 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/ally/guiding-principles-perfection/https://shabalin.online/blog/ally/guiding-principles-perfection/Fri, 25 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/ally/guiding-principles-structure-first/https://shabalin.online/blog/ally/guiding-principles-structure-first/Sun, 15 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/ally/guiding-principles-tools-are-not-identities/https://shabalin.online/blog/ally/guiding-principles-tools-are-not-identities/Sun, 15 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/ally/guiding-principles-use-your-words/https://shabalin.online/blog/ally/guiding-principles-use-your-words/Sun, 15 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/ally/tabindex/https://shabalin.online/blog/ally/tabindex/Разбираемся, как управлять порядком фокуса в HTML: преимущества и подводные камни tabindex, проблемы адаптивных макетов на флоксах/грибах и элегантное решение с новыми CSS-свойствами reading-flow и reading-order.Mon, 09 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/ally/wcag-level-a/https://shabalin.online/blog/ally/wcag-level-a/Что означают уровни соответствия WCAG A, AA и AAA, зачем они нужны разработчикам и заказчикам, и приводятся наглядные примеры для каждого уровня — от альтернативного текста к изображениям до сурдоперевода видео и расширенных аудиодескрипций.Thu, 24 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/all-css-specs/https://shabalin.online/blog/css/all-css-specs/Решил я тут себе план для статей создать. Пройдусь по всем спекам и уйду на покойWed, 11 Mar 2026 00:00:00 GMThttps://shabalin.online/blog/css/currentcolor/https://shabalin.online/blog/css/currentcolor/Разбираемся, как работает `currentcolor`, зачем он нужен в современном CSS и почему в эпоху кастомных свойств ему всё ещё есть местоFri, 11 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/default-font-size/https://shabalin.online/blog/css/default-font-size/ Разберёмся, почему нельзя считать 16px постоянным эквивалентом 1em, как корректно учитывать пользовательские предпочтения к размеру шрифта и зачем оставлять браузеру свободу в отображении текста.Wed, 16 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/default-heading-style/https://shabalin.online/blog/css/default-heading-style/Предстоящие изменения в дефолтных браузерных UA-стилях для вложенных заголовков могут повлиять на отображение сайта и вызвать предупреждения в Lighthouse. Узнайте, как правильно задавать стили для элементов h1 и поддерживать корректную иерархию заголовков в веб-разработке.Sat, 12 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/fluid-typography/https://shabalin.online/blog/css/fluid-typography/Технический разбор современных подходов к жидкой (fluid) типографике в CSS: как использовать clamp(), rem, vw, em и другие единицы для создания адаптивной масштабируемой типографической системы. Рекомендации по пропорциям шрифта, поддержке пользовательских настроек, примеры кода и лучшие практики для доступности и гибкого дизайна.Mon, 14 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/functions-and-mixins/https://shabalin.online/blog/css/functions-and-mixins/Узнаем о модуле CSS Functions and Mixins — новой спецификации в CSS, которая добавляет возможность создавать пользовательские функции и в будущем — миксины. Эти инструменты позволяют разработчикам задавать стили с параметрами, переиспользовать их и делать таблицы стилей более эффективными и удобными в поддержке. Функции, определяемые через правило @function, могут динамически вычислять значения и включать условную логику, например, для адаптивного дизайна.Mon, 02 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/css/gap-decoration/https://shabalin.online/blog/css/gap-decoration/Первый публичный черновик CSS Gap Decorations Module Level 1 (17 апреля 2025) описывает новые свойства row‑rule и column‑rule, позволяющие рисовать линии‑разделители в промежутках гридов, флексов и мультиколонок. Документ уточняет, как задавать цвет, стиль, ширину и порядок прорисовки таких декораций, а также как разбивать их на сегменты и смещать концовки. Спецификация расширяет существующие возможности column‑gap/row‑gap, делая оформление «гаттеров» гибким и единообразным для разных типов раскладок.Fri, 18 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/inclusive-dark-mode/https://shabalin.online/blog/css/inclusive-dark-mode/Узнайте, как создать по-настоящему инклюзивный тёмный режим, сочетая продуманный контраст, удобочитаемую типографику и гибкие настройки для разных групп пользователей. В статье приводятся примеры кода, рекомендации по WCAG и практические советы по внедрению тёмной темы в интерфейсе.Tue, 15 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/interest-delay/https://shabalin.online/blog/css/interest-delay/Изучаем новое CSS свойство interest-delay для управления задержками взаимодействия пользователя с элементами. Решаем проблемы с выпадающими меню и улучшаем UX интерфейса.Sat, 04 Oct 2025 00:00:00 GMThttps://shabalin.online/blog/css/item-flow/https://shabalin.online/blog/css/item-flow/Узнаем о новой концепции Item Flow — универсальном подходе к управлению направлением, переносом и «упаковкой» элементов, который объединяет лучшие черты флексы и гриды. Идея включает в себя планы по нативной поддержке «masonry»‑раскладок без дополнительных скриптов и открывает путь к ещё более гибкой верстке в CSS.Fri, 11 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/item-flow-2/https://shabalin.online/blog/css/item-flow-2/Узнаем о новой концепции Item Flow — универсальном подходе к управлению направлением, переносом и «упаковкой» элементов, который объединяет лучшие черты флексы и гриды. Идея включает в себя планы по нативной поддержке «masonry»‑раскладок без дополнительных скриптов и открывает путь к ещё более гибкой верстке в CSS.Fri, 22 Aug 2025 00:00:00 GMThttps://shabalin.online/blog/css/line-height-units/https://shabalin.online/blog/css/line-height-units/Узнайте, как новые CSS-единицы lh и rlh помогут выстроить идеальный вертикальный ритм, сделать текст аккуратнее и профессиональнее без лишних усилий.Mon, 28 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/logical-properties/https://shabalin.online/blog/css/logical-properties/Разбираемся с логическими свойствами CSS - что это такое, как их использовать и почему они важны для современной вёрсткиSun, 30 Mar 2025 00:00:00 GMThttps://shabalin.online/blog/css/outcomes-2024/https://shabalin.online/blog/css/outcomes-2024/Посмотрим какие CSS-свойства были добавлены в браузеры в 2024Tue, 10 Dec 2024 00:00:00 GMThttps://shabalin.online/blog/css/overscroll-behavior/https://shabalin.online/blog/css/overscroll-behavior/Разбираем CSS-свойство overscroll-behavior: предотвращаем scroll chaining, управляем bounce и pull-to-refresh, улучшаем UX.Tue, 19 Aug 2025 00:00:00 GMThttps://shabalin.online/blog/css/pixel/https://shabalin.online/blog/css/pixel/Разберёмся в неделимости атома. Ой, точнее пикселяSun, 19 Apr 2026 00:00:00 GMThttps://shabalin.online/blog/css/scroll-anchoring/https://shabalin.online/blog/css/scroll-anchoring/Если вы когда-либо читали длинную статью в интернете и внезапно теряли место, где остановились, потому что страница «подпрыгнула» из-за загрузившейся рекламы или изображений, то вы сталкивались с проблемой, которую призван решать CSS Scroll Anchoring.Fri, 13 Mar 2026 00:00:00 GMThttps://shabalin.online/blog/css/scroll-driven/https://shabalin.online/blog/css/scroll-driven/Если у вас есть анимации, которые должны работать только при прокрутке, то эта статья для вас. В статье я расскажу про два типа временных шкал, способы объявления шкал и примеры использования. Без JavaScript. Без сложных примеров. Только практические примеры и объяснения основанные на спецификации.Sat, 18 Apr 2026 00:00:00 GMThttps://shabalin.online/blog/css/scroll-snap/https://shabalin.online/blog/css/scroll-snap/Разбираем CSS Scroll Snap Module Level 1: что такое scroll container, scrollport, snapport, scroll-padding, scroll-margin и как управлять привязкой прокрутки в интерфейсах.Sun, 22 Mar 2026 00:00:00 GMThttps://shabalin.online/blog/css/scrollbars-styling/https://shabalin.online/blog/css/scrollbars-styling/Практический разбор CSS Scrollbars: цвета и ширина скроллбаров, ограничения спецификации и советы по доступностиThu, 12 Mar 2026 00:00:00 GMThttps://shabalin.online/blog/css/snapshot-2026/https://shabalin.online/blog/css/snapshot-2026/Разбираемся, что такое CSS Snapshot, зачем он нужен и как классифицирует все модули CSS — от стабильных рекомендаций до экспериментальных фич. Просто о сложном документе W3C.Wed, 11 Mar 2026 00:00:00 GMThttps://shabalin.online/blog/css/stateofcss-2025/https://shabalin.online/blog/css/stateofcss-2025/Thu, 21 Aug 2025 00:00:00 GMThttps://shabalin.online/blog/css/text-fit/https://shabalin.online/blog/css/text-fit/Разбираем новое CSS-свойство text-fit из CSS Text Module Level 5: grow, shrink, consistent, per-line, per-line-all и процентные ограничения с интерактивными примерами.Sat, 04 Jul 2026 00:00:00 GMThttps://shabalin.online/blog/css/text-wrap/https://shabalin.online/blog/css/text-wrap/Совсем недавно в Safari Technology Preview появилась поддержка text-wrap: pretty, и это открывает перед нами совершенно новые возможности по улучшению типографики в вебе. В этой статье мы разберём, чем именно хороша реализация в WebKit, чем она отличается от text-wrap: balance и других значений, и почему это так важно для создания хорошо читаемого текста.Thu, 10 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/thin-fonts/https://shabalin.online/blog/css/thin-fonts/Почему ультратонкие гарнитуры губят читаемость, снижают конверсии и нарушают доступность, и как начинающим UI/UX‑дизайнерам выбрать типографику, которая действительно работает для пользователей.Thu, 17 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/tips/global-focus-visible/https://shabalin.online/blog/css/tips/global-focus-visible/Узнайте как сделать функциональное состояние фокуса для всех элементов.Fri, 11 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/visited-links-private/https://shabalin.online/blog/css/visited-links-private/В Chrome 136 изменилась логика работы псевдокласса :visited за счёт «разделения» истории посещённых ссылок. Эта новация защищает пользователей от утечек приватных данных и решает старую проблему безопасности, существовавшую более 20 лет.Sun, 13 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/css/why-not-root/https://shabalin.online/blog/css/why-not-root/Thu, 04 Sep 2025 00:00:00 GMThttps://shabalin.online/blog/css/why-root/https://shabalin.online/blog/css/why-root/Wed, 27 Aug 2025 00:00:00 GMThttps://shabalin.online/blog/devtools/cpu-throttling-calibration/https://shabalin.online/blog/devtools/cpu-throttling-calibration/Сегодня узнаем о новой функции калибровки троттлинга в Chrome DevTools, которая помогает точнее эмулировать работу сайта на реальных мобильных устройствах. Вы узнаете, как использовать CPU-троттлинг, чтобы устранить узкие места производительности на основе данных.Sun, 13 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/digest/weekly-digest-1/https://shabalin.online/blog/digest/weekly-digest-1/Самые интересные новости из мира фронтенд-разработки за последнюю неделюThu, 05 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/digest/weekly-digest-2/https://shabalin.online/blog/digest/weekly-digest-2/Самые интересные новости из мира фронтенд-разработки за последнюю неделюMon, 09 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/digest/weekly-digest-3/https://shabalin.online/blog/digest/weekly-digest-3/Самые интересные новости из мира фронтенд-разработки за последнюю неделюMon, 16 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/digest/weekly-digest-4/https://shabalin.online/blog/digest/weekly-digest-4/Самые интересные новости из мира фронтенд-разработки за последнюю неделюMon, 23 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/digest/weekly-digest-5/https://shabalin.online/blog/digest/weekly-digest-5/Самые интересные новости из мира фронтенд-разработки за последнюю неделюMon, 30 Jun 2025 00:00:00 GMThttps://shabalin.online/blog/digest/weekly-digest-6/https://shabalin.online/blog/digest/weekly-digest-6/Самые интересные новости из мира фронтенд-разработки за последнюю неделюMon, 07 Jul 2025 00:00:00 GMThttps://shabalin.online/blog/html/headingoffset-and-reset/https://shabalin.online/blog/html/headingoffset-and-reset/Разбираемся, как headingoffset и headingreset меняют вычисленные уровни заголовков, чем помогают компонентам и почему не возвращают алгоритм структуры документа.Tue, 01 Sep 2026 00:00:00 GMThttps://shabalin.online/blog/javascript/closure/https://shabalin.online/blog/javascript/closure/Понимание замыканий в JavaScript для новичков: практическое руководство от простого к сложному. Узнайте, что такое замыкания, как они работают и как применять их для создания приватных данных, асинхронного кода и функциональных паттернов. Статья включает множество примеров кода и задачи для подготовки к собеседованиям.Sun, 27 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/javascript/firefox-first-browser-temporal/https://shabalin.online/blog/javascript/firefox-first-browser-temporal/Почему именно Firefox 139 первым включает Temporal, какую роль сыграло сообщество и как использовать новую API на практике — подробный наставнический обзор с примерами.Fri, 18 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/javascript/nodejs-24/https://shabalin.online/blog/javascript/nodejs-24/Разбираем основные фичи Node.js 24 (V8 13.6, npm 11, AsyncContextFrame, Permission Model, Undici 7), объясняем сложные термины простыми словами и даём пошаговый план, как подготовить проект к будущему LTS-релизу.Tue, 06 May 2025 00:00:00 GMThttps://shabalin.online/blog/javascript/nullish-coalescing/https://shabalin.online/blog/javascript/nullish-coalescing/Одним из полезных механизмов в JavaScript, является оператор nullish coalescing (??). Он позволяет аккуратно подставлять значения по умолчанию там, где логический оператор ИЛИ (||) может неудачно «перекрыть» нужные данные.Sat, 12 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/javascript/tips/node-styles/https://shabalin.online/blog/javascript/tips/node-styles/Сегодня разберём, как обойтись без chalk, colors, picocolors и прочего «цветного зоопарка» и при этом получить аккуратный, читаемый вывод в терминале. Покажу всё глазами наставника — с практическими советами и большим количеством кода.Wed, 23 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/javascript/%D1%81ompute-pressure/https://shabalin.online/blog/javascript/%D1%81ompute-pressure/W3C Compute Pressure API Level 1 (кандидат в рекомендации, апрель 2025) — как определять нагрузку на CPU прямо из JavaScript и грамотно реагировать на неё.Thu, 24 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/longrid/component-driven-development/https://shabalin.online/blog/longrid/component-driven-development/Узнайте, как компонентный подход помогает справляться со сложностью современного фронтенда — изоляция, переиспользование и командная эффективность.Mon, 12 May 2025 00:00:00 GMThttps://shabalin.online/blog/longrid/native-npm-package/https://shabalin.online/blog/longrid/native-npm-package/Mon, 21 Apr 2025 00:00:00 GMThttps://shabalin.online/blog/other/clipboard-api/https://shabalin.online/blog/other/clipboard-api/Clipboard API позволяет работать с буфером обмена браузера. В этой статье мы рассмотрим основные возможности API и как их использовать в проектах.Thu, 03 Jul 2025 00:00:00 GMThttps://shabalin.online/blog/other/era-of-individual-tools/https://shabalin.online/blog/other/era-of-individual-tools/Настала эпоха, когда любой человек без особых навыков программирования может создать себе инструмент, который решит его боль.Mon, 04 May 2026 00:00:00 GMThttps://shabalin.online/blog/other/junior-problem/https://shabalin.online/blog/other/junior-problem/Российский рынок труда в сфере информационных технологий в 2024-2025 годах представляет собой сложную и парадоксальную картину, характеризующуюся одновременным наличием избытка специалистов нижнего уровня и острого дефицита квалифицированных профессионалов средней и старшей ступеней. Mon, 29 Sep 2025 00:00:00 GMThttps://shabalin.online/blog/other/layout-highlighter/https://shabalin.online/blog/other/layout-highlighter/Обзор расширения Layout Highlighter. Как простой инструмент для подсветки вложенных элементов помогает в отладке вёрстки и анализе DOM-структуры.Sun, 22 Jun 2025 00:00:00 GMT