Я запрещаю вам margin

#почитать

В CSS-верстке расстояния между элементами часто реализуют через margin. Это приводит к техдолгу: элементы повышают взаимные зависимости, усложняя поддержку и масштабирование. Откажитесь от margin, это музыка дьявола, это она играет в аду! Юзайте только gap. Да, это требует дополнительных оберток, но создает четкие, самодостаточные узлы. Результат: чистый код, предсказуемое поведение, меньше техдолга

⏱Читать статью

Странные CSS-свойства, но, возможно, полезные

#почитать

Я много лет рассказываю о CSS. Показываю, как применять его, чтобы не было больно. Рассказываю про лучшие практики. Забочусь о вас, чтобы вы не стреляли себе в ноги.
Только и у меня бывают непонятки с CSS. Сижу и задаю себе вопрос «А зачем это свойство нужно?». У меня даже подгорает на авторов спецификаций. Конечно, так не всегда, но всё же бывает.
Поэтому за время работы у меня появился список свойств, которые я не понимаю, чем они полезны. Не поймите меня неправильно. Я понимаю, что они делают. Не понимаю, где найти ситуации, в которых они помогут.
В общем, я хочу рассказать о них вам. Зачем? Для обмена опытом. Может, у вас получится открыть мне глаза и показать всю пользу этих свойств.

⏱Читать статью

That Time I Tried Explaining HTML and CSS to My 5-Year Old Niece

#почитать

I would like to tell you what I learned from a five-year old child about HTML and CSS. It’s funny how explaining something you do almost naturally teaches you about yourself and what you take for granted.

⏱Читать статью

Анимированный UI: как улучшить взаимодействие с пользователем

#почитать

Анимация пользовательского интерфейса прошла долгий путь за последнее десятилетие, они превратились в универсальный цифровой язык, который люди узнают и понимают. Эти микровзаимодействия позволяют дизайнерам общаться с пользователями посредством движения и анимации, предоставляя им рекомендации, контекст и создавая захватывающий пользовательский опыт.
В продакшене анимация всегда балансирует между выразительностью и производительностью. Чем сложнее сцена, тем выше нагрузка на процессор, особенно на мобильных устройствах. Поэтому важно оптимизировать: использовать GPU-дружественные свойства (transform, opacity), избегать тяжёлых reflow, а для сложных эффектов — применять библиотеку, которая работает с отложенным рендерингом, например Framer Motion или GSAP. Это не только повышает плавность, но и снижает энергопотребление, что прямо влияет на опыт пользователя.

⏱Читать статью

Masonry Layout is Now grid-lanes

#почитать

It's settled! A new CSS display property keyword called grid-lanes will trigger a masonry layout mode.

⏱Читать статью

Leaflet, роутинг и тонна JavaScript: создаем свой планировщик маршрутов с нуля

#почитать

Велосипед, походы, горы — все это требует тщательного планирования. И хотя существует множество отличных сервисов, мне всегда хотелось чего-то большего: платформы, которая объединяла бы в себе гибкий инструмент для создания маршрутов, базу знаний о интересных местах и сообщество единомышленников.
Так я начал в одиночку создавать The Peakline — свой большой проект для аутдор-энтузиастов. Одной из центральных и самых сложных частей этой системы должен был стать планировщик маршрутов. Я решил сделать его максимально функциональным и открытым, чтобы он стал витриной возможностей всего проекта.

⏱Читать статью

Как Markdown захватил мир

#почитать

Почти все элементы мира хайтека, от самых современных ИИ-систем крупнейших компаний до обычных кусков кода, написанных студентами, аннотируются и описываются в одном простом текстовом формате. Когда вы пытаетесь дать сложные инструкции ChatGPT, хотите поделиться списком покупок в Apple Notes или скопировать чью-то домашнюю работу в Google Документах, вы пользуетесь одним и тем же форматом. Самое безумное заключается в том, что этот формат придумал не конгломерат технологических корпораций, а ворчун с добрым сердцем, который сейчас, вероятно, пересматривает фильм Кубрика или болеет за любимую спортивную команду. Но нам стоит разобраться, как родились столь простые текстовые файлы; не только для того, чтобы я мог похвастаться щедростью и умом моих друзей, но и чтобы напомнить вам, как работает Интернет на самом деле: умные люди придумывают хорошие вещи, а затем отдают их бесплатно, снова и снова, пока их технология не захватит мир и не сделает его лучше для всех.

⏱Читать статью

40 самых популярных регулярных выражений в JavaScript

#почитать

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

⏱Читать статью

Я CSS-программист: «Магия» CSS или как превратить язык стилей в Тьюринг-полный ад

#почитать

Представьте, что вы — разумный человек. Вы знаете, что CSS — это язык стилей. Cascading Style Sheets. Для оформления. Не для логики. Не для программирования. Просто цвета, шрифты, отступы.
А потом вы заходите на CodePen.
И там кто-то сделал полностью рабочий калькулятор. На чистом CSS. Без JavaScript.

⏱Читать статью

Статичный сайт на webpack5 с svg sprite

#почитать

Этот стартовый сборка для разработки статичного сайта на Webpack5. Максимально упростил разработку: можно подключать встариваемы модули шаблонов для страниц (header/footer), использовать SASS с удобными миксинами, автоматически собирать SVG-спрайты для иконок. Для продакшна - минификация CSS/JS, удаление console.log и разделение кода на чанки для кэширования.
Ключевые части сборки: html-webpack-plugin генерирует HTML из src/html/views, raw-loader подтягивает include-фрагменты.
SCSS миксины для удобных медиа запросов, краткой их записи +r($md).

⏱Читать статью

Styling ::search-text and Other Highlight-y Pseudo-Elements

#почитать

The new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that.

⏱Читать статью

Изнутри жюри: как мы выбирали лучшую работу на чемпионате по html верстке

#почитать

Когда тебе, как члену жюри, приходится выбирать лучшую работу среди сильных участников, на первый план выходят не только pixel-perfect, но и детали, которые создают ощущение качественного продукта. В чем была наша задача на чемпионате по верстке от HTML Academy, с какими работами мы столкнулись и какие решения заслуживают отдельного внимания — разбираю на реальных примерах финалистов.

⏱Читать статью

3D-таймлайн на чистом JavaScript: как я собирал этот слайдер по шагам

#почитать

Устал от однообразных каруселей? В статье показываю, как шаг за шагом собрать 3D-таймлайн-слайдер с перспективной сеткой, плавной прокруткой и переключением категорий на чистом TypeScript и CSS.

⏱Читать статью

Полный гайд по объекту Date в JavaScript

#почитать

Объект Date позволяет создавать, сравнивать и форматировать дату и время. Используется для отображения текущего времени, вычисления интервалов и работы с таймзонами в веб-приложениях.

⏱Читать статью

Pure CSS Tabs With Details, Grid, and Subgrid

#почитать

Can we use the <details> element as the foundation for a tabbed interface? Why yes, we can!

⏱Читать статью

Веб-приложение без фронтенд-фреймворков в эпоху AI-поиска: личный опыт

#почитать

Опыт одиночной разработки и поддержки долгоживущего веб-приложения: отказ от фронтенд-фреймворков, использование нативных возможностей браузера, работа с Core Web Vitals и влияние AI-поиска на трафик реального проекта.

⏱Читать статью

We Completely Missed width/height: stretch

#почитать

The TL;DR is that stretch does the same thing as declaring 100%, but ignores padding when looking at the available space.

⏱Читать статью

Как реализовать эффект, подобный Liquid Glass, при помощи CSS без JavaScript и шейдеров

#почитать

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

⏱Читать статью

Зачем фавиконов нужно аж 24 штуки?

#почитать

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

⏱Читать статью

There is No Need to Trap Focus on a Dialog Element

#почитать

Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the <dialog> (even in modal mode).

⏱Читать статью